© THITINAI PERMSAWAT, 123RF

Mit dem Framework Cordova rollen Entwickler elegant und schnell eine App für bis zu acht verschiedene Betriebssysteme vom Fließband. Voraussetzung seien lediglich Kenntnisse in HTML, CSS und Javascript, verspricht zumindest die Apache Foundation.

Anfang 2009 stellte das kleine Unternehmen Nitobi eine Software namens Phonegap vor. Mit ihr konnten Webentwickler in HTML, CSS und Javascript komplette Apps entwickeln, die gleichzeitig auf iPhones, Androiden und Blackberrys liefen. Nur zweieinhalb Jahre später übernahm Adobe mit Nitobi auch Phonegap. Den Quellcode übergab Adobe an die Apache Foundation, die entwickelt das Framework mittlerweile unter dem Namen Cordova weiter [1].

An der grundlegenden Arbeitsweise des Framework änderte auch die Übernahme nichts: Mit Cordova programmiert der Entwickler eine komplette App in HTML, CSS und Javascript. Diese läuft dann unter I-OS, Android, Blackberry 10, Windows, Firefox OS, Web OS, Ubuntu Touch und sogar als normale Webanwendung im Browser. Cordova unterstützt auch Amazons Fire OS, diese Möglichkeit gilt jedoch als veraltet (deprecated).

Praxiserprobt

Cordovas Quellcode steht unter der Apache License 2.0, die Anwendung hob bereits zahlreiche Apps aus der Taufe. Dazu zählen beispielsweise die Fitness-App Sworkit [2] und die Babyüberwachungs-Software Clever Baby [3]. Darüber hinaus fußen viele andere Entwicklertools auf Cordova. Nicht nur Ionic [4] spannt das Framework ein, es steckt auch hinter der Entwicklungsumgebung Phonegap von Adobe [5]. Das Unternehmen nutzt den ursprünglichen Namen des Projekts weiterhin.

Werkzeugkoffer

Cordova benötigt für seine Arbeit zunächst die SDKs der gewünschten Zielplattformen. Wer etwa seine App auf Android-Geräten anbieten möchte, muss neben einem Java Development Kit auch das Android Studio oder das Android SDK (alias Android Command Line Tools) einspielen [6]. Im Fall von Android sind zudem noch einige Umgebungsvariablen zu setzen: »JAVA_HOME« muss zur JDK-Installation führen, »ANDROID_HOME« zum Verzeichnis mit dem Android-SDK und »PATH« sollte die Unterverzeichnisse »tools« und »platform-tools« aus dem Android-SDK beinhalten (mehr dazu im Schwerpunkt-Artikel “Hürdenlauf”).

Node im Gepäck

Eine Reihe von Kommandozeilentools macht es dem Cordova-Entwickler leichter, Apps zu bauen. Diese Tools basieren wiederum auf Node.js [7], das die meisten Distributionen in ihren Repositories vorhalten. Cordova erwartet das Framework unter dem Programmnamen »node« , Ubuntu nennt das Programm jedoch »nodejs« . Abhilfe schafft es dann, zusätzlich das Paket »nodejs-legacy« zu installieren, das einen passenden Symlink auf »nodejs« setzt.

Daneben spielt der App-Entwickler über den Paketmanager noch »npm« auf den Rechner. Dieser Node.js-Paketmanager reduziert die Installation von Cordova anschließend auf ein simples:

sudo npm install -g cordova

Einen kurzen Augenblick später lässt sich bereits eine erste kleine Beispielanwendung produzieren.

Hallo Welten!

Mit den Cordova-Tools legt der App-Entwickler in einem Arbeitsverzeichnis zunächst ein neues Projekt an, das den Namen »LinuxMagazin« tragen soll:

cordova create LinuxMagain

Beim ersten Aufruf fragt Cordova, ob es Telemetriedaten an seine Entwickler senden darf. Mit einem »n« lässt sich diese Gesprächigkeit unterbinden. Im nächsten Schritt wechselt der Entwickler in das von Cordova erstellte Projektverzeichnis und fügt die Plattform hinzu, auf der die App später laufen soll. Im Beispiel ist dies zunächst der Browser:

cd LinuxMagazin
cordova platform add browser

