© Dimonika/Shutterstock.com
Hybride Apps mit Ionic

Das Beste zweier Welten


Mittlerweile werden Webapplikationen nicht nur auf Desktoprechnern, sondern auch auf mobilen Endgeräten verwendet. Schon zu Entwicklungsbeginn sollte man sich darum die Frage stellen, welche Geräte wie unterstützt werden und welche Lösungsansätze dafür zum Einsatz kommen sollen.

Die meisten Webapplikationen werden nicht nur auf einem hochauflösenden Desktoprechner verwendet, an dem der Benutzer über Maus und Tastatur als Eingabegerät verfügt, sondern auch auf mobilen Endgeräten, bei denen der Benutzer die Eingaben über den Touchscreen des Geräts vornimmt. Bei den verschiedenen Endgeräten unterscheiden sich nicht nur die Eingabegeräte, sondern auch insgesamt die Art der Verwendung, die Anzeigemöglichkeiten und die Workflows, an die die Benutzer gewöhnt sind. Schon zu Beginn der Entwicklung einer Applikation sollten Sie sich aus diesem Grund die Frage stellen: Welche Geräte sollen wie unterstützt werden? Gerade für mobile Endgeräte existiert eine Vielzahl von Lösungsansätzen, die von traditionellen Webseiten über hybride Apps bis hin zu nativen Apps reichen.

Traditionelle Webseiten nutzen zur Anzeige auf mobilen Geräten meist die so genannten CSS Media Queries, mit denen sich CSS-Regeln anhand der Eigenschaften des Geräts anwenden lassen. Für die Eingabe kommen spezielle Pointer-Events zum Einsatz. Die Webseite wird einfach im Browser geladen. In Form von Progressive Web-Apps rücken die mobilen Webseiten immer näher an native Applikationen heran. Mit Service Workern lassen sich z. B. Offlinefähigkeit und Push Notifications umsetzen. Außerdem können Webseiten mittlerweile auch auf dem Home-Screen des Telefons installiert werden und es kann so ein Shortcut zur Applikation erstellt werden. Die Nachteile von mobilen Webseiten und Progressive Web-Apps sind sowohl die Performance als auch ein mangelnder Zugriff auf die Schnittstellen des Geräts.

Dieser Nachteil besteht natürlich nicht, wenn Sie sich entschließen, Ihre Applikation nativ umzusetzen. Native Apps sind, wenn Sie richtig implementiert sind, sehr performant und können auf die Geräteschnittstellen zugreifen. Außerdem bettet sich das Look and Feel der App durch die Verwendung nativer Kontrollelemente nahtlos in das System ein. Der Nachteil dieser Art der Umsetzung ist, dass Sie für Android in Java und für iOS in Swift entwickeln müssen.

Das Beste beider Welten vereinigen die hybriden Apps in sich. Entwickler müssen keine neue Programmiersprache lernen, sondern können die aus der Webentwicklung gewohnten Sprachen und Technologien weiterverwenden, erhalten zusätzlich besseren Zugriff auf das System und die Möglichkeit, ihre App in den jeweiligen Store zu bringen. Wie in der Webentwicklung üblich, gibt es auch hier nicht den einen richtigen Weg, sondern verschiedene Ansätze, um die Probleme zu lösen. Ein recht populärer Vertreter der Hybridframeworks ist neben NativeScript und React Native das Ionic-Framework, mit dem sich dieser Artikel näher beschäftigt.

Ionic – was ist das überhaupt?

Für die Umsetzung von Apps mit HTML, CSS und JavaScript gibt es verschiedene Ansätze. Solche Apps können entweder zusammen mit einer JavaScript Engine kompiliert werden – ein Ansatz, wie ihn beispielsweise NativeScript verfolgt. Die zweite Variante ist die Ausführung in einer WebView, die man sich wie einen ganz gewöhnlichen Browser vorstellen kann. Für den Benutzer entsteht allerdings der Eindruck, dass es sich um eine native App handelt, da die üblichen Merkmale eines Browsers, wie zum Beispiel die Adresszeile, nicht sichtbar sind.

Ionic basiert auf dem Cordova-Framework. Cordova wurde ursprünglich unter dem Namen PhoneGap entwickelt und 2011 von Adobe aufgekauft. Mittlerweile wird es von der Apache Software Foundation als Open-Source-Projekt unter der MIT-Lizenz weiterentwickelt. Am Cordova-Projekt beteiligen sich unter anderem namhafte Firmen wie Google, IBM, Microsoft und Mozilla.

