Android-Anwendungen mit PhoneGap entwickeln ? Teil 1

Das mobile Web boomt. Mit ihm zusammen wächst auch der Wunsch, eine eigene App zu entwickeln oder selbst an dem lukrativen App-Markt teilzuhaben. Wer schon einmal ein paar HTML-Seiten entwickelt hat, kann mithilfe von PhoneGap sogar Anwendungen für alle relevanten mobilen Plattformen entwickeln.

Wenn Sie eine Anwendung für Android oder auch eine andere mobile Plattform entwickeln wollen, so greifen Sie in der Regel zu entsprechenden sogenannten Software Development Kits, kurz SDK. Diese Kits vereinfachen die Entwicklung und bieten Ihnen neben dem Zugriff auf system- und gerätespezifische Funktionen auch diverse Möglichkeiten, das Aussehen und das Verhalten Ihrer App zu bestimmen.

Doch für viele Anwendungen benötigt man nicht derlei weitreichende Eingriffe in das darunterliegende System. Das Schöne für Programmierer: Mobile Geräte unterstützen allesamt Web-Standards und erlauben die Ausführung von Applikationen, die auf HTML5, JavaScript und CSS basieren.

Nun wollen die meisten Entwickler Ihre App(s) nicht nur für eine Plattform, sondern für mehrere entwickeln. An diesem Punkt setzt PhoneGap an [1]. Es handelt sich um ein frei verfügbares Tool, mit dem Sie Applikationen entwickeln können, die auf mehreren Mobil-Plattformen lauffähig sind. Mit PhoneGap können Sie Anwendungen für Android, Symbian, WebOS, Bada, iOS, Black Berry OS und Windows Mobile 7 erstellen. PhoneGap ist also kein plattformspezifisches SDK, sondern stellt vielmehr eine Programmierschnittstelle für den Zugriff auf den Browser und die Gerätefunktionen zur Verfügung. Dennoch kann PhoneGap unter fast allen wichtigen mobilen Plattformen auch native Funktionen ansprechen, das gilt nicht nur für Android, sondern auch für Windows Mobile 7. Die Firma hinter PhoneGap gehört seit Oktober 2011 zu Adobe, das Projekt soll jedoch freie Software bleiben. Geht es nach dem Willen der PhoneGap-Entwickler, so wird das Tool zu einem Apache-Projekt. Aktuell befindet sich die Software bei Version 1.4.1 (Stand: Februar 2012).

PhoneGap in Betrieb nehmen

Für die Programmierung von Anwendungen für die verschiedenen mobilen Plattformen benötigen Sie auch weiterhin die jeweiligen SDKs, aber dank PhoneGap vereinfacht sich die Entwicklung von Anwendungen, weil Ihnen dieses Tool einen Satz Projekt-Templates zur Verfügung stellt, die Sie von SDK-Spezifika befreien. Um PhoneGap-Applikationen für Ihr Android-Gerät entwickeln zu können, müssen Sie vier Schritte ausführen:

• Zunächst laden Sie sich Eclipse Classic [2] herunter (aktuel Version 3.7.1, ca. 175 MByte) und installieren es.
• Als Nächstes benötigen Sie das Android SDK [3]. Auch das laden Sie herunter und installieren es.
• Nun benötigen Sie das ADT Plug-in. Bei den ADT (Android Development Tools) handelt es sich um eine Erweiterung für die Eclipse IDE, die das Entwickeln von Android-Anwendungen erlaubt. Die Installation beschreiben wir weiter unten.
• Schließlich laden Sie sich die aktuelle PhoneGap-Version herunter [4] und extrahieren das Archiv.

