Cross-Plattform-Apps mit Cordova
Tragbar gemacht
Das früher als PhoneGap bekannte freie Toolkit Cordova hilft dabei, eine reine Webanwendung in eine mobile App umzupacken, die alle Möglichkeiten des Geräts ausnutzen kann. iX zeigt, wie das geht.
Genau wie das in iX 2/2018 [1] vorgestellte Electron verpackt Cordova den HTML-, CSS- und JavaScript-Code einer Webanwendung in eine hybride App, die sich verhält wie eine native – allerdings für mobile Betriebssysteme wie Android, iOS und Windows Phone. Sie kann ebenfalls über die Sandbox des Browsers hinaus auf das Betriebssystem zugreifen. Anders als Electron enthält Cordova jedoch keine eigene Browserkomponente, sondern verwendet den vom jeweiligen mobilen Betriebssystem bereitgestellten WebView. Cordova basiert auch nicht auf Node.js – lediglich seine Kommandozeilenwerkzeuge erfordern dessen Installation auf dem Entwicklungsrechner. Zur Laufzeit verwendet Cordova sein eigenes Plug-in-Modell (siehe Abbildung 1).
Wie bei Electron soll hier die im iX-Tutorial zu Angular ([2], [3], [4]) entstandene Webanwendung MiracleList zum Einsatz kommen. Dieser Beitrag zeigt, wie sie sich mit Cordova in eine Cross-Plattform-App für iOS, Windows, Android (siehe Abbildung 2) verpacken lässt. Den kompletten Quellcode des Ergebnisses beherbergt GitHub (siehe ix.de/ix1803126, [a]).
Beim Verpacken der Desktop-Anwendung ließ sich das Ziel noch erreichen, die Webanwendung lediglich zu erweitern, aber weder Layout (HTML und CSS mit Twitter Bootstrap) noch Quellcode (Angular mit TypeScript) zu verändern. Für Mobilgeräte wird das jedoch nicht ganz gelingen, weil die Web-App noch keine kleinen Bildschirme berücksichtigte. Dafür sind Verbesserungen notwendig.
Entwicklungshilfe durch Microsoft-Tools
Für die Cordova-Verpackung erhält das Projektverzeichnis einen weiteren Unterordner Cordova auf derselben Ebene wie der Electron-Ordner und der MiracleList-Quellcode in src. Am besten legt man ihn mit den Cordova-Kommandozeilenwerkzeugen an, da sie ihn bereits mit einer geeigneten Struktur befüllen. Wer Visual Studio Code nutzt (siehe Abbildung 3), sollte die „Cordova Tools Extension“ (vsmobile.cordova-tools) installieren, die die Eingabeunterstützung für Programmcode verbessern und das Einzelschritt-Debugging für Android und iOS ermöglichen. Im großen Visual Studio (nur auf Windows) verwendet Microsoft für Cordova-Projekte eigene Projekttypen ebenfalls mit Eingabeunterstützung, GUI-Werkzeugen für das Verwalten von Plattformen, Plug-ins und anderen Webpaketen, Debuggern und Simulator/Emulator [b].
Für die Arbeit mit Cordova installiert man die Kommandozeilenwerkzeuge mit npm install -g cordova. Danach kann man ein Projekt erstellen:
cordova create t:\MiracleListClient\Cordova \ de.itvisions.miraclelist MiracleListCordova
Dabei ist der erste Parameter das Projektverzeichnis, der zweite die App-ID (die keinen Bindestrich enthalten darf) und der dritte der Anzeigename.
Danach enthält der Ordner eine „Hello-World“-Webanwendung in www, jeweils leere Verzeichnisse platforms und plugins, Muster-Symbole in res und die Datei package.json. Sie listet jedoch noch keine Abhängigkeiten, sondern nur Metadaten wie Anwendungsname, Versionsnummer, Autor und einen Beschreibungstext. Dazu kommt die Cordova-eigene Konfigurationsdatei config.xml, die Abbildung 3 in Ausschnitten zeigt.
Plattformen installieren und nutzen
Starten kann man die Anwendung nicht, da noch keine Plattform vorhanden ist. Der Befehl cordova platform ls zeigt die auf dem Entwicklungssystem möglichen Plattformen (siehe Abbildung 4). Zum Ergänzen führt man zum Beispiel cordova platform add android aus. Dass iOS in Abbildung 4 nicht als Plattform erscheint, liegt an der Befehlsausführung auf Windows. Zwar gelingt auch dort ein cordova platform add ios, zum Übersetzen für Apple-Geräte ist aber ein Rechner mit macOS und Xcode erforderlich. Die ebenfalls nicht gelisteten Plattformen osx und ubuntu lassen sich nur auf dem jeweiligen Betriebssystem anlegen. Für Amazons FireOS sind vor dem Hinzufügen der Plattform manuelle Installationsschritte notwendig [c]. Die Plattformen sind zwar NPM-Pakete, man sollte sie aber nicht mit npm install einrichten, denn die Cordova-CLI registriert ein Paket nicht nur in package.json, sondern auch in config.xml.
Schnellster Weg zum Ausprobieren der Hello-World-Anwendung sind die beiden Zeilen
cordova platform add browser cordova run browser
Damit läuft die App zwar noch im Browser, hat aber Zugriff auf viele Cordova-APIs samt gegebenenfalls installierten Plug-ins. Möglichkeiten zu deren Steuerung bieten die Cordova-Emulatoren für den Browser Ripple [d] und Cordova Simulate [e].
Für das Übersetzen nach Android müssen das Java-SDK, das Android-SDK [f] und Gradle [g] installiert sein. Wer die App auf einem echten Gerät testen will, braucht außerdem einen USB-Treiber von dessen Hersteller. Sonst reicht ein Emulator. Der im Android-SDK mitgelieferte ist jedoch nicht kompatibel mit Microsofts Hyper-V, den viele Entwickler unter Windows für andere Werkzeuge benötigen, etwa Docker. Empfehlenswert ist Microsofts kostenloser „Visual Studio Emulator for Android“, der sich unabhängig von der Entwicklungsumgebung installieren lässt [h]. Er betreibt Android als virtuelle Maschine in Hyper-V und bietet Emulationen unter anderem für Position, Beschleunigung, Batterie und Kamera. Zudem arbeitet er schneller als das Original aus dem Android-SDK.