In this tutorial we're going to take you through the process of publishing a PhoneGap App to the Apple App store. Due to the number of steps involved this tutorial will be broken over a number of different blog entries:
- Setting up your Environment
- Registering for an Apple Developer account
- Creating App Certificates & Profiles
- Publishing your App
There's a lot to get through so let's get started!
Setting up your environment
With this in mind you have the option of using either the PhoneGap Build platform or the Cordova PhoneGap CLI environment. In this tutorial we're going to take you through using the Cordova PhoneGap CLI environment on an Apple Mac platform so the first thing you will need to do (if you haven't done so already) is to install Cordova PhoneGap from your Mac OS X Terminal.
If you're unsure as to whether or not you've already installed Cordova PhoneGap on your Mac simply type the following command into your Terminal and press Enter:
If the Cordova PhoneGap CLI is indeed installed you'll see a version number being displayed (at the time of publishing this article the most current version is: 3.5.0-0.2.4.
If not, then you'll firstly have to check that Node is installed on your machine as you will need the Node Package Manager (npm) to install the Cordova PhoneGap CLI. To do this simply type the following in the Mac OS X Terminal:
As with the Cordova PhoneGap CLI if Node is installed on your system you'll see a version number displayed (at the time of publishing this article the most current version is: 0.10.28).
If not, download the Node binary, run the installer and wait for the software to complete being successfully installed before returning to the Mac OS X Terminal to run the following command (note that if you don't have administrator access configured you may need to prefix the below command with sudo in order to install the software):
npm install -g cordova
Using npm this will install the Cordova PhoneGap CLI onto your Mac and, depending on the speed of your network connection and the availability of the repository, this may take a little while to finish installing.
Once completed, and assuming no errors have been thrown during the installation process, test that Cordova PhoneGap CLI is installed with the following command:
All things being well you'll see the version number being displayed. If so, congratulations, you can now start developing your App!
Creating a Cordova PhoneGap project
The next step will now be to instruct Cordova PhoneGap that you want to create the necessary 'skeleton' for an App. By this we mean, establishing the PhoneGap directories and files necessary to serve as a foundation for the App to be built upon and draw from.
To do this, simply navigate to where you want the App to be built/stored on your Mac and run the following from the Mac OS X Terminal (substituting NameOfProject for your own project's name and companyNameIdentifier for your own company name or similar identifier):
cordova create NameOfProject com.companyNameIdentifier.NameOfProject NameOfProject
The first argument NameOfProject creates a directory of that name in the location where your PhoneGap project is created.
The second argument com.companyNameIdentifier.NameOfProject provides a reverse domain style identifier for your App (the reason for this will become apparent in later tutorials).
The final argument NameOfProject provides the display text for the App.
Running this command will create a PhoneGap project directory and install the initial files and directories for your App. Now the next step is to install mobile platform specific files/directories for subsequent development with.
Adding the iOS platform
One of the great things about PhoneGap is the availability of mobile platforms that can be developed for such as Android, iOS and Amazon Kindle. For the purposes of this tutorial though we're only interested in developing for the iOS environment so our next step will be to install this to our App.
Using the Mac OS X Terminal navigate into the root of your App directory and type out the following:
cordova platform add ios
This command will add the necessary files to your App so that you can start developing for, and ultimately publish to, an iOS device.
So far, so good but there's still one more step that you might need to do to configure the App and that's to allow for the ability to hook into and take advantage of native device functionality such as network connectivity and notifications for example.
The Cordova PhoneGap CLI version 3.0 brought with it not only the command line but also a new way of adding plugins to your projects. A PhoneGap plugin is a piece of code designed to interface with native mobile device functionality such as, for example: vibration, taking photos and connecting to a network.
Cordova PhoneGap plugins are added from online repositories to your project using the command line and are listed below:
cordova plugin add org.apache.cordova.device
This adds the Device API plugin to your App allowing it to access information about the hardware and software of the device that it will be installed to.
cordova plugin add org.apache.cordova.network-information
This adds the Connection plugin to your App allowing it to access information about the cellular/wi-fi connection of the device that it will be installed to.
cordova plugin add org.apache.cordova.battery-status
This adds the Battery Status plugin to your App granting access to information about the battery status of the mobile/tablet device that the App will be installed upon.
cordova plugin add org.apache.cordova.device-motion
This adds the Device Motion API plugin to your App allowing it to access the device's motion sensor.
cordova plugin add org.apache.cordova.device-orientation
This adds the Device Orientation API (or Compass) plugin to your App allowing it to access information about the direction which the device is pointing in.
cordova plugin add org.apache.cordova.geolocation
This adds the Geolocation API plugin to your App allowing the device to report its current geographical location.
cordova plugin add org.apache.cordova.file cordova plugin add org.apache.cordova.file-transfer
This adds the File API plugin to your App allowing it to access the native file system of the device.
cordova plugin add org.apache.cordova.dialogs cordova plugin add org.apache.cordova.vibration
Provides plugins for your App allowing it to provide visual device notifications and to vibrate the device.
cordova plugin add org.apache.cordova.contacts
Allows your App to access the device's contacts database.
cordova plugin add org.apache.cordova.globalization
Provides locale-specific representation for your App when accessed on a device.
cordova plugin add org.apache.cordova.splashscreen
Allows the App splash screen to be shown or hidden on a mobile device.
In App Browser
cordova plugin add org.apache.cordova.inappbrowser
Allows an In-App browser to be opened within the App enabling the user to browse external website content without leaving the App.
cordova plugin add org.apache.cordova.camera
Allows an App to capture photographs using the device camera.
cordova plugin add org.apache.cordova.media
Allows an App to record and playback audio files on the native device.
cordova plugin add org.apache.cordova.media-capture
Allows an App to capture Media files using the native device camera, video and audio recording applications.
cordova plugin add org.apache.cordova.console
Allows the App to access/use a command line interface for displaying developer related messages on a native device for debugging.
Okay, now's probably as good a time as any to pause and take stock of what you've accomplished so far in this tutorial:
- Installed Node and Cordova PhoneGap (if not already installed)
- Created the initial foundation for your App
- Added the iOS platform development files to your App
- Installed, if required, specific Cordova PhoneGap plugins
The last remaining step for part 1 of this tutorial is to install (if you haven't already done so) Apple's Xcode as you will use this to develop the core functionality for your App and ultimately publish to the Apple App Store.
If you navigate to your App directory in the Mac Finder you will see something that resembles the following:
In the above example we've created a mobile App called SampleApp (yours will, no doubt, be titled differently).
Within the iOS directory double-click on the xcodeproj file and this will open the App within Xcode:
The vast majority of your development will take place within the index.html file and the www directory (where you'll add additional scripts, images and styles as required).
You will need to choose a Mobile framework to enable your App to benefit from page transitions and a mobile like UI.
What mobile framework you choose to develop with (I.e. jQuery Mobile, jQT etc) is entirely up to you and beyond the scope of this tutorial. All you need to be aware of is that files for the framework that you choose will be stored within the www directory.
Now is probably a good time to wrap up this tutorial in the series. This should give you time to start developing your App before we move on to the next tutorial where we'll show you how to set up an account with Apple and register for an iOS developer account.