web & mobile DEVELOPER 04 / 2016 – Native Apps mit Apache Cordova

Bildschirmfoto 2016-04-01 um 14.29.33

 

Mobile Apps mit Cordova

Cordova ist ein Framework zur Erstellung hybrider Applikationen in HTML5, CSS und JavaScript für mobile Endgeräte aller wichtiger Hersteller.

Von Patrick Lobacher

Ursprünglich 2009 als PhoneGap von der Firma Nitobi auf den Markt gebracht, wurde das Framework mittlerweile von Adobe aufgekauft und als „Adobe Cordova“ unter die Open Source Lizenz Apache 2.0 gestellt. Die Projektwebsite lautet: http://cordova.apache.org.

Cordova_lobacher_01

 

Unter http://phonegap.com findet sich zudem eine Distribution von Cordova mit dem Namen „PhoneGap“, die – bis auf wenige Ausnahmen – nahezu identisch zu Cordova ist. Unterschiede sind in der Lizenz und im Betreiber zu finden – denn PhoneGap wird von Adobe betrieben. Wir verwenden aber in nachfolgendem Artikel „Cordova“, da es die Basis darstellt.

Mit Hilfe von Cordova kann ein einmal mit Hilfe von HTML5, CSS und JavaScript entwickelter Code auf zahlreichen nativen Plattformen lauffähig gemacht werden.

Zur Zeit werden die folgenden Plattformen unterstützt:

  • iOS
  • Android
  • webOS
  • Windows Phone > 8.0
  • blackberry10
  • amazon fireos
  • Tizen
  • Ubuntu

Dabei ist man aber nicht nur auf die nativen HTML5-Fähigkeiten begrenzt – mit Hilfe spezieller Bibliotheken (APIs) kann auch auf die Hardware und interne Funktionen zugegriffen werden, wie Beschleunigungssensor, Kamera, Kompass, Kontakte, Dateien, Geolocation, Medien, Netzwerk, Benachrichtigungen und den Speicher.

Allerdings unterstützt nicht jede Plattform alle Funktionen – eine Übersicht drüber finden Sie hier: https://cordova.apache.org/docs/en/latest/guide/support/index.html.

Cordova_lobacher_02

Systemanforderungen

Je nachdem, welche Zielplattform Sie wählen, benötigen Sie ein bestimmtes Setup.

Für iOS beispielsweise müssen Sie unter Mac OS X entwickeln, da die dazu notwendige Plattform Xcode nur unter diesem Betriebssystem zur Verfügung steht. Den Download finden sie hier: https://developer.apple.com/xcode/.

Für die Windows Phone Entwicklung wiederum müssen Sie auch unter Windows arbeiten, da hierfür Microsoft Visual Studio benötigt wird. Dieses finden Sie unter der URL: https://www.visualstudio.com.

Alle anderen Plattformen wiederum können auf beiden Betriebssystemen oder sogar unter Linux bedient werden – denn hierfür wird (meist) Eclipse verwendet, welches selbst eine Java-Applikation ist, die plattformübergreifend lauffähig ist. Speziell für die Android-Entwicklung können Sie das ADT (Android Developer Tools) verwenden, welches Sie unter http://developer.android.com/tools/help/adt.html finden.

Für diesen Artikel werden wir iOS und Xcode verwenden – alle Beispiele funktionieren aber analog auf den anderen Plattformen.

 

Installation

Die Installation von Cordova wird über die Kommandozeile durchgeführ. Vorher müssen Sie aber noch folgende weitere Tools installieren:

Nun öffnen Sie ein Terminal-Fenster und tippen den folgenden Befehl ein:

 Listing 1: Installation von Cordova

Sollten Sie eine andere Plattform als Mac OS X einsetzen, finden Sie unter https://cordova.apache.org/docs/en/latest/guide/platforms/ die passende Anleitung zur Installation.

Hier wird mit Root-Rechten (sudo) der Node.JS Package Manager (npm) mit der Option zum (globalen) Installieren (install –g) des Pakets „Cordova“ aufgerufen.

