What is Phonegap? How to use it?

PhoneGap is a mobile development framework produced by Nitobi, purchased by Adobe Systems in 2011. It enables software programmers to build applications for mobile devices using JavaScript, HTML5, and CSS3, instead of device-specific languages such as Objective-C. Its being called as Apache Cardova once after apache purchased it.

What’s the difference between PhoneGap and Cordova?
In October 2011, PhoneGap was donated to the Apache Software Foundation (ASF) under the name Apache Cordova It will remain free and open source under the Apache License, Version 2.0. Think about Cordova’s relationship to PhoneGap like WebKit’s relationship to Safari or Chrome.

PhoneGap Intro
PhoneGap is a free and open source framework that allows you to create mobile apps using the web technologies you’re already familiar with: HTML, CSS, and JavaScript. Use standardized web APIs and target the platforms you care about. Download PhoneGap for free right now and try it out.

PhoneGap was born out of iPhoneDevCamp in 2008, where it was created simply because there were not a lot of Objective-C developers in comparison to Web Developers. The challenge was to put together a framework that would allow web developers to use HTML, CSS, and JavaScript to code applications that could take advantage of the native functionality of the mobile device, such as the Camera, Storage, and GeoLocation features. Initially built to work with the iPhone, within a year PhoneGap was growing and beginning to support Android too. Now, nearly 4 years old, PhoneGap is one of the most talked about toolkits for developing mobile applications and supports a much wider range of mobile devices including iOS, Android, Blackberry, Symbian, webOS, WP7, and Bada.

 At the time of publication (e.g. January, 2012), the framework currently supports the Accelerometer, Camera, Compass, Contacts, File, Geolocation, Media, Network, Notifications (Alert, Sound, and Vibrate) and Storage device APIs. There is full support for all of these features in the newer iOS Devices (3GS+) and Android. For more details on support for Blackberry, WP7, Sybian, webOS, and Bada devices

How to start with?

Its pretty simple steps to follow..

1. Install node.js and phonegap in your machine.

2. Create an app using command prompt line

3. Write your own js and index.html file in the newly created app

4. Upload to phonegap build

5. Test in multiple devices

How to install?

Prerequisites:

NodeJS onto your workstation to run AppBuilder:
1. Download the NodeJS installer for your system from http://nodejs.org/download/.
2. Run the NodeJS installer, and follow the prompts in the Install Wizard.
3. Verify that the node.js folder is in your System Environment PATH.
4. Open a command prompt, and enter npm to verify the NodeJS package manager is
installed properly.

Just follow the below link to install phonegap and cross check once in command prompt whether installation is success or not.

http://phonegap.com/install/

Ensure that you have NodeJS installed, then open your commandline and run the following:

C:\> npm install -g phonegap

Once installation completes, you can invoke phonegap on command line for further help.

How to use?

Before you start of using it, make sure to know the basics of HTML,JS and CSS.

$ phonegap create my-app
$ cd my-app
$ phonegap run android
You can learn it from here

Else you can zip your application file and logon to https://build.phonegap.com/ and create an adobeid if you are new to build. Once logged in..Then create app name and description for that and finally upload your build.

Now a QR code will generate for your app. Just by using QR code scanner in your device, install your own app and test the functionality. Thats it 😀

Screenshots:

1. Install nodejs

21-05-2014 13-24-36

 

2. Install phonegap

21-05-2014 13-24-48

 

3. After installation open command prompt and enter phonegap create testapp(here i named it testapp, you can have your own name). This will create testapp folder in users/account here.

21-05-2014 14-26-05

 

4. Once after the project created, you can browse to www folder of your testapp and change content in index.html and write your own script in js etc.

21-05-2014 14-26-53

21-05-2014 14-28-56

21-05-2014 14-29-10

5. Now you can upload your testapp to https://build.phonegap.com

Here create an adobe id and login to your account. Prior to that create an github account and install github for windows as shown in below.

5.1 Install github for windows

21-05-2014 13-30-42

 

5.2 Upload your testapp repository to your account using this github desktop. Once after upload, do commit and click publish. Now you can see your repository like below..

21-05-2014 13-29-20

 

5.3 After publishing you can see your repository in your account like below..

21-05-2014 13-19-51

5.4 Copy your gitclone url from the image shown below

21-05-2014 14-43-09

5.5 Now login to your phonegap build and paste the clone url like shown below

21-05-2014 14-45-09

5.6 your repository will link up to phonebuild like show below

21-05-2014 13-04-03

5.7 Once done, click enable debugging and then click ready to build

21-05-2014 13-04-12

5.8 Now QR code will be generated in your phonegap account. Just install QR code scanner in your smartphone and scan the code to install the testapp apk in your smartphone.

21-05-2014 13-04-50

 

Thats it, Now you can install apk file in your phone and start using it 😀

If you are not holding devices to test..then just install bluestack in your machine 🙂

Hope you love it..Stay tuned to Sathyalog 😀

Video Tutorials:

Adobe: http://tv.adobe.com/show/adc-presents-phonegap/

Online Tutorials:

http://www.raywenderlich.com/30734/phonegap-tutorial-a-cross-platform-zombie-app

http://code.tutsplus.com/tutorials/phonegap-from-scratch-introduction–mobile-9171

http://hiediutley.com/2011/03/14/phonegap-tutorial-series-1-project-structure-and-internals/

http://cleancodedevelopment-qualityseal.blogspot.in/2012/12/first-phonegap-app-with-android-using.html

Guide: http://docs.phonegap.com/en/3.4.0/index.html

Examples:

https://www.mediafire.com/?81f5a7opdyonpr7

http://laphonegap.org/HelloLAPhoneGap.zip

docs/references:

http://phonegap.com/blog/build/getting-started-with-phonegap-and-phonegap-build/

http://docs.phonegap.com/en/edge/guide_overview_index.md.html#Overview

http://coenraets.org/blog/phonegap-tutorial/

documentation: http://docs.phonegap.com/en/3.3.0/index.html

For eclipse installation: Clickhere

You can download complete reference of phonegap 2.7 here