If you want to develop for different mobile platforms but don't have the time, inclination or motivation to learn the Objective C, Java or C# languages then PhoneGap should definitely be at the top of your must-have technologies list.
In this tutorial we're going to take you through setting up the basic Phonegap environment for iOS.
As we'll be developing on a Mac you'll need some familiarity with the unix command line as, from version 3 onwards, Phonegap introduced the ability to be installed and configured directly through the command line.
Something of a no-brainer but, before we can start developing with Phonegap, we have to install it. Assuming you have node already on your system (which can be checked for by typing the following command: node -v) Phonegap can be installed with the following command line instruction:
sudo npm install -g phonegap;
The sudo prefix allows a user to install software to directories that might otherwise be restricted. Use of this command will prompt you for the administrator password to your Mac so make sure you have this to hand.
npm is the Node Package Manager which allows for node compatible software to be installed on a user's computer.
The -g flag installs Phonegap so that it is globally available to all directories.
Once this has been done you can check if Phonegap is installed successfully by typing the following:
Creating a Phonegap project
Navigate to where you want your Phonegap project to be stored which, on a Mac, would typically be within the Sites directory and type out the following at the command line (substituting NameOfProject for your own project's name and companyNameIdentifier for your own company name or similar identifier):
phonegap create NameOfProject -n NameOfProject -i com.companyNameIdentifier.NameOfProject;
The first argument NameOfProject creates a directory of that name in the location where your Phonegap project is created.
The second argument -n NameOfProject provides the display text for the App.
The final argument -i com.companyNameIdentifier.NameOfProject provides a reverse domain style identifier for your App.
Adding mobile platforms
Now that Phonegap has been successfully installed and a project has been created in the directory of your choice it's time to start adding some platforms for developing on.
To build for iPhones, iPad and iPod Touch devices simply type out the following at the command line:
phonegap build ios
This will install iOS specific files so you can build your project specifically for Apple mobile/tablet devices.
Phonegap 3.0 brought with it not only the command line but also a new way of adding plugins to your projects. A plugin is a piece of code designed to interface with native device functionality such as vibration, taking photos and connecting to a network for example.
Plugins are added from online repositories to your project using the command line and are listed below.
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
This allows your project to access the Device API which provides information about the hardware and software of that particular device.
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git
This grants access to the connection object which provides information about the cellular/wi-fi connection of the device.
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-battery-status.git
This grants access to information about the battery status of the device.
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git
This provides information about the motion status of the device.
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
This provides access to the device camera.
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git
This provides information about the direction the device is facing.
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
This grants access to location data derived from network signals or the device GPS sensor.
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git
This grants access to the file system allowing files to be read, written and navigated.
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git
This provides the ability to record and playback audio files on the device.
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git
This allows access to image, audio and video capture functionality on the device.
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git
This provides access to device notification functionality such as vibration, beeping and dialog windows.
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git
This grants access to the contacts database situated on the device.
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git
This provides information and grants access to operations specific to the user's locale and timezone.
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git
This allows the device splash screen to be shown or hidden.
In App Browser
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
This allows web browser functionality from within the App when a link to a new window or window.open is called.
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git
This provides access to debug information about the App.
That concludes our basics of setting up a phone gap project for iOS. There is, of course, a lot that we didn't touch on such as creating App content and running that on a device. There are plenty of books and tutorials out there that show you how to accomplish that using frameworks such as jQuery Mobile or Sencha Touch for example.
We just wanted to focus on how to install and set up Phonegap so you can start creating your next killer App. Any comments, criticisms or suggestions for improvements with this blog post please leave a comment below.