Saturday, January 18, 2014

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 CowsBulls -d

-d option displays information about its progress.

It Creates following forlders

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 cssjs, 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
Follow instructions at 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.


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

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
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
Access files on device or network (File API):

D:\workspace\HTML5\CowsBulls>phonegap local plugin add https://git-wip-us.apache
[phonegap] adding the plugin:
[phonegap] successfully added the plugin

D:\workspace\HTML5\CowsBulls>phonegap local plugin add https://git-wip-us.apache
[phonegap] adding the plugin:

[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
[phonegap] adding the plugin:

[phonegap] successfully added the plugin

Open new browser windows (InAppBrowser):

$ phonegap local plugin add

Debug console:

$ phonegap local plugin add

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

Read ..

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

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


drop all the html file to application/www folder
run the cordova build command
Check all the files got copeid to

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 for creating icon for android/ihone device

Splash Screen

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

No comments:

Post a Comment