Follow treslines by email clicking Here!

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


Base requirements before starting

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)

Pitfall CPU Visualization

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.

Downloading Apache Ant and setting the ANT_HOME variable

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:












Downloading JAVA JDK and setting the JAVA_HOME variable

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.


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.

Downloading and installing Android SDK

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;

Downloading Eclipse Classic and installing the Android plugin

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 take several minutes.




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


Download and install PhoneGap Apache Cordova

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.


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:


Pitfalls while creating projects

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.



Loading created project into Eclipse

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.



One more thing! ;-) Creating an AVD (Android Virtual Device)

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



Launching your project

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 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! 





36 comments:

  1. 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

    ReplyDelete
  2. 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

    ReplyDelete
  3. 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.

    ReplyDelete
  4. 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

    ReplyDelete
  5. 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!

    ReplyDelete
  6. 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

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

      Delete
  7. i did everything here and I still get Missing one of the following:
    JDK: http://java.oracle.com
    Android SDK: http://developer.android.com
    Apache ant: http://ant.apache.org

    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 :-)

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

    ReplyDelete
  9. This comment has been removed by the author.

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

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

    ReplyDelete
  12. +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.

    ReplyDelete
  13. I had the message:

    Missing one of the following:
    JDK: http://java.oracle.com
    Android SDK: http://developer.android.com
    Apache ant: http://ant.apache.org

    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

    ReplyDelete
  14. 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"

    System 64 Bit / Win7

    Whats wrong ?

    ReplyDelete
  15. Thank you very much for this useful tutorial. I still get Missing one of the following:
    JDK: http://java.oracle.com
    Android SDK: http://developer.android.com
    Apache ant: http://ant.apache.org

    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.

    ReplyDelete
  16. Hello,

    I had the same problems with the following errors :

    Missing one of the following:
    JDK: http://java.oracle.com
    Android SDK: http://developer.android.com
    Apache ant: http://ant.apache.org

    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.

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

    ReplyDelete
  18. If you are having trouble with the following error:

    Missing one of the following:
    JDK: http://java.oracle.com
    Android SDK: http://developer.android.com
    Apache ant: http://ant.apache.org

    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!

    ReplyDelete
  19. 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.

    ReplyDelete
  20. 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!

    ReplyDelete
  21. Very good guide...... Thanks helped alot...

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

    ReplyDelete
  23. Simply the best guide on internet for setting up phonegap on windows!
    Cheers from INDIA

    ReplyDelete
  24. 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.

    ReplyDelete
  25. Bro
    first time i write comment for any person. really this is very useful post.
    from heart

    ReplyDelete
  26. 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

    ReplyDelete
  27. 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.

    ReplyDelete
  28. Really helpfull ..thanku :)

    ReplyDelete
  29. Thanks for this great tutorial.

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

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

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

    ReplyDelete
  32. Dear J-Nius:

    Reinstall node.js

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

    ReplyDelete
  33. awesome tutorial,
    thank you very much, it's helpful to me and i learn much from you
    :-)

    ReplyDelete