Die Installation von Eclipse und dem Android SDK ist unproblematisch und selbsterklärend, weil Sie lediglich die Installationsprogramme ausführen müssen. Um alles weitere kümmert sich der jeweilige Installer. Eine detaillierte Anleitung zur Installation des Android-SDKs finden Sie in Android User 01/2012. Im Fall von Eclipse Classic müssen Sie zunächst das Archiv entpacken und können die Programmierumgebung einfach mit der Ausführung von eclipse.exe beziehungsweise ./eclipse unter Linux starten. Noch einfacher ist das Setup des Android SDK. Hier laden Sie am einfachsten die EXE-Variante herunter und führen das Installationsprogramm aus. Bei diesem Artikel beschränken wir uns auf die Schritte unter Windows. Sie können PhoneGap auch unter Mac OS X oder Linux nutzen. Zu Mac OS X finden Sie im Kasten „PhoneGap auf Mac OS X“ weitere Informationen, Linux-Nutzer sollten in der Lage sein, die Tools selbst zu installieren.

Die Vorgehensweise bei der Installation der ADT-Plug-ins ist ein wenig anders. Hierfür verwenden Sie den Update-Manager der Eclipse-Installation. Dazu starten Sie Eclipse und führen dann den Befehl Help | Install New Software aus. Klicken Sie in der rechten oberen Ecke auf Add. Es öffnet sich der Add Repository-Dialog, in dem Sie als Name ADT Plugin und die folgende URL als Location angeben:

https://dl-ssl.google.com/android/eclipse/

Bestätigen Sie den Vorgang mit OK. Unter Umständen ist ein gesicherter Zugriff auf das Repository nicht möglich. In diesem Fall ersetzen Sie das https durch http.

Der Dialog Available Software (Abbildung 3) führt die verfügbaren Komponenten auf. In dem Listenfeld unterhalb der Repository-Auswahl sehen Sie nun Sie den Eintrag Developer Tools. Aktivieren Sie das dazugehörige Kontrollkästchen und klicken Sie auf die Schaltfläche Next. Der Installationsdialog führt nochmals die ausgewählten Komponenten auf. Als Nächstes müssen Sie der Apache-Lizenz zustimmen und leiten die Installation mit einem Klick auf die Schaltfläche Finish ein.

Eclipse gibt während des Downloads der Komponenten eine Sicherheitswarnung aus, dass die Authentizität oder Gültigkeit der Software nicht gewährleistet ist. Diese Warnung schließen Sie mit OK, damit der Download und die Installation abgeschlossen werden kann. Sie müssen Eclipse nun neu starten. Je nachdem, ob Sie Eclipse schon für die Zusammenarbeit mit dem Android-SDK eingerichtet haben und Ihr Android-SDK up-to-date ist, erscheint nun ein zusätzlicher Dialog, um die neuesten Komponenten herunterzuladen. Klicken Sie hier auf Next und Finish um die Installation abzuschließen und Eclipse zu starten. Der SDK-Manager lädt dann die benötigte Android-Version herunter.

Ein erstes Mini-Projekt

Nachdem Sie die verschiedenen Entwicklungswerkzeuge installiert haben, können Sie die Funktionstüchtigkeit Ihrer Entwicklungsumgebung mit einem ersten kleinen Projekt prüfen. Dazu starten Sie Eclipse und legen mit dem Klick auf den New-Button der Symbolleiste ein neues Projekt an. Eclipse präsentiert Ihnen den Projekt-Assistenten, in dem Sie unter Android ein Android-Projekt wählen. Im Dialog Create Android Project weisen Sie dem Projekt einen beliebigen Namen zu. Aktivieren Sie das Kontrollkästchen Create new project in workspace, um ein vollständig neues Projekt anzulegen.

Mit Next gelangen Sie zum nächsten Dialog, in dem Sie die Zielplattform bestimmen. Welche Plattformen über die Auswahlliste verfügbar sind, hängt von Ihrer Eclipse-Installation ab. Eclipse besitzt den sogenannten SDK-Manager, mit dem Sie weitere Kits nachinstallieren können. Verwenden Sie für das erste Projekt die höchste verfügbare SDK-Version (aktuell 4.0.3, Stand Februar 2012). Laut der PhoneGap-Website stellt das Tool die Abwärtskompatibilität für Sie sicher. Möchten Sie die App allerdings auf einem echten Gerät testen, dann müssen Sie unbedingt die gleiche Android-Version wählen (bzw. den gleichen API-Level), wie auf dem Gerät.

