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

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