Random thoughts & observations

From the mundane to the profound and everything in between here’s what’s rocking our world

Publishing a PhoneGap App to the Apple App Store Part 1

Posted: November 29, 2014
Written by: Saints At Play
Category: PhoneGap

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:

  1. Setting up your Environment
  2. Registering for an Apple Developer account
  3. Creating App Certificates & Profiles
  4. Publishing your App

There's a lot to get through so let's get started!

Setting up your environment

So you've had a great idea for the next killer iPhone App and want to start development straight away. As you have no desire to learn Objective-C or Swift and simply want to leverage your existing web development skills with HTML, CSS and JavaScript you're interested in using PhoneGap to achieve this.

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:

cordova -v

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:

node -v

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:

cordova -v

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.

Installing plugins

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:

Device API

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.

Connection

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.

Battery Status

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.

Accelerometer

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.

Compass

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.

Geolocation

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.

File API

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.

Notifications

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.

Contacts

cordova plugin add org.apache.cordova.contacts

Allows your App to access the device's contacts database.

Globalization

cordova plugin add org.apache.cordova.globalization

Provides locale-specific representation for your App when accessed on a device.

Splashscreen

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.

Camera

cordova plugin add org.apache.cordova.camera

Allows an App to capture photographs using the device camera.

Media

cordova plugin add org.apache.cordova.media

Allows an App to record and playback audio files on the native device.

Media Capture

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.

Debug

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.

Taking stock

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.

Xcode

If you navigate to your App directory in the Mac Finder you will see something that resembles the following:

PhoneGap iOS directory structure

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:

PhoneGap iOS structure viewed in 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.

« Return to Posts

Comments

There are no comments

Posting comments after three months has been disabled.