Creating an app with PhoneGap Build – Part 2: Developing the TRINUG Mobile Site

Creating an app with PhoneGap Build – Part 2: Developing the TRINUG Mobile Site

Background:
For scheduling and promoting TRINUG events, TRINUG uses meetup.com.  Meetup.com allows TRINUG to post events, associate them to venues, and collect rsvp information for meetings.  More importantly, for the purposes of creating a mobile web site, meetup.com exposes an API with all that data.

As I mentioned in the previous post, to create an app with PhoneGap Build it must be developed as a mobile-targeted web site.  PhoneGap Build wraps the site’s files in to an installable package for various mobile platforms.  By having the meetup.com API available, it allows for the creation of a web site that uses meetup.com as its data source.  That is perfect because it eliminates the need to manage event data in multiple data stores.

How does one begin creating a mobile-targeted web site in the first place?  Well, there are several frameworks available including jQuery MobileKendoUISencha Touch, and others.  I decided that since jQuery Mobile is free, open-source, extensively documented, and maybe the most popular mobile framework, I would work in that platform.

File –> New Web Site:
Even though one could technically develop a mobile web site in a simple text editor like notepad, I wanted to use Visual Studio 2010’s HTML markup and jQuery intellisense capabilities.  To do this, simply choose File –> New Web Site within Visual Studio.  From there, I chose the template ‘Empty ASP.NET Web Site’.  Whatever template you choose doesn’t really matter because you’re going to end up deleting everything to do with ASP.NET.  ASP.NET requires server-side processing and since your app will reside on a mobile device with no web server capabilities, no server-side processes can be written unless they are externally supporting your app (like a web service).

Once your web site project is stripped down (remove web.config, any special ASP.NET folders, all .aspx pages, etc), it’s time to start adding jQuery and jQuery Mobile via NuGet.  Be careful however, because the latest version of jQuery Mobile doesn’t necessarily support the latest version of jQuery.  For instance, jQuery Mobile 1.1.0 requires jQuery version 1.6.4 or 1.7.1.  As of this writing, jQuery  Mobile is not officially compatible with the latest version of jQuery which is version 1.7.2.

jQuery Mobile:
Before embarking on this mobile app adventure, I had zero experience with jQuery Mobile.  The best place to get started with jQuery Mobile is the excellent documentation.  Usually when someone suggests reading framework documentation, I don’t get very enthusiastic about it.  However, jQuery Mobile’s documentation is interactive with working samples that make it very useful and easy to follow.

The documentation is great but after going through it, I felt it would be helpful to read about it in greater context.  As it so happened, I ran across an excellent book titled, “jQuery Mobile: Up and Running” by Maximiliano Firtman.  After you peruse the jQuery Mobile documentation, this book is a must-read.  The author ties together jQuery Mobile, HTML5, and sprinkles in some PhoneGap-minded design tips.  My full review of this book is out on Amazon.

I was surprised to see that the path to mastering jQuery Mobile didn’t  require mastering jQuery itself.  If you know some very basic jQuery syntax such as creating functions, selectors, and ajax calls, then jQuery Mobile will be no problem to pick up.

Pulling in Meetup.com Data:
The next piece to the TRINUG mobile web site puzzle was listing the TRINUG event data and details.  Fortunately, with the meetup.com API, pulling down data is as simple as a jQuery ajax call to return JSON data.

$.getJSON('https://api.meetup.com/2/events?
    key=' + apiKey + '&sign=true&group_urlname=TriNUG&page=20&callback=?',
      function (data) {
      // iterate and display meeting info here
});

Putting it all Together:

In the end, I created a single-page jQuery Mobile site.  This single-page app has multiple ‘pages’ in it under one single HTML document.  This is possible thanks to jQuery Mobile’s support of the HTML5 data-* attributes.  For instance, the main ‘page’ is a div within the HTML document containing the header, content, and footer as shown here:

<div id="main" data-role="page" data-theme="a">
<div data-role="content"><img src="Content/images/trinug_headerlogo.png" alt="" />
<ul id="list" data-role="listview" data-filter="false" data-inset="false">
	<li data-role="list-divider">Scheduled Meetings</li>
</ul>
</div>
 <!-- /content -->
<div style="text-align: center;" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
	<li><a class="ui-btn-active ui-state-persist" href="#" data-icon="home" data-transition="none">Home</a></li>
	<li><a href="#twitter" data-icon="twitter" data-transition="none">Twitter</a></li>
	<li><a href="#about" data-icon="info" data-transition="none">About</a></li>
</ul>
</div>
</div>
</div>

The  output of the main page is as follows:

TRINUG mobile main page

TRINUG mobile web site using jQuery  Mobile

The entire source is available out on GitHub.  Once you have your mobile web site created, it’s time to package it up and send it off to PhoneGap Build.  The next post in this series will address that step.

Part I: Background and Introduction
Part II: Developing the TRINUG Mobile Site
Part III: Using PhoneGap Build
Part IV: Testing and Debugging
Part V: Publishing to Google Play
Part VI: Summary

Tags: , Filled Under: Programming Posted on: June 26, 2012

One Comment on “Creating an app with PhoneGap Build – Part 2: Developing the TRINUG Mobile Site”

  • Faysal Shahi

    December 3, 2014 at 11:10 pm

    Hello bro, where is the 3rd post? the link is not working, http://www.justinsaraceno.com/2012/06/creating-with-phonegap-build-part-3/

  • Leave a Reply

    Your email address will not be published. Required fields are marked *