PhoneGap Jumpstart

I’ve always found that getting started with PhoneGap if you hadn’t used it before (and sometimes even if you have) to be an exercise in frustration which even when it all goes well… takes some time and dedication. For example…

Here are the steps I take when setting up on a new Windows environment for Android:

  1. download and install Java- add to path [C:\Program Files\Java\jdk1.7.0_45\bin]
  2. add new system var JAVA_HOME [C:\Program Files\Java\jdk1.7.0_51]
  3. download and install ANT – add to path and be sure to RESTART [C:\ANT\bin]
  4. download and install ADT [https://developer.android.com/tools/help/adt.html]
  5. download and update the Android SDK from tools [pray]
  6. create a new Android VM for emulation [pray harder]
  7. add references to Android tools to PATH [C:\Program Files\ADT\sdk\platform-tools;C:\Program Files\ADT\sdk\tools;]
  8. download and install node.js [https://nodejs.org/]
  9. Install PhoneGap via NPM [npm phonegap]
  10. Install Ripple emulator via NPM [npm ripple]
  11. setup new PhoneGap project
  12. build project
  13. emulate via ripple
  14. Test, test, test…
  15. Build using command line or PhoneGap Build services

I’m probably missing a few steps – and if any one of these configurations if off… good luck fixing it.

You have to admit… that is a LOT for a newcomer (I teach PhoneGap at least once a year – it is seriously a lot for newcomers to deal with).

Well now we have some really nice tools to make the whole process much, much nicer! There is the PhoneGap Desktop Application for starters. It allows the creation and management of PhoneGap projects from a simple installed application interface. Grab it from http://app.phonegap.com/

PhoneGap Desktop Application
PhoneGap Desktop Application

While the application currently does not support managing platforms or plugins – if you are targeting PhoneGap Build at the end… this really doesn’t matter. This one installation covers steps 1-12 above. No kidding.

Notice the server address that is displayed at the bottom? We will use this later to test our application using the dedicated mobile app.

Once a new project is set up… we can start working on the layout and design as well as functionality that is not specific to hardware. I do this with Brackets and Chrome. Get Brackets at http://brackets.io/

Testing with Brackets and Chrome
Testing with Brackets and Chrome

As you see above, editing the HTML, JavaScript, and CSS within Brackets is pretty straightforward. That is the focus of this IDE and it does it very well. You can also launch a live preview from Brackets for testing functionality and layout in a browser like Chrome. As displayed above, using the mobile device simulation aspect of Chrome is great for layout – while access to the other developer tools like the console makes debugging and problem solving and immediately accessible task.

To test on a real mobile device, just install the PhoneGap Mobile App from http://app.phonegap.com/

PhoneGap Mobile App
PhoneGap Mobile App

Once installed and running on the same wireless network as the desktop app, you can fire up the app on mobile and type in the server address on display within the desktop app to test your PhoneGap application on a real device. Much nicer than any crummy emulator and you have the full functionality which browser testing lacks. That takes care of steps 13-14.

Once ready to compile your application for various mobile platforms, it doesn’t get much easier than using PhoneGap Build. Access PhoneGap Build from https://build.phonegap.com/

These are a great set of tools that make the whole process much, much easier to get started with :)