Entwicklung & Design

App-Entwicklung leicht gemacht: Mit Ionic, AngularJS und ngCordova zur mobilen Applikation

Seite 3 / 3

Vibration mit ngCordova

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, oder es kann direkt unter folgendem Link heruntergeladen werden. In der ersten Variante erfolgt die Installation ngCordova mit den folgenden Zeilen:

ngCordova-Installation mit bower

$ npm install bower 
$ bower install ngCordova

Listing 7

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

Einbinden von ngCordova

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

Listing 8

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

Abhängigkeiten definieren

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

Listing 9

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:

ngClick-Methode

<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>

Listing 10

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

JavaScript ngClick-Methode

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

Listing 11

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.

Auslieferung als native App

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:

Android hinzufügen

$ ionic platform add android

Listing 12

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:

App erstellen

$ ionic build android

Listing 13

Fazit

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.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

6 Kommentare
Oliver

Wir nutzen für die Apps von http://www.gebraucht.de/kleinanzeigen-apps das „Framework“ Supersonic von http://www.appgyver.com , welches ähnlich wie die vorgestellte Methode letztendlich auf ionic, angular und cordova zurückgreift und diese noch durch einige Schnittstellen vereinfacht.

Wenn man schnell und mit überschaubaren Aufwand eine App für iOS und Android veröffentlichen möchte, ist die Entscheidung für eine HTML App auf dieser Basis meiner Meinung nach sehr zu empfehlen. Die Unterstützung und Geschwindigkeit auf iOS ist für einfache HTML Apps bereits gut bis sehr gut. Bei Android ist es aufgrund der vielen unterschiedlichen Geräte und Android Version sehr unterschiedlich und leider zum Teil noch nicht 100%ig zufriedenstellend.

Sebastian
Sebastian

Danke Konstantin für den tollen Artikel!
Mich hätte an dieser Stelle mal ein Performance-Vergleich z.B. reguläres Cordova vs ngCordova vs Cordova + CocoonJS interessiert. Die Angabe „läuft schnell“ ist leider etwas subjektiv :)

Ansonsten guter Artikel! Danke.

Tim
Tim

Schöner Artikel. Was denkst du über steroid.js von appgyver? jetzt mit eigenem framework namens „supersonic“ empfinde ich diese hybrid lösung als forschrifttlichste. der vorteil hier ist auch die nutzung nativer elemente…

Jan

Ionic zusammen mit AngluarJS ist definitiv eine schöne und schnelle Lösung, in der sich sauber (MVC) entwickeln lässt. Steroids.js schauen wir uns aber auch gerade noch an. Ist aber so wie es aktuell aussieht primär für iOS Apps spannender.

Michael

Vielen Dank für diesen Artikel, ich werde mir das mal genauer anschauen und testen, sobald ich Zeit habe.

Bisher setze ich auf Cordova, jQuery, backbone.js und underscore.js.

Und damit lassen sich wirklich sehr, sehr schnelle Apps entwickelt.

Johanna.g
Johanna.g

Vielen Dank Konstantin für den super Bericht. Auch wir setzen auf plattformunabhängige App-Entwicklung und haben uns daher in dem Atemzug mit Ionic, AngularJS und RequireJS beschäftigt. Bisher sind dadurch leistungsstarke, nutzerorientierte und flexible Apps entstanden. In unserem Blog berichten wir über vermeintliche Probleme, Schwierigkeiten und weiteres Potenzial:
http://www.flyacts.com/blog/tutorial-angularjs-mit-requirejs-und-ionic-framework/

Habt ihr auch schon mit RequireJS in der Kombi gearbeitet? Welche Erfahrungen habt ihr damit gemacht?

Ich freu mich auf Feedback.

Johanna