Native mobile Applikationen zu erstellen, ist aufgrund der verschiedenen Plattformen wie iOS oder Android nicht unkompliziert. Die Notwendigkeit von unterschiedlichen Versionen für jede Plattform macht die Entwicklung zeitaufwendig. Wäre es nicht ein enormer Vorteil, wenn man relativ einfach auf Grundlage einer einzigen Codebasis jede mobile Plattform bedienen könnte? Genau dies ermöglicht das Zusammenspiel von Ionic, AngularJS und ngCordova.

Ionic ist ein Frontend-Framework, das mit einem eigenen Kommandozeilentool ausgestattet ist. Der Frontend-Stack besteht aus einem modularen CSS-(SASS)-Framework, das im Stil von Bootstrap eine Palette an vorgefertigten Komponenten und eine Menge an Basisfunktionen für Apps liefert, zum Beispiel Off­Canvas-Menüs. Syntactically Awesome Style Sheets wird mit einem Compiler in übliches CSS übersetzt. Es ermöglicht dem Entwickler, ein modulares CSS zu schreiben, in dem Variablen, Methoden und Rechnungen innerhalb von SASS zur Verfügung stehen.

Ionic führt seine Animationen mit minimalen DOM-Zugriffen aus. Dabei verwendet es CSS3-Transitions, die von der Hardware beschleunigt werden. Diese Vorgehensweise verbessert die Performance drastisch. Gleichzeitig werden alle Browser inkompatibel, die CSS-Transitions nicht unterstützen. Geeignet sind UIWebView für iOS 6+ und Android 4+. Windows Phone und FirefoxOS sind zurzeit noch nicht kompatibel.

Das Kommandozeilentool von Ionic verpackt den Code als App, startet gegebenenfalls virtuelle Geräte für Simulationen und vereinfacht so die Verwaltung der verschiedenen
Plattformen wie etwa iOS, Android und Windows. Dabei greift es auf Cordova und die Entwicklerkits der Hersteller zu.

Das Apache-Projekt Cordova alias Phonegap hat sich als beliebtestes Deployment-­ und Plattform-Tool positioniert. Es bietet eine Bibliothek an, um via JavaScript auf die Hardware des Smartphones zuzugreifen. Mit Cordova können Entwickler auf Basis von JavaScript­, CSS­ und HTML­-Code mobile Apps erzeugen.

Um die Funktionen von Cordovas JavaScript-Bibliothek zu nutzen, könnte man diese einfach global in die mit AngualrJS erstellten Anwendungen – an das window-Objekt – einhängen und verwenden. Doch widerspricht dieses Prinzip der globalen Variablen der Architektur von AngularJS. ngCordova nimmt sich dem an, platziert sich „auf“ der Bibliothek von Cordova und macht so alle Funktionen per Dependency Injection (DI) von AngularJS verfügbar. Durch die DI können dann einzelne Funktionen in ihre Komponenten injiziert und verwendet werden. Das erleichtert unter anderem das Unit-Testing, in dem beispielsweise die Services vorgetäuscht (mock) werden, um Hardware-Zugriffen auch ohne Smartphone-Umgebung zu ermöglichen.

Im Zusammenwirkeln von Ionic, AngularJS und ngCordova kann jedes Framework seine Stärken ausspielen. Während AngularJS für die Code-Architektur verantwortlich ist, ist Ionic für das Frontend zuständig. ngCordova sorgt für den Zugriff auf die Smartphone-Hardware. (Grafik: t3n)

Wie arbeiten AngularJS, Ionic und ngCordova nun zusammen? Jedes Framework hat eine bestimmte Zuständigkeit. Ionic arbeitet ausschließlich für die Benutzeroberfläche. Dabei stellt es vorgefertigte CSS-Komponenten und User-Interface-Funktionen über Direktiven oder Services zur Verfügung, die dann im HTML als eigene Elemente und Attribute aktiviert oder per Dependency Injection in AngularJS-Komponenten injiziert und verwendet werden können. AngularJS bietet die Infrastruktur beziehungsweise Architektur, um skalierbare Webanwendungen zu entwickeln. Und ngCordova schließlich sorgt für den Zugriff auf die Smartphone­-Hardware.

