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

Want to support HowtoForge? Become a subscriber!
 
Submitted by falko (Contact Author) (Forums) on Tue, 2011-01-25 17:49. ::

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


Please do not use the comment function to ask for help! If you need help, please use our forum.
Comments will be published after administrator approval.
Submitted by xgenvn (not registered) on Wed, 2011-06-08 13:32.

As I aware and have tried, in ubuntu 10.04, I use export PATH but it seems not working. So if anyone meets this problem, please cd to android-sdk-etc-etc/ and use the command ./android, it works like a charm.

Moreover, the size of the emulator window at my first run is a little bit bigger than my resolution, so I've searched around and find solution for this:

Follow  this link:

http://matthew-moses.com/main/2011/06/07/resizing-android-emulator-window/

Or follow my summary which I collect from that article:

- In Eclipse, navigate to window>Android SDK and AVD manager

- In the new opened window, choose the emulator you've used or been using (in this tutorial is mySim), click Edit.

- At Skin option: choose Built-in: HVGA

And finish your setting with clicking Edit AVD.

You may want to run the application again to check the setting out.

It seems an easy job on that, but for the newbie like me it'll save a little of time. Have fun.

Xgenvn

Submitted by Gary (not registered) on Sat, 2011-03-19 04:20.
this tutorial help me so much………

but some confusion in getting this to work with the source code you reference as it's using php...

can you please send the source code of this tutorial in some zip folder so that i can run it easily……….
Submitted by Anonymous (not registered) on Wed, 2011-05-25 01:25.
I think the source_code.tar.gz in the root dir is the index.php it should be index.html not index.php. I got an error when i execute droidgap create pointing to the index.html but in the source its index.php. Thanks for the greate tutorials. I should start my android apps,  May i ask whats the best ebooks for beginners. 
Submitted by om (not registered) on Sat, 2011-02-26 17:20.

I got a bit lost at the point where you created /tweetme/tweetme and magically had a load of resources with content (around point 7).

After paging through your tutorial again, I worked out that they came from here: http://www.timo-ernst.net/2010/08/tutorial-a-simple-twitter-client-with-jqtouch/

This is implied in point 1 "In fact, I'm using a slightly modified version of the Twitter client described in the link to build a Twitter app in this tutorial."

It would be very helpful if you could explicitly say in point 7 "I'm using an app I built earlier", and you can find the source code here: http://www.timo-ernst.net/wp-content/uploads/2010/08/tweetme.zip

But a very useful tutorial nonetheless.

Thanks 

Submitted by little_oak (not registered) on Tue, 2011-01-25 20:45.

NICE article.

 I purchased a book about android, but i have finished my search for best desktop with full suit for android.
NICE!

 I using ubuntu 10.10 :D.

 GREAT!