Hybrid mobile application development is a hot topic these days. PhoneGap is one of the frameworks that can be used to develop hybrid mobile apps. If you are new to hybrid mobile application development read this post. You only have to follow these steps to have a PhoneGap app up and running in your Ubuntu. Before that,

What’s PhoneGap

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.

See the image below for the build process of PhoneGap.

Image Courtesy : build.phonegap.com

Image Courtesy : build.phonegap.com

Note that You need to have Java on your Ubuntu. Let’s start.

1. Install nodejs

Let’s install npm, which is the Node.js package manager. You can do this by typing

The NodeJS is installed & named as nodejs. But PhoneGap, expect the executable to be named node. To fix this inconsistency, create a symlink named node that points to nodejs as follows.

2. Install Git

3. Install Ant

4. Install PhoneGap

let’s install libraries that PhoneGap is dependent on.

type phonegap on the command line and check whether PhoneGap has installed correctly as shown below.

Phonegap Install

Successful Phonegap Installation

5. Get the Android SDK

You can download the SDK here. Extract the package to /usr/local/android-sdk using below command. Any other preferred place would be fine but make sure to change the path accordingly.

If you have any issue refer this thread. Complete Installation Guide for Android SDK / ADT Bundle on Ubuntu.

Now let’s set the environment variables in the bash configuration file, so that PhoneGap can call the Android emulator. Edit the .bashrc file as below.

Add the below lines.

Update the newly added alias in the existing terminal.

Type android and see whether Android SDK Manager is started as shown below.

Android SDK Manager

Android SDK Manager

 

6. Let’s install a faster emulator

You can use the android emulator if you really prefer it but rather than using the slow android emulator today I’ll show an emulator which is faster and better. Genymotion. You may have to create an account download the appilcation. Also note that account will be used at later when you run the application as well.

Let’s download from this link. Set the permission before you start running the application as shown below.

You might see the below error if VirtualBox is not installed in your system which is required by Genymotion.

Genemotion Install Error

Genemotion Install Error

Below command will fix the issue.

Now let’s run Genymotion.

Now login to the genymotion account and create an emulator. Refer this link for more info on setting up Genymotion.

7. Let’s create a phonegap appilcation

Create a PhoneGap project using below command.

Add Android as a platform to be built.

To list the available platform try the below command(Optional).

Now let run the application. Make sure you have started your emulator so that application will be started in it.

Tips & Tricks

Phonegap is built on Apache Cordova. Apache Cordova is the engine that powers PhoneGap. Therefore you can replace some of the Phonegap command with Cordova. If you really want to know the exact difference read this post. Is there a difference between PhoneGap and Cordova commands? Answer is here. Instead of typing

type

which will work fine as well. But when you type Cordova commands you will see a more detailed output then PhoneGap commands which is helpful for debugging purposes. See the Apache Cordova installation guide here. Also refer the PhoneGap Wiki as well.

If you have any questions let me know in the comments below. Your feedback is highly appreciated(happy-face).

Be Sociable, Share!