Was ist Ionic?
Ionic ist ein Open Source UI Toolkit für den Bau von Webanwendungen.
Die Stärke von Ionic liegt darin, dass das Toolkit nicht nur für die intuitive Entwicklung einer Webanwendung dient sondern auch die Möglichkeit bietet, dieselbe Anwendung als Mobile App für iOS und Android anzubieten. Damit können wir uns die Stärke des Cross-Platform Development zu Nutze machen und sparen sowohl an Code als auch an Entwicklungszeit.
Als Toolkit bietet Ionic viele Bausteine, auch UI Components genannt, für die schnelle Entwicklung eines UI-Designs, das sowohl für das Web als auch für Mobile Apps ausgelegt ist. Der Fokus liegt hier auf dem Frontend und vor allem den Nutzerinteraktionen.
Ionic unterstützt Angular sowie React und Vue als Entwicklungsplattformen. Wir konzentrieren uns hier zuerst auf Angular und zeigen an einem kleinen Beispiel den Entwicklungsablauf in Ionic.
Was ist Angular?
Wie bereits erwähnt ist Angular eine der drei in Ionic verfügbaren Entwicklungsplattformen. Angular basiert auf Typescript, was uns mit seiner charakteristischen Typisierung ein mächtiges Werkzeug mitgibt. Im Einklang mit Ionic ist auch Angular komponentenbasiert und dabei setzen sich alle Angular-Komponenten vorerst wie folgt zusammen:
- HTML-Dokument
- TypeScript-Dokument
- CSS-Stylesheet
In dem HTML Dokument kommen die UI Components von Ionic zum Einsatz, alternativ können dabei aber auch Elemente verwendet werden, die spezifisch für Angular sind.
Im CSS-Stylesheet können die Styles der jeweiligen Components weiter angepasst werden und im TypeScript-Dokument können dann alle Dokumente entsprechend eingebunden und um gewünschte Funktionalitäten erweitert werden.
Ein weiteres charakteristisches Element in Angular sind die sogenannten Services. Diese bieten sich besonders dafür an, Daten zu manipulieren und Informationen zwischen Klassen auszutauschen, ohne dass diese direkt voneinander wissen müssen. Damit vereinfachen sich die Components für die UI-Anzeige, da diese nur noch die anzuzeigenden Daten von dem jeweiligen Service abfragen müssen.
Um die Services nun möglichst einfach in allen Components einzubinden, können wir den Vorteil der Dependency Injection nutzen. Hierbei kann man TypeScript-Klassen einfach deklarieren, ohne selbst explizit eine Instanziierung einfügen zu müssen, was die Klassen sehr leicht wiederverwendbar macht.
Beispiel: Grocery List App
Sagen wir, wir wollen möglichst einfach eine eigene App entwickeln, die einem das Schreiben von Einkaufszetteln aus der Hand nimmt. Dabei haben wir drei Anforderungen:
- Die aktuelle Einkaufsliste soll immer angezeigt werden.
- Neue Artikel sollen über ein Menü mit einem Buttonklick hinzugefügt werden.
- Sobald ein Artikel hinzugefügt wird, soll sich die Einkaufsliste direkt aktualisieren.
Mit den UI Components lassen sich sowohl die Liste als auch der Menübutton im Footer leicht implementieren. Für den Anfang wird die Liste nur mit Platzhaltern gefüllt.
Nun zu den einzelnen Listenelementen: um eine übersichtliche Einkaufsliste zu erhalten, braucht jeder Artikel mindestens einen Namen, eine Anzahl und eine eindeutig zugeordnete ID.
Wenn jetzt allerdings die Homepage-Component neben der Anzeige der Einkaufsliste auch noch die Datenverarbeitung für die Listenelemente übernimmt, wird der Code schnell unübersichtlich.
Da kommen nun die Services ins Spiel. Mit einem ItemService können wir von der Homepage getrennt für uns festlegen, aus welchen Attributen ein Artikel aufgebaut ist und wie die Werte der Artikel gesetzt werden.
Um einen solchen Service zu erstellen, brauchen wir den Befehl:
> ng generate service item
Damit erhalten wir direkt folgende Klasse:
Dieser Service bietet sich jetzt gut an, um darin eine Struktur für die Einkaufslistenelemente festzulegen, Elemente zu erstellen und die dann nach entsprechender Verarbeitung wieder der Homepage zurückzugeben.
Um jetzt auf den Service möglichst einfach zugreifen zu können, wird eine weitere Stärke von Angular genutzt: die Dependency Injection. Dadurch, dass der ItemService mit einem @Injectable-Modul versehen ist, können wir ihn sehr leicht in beliebige andere Components einbinden. Für die Nutzung in der Homepage-Component muss der Service nur in dessen Constructor eingefügt werden:
Darüber hinaus müssen wir uns um keine weitere Instanzierung kümmern und können direkt auf die Listenelemente des Services zugreifen.
Wir haben eine Webanwendung – was nun?
In den ersten Schritten haben wir jetzt Ionic und Angular kennengelernt und mit deren Hilfe eine Webanwendung gebaut.
Jetzt kommt Capacitor ins Spiel, um auch für mobile Plattformen Builds erstellen zu können.
In Ionic können mit Capacitor neue Target-Ordner sowohl für iOS als auch für Android im Projekt angelegt werden. Hier werden alle nötigen Files generiert, um dann hinterher unsere App als Projekt in der jeweiligen native IDE (Android Studio oder XCode) öffnen zu können.
Um den Ordner zu erstellen, in dem alle für iOS relevante Dateien generiert werden, braucht es einfach den Befehl:
> ionic capacitor add ios
Um jetzt den nativen Code weiter bearbeiten und einen Build erstellen zu können, braucht man nur noch folgenden Befehl:
> ionic capacitor open ios
Sollten wir später noch Änderungen am Webcode vornehmen, müssen wir diesen Target-Ordner nicht verwerfen und komplett neu erstellen, sondern können einfach den aktualisierten Code in den Ordner kopieren mit:
> ionic capacitor copy ios
Von hier aus kann in Xcode aus ein Build erstellt und entweder auf einem Simulator oder auf einem Endgerät getestet werden.
Sollten jetzt noch zusätzliche Funktionalitäten gewünscht sein, die nur für native Geräte zur Verfügung stehen, stellt Capacitor APIs zur Verfügung, die eine möglichst “web-nahe” Nutzung von native Features möglich machen. Die hauptsächliche Kommunikation zwischen dem Web-Teil und dem Native-Teil erfolgt dabei durch Plugins. In Capacitor gibt es drei verschiedene Arten von Plugins:
- offizielle Capacitor-Plugins (App, Device, Haptics, etc.)
- Capacitor-Community Plugins
- selbst geschriebene Plugins
Und damit haben wir eine schöne kleine „Grocery List”-App, in der eine Liste über Button-Click aktualisiert werden kann. Die App ist jetzt einmal für den Web entwickelt worden, kann aber auf zusätzlich auch noch auf iOS und Android angeboten werden.
Über den Autor
Vanessa
Nach ihrem Master-Studium in Medieninformatik und angewandter Informatik ist Vanessa als Expertin für Virtual Reality mit voller Power bei uns als Web-Entwicklerin eingestiegen und hat seitdem an vielen Native-Hybrid-Projekten mitgewirkt. Achtung: es könnte passieren, dass Sie mit ihren Stories schon vor Sprintbeginn so gut wie fertig ist 😉
Häufig gestellte Fragen:
Was ist Ionic und wie wird es verwendet?
Ionic ist ein Open-Source UI Toolkit zur Entwicklung von plattformübergreifenden Webanwendungen und mobilen Apps für iOS und Android. Es bietet vorgefertigte UI-Komponenten für eine schnelle Entwicklung.
Wie wird eine Webanwendung auf mobile Plattformen erweitert?
Mit Capacitor können Builds für iOS und Android erstellt werden. Ionic erleichtert diesen Prozess durch die automatische Erzeugung von nativen Anwendungen.
Welche Entwicklungsplattformen unterstützt Ionic?
Ionic unterstützt Angular, React und Vue als Entwicklungsplattformen. Im Beispiel wird Angular verwendet, um den Entwicklungsprozess zu demonstrieren.
Was sind die Kernkonzepte von Angular in Verbindung mit Ionic?
Angular ermöglicht die Komponentenbasierte Entwicklung von Webanwendungen. Es nutzt Services für Datenmanipulation und den Austausch von Informationen zwischen Klassen.
Welche Arten von Plugins stehen in Capacitor zur Verfügung?
Capacitor bietet offizielle, Community- und benutzerdefinierte Plugins, die die Integration von nativen Funktionen in Webanwendungen ermöglichen. Diese Plugins können die Entwicklung für mobile Plattformen erleichtern.
