Raspberry Pi als Server für React-Native-Apps

React Native erlaubt es, Apps mit wenigen Zeilen Code zu programmieren. Mit einem entsprechenden Server sprechen Sie so den RasPi vom Smartphone aus an.

2015 veröffentlichte das Unternehmen Facebook React Native als Framework zum Erstellen von mobilen Applikationen. Wie der Name schon andeutet, basiert es auf React, einer Javascript-Bibliothek zum Entwickeln von Webanwendungen.

Das Framework besteht aus drei Schichten: der Laufzeitumgebung für die Anwendung, dem Native-Modul und der Bridge, die die Kommunikation zwischen den beiden anderen Schichten ermöglicht (Abbildung 1). Das Native-Modul dient dazu, Teile der Anwendung mit nativen Komponenten des Zielsystems anzuzeigen. Die Kommunikation erfolgt über Nachrichten im JSON-Format.

Abbildung 1: Von den unterschiedlichen Schichten in React Native dient das Native-Modul dazu, die Elemente der Applikation in native Elemente auf dem Zielsystem zu übersetzen.

Installation

Als Basis kommt ein Raspberry Pi 3B+ mit dem aktuellen Raspbian zum Einsatz [1]. Wollen Sie die Schritte direkt nachvollziehen, laden Sie am besten ein aktuelles Raspbian-Image herunter und schreiben es auf eine SD-Karte. Bevor Sie mit der Installation neuer Software beginnen, bringen Sie erst einmal den RasPi auf den aktuellen Stand (Listing 1, Zeile 1 und Zeile 2).

$ sudo apt update
$ sudo apt upgrade
$ wget https://nodejs.org/dist/v10.15.3/node-v10.15.3-linux-armv7l.tar.xz
$ tar -xvf node-v10.15.3-linux-armv7l.tar.xz
$ export VERSION=v10.15.3
$ export DISTRO=linux-armv7l
$ sudo mkdir -p /usr/local/lib/nodejs
$ sudo tar -xJvf node-$VERSION-$DISTRO.tar.xz -C /usr/local/lib/nodejs --no-same-owner
$ sudo chmod 777 -R /usr/local/lib/nodejs/node-$VERSION-$DISTRO/

Die aktuelle Version von React Native benötigt als Basis eine Node.js-Installation, die mindestens die Versionsnummer 10 trägt. Allerdings ist die Version in Raspbian etwas älter – es bleibt also nichts anderes übrig, als die Software von Hand zu installieren (Listing 1, ab Zeile 3.) Als Nächstes passen Sie die Datei .profile des Benutzers pi an. Öffnen Sie diese mit einem Editor, etwa mit Nano (nano ~/.profile), und fügen Sie die Zeilen aus Listing 2 an.

# Nodejs
VERSION=v10.15.3
DISTRO=linux-armv7l
export PATH=/usr/local/lib/nodejs/node-$VERSION-$DISTRO/bin:$PATH

Beim nächsten Login des Users kommen die Änderungen automatisch zum Zug. Um sie bereits in der aktuellen Session zu aktivieren, lesen Sie die Datei mit dem Kommando source ~/.profile frisch ein. Die neuen Umgebungsvariablen stehen dann bereit. Um zu überprüfen, ob die Installation geklappt hat, setzen Sie in einem Terminal das Kommando node -v ab: Es sollte die v10.15.3 beziehungsweise die von Ihnen installierte Version ausgeben.

Damit ist das System dafür vorbereitet, mit dem Einrichten von React Native zu beginnen. Die Installation dauert eine Weile, es bleibt genug Zeit zum Kaffeekochen. Sie ziehen React Native über das Node-Installationstool Npm ins System (Listing 3, erste Zeile). Lief die Installation glatt durch, legen Sie direkt ein erstes Projekt an (Zeile 2). Dabei erscheint auf der Kommandozeile ein kleiner Dialog. Hier wählen Sie zuerst das Template expo-template-blank aus. Darauf folgt die Frage nach einem Projektnamen – “GPIO” ist hier erst einmal keine schlechte Wahl.

$ npm install -g expo-cli
$ expo init GPIO
$ cd GPIO
$ npm start

Beim Erstellen des Projekts lädt das Framework einige zusätzliche Teile aus dem Netz nach, was wieder etwas dauern kann. Danach starten Sie das Projekt mit den Kommandos aus den Zeilen 3 und 4 von Listing 3. Nun bekommen Sie einen QR-Code angezeigt (Abbildung 2), den Sie mit der Expo-App [2] einscannen. Die finden Sie im Play Store sowie im App Store von Apple, indem Sie nach expo suchen.

Abbildung 2: Nach dem Start der Software auf dem Raspberry Pi scannen Sie den QR-Code mit der Expo-App ein.

Abbildung 3 zeigt das Ergebnis, das im Rahmen des Beispiels als Grundgerüst vorhanden war. Der Zugriff funktioniert aber nur, wenn sich Raspberry Pi und Smartphone in demselben Netzwerk befinden – normalerweise ist das im LAN bei Ihnen daheim der Fall. Jetzt dürfen Sie anfangen, eine eigene App für das Smartphone zu entwickeln. Editieren Sie dazu einfach die Datei App.js im Projekt. Sobald Sie diese speichern, erscheint die Änderung automatisch auf dem Mobilgerät.

Abbildung 3: Nach dem Verbinden mit dem Server auf dem RasPi sehen Sie auf dem Smartphone den ersten Screen einer App mit React Native.

Um schnell in die Programmierung in React Native einzusteigen, gibt es ein kleines Tutorial [3]. Es geht allerdings davon aus, dass Sie schon über etwas Erfahrung mit dem Entwickeln von Webanwendungen und Javascript verfügen. Haben Sie das Tutorial durchgearbeitet, sind Sie in der Lage, erste Apps zu erstellen.

Beispiel-App

React Native arbeitet intensiv mit vorgefertigten Komponenten, wie zum Beispiel <Text>, <View> oder <Image>. Diese haben unterschiedliche Parameter, wie etwa style. Die restlichen Bestandteile eines entsprechenden Programms sind in Javascript geschrieben.