Article on Phonegap

Improve your skills and share your expirience!

Email address... Submit

SUNDAY, NOVEMBER 11, 2012

How to install phoneGap for Android using Windows and Eclipse

Hi there! While installing phoneGap on Windows using the newst Eclipse version i've got some problems. That's the reason i

wrote this post. The "Getting Started with Android" guide from PhoneGap is good, but does not show all pitfalls you may

encounter like i did.

In this post we will learn how to:

Install Apache Ant

Install Java JDK

Install Eclispe Classic

Set all needed environment variables (JAVA:HOME, ANT_HOME and so on)

Install the Android ADT Plugin for Eclipse

Install the Android SDK

Intall PhoneGap Apache Cordova 2.2.0

Avoid the pitfalls while creating Android Projects

be sure you have all those tools installed before going further(we will see it step by step don't worry):

Pitfall CPU visualization

Apache ant (i used 1.8.4)

Java JDK (i used jdk1.7.0_07)

Android SDK

Eclipse Classic (i used version 4.2.1)

All Path variables has been set (JAVA_HOME, ANT_HOME)

Before doing all those steps (like i did) go to the end of this post "Launch your project" and check if your CPU supports

visualization. If not, go and by another PC first or upgrade your CPU if possible! ;-) Otherwise at the end of this post, you will

be disapointed. That's what happened to me, because there was no advise while installing PhoneGap Cordova.

got to Apache Ant - Binary Distribution and download the version you want. in my case it was the newst one ant 1.8.4(at the

time of this blog was written)

create a folder called ANT in the directory "C:\Program Files\" and unzip the downloaded file in it. By me it looks like

that: C:\Program Files\ANT\apache-ant-1.8.4

Now copy this path (C:\Program Files\ANT\apache-ant-1.8.4) and set the ANT_HOME path. to do that go to: Start > System

Setting > System and Maintenance > System > Advanced System Settings > Environment variable > by System

variable click the button new > and then type in: ANT_HOME and C:\Program Files\ANT\apache-ant-1.8.4 into the fields.

After that you must add this new variable to you PATH. Look for Path in the box System variable and press edit. Then add

you new ANT_HOME path like this to the and of you Path: %ANT_HOME%\bin; Don't worry it is easier as you think. See the

screen sequences bellow:

BASE REQUIREMENTS BEFORE STARTING

PITFALL CPU VISUALIZATION

DOWNLOADING APACHE ANT AND SETTING THE ANT_HOME VARIABLE

BLOG'S POPULARITY

► 2011 (9)

▼ 2012 (12)

► February (3)

► March (2)

► October (4)

▼ November (1)

How to install phoneGap for

Android using

Windows ...

► December (2)

► 2013 (16)

► 2014 (2)

OTHER INTERESTING POSTS

Ricardo Ferreira

Application Engineer,

Visionary and

Ideologist for a better

World.

View my complete profile

ABOUT ME

with Google Friend Connect

Members (24) More »

Already a member? Sign in

WHO ARE JOING US?

android (20) codeclean

(11) howto (9) Almanac (7)

Eclipse (7) Java (6) app (5)

TAGS / LABELS

Share 2 More Next Blog» Create Blog Sign In

Page 1 of 13Clean Code Development - Quality Seal: How to install phoneGap for Android using Win...

29-03-2014http://cleancodedevelopment-qualityseal.blogspot.in/2012/11/how-to-install-phonegap-fo...



Before doing that, find out which kind of processor your PC supports and then take the version with fits to your PC. (32Bit or

64Bit) To find it out which one you have go to Start > System Setting > System and Maintenance > System then you will

see the information of your PC like 32bit or 64bit system. see the screen sequences bellow:

OK, now we will do the same process with the JAVA JDK as we did with ANT in the last section. That's a good exercise to

see if you can do it by your self. Go to Java SE Downloads and download the version you want. In my case was jdk1.7.0_07

ath the time i wrote this post.

DOWNLOADING JAVA JDK AND SETTING THE JAVA_HOME VARIABLE



Good! Now just run the installer by doble clicking it and install it in the default directory it has been proposed by the wizard.

Something like this by me: C:\Program Files\Java\jdk1.7.0_07 Now do the same steps as we did by Ant and set the

JAVA_HOME variable and add it to your Path.

Go to: Android SDK and download the installer. Double click it and install it in the proposed default folder. by me it looks like

