In unserer Blog-Serie "
ClaretPortal wird mobil" haben wir gezeigt, wie eine Portal-Seite mit jQuery Mobile für mobile Endgeräte aufbereitet werden kann. Eine mobile App bietet einen weiteren komfortablen Zugang zu einer Anwendung. Die App kommuniziert dabei z.B. über eine JSON Schnittstelle mit der Anwendung, so dass immer überall die gleichen Daten vorliegen. Da Claretportal seit kurzem eine JSON Schnittstelle bietet, haben wir eine App für das iPad geschrieben, die diese Schnittstelle nutzt.
Eine solche App kann auf mehrere Arten umgesetzt werden. Neben dem "normalen" Weg eine iOS App mit Objectiv-C in Xcode zu erstellen, kann eine hybride App in Betracht gezogen werden. Als "hybride" werden Apps bezeichnet, die sich verhalten als wären sie eine echte native iOS App, aber nicht in Objektiv-C, sondern in HTML, JavaScript und CSS geschrieben sind. Das Framework
Phonegap, dass auf
Apache Cordova basiert, ermöglicht es gerätespezifische Funktionen wie Kamera, Neigungssensoren oder ähnliches mit JavaScript anzusteuern. So kann der Eindruck entstehen, es handle sich um eine ganz normale iOS App. Es ist von Anwendungsfall zu Anwendungsfall unterschiedlich wie gut eine Umsetzung als hybride App funktionieren kann. Grundsätzlich kann man sagen, je mehr auf die Hardware des Gerätes zugegriffen wird, desto eher sollte die App nativ umgesetzt werden. Der Vorteil hybrider Apps ist, dass ein Teil des Codes auf verschiedenen Plattformen wie iOS und Android verwendet werden kann. So kann Entwicklungsarbeit und Budget gespart werden.
Die App für Claretportal wurde als hybride App mit dem Framework
Ionic umgesetzt. Ionic basiert auf Phonegap und
AngularJS. Es ist ein sehr junges Open-Source Project, das bei
Github aber schon sehr viele Mitentwickler gefunden hat.
Das eingebundene Beispiel zeigt, wie man mit dem Ionic-Framework ein Seitenmenü umsetzen kann. Weitere Beispiele gibt es bei Codepen. Ionic bringt bereits viele Teile mit, die zum Bauen einer App benötigt werden, wie z.B. eigene Cordova-Plugins um die native Tastatur richtig einzubinden, Unterstützung für Listen mit mehreren Tausend Einträgen, verschiedene Knöpfe, Checkboxen und Toggles oder Tabs.
Die Demo-App, die wir erstellt haben, setzt zum großen Teil ein eigenes Design ein. Die folgenden drei Screenshots zeigen die App.
Durch den Einsatz von Ionic mit AngularJS konnte die App mit nur etwas mehr als 500 Zeilen Javascript-Code erstellt werden. Dabei sind alle Menüs und Kontrollelemente, die auf den Screenshots zu sehen sind, vollständig funktionsfähig. Die Suche wird von Claret auf dem Server ausgeführt und das Ergebnis angezeigt, sobald etwas in das Suchfeld getippt wird. Auch die Zahl der Dokumente die zu einem bestimmten Tag (links im Bild) verfügbar sind, aktualisiert sich sofort.
Da die App auf Cordova basiert, kann sie ohne Probleme auf iOS und Android eingesetzt werden. Die Unterstützung für Windows Phone soll in Ionic im Laufe des Sommers veröffentlicht werden.
