You are here

Multi-platform mobile applications with PhoneGap

If you want to create some mobile applications but you only know web technologies like HTML and JavaScript, PhoneGap could be a wise choice.

With PhoneGap you can do the job with HTML, CSS and JavaScript (JavaScript frameworks like jQuery and jQuery mobile are also available) and you can deploy the application to many platforms like Android, iOS, Windows mobile, Blackberry, etc.

PhoneGap or Cordova?

PhoneGap was originally developed by Nitobi, which was later purchased by Adobe Systems. Adobe contributed the PhoneGap code to Apache Software Foundation, starting a new project named Apache Cordova. Cordova is open source software. PhoneGap can be considered a distribution of Cordova, extending the open source project with extra features.

Probably the most important extra feature is provided by the site https://build.phonegap.com. With this service you can build your project remotely to any supported platforms. Otherwise if you build locally you have to install the development framework of the target platform (and it's not so easy because you can only bulid Windows Phone 8 applications on Windows 8 OS, and for iOS you have to use Mac OS-X).

Right now I'll build my application locally for Android. I'll investigate the cloud service and remote build later in another post.

Installing PhoneGap

To start the development process you have to install some tools. After choosing "Install PhoneGap" on the front page, you can see that you have to install NodeJS first. It's quite simple on Windwos platform, there is an msi installer on the http://nodejs.org/ front page.

After installing NodeJS start a command window and navigate to the NodeJS folder (C:\Program Files\nodejs by default). To install PhoneGap, run this command:

npm install -g phonegap

[[{"type":"media","view_cordomode":"media_original","fid":"28","attributes":{"alt":"","class":"media-image","height":"486","width":"677"}}]]

To install Cordova CLI (Comman Line Interface), run:

npm install -g cordova

Check the system path, it should contain both NodeJS and PhoneGap install paths:

[[{"type":"media","view_mode":"media_original","fid":"29","attributes":{"alt":"","class":"media-image","height":"342","width":"677"}}]]

(Path modifications don't affect windows that are already open so you should start a new command window.)

If everything is in place after typing phonegap you should see something like this:

[[{"type":"media","view_mode":"media_original","fid":"30","attributes":{"alt":"","class":"media-image","height":"690","width":"677"}}]]

I'll build my application locally to Android platform so I also have to install Java Development Kit (JDK) and Android SDK.

Check the system variables and set JAVA_HOME to the JDK install folder (create the variable if it doesn't exist).

We have to include sdk\tools and sdk\platform-tools sub-folders from Android SDK install folder.

We also need apache ant to build our PhoneGap projects:

  • download ant from http://ant.apache.org/bindownload.cgi
  • unzip it to a folder (for example E:\dev\ant)
  • set a new environment variable called ANT_HOME and point it to the ant folder:
    ANT_HOME=E:\dev\ant
  • add the %ANT_HOME%\bin folder to the system path

 

Create first application

Connect your Android phone to the computer and run the following commands:

phonegap create hello
cd hello
phonegap run android

We should see the following on the screen:

[[{"type":"media","view_mode":"media_original","fid":"32","attributes":{"alt":"","class":"media-image","height":"416","width":"250"}}]]

You can find the source code of the sample project in the www subfolder.

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
Refresh Type the characters you see in this picture. Type the characters you see in the picture; if you can't read them, submit the form and a new image will be generated. Not case sensitive.  Switch to audio verification.