Software Engineering

Mobile cross-platform Anwendungen mit AngularJS und Apache Cordova

esentri AG
esentri AG

Aufgrund unterschiedlichster Plattformen wie Android, iOS oder Windows Phone ist die Entwicklung mobiler Applikationen nicht immer einfach. Insbesondere wenn das Projekt Einsparungen bei den Entwicklungskosten verlangt, kann nicht immer jede Plattform bedient werden. Abhilfe bei diesem Problem schaffen die Frameworks „AngularJS“ und „Apache Cordova“. Wie das Zusammenspiel der beiden Projekte aussieht, wird im Folgenden thematisiert.

Was ist Apache Cordova

Bei Apache Cordova handelt es sich um ein weit verbreitetes Framework zur Erstellung hybrider Applikationen für mobile Endgeräte. Dazu werden einfache HTML5-Anwendungen auf dem Endgerät in einer nativen WebView ausgeführt, wodurch beim Nutzer der Eindruck einer nativen Applikation entsteht. Um aus der HTML5-Anwendung heraus Zugriff auf die Funktionalitäten wie etwa Sensoren, lokale Datenbanken, Benachrichtigungen, etc. des Endgerätes zu erhalten, stellt Cordova JavaScript-Bibliotheken bereit. Diese Cordova-Bibliotheken übersetzen JavaScript-Funktionsaufrufe in entsprechende native Funktionsaufrufe. Sehr vereinfacht ohne Anspruch auf Vollständigkeit ist dieser Prozess in folgender Abbildung dargestellt.

 

Native Funktionsaufrufe mit Cordova

Eine sehr aktive Community entwickelt fortlaufend eine Vielzahl von Plugins um durch eigentlich native Funktionen der Endgeräte den JavaScript-Funktionsumfang zu erweitern.

Was ist AngularJS

AngularJS ist ein von Google entwickeltes Open-Source-Framework zur Entwicklung von Single-page-Webanwendungen mit HTML und JavaScript. Zur Trennung der Programmlogik werden AngularJS-Anwendungen nach dem Model View Controller-Muster erstellt. Damit können mit Hilfe von Angular auf einfache Weise komplexe Rich Internet Applications (RIA) erstellt werden. Wie auch viele andere klassische RIA-Frameworks, vereinfacht Angular die Entwicklung durch Prinzipien wie Dependency Injection und Data Bindings. Folgende Abbildung zeigt eine Reihe der durch AngularJS bereitgestellten Prinzipien beziehungsweise Funktionen.

AngularJS Funktionsumfang

Wer serverseitig das Framework Vert.x verwendet, kann eine der vielen Erweiterungen für Angular verwenden. So baut das Projekt „angular-vertxbus“ auf die von Vert.x bereitgestellte JavaScript Client-Bibliothek auf, indem es „Angular-service wrapper“ bereitstellt. Dadurch kann der Vert.x-Eventbus über die Dependency Injection von Angular als Service in den Controllern verwendet werden.

AngularJS + Cordova = ngCordova

Man könnte Cordova einfach als solches in die AngularJS Anwendung einbinden, und die Funktionen der Bibliothek verwenden. Dadurch würden wir jedoch Vorteile von AngularJS wie Dependency Injection über Bord werfen.

AngularJS und Apache Cordova werden zu ngCordova

Zur Lösung dieses Problems baut das Projekt „ngCordova“ auf Apache Cordova auf und macht es als Erweiterung für AngularJS verfügbar. Dadurch können die Funktionen von Cordova über die Dependency Injection von Angular als Services in Controller eingebunden und verwendet werden.

Fazit

Der Einsatz von Cordova in Verbindung mit AngularJS erlaubt es neuste Webtechnologien und aktuellste Frameworks in Anwendungen auf mobilen Endgeräten zu verwenden, ohne dabei auf den Komfort eines ausgereiften Entwicklungsframeworks zum Erstellen von „Rich Internet Applications“ zu verzichten.

Nachteilig ist jedoch der in mancher Hinsicht begrenzte Funktionsumfang der hier vorgestellten Lösung. So müssen für Neuerungen an den Systemen der mobilen Endgeräte (wie zum Beispiel Erweiterungen nativer APIs) zunächst entsprechende Cordova-Plugins entwickelt werden, um den Zugriff auf diese Funktionen mit Hilfe von JavaScript zu ermöglichen. Dennoch ermöglicht dieser Ansatz mit wenig Code in relativ kurzer Zeit komplexe mobile Anwendungen zu entwickeln, die plattformübergreifend lauffähig sind.

 Related Posts

> Mobilität der Zukunft und wie sie für jeden erreichbar wird
> Leichtgewichtige, skalierbare Webanwendung mit Vert.x