Menü

Ratgeber: "Mobile Webentwicklung" Apps erstellen mit dem Framework Phonegap

Der Markt für mobile Webentwicklung wächst nahezu explosionsartig. Wer sein gewonnenes Know-How der Websprachen nutzen möchte, greift zu Phonegap.

Apps erstellen mit dem Framework Phonegap © Internet Magazin
Apps erstellen mit dem Framework Phonegap

Inhaltsverzeichnis 1/2

Webentwickler stehen immer öfter vor der Aufgabe, crossplattformfähige mobile Apps auf Basis bewährter Webtechnologien zu entwickeln, die sowohl unter iOS als auch Android OS laufen.

Phonegap bietet Ihnen eine Entwicklungsumgebung, in der Sie Ihr Know-how von HTML5 und Javascript einfließen lassen können. Das Internet Magazin beleuchtet den Prozess der Entwicklung plattformübergreifend funktionierender mobiler Apps mit Phonegap.


Vorteile der Phonegap-Entwicklung

Das quelloffene Framework Phonegap erlaubt es Ihnen, Websites auf der Basis von HTML5, CSS3 und Javascript als native mobile Apps für mittlerweile sieben unterstützte mobile Betriebssysteme zu kompilieren. Bei Phonegap handelt es sich im Grunde genommen um eine Sammlung von Projektvorlagen für viele verschiedene mobile Betriebssysteme, die den entstehenden Apps auf jedem unterstützten Betriebssystem ein einheitliches Verhalten beibringen.

Dank Phonegap können Webentwickler native API-Aufrufe tätigen und native Funktionen der Zielgeräte ansprechen, ohne die nativen APIs und Entwicklungssprachen wie Objective-C zu erlernen. Phonegap erlaubt es Ihnen, die eingebaute Kamera zu bedienen, Telefonanrufe auszulösen, auf das Adressbuch des Benutzers zugreifen, Geolocation-Dienste zu nutzen und dergleichen mehr.

Mit Phonegap erstellte Apps können Sie - im Gegenzug zu reinen HTML5-Apps - kommerziell vertreiben, unter anderem über den App Store von Apple und den Android Market von Google.

Phonegap unterstützt neben iOS und Android OS auch noch Blackberry, Windows Phone, WebOS und Symbian. Auf diese Weise kann man das größte Problem beim Entwickeln von mobilen Applikationen lösen, nämlich die Bindung an einen bestimmten Hersteller und native Entwicklungssprachen aufheben.


So starten Sie mit Phonegap

Die einfachste Methode, um eine Web-App mit Phonegap zu kompilieren, besteht in der Verwendung der Online-Dienste von Phonegap : Build. Wer nicht mehr als eine einzige private App erstellen und nur einen einzelnen Entwicklerzugang zu seinen Projekten benötigt, kommt mit dem kostenlosen Account aus, andernfalls beträgt die monatliche Gebühr zwischen 12 und 90 US-Dollar. Wenn Sie eine eigene Phonegap-Entwicklungsumgebung auf Ihrem Computer einrichten, können Sie beliebig viele Apps entwickeln und kompilieren, ohne sich in weitere Kosten zu stürzen.

Wer eine eigene Entwicklungsumgebung einrichten möchte, hat mehrere Möglichkeiten zur Auswahl. Phonegap integriert sich in Eclipse, Dreamweaver CS5.5 und Xcode 4.x. Anders als die Ausgabe von AIR-Apps aus Flash Professional setzt die iOS-Entwicklung mit Phonegap einen Mac voraus. Android SDK setzt auf den unterstützten Systemen Oracles Java-SDK voraus.

Windows, MAC OS und Linux werden unterstützt
Die größte Flexibilität bezüglich der Entwicklungsplattform bieten Ihnen Android OS und HPs WebOS, denn für diese mobilen Systeme können Sie sowohl unter Windows als auch Mac OS X oder sogar unter Linux entwickeln. Wer für Symbian entwickeln möchte, hat zwar bezüglich der Symbian Web Runtime die freie Wahl des Betriebssystems, ist aber beim Symbian-Simulator bisher noch an Windows gebunden.

