Developing PhoneGap applications on Windows
When I first time checked PhoneGap I immediatelly felt in love with it. That was something just amazing and nearly impossible. Use well known HTML5, CSS and JavaScript to build mobile applications with direct out-of-the-box support for eight different mobile apps platforms? No Java, no Objective-C? Hard to believe!
But it was true… Then I moved to famous Getting Started Guides and actually died! Oh, my f*king goodness! Eclipse? Insane number of SDKs? And then PhoneGap Build has been born and my soul has been saved! :]
Contents
The beginning
With PhoneGap Build you don’t actually need anything out of Getting Started Guides and compiling your mobile application is as easy as 1-2-3. All you need is an Adobe-ID or GitHub account to login to PhoneGap Build. But you don’t even need to be familiar with this systems, as you can upload .zip file containing your PhoneGap application. Just create an account, if you don’t own one. GitHub seems more interesting option, if you have doubts which one to choose.
All you need, is some time — about one-two hours before getting your first mobile app ready. This guide aims to speed some things up, by letting you omit steps, that I had to take over or a common pitfall, on which I wasted some time.
Note: PhoneGap is now actually called Apache Cordova. Use both names, when searching for some resources, examples or files.
PhoneGap / Apache Cordova oficially supports seven platforms: iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada, and Symbian. Where the heck is the eighth one, I’m still talking about? Well… it’s Windows 8 (notice no Mobile in the name). It isn’t of course a mobile platform, only next generation of desktop Windows system. But, isn’t it nice, that with the same pieces of source code and PhoneGap you can actually develop a full-branded Windows 8 application, that follows Metro-style coding guides?
Ah, yes! Did I mention, that since you’re using JavaScript to code your application (PhoneGap only provides native APIs to access things like geolocation, audio, accelerometer, compass etc. on your mobile device), you can unleash power of such libs like jQuery Mobile and many more!
PhoneGap Build
It is usually a good idea to get familiar with the documentation at first. It is quite fast and easy reading.
This environment allows you to upload (or grab from GitHub) PhoneGap application and compile it to all eight supported mobile platforms with just a few clicks. It even offers a nifty tricks like Hydration, which allows testers of your application to be automatically notified of new version available for tests, directly in tested application, with an abillity for quick download of newest application version.
For Android and BlackBerry you’ll need a valid developer keys to sign your application before releasing it to the mobile applications market for each of these platforms. But you’ll be able to compile app without them to test on your device. For Apple iOS you’re unable to even compile application without valid developer key and certificate.
Compiling mobile application with PhoneGap Build is really as easy as 1-2-3. Access PhoneGap Build (actually your apps list) at .zip file containing your application, verify some things, set some settings, do a few more clicks, wait a few minutes and… there you go with a links for your application compiled for each platform (with above exception about developer keys).
What’s next? Upload to your device (some platforms offers download-and-install directly from PhoneGap Build), test, correct, upload modified version (PhoneGap Build does not hold history of changes — it is not a repository — each upload will wipe out previous version of your code!) and re-compile.
My first mobile application
The Getting Started guide for PhoneGap Build couldn’t be written easier and if you don’t get anything from it, you should seriously thing about dropping the idea of mobile applications development! :]
But it can be even easier then written in there. For actually checking the wonderful power of PhoneGap application and PhoneGap Build, simply use phonegap-start by alunny, download .zip file from that repo, upload it to PhoneGap Build and follow above mentioned steps.
Note, that although this demo app has some demo code, it is either fucked-up or I don’t know, how to get it to run. Clicking on the buttons brings no effect on either Ripple Emulator (see below) and on actual device (Galaxy Nexus). But it is, even so, worth exploring, as it easily shows how to setup basic app info, change icon or use a splash screen.
Consult above mentioned Getting Started guide, if you want to change some things (like app’s name, author etc.). Then start coding!
Some other demos
To speed up some of your play, I’ve extracted a few famous demo apps. You can grab them from this folder. There are .zip files, ready to be put to PhoneGap Build along with .apk files — versions compiled for Android system.
What you’ll find:
1. HelloWorldAlunny — discussed above.
2. BatteryStatus — small example on how to graphically visualize battery charge level.
3. HelloWorldPhoneGap — similar to Alunny’s version, but much cleaner and better bootstrap for any app.
4. KitchenSink — this was looking most promising as it uses jQuery Mobile. Only “was”. Although it run quite nice on Ripple Emulator, it turned out to be one big piece of shit. It was awfully slow on my Google Nexus and actually everything, except geolocation, failed in this demo.
Note, that compiling these four apps for six different mobile platforms (except iOS, which failed for above mentioned reasons) took me three minutes on PhoneGap Build! That’s less then one minute for each app. Outstanding performane, as for me!
Testing and debugging on Windows
If you don’t have a Google Chrome browser, go and get it. Sorry, no other browsers are supported (at least at that cool level)!
Since your developing in HTML 5, CSS and JavaScript, there is nearly no problem with testing your mobile app directly in a web browser. We only need to take care for PhoneGap support in pure Windows.
If you’re mobile application is web-accessible (I hope, not!), you can use PhoneGap Emulator. Simply call URL similar to this:
[code language=”xml”]
http://emulate.phonegap.com?url=acrid.pl
[/code]
But, if you need to test your locally stored mobile application, you need to do a few more tricks.
First, install Chrome’s extension called Ripple Emulator. Then, get to extensions configuration and mark second checkbox, next to Ripple Emulator, to allow it to work with local files. Finally, shutdown all copies of Chrome and start it again with chrome.exe -allow-file-access-from-files (consider making yourself a link as you will probably be using this often).
Now, you can run Ripple Emulator, by clicking a button to the right of your address bar, by using a context menu or by adding ?enableripple=cordova to your URL (even if it references file, of course).
Some important things to note:
1. If you use PhoneGap Emulator, which is build on top of Ripple Emulator, with Ripple extension installed, it will fall-back emulation process to the extension.
2. Ripple Emulator is an emulator only. Although powerful and flexible, yet still only an emulator. You will need an actuall device to do some more extensive tests. Don’t make yourself a lame coder by releasing not full tested application to the market, OK?
3. Ripple Emulator is a mobile application emulator, not a mobile website tester. If you run GMail, Google Calendar or any other website, that has mobile (light) version, inside Ripple Emulator, you’ll still see normal (heavy) version of that page, not mobile one.
Future reference
These two guides covers the entire story of creating a PhoneGap application and brings a lot of useful tips. So, if this is your first contact with PhoneGap, be prepared to be busted with a large amount of information, you don’t know yet. Yes, there is a lot to learn here.