Over the past few days I've had a chance to play a bit with PhoneGap. PhoneGap is a free platform that allows you to use HTML to create mobile native applications for Android, iOS, Blackberry, webOS, Symbian, and Windows 7 (soon). This blog entry will not detail how to work with PhoneGap since they provide excellent documentation already. Rather I'm going to focus on my experience in getting it running.
Getting Started
My experience began with the Getting Started page where - I have to admit - I had massive brain fart. The page talks about iOS when you first land. I thought - at first - that was the only platform they were documenting. Believe it or not it never occurred to me to hover over and click on the Android link. Yeah it's pretty obvious to me now but at the time I just assumed they weren't providing a guide for non-iOS devices.
The guide recommends installing Eclipse Classic. I wanted to use ColdFusion Builder 2 of course. Following the directions I ran into an issue when I was asked to install ADT. I love that Eclipse plugins can so easily tell you what they are missing yet provide so little help in actually getting you to the plugin. Mike Henke helped me out by suggesting I add http://download.eclipse.org/releases/helios/ as an update site. I did that and filtered on GEF once the resources loaded. The resource ADT was complaining about can be fulfilled by adding Graphical Editing Framework GEF SDK
Obvious, right? Install that, then come back and get ADT added. Once done I was able to proceed with the Getting Started guide.
The guide has a few steps of the sort "Copy this file here" and "Modify this line so and so." They all work fine. But whenever I read documentation like this I always get a bit worried. I feel like the guy on the disaster flick who has to land the 747 while air traffic control tells me what buttons and levers to push. Don't get me wrong - it was easy enough to follow (* see the note on the small typo following) but when I don't know why I'm doing something I'm always concerned it will break. Luckily everything worked perfectly fine. The only small issue is that you are asked to copy phonegap.js and the file is actually phonegap.0.9.4.js. Easy enough to figure out.
Running
If you've already set up the Android SDK and created a virtual device, then running your application via Eclipse is pretty trivial. Unfortunately, you now get to experience the massive fail that is the Android simulator. Don't get me wrong - I love me some Android. I love that Android's SDK isn't Mac only like iOS. But the performance of their simulator mimics my old 386 PC from 1991. It's horrible and there is no excuse for it. The last time I googled on the topic I mainly found people saying "Yep, it's slow, deal with it." Anyway, I think my first run took about 4 minutes to actually show up in the simulator. Ticked off - I killed my current VM and made a new one. This time a run took about two minutes. Better, but a) I have no idea why and b) two minutes is hella long to run something.
Luckily there is an alternative. If you have a real Android phone, you can push to it if you have USB debugging turned on. This ran extremely fast. I'd say about 3-5 seconds. What was tricky - for me - was figuring out how to tell Eclipse to go to a real device. When you look at run configurations, you see this:
As you can see, we have two choices - Manual and Automatic. Automatic listed all my VMs. To me, nothing seemed obvious as "real" hardware. On a whim I clicked "Manual" and then run and I saw my device...
And bam - that's it. I don't yet know how to make my Eclipse run button "just do that", but I don't mind that. As I said, from me wanting to run to seeing it on my phone was approximately 5 seconds. That's epic good in my mind.
Testing
So - I got me some HTML on my phone. Cool! But now I wanted to see what I could actually do with the HTML. In my first test I wanted to see if the cross-domain XHR restrictions were in place. This is the security block that prevents you from requesting a JSON packet from some other domain. Here's the code I used:
<!DOCTYPE html>
<html>
<head>
<title>List Examples - Nesting</title>
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.js"></script>
<script type="text/javascript" src="jquerymobile/jquery-1.5.1.min.js"></script>
<script>
$(document).ready(function() {
$("#testBtn").click(function() {
$("#testDiv").append("Beginning test<p>");
$.getJSON("http://groups.adobe.com/api/group.cfc?method=getgroup&id=113",{}, function(res,code) {
$("#testDiv").append("Result = "+res.NAME);
});
});
});
</script>
</head>
<body>
<input type="button" id="testBtn" value="TEST" style="width:100%;height:100px;">
<div id="testDiv"></div>
</body>
</html>
I honestly didn't know what to expect here. My understanding is that PhoneGap is essentially wrapping a browser, and browser's have restrictions. But luckily this worked perfectly. Immediately it occurred to me - this is just like building an HTML based Adobe AIR application, and indeed, it turned out to be closer to that then I expected. As you may know, when writing HTML-based AIR apps, your JavaScript can be extended using new built in objects that provide access to things like the file system, web camera, etc. PhoneGap provides a similar system. So for example, I can introspect the device:
$("#testDiv").append("Phone is "+device.name +" and is a "+device.platform+"<br/>");
And I can search the phone's contact system:
var fields = ["displayName"];
var options = new ContactFindOptions();
options.filter="Adam";
navigator.service.contacts.find(fields, contactSuccess, contactError,options);
Looking at PhoneGap's API, it looks like you have access to basically everything. There seem to be many caveats (ie, this feature does this on iPhone and does this on Android), but in general it feels like you can build something with pretty deep integration.
Finally, I tested jQuery Mobile. I simply copied one of the samples from my presentation and ran it. It worked perfectly. No big surprise here, but it was nice to see.
All in all, I'm pretty impressed with what I see so far. What's even cooler is that they are looking to make this even simpler. The team is currently running a beta called PhoneGap Build, where basically all you do is upload your code. I haven't tried it yet (although I did sign up for the beta and got access) as I wanted to try things the manual way, but this feature could be absolute killer for them. I could easily see paying a yearly subscription for such a service. According to their FAQ the service will be free for OS projects and they will be announcing pricing for commercial apps. I really hope they announce that soon. I can think of a certain other service I liked quite a bit that took forever to decide on a price and once they did - it was far too high.
Sermon
You've been warned, the "review" part of this blog entry is done. ;) I find it sad that some people are so opposed to tools like PhoneGap. There seems to be an attitude that if you make it easy for people to create, they will only create crap. That's truly sad. It's elitist. It's unfair. And it prevents otherwise creative people from sharing their vision with the rest of the world. Don't get me wrong - I appreciate the fact that programming is a science. I can appreciate the skill it takes to create something "important" like, oh, Angry Birds. But not every application needs the skills of a hard core Objective-C coder. Opening the gates and allowing more people to create will result in more crap. I don't deny that. But I'd take a thousand more fart apps if it allows the creation of one gem. I think it's great that organizations like PhoneGap and companies like Adobe are making it easier to build on multiple platforms. I haven't felt this way since I first ran Mosaic and used ed on a Sparc machine to edit an HTML file!