Ähnliches gilt es beim Blackberry zu beachten, denn das Blackberry-SDK lässt sich zwar derzeit unter Windows und Mac OS X installieren, aber der Blackberry-Simulator läuft (genau wie der Symbian-Simulator) bisher nur unter Windows. Zur Einrichtung der Phonegap-Umgebung müssen Sie selbstverständlich das SDK des jeweiligen Herstellers Ihrer anvisierten Zielgeräte auf Ihrem System einrichten.



Einrichtung von Phonegap in Eclipse

Falls Sie in Eclipse entwickeln möchten, installieren Sie Phonegap mit der Classic-Edition dieser Entwicklungsumgebung .

Googles Plug-in für Eclipse nennt sich Android Development Tools (ADT) und lässt sich mit Hilfe des Update Managers Ihrer Eclipse-Installation unter Angabe der Bezugsquelle:
https://dl-ssl.google.com/android/eclipse/ einrichten (Befehl Help/Install New Software...). Mobile Entwicklung für Android OS erfordert immer das Java- SDK von Oracle.

Zum Anlegen eines Phonegap-Projektes verwenden Sie in Eclipse den Befehl New/New Project.... Danach müssen Sie Teile des Phonegap-Archivs in die entsprechenden Verzeichnisse des Eclipse-Projektbaumes umkopieren und einige andere Anpassungen manuell umsetzen. Eine detaillierte Anleitung für die jeweils aktuellste Version von Phonegap finden Sie auf der Entwicklerseite .


Xcode-Entwicklung mit Phonegap

Nach der Einrichtung von Xcode 4.x samt des iOS-SDKs starten Sie das Installationsprogramm aus dem Verzeichnis iOS von Phonegap und befolgen die Anweisungen auf dem Bildschirm. Danach können Sie ein Phonegap-Projekt mit dem Befehl File/New/ New Project.../ Phonegap-based Application anlegen.

Erstellen einer Phonegap-Anwendung in Xcode. © Internet Magazin
Erstellen einer Phonegap-Anwendung in Xcode.

Beim ersten Versuch, die Applikation unter Angabe des Simulators als Zielplattform zu kompilieren erhalten Sie eine Fehlermeldung. Wechseln Sie in den Finder, greifen Sie das Verzeichnis www aus dem Projektverzeichnis Ihrer Applikation und ziehen Sie es per Drag-und-Drop auf Xcode, um die benötigten Referenzen herzustellen. Im folgenden Dialog müssen Sie nur noch die Option Create folder references for any added folders aktivieren und schon können Sie mit der Entwicklung loslegen.

Damit Sie die Applikation auf einem iOS-Gerät testen können, müssen Sie allerdings die benötigten Zertifikate einrichten.


Phonegap-Entwicklung in Dreamweaver CS5.5

Dreamweaver bietet in der Version CS5.5 integrierte Unterstützung für die Phonegap- Entwicklung auf Basis von jQuery mobile für Googles Android (PC und Mac) und Apples iOS (Mac).

Installieren Sie zuerst das Java-SDK und starten Sie die Umgebung, bevor Sie die Installation des Android-SDKs beginnen. Zur Einrichtung der SDKs in Dreamweaver dient der Befehl Anwendungs-Framework konfigurieren aus dem Menü Site/Mobile Anwendungen. Theoretisch bietet Ihnen der folgende Dialog die Möglichkeit, die automatische Installation des Android-SDK mit einem einzigen Klick auszulösen (Voraussetzung ist das kostenlose Update mit der Kennung 11.5.1 für Dreamweaver CS 5.5). Praktisch funktioniert dieses Feature nicht wirklich zuverlässig. Sollte auf Ihrem System ein Fehler auftreten, müssen Sie das so genannte Starter Pack des Android-SDK herunterladen und installieren. Befolgen Sie hierzu die Anweisungen aus der Anleitung, die Sie in dem ausgepackten Verzeichnisbaum vorfinden. Starten Sie danach die Anwendung SDK Manager, um ergänzende Komponenten zu installieren. Unter Windows gelingt es per Doppelklick; unter OS X müssen Sie das Terminal starten, in das Verzeichnis Ihrer Android-SDK-Installation navigieren und die Anwendung Android SDK Manager mit dem Befehl


