So erstellst du eine hybride App mit Cordova + Crosswalk.

Im ersten Teil der Serie haben wir unseren Rechner für die Erstellung von hybriden MobileApps vorbereitet; alles installiert und heruntergeladen was nötig ist um eine Android App mit Webtechnologie zu erstellen.

Jetzt geht es an die Erstellung der App. Wir setzen die Cordova App mit Crosswalk auf, richten ein erstes Testdevice ein und schauen mal, wie unsere App so flimmert.

Kurze Randnotiz: Warum Crosswalk nochmal?

Ich nehme Crosswalk, damit ich eine robustere App erstellen kann. Leider sind in der Android Welt sehr viele verschiedene Versionen im Einsatz und das wiederum bedeutet, dass auch viele unterschiedliche WebViews im Einsatz sind.

Aktueller Stand der aktiven Android Versionen auf der Welt.

Aktueller Stand der aktiven Android Versionen auf der Welt. Screenshot von developer.android.com – Dez. 2014

Bis Android 4.4 ist die WebView basierend auf dem “Android Browser“. Der Android Browser hat eine ziemlich alte WebKit Engine unter der Haube und ist nicht mit dem Chrome / Chromium Browser gleich zu stellen. Du kennst den Android Browser vielleicht noch von deinem alten Gerät, die kleine blaue Weltkugel. Seit Android 4.4 ist Chromium in der Version 30.0.0 die Basis der WebView und ist somit aus Performance- und Security-Sicht wenigstens besser als die WebView basierend auf dem Android Browser. Mittlerweile ist der Chrome Browser aber schon in der Version 39.0.0+ angelangt, während die WebView nicht nachgezogen wurde und somit weiterhin auf der alten Chromium Version (30.0.0) basiert. Du kannst also nicht davon ausgehen, dass du die ganzen schönen neuen Features nutzen kannst. Ab Android 5.0 ist die WebView (weiterhin basierend auf Chromium) seperat updatefähig und ist somit “evergreen”. Dies bietet natürlich die Möglichkeit die neusten APIs und Features aus CSS3 und HTML5 zu nutzen, aber auch den Nachteil, dass die WebView beim Endanwender in sehr verschiedenen Versionen vorkommen kann.

Wenn ich für all diese verschiedenen WebViews entwickeln wollte, würde das Aufwand bedeuten, den ich mir mit Crosswalk sparen kann. Crosswalk bringt seine eigene, auf Chromium basierende, WebView mit und bietet so für alle Geräte ab Android 4.0 eine identische WebView. Vergleichbar ist das, als müsste ich auf einmal nicht mehr für den Firefox, Chrome, IE und Opera entwickeln sondern nur noch für den Chrome und würde trotzdem 100% meiner Nutzer treffen. Ziemlich geil, wie ich finde!

Auf geht’s: Anlegen des Projekts

Projekt anlegen

In meinem “dev” Ordner im Homeverzeichnis habe ich einen Unterordner “Projects”. Dort liegt das Homeverzeichnis meines neuen Projekts “CurvedPong”. Hier lege ich im Ordner “impl” alle Implementierungen ab, also zum Beispiel die hier folgende Android App. Zur Erstellung der ARM Version meiner Android App habe ich folgendes Shellskript erstellt und im Terminal ausgeführt:

#!/bin/sh
~/dev/SDK/crosswalk-cordova-9.38.208.10-arm/bin/create \
    ~/dev/Projects/CurvedPong/impl/AndroidARM \
    de.verture.curvedpong CurvedPong

Hier ist zu beachten, dass der Ordner “AndroidARM” vorher noch nicht existiert hat. Wenn der Ordner schon existiert, denkt Crosswalk, dass das Projekt schon existiert und fliegt mit einem Fehler raus. Der Backslash “\” gefolgt von einem Umbruch gibt an, dass der Befehl in der nächsten Zeile weiter geht. Wenn du den Befehl direkt im Terminal absetzen willst, schreib alles in einer Zeile und ohne Backslash:

<xwalk>/bin/create <projektordner> de.beispiel.helloworld HelloWorld