Im nächsten Dialog müssen Sie der App im Feld Package Name einen Namen inklusive Namespace geben. Mit einem Klick auf Finish beenden Sie den Assistenten. Der legt im Package Explorer Ihr Projekt mit dem grundlegenden Dateien an. Als Nächstes benötigen Sie zwei Dateien, die im PhoneGap-Paket unter lib/android enthalten sind, phonegap-1.4.1.jar und phonegap-1.4.1.js (beachten Sie die Versionsnummern!). Erzeugen Sie im Root-Verzeichnis des oben erzeugten Projekts zwei neue Verzeichnisse

/libs
/assets/www

Dann kopieren Sie phonegap-1.4.1.jar nach /libs und phonegap-1.4.1.js nach /assets/www. Öffnen Sie nun wieder Eclipse und aktualisieren Sie die Projektansicht mit der Taste [F5]. Nun werden auch die in das Projekt kopierte Dateien im Package Explorer aufgeführt.

Als Nächstes legen Sie eine index.html in Ihrem www-Ordner an. Sie können hierfür einen Web-Editor Ihrer Wahl verwenden oder per Rechtsklick auf die Datei und den Menüpunkt Open with | Text editor den Editor von Eclipse benutzen. Weisen Sie der Index-Datei den Code aus dem Listing 1 zu.

<!DOCTYPE HTML>
<html>
  <head>
    <title>PhoneGap-Beispiel</title>
  <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
  <script type="text/javascript" charset="utf-8">
     function onLoad(){
          document.addEventListener("deviceready", onDeviceReady, true);
     }
     function onDeviceReady(){
          navigator.notification.alert("PhoneGap funktioniert!");
     }
  </script>
  </head>
  <body onload="onLoad();">
       <h1>Herzlich Willkommen bei PhoneGap</h1>
  </body>
</html>

Anpassungen

Nun gilt es einige Anpassungen an der Hauptprojektdatei im src-Ordner vorzunehmen. Benennen Sie die Klassenerweiterung von Activity nach DroidGap um und ersetzen Sie die Zeile setContentView() durch folgenden Code:

super.loadUrl("file:///android_asset/www/index.html");

Fügen Sie außerdem import com.phonegap.*; im import-Segment hinzu. Sollte Eclipse eine Fehlermeldung ausgegeben, dass es die JAR-Datei phonegap-1.4.1.jar nicht finden kann, markieren Sie den libs-Ordner mit der rechten Maustaste und korrigieren mit dem Menübefehl Build Paths | Configure Build Paths den Pfad. Wechseln Sie dazu zur Registerkarte Libraries und fügen Sie dort mit einem Klick auf die Schaltfläche Add JARs die Datei phonegap-1.4.1.jar dem Projekt hinzu.

Schließlich müssen Sie einige Berechtigungen der Datei AndroidManifest.xml hinzufügen, damit PhoneGap korrekt ausgeführt wird. Dazu gehören auch jede Menge Berechtingungen in der Grundeinstellung. Die Einträge zeigt Listing 2. Fügen Sie diese vor dem Abschnitt <application> ein.

<supports-screens
        android:largeScreens="true"
        android:normalScreens="true"
        android:smallScreens="true"
        android:resizeable="true"
        android:anyDensity="true"
        />
        <uses-permission android:name="android.permission.CAMERA" />
        <uses-permission android:name="android.permission.VIBRATE" />
        <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
        <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
        <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
        <uses-permission android:name="android.permission.READ_PHONE_STATE" />
        <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.RECEIVE_SMS" />
        <uses-permission android:name="android.permission.RECORD_AUDIO" />
        <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
        <uses-permission android:name="android.permission.READ_CONTACTS" />
        <uses-permission android:name="android.permission.WRITE_CONTACTS" />
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
        <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Zudem müssen Sie im Activity-Abschnitt die folgende Zeile einfügen:

android:configChanges="orientation|keyboardHidden"

Damit wird sichergestellt, dass die Index-Datei nicht erneut geladen wird, wenn ein bestimmtes Ereignis eintritt. Schließlich müssen Sie noch den XML-Ordner, der Bestandteil von PhoneGap ist, in den res-Ordner Ihres Projekts kopieren. Damit haben Sie alle notwendigen Schritte für Ihr erstes Android-Projekt vorgenommen und Sie können diese mit Ihrer Testumgebung ausführen. Dazu klicken Sie in der Eclipse-Symbolleiste auf die Run-Schaltfläche.

