Introduction
I was recently invited to attend an all-day workshop here in Milwaukee titled "Build your First Mobile App in One Day with HTML5, jQuery, PhoneGap & Usergrid."
One day, huh? I'd managed projects involving mobile applications, but had never built one before, and was really excited to get my hands dirty and learn how it could possibly be done so quickly. I was not disappointed.
Scope
The purpose of the app was to build and store a list of museums, and then display any that were within a certain distance of the user based on GPS coordinates. Mobile UI, Cloud data storage, GPS location calculations, testing for our target platform / OS - quite an ambitious project for a ~6 hour workshop. Fortunately, the process we went through to build our app exposed me to a few new tools that helped make the 'app in a day' promise a reality.
We started by creating the user interface. Codiqa is a web-based UI modeling and code generation tool. After logging in, you're presented with a device frame and a toolbox of common controls. From there, it's just drag and drop; plop the widgets you want onto the frame, make a few label changes, and presto! - you have a Mobile UI. To get the code files, you need to continue building your app, just click the 'Download project' button, unzip the files, and you've got a working HTML5/jQuery website or mobile application. The markup that came out was very clean as well, which is not always the case with code generation tools.
They have a really nice demo area on their website where you can test it out for yourself. I liked working with it, and I think you'll find it to be a big time saver on UI work for your next project. My thanks to them for supporting the workshop with free trial licenses for all the attendees.
So we finished our user interface. Now what about the museum data? To make the app work, we needed to store and retrieve information about the museums - name, city, GPS lat/long coordinates. How's that going to be possible in a few hours, without paying for a hosted database somewhere?
Enter Apigee. I'd actually visited their site a few months ago and picked up a free copy of their web API design whitepaper for a project at work. At the time, I had trouble figuring out what their product actually did though. Fortunately, this portion of the workshop cleared all that up.
Think of Apigee's App Services product (a.k.a Usergrid) as data storage plus a "wrapper" for a number of common web and mobile APIs. "Backend as a Service" is a term that was used to describe it at the workshop; it's a collection of many of the common functions you'd look for while building a web or mobile app packaged up nicely in a single bundle. Some of the great features their platform offers:
- Data storage & management. This includes all data, files and assets - up to 25 GB - as well as a flexible SQL-style querying syntax.
- Social media connectivity with activity streams.
- User management. Create logins, assign roles and permissions, and build groups.
- Push notifications - send up to 10 million per month.
- Capture and utilize geolocation data from user devices.
- SDKs are available in most of the common mobile and web development languages.
- Best of all, App Services (all that stuff I just mentioned) is always free for developers!
Here's a shot of the Data Management workspace from my sandbox, which is what I used to create the necessary data structures and API endpoints needed for the project:
From this point, it was easy to add a number of museums and geolocation coordinates for lookup in the app. Once the app was successfully pulling our complete list of museums, we added a filter to only show museums that were within walking distance of our current location with a simple query to Apigee's API (this is in Javascript returning JSON):
museums = new Apigee.Collection({
type: "museums",
client: apigee,
"qs": {
"limit":25,
"ql": "location within 15000 of " +
loc.coords.latitude + "," + loc.coords.longitude
}
});
Our app was now fully functional, with all of the necessary features we defined at the outset, and we had about an hour left in the workshop. I was really impressed with this service. Getting an app (web or mobile) going with their product was so simple - the "batteries are included", and it's free to start. There can't be too many ways besides this to get your application to market quickly, but still have the flexibility to scale it easily if / when it takes off. Very cool product in my opinion.
With the user interface and the backend both completed, it was time to start testing for our target mobile platform. PhoneGap is basically a cross-platform compiler of HTML5 mobile apps. With it (and the appropriate SDKs and software packages), you can take the same code you wrote and package it for iOS, Android, Windows Phone, and other platforms. It also allows you to access many of the common device features you might want to incorporate into your app (camera, storage, contacts, etc.) with the same code on each of those platforms without having to rewrite anything.
PhoneGap has an easy-to-use command-line interface. To compile your app, simply say:
$ phonegap build android
Once that's done, you can test it by running an emulator installed with one of the SDKs by saying:
$ phonegap build android --emulator
Build, tweak and repeat until satisfied. The only caution I'll offer here is you shouldn't expect to just download PhoneGap and start running commands. Workshop participants were actually asked to install this tool before arriving; there are a number of steps to installing the requisite SDKs and software packages for each mobile platform that need to be present for PhoneGap to work. The PhoneGap website provides good step-by-step instructions on how to do this for each, but it can take a while.
Summary
As promised, at the end of the day, I had a working, buildable mobile application. Download my project and check it out if you'd like. Overall, it was a very good learning experience for me, and I will definitely be looking for ways to put these tools to use. My thanks to Apigee (sponsor) and Matt Dobson (presenter) for putting on a great workshop. If you see one of their events pop up in your neighborhood, I highly suggest making time to attend.
CodeProject
