The App Structure
- www -- js --- jquerymobile.js --- colourpicker --- jquery.js --- script.js -- css --- images - phonegap.js - index.html - results.html - details.html - favourites.html - picker.html - popular.tml - about.html - plugins ....
The components from jQuery mobile used within the app are Single page template, Header bars, Buttons, Layout grids, Select menus, and List views. We created a custom theme in CSS so the look and feel of those components are customised for the app.
Troubleshooting XCode/PhoneGap Issues
We encountered a few issues with XCode and PhoneGap during development.
1. Unable to talk to web service APIs
When the app was running as a web app, everything was working well, but as soon as we put it onto XCode, the colour picker no longer worked – it didn’t return any result. This was caused by PhoneGap file download restriction and to resolve the issue, the following values in PhoneGap.plist file were updated:
OpenAllWhitelistURLsInWebView: YES ExternalHosts - thedomainforapi.com
2. PhoneGap APIs and Plugins were not working
3. Some PhoneGap plugins were throwing ARC errors when compiling
Disabling ARC for specific files did the trick.
Installing certificates & provisioning profiles
Once we have the code ready and tested on Simulator, we wanted to make sure it worked well on the device as well. In order to deploy the app onto a real device, we had to install a provisioning profile and a certificate. The process requires a few steps, but if you follow this article, you should not have any problem. For installing certificate and profile for distribution (ie: submitting to the app store), we followed this article. (Thanks, David!)
iTunes App Store Submission Process
Surprisingly, the process of submitting the app to iTunes App Store wasn’t as hard as installing certificates & provision profiles. Refer to slide 32+ of this presentation for screenshots. The slides are a bit dated as we didn’t have to download Application Loader separately, it already came with XCode 4.
Finally… how long did it take to get it approved?
We submitted the app on Saturday (midnight Friday) but we had to cancel the first submission and resubmit the app again on Tuesday due to some last minute changes. The app was approved the following Monday around 4am (Australian Eastern Standard Time Zone (AEST)). We received an email from the app store around 2am which said the app was under review and at 4am, we received another email saying the app was approved and ready for sale. Reading the guidelines before submitting the app to ensure the app complies with the App Store Review Guidelines must have helped us.
Feel free to download the app from the app store to see it in action.
If you are interested in getting an iPhone/iPad application that uses web technologies for your company or organisation, contact us at Anansi Web Development to find out how we may be able to help you.
Other useful articles
We have written a few articles in the past on developing for iPhone and iPad and working with PhoneGap which you might find useful:
- Embed a YouTube video iframe in a phonegap app
- How to ‘Post on Facebook Wall’ on iPhone and Android using PhoneGap plugins
- How to use hi-res images in web apps for iPhone4
- Top 10 jQuery Mobile Code Snippets that you need to know
- Five Important Steps into iPhone App Development for Beginners
- Designing and Optimising Websites for iPad
- How to disable text auto correction in iPhone web app
- Tips for iPhone Web App Development
Sample PhoneGap Project
If you would like to get a sample PhoneGap project (uses jQuery mobile), you can download PhoneGap App using jQuery Mobile source code.