Lokale Simulation

Damit Sie ein Projekt auf Ihrem lokalen Rechner simulieren können, benötigen Sie einen Emulator, der Ihre Android-Gerät lokal simuliert. Unter Android heißt dieser Android Virtual Device, kurz AVD. Das Schöne an Eclipse: Sie können verschiedene Emulatoren anlegen. Das geschieht mit dem sogenannten AVD-Manager, den Sie mit dem Menübefehl Window | AVD Manager öffnen.

Mit einem Klick auf New legen Sie eine erste Emulator-Konfiguration. Dieser weisen Sie zunächst eine Bezeichnung und die Zielplattform zu. Weisen Sie der AVD-Konfiguration eine SD-Kartengröße, das Skin und die zu verwendeten Hardware zu. Das Standard-Skin WVGA800 ist in der Regel eine gute Lösung. Es verwendet eine Auflösung von 480 x 800 Pixeln. Der SD-Karte sollten Sie möglichst einige Hundert Megabyte zuweisen. Mit einem Klick auf die Schaltfläche Create AVD legen Sie den Emulator an. Aus dem AVD-Manager heraus können Sie den Emulator starten, in dem Sie die gewünschte Konfiguration markieren und dann die Start-Taste betätigen.

Alternativ schließen Sie nun Ihr Android-Smartphone an den Rechner an und wählen als Target dann Ihr eigenes Smartphone. Die Ap wird dann direkt installiert und ausgeführt.

Multi-Plattform-Entwicklung

Das wichtigste Ziel von PhoneGap ist es, die Entwicklung von Apps zu ermöglichen, die auf alle gängigen mobilen Plattformen ausgeführt werden. Gelöst wird dieses Problem durch eine zusätzliche Schnittstelle, die Schluss macht mit inkompatibler Software und Umgebungen. Wenn Sie Hürden für das Aufsetzen einer Entwicklungsplattform genommen haben, werden die Folgeschritte einfacher – gerade auch für die Anwender, die sich bereits mit Web-Design befasst haben.

Nachdem Sie die erste Anwendung erstellt und diese mit dem lokalen Emulator erstellt haben, können Sie sich beispielsweise an die Bearbeitung der oben erstellten Anwendung machen. Im Mittelpunkt der weiteren Entwicklungsarbeit steht dabei die Erweiterung der Funktionalität der Index-Datei.

Editieren Sie die in obigem Beispiel erzeugt HTML-Datei und verwenden Sie beispielsweise folgenden Code:

<html>
 <head>
   <title>Einfache Android-App</title>
 </head>
 <body>
 Android-Apps mit PhoneGap
 </body>
</html>

Damit haben wir gerade einmal eine sehr einfache HTML-Datei, die es weiter zu verfeinern gilt. Wir weisen dem Dokument noch mit dem style-Element etwas Farbe zu. Platzieren Sie das style-Element innerhalb des <head>-Abschnitts:

<style>
  body {
    background: #ff0;
  }
   div#main {
     background: #ccf;
     height: 600px;
     width: 360px;
     padding: 5px;
     -webkit-border-radius: 5px;
}
</style>

Modifizieren Sie dann das body-Element, damit es in etwa wie folgender Beispiel-Code aussieht:

<body>
 <div id="main">
  Android-Apps mit PhoneGap!
 </div>
</body>

Als Nächstes benötigen wir ein wenig Interaktivität. Dazu bedienen wir uns der JavaScript-Funktion, die einen Text in einem Dialogfenster ausgibt. Den benötigten JavaScript-Code platzieren wir ebenfalls im Header der Index-Datei. Das komplette Beispiel zeigt Listing 3.

<script>
  document.addEventListener("DOMContentLoaded", function () {
   alert("PhoneGap ist eine tolle Lösung!")
  }, false);