Der erste Testlauf

Android Virtual Device (AVD)

Um zu testen, ob alles funktioniert hat, benötigst du zunächst eine AVD. Dieses virtuelle Device kannst du mit den Android Tools, welche du am Anfang installiert hast, erstellen. Viele IDEs, natürlich auch das offizielle Android Studio und IntelliJ IDEA, bringen eine grafische Oberfläche zur Erstellung eines solchen Emulators mit. Da wir die IDE noch nicht eingerichtet haben, kannst du entweder direkt auf das AVD Command-line Interface (CLI) zurückgreifen (ausführliche Informationen findest du auf der Android Developer Seite: developer.android.com/…/managing-avds-cmdline.html) oder alternativ eine GUI zur Verwaltung der AVDs über die Android Tools starten, hierfür folgendes in das Terminal eingeben und ausführen:

android avd

Danach sollte sich dir folgendes Fenster zeigen:

Android Virtuel Device Manager

Android Virtuel Device Manager

Ich habe mir anschließend über “Create…” folgendes Testdevice erstellt:

Mein neues AVD mit Android 4.4.2

Mein neues AVD mit Android 4.4.2

Gerne kannst du natürlich auch schon mit Android 5.0 oder einem anderen Device experimentieren. Derzeit habe ich nur eine ARM Version der App mit Crosswalk erstellt und so habe ich als CPU eine ARM CPU ausgewählt. Für mich ist obiges Device ein guter erster Einstieg für den Test.

Teststart der App im Emulator

Jetzt können wir endlich die App testen. Bei der Erstellung über Crosswalk wurde ein “Cordova HelloWorld” Template mit installiert, sodass wir auf jeden Fall etwas sehen sollten.

Verlasse den AVD Manager oder öffne ein neues Terminal Fenster.
Navigiere in deinen Projektorder und führe den Cordova run Befehl aus:

cd ~/dev/Projects/CurvedPong/impl/AndroidARM
./cordova/run

Das kann ne Weile dauern, aber dann sollte sich der Emulator starten. Wenn der erst einmal gestartet ist, muss das Device noch booten, das wiederum kann schon mal ne gefühlte Ewigkeit brauchen. Wenn du nen Kaffee brauchst, dann hol ihn dir jetzt. Nachdem das Gerät gebootet ist, wird die App installiert und anschließend gestartet – auch das kann wieder eine Weile dauern, aber dann sollte sich dir folgendes darbieten *tadaaaa*:

Android App mit Crosswalk und Apache Cordova

Android App mit Crosswalk und Apache Cordova

Abschluss

Wir haben eine hybride Android App für ARM CPUs angelegt und gestartet. Das grüne “DEVICE IS READY” Lämpchen hat fröhlig geblinkt und jetzt können wir endlich mit der eigentlichen Entwicklung loslegen…
…Es fehlt nur noch die Einrichtung der IDE und Versionskontrolle. Das möchte ich im nächsten Artikel erledigen – bevor es endlich an den Code geht.

PS: Eine kleine weitere Randnotiz

Viele meinen, man könne keine hybride App erstellen, die sich wie eine native anfühlt oder gar wie eine native App aussieht. Das stimmt auf keinen Fall und spätestens am Ende dieses Projekts wirst du mir da sicher zustimmen.

Hast du dir den Text zur Lollipop (Android 5.0) WebView durchgelesen? Ist dir auch der Hinweis aufgefallen, dass die neue WebView auch WebComponents unterstützt? Perfekt! Das Polymer Project (WebComponents Polyfill Projekt) bietet bereits WebComponents im Material Design. Bisher war es immer ein wenig aufwändiger (nicht unmöglich!) sich an das native Design zu halten, mit diesen WebComponents ist es wirklich für jeden Web-Entwickler* ein Einfaches eine hybride App zu erstellen, die wie eine native App aussieht.

* Damit die Animationen und Seitenwechsel auch flüssig laufen, und einer nativen App ähneln, braucht es weiterhin viel Erfahrung und Einsatz des Entwicklers. Möglich ist es aber. #perfmatters

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>