Eine Android App-Design Oberfläche mit Eclipse, Android SDK und PhoneGap unter Ubuntu 11.04 aufsetzen

Eine Android App-Design Oberfläche mit Eclipse, Android SDK und
PhoneGap unter Ubuntu 11.04 aufsetzen

Version 1.0

Autor: Falko Timme <ft [at] falkotimme [dot]
com> , Christian Schmalfeld <C [dot] Schmalfeld [at] projektfarm
[dot] de>

Follow me on Twitter


Dieses Tutorial zeigt Ihnen wie Sie unter Ubuntu 11.04 mit Eclipse, dem Android SDK und PhoneGap eine Programmierumgebung für Android Apps erstellen. Ich werde beschreiben wie man mittels der Befehlszeile von PhoneGap und mittels des GUI über Eclipse und PhoneGap Android Apps erstellt und diese mit einem Android Emulator und einem Android nutzenden Gerät testet. PhoneGap erlaubt es Ihnen, Ihre Android Apps mit Internettechnologien wie HTML, CSS und JavaScript zu versehen und wandelt diese zu Android eigenen Apps um (PhoneGap unterstützt mehrere Plattformen, darunter Android, iPhone, Palm, Windows Mobile und Symbian, Sie können also den selben Code benutzen um Apps für verschiedene Plattformen zu erstellen).

Ich gebe keine Garantie für den Inhalt dieses Tutorials. Die Ergebnisse könnten je nach Konfiguration Ihres Systems anders ausfallen!

1 Vorbemerkung

Ich werde nicht erklären, wie man mit HTML, CSS und JavaScript eine Android App erstellt. Zu diesem Thema gibt es bereits viele Tutorials im Internet zu finden, wie zum Beispiel dieses hier (englisch):

Tutorial: A simple Twitter client with JQTouch
Ich benutze eine leicht abgeänderte Version des Twitter Clients, auf dessen Konstruktion hier verwiesen wird. Sie können meine Version hier herunterladen:

http://downloads.howtoforge.com/android_build_environment/tweetme.zip
Ich arbeite mit dem Ubuntu Classic Desktop (GNOME); die Schritte sollten jedoch unter Unity beinahe identisch sein.

2 Installation von Eclipse und den Voraussetzungen für das Android
SDK/PhoneGap

Öffnen Sie zunächst das Terminal Anwendungen > Zubehör > Terminal:


Eclipse und die Voraussetzungen für das Android ADK und PhoneGap können wie folgt installiert werden:

sudo apt-get install openjdk-6-jdk eclipse ruby
rubygems ruby-dev libnokogiri-ruby git ant libxml2 libxml2-dev
libxslt1-dev

Wenn Sie auf einem 64bit System arbeiten, müssen Sie außerdem die folgenden beiden Pakete installieren:

sudo apt-get install lib32stdc++6 ia32-libs


3 Das Android SDK installieren

Öffnen Sie Firefox und gehen Sie auf http://developer.android.com/sdk/index.html. Hier werden Sie Links zum Android SDK für die verschiedenen Betriebssysteme finden Windows, Mac OS X, Linux). Kopieren Sie den Downloadlink für den Linux (i386) (der Download funktioniert sowohl auf i386 als auch unter x86_64 Plattformen!)... :


... und laden Sie es wie folgt herunter und installieren es:

cd ~

wget http://dl.google.com/android/android-sdk_r11-linux_x86.tgz

tar xvfz android-sdk_r11-linux_x86.tgz

Sie haben nun das Verzeichnis android-sdk-linux_x86 in Ihrem Persönlichen Ordner. ($HOME). Nun müssen Sie das $HOME/android-sdk-linux_x86/tools Verzeichnis und das $HOME/android-sdk-linux_x86/platform-tools Verzeichnis zu Ihrer PATH Variable hinzufügen:

Öffnen Sie ~/.profile...

gedit ~/.profile

