The basics of setting up Phonegap for iOS

February 11, 2014, 10:20 pm
Author: James Griffiths

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.

Installing Phonegap

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:

phonegap -v

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.

Installing plugins

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.

Device API

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.

Connection

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.

Battery Status

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.

Accelerometer

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.

Camera

phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

This provides access to the device camera.

Compass

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.

Geolocation

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.

File API

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.

Media

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.

Media Capture

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.

Notifications

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.

Contacts

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.

Globalization

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.

Splashscreen

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.

Debug

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.

In summary

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.

Categories

« Return to Posts

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.