Setting up iOS Projects for Apache Cordova
(tap/click to view picture full size)

I recently had reason to use Apache Cordova / PhoneGap to build a Native-Wrapped HTML5 App for use on iPad.

Whilst I have worked on PhoneGap / Cordova projects in the past, I found the setup process for Apache Cordova 3.x to be somewhat confusing, even for an Empty / Blank App.

Installing the Framework is messy, requiring use of the Terminal app, and is then further complicated by the fact that you have to choose to add plugins for even the simplest of functionalities, formerly bundled with prior versions.

Of course, get that "Shell" right, and the power of bundling a HTML5 App is there to exploit.

I have now mastered the setup process, after a lot of reading, and some perseverance.

What to do:

1. Install Node.js on your Mac.
2. Open Terminal and install Cordova.

sudo npm install -g cordova

3. Goto a folder where you wish to create a new project, i.e. /Projects

cd /Projects

4. Instruct Cordova to create a new Project (Folder, Bundle Identifier, Project Name)

cordova create yourproject com.developer.yourproject YourProject

5. Change to the new directory.

cd yourproject

6. Add the iOS Platform.

cordova platforms add ios

7. Add your required plugins, of your choice, i.e.

cordova plugin add org.apache.cordova.device
cordova plugin add org.apache.cordova.network-information
cordova plugin add org.apache.cordova.battery-status
cordova plugin add org.apache.cordova.device-motion
cordova plugin add org.apache.cordova.device-orientation
cordova plugin add org.apache.cordova.geolocation
cordova plugin add org.apache.cordova.camera
cordova plugin add org.apache.cordova.media-capture
cordova plugin add org.apache.cordova.media
cordova plugin add org.apache.cordova.file
cordova plugin add org.apache.cordova.file-transfer
cordova plugin add org.apache.cordova.dialogs
cordova plugin add org.apache.cordova.vibration
cordova plugin add org.apache.cordova.contacts
cordova plugin add org.apache.cordova.globalization
cordova plugin add org.apache.cordova.splashscreen
cordova plugin add org.apache.cordova.inappbrowser
cordova plugin add org.apache.cordova.console

8. Build an initial iOS Version.

cordova build ios

9. In Finder, navigate to your project folder, i.e. /Projects/yourproject
then go further, into platforms/ios and then click the Xcode Project file, i.e. yourproject.xcodeproj

Thats it - Now for some quick tricks!

Set your Device Type (i.e. iPad) and Orientation (i.e. Landscape) in your Project Options.

To stop your Web App 'Bouncing' at the top or bottom of the page, add the following preferences to config.xml

webviewbounce : false
DisallowOverscroll : true

To hide the iOS Status Bar, add the following property to your info.plist file

UIViewControllerBasedStatusBarAppearance : NO

Set your icons, drag in your Web App to the www folder, and away you go!