Toilet Paper 3

Mobile X-Plattform-Entwicklung mit Ionic 2

Problem

Der Kunde beauftragt die Entwicklung einer mobilen Anwendung, welche auf den gängigen Plattformen iOS, Android und Windows Phone läuft. Budget und verfügbare Projektlaufzeit reichen schlicht nicht aus, um alle Anwendungen nativ zu entwickeln. Außerdem fehlt im Team das entsprechende technische Know-How für alle Plattformen.

Lösung

Man nehme das Hybrid-App-Framework Ionic 2. Mit diesem Open-Source-Framework lassen sich Apps für mobile Betriebssysteme auf Basis von HTML5, CSS, Sass und JavaScript entwickeln und auf verschiedenen Plattformen über den WebView ausführen.

Die App-Logik wird basierend auf Angular 2 implementiert und bietet darüber hinaus eine Menge an UI-Elementen (Dialoge, Floating Action Buttons, Loading Spinner, etc.), welche sich auf dem entsprechenden Ziel-OS an den gewohnten Look & Feel anpassen. Die Anwendung lässt sich auch leicht durch simples CSS oder Überschreiben von Sass-Variablen themen. Für den Zugriff auf native Features des Betriebssystems (Bluetooth, Location Service, Kamera, etc.) benötigt es Apache Cordova.

Mit dem Ionic CLI bietet das Framework zudem ein Tool, mit dem sich ein Projekt initial erstellen und für verschiedene Plattformen bauen lässt. Es übernimmt auch die Skalierung von Icons und Splash-Screens für die Zielplattform und entsprechende Displayauflösungen. Damit man das Projekt nicht ständig auf einem Gerät oder Emulator ausführen muss, lässt sich lokal ein Development-Server starten, wodurch man die App im Browser mit den bekannten Tools ausführen und debuggen kann.

Ionic 2 und Cordova lassen sich über npm installieren und benötigen NodeJS.

Beispiel

Mit folgendem Befehl lässt sich das Grundgerüst einer mobilen Anwendung erstellen:

$ ionic start myNewApp --v2

Das Ergebnis ist ein Ordner namens myNewApp, der ein bereits lauffähiges Projekt enthält und damit einen guten Ausgangspunkt für die Weiterentwicklung bietet.

Unter Mac ist bereits ein fertiges iOS-Projekt angelegt, welches sich mit Xcode öffnen und auf dem iPhone ausführen lässt. Möchte man nun beispielsweise ein Android-Projekt hinzufügen, geht das mit dem Befehl:

$ ionic platform add android

Wenige Sekunden später finden wir ein fertiges Android-Projekt vor, welches sich in Android Studio öffnen und auf Emulator oder einem Gerät ausführen lässt. Alternativ lässt sich das Projekt aber auch direkt mit folgendem Befehl auf Emulator oder einem angeschlossenen Gerät ausführen:

$ ionic run android

Das Ergebnis sieht man auf dem Bild rechts.

Ionic Screenshot