A guide to PhoneGap development for Android on Windows.
This is a guide to start developing with PhoneGap 3 for Android on a Windows machine. It has everything included, but only the basics. See the supplied URLs for more information. If you have any questions, enhancements, comments or complaints, please feel free to let me know.
Overview, what you need
You need the following platforms / software packages:
Java JDK 6 or 7
Android SDK tools
Integrated Development Environment (IDE): Eclipse and Eclipse Plugin
Apache Ant
GitHub
Node.js
Cordova PhoneGap
Skip the parts below if you already have installed / configured them.
Install the tools
Java JDK 6 or 7
Download: http://www.oracle.com/technetwork/java/javase/downloads/index.html
Make sure you download the JDK. Eclipse can build against Java 6 with Java 7, so it is fine to have only 7 on board. Officially, Android supports only Java 6, so it is not possible to compile/build against Java 7.
Just install the download as you go (next, next... finish). Make sure that you make you have the following set in your advanced system properties, environment variables.
System variables:
JAVA_HOME: C:\Program Files\Java\jdk1.7.0_25
The "1.7.0_25" part might be different, depending on which version you are installing.
Path: %JAVA_HOME%\bin
Add the line above at the end of the rest of the paths and make sure it precedes with an ;
Android SDK tools
Download and information: http://developer.android.com/sdk/index.html
Download the SDK (adt-bundle) from the link above and extract it to a folder you like. In this case: "D:\AndroidDev\android-sdk\". Make sure that you make you have the following set in your advanced system properties, environment variables.
System variables:
Path: D:\AndroidDev\android-sdk\platform-tools;D:\AndroidDev\android-sdk\tools
Add the line above at the end of the rest of the paths and make sure it precedes with an ;
Start the SDK manager and download the API levels you need (I did Gingerbread, Ice Cream Sandwich and Jelly Bean versions).
Eclipse and Eclipse Plugin
Download and information: http://developer.android.com/sdk/installing/installing-adt.html
Eclipse is integrated in the download from the SDK tools. Extract the contents (eclipse) in this case to D:\AndroidDev\eclipse\
When you start Eclipse add the plugins like it is described in the link above. When Eclipse asks for the Android SDK, select folder "D:\AndroidDev\android-sdk\".
User variables:
HOME: %USERPROFILE%
Android Studio
Download and information: http://developer.android.com/sdk/installing/studio.html
Important note: As of this moment it is not possible to build PhoneGap apps with Android Studio.
Apache Ant
Download: http://ant.apache.org/bindownload.cgi
Information: http://ant.apache.org/manual/install.html#installing
Download the file and extract it to (in this case): "D:\AndroidDev\apache-ant"
Make sure that you make you have the following set in your advanced system properties, environment variables.
System variables:
ANT_HOME: D:\AndroidDev\apache-ant
Path: %ANT_HOME%\bin
Add the line above at the end of the rest of the paths and make sure it precedes with an ;
GitHub
Download: https://help.github.com/articles/set-up-git
Download and install GitHub. Start GitHub and configure anything if needed.
Node.js
Download: http://nodejs.org/
Download the installer from the link above and install it the standard way (next, next.... finish).
It will automatically add it self to the path variables. For reference they are mentioned below here anyway.
User variables:
Path: C:\Users\Joram\AppData\Roaming\npm
Where as Joram is my username and should be yours.
System variables:
Path: C:\Program Files\nodejs\
Cordova PhoneGap
Information (overview): http://docs.phonegap.com/en/edge/guide_platforms_index.md.html
Cordova information (install): http://docs.phonegap.com/en/edge/guide_cli_index.md.html#The%20Command-line%20Interface
PhoneGap information (install): https://github.com/mwbrooks/phonegap-cli
You can now download PhoneGap using the Command Line Interface (CLI). Using this method you can select which platform you need, which plugins you need and then build the sources.
The commands below are done with cordova, in stead of phonegap. It is possible to them with phonegap also. Personally, I advice to use the phonegap version, in stead of cordova. Somehow using cordova the needed files are not generated properly.
Difference between Cordova CLI and PhoneGap CLI, according to the FAQ
The PhoneGap CLI is built on top of the Cordova CLI. It has all of the functionality that the Cordova CLI has. The main difference is that the PhoneGap CLI has PhoneGap Build integration. So if you don’t have the native SDK installed, you can delegate compilation to the PhoneGap Build cloud service and get app-store ready mobile apps. Both tools are completely interoperable.
The steps (execute either the Cordova or PhoneGap command, not both), for reference I list them both:
Download Cordova or PhoneGap, open Command Prompt (cmd), and type the command below.
npm install -g cordova
npm install -g phonegap
Create App
Create project
In Command Prompt (cmd) go to the folder in which you maintain your source code and type the command below. This will create a HelloWorld app (change the name if needed).
cordova create HelloWorld com.example.hello "Hello World"
phonegap create D:\HelloWorld
cd HelloWorld
Then add the Android platform with the following command in the Command Prompt (cmd).
cordova platform add android
<not needed for PhoneGap as far as I know.>
Want to remove the Android platform? Highly doubt that, but you'll never know.
cordova platform remove android
Install plugins
If you need any plugins (be specific!) execute the following commands in Git Shell (installed with GitHub)
Commands in CLI:
cordova plugin add <git-url>
phonegap local plugin add <git-url>
Replace <git-url> with the addresses here below (replace also the < and >)
Basic device information:
device: https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
Network and battery status:
network-information: https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git
battery-status: https://git-wip-us.apache.org/repos/asf/cordova-plugin-battery-status.git
Accelerometer, compass, and geolocation:
device-motion: https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git
device-orientation: https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git
geolocation: https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
Camera, media capture, and media playback:
camera: https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
media-capture: https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git
media: https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git
Access files on device or network:
file: https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git
file-transfer: https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git
Notifications via dialog box or vibration:
dialogs: https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git
vibration: https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git
Contacts:
contacts: https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git
Globalization:
globalization: https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git
Splash Screen:
splashscreen: https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git
In-app browser:
inappbrowser: https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
Debug console:
console: https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git
Dialogs:
dialogs: https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git
If you want to see which plugins have been added, execute the following commands.
cordova plugin list
phonegap local plugin list
Removing plugins
If you need to remove any plugins (be specific!) execute the following commands in Git Shell (installed with GitHub)
Commands in CLI:
cordova plugin remove org.apache.cordova.<plugin name>
phonegap local plugin remove org.apache.cordova.<plugin name>
Replace <plugin name> with a name above (replace also the < and >)
Build and compile the app
Make the build with the following command (in Command Prompt).
cordova build android (it does a prepare and compile command in one)
phonegap local build android
Then you can run it (or add it to Eclipse or Android Studio).
cordova emulate android
phonegap local run android
All the sources should be ready now and you can start using PhoneGap and building your app.
Debug Console
More information about debugging webapps on Android: http://developer.android.com/guide/webapps/debugging.html
Send information to the console
In your JavaScript use one of the following commands below.
console.log(String)
console.info(String)
console.warn(String)
console.error(String)
Debug console
To see the logcat in a Command Prompt (cmd), execute the following command.
adb logcat
If you want to have (way) more options, make use of eclipse. Execute the following command.
monitor
Debugging through Chrome
You can also debug your PhoneGap application through the Chrome Developer tools. This also includes live editing of code and see instant results of that. Much easier tweaking and improving your code!
Use this example below to adjust your project to support Chrome remote debugging.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
package org.your.packagename;
import org.apache.cordova.CordovaActivity;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.pm.ApplicationInfo;
import android.content.res.Configuration;
import android.os.Build;
import android.os.Bundle;
import android.webkit.WebView;
public class StartActivity extends CordovaActivity {
@SuppressLint("NewApi") // needed to suppress the API warning
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.init();
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { // check if API of device is that of KitKat (19)
if ( 0 != ( getApplicationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE ) ) { // check if app is set to debugging
WebView.setWebContentsDebuggingEnabled(true); // set debugging with Chrome to true
}
}
super.loadUrl("file:///android_asset/www/index.html");
}
}
view raw CordovaActivity.java hosted with ❤ by GitHub
Updating
Cordova PhoneGap
Updating to a newer PhoneGap version is done in a couple of steps. See below. Also in this part, for the moment, go for the phonegap-cli commands.
Check your current version
cordova -v
phonegap -v
Update Cordova or PhoneGap, open Command Prompt (cmd), and type the command below.
npm update -g cordova
npm update -g phonegap
Update your project
Create new project...
Create a new project.
Add all the necessary plugins.
Add your assets content (HTML, CSS, JavaScript and other files, basically your entire web-app).
Make the new build with the following command.
cordova build android (it does a prepare and compile command in one)
phonegap local build android
Then you can run it (or add it to Eclipse or Android Studio).
cordova emulate android
cordova emulate android
phonegap local run android
Update current project...
cordova platform update android
phonegap platform update android
Easy CLI commands for PhoneGap and Cordova
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
@echo off
title Easy Cordova CLI commands
:start
echo Made by: Teusink.org - Joram Teusink
echo http://www.teusink.org
echo http://teusink.blogspot.com
echo.
echo Version: 1.0.1 - Date: 2014/08/24
echo.
echo Select a plugin to install:
echo 1. device
echo 2. network-information
echo 3. battery-status
echo 4. device-motion
echo 5. device-orientation
echo 6. geolocation
echo 7. camera
echo 8. media-capture
echo 9. media
echo 10. file
echo 11. file-transfer
echo 12. dialogs
echo 13. vibration
echo 14. contacts
echo 15. globalization
echo 16. splashscreen
echo 17. inappbrowser
echo 18. console
echo 19. statusbar
echo.
echo Other commands:
echo i. Install
echo u. Update
echo v. Current version
echo l. List installed plugins
echo h. Create HelloWorld app
echo.
echo Q. Quit
set /p choice="Enter your choice: "
if "%choice%"=="Q" goto quit
if "%choice%"=="1" cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
if "%choice%"=="2" cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git
if "%choice%"=="3" cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-battery-status.git
if "%choice%"=="4" cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git
if "%choice%"=="5" cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git
if "%choice%"=="6" cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
if "%choice%"=="7" cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
if "%choice%"=="8" cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git
if "%choice%"=="9" cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git
if "%choice%"=="10" cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git
if "%choice%"=="11" cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git
if "%choice%"=="12" cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git
if "%choice%"=="13" cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git
if "%choice%"=="14" cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git
if "%choice%"=="15" cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git
if "%choice%"=="16" cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git
if "%choice%"=="17" cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
if "%choice%"=="18" cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git
if "%choice%"=="19" cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-statusbar.git
if "%choice%"=="l" cordova plugin list
if "%choice%"=="v" cordova -v
if "%choice%"=="u" npm update -g cordova
if "%choice%"=="i" npm install -g cordova
if "%choice%"=="h" cordova create HelloWorld com.example.hello "Hello World"
echo Invalid choice: %choice%
echo.
pause
goto start
:quit
echo.
echo Goodbye
echo.
view raw cordovacli.cmd hosted with ❤ by GitHub
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
@echo off
title Easy PhoneGap CLI commands
:start
echo Made by: Teusink.org - Joram Teusink
echo http://www.teusink.org
echo http://teusink.blogspot.com
echo.
echo Version: 1.0.3 - Date: 2014/08/24
echo.
echo Select a plugin to install
echo 1. device
echo 2. network-information
echo 3. battery-status
echo 4. device-motion
echo 5. device-orientation
echo 6. geolocation
echo 7. camera
echo 8. media-capture
echo 9. media
echo 10. file
echo 11. file-transfer
echo 12. dialogs
echo 13. vibration
echo 14. contacts
echo 15. globalization
echo 16. splashscreen
echo 17. inappbrowser
echo 18. console
echo 19. statusbar
echo.
echo Other commands
echo i. Install
echo u. Update
echo v. Current version
echo l. List installed plugins
echo h. Create HelloWorld app
echo.
echo Q. Quit
set /p choice="Enter your choice: "
if "%choice%"=="Q" goto quit
if "%choice%"=="1" phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
if "%choice%"=="2" phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git
if "%choice%"=="3" phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-battery-status.git
if "%choice%"=="4" phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git
if "%choice%"=="5" phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git
if "%choice%"=="6" phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
if "%choice%"=="7" phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
if "%choice%"=="8" phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git
if "%choice%"=="9" phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git
if "%choice%"=="10" phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git
if "%choice%"=="11" phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git
if "%choice%"=="12" phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git
if "%choice%"=="13" phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git
if "%choice%"=="14" phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git
if "%choice%"=="15" phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git
if "%choice%"=="16" phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git
if "%choice%"=="17" phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
if "%choice%"=="18" phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git
if "%choice%"=="19" phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-statusbar.git
if "%choice%"=="l" phonegap local plugin list
if "%choice%"=="v" phonegap -v
if "%choice%"=="u" npm update -g phonegap
if "%choice%"=="i" npm install -g phonegap
if "%choice%"=="h" phonegap create HelloWorld
echo Invalid choice: %choice%
echo.
pause
goto start
:quit
echo.
echo Goodbye
echo.
view raw phonegapcli.cmd hosted with ❤ by GitHub
More...
End-word
I have to say, it is not as easy as PhoneGap 2.9.0 and below, but perhaps the speed of your app increases by this way. The supplied documentation with PhoneGap is, in my honest opinion, bit to short to get you started quickly. I have spend two and a half hours just to go through all the steps (reading, tools and configuration) and make a HelloWorld app. Once you know the drill it is not difficult though.
Sources
Other informational sources and blogs about PhoneGap 3 installment and CLI
http://phonegap.com/blog/2013/07/31/phonegap-30-faq/
http://phonegap.com/blog/2013/07/19/adobe-phonegap-3.0-released/
http://www.infil00p.org/introducing-cordova-3-0-0-for-android/
http://www.raymondcamden.com/index.cfm/2013/7/19/PhoneGap-30-Released--Things-You-Should-Know
https://github.com/mwbrooks/phonegap-cli
http://docs.phonegap.com/en/3.3.0/guide_cli_index.md.html#The%20Command-Line%20Interface
http://www.raymondcamden.com/index.cfm/2013/9/5/How-do-you-check-and-update-your-PhoneGap-version-in-30
Informative blogs and frameworks
jpHolo, Android GUI based on jQuery Mobile: https://github.com/teusink/jpHolo
Fries, Android GUI based on Ratchet: http://jaunesarmiento.me/fries/
How to write Phonegap 3 plugins: http://devgirl.org/2013/09/17/how-to-write-a-phonegap-3-0-plugin-for-android/
Working with PhoneGap 3 plugins: http://www.raymondcamden.com/index.cfm/2013/9/6/Working-with-Plugins-in-PhoneGap-30
Android focused PhoneGap plugins like Toast, Appstore, AndroidPreferences, Share and more: https://gist.github.com/teusink
Chrome Remote Debugging: http://www.raymondcamden.com/index.cfm/2014/1/2/Apache-Cordova-33-and-Remote-Debugging-for-Android
Thank you for reading my blog!
