Monthly Archives: June 2012

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

Creating an app with PhoneGap Build – Part 1: Background and Introduction

This is the first of a multi-part series on how I developed and deployed an Android app for the Triangle .NET User Group (TRINUG).  I’m not an Android developer and haven’t touched Java in over 10 years.  What was my solution?  It was a mobile-targeted HTML5 web site turned in to a native app using PhoneGap Build.

The PhoneGap Build ‘Getting Started’ document serves as a great introduction to what PhoneGap Build does:

“PhoneGap Build allows you to create cross-platform mobile apps based on HTML, CSS, and JavaScript through a simple web interface. We take care of all the packaging and compilation, and you get some mobile apps back in a matter of minutes.”

The benefit of PhoneGap Build is instead of writing .NET, Java, or whatever language apps are written in for your targeted device, you develop your app’s content using HTML, CSS and JavaScript.  PhoneGap is a true time-saver if you need to produce an app but are unfamiliar with the programming language of the platform you’re targeting.

PhoneGap Build is a service that allows the developer of a mobile-based web site to zip up the site’s assets, upload them, and then return installable app files for various mobile platforms.  This allows a single code base to run on iOS, Android, Windows Phone, etc.  It is in effect putting a wrapper around your web site to make it installable to the various mobile platforms it supports.

 

The trade-off with PhoneGap Build is since you’re not developing your app targeted to any specific development platform, you don’t get access to unique the native features each platform provides.  The biggest and most clear example of this is you don’t get use of the native device’s menu system from within your app.  However, there is a PhoneGap API available via JavaScript which exposes access to native phone features such as notifications, camera, and so on.  For my purposes, I didn’t use the PhoneGap API in version 1 of my app, but plan to in the future.

I thought it would be best to break up the story of my experience in a series of blog posts outlining the logical steps of the development process.  I’ll start with developing the site and describe the design considerations I had to contend with.  Next, I’ll detail the PhoneGap Build process which included getting my source code up to the build service and obtaining the desired output.  Testing and debugging is very possible, and even powerful when using PhoneGap Build so I’ll be covering that.  I’ll then detail my experiences with submitting the app to the Google Play marketplace.  Finally, I’ll summarize my thoughts on the PhoneGap Build process and discuss what I believe to be the future of this approach to app development.  I’ve put together an outline of this series of posts:

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 25, 2012

Back to blogging & why that’s important

This isn’t my first blog, if you do a Google search of my name you’ll quickly see that.  My first blog resides on the prestigious weblogs.asp.net domain and I maintained it from 2008-2009.  Looking back at my old posts is a bit comical and amazing at the same time because you can see how much web technology has evolved in the past few short years.

My most popular post was a tutorial on using the ASP.NET Ajax Control Toolkit’s reorder list control.  That post still gets comments and questions to this day.  However, today I’d rarely consider using the Ajax Control Toolkit because I’ve learned what it really is (or what it really isn’t).  Frankly, I’m a bit surprised the toolkit is still maintained.

Don’t get me wrong, it was very innovative when it came out and addressed the problems it aimed to solve.  However, with evolved scripting libraries such as jQuery and a much better understanding of HTTP by developers in general, there are better ways to accomplish what the toolkit did.  I see that as huge progress in the modern development space.

Until recent times, many .NET developers, including myself, could afford to place a shroud of abstraction over the web and never peek inside what was really happening during those page postbacks or ‘ajax’ toolkit actions.  Tooling has evolved rapidly, mobile platforms are in the forefront, and UX response time is paramount.

So I have a new domain name for my blog, justinsaraceno.com.  Even though I was still welcome to post to weblogs.asp.net, I didn’t want to in any way limit my audience.  Of course I still identify myself as a .NET developer.  My career has taken me through the evolution of .NET and there’s no doubt that it’s an exceptional technology stack.  But now I’m dabbling in to other technologies like PhoneGap, HTML5, WP7, Azure, and several others.  Many of those technologies relate to or are compatible with .NET, which in itself is a testament to how well the .NET experience has evolved.  However, having a platform-agnostic endpoint to showcase technology I’m interested in seems fitting for the the way the web is evolving.

You may be asking, why did you stop blogging and why is it important to start again?  Well, when Twitter became popular a few years back it was no coincidence that technical blogging seemed to slow down.  However, many of the great things people are doing these days need more than 140 characters to explain or showcase. We’re seeing a resurgance of blogging. Not only that, but the quality of technical blog posts is up in my opinion, perhaps fuled in part by having Twitter as an additional outlet.  The exciting technologies I’m using at work, my involvement in TRINUG, and even my first Android app (ala PhoneGap) are experiences I believe are worth sharing and discussing.

Welcome to my new blog!

Filled Under: Uncategorized Posted on: June 23, 2012