In this lesson I’m going to show you how you can go from nothing, to a functioning Android PhoneGap application within 30 minutes. If you have already got the basics in place and need tips and advice for development practises, my last tutorial might be more helpful! Check it out: PhoneGap Dev: Lessons Learnt!

I’ll start with the basic setup required to develop your application.

Device

Hopefully by this point you’re sitting with an Android device ready and raring to go! In the settings on the device you need to enable the developer options, once inside developer options you need to then enable “debug mode”. Connect your device to your computer.

Cordova

Cordova is a project developed by Apache, it is nothing more than a set of device APIs that allow a web developer to get access to the native device functions such as camera, file system, notifications & more.

PhoneGap is a distribution of Cordova, but it is entirely powered by Cordova. PhoneGap is owned by Adobe and therefore at some point may contain more Adobe specific tools (but hopefully not!).

Enough of the background information, lets get creative!

Command Line Interface (CLI)

Time to grab a copy of Cordova, but first you need to download and install NodeJS to give access to the Node Package Manager (NPM). Grab it here: http://nodejs.org/.

Once you have downloaded Node, you then need to install Cordova with the Package Manager. To do so open your Terminal and run the following:

$ sudo npm install -g cordova

Once the Cordova package is installed, you can move on to creating your first project! Start by opening up your web project directory in Terminal.

$ cd ~/www

Once you are inside your directory, you can create the project.

$ cordova create app-directory com.yourwebsite.app AppName

This will create the directory ~/www/app-directory where you can store your base files. The directory structure will look something like this:

- merges
- platforms
- plugins
- www

Self explanatory right?

As you have probably guessed, the platforms directory stores your platform specific code and files (splash screens, icons etc). The plugins directory stores any additional plugins you use for your app such as the camera plugin. The www directory is where you will be writing your app.

We now need to add the Android platform to the project, ready for us to run on your device. Back in Terminal, run the following:

$ cordova platform add android

Once the command finishes running, run the following:

$ cordova platform ls

And you should see the following:

[ 'android' ]

Excellent! We’ve now installed Cordova, created your project and added the Android platform to the directory! Time to test what exists runs on your device. Back in to Terminal, run the following:

$ cordova run android

Now as long as you have got your device plugged in, and debug enabled you should get a grey screen with the Cordova login and a green statement “Device is ready”.

Plugins

Plugins are managed differently from PhoneGap 2, instead of existing automatically they now have to be manually added to your project. The added benefit of this is you don’t have to mess around enabling and disabling plugins, you merely add and remove them to your project.

For example, if you want your app to use the camera plugin you would open Terminal and run the following:

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

If you were to then run

$ cordova plugin ls

You would see the camera plugin is installed:

[ 'org.apache.cordova.core.camera' ]

This can then be removed when it is no longer required by referencing the name above.

$ cordova plugin rm org.apache.cordova.core.camera

Updating Cordova

Unlike older versions of Cordova/PhoneGap, it is no longer a pain in the ass to upgrade your files to the latest version. We can now use the Node Package Manager to upgrade by running:

$ sudo npm update -g cordova

Or you can install a specific version by running:

$ sudo npm install -g [email protected]

To see what version you are currently running, just run:

$ npm info cordova

And that just about covers it for this tutorial, stick around for more in-depth articles covering the use and development of PhoneGap 3!