Creating an Application using PhoneGap (Cordova) with target android

Install Node js will install npm and other necessary component for phonegap utility
Install PhoneGap : npm install -g phonegap
Install Cordova : npm install -g phonegap

Go to Your Workspace Directory and Create a cordova project

cordova create CowsBulls com.zoogaru.games CowsBulls -d

-d option displays information about its progress.

It Creates following forlders

.cordova
merges
platforms --- all added platform code goes here..
plugins --- all installed plugins sits here
www --- root directory for the application assets like css, img, html, js present

WWW Folder
subdirectory houses your application's home page, along with various resources under css, js, and img, which follow common web development file-naming conventions

Setting up for Android
Pre-requiste -- Android platform is available and emulator device setup is done

Set up environment variables
Create A UserVariable ANDROID_TOOLS = D:\Android\sdk\platform-tools;D:\Android\sdk\tools
Add it to Path variable = PATH;ANDROID_TOOLS

Install Java SDK and set path unless java runs from  command line

Install ant from below link zip version or which ever is applicable for your os
http://ant.apache.org/bindownload.cgi
Follow instructions at http://ant.apache.org/manual/install.html to setup ant

The ant.bat script makes use of three environment variables - ANT_HOME, CLASSPATH and JAVA_HOME. Ensure that ANT_HOME and JAVA_HOME variables are set, and that they do not have quotes (either ' or ") and they do not end with \ or with /. CLASSPATH should be unset or empty.

Create ANT_HOME
Create JAVA_HOME

set ANT_HOME=c:\ant

set JAVA_HOME=c:\jdk1.7.0_51
set PATH=%PATH%;%ANT_HOME%\bin

Now Check the ANT SetUp

You can check the basic installation with opening a new shell and typing ant. You should get a message like this

Buildfile: build.xml does not exist!
Build failed

So Ant works. This message is there because you need to write an individual buildfile for your project. With a ant -version you should get an output like

add android platform
D:\workspace\HTML5\CowsBulls>cordova platform add android
Creating android project...
Preparing android project

build
D:\workspace\HTML5\CowsBulls>cordova build
Generating config.xml from defaults for platform "android"
Preparing android project
Compiling app on platform "android" via command "cmd" /c D:\workspace\HTML5\Cows
Bulls\platforms\android\cordova\build
Platform "android" compiled successfully.

run in device
D:\workspace\HTML5\CowsBulls>cordova run
Generating config.xml from defaults for platform "android"
Preparing android project
Running app on platform "android" via command "cmd" /c D:\workspace\HTML5\CowsBu
lls\platforms\android\cordova\run --device
Platform "android" ran successfully.

Our Application might use internet so enable internet plugin
install git command line tool from http://git-scm.com/
Access files on device or network (File API):

D:\workspace\HTML5\CowsBulls>phonegap local plugin add https://git-wip-us.apache
.org/repos/asf/cordova-plugin-file.git
[phonegap] adding the plugin: https://git-wip-us.apache.org/repos/asf/cordova-pl
ugin-file.git
[phonegap] successfully added the plugin

D:\workspace\HTML5\CowsBulls>phonegap local plugin add https://git-wip-us.apache
.org/repos/asf/cordova-plugin-vibration.git
[phonegap] adding the plugin: https://git-wip-us.apache.org/repos/asf/cordova-pl
ugin-vibration.git

[phonegap] successfully added the plugin

Add DialogBox and Vibration tool for notifications

D:\workspace\HTML5\CowsBulls>phonegap local plugin add https://git-wip-us.apache
.org/repos/asf/cordova-plugin-dialogs.git
[phonegap] adding the plugin: https://git-wip-us.apache.org/repos/asf/cordova-pl
ugin-dialogs.git

[phonegap] successfully added the plugin

Open new browser windows (InAppBrowser):

$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

Debug console:


$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

To List all Plugins

D:\workspace\HTML5\CowsBulls> phonegap local plugin list
[phonegap] org.apache.cordova.console
[phonegap] org.apache.cordova.dialogs
[phonegap] org.apache.cordova.file
[phonegap] org.apache.cordova.inappbrowser

[phonegap] org.apache.cordova.vibration

The config.xml File
Many aspects of an app's behavior can be controlled with a global configuration file, config.xml
config.xml file can be found in the top-level www directory
 D:\workspace\HTML5\CowsBulls\www

Read ..
http://docs.phonegap.com/en/edge/config_ref_index.md.html#The%20config.xml%20File

Setting Global Level preferences
Full Screen true/false and Orientation portrait/landscape
<preference name="Fullscreen" value="true" />
<preference name="Orientation" value="landscape" />

The came config gets copied to the folder
D:\workspace\HTML5\CowsBulls\platforms\android\assets\www

There is also one config file which android specific
D:\workspace\HTML5\CowsBulls\platforms\android\res\xml\
where you see device specific plugin informations are added e.g
    <feature name="Notification">
        <param name="android-package" value="org.apache.cordova.dialogs.Notification" />
    </feature>

NOW LETS ENABLE OUR HTML5 GAME in Cordova

drop all the html file to application/www folder
run the cordova build command
Check all the files got copeid to
D:\workspace\HTML5\CowsBulls\platforms\android\assets\www

Change the <content src="index.html" /> to
<content src="home.html" /> to point to your application landing page

And you are done !!

Now Create a Icon for the android
create a image icon using GIMP or photoshop
use the android asset tool and generate icon from the image.
use http://makeappicon.com/ for creating icon for android/ihone device

Splash Screen
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html

Create the release version
cordova build --release

Signing process

keytool -genkey -v -keystore my-release-key.keystore-alias alias_name -keyalg RSA -keysize 2048 -validity 10000

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore my_application.apk alias_name

jarsigner -verify my_signed.apk

zipalign -v 4 your_project_name-unaligned.apk your_project_name.apk