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:
- download and install Java- add to path [C:\Program Files\Java\jdk1.7.0_45\bin]
- add new system var JAVA_HOME [C:\Program Files\Java\jdk1.7.0_51]
- download and install ANT – add to path and be sure to RESTART [C:\ANT\bin]
- download and install ADT [https://developer.android.com/tools/help/adt.html]
- download and update the Android SDK from tools [pray]
- create a new Android VM for emulation [pray harder]
- add references to Android tools to PATH [C:\Program Files\ADT\sdk\platform-tools;C:\Program Files\ADT\sdk\tools;]
- download and install node.js [https://nodejs.org/]
- Install PhoneGap via NPM [npm phonegap]
- Install Ripple emulator via NPM [npm ripple]
- setup new PhoneGap project
- build project
- emulate via ripple
- Test, test, test…
- 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/
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/
To test on a real mobile device, just install the PhoneGap Mobile App from http://app.phonegap.com/
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 :)