© SkillUp/Shutterstock.com
Moderne Webentwicklung mit React – Teil 5

Eine mobile Tomatenuhr für Android und iOS


Im vierten Teil dieser Serie wurden die Grundlagen zur Entwicklung mobiler Apps mit React Native betrachtet. Vorteil dieser Technologie ist die Entwicklung in JavaScript und die anschließende Übersetzung in native Apps für iOS und Android. Da man am besten anhand von Beispielen lernt, wird im Folgenden ein solches vorgestellt. Dazu müssen viele Themen besprochen werden, u. a. die Gestaltung des UI, Hintergrundverarbeitung und die Nutzung ausgewählter Gerätefunktionen.

Stellen Sie sich vor, Sie kommen früh an Ihren Arbeitsplatz und vor Ihnen liegt ein virtueller Stapel von Aufgaben in Form eines prall gefüllten Postfachs oder Ticketsystems. Neben einigen schnell zu erledigenden Aufgaben, wie ein paar kurzen E-Mails oder Anrufen, liegt dann aber auch die eine oder andere komplexe Aufgabe vor Ihnen: Einen Fehler in einer Software suchen, ein neues Feature entwickeln oder ein weiteres Kapitel zu einem umfassenden Konzept schreiben. Da der Arbeitstag im Normalfall (und zum Glück) begrenzt ist, ist ein Zeitmanagement und eine Strukturierung der Aufgaben wichtig. Vielleicht haben Sie schon von der Pomodoro-Methode [1] gehört: Eine Arbeitsstunde wird in zwei Einheiten aufgeteilt. Wer 25 Minuten intensiv arbeitet, hat sich 5 Minuten Pause verdient: Die Beine vertreten, einen Anruf tätigen oder einfach einen Moment aus dem Fenster schauen. Dann geht es für weitere 25 Minuten im Arbeitsgeschehen weiter. Wichtig ist dabei, dass Sie die 25 Minuten fokussiert durcharbeiten, möglichst ohne Ausnahme. Ausnahmen gibt es natürlich, beispielsweise wenn der Chef anruft oder es im Büro einen Feueralarm gibt.

Dieser Artikel beschreibt die Entwicklung und den Aufbau einer mobilen React-Native-Applikation in Form eines Pomodoro-Managers, in der eine aktuelle Aufgabe spezifiziert und die Anzahl der Pomodoros (= Arbeitseinheiten zu 25 Minuten) bestimmt wird. Dann kann ein Timer mit der Aufgabe gestartet werden, der 25 Minuten herunterzählt, anschließend eine geeignete Erinnerung vornimmt und das aktuelle Pomodoro als bearbeitet kennzeichnet. Nach der 5-Minuten-Pause kann die Uhr mit dem nächsten Pomodoro gestartet werden. Der Timer kann auch jederzeit pausieren. Wir nutzen dieses Beispiel, um die im letzten Teil der Serie begonnene Einführung in React Native zum Entwickeln von nativen Apps zu vervollständigen. Die Entwicklung erfolgt für Android bzw. iOS auf JavaScript-Basis und mit Hilfe der Komponentenbibliothek von React Native. Das Framework bietet eine Sammlung von vorgefertigten und per Styleanweisungen konfigurierbaren Basiskomponenten wie Textfelder, Listen, Layoutcontainer und Buttons. Hinzu kommen natürlich die Kernfunktionalitäten wie die komponentenbasiere Architektur und die Verfügbarkeit von Bibliotheken wie React Hooks. Die Komponenten einer App werden in einer Baumstruktur angelegt und erlauben den Datenaustausch sowie den Zugriff auf gemeinsame Ressourcen (Assets). Komponenten und Services werden in JavaScript oder TypeScript codiert und dann innerhalb eines effektiven Build-Systems in eine native App für das mobile Zielbetriebssystem bereitgestellt. Das hier betrachtete Projekt nutzt zur Entwicklung TypeScript und Expo als Laufzeitumgebung zur Bereitstellung der App sowie weitere Dienste zur Entwicklungszeit.

Das Projekt installieren

Zum Projekt-Set-up liegt der Quellcode der Anwendung auf GitHub [2] vor. Das Repository kann geklont oder als Zip-Datei heruntergeladen werden. Danach kann das Projekt mit den folgenden Kommandos installiert und gestartet werden, wobei zunächst die Laufzeitumgebung Expo installiert werden muss:

npm install expo-cli –global npm install npm start

Expo dient zum einfachen Bereitstellen einer React-Native-Applikation, indem es eine Entwicklungsplattform und zusätzliche Bibliotheken zur Verfügung stellt. Es analysiert zunächst den Quellcode des Projekts und startet eine integrierte Laufzeitumgebung namens Metro, die in Form eines Entwicklungsservers React-Native-Apps bereitstellen kann. Die zugehörige Weboberfläche Metro Bundler öffnet sich während der Ausführung (ausgelöst durch npm start) im Standardbrowser. Hier kann nun durch Links die Zielplattform zur Bereitstellung der App gewählt werden. Danach wird der JavaScript-Quellcode in ein natives Zielprojekt kompiliert und bereitgestellt. Das kann entweder auf einem realen Gerät, das im gleichen Netzwerk wie das Entwicklungssystem registriert ist, oder in einem Desktopemulator für Android oder iOS erfolgen. Die Simulation eines iOS-Geräts gelingt nur, wenn das Entwicklungssystem ein Apple-System ist. Das Unternehmen stellt nämlich exklusiv für Mac-Betriebssysteme im Rahmen der Xcode-Entwicklungsumgebung einen iOS-Simulator (iPhone oder iPad) bereit (Kasten: „Kein iOS ohne macOS und Xcode“).