Um unter Mac OS X den iOS Simulator auch von der Kommandozeile aus bedienen zu können, müssen wir diesen analog installieren:

Listing 2: Installation des iOS-Simulators

Eine erste App erstellen

Wir erstellen nun einer erste App, um den Ablauf kennenzulernen.

Dafür können wir auf der Kommandozeile den folgenden Befehl absetzen:

Listing 3: Erstellen einer App

Der Name des Projektverzeichnisses „hello“, als Namespace verwenden wir „com.example.hello“ und als Namen für die App „helloworld“. Anschließend wechseln wir in das neu angelegte Verzeichnis.

Ist das Grundgerüst einer Cordova-App einmal angelegt, müssen Sie die gewünschten Zielplattformen hinzufügen, damit Cordova weiß, für welches System es die App später übersetzen soll.

Ein Liste aller möglichen Plattformen finden Sie hier: https://cordova.apache.org/docs/en/latest/guide/platforms/index.html.

Wir wollen zunächst zwei Plattformen hinzufügen: Einerseits iOS und andererseits den Browser ansich. Dies ist über den Befehl platform add möglich. Über platform list können zudem alle verfügbaren und installierten Plattformen angezeigt und per platform rm auch wieder gelöscht werden.

Listing 4: Zufügen von Plattformen

Wir wollen nun im nächsten Schritt die App erzeugen lassen – dafür verwenden wir den Befehl build (ohne Parameter werden alle Plattformen generiert, mit Parameter wird nur die Plattform erzeugt, die angegeben wurde).

Listing 5: Build-Prozess starten

Das Ergebnis lässt sich im Unterverzeichnis platforms betrachten. Hier gibt es ja je zugefügter Plattform ein eigenes Verzeichnis und nun nach der Build-Befehl ein Verzeichnis build mit dem Inhalt des erzeugten Packages.

Um nun das Ergebnis im Emulator zu betrachten, kann man den emulate Befehl verwenden – nachfolgend wollen wir beispielsweise den iOS Emulator mit der App starten, die von Cordova dorthin deployed wurde.

Listing 6: Emulator starten

Nach einer kurzer Wartezeit startet der Emulator mit der helloworld App.

Cordova_lobacher_03

Nun können Sie das Projekt auch direkt in Xcode öffnen. Dazu navigieren Sie zum Unterverzeichnis platforms/ios. Dort gibt es die Datei helloworld.xcodeproj, die sie per Doppelklick öffnen können. Nun öffnet sich – vorausgesetzt Sie haben dies vorher installiert – Xcode mit ihrem Projekt.

Cordova_lobacher_04

Projektstruktur

Schauen wir uns nun die erhaltene Verzeichnisstruktur in einem Projekt etwas genauer an:

  • config.xml
    Dies ist die globale Konfigurationsdatei des Projekts. Im Schlüssel <content> wird z.B. die Datei angegeben, die im Unterverzeichnis www als Startdatei aufgerufen wird – hier index.html.
  • hooks
    Es gibt eine Vielzahl von Ereignissen (z.B. wenn die Batterie leer ist, wenn der Build-Prozess fertig ist, u.s.w.). Skripte, die auf diese Hooks reagieren, befinden sich in diesem Verzeichnis
  • plattforms
    Sämtliche Plattformen, auf denen der Code lauffähig sein soll, werden hier abgelegt
  • plugins
    Cordova wird mit einem sehr schlanken Kern ausgeliefert – alle weitere Funktionen (z.B. der Zugriff auf die Hardware des Geräts) wird in Plugins ausgelagert, die man in diesen Verzeichnis installieren kann
  • www
    Hier befindet sich die Applikation ansich. Dort gibt es die Startdatei index.html und die Verzeichnisse css (für die Stylesheets), js (für die JavaScripte) und img (für die Bilder).

 

Startdatei index.html

Als allgemeiner Startpunkt dient die Datei index.html – schauen wir uns diese einmal genauer an.

Listing 7: Startdatei index.html