Die Ionic-App kommuniziert sowohl über die Standard-HTML-APIs als auch über Cordova-spezifische APIs mit der WebView von Cordova, die wiederum über Schnittstellen des Betriebssystems auf das Gerät zugreift. Mithilfe dieser Schnittstellen kann allerdings nur ein Teil der Features eines Geräts angesprochen werden. Um auf weitere Geräteschnittstellen wie Beschleunigungssensoren oder den Gerätespeicher zuzugreifen, stellt Cordova eine Plug-in-Infrastruktur zur Verfügung. Hier können entweder bereits bestehende Plug-ins verwendet oder eigene Plug-ins eingebunden werden (Abb. 1).

image

Abb. 1: Cordova-App-Architektur [1]

Das primäre Ziel von Ionic ist es, die Entwicklung von hybriden Apps mit HTML, CSS und JavaScript zu vereinfachen. Zur Verbindung mit dem Betriebssystem kommt das bereits erwähnte Cordova zum Einsatz. Für die Strukturierung der App greift Ionic auf das etablierte JavaScript-Framework Angular zurück. Ionic stellt Ihnen als Entwickler eine Reihe vordefinierter Komponenten zur Verfügung, mit denen Sie Ihre App aufbauen können. Beispiele für solche Komponenten sind Listen, Menüs oder Eingabeelemente – also wiederverwendbare Bausteine, die aus HTML, CSS und JavaScript bestehen. Das Look and Feel dieser Komponenten ist an das jeweils verwendete Betriebssystem, also entweder iOS oder Android, angepasst, sodass der Benutzer der App die gewohnten Elemente vorfindet. Ionic liefert außerdem ein Kommandozeilenprogramm aus, das für alle Phasen der App-Entwicklung von der Initialisierung bis zum Bauen der Applikation für das Zielsystem Hilfestellungen bietet.

Bevor Sie aber nun mit der Entwicklung von Apps mit Ionic beginnen, müssen Sie zunächst einige Voraussetzungen auf Ihrem System schaffen.

Aller Anfang … – Installation des Frameworks

Ionic nutzt Node.js als Infrastruktur. Das gilt vor allem für den Umgang mit Abhängigkeiten, bei dem der Node Package Manager npm zum Einsatz kommt. Das Ionic CLI, mit dem Sie Ihr Projekt aufsetzen, basiert auf Node.js, daher müssen Sie zunächst sicherstellen, dass Node.js in einer aktuellen Version auf Ihrem System installiert ist. Danach installieren Sie Ionic und Cordova mit dem Befehl npm install -g ionic cordova. Die Option -g sorgt dafür, dass die npm-Pakete global auf Ihrem System installiert werden und Sie das Ionic CLI überall auf Ihrem System auf der Kommandozeile verwenden können. Um die Applikation auf einem Mac im iOS-Simulator starten zu können, benötigen Sie außerdem das ios-sim-Paket, das Sie ebenfalls global installieren müssen.

Die ersten Schritte mit Ionic

Das Ionic CLI nimmt Ihnen schon beim Set-up eines neuen Projekts die meiste Arbeit ab. Mit dem Kommando ionic start myApp --v2 erzeugen Sie ein neues Projekt. Das CLI erzeugt ein Verzeichnis mit dem Namen myApp und legt dort die Grundstruktur für die App an. Die erzeugten Dateien und Verzeichnisse sind abhängig vom gewählten Template. Geben Sie, wie eben gezeigt, kein Template an, wird standardmäßig das tabs-Template verwendet. Die App weist insgesamt drei Tabs auf, zwischen denen bereits navigiert werden kann. Ionic liefert noch einige weitere Templates mit aus:

  • sidemenu: App mit einem Menü, das seitlich einfadet
  • blank: Leere App, die nur aus einer Seite besteht
  • super: Dieses Template bringt insgesamt vierzehn fertige Designs mit
  • tutorial: Grundlage für das Ionic-Tutorial

Ansonsten sind noch zahlreiche weitere Templates im Ionic Market [2] zum Download verfügbar. Für die Installation eines solchen Templates müssen Sie es lediglich mit der --template-Option angeben und können anschließend mit der Entwicklung Ihrer App starten.

Haben Sie Ihre App initialisiert, geht es im nächsten Schritt d...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang