PhoneGap and jQuery Mobile for Mobile Apps

Recently I started my career using PhoneGap and jQuery Mobile for Hybrid Mobile application development. I decided to write this blog so that others can learn how to setup development environment for PhoneGap and jQuery Moble with ease for their project. This Blog will describe how to set up your development environment for PhoneGap and jQuery Moble for Android.

Note : “PhoneGap is also called as Apache Cordova”

About PhoneGap(Cordova)

Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platforms' native development language. "Although HTML5 is a breakthrough in the mobility space, it couldn’t applaud the way it aimed to achieve it. It doesn’t allow developers to access the native mobile app capability like Camera, GPS, Barcode Scanning, etc. Here is the need of PhoneGap (Codova)".It allows you to package your mobile web application code and resources into a binary app and ready to distribute to Apple, Android, Palm, Symbian, and BlackBerry devices. It is not only the purpose of Cordova to distribute the web application to application store. It is also providing the feature to access the device hardware from web application.

Advantages of PhoneGap (Cordova)

One codebase can be maintained for multiple platforms
Reuse existing web developer skills
Faster development
Based on open standards

PhoneGap (Cordova)Platform Support
The following shows the set of development tools and device APIs available for each mobile platform. The device APIs listed here are provided by the core plugins, additional APIs are available via third-party plugins. Column headers display the CLI's shorthand names.

About jQuery Mobile

jQuery Mobile is completely open source and is one of the most popular Mobile. It is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. It is built on the rock-solid jQuery and jQuery UI foundation, and offers Ajax navigation with page transitions, touch events, and various widgets. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

PhoneGap Requirements

1. Node.js

2. Latest Java JDK

3. Latest Ant

4. Android SDK

Have to set there Paths for "JDK,Ant,Android SDK" in Environment Variables

Configuring Cordova

Installing NodeJs

· Install nodejs from the below link, if it is not already installed on your system.

http://nodejs.org/

· Download the installer, and double click on the installer. The installer provides guidance on the next steps to install.

· Once the installation of nodejs is completed, open command prompt and type the below command to check the installation.

npm –version

· It should show some version number like 1.4.9, if nodejs is installed correctly.

Installing Cordova

· If nodejs is installed, run the below command to install cordova.

npm install –g cordova

if it now works try this npm install cordova

· Once the installation of Cordova is completed, open command prompt and type the below command to check the installation.

cordova –version

· It should show some version number like 3.5.0, if cordova is installed correctly.

· To install specific version

npm install –g cordova@3.1.0

· Also install the plugman tool running the below command:

npm install – g plugman

· It will take some time to download the required packages and complete the process.

Creating a Cordova Project

· Open the command prompt and navigate to the directory created project and enter the following command

Cordova create {project_folder_path} {package_name} {project_name}

Ex : Cordova create Demo com.example.demoapp DempApp

· The first argument Demo specifies a directory to be generated for your project.

· The second argument com.example.demoapp provides your project with a reverse domain-style identifier. This argument is optional.

· The third argument DempApp provides the application's display title. This argument is optional.

Cordova create Demo

Add Platform

· Before you can build the project, you need to specify a set of target platforms.

· Run any of these from a Windows machine

cordova platform add android

cordova platform add blackberry10

cordova platform add windows8

cordova platform add wp7

cordova platform add wp8

· Run any of these from a Mac

cordova platform add android

cordova platform add blackberry10

cordova platform add ios

· Run this to check your current set of platforms

Cordova platform ls

· Run either of the following synonymous commands to remove a platform

cordova platform remove android

cordova platform remove blackberry10

cordova platform remove windows8

Build App

· Run the following command to iteratively build the project:

cordova build

Test the App on an Emulator

· Run a command such as the following to rebuild the app and view it within a specific platform's

emulator:

cordova emulate android

· You can plug handset to computer and test the app directly:

cordova run android

Cordova Add Plugins

· Basic device information (Device API):

cordova plugin add org.apache.cordova.device

· Network Connection and Battery Events:

cordova plugin add org.apache.cordova.network-information

cordova plugin add org.apache.cordova.battery-status

· Accelerometer, Compass, and Geolocation:

cordova plugin add org.apache.cordova.device-motion

cordova plugin add org.apache.cordova.device-orientation

cordova plugin add org.apache.cordova.geolocation

· Camera, Media playback and Capture:

cordova plugin add org.apache.cordova.camera

cordova plugin add org.apache.cordova.media-capture

cordova plugin add org.apache.cordova.media

· Access files on device or network (File API):

cordova plugin add org.apache.cordova.file

cordova plugin add org.apache.cordova.file-transfer

· Notification via dialog box or vibration:

cordova plugin add org.apache.cordova.dialogs

cordova plugin add org.apache.cordova.vibration

· Contacts:

cordova plugin add org.apache.cordova.contacts

· Globalization:

cordova plugin add org.apache.cordova.globalization

· Splash screen:

cordova plugin add org.apache.cordova.splashscreen

· Open new browser windows (InAppBrowser):

cordova plugin add org.apache.cordova.inappbrowser

· Debug console:

cordova plugin add org.apache.cordova.console

View Currently Installed Plugins.

· Run Following command

cordova plugin ls

To remove a plugin

· Run following command

cordova plugin remove <package name>

Update cordova

· Run following command

npm update –g cordova

Uploading created project into eclipse

· Import the created project into eclipse by importing existing code ad showing in fig and click next.

· Import the project from where you created the project in command prompt click ok.

· The project structured will be like this

· Now right Click on project name click properties select Resource in Resource select Resource Filters remove the Project Relative Path Matches ^(assets/www|res/xml/config.xml)(recursive) shown in fig