Im Header wird hier eine entsprechende CSS-Datei eingebunden und am Ende des Bodys zwei JavaScript-Dateien. Dabei existiert die erste cordova.js scheinbar gar nicht – zumindest nicht im www Verzeichnis. Hier ist wichtig zu wissen, dass es für jede Plattform eine eigene, speziell angepasste Cordova JavaScript Basis-Bibliothek gibt, die also erst im Verzeichnis platforms/[platform]/www auftaucht.

navigator Objekt

Bei einer Cordova App stehen Ihnen innerhalb von JavaScript die meisten Methoden zur Verfügung, die sich auch beim Programmieren einer „normalen“ Webseite verwenden lassen.

So können Sie beispielsweise die DOM-Objekte verwenden und dabei manchmal auf spezifische Cordova-Plugins verzichten.

Legen wir hierzu eine Datei js/custom.js mit dem folgenden Inhalt an:

Listing 8: custom.js

Der Aufruf der Methode wiederum erfolgt in der Datei js/index.js:

Listing 9: index.js

Nun müssen wir noch die Datei index.html anpassen:

Listing 10: index.html

Cordova_lobacher_05

 

Geolokalisierung

Nun wollen wir mit einem Plugin von Cordova arbeiten, um beispielsweise die Geolokalisierung anzusprechen.

Die Plugins finden Sie auf der Cordova-Seite unter dem folgenden Link: https://cordova.apache.org/plugins/. Geben Sie nun in die Suche ganz oben „geolocation“ und klicken auf den Link zu cordova-plugin-geolocation. Dort finden Sie auch einen Hinweis zur Installation – diese wird immer über den Befehl plugin add durchgeführt:

Listing 11: Installation Geolocation

Nun brauchen wir noch entsprechenden Code in der Datei custom.js dafür:

Listing 12: custom.js für Geolokalisierung

In der Datei js/index.js muss nun noch der Aufruf von navigatorobj() durch geo() ersetzt werden.

Cordova_lobacher_06

Die Funktion geo() überprüft zunächst, ob es das Objekt navigator.geolocation gibt. Ist dies der Fall, werden die Geokoordinaten  über getCurrentPosition() ermittelt. Im Fehlerfall wird die  Fehlerfunktion geoError()aufgerufen und im Erfolgsfall geoSuccess(). Hier werden alle verfügbaren Daten ausgelesen und angezeigt.

Google Maps Integration

Jetzt, da wir die Geokoordinaten ermitteln können, macht es Sinn, diese dazu zu benutzen, um die aktuelle Position auf einer Google Maps anzuzeigen.

Hierfür benötigen wir wieder eine Anpassung der Datei custom.js:

Listing 13: custom.js für Google Maps

Und in der index.html müssen wir nun noch die Google Maps API einbinden:

Listing 14: index.html für Google Maps

Cordova_lobacher_07

Kontakte ansprechen

Als weiteres Beispiel wollen wir uns ansehen, wie wir so mit der Kontakte-Applikation auf dem Smartphone kommunizieren können, dass es uns möglich ist, einen neuen Kontakt dort anzulegen.

Das zugehörige Plugin lautet cordova-plugin-contacts, dass wir analog dem letzten Beispiel über die Kommandozeile installieren.

In der Datei index.html platzieren wir hiefür ein Formular:

Listing 15: index.html für Kontakt-App

Nun benötigen wir noch entsprechendes Javascript, mit dem wir das Kontakt-Objekt ansprechen können – dies wird wie bisher in der Datei custom.js eingebracht:

Listing 16: custom.js für Kontakt-App

Wir haben wir lediglich eine id (Identifier) und den displayName (angezeigter Name) abgefragt und verarbeitet. Natürlich können Sie auch alle anderen Felder verwenden – einen Überblick über die möglichen Felder finden Sie hier: https://www.npmjs.com/package/cordova-plugin-contacts.

Schließlich müssen Sie noch den Aufruf contacts(); in die Datei index.js einfügen.

Cordova_lobacher_08

Icon und Splash-Screen

Bislang startet die App immer mit den von Cordova Splashscreen und hat ein Cordova Logo. Dies wollen wir nun ändern.

