Über unsMediaKontaktImpressum
Aaron Czichon 01. Dezember 2015

Einführung in die Welt von Ionic

Mobile Plattformen wie iOS, Android und Windows Phone gehören zu den wichtigsten Zielsystemen der modernen Softwareentwicklung. Für jede Plattform gibt es verschiedene Möglichkeiten, eine Applikation auf das Betriebssystem zu bringen. Einer der gemeinsamen Nenner ist jedoch die Möglichkeit, Applikationen mit aktuellen Web-Technologien zu entwickeln. An genau diesem Punkt setzt das Ionic Universum an.

Die in Madison, Wisconsin, ansässige Firma Drifty entwickelte im Jahr 2013 das auf Cordova und AngularJS basierende Framework Ionic. Mit einem Risikokapital von bis heute insgesamt 3,72 Millionen US-Dollar hat sich das Framework sehr schnell im Bereich der mobilen Hybrid-Entwicklung durchgesetzt. Anfang 2015 wurde das Unternehmen Drifty in Ionic [1] umbenannt.

Das Tooling und Cordova

Ionic ist das Tooling, um mobile Apps für die Plattformen iOS und Android zu entwickeln. Dabei werden die aktuellen Web-Technologien von HTML5, CSS3 und Javascript genutzt. Möglich werden solche Apps durch das Build-Tool Cordova [2].

Cordova ist, kurz zusammengefasst, ein App-Container. Dabei wird die App mit nativen Componenten bei einem Build-Prozess gebaut. Diese App enthält dann von der jeweiligen Plattform das native WebView-Control. Über das Cordova-Plugin-System, können der HTML-App, welche innerhalb der WebView läuft, Zugriffe auf das native System und somit auf die Hardware bereitgestellt werden. Etwas anschaulicher wird das in Abb.1.

AngularJS

AngularJS hat sich im Web für Single-Page-Applications weitestgehend durchgesetzt und wird für die unterschiedlichsten Web-Applikationen eingesetzt [3]. Auch Ionic nutzt diese Vorteile um eine möglichst nativ aussehende App auf die mobilen Plattformen zu bringen. Das Ionic-Framework baut auf dem AngularJS-Framework auf und erweitert das Framework um eine UI Control Library und ein Javascript-Framework. Neue Ionic-Entwickler sollten mit AngularJS gearbeitet haben und die grundlegende Funktionsweise des Frameworks verstehen.

Ionic-Framework und Ionic-Platform

Ionic besteht aus zwei Produkten: Ionic-Framework ist das UI- und Javascript-Framework, welches beim Entwickeln der Applikation genutzt wird. Zu dem Framework gehört noch ein Toolset, welches den Prozess beim Beginn einer neuen Applikation schnell und einfach gestaltet. Folgende Tools sind Bestandteil von Ionic:

  • Ionic CLI
    Das Command Line Interface ist ein Aufsatz auf die CLI von Cordova und wird ebenfalls über NPM installiert. Die CLI bietet den Standardeinstiegspunkt für eine neue Applikation. Dort kann eine neue App angelegt werden. Der Pre-Prozessor für CSS – SASS – kann ebenfalls über die CLI konfiguriert werden. Der Entwickler wird auch während des Entwicklungs- und Distributionsprozesses durch die CLI unterstützt. Beispielsweise können Assets automatisch generiert werden und die Anbindung an die Ionic Platform wird über die CLI gesteuert.
  • Ionic Creator
    Der Ionic Creator steht in Form einer Web-Applikation zur Verfügung. Mit Hilfe des Creators kann der Entwickler oder Designer einen grundlegenden App-Dummy bauen. Somit ist es beispielsweise möglich, dem Kunden einen schnellen Eindruck der Funktionsweise zu vermitteln.
  • Ionic Playground
    Als Webentwickler arbeitet man öfters mit verschiedenen Demo-Tools und kennt unter anderem Web-Tools wie etwa JSFiddle oder Codepen. Genau an diesem Punkt setzt das Wochenend-Projekt des Ionic-Teams an. Der Ionic Playground ist ein Demo-Tool für Ionic-Apps, um etwa einem anderen Entwickler schnell etwas in einem Forum-Beitrag zeigen zu können.
  • Ionic Lab
    Das Ionic Lab ist eine grafische Benutzeroberfläche für die Ionic CLI. Mit dieser Oberfläche kann der Entwickler neue Ionic Apps erstellen, Plug-Ins hinzufügen und einen Build-Prozess anstoßen. Das "Teilen" von Apps kann auch über die Oberfläche angetriggert werden.
  • Ionic View
    Mit dieser iOS- und Android-App bietet sich den Projektbeteiligten die Option, den aktuellen Entwicklungsstand der Ionic App lokal auf einem iOS- oder Android-Gerät zu testen. Das funktioniert auch ohne entsprechende Entwickler-Zertifikate. Aus rein technischer Sicht ist die Ionic View-App auch nur eine Ionic App, welche quasi den Code einer Ionic App herunterlädt und in einer Art Self-Host startet.
  • Ionic Market
    Ein Randprodukt der Ionic Produktpalette ist der Ionic Market. Dort können Entwickler Plug-Ins, Themes, Starter-Templates und ähnliches für andere Entwickler zur Verfügung stellen (kostenlos oder gegen einen Beitrag).