... und fügen Sie folgende Zeile ganz unten ans Dokument an:
 [...]
PATH="$HOME/android-sdk-linux_x86/tools:$HOME/android-sdk-linux_x86/platform-tools:$PATH"
Um die Änderungen geltend zu machen (sodass Sie nicht aus- und wieder einloggen müssen), benutzen Sie folgenden Befehl:

export
PATH="$HOME/android-sdk-linux_x86/tools:$HOME/android-sdk-linux_x86/platform-tools:$PATH"

Starten Sie nun das Android SDK:

android

So sieht das Android SDK aus:


Wählen Sie zunächst Available packages in der linke Spalte und dann Android Repository in der rechten Spalte aus um Android SDK Pakete herunterzuladen:


Die Pakete die zur Android Repository Gruppe gehören sollten nun alle ausgewählt werden. Klicken Sie auf den Install Selected Button:


Ein neues Fenster öffnet sich; markieren Sie Accept und klicken Sie auf Install...


... um den Download der SDK Pakete zu starten:


Falls ADB (Android Debug Bridge) neu gestartet werden muss, wählen Sie Ja aus:


Klicken Sie auf Close nachdem der Download beendet ist - dies wird das Downloadfenster schließen:


4 Android SDK in Eclipse integrieren

Sollten Sie zum Erstellen Ihrer Android Apps Eclipse statt der Kommandozeile benutzen wollen, so müssen Sie das Android SDK in Eclipse integrieren. Starten Sie hierfür Eclipse: (Anwendungen > Software-Entwicklung > Eclipse):


Klicken Sie auf Ok wenn Sie das Workspace Launcher Fenster sehen (Sie können Use this as the default and do not ask again aktivieren, damit sie diesen Schritt nicht mehr wiederholen müssen):


In Eclipse, gehen Sie auf Help > Install New Software...:


Das Available Software Fenster öffnet sich. Klicken Sie auf den Add... Button:


Ein kleines Add Site Fenster öffnet sich. Tragen Sie die folgenden Werte ein und klicken Sie auf OK:
  • Name: ADT Plugin
  • Location: https://dl-ssl.google.com/android/eclipse/

Zurück im Available Software Fenster sehen Sie nun die Developer Tools. Wählen Sie diese aus und klicken auf Next >:


Im nächsten Fenster klicken Sie erneut auf Next >:


Akzeptieren Sie nun die Lizensvereinbarungen und klicken auf Finish:


Die Pakete die gebraucht werden um Android SDK in Eclipse zu integrieren werden nun heruntergeladen und installiert:


Wenn Sie folgende Nachricht über unsignierten Inhalt bekommen, klicken Sie den OK Button:


Am Ende der Installation muss Eclipse neu gestartet werden. Klicken Sie hierzu Yes:


Um die Installation mit dem letzten Schritt abzuschließen, gehen Sie nach Window > Preferences:


Im Preferences Fenster wählen Sie Android in der linken Spalte und klicken dann auf den Browse... Button der zum SDK Location Feld in der rechten Spalte gehört:


Wählen Sie das Verzeichnis aus in dem sich Android SDK befindet (es ist android-sdk-linux_x86 in Ihrem Persönlichen Ordner) und klicken Sie auf OK:


Zurück im Preferences Fenster, klicken Sie auf Apply (Sie sollten die unterstützten Android Versionen in der Target Name Spalte sehen)...


... und dann auf OK:


5 PhoneGap installieren

Um PhoneGap zu installieren, öffnen Sie Firefox und gehen auf https://github.com/phonegap/phonegap-android. Klicken Sie auf den Downloads Button:


Wählen Sie Download .tar.gz aus der aufkommenden Oberfläche aus:


Wählen Sie Save File im Firefox Dialogfenster:


Nachdem der Download beendet ist, gehen Sie in das Verzeichnis wo er gespeichert wurde (z.B. ~/Downloads/):

cd ~/Downloads/