Im folgenden Abschnitt wird eine typische To-do-App implementiert, in der sich Aufgaben erstellen lassen. To-dos bestehen aus einem Titel und können als „erledigt“ markiert werden, mit einer Vibration als Feedback. Im Beispiel kommen nur vorgefertigte Styles zum Einsatz, ohne Anpassungen via SASS.

Die App steht in meinem GIT­Repository zum Download bereit. Bevor es mit der Entwicklung losgehen kann, müssen alle benötigten Abhängigkeiten vorhanden sein. Um Ionic und Cordova automatisch zu installieren, greift man auf NodeJS und das Dependency-Management npm zurück. Nach der Installation geben wir Folgendes in die Kommandozeile ein:

$ npm install - g cordova ionic

Damit sind Ionic und Cordova fertig eingerichtet und es kann losgehen. Mit Hilfe von Ionic wird nun ein Projekt eröffnet. Es gibt die Möglichkeit, sich anhand eines vorgefertigten Templates ein lauffähiges Projekt anlegen zu lassen, das zum Experimentieren genutzt werden kann. Das folgende Kommando erstellt ein leeres (blank) Projekt:

$ ionic start toDoApp blank

Ionic verfügt über einen eingebauten Webserver für die Entwicklung. Dieser überwacht Änderungen im Quellcode und aktualisiert automatisch den Browser (live­reload). Nach der Navigation zu unserem Projekt muss dieser Webserver nun gestartet werden:

$ cd toDoApp 
$ ionic serve

Es öffnet sich der Standardbrowser unter dem betreffenden Link und zeigt unser Ionic-Projekt an.

Um zusätzliche Logik definieren zu können, muss im body-Attribut mit ng­controller ein Controller angegeben werden. Dann werden die To-dos mit ng­repeat aus dem $scope ausgegeben.

[...] 
<body ng-app="starter" ng-controller="ToDoController">
          [...] 
          <ion-pane>
                     <ion-header-bar class="bar-stable"> 
                                 <h1 class="title">Ionic Blank Starter</h1>
                     </ion-header-bar> 
                     <ion-content>
                                 <ion-checkbox data-ng-repeat="toDo in toDos" 
                                                                  data-ng-model="toDo.done">
                                     <span data-ng-bind="toDo.title"></span>
                                 </ion-checkbox>

                     </ion-content>
          </ion-pane> 
</body>
[...]

Die Elemente ion­pane, ion­header­bar und ion­content sind AngularJS-Direktiven, die Ionic zur Verfügung stellt, erkennbar durch das Präfix „ion“. Die hier genutzten Direktiven sind relativ selbsterklärend und definieren die einzelnen Bereiche der Oberfläche.

Der folgende Code erstellt den Controller in JavaScript:

Controller

var app = angular.module('starter', ['ionic']);
app.controller("ToDoController", function($scope)
          $scope.toDos = [
                    {
                              title:"Müllrausbringen",
                              done:false 
                    },
                    {
                              title:"Bildaufhängen",
                              done:false
                    },
                    {
                              title:"Staubsaugen", 
                              done:false
                    }
           ];
});

Listing 5

Per ngrepeat werden die To-dos mit ihrem Status angezeigt. (Screenshot: ngCordova)

Jetzt werden die ersten To-dos mit Checkboxen in unserer Liste angezeigt. Für das Anlegen neuer To-dos wird nun ein Button in die Header-Leiste eingefügt. Dieser öffnet einen Dialog zur Eingabe des Aufgabentitels. Die Integration des Buttons in die ion­header­bar-Direktive erfolgt mit den entsprechenden CSS-Klassen:

Button

[...]
<ion-header-bar class="bar-stable">
          <h1 class="title">Meine To Do Liste</h1> 
          <button class="buttonicon-leftion-plus"
                    data-ng-click="createToDo()">Hinzufügen</button> 
</ion-header-bar>
[...]

Listing 6

Im Popup-Dialog kann der Nutzer neue Aufgaben anlegen, die AngularJS anschließend automatisch der HTML-Liste hinzufügt. (Screenshot: ngCordova)

Die in ngClick angegebene Methode muss nun im Controller angelegt werden. Der Service $ionicPopup soll hier die Aufgabe übernehmen, das Popup anzuzeigen. Dieser muss als Parameter in der Controller-Funktion angegeben werden. Jetzt öffnet sich beim Tippen auf „Hinzufügen“ ein Popup. Nachdem der Nutzer den gewünschten Titel eingegeben hat, wird das To-do auf das Array gelegt, und AngularJS aktualisiert automatisch die Liste im HTML.