Abgeschlossen wird das Framework mit den eigentlichen Hauptbestandteilen: Dem UI-Framework und dem Javascript-Framework. Beide Komponenten stehen auf den bekannten Wegen zur Verfügung: Bower, GitHub-Download und über die eigene CLI.

Getting Started

Aller Anfang ist schwer – So lautet das Sprichwort. Das gilt jedoch nicht für Ionic. Wer als Entwickler schon Applikationen mit Angular entwickelt hat, wird sich in Ionic sehr schnell zuhause fühlen. Auch das initiale Setup ist sehr einfach (von den Installationen der SDKs einmal abgesehen). Um mit der eigentlich Entwicklung zu starten, benötigt man ein installiertes Node mit NPM. Dazu installiert man über die Console dann Ionic:

npm install -g ionic

Um zu prüfen, ob die CLI erfolgreich installiert wurde, gibt man einfach ionic in die Konsole ein. Das Ergebnis sieht dann wie in Abb.2 aus.

Die CLI ist dann das zentrale "Tor" zur Welt von Ionic. Damit erstellt man nun das erste Ionic Projekt. Um den Start einfacher zu gestalten, wird zunächst ein Tab-Projekt über die Konsole angelegt. Dafür führt man folgenden Befehl aus:

ionic start InformatikAktuellSample

Die CLI legt nun ein neues Ionic Projekt mit dem Namen "InformatikAktuellSample" im gleichnamigen Ordner an. Das Projekt basiert nun auf dem Tab-Projekt.

Folgende wichtige Starter-Projekte stehen über die CLI zur Verfügung:

  • Tabs [Default]
  • Sidemenu
  • Blank

Die Vorlagen sind selbsterklärend. Das Tabs-Projekt legt ein neues Projekt an, welches als Master-View 3 Tabs enthält. Das Sidemenu besteht aus einem Menü an der linken Seite und das Blank-Template ist ein leeres Projekt, ohne Standard-Views.

Werfen wir einen Blick in die Struktur des neu angelegten Projektes – s. Abb.3.

Wie man erkennen kann, verwendet Ionic mehrere Tools um die Anwendung komplett zu machen. NPM ist der Package-Manager für Ionic selbst. Auch die Cordova-Plug-Ins werden über NPM installiert. Bower wird für die Web-Package verwendet. Als Beispiel wäre hier die Ionic.io-Library zu nennen. Als drittes Tool wird Gulp für den Build-Prozess eingesetzt. Da Ionic über einer Funktionalität verfügt, um das Design nach Belieben mit SASS anzupassen, wird das SASS mit Hilfe von Gulp kompiliert. Diese Files liegen in dem scss-Ordner.

