Mobile App Training By Apigee

Last Friday I attended a free mobile app training session with Apigee. We used jQuery Mobile combined with PhoneGap to produce a rich native mobile application. The training session was led up by Tim Anglade, Head of Developer Programs & Evangelism at Apigee. Tim has an impressive resume and is completely comfortable speaking in front of a crowd.

jQuery Mobile

The first half of the morning was spent introducing jQuery Mobile followed up by a crash-course in using the mobile web UI framework. Tim also introduced a drag-and-drop WYSIWYG called Codiqa to keep things moving for those unfamiliar with jQuery Mobile. Codiqa is great because you can use it as a prototyping tool and share designs with clients and/or collaborators. Having used jQuery Mobile since it’s first alpha release, I chose to open up TextMate and go to town.

Apigee

Of course with everything that is free, there is a catch. The title of the training was Build your first Mobile App, with HTML5 and a BaaS. If you don’t know what BaaS means, it means Backend As A Service. Baas, sometimes know as MBaaS (Mobile Backend as a Service) is a model for providing web and mobile app developers with a way to link their applications to backend cloud storage while also providing features such as user management, push notifications, and integration with social networking services. I’ve always been familiar with the term, but never had the opportunity to use it.

Apigee provides an easy-to-use admin console for creating, deleting and editing your data. The following is an example of using JSON to add geolocation records to the cloud service:

{
  "name": "Rockadero",
  "address": "21 Slate Street, Bedrock, CA",
  "location": {
    "latitude": 37.779632,
    "longitude": -122.395131
  }
}

Apigee also provides an API for accessing your data in the cloud. Visit https://developers.apigee.com/get-started to get started! To be honest, I love the idea of using this service if you don’t have a backend developer available for your projects. And the best part of this service is that it’s free up to 25 Gig of data storage!

PhoneGap

One of the pre-requisites of the session was to have PhoneGap installed for either Android or iOS. This was no easy task since the PhoneGap documentation was out of date requiring some guess-work to get the job done. Other pre-requisites included a basic understanding of HTML & CSS and some programming experience (understanding of variables, functions, HTTP, etc.) in any language.

Once installed, this turned out to be easier than anyone that has never used PhoneGap would expect. First, you create your new project by using the following command:

./create ~/Documents/Cordova25/MobileApp org.apache.cordova.MobileApp MobileApp

Then you find the www folder within the newly created folders and delete everything in it! This is great because at first glance, you start to get nervous in wondering what to do with all the new files that PhoneGap created. Tim recommended using only one index.html file for everything and linking to the frameworks via CDN, but this is not a requirement. I chose to upload my images, CSS and JS folders into the www folder. For me, I would rather be 100% certain that the frameworks are available rather than link to them via CDN-hosted versions. Of course, this is a personal preference, but some would argue, including myself, that CDN is better for performance, but in a native app, I don’t find this to be true because once the app is downloaded, you never have to make those HTTP requests when the app is launched.

For more on getting started with PhoneGap, visit PhoneGap.com

The last step is to open your project in your IDE and run the app in your smartphone simulator. I was creating an app for iOS, so I used Xcode and an iOS simulator. If everything works as expected, you’re ready to publish your app!

Happy Easter!