IONIC 101

Beitrag von Vanessa

 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:

  1. Die aktuelle Einkaufsliste soll immer angezeigt werden.
  2. Neue Artikel sollen über ein Menü mit einem Buttonklick hinzugefügt werden.
  3. 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.

,

IONIC 101

Ionic ist ein Open Source UI Toolkit für den Bau von Webanwendungen. Hier erklärt Vanessa die Grundlagen anhand einer Einkaufslisten-App.

Leitbilder und Werte der onexip GmbH

Erfahrt mehr über unser Leitbild, unseren Umgang innerhalb der onexip Familie und wo unsere Wertvorstellungen liegen.

Frohe Weihnachten und ein glückliches neues Jahr 2021

Auch im eingefrorenen Arbeitsleben 2020 konnten wir unsere Kompetenzen im Bereich der webbasierten Cross-Platform Apps und der hardwarenahen Entwicklung weiter ausbauen und neue talentierte Mitarbeiter für unsere Mission gewinnen.

How to Homeoffice at onexip

Homeoffice, ein Thema, welches unseren Arbeitsalltag schon lange bestimmt - Hier erfahrt ihr, wie wir uns bei #onexip organisieren und arbeiten.

Online-Meetings bei onexip

Für unsere Kunden remote flexibel erreichbar. Gut betreut auch hinter der Kamera. Remote Calls in Zeiten von Corona.

Blitz Basic Script – Ein Full Stack Webprojekt

Wir möchten euch anhand eines Full Stack Webprojektes einmal zeigen, wie eine komplexe Webanwendung heutzutage aufgebaut ist. Das Projekt "BlitzBasicScript" bietet eine Plattform zur Entwicklung von Computerspielen direkt im Browser.
,

The race of the next 10 years

This article represents my personal opinion about the technological steps in the next 10 years from now on.
,

LaddaFX - nice progress buttons for JavaFX

We often need to show a progress when the user clicks s button to start something like loading or saving something.
,

Mobile app for iOS with JavaFX

We wrote a demo of a mobile app for iOS written with JavaFX. We styled the app with pure CSS. Looks native isn't it?