Der wichtigste Ordner, welcher beim Anlegen des Projektes generiert wurde, ist der www-Ordner. Darin sind alle Files der eigentlichen Web-Anwendung enthalten. Standardmäßig gibt es dort folgende Struktur:

  • css (eigene CSS-Files und/oder das kompilierte SASS)
  • img (Ordner für Images)
  • js (unsere eigentliche Javascript-Logik)
  • lib (verschiedene Libraries. Bei Start liegt hier zunächst nur Ionic selbst)
  • templates (die HTML-Views für Ionic)
  • index.html (Einstiegspunkt der Anwendung)

Um zu testen, ob unser neu angelegtes Projekt auch startet, wechseln wir zunächst in den "InformatikAktuellSample"-Ordner mit unserer Konsole. Darin rufen wir dann folgenden Befehl auf:

ionic serve –lab

Das Kommando öffnet nun den Standardbrowser und zeigt die Applikation an (s. Abb.4). Die Anwendung wird nun zweimal dargestellt. Einmal für die iOS-Plattform und einmal für die Android-Plattform. Der eingegebene Command hat im Hintergrund nun einen Webserver mit Live-Reload gestartet. Ändern wir nun etwas in unserer Ionic App, lädt der Webserver die Webseite neu und wir können unsere neu implementierten Änderungen direkt testen.

App ohne Deployment testen

Ionic hat eine Möglichkeit entwickelt, dass Entwickler ihre Apps auf iOS und Android direkt testen können, ohne dafür ein Paket bauen zu müssen. Das Stichwort dafür lautet Ionic View. Mit Ionic View können Apps in einen Ionic.io-Account hochgeladen werden und über die Ionic View App wieder heruntergeladen und ausgeführt werden. Ionic View steht für iOS und Android zur Verfügung.

Um eine App in Ionic View testen zu können, legt man zunächst einen Account bei Ionic an. Hierzu wechselt man zu www.ionic.io und wählt dann "Sign up". Wurde ein Account angelegt, wechselt man zurück zu der angelegten App und führt in der Konsole den Command ionic upload aus. Gibt man nun die registrierten Account-Daten (E-Mail und Passwort) ein, wird die App hochgeladen. Ist der Upload erfolgreich durchgeführt worden, erscheint die App im Webportal von Ionic.io (s.Abb.5).

Lädt man nun die Ionic View App auf ein Endgerät (iOS oder Android) und loggt sich dort mit dem angelegten Ionic-Account ein, erscheint dort die App. Innerhalb der App klickt man auf den App-Eintrag und wählt dann "View App" (s. Abb.6).

Nachdem die App von Ionic View heruntergeladen wurde, sieht man die erstellte App und kann diese testen (s. Abb.7).

Ionic Platform-Services

Ionic besteht nicht nur aus dem eigentlichen Framework, sondern wird noch um die vielen verschiedenen Platform-Services ergänzt. Wirft man einen Blick auf ionic.io, werden dort alle verfügbaren Services dargestellt. Aktuell gehören vier Services zu der Ionic Platform-Family.

  • Ionic Analytics
  • Ionic Deploy
  • Ionic Package
  • Ionic Push

Ionic Analytics ist, wie der Name vermuten lässt, ein Analytics-Tool um verschiedene Tracking-Daten der App zu erfassen. Im Unterschied zu Google Analytics setzt Ionic Analytics vollkommen auf die Integration in Ionic-Apps und bietet keine direkte Möglichkeit, den Analytics-Service auch für eine Web-App zu nutzen.

Um ein möglichst hohes Feedback zu erzielen, gibt es verschiedene Tracking-Möglichkeiten. Neben dem normalen Event-Tracking können auch Tracking-Pfade definiert werden. Damit kann man erkennen, ob die Benutzer einem gewünschten Workflow innerhalb der App folgen um dann gegebenenfalls das Konzept anzupassen. Mit Segments lassen sich Tracking-Events anzeigen und die Anteile der mit dem Event übermittelten Daten erschließen.

Ionic Deploy ermöglicht die Verteilung von Updates ohne App Store. Werden Bugs von Usern zurückgemeldet, werden die von Entwicklern sehr schnell behoben. Jedoch stehen dann zwischen Behebung des Bugs und der Verfügbarkeit der neuen Version oftmals noch 7-10 Tage. Daran sind die Review-Zeiten im App Store schuld. Handelt es sich nun um einen kritischen Bug, welcher eine grundlegende Funktion stört, ist die App bis zu 10 Tage lang nicht nutzbar. Dadurch verliert man Nutzer.

