Thursday 14 November 2013

Basics of PhoneGap

What is PhoneGap?

PhoneGap is a mobile development framework produced by Nitobi, purchased by Adobe Systems. It enables the mobile developers to build the applications by using HTML5, CSS3 and JavaScript instead of platform-specific languages like JAVA (Android) or Objective-C (IOS). The core engine for PhoneGap is also 100% open source, under the Apache Cordova project.


By Using PhoneGap, you can build cross platform applications including Google Android, Apple IOS, Windows Phone, BlackBerry, HP WebOS, Symbian, and Bada.

The resulting applications are hybrid, meaning that they are neither truly native (because all layout rendering is done via web views instead of the platform's native UI framework) nor purely web-based (because they are not just web apps, but are packaged as apps for distribution and have access to native device APIs).

When developing PhoneGap applications, just keep in mind that you are running code inside of a web browser.   You develop your applications using HTML and JavaScript, not native code.

 

PhoneGap Application Packaging and Distribution

 

PhoneGap applications are developed using HTML, CSS, and JavaScript, however the final product of a PhoneGap application is a binary application archive that can be distributed through standard application ecosystems.

 


For iOS applications the output is an IPA file) (iOS Application Archive), for Android applications the output is an APK file) (Android Package), for Window Phone the output is a XAP file (Application Package), etc... These are the same application packaging formats used by "native" applications, and can be distributed through the appropriate ecosystems (iTunes Store, Android Market, Amazon Market, BlackBerry App World, Windows Phone Marketplace, etc...)

 

Installing Apache Cordova and building Android project

 

Before installing Cordova first make sure you have installed JDK and configure system environment and after you should install these things first that are mentioned in steps.


Step 1: Download and Install node.js from http://nodejs.org/.
            And check for verify it installed properly or not.

open window cmd and type "node --version"


Step 2:  Download the Apache Ant Zip file(Apache Ant.) and Unzip it and set path up to \bin in system environment.And verify to check the version type on cmd "ant -version"

 Step 3: Download the Android Developer Tools and make sure that it is available in the system classpath up to \platform-tools

Step 4: Now install  cordova with nodejs.

Open the cmd and type  "npm install -g cordova", So that you can see like below



          To check the cordova successfully installed or not, type at cmd "cordova -version" it gives the version name if installed successfully. Like below,

 

If you want to uninstall use this command

> npm uninstall cordova -g 

Step 5: Lets start with "HellowWorld", find your project folder and run the command 

> cordova -d create HellowWorld

Now you can see a folder with a name "WWW" and it will contain "index.html" , you can modify index.html according to you.

Step 6: Now adding the platform for the project by using ,

\HellowWorld> cordova platform add android

Step 7: Now project setup is completed, you can build your project by using below command

\HellowWorld> cordova build

 After successful build you can knew the binary in

HellowWorld/platforms/android/bin/ XXXX.apk

 

-------------------------- END -----------------------------