Für die Vibration beim Abhaken eines To-dos ist das jeweilige ngCordova-Plugin notwendig. Die Bibliothek ngCordova lässt sich mit bower installieren, was allerdings git in der Kommandozeile voraussetzt. In der ersten Variante erfolgt die Installation ngCordova mit den folgenden Zeilen:

$ npm install bower 
$ bower install ngCordova

Für eine manuelle Einrichtung sollte sich das Plugin unter www/lib/ngCordova befinden. Im Code muss ngCordova vor cordova.js eingetragen werden:

<script xsrc="lib/ngCordova/dist/ng-cordova.js"></script> 
<script xsrc="cordova.js"></script>

Nicht vergessen: Die entsprechende Abhängigkeit in der Moduldefinition festlegen:

var app = angular.module('starter', ['ionic', 'ngCordova']);

Sollte beim Testen der Anwendung eine Fehlermeldung in der Konsole wie „Unknown Provider“ erscheinen, wurde die Bibliothek aus irgendeinem Grund nicht richtig eingetragen.

Nun legt ihr eine ngClick-Methode auf die ion­checkbox-Direktive:

<ion-checkbox data-ng-repeat="toDo in toDos" 
                    data-ng-model="toDo.done"
                    data-ng-click="checkDone(toDo);">
       <span data-ng-bind="toDo.title"></span>  
</ion-checkbox>

Und den zugehörigen JavaScript-Code in unseren Controller:

app.controller("ToDoController", function($scope, $ionicPopup, $cordovaVibration){ 
          [...]
          $scope.checkDone = function (toDo){ 
                    if(toDo.done)
                              $cordovaVibration.vibrate(100);
          };
          [...]
});

Achtet darauf, den Service $cordovaVibration als Abhängigkeit einzutragen.

Beim Abhaken eines To-dos taucht nun eine Fehlermeldung in der Konsole auf:

• TypeError: Cannot read property ‚vibrate‘ of undefined

Der Grund dafür ist, dass die Bibliothek cordova.js erst beim Verpacken als App eingefügt wird und ngCordova versucht, auf diese Funktionen zuzugreifen.

Die App soll nun auf unser Smartphone gelangen – beispielsweise unter Android. Als Erstes steht der Download des Android Software Development Kit (SDK) an. Damit Ionic die Plattform hinzufügen kann, sollte die Umgebungsvariable ANDROID_HOME auf den SDK-Ordner gesetzt oder Android in der Kommandozeile verfügbar sein. Voraussetzung für das SDK ist ein Java Development Kit ab Version 1.5. Ist das SDK installiert, navigiert ihr mit der Kommandozeile in den Projektordner und gebt Folgendes ein:

$ ionic platform add android

Jetzt ist unser Projekt bereit, um es als Android Application Package, besser bekannt als APK, auszuliefern – die installierbare App für das Smartphone. Falls Fehlermeldungen erscheinen, solltet ihr überprüfen, ob alle Pfade zum SDK-Ordner in der PATH-Umgebungsvariable vorliegen und das Android Target 19 installiert ist.

Im Projektordner wurde nun der Ordner platforms erstellt, der wiederum den Ordner android enthält. Wer sich etwas mit dem Android-SDK auskennt, wird in diesem Ordner die übliche Struktur für Android-Apps vorfinden. Dort lassen sich auch Permissions für die Hardware-Komponenten konfigurieren, was aber Cordova bei Plugin-Installationen automatisch vornimmt.

Um unsere App nun zu erstellen, müsst ihr Ant installieren , in der Kommandozeile verfügbar machen und Folgendes aufrufen:

$ ionic build android

Mit wenigen Zeilen Code und ohne CSS-Kenntnisse ist in relativ kurzer Zeit eine schicke App entstanden. Dank vieler eingebauter Direktiven braucht ihr euch nicht darum zu kümmern, Grundfunktionen für Apps über unzählige Plugins zu integrieren. Gleichzeitig laufen die Animationen flüssig ab – Ionic verzichtet weitgehend auf JavaScript – und die App startet schnell: zwei Aspekte, die in der mobilen Nutzung entscheidend sind.