Web-Apps in hybride mobile Apps umwandeln
Problem
Ihr arbeitet in einem (schon länger laufenden) Kundenprojekt, in dem eine PWA erstellt wird, die besonders für mobile Endgeräte geeignet sein soll. Aus Gründen, die keiner mehr richtig kennt, wurde damals nur auf Angular gesetzt. Doch langsam merkt ihr, dass der vorhandene Tech-Stack an seine Grenzen stößt und sich die ein oder andere Anforderung mit einer nativen App leichter erfüllen ließe. Hier heißt es nicht verzagen, denn es gibt eine Möglichkeit, die bereits getane Arbeit zu erhalten.
Lösung
Ionic to the rescue! Auch wenn Flutter derzeit auf dem Vormarsch der Cross-Plattform-Entwicklung ist, geht der Punkt in diesem Fall klar an Ionic. Denn im Gegensatz zu Flutter setzt Ionic auf etablierte Web-Frameworks und macht diese nativ ausführbar. Ihr könnt also einen großen Teil des bisherigen Codes übernehmen und müsst nicht von Null beginnen. Am folgenden Beispiel möchte ich euch zeigen, wie Ionic den Umschwung von einer reinen PWA zu einer hybriden App ermöglicht.
Beispiel
# A new Angular app is created, but you take yours, of course:
ng new ionic-app --routing
cd ionic-app
# Adding Ionic dependencies to the app:
ng add @ionic/angular
# Generating an Ionic-specific setup:
npm install -g @ionic/cli
ionic init ionic-app --type=angular# Building the source project:
ng build
# Opening the app in target IDEs:
ionic capacitor run android --project=ionic-app
ionic capacitor run ios --project=ionic-app
Weiterführende Aspekte
- Keine Angular-App? Kein Problem! Ionic unterstützt auch React und Vue!
- Ihr wollt auf die Hardware der Smartphones zugreifen? Capacitor-Plugins machen's möglich!
- Ionic kommt außerdem mit einer reichlichen Auswahl an Komponenten, die sich selbst je nach Zielplattform stylen.
- Ihr glaubt, React Native ist für euer Projekt besser geeignet? Findet es heraus!
---
Autor: Daniel Schröpfer / Software Engineer / New Business
Zum Toilet Paper #146: Web-Apps in hybride mobile Apps umwandeln (PDF)
Lust, das nächste ToiletPaper zu schreiben? Jetzt bei jambit bewerben!
