Setting Up An Android App Build Environment With Eclipse, Android SDK, PhoneGap (Ubuntu 10.10) - Page 5

7.2 Creating An Android App From Eclipse

In the ~/tweetme/tweetme/ directory, run:

droidgap create

(If you get the error message droidgap: command not found, please run

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

and try again. )

This will create the directory ~/tweetme/tweetme_android which contains everything we need to build our final app from it. The ~/tweetme/tweetme_android/assets/www/ directory contains our HTML, CSS, JavaScript sources plus the phonegap.js file.

cd ../tweetme_android/
ls -l
falko@falko-desktop:~/tweetme/tweetme_android$ ls -l
total 44
-rw-r--r-- 1 falko falko 2000 2011-01-24 18:43 AndroidManifest.xml
drwxr-xr-x 3 falko falko 4096 2011-01-24 18:43 assets
drwxr-xr-x 2 falko falko 4096 2011-01-24 18:43 bin
-rw-r--r-- 1 falko falko  696 2011-01-24 18:43 build.properties
-rw-r--r-- 1 falko falko 3201 2011-01-24 18:43 build.xml
-rw-r--r-- 1 falko falko  362 2011-01-24 18:43 default.properties
drwxr-xr-x 2 falko falko 4096 2011-01-24 18:43 libs
-rw-r--r-- 1 falko falko  424 2011-01-24 18:43 local.properties
-rw-r--r-- 1 falko falko 1034 2011-01-24 18:43 proguard.cfg
drwxr-xr-x 7 falko falko 4096 2011-01-24 18:43 res
drwxr-xr-x 3 falko falko 4096 2011-01-24 18:43 src
falko@falko-desktop:~/tweetme/tweetme_android$
ls -l assets/www/
falko@falko-desktop:~/tweetme/tweetme_android$ ls -l assets/www/
total 200
-rw-r--r-- 1 falko falko   4311 2011-01-24 15:59 index.html
drwxr-xr-x 2 falko falko   4096 2011-01-24 15:57 jqtouch
-rw-r--r-- 1 falko falko  78601 2011-01-24 15:57 jquery.js
-rw-r--r-- 1 falko falko 105761 2011-01-24 15:57 phonegap.js
drwxr-xr-x 4 falko falko   4096 2011-01-24 15:57 themes
falko@falko-desktop:~/tweetme/tweetme_android$

The libs/ directory contains the file phonegap.jar:

ls -l libs/
falko@falko-desktop:~/tweetme/tweetme_android$ ls -l libs/
total 120
-rw-r--r-- 1 falko falko 122227 2011-01-24 15:57 phonegap.jar
falko@falko-desktop:~/tweetme/tweetme_android$

Now open Eclipse and go to New > Project...:

In the New Project window, select Android > Android Project and click on Next >:

In the New Android Project window, select Create project from existing source (we have previously created the source by running droidgap create) and click on the Browse... button - don't fill out any other fields in that window:

Select the ~/tweetme/tweetme_android directory and click on OK:

Back in the New Android Project window, all other fields should now be filled. Click on Finish:

You should now see the source tree of your app in the left panel in Android. Right-click the assets/www/index.html file and select Open With > Text Editor:

Add the phonegap.js file to the <head></head> section (before all other JavaScript files/JavaScript code).

Lets assume the file starts as follows:

<!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">
[...]

Add the line <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> before all other JavaScript so that it looks as follows:

<!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.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">
[...]

Now save the file.

Next right-click the libs/phonegap.jar file and select Build Path > Add to Build Path:

Now right-click the root of our source tree, tweetme, and select Run As > Android Application:

This will open our emulator and automatically start our app:

 

8 Using A Real Android Device

If you have a real Android smartphone and want to test your app on this device instead of the emulator, you have to first enable USB debugging on the device (Menu > Settings > Applications > Development > USB-Debugging) and then plug it into your Ubuntu desktop using the device's USB cable.

Now check if Ubuntu has correctly identified the device:

adb devices

If you see a lot of question marks like this...

falko@falko-desktop:~$ adb devices
List of devices attached
????????????        no permissions

falko@falko-desktop:~$

... then Ubuntu did not identify your device. In this case create the file /etc/udev/rules.d/51-android.rules...

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

... with the following contents:

SUBSYSTEM=="usb", SYSFS{idVendor}=="0bb4", MODE="0666"

Replace 0bb4 (this is for HTC phones) with the correct vendor ID which you can find here: http://developer.android.com/guide/developing/device.html#VendorIds

Then run:

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

Plug out your phone and plug it back in, and Ubuntu should now recognize it:

adb devices
falko@falko-desktop:~$ adb devices
List of devices attached
SH0ARPL12791        device

falko@falko-desktop:~$

If you have your app as an apk file, you can now install it onto your phone as follows:

adb -d install -r tweetme-debug.apk

(Please note that I use -d (for device) instad of -e (for emulator) here.)

 

9 Links

Share this page:

5 Comment(s)