iOS Quiz App Using jQuery Mobile + PhoneGap Experience
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