Sehen Sie sich den Inhalt des Verzeichnisses an um herauszufinden, wie der PhoneGap Download benannt ist:

ls -l

falko@falko-virtual-machine:~/Downloads$ ls -l

total 11200

-rw-r--r-- 1 falko falko 11467178 2011-06-21 14:01
phonegap-phonegap-android-0.9.5.1-15-g939754e.tar.gz

falko@falko-virtual-machine:~/Downloads$

Wie Sie sehen, heißt er in meinem Fall phonegap-phonegap-android-0.9.5.1-15-g939754e.tar.gz. Dekomprimieren Sie die Datei nun:

tar xvfz
phonegap-phonegap-android-0.9.5.1-15-g939754e.tar.gz

In meinem Fall erstellt dies das phonegap-phonegap-android-939754e Verzeichnis innerhalb des Downloads Verzeichnisses. Ich möchte dieses Verzeichnis in meinen Persönlichen Ordner bewegen und es in phonegap-phonegap-android umbenennen:

mv phonegap-phonegap-android-939754e
~/phonegap-phonegap-android

Sie müssen das bin Verzeichnis in $HOME/phonegap-phonegap-android zu Ihrer PATH Variable hinzufügen, deshalb editieren Sie ~/.profile erneut:

cd ~

gedit ~/.profile

Ersetzen Sie die zuvor hinzugefügte PATH Variable mit dieser:
[...]
PATH="$HOME/android-sdk-linux_x86/tools:$HOME/android-sdk-linux_x86/platform-tools:$HOME/phonegap-phonegap-android/bin:$PATH"
Um die Änderung geltend zu machen benutzen Sie folgenden Befehl:

export
PATH="$HOME/android-sdk-linux_x86/tools:$HOME/android-sdk-linux_x86/platform-tools:$HOME/phonegap-phonegap-android/bin:$PATH"

Die Android Umgebung ist nun konfiguriert; Sie können sie nun benutzen!

6 Einen Android Emulator starten

Das Android SDK beinhaltet einen Emulator, sodass man seine Apps auf diesem testen kann, anstatt auf einem echten Android-Gerät. Um einen Emulator zu erstellen, müssen Sie zunächst wissen, welche Android Versionen verfügbar sind (targets):

android list targets

falko@falko-virtual-machine:~$ android list targets

Available Android targets:

id: 1 or "android-3"

Name: Android 1.5

Type: Platform

API level: 3

Revision: 4

Skins: HVGA (default), QVGA-L, HVGA-P, HVGA-L, QVGA-P

id: 2 or "android-4"

Name: Android 1.6

Type: Platform

API level: 4

Revision: 3

Skins: HVGA, QVGA, WVGA854, WVGA800 (default)

id: 3 or "android-7"

Name: Android 2.1-update1

Type: Platform

API level: 7

Revision: 2

Skins: HVGA, QVGA, WQVGA400, WVGA854, WQVGA432, WVGA800 (default)

id: 4 or "android-8"

Name: Android 2.2

Type: Platform

API level: 8

Revision: 2

Skins: HVGA, QVGA, WQVGA400, WVGA854, WQVGA432, WVGA800 (default)

id: 5 or "android-10"

Name: Android 2.3.3

Type: Platform

API level: 10

Revision: 1

Skins: HVGA, QVGA, WQVGA400, WVGA854, WQVGA432, WVGA800 (default)

id: 6 or "android-11"

Name: Android 3.0

Type: Platform

API level: 11

Revision: 1

Skins: WXGA (default)

id: 7 or "android-12"

Name: Android 3.1

Type: Platform

API level: 12

Revision: 2

Skins: WXGA (default)

falko@falko-virtual-machine:~$

Ich werde nun einen Emulator namens mySim für Android 2.3.3 (id 5 or android-10) erstellen:

android create avd -n mySim -t android-10

falko@falko-virtual-machine:~$ android create
avd -n mySim -t android-10

Android 2.3.3 is a basic Android platform.

