Phonegap

Easily create apps using the web technologies you know and love:HTMLCSS, and JavaScript

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.

http://phonegap.com/

There are two ways to build a PhoneGap app. You can use PhoneGap online builder or you can build it yourself using the PhoneGap desktop builder.

First let’s see how you can build it yourself:

Setting up the Environment

In order to start using phonegap for your mobile app developments, you need to install a few programs:

Download and unzip/install the programs in your computer. Set the environment variables:

%ANDROID_SDK%\platform-tools;%ANDROID_SDK%\tools;%JAVA_HOME%\bin;%ANT_HOME%\bin;%PHONEGAP%\bin;%RUBY_HOME%\bin;C:\Program Files\nodejs\;

Download from the Phonegap website the project. For version 2.9.1 follow this link: http://phonegap.com/install/ and navigate to the version your looking for (2.9.1) it will link you to https://github.com/phonegap/phonegap/archive/2.9.1.zip

For Android:

Download Apache Cordova Android:
https://github.com/apache/cordova-android

Set PHONEGAP_HOME to location where you unzip it (e.g. D:\Programs\phonegap-android-master)

 

Type the following in the git bash / command promt.

npm install -g cordova
npm install -g phonegap

Phonegap is built on Apache Cordova nothing else. You can think of Apache Cordova as the engine that powers PhoneGap. Over time, the PhoneGap distribution may contain additional tools and that’s why they differ in command But they do same thing.

 

Making your App project

Go to your eclipse workspace in the command prompt to make your own app and enter the following command:

cordova create hello com.example.hello helloWorld
D:\Workspaces\workspace-android64>cordova create hello com.example.hello helloWorld
Creating a new cordova project with name "helloWorld" and id "com.example.hello"
at location "D:\Workspaces\workspace-android64\hello"
Downloading cordova library for www...
Download complete

This creates a directory called ‘hello’ in your workspace and download the cordova library.

Add Android Platform

To add the Android platform into your project go to the project folder that was just created (‘hello’) and enter the following command:

cordova platform add android

Check that android platform was successfully installed on your project by using:

cordova platform ls

Build Your Project

To build your project type “cordova build“.

If the build is successful, the .apk file is created as shown below:

Fixing Errors

However, you may get an error saying: Error: Please install Android target: “android-21”.

To fix this install Android Target or change the target that’s being used for this project.

To see a list of available targets, enter the following:

android list targets

As shown below ‘android-17’ is available in my installation:

You should get a list of available targets in eclipse going to Window -> Preference -> Android.

Go to project folder -> platforms -> android -> AndroidManifest.xml
Change targetSdkVersion from 21 to 17

If you You can also open Android SDK Manager and Install the Android API Level you want, in this case 21.

Import your Project into eclipse

Choose “New > Project > Android > Android project from Existing code” and browse to the ‘hello’ folder.
The html files are under ‘assets’ folder but cordova is hiding this folder because of security reasons.
Right click on the project and go to Properties > Resource > Resource Filters and remove the exclude modules.

You can go to Window -> Preference -> Android. You should get a list of available targets. Click ‘Apply’ then ‘Ok’. Now right click your project, go to properties. Click Android. Choose your desired target.

 

Create PhoneGap application (quicker)

phonegap create MyPhoneGapApp

Go to the project Folder (cd MyPhoneGapApp) and enter

phonegap run android

If successful you’ll get the following result and ‘android’ folder is placed under MyPhoneGapApp\platforms\

But when running this I got an error saying:

Error: Please install Android target “android-19”.

So I opened ‘Android SDK Manager’ from the Android installation folder and installed API 19.

 

Open the project in eclipse:

This creates two projects in the eclipse workspace: 1. Hello World  2. CordovaApp-CordovaLib

Hello World shows some errors in the src folder complaining that ‘CordovaActivity cannot be resolved to a type’ in CordovaApp.java.

To Obtain the cordova.jar file:

In Command Prompt Go to ‘..\phonegap-2.9.1\lib\android\framework’ folder.

You will have to choose the version of android you want to use. To what versions you have enter ‘android list targets’. I choose ‘android-19’.

android update project -p . -t android-19

Then enter:

ant jar

I got an error because my SDK Build Tools revision was too low. Had to open SDK Manager to update it

BUILD FAILED
D:\Programs\Android_SDK\sdk\tools\ant\build.xml:483: The SDK Build Tools revision (19.0.1) is too low for project 'Cordova'. Minimum required is 19.1.0

Open SDK manager to update/install Android SDK Tools, Platform-tools and Build-tools. Then run ‘ant jar’ again. This time it builds successfully and creates the ‘cordova-2.9.1.jar’ file in the ‘framework’ folder.

If the ‘import org.apache.cordova’ cannot be resolved

After running “phonegap create …”, copy cordova.jar into your projects libs folder and cordova.js into your www folder. Then import the project into eclipse and it should work.

Update Android Developer Toolkit ADT plugin

When you open eclipse you may get an error complaining about ‘Android SDK requires Android Developer Toolkit version …’.

 Go to Eclipse Help >’Check for Updates’ or ‘Install new Software’

Add ‘ADT Plugin – https://dl-ssl.google.com/android/eclipse/’ and install the updates for the plugin:

When trying to install it I got this error:

Cannot complete the install because of a conflicting dependency.
Software being installed: Android Development Tools 23.0.4.1468518 (com.android.ide.eclipse.adt.feature.feature.group 23.0.4.1468518)
Software currently installed: Android Developer Tools 22.3.0.v201310242005-887826 (com.android.ide.eclipse.adt.package.product 22.3.0.v201310242005-887826)
Only one of the following can be installed at once

Uninstalled the ADT bundle plugins (from Eclipse >About Eclipse > Installation Details -> Android DDMS (and others) -> [Uninstall]), then restart the eclipse.

After that, install the ADT plugin again.

You may get an error as below when trying to uninstall previous version of ADT:

An error occurred while uninstalling session context was:(profile=profile, phase=org.eclipse.equinox.internal.p2.engine.phases.Uninstall, operand=[R]org.eclipse.rcp.configuration_root.win32.win32.x86_64 1.0.0.M20130204-1200 --> null, action=org.eclipse.equinox.internal.p2.touchpoint.natives.actions.CleanupzipAction).
Backup of file D:\Programs\Android_SDK\eclipse\eclipse.exe failed.
Can not remove : D:\Programs\Android_SDK\eclipse\eclipse.exe

To get around this, when eclipse is open rename eclipse.exe to eclipse.exe.back temporarily, then uninstall the plugin and rename it back to eclipse and restart it.

If this doesn’t fix it then you may have to reinstall your eclipse and ADT plugin.

 Running on Your Device

Run the helloWorld as an Android Application and select the device you’d like to run it on. Here’s what you get with the default app:

Build PhoneGap Apps on other Devices

Go to https://build.phonegap.com/apps

Upload source file and it’ll automatically create the application in other devices.

 

Use Genymotion for the Android Emulator, which is faster emulator.