Im letzten Teil der Reihe haben wir uns angeschaut, was eigentlich mit hybriden Apps gemeint ist und wie diese im Groben aufgebaut werden. Heute wollen wir uns daher ein erstes Beispiel einer App anschauen. Hierfür wollen wir mit Hilfe von Cordova eine Beispiel-App erzeugen und diese Anschließend auf einem emulierten iPhone 6S in xCode laufen lassen. Hierfür müssen zunächst unterschiedliche Punkte beachtet und durchgeführt werden bevor die App auf gestartet werden kann. Die einzelnen Befehle sind jeweils im Text und den entsprechenden Screenshots zu finden. Am Ende möchte ich noch ein paar Tipps dazu geben, wie man einfach und schnell eine eigene kleine App mit Cordova starten kann.
Start eines Cordova Projekts:
Zunächst ist wichtig, dass aus den bisherigen Teilen npm und cordova bereits auf dem System installiert sind. Um dies zu testen kann über die Console cordova -v und npm -v eingegeben werden. Meldet sich anschließend das Framework mit einer Versionsnummer zurück, ist es korrekt installiert. Sollte ein Fehlertext dargestellt werden muss die Installation zunächst nochmals überprüft werden.
Nun öffnen wir die Console (Windows CMD) bzw. das Terminal (Linux, Mac) und navigieren zunächst auf das Desktop. Hier wollen wir unsere App starten. Dafür bietet Cordova einen eigenen Befehl: cordova start [name].
Auf dem Bild sehen wir den ausgeführten Befehl und die Datei-Struktur, welche uns Cordova dabei automatisch anlegt. Alles unterhalb des www Ordners repräsentiert den Inhalt unserer App. Hierfür ist immer eine index.html Datei Pflicht. Diese ist die initial geöffnete Datei beim starten der App. Die restlichen Dateien im www Ordner bilden dabei eine einfache Webseite, wie sie auch im Internet zu finden sind. Dabei können sowohl Bilder, CSS und Scripte verwendet werden. Nahezu alles wie es auch auf gewöhnlichen Webseiten möglich ist. (Gewisse Einschänkungen gibt es allerdings dennoch).
Hinzufügen der Plattform:
Um die App für die Installation auf einem emulierten iPhone vorzubereiten muss die entsprechende Plattform zum Projekt hinzugefügt werden. In diesem Fall die Plattform iOS, es können aber auch weitere Plattformen wie Android, Blackberry, WindowsPhone usw. genutzt werden. Wechselt hierfür in euren App Ordner durch den Befehlt cd [Ordnername]. Nun kann der Befehlt für die Plattform ausgeführt werden.
Wie im Bild zu sehen ist wurden nun innerhalb des platforms-Ordner weitere Ordner und Dateien hinzugefügt. Wichtig das dabei für iOS vor allem die *.xcpdeproj Datei. Diese Datei können wir nun in xCode öffnen und erhalten nun ein fertiges xCode Projekt welches auf einem Testgerät installiert werden kann. Hierfür muss die App noch erzeugt werden. Dies kann wahlweise über xCode oder über das Terminal durchgeführt werden. Im Termin lautet der Befehl: cordova build ios. In xCode kann nun ausgewählt werden auf welchem Gerät die App installiert werden soll. Dies kann wahlweise auf einem emulierten Geräten oder sogar auf dem eigenen iPhone durchgeführt werden.
Beispiel Build Prozess:
Wie auf dem Bild rechts zu sehen ist haben wir nun eine App in einem emulierten iPhone 6s Plus gestartet. Die App zeigt ein Hintergrundbild, ein Logo und einen Schriftzug sowie einen Banner „Device Ready“. Der Text im Banner ähnlich wie bei Webseiten durch ein Document-Ready-Event dargestellt. Schaut man sich nun die index.html und die index.js Datei im Cordova Project an, erkennt man sehr schnell die Parallelen zwischen Webseiten und einer hybriden App mit Cordova.
Beispiel HTML Code:
Wie man in den beiden Bildern erkennen kann, besteht die index.html aus einem einfachen HTML-Aufbau einer Webseite. Hinzu kommen zusätzliche Meta-Tags um beispielsweise den Viewport zu bestimmen. Dies wird analog auch bei responsiven Webseiten verwendet. Der restliche Inhalt wird durch einfaches HTML abgebildet. Beispielsweise Bilder und Texte.
Zusätzlich erkennt man in der index.js Datei in der 6 und 7 Zeile bindEvents, sowie in der 9 und 10 Zeile onDeviceReady eine starke Ähnlichkeit mit einem jQuery document-ready-Event. Auch hier wird geprüft ob etwas fertig ist (in diesem Falle die App- und Gerätefunktionen). Sobald dieses Event geworfen wurde wird der entsprechende Text angezeigt. Beim Start der App also Connectiong Device und anschließend Device is Ready. Ab diesem Event können nun weitere Scripte gestartet werden. Beispielsweise jQuery oder jQueryMobile Funktionen wie ein Menü oder ähnliches.
Zusätzliche Informationen:
Um sich dies ein bisschen genauer anzuschauen bietet sich das Framework jQueryMobile an. Hiermit können einfach und schnell kleine WebApps mit tollen Funktionen und Designs erstellt werden. Diese können dann im Cordova-Projekt in den www Ordner (Hello World Dateien löschen und neue Dateien einfügen) eingefügt werden und die erste eigene App mit xCode auf ein emuliertes oder sogar auf das eigene Gerät installiert und gestartet werden.
Hier noch ein paar Beispiele was man mit jQuery Mobile so alles machen kann. Vielleicht hilft es dabei die passende Idee für die erste eigene kleine App zu bekommen. jQuery Mobile Beispiele, jQuery Mobile Demo Websites, jQuery Mobile Examples – jQuery Rain
Viel Spaß beim ausprobieren und Apps erstellen.
Hier gibt es alle Beiträge zum Thema „Hybride Appentwicklung Grundlagen“