Dazu legen Sie innerhalb des Verzeichnisses www die Verzeichniss res/ios/. Dorthinein werden die Icons (für iOS) gelegt.

Zuständig für für die Einstellungen von Icons und Splashscreen ist die Datei config.xml.

Hier kann man folgenden Abschnitt einbringen, um die Icons zu definieren. Die Erkennung des richtigen Icons erfolgt aufgrund der Display-Größe des Geräts – den Dateinamen können Sie ebenfalls aus der Liste entnehmen:

Listing 17: config.xml

Als Beispiel haben wir auf einem iPhone 6s Plus ein neues Icon icon-60@3x.png in den Pfad www/res/ios/ gelegt.

Adäquate Anweisungen für die anderen Plattformen finden Sie hier: https://cordova.apache.org/docs/en/latest/config_ref/images.html.

Cordova_lobacher_09

Der Austausch des Splash-Screens geht analog.

Listing 18: config.xml

Hier legen wir einen eigenen Splashscreen für ein iPhone 6s Plus im Verzeichnis www/res/screen/ios/unter dem Namen Default-736h.png ab.

Cordova_lobacher_10

Deployment auf das Gerät

Um die App wirklich vollumfänglich testen zu können, ist es wichtig, dies nicht nur im Emulator zu tun, sondern auf einem physikalischen Gerät.

Für Apple / iOS müssen Sie dazu wie folgt vorgehen:

  • Apple Developer Program
    Werden Sie zunächst Mitglied im Apple Developer Program: https://developer.apple.com/programs/ Dazu klicken Sie rechts oben auf „Enroll“, wählen aus, ob Sie ein einzelner Entwickler oder eine Organisation sind. Die Kosten betragen hierbei 99 EUR pro Jahr
  • Device
    Fügen Sie nun Ihre Geräte mit Hilfe des Unterpunkts „Devices“ hinzu, auf denen Sie die App später testen wollen. Dazu müssen Sie entweder jedes der Geräte kurz per USB-Kabel an ihren Rechner anschließen oder den Identifier (UDID) eingeben, den Sie z.B. in iTunes das Gerät anklicken, dann auf den Menüpunkt „Übersicht“ klicken und dann mit gehaltener „command“ Taste auf den String „ECID“.
  • App ID
    Als nächsten benötigen Sie eine AppID – wählen Sie hier hello als „Product Name“ und com.example als „Company Identifier“
  • Provisioning Profile
    Nun benötigen Sie ein iOS Provision Profile, welches Sie unter https://developer.apple.com/account/overview.action erstellen können. Hierfür gibt es einen sogenannten „Development Provisioning Assistant“. Wählen Sie zunächst „Ad Hoc“ als Distribution-Art. Sobald das Provision-Profil erstellt ist, können Sie dies herunterladen und per Doppelklick auf ihrem Rechner installieren
  • Xcode
    Als letzten Schritt müssen Sie in Xcode dafür sorgen, dass die App das Provision Profil verwendet. Dafür gehen Sie in den Organizer und verknüpfen die App mit dem Profil.

Eine gute Anleitung hierfür finden Sie unter http://codewithchris.com/deploy-your-app-on-an-iphone/. Für die anderen Betriebssysteme können Sie sich hier orientieren: https://cordova.apache.org/docs/en/3.3.0/guide/platforms/index.html.

 

Fazit

Nun kann es losgehen mit den übrigen Funktionen eines Smartphones: Kompass, Beschleunigungssensor, Kamera, Batteriestatus, Videos, Audio, Browser und viele weitere mehr. Und das stets plattformunabhängig und am Ende als native App. Viel Spaß damit!

 

 

Links zum Thema

Apache Cordova Website
https://cordova.apache.org

Apache Cordova Tutorial
https://ccoenraets.github.io/cordova-tutorial/index.html

video2brain Apache Cordova
https://www.video2brain.com/de/videotraining/mobile-apps-mit-cordova

PhoneGap
http://phonegap.com

 

Leave a Comment.