Getting Started With Phone Gap

This is a very quick and dirty tutorial on how to install PhoneGap, using the PhoneGap iPhone App and the PhoneGap OSX.

  1. PhoneGap utilizes Cordova plug-ins for a lot of App functionality. To get Cordova, you first need node.js. If you’re on OSX, here’s a guide to getting node.js.
  2. Install Cordova. I used this  Terminal command only:
    sudo npm install -g cordova

In case you do not have PhoneGap installed, use this excellent guide.

If you don’t know what PhoneGap is, back up a little and read this first.

After you have installed PhoneGap’s OSX GUI and iPhone App, you can press the “+” symbol to create a new project. Choose the location of your dreams (I use a folder called “PhoneGap Workspace” within my Documents folder as the location for my projects). PhoneGap doesn’t care where you put your projects. Just make sure you use some place that you can remember. For better details on creating your first project, read this guide.

The trickiest part is connecting your PhoneGap App to your PhoneGap server (the bit that you installed on OSX). To connect, you may need to modify the IP Address that appears in the PhoneGap App window. Which is covered here.

Essentials

1. Cordova

From the cordova-js page, use the “Download Zip” file to download the cordova-js-master.zip file to your machine. You will then need to:

  1. unzip the file
  2. locate the folder called “src” within the expanded zip files.
  3. copy the contents of “src” to the “www” folder in your PhoneGap project. You can then link to “cordova.js” in your JavaScript. Yay.

2. Status Bar

You will need to use Terminal to change to your project’s directory, and then you will need to enter the following command:

cordova plugin add cordova-plugin-statusbar

The Status Bar page also includes information on how to implement this plug-in. This plug-in helps to automatically size your window around the status bar of the device your App is running on. Nice!

Advertisements