Continuing from Developing an HTML5 iPhone app using jQuery mobile & PhoneGap – Part I

The App Structure

The following is the app folder structure. As mentioned in Part I, we used jQuery and jQuery mobile as the mobile javascript frameworks for the colour match app.

- 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 app structure for www folder is very similar to a website folder structure. In fact, you can basically take www folder and upload it onto a web server to run the app as a web app. The structure is very straight forward; javascript files in JS folder, CSS and presentation images in CSS folder and all the templates in the root folder. phonegap.js is the Javascript file that comes with PhoneGap and is necessary in order to use PhoneGap APIs and 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

We were using a few PhoneGap APIs and Plugins but some of them were not working at all. It took us a while to isolate the issue, but the problem was because we were using Prototype Javascript Framework for Colour Picker and Prototype and PhoneGap don't work together. Rather than trying to hack Prototype Framework, we removed it altogether and refactored the Colour Picker.

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
• 10 Useful Javascript Snippets for your mobile websites
• 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.