function alertAusgabe() {
  alert("PhoneGap ist eine tolle Lösung!");
}
document.addEventListener("DOMContentLoaded", function () {
alert("Ja, PhoneGap ist eine tolle Lösung für die Android-Entwicklung!");
document.getElementById("magMich").
addEventListener("click", alertAusgabe, false);
}, false);
</script>

Nun erweitern wir noch das <div>-Tag um eine Schaltfläche, über die die Ausgabe erzeugt wird:

<div id="main">
Android-Apps mit PhoneGap!<br>
<button id="magMich">
PhoneGap ist wirklich toll.
</button>
</div>

Nun speichern Sie Ihre Arbeit und können diese mithilfe des Emulators ausführen. Das Resultat sollte wie in Abbildung 5 ausschauen.

Damit haben Sie das Grundprinzip der Entwicklung mobiler Anwendungen mithilfe von PhoneGap kennengelernt: Mit wenig Aufwand lässt sich eine HTML-basierte Anwendung realisieren, die dann auf der mobilen Plattform ausgeführt werden kann. Da die Entwicklung überwiegend auf bekannten Web-Techniken wie HTML, CSS und JavaScript basiert, ist der Einstieg in die mobile Entwicklung deutlich einfacher, als der direkte Einsatz spezifischer SDKs. Im zweiten Teil unseres Workshops gehen wir dann darauf ein, wie PhoneGap an die Möglichkeiten von Android herankommt.

App in den Market

Wenn Sie Ihre Android-App der Allgemeinheit zur Verfügung stellen wollen, so erreichen Sie die meisten potenziellen Nutzer natürlich über den Android Market. Also müssen Sie schauen, dass Sie Ihre Entwicklung dort unterbringen. Der gesamte App-Entwicklungsprozess umfasst in der Regel vier Schritte. Im ersten Schritt geht es darum, die Anwendung und deren Funktionalität zu entwerfen. Im zweiten Schritt erfolgt dann die praktische Programmierarbeit, bei der Sie auf die in diesem Artikel beschriebenen Werkzeuge zurückgreifen. Darauf folgt das Debuggen und Testen Ihrer Entwicklung. Auch hierfür stellt Ihnen der Android-Werkzeugkasten alle notwendigen Tools zur Verfügung. Last but not least folgt das Veröffentlichen.

Sie können Ihre Entwicklung natürlich auf Ihrer Website publizieren, doch die meisten Interessenten wird sie über Android Market findet. Wenn Sie Ihre App über den Market vertreiben wollen, so sind auf Seiten der App zunächst verschiedene Voraussetzungen zu erfüllen. Die Applikation muss mit einem privaten Sicherheitsschlüssel signiert werden, der bis 2033 gültig ist. Die Datei AndroidManifest.xml muss außerdem die Einträge android:versionCode und android:versionName aufweisen. Der Server verwendet android:versionCode für die interne Identifizierung und das Handling von Updates, mit android:versionName wird die Versionsnummer hinterlegt. Außerdem müssen im Application-Tag noch die Attribute android:label und android:icon gesetzt sein, mit denen Sie das Label und das Icon bestimmen. Haben Sie Ihre App entsprechend vorbereitet, benötigen Sie als Nächstes ein Konto für den Android Market. Dazu legen Sie unter folgender URL ein Konto an:

https://market.android.com/publish.

Um Ihre Software im Android Market veröffentlichen zu können, müssen Sie ein Entwicklerprofil erstellen, die Registrierungsgebühr in Höhe von 25 Dollar bezahlen und abschließend der Vereinbarung für den Entwicklervertrieb über den Android Market zustimmen. Das war’s auch schon. Nach dem Upload Ihrer Datei steht diese in Kürze über den digitalen Marktplatz zur Verfügung.

Fazit

PhoneGap dürfte für viele interessierte Anwender den Weg in die App-Entwicklung ebnen, denn noch nie war das Erstellen von Multi-Plattform-Apps so einfach wie mit diesem Tool. Da PhoneGap auf etablierte Web-Standards setzt, die im Netz umfangreich dokumentiert sind, gelingt es auch Einsteigern nach einer kurzen Einarbeitungszeit, ansprechende Ergebnisse zu erzielen.