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

von CSch · August 4, 2011

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:

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

7 Eine Android App erstellen

7.1 Eine Android App mit der Befehlszeile erstellen

Das könnte dich auch interessieren …

Suche

Seiten

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

7 Eine Android App erstellen

7.1 Eine Android App mit der Befehlszeile erstellen

Das könnte dich auch interessieren …

Installation und Sicherung eines Redis-Servers unter Debian 10

So installierst du Mattermost auf Alma Linux 8

So installierst du die Magento eCommerce Suite auf Debian 12 mit Nginx und Elasticsearch

Suche

Seiten