Jan | 17.10.2024

Eine Basis, alle Plattformen: Die eigene iOS-App mit Webtechnologien

App > Eine Basis, alle Plattformen: Die eigene iOS-App mit Webtechnologien

Eine mobile App parallel im App-Store und auf Google Play zu platzieren bedeutet meist einen Umgang mit nativen Tools, verschiedenen Frameworks und unterschiedlichen Programmiersprachen, je nach mobilem Betriebssystem. Dadurch können bei der Neuentwicklung einer mobilen App schnell die Kosten in ungeahnte Höhen steigen.

Mittlerweile existiert Dank Webtechnologien die Möglichkeit, Apps für verschiedene Plattformen auf einer Codebasis zu entwickeln. In diesem Artikel gehe ich darauf ein, wie die iOS App-Entwicklung mit Webtechnologien funktioniert.


Die Vorteile der hybriden Cross-Plattform Entwicklung

Ausgangslage: Native mobile Technologien

Zum Entwickeln von nativen Apps im iOS-Betriebssystem werden die Programmiersprachen Swift oder Objective-C genutzt, bei Android sind es meistens Java oder Kotlin. Der Entwicklungsaufwand, der getrieben werden muss, bis eine App sowohl im App Store für iOS als auch auf Google Play für Android vertreten ist, ist also doppelt so hoch. Hier kann bei der nativen Entwicklung auch keine Abkürzung genommen werden - die Programmierung für die beiden Betriebssysteme ist zu unterschiedlich. Mit der reinen Entwicklung der App ist das Thema jedoch nicht abgeschlossen. Folgekosten durch Wartung und Verbesserungen müssen berücksichtigt werden.

Bei der nativen Entwicklung programmieren und bezahlen Sie doppelt.


Die Lösung: Cross-Plattform-Entwicklung


Softwareentwicklerin am Laptop mit Handyapp
Für den Weg vom Web zur mobilen App gibt es mehrere Möglichkeiten.

Infolgedessen habe ich mich intensiver mit der Cross-Plattform-Entwicklung beschäftigt.

Die Idee dahinter ist simpel: Es wird eine App entwickelt, die auf mehreren Plattformen gleichzeitig und damit im Idealfall auf iOS und Android läuft.

Hierbei lässt sich zwischen nativer Cross-Plattform-Entwicklung und hybrider Cross-Plattform-Entwicklung unterscheiden. Native Cross-Plattform-Entwicklung kann beispielsweise in React Native mit JavaScript oder Flutter mit Dart erfolgen. Nach der Entwicklung kann die App dann einmalig in z.B. eine iOS App umgewandelt werden. Für diesen Artikel und meinen Workshop auf der Diwodo vor zwei Jahren habe ich mir den hybriden Ansatz herausgepickt und praktisch angewandt.


Cross-Plattform mit Capacitor

Das Capacitor-Projekt stammt aus dem Hause Ionic und hat sich mittlerweile gut etabliert.

Die Entwicklung mit Capacitor funktionert folgendermaßen: Man entwickelt selbst eine Web-App. Das Capacitor-Projekt kombiniert diese dann mit einer Laufzeitumgebung, um die Web-App sowohl auf iOS als auch eine Android als App auszuführen. Das Capacitor-Projekt bildet diese Laufzeitumgebung und kümmert sich darum, dass die Ausführung auf allen Plattformen funktioniert.

Der Große Pluspunkt: Dadurch, dass hier eine Web-App die Basis bildet, können Sie auf bereits vorhandene Software zurückgreifen und diese ziemlich einfach als App veröffentlichen!

Bei schon bestehendem Code liegt der Vorteil klar auf der Hand: Sie müssen bei der Entwicklung nicht bei null starten und Vorhandenes nicht nochmal neu entwickeln. Das Capacitor-Projekt ermöglicht Ihnen im Endeffekt, eine App zu bauen, die sich wie ein Browser verhält.

Genau genommen startet der Nutzer eine App, die eine Web-App in einem Browserfenster anzeigt. Die gesamte App läuft in diesem Browserfenster und erlaubt über ein App-ähnliches User Interface Zugriff auf alle gewünschten Daten und Funktionen.

Zudem stellt Capacitor durch Plugins die Funktion bereit, auf Funktionalitäten des jeweiligen Betriebssystems zuzugreifen, z.B. Push-Benachrichtigungen, GPS, Motion Sensors, Kamera, etc. Neben den Open-Source-Plugin von Capacitor selbst existieren auch zusätzliche Plugins aus der Community. Und natürlich können Sie selbst weitere Plugins entwickeln.


Behalten Sie Ihre App-Nutzenden im Fokus


Junge Frau tippt auf Handy
Nutzer erwarten meist betriebssystemspezifisches App-Verhalten.

Das Aussehen und das Verhalten einer App auf einem bestimmten Betriebssystem ist für Nutzer manchmal schwierig in Worte zu fassen oder konkret zu beschreiben. Trotzdem wissen die Nutzer, wie eine iOS oder Android App aussieht. Kleine Veränderungen im Look & Feel können hier große Auswirkungen auf die Nutzerzufriedenheit haben.

Das Layout und Aussehen der App darf deshalb nicht vernachlässigt werden. Natürlich besteht die Möglichkeit, die App selbst nach allen CSS-Vorlieben zu stylen und aufzubereiten. Darüber hinaus stellt Capacitor zusätzlich eine umfassende UI-Bibliothek von Ionic mit verschiedenen fertig designten Elementen für iOS und Android zur Verfügung.