Do you wish to create a custom hardware profile [no] <-- ENTER
Created AVD 'mySim' based on Android 2.3.3,
with the following hardware config:

hw.lcd.density=240

vm.heapSize=24

hw.ramSize=256

falko@falko-virtual-machine:~$

Um den Emulator zu starten benutzen Sie folgenden Befehl:

emulator -avd mySim -scale 0.75

Es könnte einige Minuten dauern, bevor der Emulator vollständig geladen hat und betriebsfähig ist, aber dann sollte er wie folgt aussehen:


7 Eine Android App erstellen

Um meine Android App (welche ich TweetMe nenne) aus Ihren HTML, CSS und JavaScript Quellen zu erstellen , lege ich ein neues Verzeichnis tweetme in meinem Persönlichen Ordner an, und in diesem tweetme Ordner erstelle ich einen weiteren tweetme Ordner welcher die Quellen beinhaltet (HTML, CSS, JavaScript):

HOME

|

|

+ tweetme

|

|

+tweetme

|

|
SOURCES (HTML, CSS, JavaScript)

Gehen Sie nach ~/tweetme/tweetme/:

cd ~/tweetme/tweetme/

Sie sollten die HTML, CSS und JavaScript Quellen in diesem Verzeichnis sehen:

ls -l

falko@falko-virtual-machine:~/tweetme/tweetme$ ls -l

total 96

-rw-r--r-- 1 falko falko  4233 2011-01-24 00:20 index.html

drwxr-xr-x 2 falko falko  4096 2011-06-21 14:23 jqtouch

-rw-r--r-- 1 falko falko 78601 2011-01-23 23:15 jquery.js

drwxr-xr-x 4 falko falko  4096 2011-06-21 14:23 themes

falko@falko-virtual-machine:~/tweetme/tweetme$

Nun können Sie eine App erstellen, entweder per Befehlszeile oder Eclipse:

7.1 Eine Android App mit der Befehlszeile erstellen

Im ~/tweetme/tweetme/ Verzeichnis führen Sie folgendes aus:

droidgap create

(Sollten Sie den Fehler droidgap: command not found bekommen, führen Sie folgendes aus

export
PATH="$HOME/android-sdk-linux_x86/tools:$HOME/android-sdk-linux_x86/platform-tools:$HOME/phonegap-phonegap-android/bin:$PATH"

und versuchen es erneut. )

Dies wird das Verzeichnis ~/tweetme/tweetme_android erstellen, welches alles beinhaltet um die die finale App daraus zu bauen. Das ~/tweetme/tweetme_android/assets/www/ Verzeichnis beinhaltet die HTML, CSS, JavaScript Quellen plus die phonegap.<version>.js Datei.

cd ../tweetme_android/

ls -l

falko@falko-virtual-machine:~/tweetme/tweetme_android$ ls -l

total 44

-rw-r--r-- 1 falko falko 2241 2011-06-21 14:25 AndroidManifest.xml

drwxr-xr-x 3 falko falko 4096 2011-06-21 14:25 assets

drwxr-xr-x 2 falko falko 4096 2011-06-21 14:25 bin

-rw-r--r-- 1 falko falko  696 2011-06-21 14:25 build.properties

-rw-r--r-- 1 falko falko 2891 2011-06-21 14:25 build.xml

-rw-r--r-- 1 falko falko  363 2011-06-21 14:25 default.properties

drwxr-xr-x 2 falko falko 4096 2011-06-21 14:25 libs

-rw-r--r-- 1 falko falko  425 2011-06-21 14:25 local.properties

-rw-r--r-- 1 falko falko 1159 2011-06-21 14:25 proguard.cfg

drwxr-xr-x 7 falko falko 4096 2011-06-21 14:25 res

drwxr-xr-x 3 falko falko 4096 2011-06-21 14:25 src

falko@falko-virtual-machine:~/tweetme/tweetme_android$

ls -l assets/www/

falko@falko-virtual-machine:~/tweetme/tweetme_android$ ls -l assets/www/

total 228

-rw-r--r-- 1 falko falko   4233 2011-06-21 14:25 index.html

drwxr-xr-x 2 falko falko   4096 2011-06-21 14:25 jqtouch

-rw-r--r-- 1 falko falko  78601 2011-06-21 14:25 jquery.js

-rw-r--r-- 1 falko falko 132955 2011-06-21 14:25 phonegap.0.9.5.js
drwxr-xr-x 4 falko falko   4096 2011-06-21 14:25 themes

falko@falko-virtual-machine:~/tweetme/tweetme_android$

Wichtig: Es gibt ein Problem mit der phonegap.0.9.5.js Datei - Sie beinhaltet zahlreiche Zeilen mit der prompt() Funktion welche dem Benutzer einige Fragen stellt (Sie fragt nach getPort, getToken, getServer, restartServer, usePolling), und das ist eindeutig nicht, was Sie in Ihrer App haben wollen - So sieht es aus:






Als Lösung für dieses Problem können Sie entweder die phonegap.0.9.5.js editieren und alle Zeilen, welche die prompt() Funktion enthalten auskommentieren (es sind sechs Zeilen), oder Sie Laden PhoneGap 0.9.4 von http://phonegap.googlecode.com/files/phonegap-0.9.4.zip herunter (PhoneGap 0.9.4 benutzt die prompt() Funktion nicht), extrahieren die phonegap.0.9.4.js Datei , löschen phonegap.0.9.5.js aus dem assets/www/ Verzeichnis und platzieren phonegap.0.9.4.js stattdessen im assets/www/ Verzeichnis.

Sollten Sie es bevorzugen, alle Zeilen welche die prompt() Funktion in phonegap.0.9.5.js auszukommentieren, dies aber nicht manuell machen wollen, können Sie den folgenden Befehl benutzen, um alle sechs Zeilen automatisch auszukommentieren (Der Befehl funktioniert für phonegap.0.9.5.js; könnte dies aber bei zukünftigen Versionen nicht mehr tun! Achten Sie deshalb auf Ihre Version!):

sed -i '/prompt/s;^;//;'
assets/www/phonegap.0.9.5.js

Das libs/ Verzeichnis beinhaltet die Datei phonegap.<version>.jar:

ls -l libs/

falko@falko-virtual-machine:~/tweetme/tweetme_android$
ls -l libs/

total 136

-rw-r--r-- 1 falko falko 139004 2011-06-21 14:25 phonegap.0.9.5.jar

falko@falko-virtual-machine:~/tweetme/tweetme_android$

Nun müssen Sie die index.html Datei im assets/www/ Verzeichnis editieren und die phonegap.<version>.js Datei zur <head></head> Sektion hinzufügen (vor allen anderen JavaScript Dateien/JavaScript Codes).

gedit assets/www/index.html

Nehmen wir an die Datei beginnt wie folgt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Tweetme</title> <!-- include JQuery through Google API => Always have the latest version --> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.3.2"); </script> <!-- import JQTouch --> <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script> <!-- Import JQTouch default style (iPhone look). Replace the string "themes/apple" with "themes/jq" for a non-iPhone theme --> <link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css"> <link type="text/css" rel="stylesheet" media="screen" href="themes/apple/theme.css"> [...]
Fügen Sie die Zeile <script type="text/javascript" charset="utf-8" src="phonegap.0.9.5.js"></script> vor allem anderen JavaScript ein sodass es wie folgt aussieht (haben Sie phonegap.0.9.5.js durch phonegap.0.9.4.js ausgetauscht, benutzen Sie statt dessen <script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.js"></script> ):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Tweetme</title> <script type="text/javascript" charset="utf-8" src="phonegap.0.9.5.js"></script> <!-- include JQuery through Google API => Always have the latest version --> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.3.2"); </script> <!-- import JQTouch --> <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script> <!-- Import JQTouch default style (iPhone look). Replace the string "themes/apple" with "themes/jq" for a non-iPhone theme --> <link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css"> <link type="text/css" rel="stylesheet" media="screen" href="themes/apple/theme.css"> [...]
Nun können Sie, immernoch im ~/tweetme/tweetme_android Verzeichnis, Ihre App erstellen:

ant debug

Das Terminal sollte am Ende BUILD SUCCESSFUL anzeigen:

[...]

-package-debug-sign:

[apkbuilder] Creating tweetme-debug-unaligned.apk and signing it with a debug key...

debug:

[echo] Running zip align on final apk...

[echo] Debug Package: /home/falko/tweetme/tweetme_android/bin/tweetme-debug.apk

BUILD SUCCESSFUL

Total time: 38 seconds

falko@falko-virtual-machine:~/tweetme/tweetme_android$

Sie können Ihre App nun im bin/ Verzeichnis finden (namens tweetme-debug.apk; apk ist die Dateierweiterung für Android Apps):

cd bin/

ls -l

falko@falko-virtual-machine:~/tweetme/tweetme_android/bin$ ls -l

total 808

drwxr-xr-x 3 falko falko   4096 2011-06-21 14:32 classes

-rw-r--r-- 1 falko falko 155652 2011-06-21 14:32 classes.dex

-rw-r--r-- 1 falko falko 171877 2011-06-21 14:32 tweetme.ap_

-rw-r--r-- 1 falko falko 244900 2011-06-21 14:32 tweetme-debug.apk

-rw-r--r-- 1 falko falko 244846 2011-06-21 14:32 tweetme-debug-unaligned.apk

falko@falko-virtual-machine:~/tweetme/tweetme_android/bin$

Um es im Emulator zu installieren, verwenden Sie folgenden Befehl:

adb -e install -r tweetme-debug.apk

falko@falko-virtual-machine:~/tweetme/tweetme_android/bin$ adb -e install -r tweetme-debug.apk

411 KB/s (244900 bytes in 0.581s)

pkg: /data/local/tmp/tweetme-debug.apk

Success

falko@falko-virtual-machine:~/tweetme/tweetme_android/bin$

(Anstatt ant debug zuerst und daraufhin adb -e install -r tweetme-debug.apk aus dem bin/ Verzeichnis zu starten umm die App zu installieren, hätten Sie auch

ant debug install

benutzen können, was die App erstellt und dann in einem Zug installiert hätte.)

Öffnen Sie nun Ihren Emulator, und Ihre App sollte unter den anderen Apps aufgelistet sein:


So sieht die App aus:




7.2 Eine Android App mit Eclipse erstellen

Im ~/tweetme/tweetme/ Verzeichnis führen Sie folgendes aus:

droidgap create

(Sollten Sie den Fehler droidgap: command not found bekommen, führen Sie folgendes aus

export
PATH="$HOME/android-sdk-linux_x86/tools:$HOME/android-sdk-linux_x86/platform-tools:$HOME/phonegap-phonegap-android/bin:$PATH"

und versuchen es erneut. )

Dies wird das Verzeichnis ~/tweetme/tweetme_android erstellen, welches alles beinhaltet um die die finale App daraus zu bauen. Das ~/tweetme/tweetme_android/assets/www/ Verzeichnis beinhaltet die HTML, CSS, JavaScript Quellen plus die phonegap.<version>.js Datei.

cd ../tweetme_android/

ls -l

falko@falko-virtual-machine:~/tweetme/tweetme_android$ ls -l

total 44

-rw-r--r-- 1 falko falko 2241 2011-06-21 14:25 AndroidManifest.xml

drwxr-xr-x 3 falko falko 4096 2011-06-21 14:25 assets

drwxr-xr-x 2 falko falko 4096 2011-06-21 14:25 bin

-rw-r--r-- 1 falko falko  696 2011-06-21 14:25 build.properties

-rw-r--r-- 1 falko falko 2891 2011-06-21 14:25 build.xml

-rw-r--r-- 1 falko falko  363 2011-06-21 14:25 default.properties

drwxr-xr-x 2 falko falko 4096 2011-06-21 14:25 libs

-rw-r--r-- 1 falko falko  425 2011-06-21 14:25 local.properties

-rw-r--r-- 1 falko falko 1159 2011-06-21 14:25 proguard.cfg

drwxr-xr-x 7 falko falko 4096 2011-06-21 14:25 res

drwxr-xr-x 3 falko falko 4096 2011-06-21 14:25 src

falko@falko-virtual-machine:~/tweetme/tweetme_android$

ls -l assets/www/

falko@falko-virtual-machine:~/tweetme/tweetme_android$ ls -l assets/www/

total 228

-rw-r--r-- 1 falko falko   4233 2011-06-21 14:25 index.html

drwxr-xr-x 2 falko falko   4096 2011-06-21 14:25 jqtouch

-rw-r--r-- 1 falko falko  78601 2011-06-21 14:25 jquery.js

-rw-r--r-- 1 falko falko 132955 2011-06-21 14:25 phonegap.0.9.5.js
drwxr-xr-x 4 falko falko   4096 2011-06-21 14:25 themes

falko@falko-virtual-machine:~/tweetme/tweetme_android$

Wichtig: Es gibt ein Problem mit der phonegap.0.9.5.js Datei - Sie beinhaltet zahlreiche Zeilen mit der prompt() Funktion welche dem Benutzer einige Fragen stellt (Sie fragt nach getPort, getToken, getServer, restartServer, usePolling), und das ist eindeutig nicht, was Sie in Ihrer App haben wollen - So sieht es aus:






Als Lösung für dieses Problem können Sie entweder die phonegap.0.9.5.js editieren und alle Zeilen, welche die prompt() Fuktion enthalten auskommentieren (es sind sechs Zeilen), oder Sie Laden PhoneGap 0.9.4 von http://phonegap.googlecode.com/files/phonegap-0.9.4.zip herunter (PhoneGap 0.9.4 benutzt die prompt() Funktion nicht), extrahieren die phonegap.0.9.4.js Datei , löschen phonegap.0.9.5.js aus dem assets/www/ Verzeichnis und platzieren phonegap.0.9.4.js stattdessen im assets/www/ Verzeichnis.

Sollten Sie es bevorzugen, alle Zeilen welche die prompt() Funktion in phonegap.0.9.5.js auszukommentieren, dies aber nicht manuell machen wollen, können Sie den folgenden Befehl benutzen, um alle sechs Zeilen automatisch auszukommentieren (Der Befehl funktioniert für phonegap.0.9.5.js; könnte dies aber bei zukünftigen Versionen nicht mehr tun! Achten Sie deshalb auf Ihre Version!):

sed -i '/prompt/s;^;//;'
assets/www/phonegap.0.9.5.js

Das libs/ Verzeichnis beinhaltet die Datei phonegap.<version>.jar:

ls -l libs/

falko@falko-virtual-machine:~/tweetme/tweetme_android$
ls -l libs/

total 136

-rw-r--r-- 1 falko falko 139004 2011-06-21 14:25 phonegap.0.9.5.jar

falko@falko-virtual-machine:~/tweetme/tweetme_android$

Öffnen Sie nun Eclipse und gehen Sie nach File > New > Project...:


Im Fenster New Project wählen Sie Android > Android Project aus und klicken auf Next >:


Im neuen Fenster New Android Project, wählen Sie Create project from existing source aus (Wir haben die Quelle zuvor durch Ausführen von droidgap create erstellt) und klicken Sie auf den Browse... Button - füllen Sie kein anderes Feld in diesem Fenster aus:


Wählen Sie das ~/tweetme/tweetme_android Verzeichnis und klicken Sie auf OK:


Zurück im New Android Project Fenster sollten alle anderen Felder nun aufgefüllt sein. Klicken Sie nun auf Finish:


Sie sollten nun den Quellenbaum Ihrer App in Androids linker Spalte sehen. Rechtsklicken Sie die assets/www/index.html Datei und wählen Sie Open With > Text Editor:


Fügen Sie die phonegap.<version>.js Datei in die <head></head> Sektion ein (vor allen anderen JavaScripts/Codes). Nehmen wir an die Datei beginnt wie folgt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Tweetme</title> <!-- include JQuery through Google API => Always have the latest version --> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.3.2"); </script> <!-- import JQTouch --> <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script> <!-- Import JQTouch default style (iPhone look). Replace the string "themes/apple" with "themes/jq" for a non-iPhone theme --> <link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css"> <link type="text/css" rel="stylesheet" media="screen" href="themes/apple/theme.css"> [...]
Fügen Sie die Zeile <script type="text/javascript" charset="utf-8" src="phonegap.0.9.5.js"></script> vor allem anderen JavaScript ein sodass es wie folgt aussieht (haben Sie phonegap.0.9.5.js durch phonegap.0.9.4.js ausgetauscht, benutzen Sie statt dessen <script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.js"></script> ):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Tweetme</title> <script type="text/javascript" charset="utf-8" src="phonegap.0.9.5.js"></script> <!-- include JQuery through Google API => Always have the latest version --> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.3.2"); </script> <!-- import JQTouch --> <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script> <!-- Import JQTouch default style (iPhone look). Replace the string "themes/apple" with "themes/jq" for a non-iPhone theme --> <link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css"> <link type="text/css" rel="stylesheet" media="screen" href="themes/apple/theme.css"> [...]
Speichern Sie nun die Datei.


Rechtsklicken Sie als nächstes die libs/phonegap.<version>.jar Datei und wählen Sie Build Path > Add to Build Path aus:


Rechtsklicken Sie nun auf die Wurzel des Quellenbaumes, tweetme, und wählen Sie Run As > Android Application aus:


Der Emulator wird nun aufgerufen und die App gestartet:

8 Ein echtes Android-Gerät benutzen

Besitzen Sie ein echtes Android Smartphone und möchten Ihre App auf diesem testen, anstatt auf einem Emulator, so müssen Sie zunächst USB debugging auf diesem Gerät aktivieren Menu > Settings > Applications > Development > USB-Debugging) und es mit einem USB-Kabel an den Ubuntu Desktop anschließen.

Schauen Sie jetzt nach ob Ubuntu das Gerät identifizieren konnte:

adb devices

Sollten Sie viele Fragezeichen sehen, wie hier...

falko@falko-virtual-machine:~$ adb devices

List of devices attached

????????????    no permissions

falko@falko-virtual-machine:~$

... konnte Ubuntu Ihr Gerät nicht erkennen. In diesem Fall erstellen Sie die Datei /etc/udev/rules.d/51-android.rules...

sudo gedit /etc/udev/rules.d/51-android.rules

... mit folgenden Inhalten:
SUBSYSTEM=="usb", SYSFS{idVendor}=="0bb4", MODE="0666"
Ersetzen Sie 0bb4 (für HTC Telefone) mit der korrekten Anbieter ID, welche Sie hier finden können: http://developer.android.com/guide/developing/device.html#VendorIds
Benutzen Sie dann:

sudo chmod a+r /etc/udev/rules.d/51-android.rules

Schließen Sie ihr Telefon ab und wieder an. Ubuntu sollte es nun erkennen:

adb devices

falko@falko-virtual-machine:~$ adb devices

List of devices attached

SH0ARPL12791    device

falko@falko-virtual-machine:~$

Sind Ihre Apps im apk Format, können Sie sie wie folgt auf Ihrem Telefon installieren:

adb -d install -r tweetme-debug.apk

(Achten Sie darauf, dass ich nun -d (für device) anstatt -e (für emulator) benutze.)

9 Links