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,
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.
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.
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.
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.
Type android and see whether Android SDK Manager is started as shown below.
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.
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
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).