Von Null auf Ionic: Code mit Leichtigkeit Deine Einkaufslisten-App

Mit Ionic baust Du aus einer Webanwendung eine App für iOS und Android – mit einer einzigen Codebasis. Am Beispiel einer kleinen Einkaufslisten-App zeigen wir, wie das funktioniert.

Was ist Ionic?

Ionic ist ein Open-Source UI Toolkit für Webanwendungen. Seine Stärke: Dieselbe Anwendung läuft zusätzlich als Mobile App für iOS und Android. So nutzt Du die Vorteile der Cross-Platform-Entwicklung und sparst Code und Entwicklungszeit.

Als Toolkit liefert Ionic viele Bausteine – sogenannte UI Components – für ein Design, das im Web und auf dem Smartphone funktioniert. Der Fokus liegt auf dem Frontend und vor allem auf den Interaktionen der Nutzenden.

Ionic unterstützt Angular, React und Vue. Wir konzentrieren uns hier auf Angular.

Was ist Angular?

Angular basiert auf TypeScript, dessen Typisierung ein mächtiges Werkzeug ist. Wie Ionic ist auch Angular komponentenbasiert. Jede Komponente besteht aus drei Teilen:

• HTML-Dokument Hier kommen die UI Components von Ionic zum Einsatz – oder Angular-eigene Elemente.
• CSS-Stylesheet Passt die Styles der jeweiligen Komponenten an.
• TypeScript-Dokument Bindet alles ein und ergänzt die gewünschten Funktionen.

Typisch für Angular sind außerdem Services: Sie verarbeiten Daten und tauschen Informationen zwischen Klassen aus, ohne dass diese direkt voneinander wissen müssen. Die Komponenten fragen nur noch die anzuzeigenden Daten ab. Eingebunden werden Services per Dependency Injection – Klassen werden einfach deklariert, ohne sie selbst zu instanziieren. Mehr zu Angular →

Beispiel: eine Einkaufslisten-App

Wir wollen eine App bauen, die einem das Schreiben von Einkaufszetteln abnimmt. Drei Anforderungen:

1. Liste immer sichtbar Die aktuelle Einkaufsliste wird immer angezeigt.
2. Artikel per Klick hinzufügen Neue Artikel kommen über ein Menü mit einem Button dazu.
3. Sofort aktualisiert Sobald ein Artikel hinzugefügt wird, aktualisiert sich die Liste direkt.

Liste und Menü-Button im Footer lassen sich mit den UI Components leicht umsetzen – zunächst mit Platzhaltern. Jeder Artikel braucht mindestens drei Angaben:

• Name
• Anzahl
• eindeutige ID

Würde die Homepage-Komponente neben der Anzeige auch die Datenverarbeitung übernehmen, wird der Code schnell unübersichtlich. Deshalb legt ein ItemService fest, wie ein Artikel aufgebaut ist und wie seine Werte gesetzt werden. Erstellt wird er mit:

ng generate service item

Weil der Service mit @Injectable versehen ist, lässt er sich in jede Komponente einbinden. Für die Homepage reicht es, ihn in den Constructor einzufügen – um weitere Instanziierung musst Du Dich nicht kümmern.

Von der Web-App zur nativen App

Ionic und Angular haben uns eine Webanwendung geliefert. Für die mobilen Plattformen kommt jetzt Capacitor ins Spiel: Es legt Zielordner für iOS und Android an, die Du in Xcode oder Android Studio öffnest.

1. Plattform hinzufügen Erzeugt den Ordner mit allen iOS-Dateien.

   ionic capacitor add ios

2. In Xcode öffnen Zum Weiterbearbeiten des nativen Codes und für den Build.

   ionic capacitor open ios

3. Änderungen übernehmen Neuen Webcode einfach in den bestehenden Ordner kopieren – ohne ihn neu zu erstellen.

   ionic capacitor copy ios

Von Xcode aus erstellst Du den Build und testest ihn im Simulator oder auf einem echten Gerät. Für Funktionen, die nur nativ verfügbar sind, bietet Capacitor APIs und Plugins:

• Offizielle Plugins z. B. App, Device, Haptics
• Community-Plugins von der Capacitor-Community
• Eigene Plugins selbst geschrieben für Spezialfälle

Häufig gestellte Fragen