tools/android



aus der Kommandozeile heraus aufrufen. Mit Hilfe des SDK-Managers können Sie jetzt die benötigten Bibliotheken, konkret also Android SDK Tools, Android SDK Platform Tools und die gewünschten AVDs nachträglich nachrüsten. Adobe empfiehlt, in Dreamweaver derzeit vorzugsweise Android 2.2/API 8 zu nutzen.

Die im Oktober veröffentlichte Version des Android-SDKs funktioniert derzeit nicht mit Dreamweaver und erfordert die manuelle Anpassung der Datei build.xml zum Überschreiben des Ziels des Vorgangs. Hierzu fügen Sie hinter der Zeile


<import file="${sdk.dir}/tools/ant/ build.xml" as="imported" />



die folgende Anweisung hinzu:


<target name="install" depends= "-set-debug-files,imported.install" />



Nach Abschluss der manuellen Installation der benötigten SDKs (für Android OS und iOS) müssen Sie Dreamweaver mit Hilfe des Befehls Anwendungs-Framework konfigurieren aus dem Menü Site/ Mobile Anwendungen die jeweiligen Ablageorte der beiden SDKs aufzeigen.


Die mobile Website

Zum Erstellen einer mobilen Applikation mit Phonegap in Dreamweaver CS5.5 verwenden Sie den Befehl Datei/Neu/Seite aus Beispiel/Mobile Starter/ jQuery Mobile (Phonegap). Dreamweaver lädt daraufhin die benötigte Projektvorlage, und Sie können hier wie gewohnt zu Werke schreiten, indem Sie das Markup bearbeiten und Javascript-Code schreiben. Hier können Sie aus der Integration von jQuery Mobile einen Nutzen ziehen.

Mit dem Befehl Anwendungseinstellungen aus dem Menü Site/Mobile Anwendungen verschaffen Sie sich Zugriff auf grundlegende Parameter der zu erstellenden mobilen Applikation. Hier legen Sie unter anderem die Bundle-ID, das Icon (ein 72x72 Pixel großes Bild mit dem Namen icon.png) und den Splash-Screen (ein 320x480 Pixel großes Bild mit dem Namen splash.png) fest. Beide Dateien sollten sich im img-Verzeichnis im Verzeichnisbaum Ihrer App befinden.


Testen im Emulator

Phonegap beinhaltet standardmäßig eine Beispielapplikation, die Sie als Ausgangspunkt Ihrer Arbeit an Ihrer eigenen Web-App nutzen können. Zum Testen Ihrer App sind in Dreamweaver Befehle aus dem Menü Site/Mobile-Anwendungen/ Erstellen und Emulieren vorgesehen, da aber Apple und Google inzwischen ihre SDKs geändert haben, erhalten Sie hier möglicherweise eine Fehlermeldung. Um das Problem zu umgehen, navigieren Sie in der Kommandozeile zum Verzeichnis des Android-SDKs


cd c:\pfadzumandroidsdk\tools\



und starten Sie den Emulator manuell mittels


emulator -avd DW_AVD




Fazit

Möchten Sie Ihre Kenntnisse der Websprachen HTML5, Javascript und CSS nutzen, um native Apps für möglichst viele mobile Plattformen, also auch RIMs Blackberry, HPs Palm WebOS und Windows Mobile, zu entwickeln, so bietet sich Phonegap als Entwicklungsframework an. Phonegap funktioniert sowohl mit Eclipse als auch mit Dreamweaver (erstmals in der Version CS5.5) und mit Xcode 4.2. Anders als die Ausgabe von AIR-Apps aus Flash Professional setzt die iOS-Entwicklung mit Phonegap einen Mac voraus.


weiterlesen auf Seite 2
 
Anzeige
Anzeige
x