Der große Vorteil von Cordova-Apps ist, dass die eigentliche Anwendung nichts weiter als HTML und Javascript ist. Und dass HTML und Javascript serverseitig "getauscht" werden können, macht sich das Ionic Deploy zu nutze. Lädt man eine neue Version seiner App über Ionic Upload auf einen Ionic Account, kann man dieses Paket nun für Ionic Deploy freigeben. Vorraussetzung dafür ist, dass das zugehörige Cordova-Plug-in bei der initialen App-Store-Version mit ausgeliefert wurde. Gleiches gilt für die Ionic Deploy Library.

Ionic Deploy innerhalb der App lädt nun das Paket herunter und entpackt dieses in der App. Somit steht dann eine neue Version zur Verfügung. Hinweis: Ionic Deploy sollte nicht für Feature-Updates/Upgrades genutzt werden. Wird die App zu stark verändert und Apple fällt dies auf, wird die App aus dem Store entfernt. Lediglich Bugfixes und kleine Anpassungen sollten über Ionic Deploy gemacht werden.

Für Updates, welche Änderungen an Cordova-Plug-Ins benötigen, muss immer ein neues App Store Update eingereicht werden. Cordova-Plug-Ins enthalten native Code, welcher nicht über Ionic Deploy aktualisiert werden kann.

Der neueste Service der Ionic Family ist der Ionic Package Service. Oftmals ist man privat oder beruflich auf eine Plattform beschränkt. Sei es nun Linux, Windows oder OSX.
Das Problem mit Apps ist, dass diese immer das jeweilige Plattform SDK benötigen um ein Paket erzeugen zu können, welches dann in die Stores hochgeladen wird. Unter Windows zum Beispiel können keine iOS-Pakete gebaut werden, da das iOS SDK dazu fehlt. Dieses kann nur mit XCode genutzt werden. Um dieser Problematik entgegenzutreten, gibt es mit Ionic Package einen Cloud-Build-Service, welcher die Pakete für die jeweilige Plattform einfach online baut und dann als Download-Link bereitstellt. Hierzu gibt es aktuell noch keine Möglichkeit, dies über das Ionic.io-Webportal zu tätigen. Ionic Package kann aktuell nur über die CLI genutzt werden.

Der letzte und wohl am meist genutzte Platform-Service ist der Ionic Push Service. Auch hier ist der Name Programm. Mit Ionic Push können Push Notifications in die Ionic App integriert werden. Dabei werden aktuell iOS und Android unterstützt. Ionic Push nimmt einem die Verteilung von Push Notifications ab. Man hat in der App nur noch einen Endpoint gegen welchen man entwickelt. Es werden nicht für die einzelnen Plattformen unterschiedliche Implementierungen benötigt. Für das Setup muss man jedoch die jeweiligen Zertifikate und Profiles auf Ionic hochladen, damit Push funktionsfähig ist.

Registriert sich dann eine App an dem Push-Service von Ionic, erhält man in einem Callback den Device Token und kann diesen weiter nutzen. Der Device Token wird zur Identifizierung des Gerätes genutzt und muss normalerweise angegeben werden, wenn eine Notification an dieses Gerät geschickt werden soll.

Da das Speichern von Tokens nicht immer möglich oder zu aufwändig ist, kann Ionic Push auch mit den Ionic Usern arbeiten. Wurde in der Ionic App die Ionic.io-Implementierung mit einem User versehen, können Push Notifications auch ohne das Wissen des Device Tokens an registrierte Geräte gesendet werden. Hierbei wird bei der Registrierung des Gerätes der Device Token mit dem Benutzer verknüpft.

Autor

Aaron Czichon

Aaron Czichon arbeitet als Software-Entwickler im Projektumfeld mit Javascript und .NET bei der cellent AG mit Hauptsitz in Stuttgart. Nebenberuflich ist er als freier Entwickler unterwegs und Mitglied der Ionic Alpha-Gruppe.
>> Weiterlesen
botMessage_toctoc_comments_9210