Die Entwicklung einer hybriden App kann generell in mehrere Kategorien eingeteilt werden. Im groben handelt es sich dabei vor allem um den unterschiedlichen Aufbau der Inhalte bzw. deren Darstellung und Aufbau. Inhalte können dabei sowohl statisch in der App selbst hinterlegt sein, aber auch aus einer Datenbank abgefragt werden. Beim Aufbau bzw. dem Template / Gerüst ist dies ähnlich. Es kann sowohl aus einer bestehenden mobilen Webseite, aber auch aus der App selbst stammen. Was sich jedes alle hybriden Apps teilen, ist ein „nativer Rahmen“ in welchen die Inhalte eingebettet sind. Dieser Rahmen macht es erst möglich aus einer Webseite aus HTML5, CSS3 und JavaScript eine installierbare Applikation zu erstellen.
Woher kommen die Daten?
Eine der ersten sehr wichtigen Fragen bei der Entwicklung einer Applikation, ist die Frage, woher die eigentliche Inhalte kommen sollen. Diese können entweder direkt in die HTML-Dateien, mit welchen später die Apps erzeugt wird, eingetragen werden. Allerdings können diese dann nicht mehr ohne ein Update der App geändert werden. Dies bietet sich somit nur für statische Inhalte an, welche sich nicht ändern. Beispielsweise Öffnungszeiten oder ähnliches.
Eine zweite Möglichkeit ist es, die Inhalte aus einer Datenbank oder über eine entsprechende Schnittstelle wie JSON oder XML zu laden und diese anschließend im Template auszuspielen. Hierfür bietet es sich je nach Aufbau an dies über JavaScript oder auch über PHP umzusetzen. PHP ist eine Serverseitige Programmiersprache (wird an dieser Stelle nicht genauer erläutert), daher kann ein PHP-Script nicht in einer App ausgeführt werden. Allerdings ist es möglich über entsprechende Aufrufe in jQuery und AJAX ein PHP-Script auf einem Server aufzurufen, dieses auszuführen und mit den Daten in der Antwort weiterzuarbeiten. Ebenfalls kann aus der App heraus eine JSON Schnittstelle / ein Webservice angesprochen werden.
Aufbau des Template / des Gerüsts:
Hierbei gibt es viele unterschiedliche Ansätze. Generell kann zwischen zwei Kategorien unterschieden werden. Es wird eine responsive / mobile Webseite erstellt und diese über eine View (iFrame) in den App Rahmen eingebracht oder das Template, also HTML selbst wird in die App integriert. Die Darstellung wird dann in der App selbst durchgeführt, lediglich die Inhalte müssen ggf. nachträglich geladen werden.
Ein wichtiger Punkt ist dabei die Performance der Applikation. Muss eine komplette Webseite geladen werden, werden viel mehr Daten benötigt, als wenn es sich dabei lediglich um eine Anfrage zur Übertragung von Texten oder einzelnen Bilder handelt.
Diese beiden Punkte bilden die Grundlage um eine hybride App zu erstellen. Diese sollte bereits beantwortet sein bevor es an die weitere Planung der App geht. Durch die Antworten auf diese beiden Punkte entscheidet sich, welche Frameworks bzw. welches Vorgehen sich für die Entwicklung besser eigenen als andere.
Entscheidung für ein Framework:
Für die Entwicklung hybrider Apps gibt es in der zwischen Zeit eine unzählbare Anzahl von Frameworks. Manche bilden eine einfache Webseite ab, manche bilden einen sehr komplexen MVC Aufbau ab. Je nachdem wie Tief man sich hierbei einarbeiten möchte, kann es von Vorteil sein, eine einfache Webseite zu erstellen. Beispielsweise durch Standard HTML5, CSS3 und JavaScript oder auch durch ein einfach gehaltenes Framework wie jQuery Mobile. Möchte man eine sehr komfortable und Performance orientierte Applikation bietet sich ein Framework wie Angular.js oder auch React.js an. Diese Frameworks verfolgen den MVC Ansatz. Für Angular.js gibt es zusätzlich das CSS Framework Ionic. Ähnlich wie Bootstrap für Webseiten bietet Ionic einen optimierten Aufbau von Apps. Das Aussehen und Styling der App lehnt sich dabei sehr nahe an das Aussehen einer nativen App an. Es wird bei der Darstellung gewisser Elemente sogar zwischen Android und iOS (und anderen) unterschieden.
Cordova
Angular Ionic
Wie aus einer Webseite eine Applikation wird:
Alle hybriden Applikation haben eines gemeinsam. Den Inhalt betten wir nun in einen entsprechenden Rahmen. Einer der etabliertesten Ansätze ist dabei PhoneGab / Cordova. Cordova gibt dem Entwickler die Möglichkeit an die Hand einen sogenannten Android oder iOS Buildprozess durchzuführen. Hierbei wird eine App anhand der entsprechenden SDK erzeugt und am Ende eine installierbare Datei ausgegeben. Unter Android kann diese Datei per USB Kabel auf ein Android Gerät übertragen und direkt installiert werden. Hierfür muss diese Aktion lediglich in den Geräteeinstellungen erlaubt sein.
Ein Beispiel einer solchen hybriden App ist die SK Mobil App. Diese gibt es sowohl im Google-Play-Store, als auch im App-Store für iOS. Beim Öffnen der App erkennt man sehr schnell, dass die Inhalte die gleichen sind. Allerdings bieten Android und iOS weitere Möglichkeiten wie beispielsweise ein natives Menü. Dieses wird bei iOS durch ein Tabfolder und bei Android durch eine Navigationsbar dargestellt.
Der Entwickler kann theoretisch aus jeder mobilen bzw. responsiven Webseite eine hybride App erzeugen. Hierfür muss dieses lediglich alles in einen nativen Rahmen eingebettet und anschließend die entsprechende Applikation per Buildprozess erzeugen.
Fazit:
Sowohl um den Aufbau einer hybriden App, wie auch um den Buildprozess wird es in den nächsten Teilen dieser Reihen gehen. Es wird eine kleine Beispiel-App von der Planung der Daten und des Templates bis zur Installation auf einem Android Gerät durchgespielt. Die ersten 4 Teile dieser Reihe deinen als Einstieg und Einführung in das Thema.
Für die weitere Umsetzung entscheiden wir uns zunächst einmal dafür eine sehr einfache hybride Applikation zu erstellen. Hierfür wollen wir jQuery Mobile nutzen, da sich die Einarbeitung in dieses Framework als Webentwickler sehr einfach gestaltet und wir so schnell neue Dinge testen können. Zusätzlich lädt man Daten aus der Datenbank. Beim Aufbau erstellen wir zunächst eine einfache Webseite, welche wir in einen nativen Rahmen mit Cordova einbetten und diese somit auf einem Android Gerät installierbar machen.
Damit wir diese Inhalte und Dateien, also quasi unsere Webseite auch erreichen können benötigen wir einen Webserver bzw. einen Webspace. Dieser sollte sowohl PHP als auch MySQL enthalten, damit wir unsere Scripte ausführen und unsere Daten speichern und Abrufen können. Um dieses Thema wird sich der nächste Teil dieser Reihe handeln, bevor wir dann in die eigentliche Entwicklung einsteigen wollen.