this: C:\Program Files\Android\android-sdk. That's all we need to know about it.

IMPORTANT: Now do the same steps as we did by Ant and set the ANDROID_HOME variable and add it to your Path BUT

instead of selecting a bin-folder you MUST add platform-tools and tools to it like that:

%ANDROID_HOME%\platform-tools; and %ANDROID_HOME%\tools;

Great! We are fast there. Let's download and install Eclipse now. That's will be our development tool. Go to Eclipse

Downloads and download the classic version version you want. In my case was 4.2.1 at the time i wrote this blog. As you

know now which platform you have (32bit or 64bit) you can take the one which fits to your PC. In my case it is the 32bit

version.

Because i'm using Norton as a security and virus protector, i descided to intall Eclipse in my user home so i do not have

problems with admin rights and so on. I recommend to do it that way if you have similar setting. By me i looks like

this: C:\Users\Ricardo\IDE\classic In there you unzip the downloaded file. After that you'll have something like this in

it: C:\Users\Ricardo\IDE\classic\eclipse. I also recommendo to change the rename the folder eclipse to eclipse-4.2.1. This is

useful if you may install other eclipse types and versions later but it is up to you to decide what fits better to you.

Now let's install the Android Plugin. In the directory of your Eclipse double click eclipse.exe to start it.

Close the welcome tab and then select Help > Install new software... and install the ADT Plugin as described bellow. See

the screen sequences bellow: PS: After installing Android ADT Eclipse may ask you to restart it. Say yes. At this point the

Android SDK Manager may start and shows a list from uninstalled packages to you, just select them all and install it. this may

DOWNLOADING AND INSTALLING ANDROID SDK

DOWNLOADING ECLIPSE CLASSIC AND INSTALLING THE ANDROID PLUGIN



take several minutes.

Alternatively you may go to Installing Eclipse ADT Plugin and take the steps directly from there.

It is getting interresting. Lets download and install Apache Cordova now. Go to: Apache Cordova and download the version

you want. At the time of this post it was version 2.1.0.

DOWNLOAD AND INSTALL PHONEGAP APACHE CORDOVA



First pitfall: Do not unzip this file in the default folder C:\Program Files because of the spaces in it. Instead of that, create a

new directory called: C:\development and unzip it in there. By me it looks like this: C:\development\cordova-2.1.0. Then in

this directory unzip the file incubator-cordova-android. By me it looks like this:

Pitfall one: Do not create your projects in the same directory as the eclipse workspace. This will result in a failure while trying

to open your project later with Eclipse.

Pitfall two: Do not create a folder to hold your projects. If you do that, that following Step will fail with the statement: This

project exits already! in the window command prompt console. This must be done with the create command we will see

bellow.

Creating Projects: That's the interresting part. go into unziped directory called C:\development\cordova-2.1.0\incubator-

cordova-android select the bin folder, press and hold the key shift and press right mouse click. From context menu select

open command prompt from here. By me it looks like this:

Then run the create command with your coordinates to create a new project. by me it looks like this:

C:\development\cordova-2.1.0\incubator-cordova-android\bin>create C:\Users\Ricar

do\IDE\classic\eclipse\android_projects com.yourcompany.appname projectname

Pitfall: The folder android_projects does not exits already. It will be created with the create command above. If you create it

manually before running the create command, you'll get an error saying: This project already exists! So do not create it

manually.

A new project will be created. Don't worry if you get a "suposed" error here. Important is to check if the project was really

created. To be sure go into directory C:\Users\Ricardo\IDE\classic\eclipse\android_projects and if there is a something

like this bellow, then you are fine.

PITFALLS WHILE CREATING PROJECTS



Now we are almost done! Start Eclipse again (if not already running) and press Ctrl + N and select Android Project from

Existing Code > root to your created folder android_projects > select the new created project and press finish. Now

we are ready to start. PS: If while starting Eclipse the Android SDK Manager starts and shows a list from uninstalled

packages to you, just select them all and install it. this may take several minutes.

That's the Emulator in which you will simulate a Phone Device. We need to create one before starting the App.

If you get an error like this bellow, then your processor may not support Visualization. To find out if your CPU supports

visualization you may go to Intel CPU and check it out by typing your CPU type in the search field. In my case, my CPU does

LOADING CREATED PROJECT INTO ECLIPSE

ONE MORE THING! ;-) CREATING AN AVD (ANDROID VIRTUAL DEVICE)