Wie kommt die iOS App nun in den App-Store?

An Apple führt kein Weg vorbei. Um die App bei Endkunden auf den mobilen Geräten platzieren zu können, muss die App in den App-Store gebracht werden. Dies geschieht normalerweise in drei Schritten.

1. Die erste Grundvoraussetzung ist die kostenpflichtigen Mitgliedschaft im Apple Developer Program.

Hier wird ein Lizenzvertrag zwischen Apple und dem Entwickler geschlossen, damit Apple erlaubt, Apps in den App-Store einzustellen. Erst nach Vertragsabschluss bietet Apple Zugriff auf ein Programm namens App Store Connect. Hier lassen sich die eigens programmierten Apps hochladen und verwalten, also eine Art CMS-System für den App-Store. Es lassen sich z.B. Information wie der App-Name oder das App-Icon aus App Store Connect anlegen und pflegen.

2. Der zweite Schritt nutzt das Programm sich „TestFlight", das ermöglicht, die hochgeladene App mit einem ausgewählten Publikum an Testpersonen zu teilen.

Über das TestFlight-Programm können die Tester auch schließlich Rückmeldung zur App geben. Ist die Testphase abgeschlossen vollendet die Einreichung bei Apple den Vorgang. Allerdings schaltet Apple die App nicht sofort live in den App-Store, sondern behält sich das Recht vor, nochmals zu überprüfen, ob der Entwickler alle Guidelines seitens Apple eingehalten und umgesetzt hat.

3. Die finale Aktion ist die Freischaltung Ihrer App durch Apple im App Store.

Sobald die Review in TestFlight ohne Beanstandung durchgelaufen ist, kann die App endlich durch den Endnutzer aus dem App-Store heruntergeladen werden.

Ob Sie diese Schritte zusammen mit Ihrem Entwicklerteam durchgehen oder (bei Zusammenarbeit mit einem Dienstleister) komplett abgeben, hängt ganz von der Vereinbarung mit Ihrem Entwicklerteam ab. Wir bei newcubator setzen in jedem Schritt auf maximal-transparente Kommunikation um allen Anforderungen gerecht zu werden.




Lessons learned

Um einen Eindruck für den Funktionsumfang von hybriden Apps zu erhalten, können Sie sich durch viele Projekte klicken, die kostenfrei als Open Source von Ionic zur Verfügung gestellt werden.

Vor allem im CI/CD Prozess muss aber mit Kosten gerechnet werden, vor allem wenn man das Vertesten seiner App nicht manuell selbst übernimmt. Ionic bietet hier ein kostenpflichtiges Produkt namens AppFlow an, das automatisiert die App vertestet.

Capacitor bietet allgemein eine elegante Lösung für Apps auf iOS und Android. Wofür allerdings noch keine Lösung bereitsteht, sind Applikationen für WatchOS und WearOS, also Apps für Smartwatches. Trotzdem bietet das Capacitor-Projekt eine schnelle und kostengünstigere Lösung im Vergleich zur reinen nativen Entwicklung.

Die App kann mit deutlich weniger Zeitaufwand den ersten Testern, Kunden oder Partnern präsentiert werden. Allerdings ist der zeitliche Aufwand des gesamten Prozesses von Lizenzvertrag bis Livegang der App nicht zu unterschätzen. Insbesondere, wenn die App im App Store veröffentlicht werden soll! In unserer Praxis hat sich gezeigt, dass man für diesen Vorgang lieber etwas mehr als zu wenig Zeit einplanen sollte. Es müssen viele Sicherheitsaspekte seitens Apple beachtet werden, die weiterhin Koordinations- und Zeitaufwand kosten. Außerdem muss man sich bewusst sein, dass Apple das letzte Wort hat. Die Prüfung im App Store entscheidet schlussendlich darüber, ob Ihre App in den App-Store kommt oder nicht. Dabei haben Sie auch keine großen Einflussmöglichkeiten, außer Ihre App gegebenenfalls nach Abänderung mehrmals einzureichen.

Es ist unumgänglich, zu Beginn des Entwicklungsprozesses zu überlegen, ob die App ausreichend Erfolgschancen hat und ob Sie als Publisher der App die sehr umfassenden und teilweise sehr strikten Apple Guidelines akzeptieren möchten.

Wir freuen uns, mit dem Capacitor-Projekt weiterhin schnell und effizient gute hybride Apps mit unseren Kunden und Partnern zu entwickeln!

Wenn Sie gerade im Planungsprozess Ihrer eigenen neuen App sind, oder sogar schon eine Web-Basis haben, auf die Ihre App aufbauen soll, freuen wir uns sehr über Ihre Kontaktaufnahme. Wir beraten Sie umfassend und begleiten Sie von der ersten Konzeption, über die gesamte Entwicklung bis zur Veröffentlichung Ihrer App auf der Plattform Ihrer Wahl.

Jan Sauer
Jan (Softwareentwickler)

… ist als bewanderter Backend-Entwickler mit Focus auf DevOps-Engineering in der TypeScript- und JavaScript-Welt zuhause. Für alle Themen rund um Cloud und Softwarearchitektur ist er als AWS Certified... mehr anzeigen

Github

More from Jan

Unsere Entwicklungsexpertise

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund