Random thoughts & observations

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

The basics of setting up Phonegap for iOS

Posted: February 11, 2014
Written by: Saints At Play
Category: PhoneGap

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.

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.

« Return to Posts

Comments

Gravatar
Clash Of Clans Hack Cydia December 2013

March 18, 2014

Nice weblog here! Also your web site a lot up very fast!

What web host are you the usage of? Can I get your affiliate link
on your host? I wish my site loaded up as quickly as yours
lol

Posting comments after three months has been disabled.