Cross-Plattform-Apps mit PhoneGap entwickeln

Inhaltsverzeichnis

Bei der Entwicklung mobiler Anwendungen können Anspruch und Wirklichkeit weit auseinanderliegen. Welcher IT-Leiter oder Entwickler möchte schon für eine einzelne App mehrere Entwicklungsprojekte für diverse mobile Plattformen auf die Beine stellen? Und welcher Geschäftsführer möchte das bezahlen? Für dieses Problem bietet PhoneGap eine Lösung.

Vereinfacht lässt sich die Arbeitsweise von PhoneGap so erklären: Eine App, die mit dem Framework erstellt wurde, ruft den Webbrowser der Smartphone-Zielplattform auf und lässt eine Webanwendung lokal darin ablaufen. Dabei unterdrückt PhoneGap alles, was an den Browser erinnert, also dessen Rahmen und alle Bedienelemente wie Internetadresszeile oder Menüs. Auf den ersten Blick hat man es also nur mit einem Browser im Vollbildmodus zu tun, darin verpackt die mobile Applikation bestehend aus HTML, JavaScript und CSS. Damit aber auch der Zugriff auf die Hardware wie Kamera, Adressbuch oder anderes wie bei einer normalen Anwendung funktioniert, lädt die App in den anzuzeigenden HTML-Seiten eine JavaScript-Bibliothek. Die laufende Browserkomponente fängt dabei die PhoneGap- Aufrufe der eigenen JS-Bibliothek ab und überführt sie in native Aufrufe der jeweiligen Plattform. Das Ergebnis erhält die Anwendung per JavaScript Callback zurück.

In die Tiefe

Bei genauerer Betrachtung lässt sich feststellen, dass PhoneGap aus zwei wesentlichen Bausteinen besteht. Der erste ist die Bibliothek cordova.js (die JavaScript Seite), mit der die in JavaScript, HTML5 und CSS geschriebene Webapplikation arbeitet. Nachdem sie in die Anwendung eingebunden ist, stellt sie eine API für plattformunabhängige Zugriffe auf Komponenten des Smartphones zur Verfügung. Die JavaScript- Bibliothek interagiert auch mit dem zweiten Baustein von PhoneGap/Apache Cordova, der sogenannten Native Engine. Sie existiert in verschiedenen Implementierungen, jeweils einer pro Zielplattform, und ermöglicht die Abfragen von Sensoren des jeweiligen Betriebssystems.

Wenn die enthaltenen Möglichkeiten zum Zugriff auf die Hardware per Native Engine nicht ausreichen, gibt es die Option, sie durch Plug-ins zu erweitern. Dabei gilt für jede Ergänzung: Es wird sowohl eine JavaScript-Datei als auch eine plattformabhängige Klasse benötigt. Erstere stellt den Aufruf der Funktion in PhoneGap dar. Damit ihn das jeweilige Smartphone-System umsetzen kann, wird noch eine Implementierung des Plug-ins in der Native Engine benötigt.

Durch die oben beschriebene Architektur ist es PhoneGap möglich, prinzipiell jedes System zu unterstützen, dass eine Webbrowser-Komponente besitzt. Aktuell lässt sich PhoneGap in der Version 3.0 offiziell mit

• iOS,
• Android Blackberry (10),
• Windows Phone 7 und 8,
• Windows 8 und
• Tizen

PhoneGap installieren

War noch vor kurzer Zeit für jede Plattform einiges an Aufwand zu leisten, beschränkt sich nun die Installation von PhoneGap auf die Zeile

$ sudo npm install -g phonegap
 

Da PhoneGap seit Version 3.0 offiziell Node Packaged Modules nutzt, ist nur ein node.js-Server nötig. Zur Entwicklung muss darüber hinaus das jeweilige Hersteller-SDK für die Plattform installiert sein.

Als Beispiel sollen an dieser Stelle Apples iOS und Googles Android SDK dienen. Bei Apple reicht das Beziehen von XCode aus dem AppStore. Dabei sollte man nicht vergessen, den iOS-Simulator und das Xcode-Kommandozeilen-Tool nachträglich über das Preferences-Menü zu installieren. Für Android sind die Build-Tools und ein Android-SDK notwendig, wobei sich am besten auf das von Google angebotene Installer-Paket zurückgreifen lässt. Sind diese Voraussetzungen erfüllt, ist alles für einen Test bereit. Mit

$ phonegap create meine-erste-app
 

lässt sich eine erste Anwendung erstellen und es wird ein Verzeichnis samt notwendiger Struktur angelegt. Nach dem Wechsel in das Verzeichnis,

$ cd meine-erste-app
 

besteht die Möglichkeit, die jeweiligen Plattformen mit

$ phonegap run <plattform>
 

aufzurufen. Hier kann zum Beispiel android oder ios stehen. Das Kommandozeilenprogramm sucht dann automatisch nach dem jeweiligen SDK-Pfad und kompiliert die App. Durch den run-Parameter wird außerdem die Bereitstellung auf ein angeschlossenes Smartphone oder der Start des Emulators durchgeführt. Da der Aufruf von phonegap create bereits eine Struktur nebst Demo-Code erstellt hat, lässt sich die Anwendung nun via

$ phonegap run ios
 

für iOS oder

$ phonegap run android
 

für Android testen. Nach einer kurzen Wartezeit sollte im Emulator das Ergebnis erscheinen. (Abb. 1)