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.
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 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:
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 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
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!