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.


1. Cordova

From the cordova-js page, use the “Download Zip” file to download the 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!


PhoneGap – Getting Started

What is PhoneGap?

According to their web site:

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about.

OK. That sounds sexy.

Back in 2011, Adobe Systems Incorporated announced it had acquired Nitobi Software, the creator of PhoneGap. What’s a little more interesting is the PhoneGap pricing model, which can be found here. The best news is that it is free to build your first App. Costs go up after that. With “free” being said, building an App with PhoneGap does not somehow magically by-pass other vendor’s charges. Apple will still bill you to become an Apple Developer, and so will Google for their platform. You’ll need to check with each vendor you intend to develop with for their current prices. And you’ll need to download xCode (for building iOS apps, plus you may need a Java SDK). And you can’t develop for Windows Mobile currently on OSX.

I’ve tried a few different ‘multi-platform’ App development kits in the past, including PhoneGap. Back when I tested PhoneGap, it reeked. It was command line interface only, the documentation was poor. There were multiple locations to install PhoneGap’s additional code requirements from (actually, this part hasn’t changed). But, in fairness, PhoneGap’s competition at the time, and even now, is quite ordinary. For example, I recently ended my flirtation with Appcelerator because, whilst I could install, create and start building my App, I couldn’t for the life of me figure out how to open my App again after a hard day’s coding in a new and unfamiliar development environment. And after checking Google’s near-infinite knowledge base on everything, it appears I was not alone in the struggle on how to edit my App in Appcelerator. I’ve uninstalled that program. Forever.

Back to PhoneGap.

PhoneGap has a curiously simple user-interface. Oh, and it now has a graphical user-interface. Still in beta. You can install it from here. If you insist on using a command line interface even though for like 40+ years we’ve existed in a GUI world, now with a haptic interface plugged into the screen, you can of course download and live happily in your command-line-based interface where even the smallest typo will lead to frustration. Suit yourself.

I am pleased to say that – despite PhoneGap’s user interface being deceptively simple, it works. I connected an App to my iPhone within a few minutes of downloading the iPhone PhoneGap App. You can also test on different devices. Here’s a link.

So, now that I’ve worked out how to download, install, and connect to PhoneGap on OSX, have I built an App? No. I’m still wading through the aged, bent, and crooked (out-of-date) documentation. In a couple of days I’ll show you how to get GeoLocation working despite PhoneGap’s best efforts to obfuscate the ‘how to’ information using tired and out-of-date information.