glasses-logo

<dominikgorecki> Web development on the Microsoft Stack <dominikgorecki>

Installing Cordova\PhoneGap for Android on Windows (a suppliment)

Difference between Cordova and PhoneGap

Phonegap LogoWhen my friend told me about the PhoneGap framework, I was excited to test it out. So I went to their website, clicked on getting started documentation (for android), and began to read the instructions. And there it was. Install eclipse (check), install android-sdk (check), install ADT Plugin (check), and install Cordova. “Wait a second,” I said to myself, “what about PhoneGap?”Clearly there is a PhoneGap download (which I downloaded), and a Cordova download (which I also downloaded). Do I need both? What’s going on here?

As it turns out–no, you don’t need both.

So just to save you some time and googling, PhoneGap is a special implementation of Cordova, which is essentially identical for now. Skip to Step 1 if you don’t want to be bored.

Here is the gist (as I understood it): Adobe donated the codebase of PhoneGap to Apache, which then Christined it Cordova, which Adobe used in implementing PhoneGap. Circular? Yes. Why? So that PhoneGap get reap the benefits of open source, while at the same time having the ability to be different–have unique features like Adobe specific functionality and integration (I’m guessing flex? Air? Whatever…). Any bugs, improvements of Cordova will automatically be implemented in PhoneGap; open web at work (for large, super-wealth corporations).

So what should you use? I don’t think this is a life-altering decision by any means, but choosing one will give you a headache. My instinct was to use Apache’s Cordova just in case Adobe decided to bloat PhoneGap with a bunch of unneccessary additions in the future. However, this proved cumbersome since only the src was available for download. It’s all java so it should compile easily into .jar files on any machine, but save yourself the trouble and download PhoneGap which comes with all the jar files. Unless you plan to make mods  to the actual framework, this should be fine.

Step 1 – Download PhoneGap (not Cordova)

Alright, here is where I went wrong. I downloaded cordova and extracted only the android directory for use. This didn’t work because I didn’t compile Cordova, and I didn’t have cordova.jar nor js in the root folder. Instead of going through the trouble to compile it, I just went back, and used PhoneGap.

I extracted PhoneGap (all of it) into a C:\eclipse\PhoneGap\ directory, but it’s your choice of where you want to do that. I recommend extracting it into a directory that doesn’t use dashes (“-”) nor spaces. This is my own suggestions based on past experience with scripts, and bat files as well as some reading about cordova’s known issues.

Step 2 – Check for (properly) Installed Software

As the guide suggests, you already have the following installed:

  1. JDK (Java Dev Kit)
  2. Eclipse
  3. Android SDK and ADT Plugin (for eclipse)

But does it all work?

The simple test: Spark up cmd prompt and type in the following to ensure that you don’t get a “… not recognized as an internal or external command” error:

javac
ant
adb
android

If for any of the above you get the “… not recognized as an internal or external command” error, you’ll need to fix that.

2.1 “javac” Didn’t work ?

In the command prompt type in, “cd %JAVA_HOME%.”  If the result come out as, “The system cannot find the path specified,” then this means that you don’t have the JAVA_HOME variable set up. If on the other hand the directory does change, pay attention to where it goes. Your directory path is probably “JRE#” instead of “JDK#.#.#.” If, however, you find yourself in the JDK directory, then skip 2.1.1 and go directly to 2.1.2

2.1.1 You either need to add the JAVA_HOME variable or modify it. So open up System in control panel (Right click on “My Computer” or “Computer” on your desktop or in windows explorer) and click on Advanced System Settings in the left most column (item 1 in the figure below), then Environment variables… (item 2), and then ither find the JAVA_HOME variable and edit it (item 3) or create a new variable with that name (item 4). In the end, make sure JAVA_HOME points to your JDK folder. Usually you can find it under “C:\Program Files\Java\jdk1.#.#“.

Windows 7 System Variables Explained

Figure 1: Editing or creating system variables.

2.1.2 Once you have JAVA_HOME pointing to the JDK directory, next ensure that “%JAVA_HOME%\lib” exists in the Path system variable: find the Path system variable, click edit, copy contents into notepad (or equivalent) and read through it and add the above if necessary. Ensure that there is no reference to the JRE (JDK should have all you need). Click OK, Click OK, and open up a new command line and test out javac and cd %JAVA_HOME% to ensure they both work.

2.2 “ant” Didn’t Work?

If you have eclipse, you most likely have ant installed but the directory is not listed in the Path environment variable. So first find the ant folder by going into your eclipse plugin folder. For example, for me it’s “C:\eclipse\eclipse\plugins.” In this folder you should find something like “org.apache.ant_#.#.#.v#” copy that folder location into clipboard and add a %ANT_HOME% variable as explained in 2.1.1 and add the “%ANT_HOME%\lib” path to the Path Environment variable as explained in 2.1.2 for the JDK. Use Figure 1 as a guide.

Click OK on the Environment Variables window and the System Properties window, and then start a new command prompt to test out the ant command.

2.3 and 2.4

The documentation explains this a little bit better. If adb or android didn’t work, then you’re probably missing the Android SDK platform-tools and tools directory from the Path environment variable. Use 2.1.2 as an example and ensure that the tools and the platform-tools directory exists in the path var. For me it is “C:\eclipse\android-sdks\tools;C:\eclipse\android-sdks\platform-tools;” but the PhoneGap guide had “C:\Development\android-sdk-windows\platform-tools;C:\Development\android-sdk-windows\tools;” This will entirely depend on where you installed the Android SDK.

Step 3 – Check that it works

Go into the android\bin directory of PhoneGap in the command prompt (for me it is, “C:\eclipse\PhoneGap\lib\android“) and run:

create C:\direcotory\name com.mycompany.name name

Ensure that you do not use any spaces or dashes in the directory, package name, nor project name.

From this point on, the Getting Started with Android docs are OK.

Also, check out out Simon Mac Donald’s excellent article (similar to mine) on his blog: Getting the create Command to Work on PhoneGap 2.2.0 Android

References

One Response to “Installing Cordova\PhoneGap for Android on Windows (a suppliment)”

  1. Upen says:

    Hello, I am a starter in Phonegap and following the steps as per your guideline. But i am getting eroor in 2.2 ANT problem

    I created the variable ANT_HOME with path C:\Program Files\eclipse\plugins\org.apache.ant_1.8.4.v201303080030
    also added %ANT_HOME%\lib to path variable

    Double checked above steps, still it is showing “not recognized as an internal or external command”
    operable program or batch file.

    Please have a look and feed me back .
    Regrads

Leave a Reply

Open Menu Button