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

sudo apt-get update
sudo apt-get install nodejs

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

sudo apt-get install npm

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.

sudo ln -s /usr/bin/nodejs /usr/bin/node

2. Install Git

sudo apt-get install git

3. Install Ant

sudo apt-get install ant

4. Install PhoneGap

sudo npm install -g phonegap

let’s install libraries that PhoneGap is dependent on.

sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 lib32stdc++6

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.

sudo tar -zxvf ~/Downloads/android-sdk_r24.0.2-linux.tgz -C /usr/local/

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.

vim ~/.bashrc

Add the below lines.

export PATH=$PATH:/usr/local/android-sdk-linux/
export PATH=$PATH:/usr/local/android-sdk-linux/tools
export PATH=$PATH:/usr/local/android-sdk-linux/platform-tools
export PATH=$PATH:/usr/local/android-sdk-linux/build-tools

Update the newly added alias in the existing terminal.

source ~/.bashrc

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.

chmod u+x genymotion-2.1.0_x64.bin
./genymotion-2.1.0_x64.bin

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.

sudo apt-get install virtualbox

Now let’s run Genymotion.

cd /home/dasunhegoda/Downloads/genymotion/
./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.

phonegap create testapp

Add Android as a platform to be built.

phonegap platform add android

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

phonegap platform -ls

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

phonegap run android

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

phonegap run android

type

cordova run android

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).