How to locally build your first PhoneGap app for Android on Windows

By SuperUser Account on 12/6/2013

This post can save you a lot of time because it consolidates information from several websites in one place.  Also, I found the PhoneGap Getting Started and Android Platform Guides to be out-of-date as of today, so this should help you avoid the wild goose chases.
A couple of days ago I managed to get my PhoneGap hello world app for Android to run on my Galaxy S4.  It actually took several hours to get everything down and installed and working on my new laptop.  First, be aware that there are two very different ways to build apps with PhoneGap: 1) on your computer on top of the native SDK and IDE E.G. the Android Developer Kit with Eclipse or X-Code for IOS. or 2) PhoneGap now provides a build server athttps://build.phonegap.com/ where your locally installed PhoneGap tools can be used to upload your source code and compile it there for multiple mobile platforms. If you choose to go strictly with option 2, then you really won’t need the native platform SDK and IDE installed locally.  I’ve not tried the build server yet, but I’ll blog about it later after I do. I don’t own a Mac with X-Code so the build server is going to be the best way for me to deploy the apps I build to IOS and the other mobile platforms such as Windows Phone, Kindle, Blackberry etc. If the build server works well, then PhoneGap could literally be the mobile cross-platform-utopia we’ve all be waiting for.  OK, enough chatter, I’ll summarize exactly how I setup my Windows computer to build my PhoneGap Android apps locally. Realize this information is current as of today and I already see forks in this road at developer.android.com with their new Android Studio coming soon.

  1. If you don’t have the latest JAVA SDK download it from here and then install it:http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html
  2. Download the latest Android ADT herehttp://developer.android.com/sdk/index.html and then unzip it under in a folder you create at c:\program files\android:
  3. Open your Windows operating system environment variables from “Control Panel\System and Security\System”. Click the “Advanced system settings” link on the left and then create a system environment variable named ANDROID_HOME which points to wherever you unzipped the Android ADT. In my case it was here: “C:\Program Files\Android\SDK\adt-bundle-windows-x86_64-20131030″
  4. Next append the following to your Path environment variable: “;%ANDROID_HOME%\sdk\platform-tools;%ANDROID_HOME%\sdk\tools;%ANDROID_HOME%\eclipse\plugins\org.apache.ant_1.8.3.v201301120609\bin”
  5. Test your Android build environment on the command line with the following commands: java, ant, adb. The java and adb commands should display their usage help. The ant command should display nothing more than “Buildfile: build.xml does not exist! Build failed”. If you don’t get output from all three commands, there’s probably an issue with the path.Enable development on your Android phone by going to Settings, System, About Phone.
  6. On the phone tap the build number field several times until it says “you are now a developer”.
  7. The “Developer Options” should now be visible in Settings.
  8. Tap “Developer Options” and enable “USB Debugging”.
  9. Plug your phone into your computer with the USB cable. Your computer should prompt you to install your phone USB drivers and software if you have not already done so. Let it install everything and then re-boot your computer for good measure. I usually have issues getting the computer and the phone to connect properly so you may have to unplug the USB cable and plug it back in a couple of times before it connects properly. You should see the USB icon appear on the notification bar of the phone. You’ll find out for sure if you have the USB driver working properly once you try to deploy to the phone below.
  10. Since PhoneGap depends on the Android Developer Tools (ADT), you should first test your ADT build environment by building a HelloWorld Android app .
  11. Make a build workspace folder here: “C:\src\android\ADT”
  12. Run Eclipse “C:\Program Files\Android\SDK\adt-bundle-windows-x86_64-20131030\eclipse\eclipse.exe” and set “C:\src\android\ADT” as the workspace when Eclipse prompts for it.
  13. Make sure the “SDK Location” setting under Window, Preferences in Eclipse is pointed to to the Android SDK home directory you created at “C:\program files\Android\SDK\adt-bundle-windows-x86_64-20131030\sdk”
  14. Make a new Android project by selecting “File, New Android Application Project”
  15. Name the project “HelloWorld” and accept all the default project settings. Eclipse should then create a new Android App Project named “HelloWorld” in your ADT workspace.
  16. Click “Run, Run Configurations” and then click the “Always prompt to pick device” option.
  17. Click the “Run” button on the Run Configurations dialog box. The Android Developer Tools Device Manager dialog box should open and show you the list of devices connected to your computer. If you do not see your phone listed, try the unplug/plugin dance with the phone until it appears in the list. If you still don’t see your phone appear in the list, then you probably have a USB driver issue. First try dropping down the USB options on your phone’s notification bar and changing the options there.  If you still don’t see your phone in the list, then you might try searching for a USB driver for your phone at http://developer.android.com or go to the phone’s manufacturer website and look there.
  18. Once you see your phone listed in the Android Device Manager dialog box, select your phone in and continue. The Android app should build and then run on your phone. At this point you have confirmed your Android native app build environment is working properly.
  19. Next you need to download and install Node.js from: http://nodejs.org. PhoneGap depends on Node.js also.
  20. After you install Node.js test it by typing “node” on the command line. You should see the node command prompt “>” . Type ctl+c twice to quit.
  21. Now go to http://phonegap.com and Install PhoneGap. As of today, the getting started page at PhoneGap tells you to install the Cordova command line interface. You don’t need to do that. Also, be wary of the Andoid Platform Guide since it explains what we did above setting up ADT and then follows up telling you to run Cordova on the command line. That won’t work.
  22. Next, run node on the command line and when the node prompt appears type this: “npm install -g phonegap”. Exit node by typing ctl+c twice.  This hooks PhoneGap and node.js together.
  23. Create a PhoneGap workspace folder here: “C:\src\Android\PhoneGap”
  24. At the windows command prompt go to that workspace “cd C:\src\Android\PhoneGap”.
  25. Run this command: “phonegap create hello com.example.hello HelloWorld” This command will create a new PhoneGap project in that workspace in a folder named “hello”.
  26. Now cd to the hello directory and run this command “phonegap local build android -V”. This is the moment of truth. If anything is off this command will fail.
  27. Next, make sure your phone is plugged into your computer and the USB icon is displayed in the phone’s notification bar. I had to also set my USB connection to connect as camera on my Samusumb Galaxy S4.
  28. Now run this on the windows command line: “phonegap run android -d”. If everything is working perfectly the app will compile, load onto your phone and run!
  29. If the phonegap run command skips deploying to your device and begins to attempt to deploy to the Android emulator press ctl-c, unless the emulator is set up properly on your computer. It runs too slow to use it on mine. You may have to do the USB cable unplug / plugin dance until your phone’s device drivers load properly and try the run command again.

So there you have it, your first locally built Android PhoneGap app.  Please let me know if you find where I need to update this information.