Kein iOS ohne macOS und Xcode

iOS ist ein geschlossenes System, d. h., für das Erstellen der App-Packages und für die Verteilung auf dem mobilen Device wird Xcode (integrierte Entwicklungsumgebung) und damit ein Mac mit macOS benötigt. Ebenso lässt sich der iOS-Simulator nur unter macOS betreiben. Alternativ kann man einen Cloud-Service nutzen, d. h., einen gehosteten Mac mit allen notwendigen Entwicklungswerkzeugen „mieten“ und über eine Remoteverbindung steuern. Ein solches Angebot bietet der Dienst MacinCloud [3]. Der Bildschirm wird dann auf den eigenen Entwicklungsrechner übertragen. Auf diese Weise kann man das App-Package erstellen und den iOS-Simulator während der Programmierung verwenden. Wir haben gute Erfahrungen mit dem genannten Dienst gemacht. Für den Einstieg gibt es den flexiblen Pay-as-you-go-Plan, d. h., man zahlt nur die Zeiteinheiten für die Nutzung des Macs in der Cloud.

Ein Android-Emulator ist für Entwickler unter Windows direkt zugänglich. Hierfür muss Android Studio als Entwicklungsumgebung (IDE) installiert werden. Sie bietet im Rahmen des Systems AVD (Android Virtual Devices) einen Emulator für Smartphones und Tablets an. Eine genaue Anleitung zur Installation eines Android-Emulators findet sich im Repository [2]. Für die Ausführung der Beispiel-App auf einem realen Gerät muss zunächst Expo aus dem App Store bzw. Play Store installiert werden [4]. Über das Scannen des QR-Codes auf der Weboberfläche des Metro Bundlers innerhalb von Expo wird dann das erstellte native App-Kompilat auf das Gerät geladen und innerhalb der Expo-Laufzeitumgebung ausgeführt.

Diese Vorgehensweise dient nur zur Entwicklung. Die per Expo geführte App kann jederzeit durch die Ausführung von expo eject oder des im letzten Teil dieses Artikels beschriebenen Build-Prozesses in ein natives Programmbündel für iOS bzw. Android exportiert werden. Dieses wiederum kann dann im App Store bzw. Play Store geladen und damit publiziert werden. Als IDE zum Editieren des Quellcodes wird Visual Studio Code (VS Code) verwendet. Nach dem Klonen bzw. Entpacken des Quellcodes kann das Projekt dort durch die Funktion Open Folder geladen werden. Eine Codeänderung wird nach Speicherung direkt erkannt, und die App aktualisiert sich auf dem Zielgerät bzw. im Emulator. Hat das Projekt-Set-up geklappt, startet die App im Emulator oder auf dem Gerät (Abb. 1).

krypczyk_mittmann_react_teil5_1.tif_fmt1.jpgAbb. 1: Die Aufgabenansicht der App

Technologiestack

Das Beispielprojekt nutzt eine Reihe von Zusatzbibliotheken, die über die React-Native-Kernbibliothek hinaus einige Funktionalitäten bereitstellen und über Drittanbieter installiert werden. Als UI-Plattform wird React Native Paper [5] genutzt. Das ist eine Komponentenbibliothek, die Googles Material Design für React-Native-Apps umsetzt. Sie enthält alle wichtigen UI-Komponenten (z. B. für Listen, Bilder, Videos und Eingabeformulare) und erlaubt unter anderem optische Anpassungen von Seitenelementen in Form eines Theming-Mechanismus, mit dem sich beispielsweise Farben oder eine Nachtansicht konfigurieren lassen. Die Unterstützung einer verknüpften Iconbibliothek, beispielsweise zur Darstellung von Buttons, rundet den Funktionsumfang ab. Weiterhin werden in der Beispielanwendung einige Drittanbieterbibliotheken von Expo genutzt, u. a. für das Abspielen von Klängen und das permanente Anzeigen des Bildschirms, da das Gerät sonst in den Stand-by-Modus schalten würde.

Für die Persistierung (Bereitstellung) der Pomodoro-Aufgabe wird die Bibliothek Async Storage genutzt. Sie erlaubt die einfache, asynchrone Persistierung einer JSON-Datenstruktur auf dem lokalen Gerät, ähnlich dem Local Data Store eines Webbrowsers. Alle verwendeten Bibliotheken des Technologiestacks sind in Tabelle 1 aufgelistet, eine Aufstellung der Kommandozeileneingaben zur Installation der Bibliotheken ist in Listing 1 enthalten. Wie in Node.js-basierten Projekten üblich, werden in der Konfigurationsdatei package.json im Root-Verzeichnis alle Abhängigkeiten zu Bibliotheken verzeichnet.

Bibliothek

Beschreibung

Webseite

Async-Storage

Eine für eine React-Native-App globale Möglichkeit, Key-Value-Daten asynchron lokal zu persistieren; die Daten werden dabei nicht verschlüsselt

https://reactnative.dev/docs/asyncstorage.html

React Navigation

Framework für Navigationsaufgaben und Routing innerhalb von React-Native-Apps

https://reactnavigation.org

Moment.js

JavaScript-Bibliothek, die das Parsen, Manipulieren, Berechnen und Anzeigen von Datums- und Zeitobjekten ermöglicht

https://momentjs.com

React Native Paper

Plattformübergreifende UI-Komponentenbibliothek für die Erstellung einer Benutzeroberfläche im Stil von Googles Material Design

https://callstack.github.io/react-native-paper/

Expo Keep Awake

Bibliothek für die dauerhafte Ansicht einer App-Seite; sie verhindert, dass das Gerät bei Inaktivität in den Stand-by-Modus schaltet

https://docs.expo.io/versions/l...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang