Android-Anwendungen mit PhoneGap entwickeln ? Teil 3

Ist die PhoneGap-Umgebung einmal eingerichtet, können Sie mit vergleichsweise wenig Aufwand ein vollständiges Android-Projekt realisieren. Alles was Sie dazu benötigen, sind ein wenig Know-how und einige Beispiele, die zeigen, dass Sie auch mit wenigen Programmkenntnissen ansehnliche Ergebnisse erzielen können.

Die Entwicklung einer vollständigen Android-Applikation umfasst mehrere Schritte. Zunächst müssen Sie die notwendige Programmierumgebung eingerichtet haben. Als Nächstes müssen Sie eine Aufgabe bzw. ein Problem haben, dass Sie mit Ihrer Applikation bewältigen bzw. lösen wollen. Dazu bedarf es der Entwicklung einer Konzeption. Der nächste Schritt dient der praktischen Programmierung der gewünschten Funktionalität. Steht der Rohbau, können Sie sich an die ersten Tests machen. Sind Sie mit der bereits realisierten Funktionalität zufrieden, erzeugen Sie als letzten Schritt abschließend aus Ihrem Projekt eine APK-Datei, die Sie dann auch unter realen Bedienungen auf Ihrem Smartphone ausführen können. In diesem dritten Teil unseres Workshops arbeiten wir alle typischen Schritte – angefangen von der Programmierung bis hin zum Erzeugen einer APK-Datei – ab.

Arbeitsbereich erzeugen

Bevor Sie sich an die eigentliche Programmierarbeit machen können, sollten Sie sicherstellen, dass die Variablen der Entwicklungsumgebung korrekt gesetzt sind. Der Artikel geht im Folgenden davon aus, dass Sie unter Linux programmieren. Unter Windows und Mac OS X sind die Schritte ähnlich. Die folgende Pfade sollten in der PATH-Variable gesetzt sein:

• Ihre_Entwicklungsumgebung/jdk/bin
• Ihre_Entwicklungsumgebung/android-sdk/tools
• Ihre_Entwicklungsumgebung/ruby/bin
• Ihre_Entwicklungsumgebung /apache-ant/bin

Sie sollten zudem sicherstellen, dass die folgenden Variablen gesetzt sind:

• JAVA_HOME – Pfad zum JDK-Verzeichnis
• ANT_HOME – Pfad zum Apache-Ant-Verzeichnis
• ANDROID_HOME – Pfad zu Ihrem SDK-Verzeichnis

Erzeugen Sie als Nächstes einen Arbeitsbereich für Ihre PhoneGap-App. Wechseln Sie dazu zum Ordner phonegap-android und erzeugen Sie mit folgendem Befehl einen Arbeitsbereich:

ruby ./droidgap android_sdk_pfad name package_name www pfad

Dazu geben Sie mit android_sdk_pfad den Pfad zum Android-SDK an, der Parameter name spezifiziert den Namen der neuen Applikation, mit package_name weisen Sie der App einen Namen zu und via www spezifizieren Sie letztendlich den Ordner, in den Sie die Dateien für PhoneGap-App kopieren wollen. Abschließend geben Sie mit pfad den Pfad des Arbeitsbereichs Ihres Projekts an. Lässt sich der Befehl korrekt ausführen, erscheint auf der Konsolenebene eine Erfolgsmeldung und das Android-SDK generiert eine vollständige Arbeitsumgebung für Ihre PhoneGap-App.

Sie können nun den Arbeitsbereich in Eclipse öffnen. Erzeugen Sie in dazu Eclipse ein neues Projekt, dabei wählen Sie die Option Create project from existing source und weisen dem Projekt eine Bezeichnung zu. Sollten Sie nun das Projekt ausführen wollen, gibt Eclipse eine Fehlermeldung aus. Der Grund hierfür: Die externe PhoneGap-Bibliothek phonegap.jar ist noch nicht in das Projekt, genauer in den Arbeitsbereich eingebettet.

Um die externe Bibliothek in das Projekt einzubetten, markieren Sie das Projekt mit der rechten Maustaste und führen Sie den Befehl Build Path> Add external archive aus. Wählen Sie dann die Datei phonegap.jar im libs-Ordner aus. Nach der Einbindung der Datei phonegap.jar sollten Sie einen erneuten Build-Vorgang starten und dieses Mal keine Fehlermeldung erhalten. Sie können nun Ihr Projekt im Emulator ausführen. Da das Projekt bislang noch keinerlei Funktionalität in Form von HTML- und JavaScript-Dateien besitzt, gibt der Emulator eine Fehlermeldung aus, ähnlich wie beim Zugriff auf eine nicht verfügbare Web-Seite.

Der Emulator konkretisiert die Fehlermeldung:

Web page not available
The Web page at file:///android_asset/www/index.html could not be loaded as:
The requested file was not found, www/index.html

Der Hinweis der Fehlermeldung ist eindeutig: Sie haben noch keine Index-Datei im Verzeichnis www angelegt. In dem Ordner assets/www finden Sie bereits die JavaScript-Datei phonegap.js und sollten als Nächstes die Index-Datei anlegen und diese mit dem Code aus Listing 1 füllen.

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap Workshop</title>
              <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
              <script type="text/javascript" charset="utf-8">
                        var showMessageBox = function() {
                             navigator.notification.alert("Hallo Welt -- Einstieg in die PhoneGap-Entwicklung");
                        }
                        function init(){
                             document.addEventListener("deviceready", showMessageBox, true);
                        }
  </script>
  </head>
  <body onload="init();"  >
  </body>
</html>

Dieser Code gibt einen einfachen Hinweisdialog aus, den Sie schließen können. Dabei sorgt die folgende Code-Zeile durch das Einbetten der Datei phonegap.js dafür, dass der native Aufruf von Android-APIs möglich wird:

<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>

Die init-Funktion registriert die Funktion showMessageBox, sobald geprüft ist, dass das Gerät verfügbar ist (Event deviceready). Dann ruft die Funktion showMessageBox die PhoneGap-API navigator.notification.alert auf, die für die Darstellung der Hinweismeldung sorgt.

Die Funktionalität der App ist bislang noch recht simpel. Erweitern wir sie um ein Texteingabefeld, in das man den Namen eingeben kann, und um einen Button, der die Meldung generiert (Listing 2).

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap Workshop</title>
              <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
              <script type="text/javascript" charset="utf-8">
              var displayHello = function() {
                        var name =      document.getElementById("vorname").value;
                        navigator.notification.alert("name" + name);
            }
   </script>
  </head>
  <body onload="init();" id="bdy" >
            <div id="txt">
            <input   type="text" name="vorname" id="vorname" />
            </div>
            <div id ="btn">
    <a href="#" class="btn" onclick="darstellungEingabe();">Hier klicken</a>
            </div>
        </div>
  </body>
</html>

Die folgende Zeile stellt die Eingabebox dar, in der Sie den Namen eingeben können

<input   type="text" name="vorname" id="vorname" />

Neu in diesem erweiterten Code- Block ist außerdem der Link, der die Funktion darstellungEingabe, die die Eingabe aus dem Textfelds verarbeitet und dann als Hinweismeldung ausgibt:

<a href="#" class="btn" onclick="darstellungEingabe();">Hier klicken!

Nun erinnert das Ergebnis unserer Entwicklungsarbeit eher an die Anfangstage des World Wide Web, in dem die Seiten überwiegend ein schnödes Aussehen besaßen. Das können wir einfach ändern, indem Sie eine Stylesheet mit der Bezeichnung phonegap.css anlegen und dieses in dem Ordner assetswww ablegen. Weisen Sie dem Stylesheet den Code aus Listing 3 zu.

#bdy
{
        background:#F0F0F0;
}
#btn a{
        border: 1px solid #CC6600;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        text-align:center;
        display:block;
        float:left;
        background:#3333CC;
        width:300px;
        color:#FFF;
        font-size:1.1em;
        text-decoration:none;
        padding:1.0em 0;
        margin:3px 0px 3px 5px;
        font-family: Arial, Helvetica, sans-serif;
}
#txt{
        border: 1px solid #555;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        text-align:center;
        display:block;
        float:left;
        background:#00FFCC;
        width:308px;
        color:#9ab;
        font-size:1.1em;
        text-decoration:none;
        padding:1.2em 0;
        margin:3px 0px 3px 5px;
}

Sie müssen nun nur noch Ihr Stylesheet in die Index-Datei integrieren bzw. den Verweis zur Formatvorlage hinterlegen. Dazu verwenden Sie folgende Code-Zeile:

<link rel="stylesheet" href="phonegap.css" type="text/css" media="screen" title="PhoneGap" charset="utf-8">

Nun können Sie die App im Emulator ausführen. Wie Sie anhand dieses einfachen Beispiels gesehen haben, ist die Programmierung einfacher Android-Applikationen mithilfe von PhoneGap so einfach, wie das Erstellen einer ansprechenden Website.

APK-Datei erzeugen

Ihre bisherige Entwicklung können Sie wunderbar auf dem lokalen Emulator testen, doch wie generieren Sie aus Ihrem Projekt eine APK-Datei, die Sie dann Dritten über den Play Store oder eine andere Plattform zur Verfügung stellen können? PhoneGap hat auch hierfür die passende Lösung: PhoneGap Build [1]. Dabei handelt es sich um einen webbasierten Service, der auf Ihrem PhoneGap-Projekt quasi in Minuten eine Android-Installationsdatei erzeugt. Bevor Sie den Build-Service der PhoneGap-Entwickler nutzen können, müssen Sie einen Account anlegen und sich einloggen.

Das Prinzip von PhoneGap Build ist simpel und einsteigerfreundlich: Sie übermitteln Ihre lokale Entwicklung an den Server, dieser erzeugt daraus das gewünschten APK-Paket, das Sie sich nach dem Build-Vorgang als Installationspaket herunterladen können. PhoneGap Build unterstützt zwei Upload-Optionen, Sie können Ihre Entwicklung als einzelne Index-Datei bzw. ZIP-Archiv an den Service übermitteln oder aber einen Link mit den Projektquellen hinterlegen, vom der sich der Service dann die notwendigen Daten holt. Bislang ist allerdings nur der Zugriff auf öffentliche Repositories möglich.

In Ihrem Projekt – unabhängig davon, ob Sie es nun über die Web-Schnittstelle übermitteln oder eine Online-Quelle angeben – können folgende Dateien enthalten sein:

• index.html – Das ist die Hauptseite Ihre App.
• Weitere Assets wie JavaScripts, Stylesheets, multimediale Daten oder weitere HTML-Dokumente
• config.xml – Hierbei handelt es sich um eine XML-Datei, die auf der W3C Widget-Spezifikation basiert, die Metadaten zu Ihrer App enthält.
• Icon – Schließlich können Sie das App-Icon in das Archiv einbetten. Es sollte sich dabei möglichst um eine PNG-Datei handeln.

Lediglich die Index-Datei ist erforderlich. Alle weiteren Dateien sind optional. Alle weiteren App-Eigenschaften können über den Build-Service editiert werden. Die Webschnittstelle von PhoneGap Build unterstützt die Umwandlung von aus drei Quellen: Sie können ein neues Git-Repository erzeugen, die Daten von einem bestehenden Git-Repository beziehen oder – der einfachste Fall – die Index-Daten bzw. das Zip-Archiv einfach an den Service übermitteln.

Dort erfolgt dann die Umwandlung in die verschiedenen Zieldateien der unterschiedlichen Plattformen. Über die App-Verwaltung können Sie dann auf die App und dort beispielsweise auf die APK-Datei zugreifen. Der Webservice stellt Ihnen auch den zugehörigen Barcode zur Verfügung, den Sie dann in Ihre Site integrieren können. Damit Sie Ihre App auf einem Android-Geräte installieren können, muss dort die Verwendung von unbekannten Quellen zugelassen sein. Die entsprechende Einstellung finden Sie unter Einstellungen> Anwendung> Unbekannte Quellen aktivieren.

PhoneGap Build beschränkt sich nicht nur auf Android, der Dienst baut Ihre App auch für andere mobile Systeme wie iOS, BlackBerry oder WebOS. Systemspezifisch sind allerdings einige Unterschiede bzw. Besonderheiten zu beachten. Um eine iOS-App generieren zu können, müssen Sie zunächst einen signierten Schlüssel bereitstellen. Einfacher ist hingegen das Erzeugen einer WebOS-App. Die kann direkt über die Web-Schnittstelle generieren und dann auf Seiten des Palm-Geräts mit dem Palm-Installer installiert werden.

Ähnlich einfach ist das beim Erzeugen einer Symbian-App. Laden Sie die Datei auf Ihr Mobilgerät herunter und öffnen Sie die WGZ-Datei. Beim Erstellen einer BlackBerry-App sollten Sie allerdings beachten, dass PhoneGap Build aktuell nur BlackBerry OS 5.0 und höher unterstützt. Die Installation einer BlackBerry-App ist ebenfalls einfach: Öffnen Sie den OTA-Link und folgen Sie den Anweisungen auf Ihrem Gerät.

App signieren

Mithilfe von PhoneGap Build können Sie Ihre Apps auch signieren, damit Sie auch über den Google Play Store veröffentlicht werden darf. Um Ihre App zu signieren, benötigen Sie einen Schlüssel. Zunächst müssen Sie die sogenannte Keystore-Datei erzeugen, dazu verwenden Sie am einfachsten Eclipse, markieren Ihr Projekt mit der rechten Maustaste und führen den Befehl Android Tools> Export signed application package aus.

Ist die Datei erzeugt, öffnen Sie Ihren PhoneGap Build-Account und fügen den generieren Schlüssel hinzu. Klicken Sie in der Profilverwaltung auf Signing und öffnen Sie die Signing-Einstellung für Ihre Android-Apps. Um auch Apps für andere Plattformen zu signieren, müssen Sie entsprechend den Anweisungen des jeweiligen Herstellers folgen.

Neben der Keystore-Datei müssen Sie im Dialog Android Key einen Titel, einen Alias, das Schlüssel- und das Keystore-Passwort angeben. Klicken Sie auf Save, um einen ersten Schlüssel in der Schlüsselverwaltung zu hinterlegen. Damit ist zumindest für Ihre Android-Apps der notwendige Schlüssel hinterlegt, mit dem alle weiteren Apps, die Sie mit PhoneGap Build erzeugen, automatisch signiert werden. Weitere Details für das Signieren von Android-Apps finden Sie auf den Android-Entwicklerseiten [2].

Die App-Metadaten

Wenn Sie eine App mithilfe von PhoneGap Build erzeugen, können Sie dieser über die Webschnittstelle verschiedene Metadaten zuweisen. Alternativ lässt sich auch eine config.xml-Datei nutzen, wie sie in der W3C-Widget-Spezifikation definiert ist. In dieser XML-Datei können Sie dann zusätzliche Metadaten über Ihre App anlegen. Wenn Sie diese Technik nutzen wollen, sollten Sie darauf achten, dass die config.xml sich in der höchsten Ebene Ihrer App befindet, also in der gleichen Hierarchie wie die Index-Datei.

Die Config-Datei kann eine Fülle an Informationen integrieren. Das widget-Element muss das Root-Element des XML-Dokuments sein. Diesem können Sie mit id einen ID und version eine Versionsnummer zuweisen. Sie sollten außerdem zumindest mit dem name-Element die Bezeichnung und mit description eine Beschreibung der App hinterlegen. Listing 4 zeigt eine einfache Konfigurationsdatei.

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.phonegap.eine.id"
version = "1.0.0">
<name>PhoneGap-Workshop</name>
<description>
Mit diesem Tag hinterlegen Sie eine Beschreibung Ihrer Applikation.
</description>
<author href="http://user.github.com"
email="user@server.de">
Entwickler-Name
</author>
<icon src="icon.png" gap:role="default" />
<feature name="http://api.phonegap.com/1.0/geolocation"/>
<feature name="http://api.phonegap.com/1.0/network"/>
<preference name="orientation" value="portrait" />
</widget>

Alternative: App Inventor

Dank PhoneGap vereinfacht sich die Entwicklung von Android-Apps deutlich und wird auch für viele Nichtprogrammierer interessant. Doch damit die App-Entwicklung für jedermann interessant wird, benötigt man Werkzeuge, mit denen man – ähnliche einem Lego-Baukasten – die gewünschte Funktionalität zusammenklickt. Einer der interessantesten Baukästen dieser Art ist App Inventor.

Beim App Inventor [3] handelt es sich um eine webbasierte Entwicklungsumgebung, mit der Sie Android-Apps quasi zusammenklicken können. Per Drag&Drop stellten Sie die Elemente und Funktionsgruppen einer App zusammen und weisen diesen Elementen die gewünschte Funktionalität zu. Bei der App-Entwicklung greifen Sie auf zwei Module zurück: Den App Inventor Designer und den App Inventor Blocks Editor. Mithilfe des Designers bestimmen Sie die Gestaltung Ihrer App. Dabei können Sie aus einer umfangreichen Bibliothek die gewünschten Komponenten auswählen.

Im sogenannten Blocks Editor erfolgt die Programmierung, der im Design Editor selektieren Komponenten. Dabei werden Verknüpfungen und Korrelationen zwischen den verschiedenen Komponenten hergestellt. Sie können dabei verschiedenste Parameter und Kontrollstrukturen für den Aufbau einer logischen Struktur verwenden. Neben typische Kontrollstrukturen, while- und for-Schleifen können Sie auch logische und mathematische Funktionen nutzen.

Voraussetzung zur Nutzung des App Inventors ist ein Google-Account, als Android User verfügen Sie wahrscheinlich schon über den passenden Account. Loggen Sie sich dann über die Projektseite ein und legen Ihr erstes App-Projekt an. Dazu klicken Sie in der Symbolleiste auf den New-Button und weisen Ihrem Projekt eine Bezeichnung zu. Anschließend präsentiert Ihnen der App Inventor seine vielfältigen Funktionen.

Die Benutzerschnittstelle ist viergeteilt: Links finden Sie die Paletten, über die die Auswahl der in die App einzufügenden Komponenten erfolgt. Rechts daneben finden Sie den Viewer, in dem Sie die Komponenten platzieren und der Ihnen einen ersten Eindruck von der App vermittelt. Es folgt die Komponentenliste, in der alle Komponenten aufgeführt werden, Sie die in Ihrer App verarbeiten. Ganz rechts finden Sie die Eigenschaftenleiste, mit der Sie die Eigenschaften einer markierten Komponente bearbeiten.

Auch wenn die Bedienung des App Inventors überwiegend über eine Website erfolgt, müssen Sie auf Ihren Entwicklungssystemen dennoch das Paket App Inventor Setup installierten. Es steht über die App Inventor-Website für Linux, Mac OS X und Windows zum Download bereit. Auf Seiten des Smartphones müssen Sie dafür sorgen, dass auch Apps unbekannter Quelle akzeptiert werden. Dann können Sie sich an die Entwicklung einer ersten App machen, wenn Sie Ihre App direkt auf dem Smartphone ausführen wollen. Alternativ verwenden Sie den integrierten Emulator und transferieren die App erst dann auf das Mobilgerät, wenn die Entwicklung abgeschlossen ist.

Wie einfach das Erstellen einer App sein kann, zeigt ein simples Beispiel. Darin platzieren wir ein Bild auf der App und beim Klicken auf die Schaltfläche wird ein Sound abgespielt. Zunächst ziehen Sie die Button-Komponente in den Viewer und weisen ihr über den Eigenschaften eine Bilddatei zu. Löschen Sie den Text, der der Schaltfläche unter Text property zugewiesen ist. Öffnen Sie als Nächstes den Blocks Editor. Klicken Sie dort auf die Schaltfläche New emulator, um einen neuen Emulator zu starten. Bewahren Sie dabei die Geduld, denn das Starten kann einige Zeit beanspruchen.

Fügen Sie dann eine Label-Komponente hinzu und platzieren Sie es unterhalb des Bildes. In der Komponentenliste wird dieses Element als Label1 aufgeführt. Passen Sie dann die Texteigenschaften an und weisen Sie diesem beispielsweise die Eigenschaft Ton abspielen zu.

Der nächste Schritt dient dem Hinzufügen eines Sounds. Fügen Sie über die Palette die Media-Komponente in den Viewer hinzu. Sie müssen nun noch das Abspielen des Sounds einrichten. Dazu öffnen Sie den Blocks Editor. Klicken Sie dort auf die Registerkarte My Blocks. Wählen Sie Button1 und ziehen Sie den Block when Button1.Click do in den Editor. Klicken Sie dann auf Sound1 und ziehen Sie den Block call Sound1.Play in den Block when Button1.Click do. Sichern Sie die Konfiguration. Mit einem Klick auf das Bild sollte der Sound abgespielt werden. Ein allerletzter Schritt ist noch erforderlich: Das Erstellen der APK-Datei. Auch das ist einfach: Klicken Sie im Kopfbereich des Designers auf Package for Phone und laden Sie die App herunter.

Fazit

Mithilfe von PhoneGap können auch Programmierneulinge und Einsteiger in einer überschaubaren Einarbeitungszeit ansprechende Apps entwickeln. Ganz ohne Handarbeit geht es bislang leider noch nicht, aber mit dem App Inventor ist ein erster Schritt in visuelle App-Entwicklung getan und gibt einen Ausblick auf kommende App-Entwicklungsumgebungen. PhoneGap ist keineswegs nur ein monolithisches Gebilde, sondern kann um verschiedene Plug-ins und Tools zu einem echten Profiwerkzeugkasten ausgebaut werden. Die Tabelle "PhoneGap-Tools" gibt Ihnen Überblick über die interessantesten PhoneGap-Tools.