Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 38

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

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

(Grafik: Chesky_W / iStock)

Durch Ionic ist es möglich, einfach mobile Applikationen zu entwickeln und anhand einer einzigen Codebasis mehrere mobile Plattformen zu bedienen. Was Ionic dabei so besonders macht und wie es im Zusammenspiel mit AngularJS und ngCordova seine Stärken ausspielt, stellen wir euch im Folgenden vor.

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.

Was ist Ionic?

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.

ngCordova

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

Tutorial für eine klassische To-do-Applikation

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:

Installation

$ npm install - g cordova ionic

Listing 1

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:

Projekt anlegen

$ ionic start toDoApp blank

Listing 2

Links und Literatur

  1. Funktionsfähige To-do-App
  2. ngCordova
  3. Ant

Finde einen Job, den du liebst zum Thema TYPO3, PHP

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

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

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

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

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

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

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen