HowtoForge

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

von ·

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

Schlagwörter:

Das könnte dich auch interessieren …