LAUNCHING YOUR PROJECT



Reactions:

Posted by Ricardo Ferreira at 8:15 AM

Labels: android, Eclipse, howto, Java, phonegap, pitfall

not supports visualization ;-(

See here how to create your: First Android App step by step

Advertising:

Optimized bets for playing EuroMillion's lottery on your Mobile Phone!

+2 Recommend this on Google

34 comments:

fbaheux November 12, 2012 at 8:54 AM

Thanks for this great article,

do you know if it's possible to test the correct instal of each part (ant, jdk and android sdk) ?

When i try to create a new project i have this message error :

Missing one of the following:

JDK: http://java.oracle.com

Android SDK: http://developer.android.com

Apache ant: http://ant.apache.org

Thanks

Fred



Replies

Reply

Reply

fbaheux November 12, 2012 at 9:12 AM

Ok i found my error, cmd prompt was open when i add the keys. So close the cmd prompt, re-open it, and do the create the

project.

Fred

Reply

Andre Dixon November 19, 2012 at 6:34 AM

Good article. In terms of virtualization, there is the option is software virtualization which does not need a processor that is able to

support a Hyper-visor.

VirtualBox is able to do it and I have ran android OS in it before, however, I have never attempted to connected to it via ADB.

Reply

Joshua Richards November 19, 2012 at 9:33 PM

Awesome article. Windows is a tough cookie. I followed all your instructions, but when I run as on my device, I get the following:

11-19 22:56:43.786: E/Web Console(1862): Uncaught TypeError: Object [object Object] has no method 'retrieveJsMessages' at

file:///android_asset/www/cordova-2.2.0.js:998

and the test app hangs at

"Connecting Device"

Any thoughts?

Thank you

Reply

Ricardo Ferreira November 23, 2012 at 1:27 PM

hummm i have no idea man. i suppose google haven't any answert right? i will ask my collegues. If i have any news i'll post it here

ok. sorry for that. I would appreciate if you post your solution here helping me and others in case you find a solution before i do.

thanks!

Reply

Luke Snowden November 26, 2012 at 7:20 AM

For anyone who can't get this working, banging there heads against walls and stuff, don't copy from the text on the site!

%ANDROID_HOME %\platform-tools; and %ANDROID_HOME %\tools;

is how it copies, take out the spaces (%ANDROID_HOME%\platform-tools; and %ANDROID_HOME%\tools;)

regards

Reply

Ricardo Ferreira November 27, 2012 at 10:48 AM

Hi Luke! thanks! i highly appreciate your help. i have corrected this typo! sorry for that!

uncle fester December 1, 2012 at 3:55 PM

i did everything here and I still get Missing one of the following:




I have redone all these instruction 3 or 4 times now. However I have fixed my problem.

I tested all the necessary commands java, javac and ant.

Firstly javac was not being recognised. To fix this I set the paths to reference the bin and libs in the java directory. This fixed the

javac not running.

Next create was complaining that it could retrieve the commons-codec, i found one here

http://mvnrepository.com/artifact/commons-codec/commons-codec/1.6.



Then everything became fine again :-)

Reply

uncle fester December 1, 2012 at 3:57 PM

oh i put the commons-codec in cordova\framwork\libs

Reply

Kautsky Lozano V. December 2, 2012 at 9:15 PM

Thanks :)

Reply

Ruoran Lu December 27, 2012 at 2:56 PM

Reply

Diogo Lopes December 29, 2012 at 10:45 AM

Pitfall: commons-codec 1.7 doesn't work now. Use 1.6: http://mvnrepository.com/artifact/commons-codec/commons-codec/1.6

Reply


update: sdk 4.2 still don't have Intel Atom option.

Reply


+2 updates:

If you get:

"Hax not working..." try install "intel x86 emulator accelerator".

If you get:

"Failed to allocate memory", allocate less memory to AVD. 512mb maybe works.

Reply

Rugge January 29, 2013 at 2:06 AM

I had the message:





And I found very useful this post in google groups:

From the command prompt do

echo %JAVA_HOME%

if that variable is not set you will have to set it as well. Make sure it goes to the root of your JDK install and not the bin directory of

your JDK install.

Let me know if that helps.

Simon Mac Donald

Reply

Anonymous January 30, 2013 at 6:13 AM

Thank you ! Very good tutorial, but i get an error-message in that process:

"Then run the create command with your coordinates to create a new project. by me it looks like this:

C:\development\cordova-2.1.0\incubator-cordova-android\bin>create C:\....\...\... com.yourcompany.appname projektname"

After pressing Enter,Terminal prompts an CSCRIPT-Error :" Der Befehl "cscript" ist etweder falsch geschrieben oder konnte nicht

gefunden werden"

Page 10 of 13Clean Code Development - Quality Seal: How to install phoneGap for Android using ...


System 64 Bit / Win7

Whats wrong ?

Reply

Anonymous February 4, 2013 at 10:54 PM

Thank you very much for this useful tutorial. I still get Missing one of the following:




I think Phonegap folder is not residing at correct location. I kept it c:\Development\Phonegap.

Can you plz help me out to place it on right place.

Thank in advance.

Reply

Mickael Pillet February 6, 2013 at 3:24 AM

Hello,

I had the same problems with the following errors :





The first thing i modified, it's the System Path "%JAVA_HOME%" with the current value "%JAVA_HOME%\bin".

Then, i tried to launch the create command, but an error occured as an unknown command. I launched the commands as an

administrator and it worked.

I hope it will be useful if you have the same problems.

Mickael.

Reply

Anonymous February 6, 2013 at 4:18 AM

thnks Ricardo for this great tuto. you save me man : )

Reply

Anonymous February 20, 2013 at 8:37 PM

If you are having trouble with the following error:





Make sure your environment variables ANDROID_HOME, ANT_HOME, and JAVA_HOME don't contain the %'s, and that your

PATH variable DOES contain them. This was my problem.

Thank you very much for the tutorial Ricardo! Perfect!

Reply

Anonymous March 3, 2013 at 10:12 PM

Thank you! you saved my day. Phonegap user guide does not explain clearly as what you did which took me 8 hour to figure out

the error. Thanks again and keep it up.

Reply

ilham March 22, 2013 at 1:02 AM

THANK YOU very much !

I almost drop my tears when I found this post. This post saved my time.

Thanks you. Thank you. Thank you!

Reply

Anonymous April 17, 2013 at 7:13 AM

Very good guide...... Thanks helped alot...



Reply

Shai May 2, 2013 at 5:57 AM

Great guide. So annoying that it is such a pain to set it up on Windows.

Reply

Anonymous May 3, 2013 at 8:16 AM

Simply the best guide on internet for setting up phonegap on windows!

Cheers from INDIA

Reply

Camilo Silva May 7, 2013 at 1:47 PM

This was the BEST tutorial.

I tried for nearly 6 hours until I found this site. I also kept trying Simon's tutorial but didnt quite work. But still it might be helpful for

others:

http://simonmacdonald.blogspot.ca/2012/11/getting-create-command-to-work-on.html

Thanks for your help Ricardo.

Reply

Anonymous July 3, 2013 at 6:35 AM

Bro

first time i write comment for any person. really this is very useful post.

from heart

Reply

Mutago August 18, 2013 at 2:44 PM

I nearly get mad but your tutorial was helpful. anyway my system do not support visualisation so i

have figured out how to run it excellently after my 10 days android installation crazy. In if anyone needs help, i will direct.

my installations is on windows 7

Reply

Anonymous August 24, 2013 at 4:54 AM

I got error while executing "create" command on command prompt. Error as below,

Input Error : There is no script engine for file extension ".js"

Please reply if anything goes wrong.

Reply

Anonymous September 21, 2013 at 5:57 AM

Really helpfull ..thanku :)

Reply

numediaweb December 11, 2013 at 7:22 AM

Thanks for this great tutorial.

You might add as Genymotion to the emulator part; it is way fast than the default one

Reply

J-Nius January 3, 2014 at 8:34 PM

"create" command got error : 'node' is not recognized as an internal or external command.??

Reply

Michael Lo March 27, 2014 at 5:30 AM

You are really good !! Keep on Rock'N Roll good job!!

Reply

Michael Lo March 27, 2014 at 5:33 AM



Newer Post Older PostHome

Subscribe to: Post Comments (Atom)

Enter your comment...

Comment as: Select profile...

Publish Preview

Create a Link

Dear J-Nius:

Reinstall node.js

check this http://nodejs.org/download/

Reply

Links to this post

Picture Window template. Template images by enot-poloskun. Powered by Blogger.



Documents

Article on Phonegap