Weitere Plattformen holt der App-Entwickler mit dem gleichen Kommando hinzu, Android ergänzt er beispielsweise über ein »cordova platform add android« . Eine Liste aller möglichen Plattformnamen spuckt »cordova platform« aus. Alle Grundeinstellungen des Projekts sammelt die Konfigurationsdatei »config.xml« . Sie liegt im Projektverzeichnis und enthält unter anderem den Namen und eine (Kurz-)Beschreibung der App.

Ist das Projekt eingerichtet, sollte der Entwickler mit »cordova requirements« noch kurz prüfen, ob der Rechner wirklich alle benötigten SDKs und Softwarevoraussetzungen erfüllt (Abbildung 1).

Abbildung 1: Hier erkennt Cordova unter anderem, dass der Entwickler zwar das Android-SDK installiert hat, aber die Bibliotheken für Android 6.0 (API Level 23) fehlen.

Alte Bekannte

Der Befehl »cordova create« erzeugt automatisch eine einfache Beispiel-App, die lediglich das Bild aus Abbildung 2 anzeigt. Wie jede Cordova-App besteht sie aus einer normalen Webseite, die standardmäßig den Namen »index.html« trägt und im Unterverzeichnis »www« des Projektverzeichnisses liegt – im bisherigen Beispiel unter »LinuxMagazin/www/index.html« . Dort passt der App-Entwickler sie nach Belieben an und erweitert sie. Der Befehl »cordova create« erzeugt auch die Verzeichnisse »css« für alle Stylesheets sowie »img« für Bilder und »js« für Javascript-Code. Der Entwickler darf diese Verzeichnisstruktur nach Gutdünken ändern, solange alle zur App gehörenden Inhalte weiterhin im Verzeichnis »www« lagern.

Abbildung 2: Die Cordova-App läuft auf Wunsch auch als Webanwendung in einem normalen Browser.

Eine von Cordova bereitgestellte HTML-Rendering-Engine (Abbildung 3) zeigt fertige Webseiten auf dem Smartphone an. Die so genannte Web-View bietet mehrere spezielle Javascript-Funktionen an, mit denen der Entwickler unter anderem auf die Smartphone-Hardware zugreift (siehe Kasten “Funktional und ereignisreich”).

navigator.vibrate(1000);

document.addEventListener("menubutton",  onMenuKeyDown, false);function onMenuKeyDown() {
    // Taste gedrückt!
}

Abbildung 3: Die Webanwendung führt eine Web-View aus, die sich mit Plugins erweitern lässt. Die Plugins wiederum greifen direkt auf die Hardware beziehungsweise die Betriebssystemfunktionen zu.

Die Web-View stellt nur einige Kernfunktionen bereit, die wiederum so genannte Plugins (Abbildung 4) erweitern können. So ermöglicht es etwa ein Plugin, die Kontakte abzufragen, während ein anderes den Zugriff auf die Kamera gewährt. Dank des Plugin-Systems fügt der Entwickler flexibel weitere Funktionen hinzu und spricht neue Hardwarekomponenten an. Umgekehrt schleppt die App nur den Programmcode für tatsächlich benötigte Funktionen mit. Das Cordova-Projekt entwickelt selbst einige Plugins für die wichtigsten Funktionen. Diese Core-Plugins erlauben unter anderem den Zugriff auf die Kamera, die Kontakte oder das Geolocation-API.

Abbildung 4: Mittlerweile gibt es sogar Plugins, die In-App-Verkäufe abwickeln. Vor der Installation eines solchen sollte der Cordova-Nutzer jedoch rausfinden, auf welchen Plattformen es läuft.

In einem neu erstellten Cordova-Projekt muss der Programmierer die benötigten Plugins im ersten Schritt einzeln aktivieren. Dies wiederum geschieht über das Kommando:

cordova plugin add cordova-plugin-vibration

In diesem Beispiel ergänzt Cordova das Plugin »cordova-plugin-vibration« für den Vibrationsalarm. Die Apache Foundation führt auf ihren Seiten ein Verzeichnis mit verfügbaren Plugins [9]. Sie lassen sich allesamt über den obigen Befehl hinzuholen. Technisch spielt sie im Hintergrund »npm« auf die Festplatte.

Hängt der Entwickler an den obigen Bandwurm den Parameter »–save« an, trägt Cordova unter anderem die Versionsnummer des Plugins in die »config.xml« ein. App-Entwickler kehren dann über das Kommando »cordova prepare« zu exakt den mit »–save« gespeicherten Plugin-Versionen und somit zu einem fest definierten Zustand zurück.

