App-Entwicklung leicht gemacht: Mit Ionic, AngularJS und ngCordova zur mobilen Applikation
(Grafik: Chesky_W / iStock)
• Lesezeit: 7 Min. Gerade keine Zeit? Jetzt speichern und später lesen
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 OffCanvas-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. (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 GITRepository 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
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
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.
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.
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…
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.
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.
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