The Personal and Professional Blog for Bennington V Purcell

Phonegap has been talked about a lot lately. It is an exciting new move for web developers into the mobile space.

The general gist

The general gist is this. Phonegap is a alternative browser framework app wrapped up in some special sauce for mobile operating systems. It allows you to build native applications for a bunch of OS’s with one code base – HTML5 and Javascript.

What you do is start with the framework and have it access your HTML code. It then renders it and adds the extra functions that it has access to as a native application. This means you can have access to camera features, file management features, accelerometer, GPS etc that you can’t access via the default browsers.

What you do with that

AS a developer it should be pretty self explanatory. You can make a REAL iPhone app in the languages that you are comfortable with! Build a backend in Ruby on Rails or PHP or ASP (if you have too) and then use it on any of the support operating systems. The my first use of the PhoneGap was for a new application I am launching with the Beta name “LocAware”. It started as a website with a mobile version, but too add too the offerings I have created an iPhone App.

The iPhone app is native. It then loads simple HTML5 webpages and Javascript does the local processing.

You can see the pages start off pretty much empty.

But then the javascript loads the JSON and fills in the page.

Here you can see the submission forms doing the same thing with the dynamic data.

This part is fairly simple. You load up the page and then make the requests and process them in javascript. I used jQuery to simplify handling the JSON and page rewriting. My website responds to JSON requests with the required data. It looks something like

([{
    "id": "1",
    "user_id": "1",
    "name": "RI Places",
    "desc": "Thasdfasdfasdfasdfese are my places in Providence.  I am going to mark all the places i like."
},
{
    "id": "2",
    "user_id": "2",
    "name": "Benns Worldwide Places",
    "desc": "These are the worldwide places i have visited"
},
{
    "id": "3",
    "user_id": "1",
    "name": "Vermont School",
    "desc": "These are the vermont School"
}]);

Then we process that into the HTML like this.

function getPublicListing() {
	var full_url = serviceURL + 'get_public?jsoncallback=?';

	$.getJSON(full_url,
	{
	    format: "jsonp"
	  },

	 function(data) {
		public_listing = data;

		$.each(public_listing, function(index, public_listing) {

			$('#public_listings').append('<li><a class="noeffect" href="applet.html?jsoncallback=?&id=' + public_listing.url + '"><span class="number">' + (index + 1) + '</span><span class="name">' + public_listing.name + '</span><span class="arrow"></span></a></li>');

		});

	});
}

Once we have this data we can really start moving. Javascript is an incredible tool and you really have to push yourself to use it successfully here. Parsing lots and lots of JSON can make the app seems to be full integrated, data is both available and usable. For things like directory listings, displaying data this is plenty. But you can get into some trouble when you want to make the data bi-directional. Submitting from Phonegap seems to be limited too AJAX and as you probably know you cannot always make AJAX calls cross domain. You have to do it in the JSONP methods.

I am going to release the app within the next few weeks for public usage. We want to start giving Location Aware app too the public to start recording locations for use in anything from Public service issues, pot holes, etc.

The data will then be available for Public Service and municipalities to work from.

Visit LocAware. Also if you have a better name for the application post it in the comments.