Probefahrt

Das Kommando »cordova run browser« startet die fertige App. Anstelle von »browser« gibt der Betreiber den Namen der Plattform an, auf der die App laufen soll. Im Fall des Browsers fährt Cordova automatisch im Hintergrund einen minimalistischen Webserver hoch. Standardmäßig wartet dieser auf »localhost« an Port »8000« auf Anfragen. Der Entwickler erreicht seine App folglich dann, wenn er »http://localhost:8000/index.html« in die URL-Leiste des Browsers tippt.

Läuft der Webserver, startet Cordova den Browser Chrome (Abbildung 2). Ist dieser nicht installiert, führt Cordova die App nicht aus und der Webserver beendet sich umgehend. Der App-Entwickler kommt folglich nicht umhin, auch noch Chrome zu installieren oder aber auf den Browser als mögliche Plattform zu verzichten. Schließt er Chrome, muss er anschließend den Webserver per [Strg]+[C] gewaltsam beenden.

Ist nicht der Browser das Ziel, startet Cordova die App auf der entsprechenden Plattform. Die läuft entweder auf einem angestöpselten Gerät oder aber in einem Emulator. Alle vorhandenen Geräte und Emulatoren listet ein »cordova run –list« auf. Der App-Entwickler wählt explizit per »–target« eines der Geräte aus – im folgenden Fall wäre dies »MyAndroidVM« :

cordova run android --target=MyAndroidVM

Für den Start in einem Emulator existiert zudem ein Kurzbefehl, der eine virtuelle Android-Plattform hochfährt:

cordova emulate android

Das klappt auch für andere Plattformen, wobei ein angehängtes »–list« diese im Detail mit ihren jeweiligen Versionsnummern anzeigt.

Mangelwirtschaft

Hier endete der Cordova-Support allerdings. Insbesondere bietet das Framework von Haus aus keine User-Interface-Komponenten beziehungsweise Widgets an, mit denen der Anwender schnell eine Benutzeroberfläche zusammenklickt. Nur einfache Dialogfenster für Warnungen, Fehlermeldungen und einfache Rückfragen stehen bereit (über das Plugin »cordova-plugin-dialogs« ).

Darüber hinausgehende UI-Elemente, zum Beispiel umblätternde Seiten, muss der Entwickler entweder selbst implementieren oder er greift auf Javascript-Bibliotheken wie das beliebte Jquery-UI [10] zurück. Diese haben allerdings den Nachteil, dass die eigene Anwendung dann nicht die Optik der Zielplattform übernimmt.

Ein weiterer Nachteil für reine Linux-Nutzer: Da Cordova die SDKs für die jeweiligen Zielplattformen benötigt, lassen sich I-OS-Apps ausschließlich unter OS X erstellen und testen. Wer also für iPhones entwickeln möchte, braucht folglich einen Apple-Rechner. Analoges gilt für Windows Phone.

Darüber hinaus müssen App-Entwickler die SDKs per Hand einrichten und pflegen und die Apps etwa für den Play Store zu Fuß zertifizieren. Die Cordova-Dokumentation besteht dabei lediglich aus einem kurzen Tutorial, aber einer immerhin sehr ausführlichen Referenz [1].

Fazit

Trotz dieser Einschränkungen gelangen HTML-, CSS- und Javascript-Experten mit Cordovas Hilfe recht schnell zu einer ersten eigenen App. Die Smartphone-Hardware spricht der Entwickler im gewohnten Javascript an. Über die Unterschiede der Plattformen muss er sich zudem keine Gedanken machen: Der gleiche Code läuft sowohl auf I-OS als auch auf Android.

Cordovas Kommandozeilentools abstrahieren von den Eigenheiten der einzelnen Plattform-SDKs, zu deren Installation der Entwickler aber jeweils die entsprechende Hardware benötigt. App-Entwickler müssen zudem auf der Kommandozeile arbeiten, die Benutzeroberfläche komplett selbst implementieren und zahlreiche Funktionen über die passenden Plugins nachrüsten.

Wer also noch schneller oder gar mit wenigen Mausklicks zu einer fertigen App gelangen möchte, ist mit einem anderen Tool besser bedient.