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.
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:
- PhoneGap distribution
- Apache ant (this is needed to compile your platforms on your project)
- Ruby – (Windows Installer)
- Java SDK
- Git Bash
- node.js (need it to install PhoneGap)
Download and unzip/install the programs in your computer. Set the environment variables:
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
Download 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…
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:
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
I got an error because my SDK Build Tools revision was too low. Had to open SDK Manager to update it
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 188.8.131.528518 (com.android.ide.eclipse.adt.feature.feature.group 184.108.40.2068518)
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
Upload source file and it’ll automatically create the application in other devices.
Use Genymotion for the Android Emulator, which is faster emulator.