Browse By

iOS Quiz App Using jQuery Mobile + PhoneGap Experience

Texas Driver License iOS App

In less than a week, using jQuery Mobile and PhoneGap, I created the iOS version of Texas Driver License Practice Test app that I made for Android two months ago. As of this writing, the app is still in approval process so I will post the link later on when it’s approved.

Background

Although developing mobile app for Android is nice, I’m just too curious to NOT learn how to make app for iOS. The PhoneGap (now Cordovo) seems to be the best option because of the code portability.

So, I decided to port the Texas Driver License app to iOS while learning the PhoneGap. Since I already have an app goal in mind this also speed up the development process. 🙂

Technologies

PhoneGap 1.7
jQuery Mobile
HTML5
CSS3
JSON
XCode 4.3.2
Mac OS X Lion (10.7.4)

How I did it

1. Create the web app

Since PhoneGap will do the hardwork in converting to binary code, the first thing to do is create the quiz app using HTML5 + CSS3 + jQuery Mobile.

In this step, refering to the jQuery mobile documentation is a must. Fortunately, the type of quiz app that I developed is quite straight forward. I just need few web pages as menu and the question set.

The first challenge is how to store the data. The Android version that I developed earlier use SQLite.

There are several options to do this, I choose to store it as text file, in JSON format, which will be read and displayed using jQuery.

2. Test on iPod Touch (via browser)

Before testing it on the device, I tried the app on my iPod touch by browsing the app after uploading it to one of web server I have. After it looks and feel good, it’s now time to try it as a real app.

3. Test on device using XCode + PhoneGap

Before I’m able to test the app on the device, I have to enroll in the Apple iOS Developer program ($99 fee). This is necessary to get the certificate that is needed to run it on the iPod touch.

Since my iPod touch is installed with iOS 5.1, I have to upgrade to XCode 4.3.2, which means I have to upgrade my Mac OS to Lion.

4. Create the binary and submit to iTunes Connect

After several hours dealing with Apple app creation process, finally I’m able to submit my app and now I just need to wait for the approval.

Useful Links

jQuery Mobile Documentation

Step-by-step to deploy app to iOS device

Phonegap/Cordova and XCode 4.3 tutorial

Submitting app to Apple Store

Lessons learned

Compared to the Android development process and app submission, the iOS app process is waaaay more complicated (and expensive). But since the Apple store is the bigger market I think we must play along with it.

If not for the video tutorial that I get from YouTube, it probably would take me few more hours to complete it. :p

Leave a Reply

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