Apache Cordova Einführung: Native Mobile Apps mit HTML5, CSS und JavaScript

12.06.2014 Bild

Nicht jede Smartphone App rechtfertigt den Aufwand einer nativen Entwicklung. Eine Webapp ist vielleicht schneller erstellt und funktioniert auch auf mehreren Plattformen. Aber für den Benutzer ist es oft einfacher eine "richtige" App zu haben. Mit Cordova kann man eine solche einfach und schnell aus einer Webapp bauen.

Apache Cordova

Cordova ist der eigentliche Kern von PhoneGap. Im Grund ist es ein Webview oder chromeless Browser um mobile Webapplikationen in einer native App einzupacken. Es werden alle wichtigen Plattformen unterstützt (iOS, Android, WP8, ...). Daneben gibt es noch die Verbindung von Javascript zu native Klassen und auch schon vorgefertigte native Module als Plugins, um Funktionen nutzen zu können auf die eine Webapp normalerweise keinen Zugriff hat. http://cordova.apache.org/

Adobe PhoneGap

Während Cordova ein Projekt bei der Apache Foundation ist, ist PhoneGap dazu die kommerzielle Variante von Adobe. Neben dem Cordova Kern kommen noch Services dazu wie der Cloud Build: https://build.phonegap.com/

Basis Applikation erstellen

Für Cordova existiert ein CLI Tool, das alle Basisfunktionalitäten zur Entwicklung abdeckt. Es wird installiert über npm mit:

npm install -g cordova

Es werden im Laufe der Arbeit noch weitere Module benötigt, auf die Cordova aber normalerweise hilfreich hinweist.

Die Basisapplikation wird angelegt (mit Namen MyApp im Unterordner myapp und dem Identifier com.example.myapp):

cordova create myapp com.example.myapp MyApp
cd myapp

Will man die App gleich im Emulator starten gibt man ein:

cordova emulate ios

Darauf kommt aber einer der hilfreichen Fehler, weil noch keine Plattformen zur App hinzugefügt sind. Also:

cordova platform add ios
cordova platform add android
cordova emulate ios

und die Beispielapplikation läuft im iOS Emulator.

Mit eigener Webapp ersetzen

Die ganze Webapp liegt unter www/. Wir können das durch eine schon fertige Webapp ersetzen oder gleich dort an einer neuen Arbeiten. Wir gehen von einer fertigen aus:

mv www www.bak
mkdir www
cp -R /path/to/existing/* www/
cordova emulate ios

Schon ist die Webapp eingepackt.

Plugins

Um aus einer Webapp mehr als eine Browser-App zu machen gibt es für Cordova viele Plugins. Die Übersicht dazu ist unter http://plugins.cordova.io/

Z.B. wird unter iOS7 die gerade erstellte App Probleme mit der Statusbar haben. Man kann sich gleich auf der Kommandozeile ein Plugin suchen und dann hinzufügen:

cordova plugin search statusbar
cordova plugin add org.apache.cordova.statusbar

Das muss dann noch aktiviert werden indem in der config.xml innerhalb von <widget> am Ende das Plugin eingetragen wird:

<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true" />
</feature>

Nachdem das Plugin in dem Fall nur unter iOS benötigt wird legen wird ein leeres Javascript an und überschreiben es für die Plattform indem wir unter merges/ios/ ein spezifisches für iOS anlegen.

touch www/scripts/platform.js
mkdir merges/ios/scripts/
touch merges/ios/scripts/platform.js

In merges/ios/scripts/platform.js wird jetzt das Plugin angesprochen:

document.addEventListener('deviceready', function () {
StatusBar.overlaysWebView(false);
StatusBar.backgroundColorByHexString('#444466');
}, false);

Im index.html muss jetzt nur mehr das Javascript geladen werden und davor noch cordova.js (wird automatisch im Build hinzugefügt) um die Cordova Verbindung von Javascript aus zu aktivieren (u.a. Modul-Loader, ...) - bisher hatten wir ja noch keine Javascript Features benötigt. Also in <head> von www/index.html:

<script src="cordova.js"></script>
<script src="scripts/platform.js"></script>

Nachdem wir diesmal wieder im Emulator getestet haben können wir das Projekt auch direkt aufs Device spielen:

cordova run ios

Es muss nur das Gerät vorher zur Entwicklung aktiviert werden (je nach Plattform, aber unterschiedlich).

Test Deployment

Fürs Testing wird man die App auch mit anderen Teilen wollen. Die Dateien dazu legt man auf einen Webserver, um sie von dort aus auf anderen Endgeräten installieren zu können. Für Android kann einfach das *-debug.apk aus platforms/android/ant-build/ genommen werden.

Für iOS muss noch mit Xcode ein .ipa erzeugt werden - das zugehörige Projekt liegt unter platforms/ios. Dazu wird auch eine entsprechende Lizenz benötigt. Installiert wird es dann aber indem ein .plist geöffnet wird (über https), die das .ipa referenziert. Die zugehörige Datei schaut so aus:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0"><dict>
<key>items</key><array><dict>
<key>assets</key><array><dict>
<key>kind</key><string>software-package</string>
<key>url</key><string>https://example.com/dist/MyApp.ipa</string>
</dict><dict>
<key>kind</key><string>full-size-image</string>
<key>needs-shine</key><false/>
<key>url</key><string>https://example.com/dist/icon512.png</string>
</dict><dict>
<key>kind</key><string>display-image</string>
<key>needs-shine</key><false/>
<key>url</key><string>https://example.com/dist/icon114.png</string>
</dict></array>
<key>metadata</key><dict>
<key>bundle-identifier</key><string>com.example.myapp</string>
<key>bundle-version</key><string>0.0.1</string>
<key>kind</key><string>software</string>
<key>title</key><string>MyApp</string>
</dict>
</dict></array>
</dict></plist>

Debugging

Unter iOS kann sowohl im Emulator als auch am über USB verbundenen Gerät die Applikation im Safari Webinspektor debuggt werden. Das Device sollte dazu im Entwickler Menü von Safari auftauchen.