PhoneGap is a platform independent technology to build mobile applications for mobile operating systems like iOS(Apple / iPhone), Android(Google / Opensource), Windows(Microsoft / Windows Phone), Amazon OS, Blackberry etc. This tutorial is for beginners who have zero(0) knowledge regarding phoneGap. You will learn from this tutorial

1. A brief idea about what phoneGap is.
2. How to configure your system to run phoneGap apps.
3. How to write phoneGap app
4. Test it on emulator or actual device
5. And a few additional things

To write the phoneGap app properly the developer needs to have a bit of knowledge about HTML, CSS and Javascript/Jquery. The beauty of phoneGap is you do not need to write the codes separately for different operating systems. You need to write the code once then then you can convert the code into runnable for different OS.

This guide shows you how to create applications and deploy them to various native mobile platforms using the cordova command-line interface (CLI). This tool allows you to create new projects, build them on different platforms, and run on real devices or within emulators. The CLI is the main tool to use for the cross-platform workflow. Otherwise you can also use the CLI to initialize project code, then switch to various platforms’ SDKs and shell tools for continued development.

Prerequisites

Before running any command-line tools, you need to install SDKs for each platform you wish to target.

To add support or rebuild a project for any platform, you need to run the command-line interface from the same machine that supports the platform’s SDK. The CLI supports the following combinations:

• iOS (Mac)
• Amazon Fire OS (Mac, Linux, Windows)
• Android (Mac, Linux, Windows)
• BlackBerry 10 (Mac, Linux, Windows)
• Windows Phone 8 (Windows)
• Windows (Windows)
• Firefox OS (Mac, Linux, Windows)

On the Mac, the command-line is available via the Terminal application. On the PC, it’s available as Command Prompt under Accessories.

How to install Cordova CLI

The Cordova command-line tool is distributed as an npm package in a ready-to-use format. It is not necessary to compile it from source.

To install the cordova command-line tool, follow these steps:

1. Download and install Node.js. Following installation, you should be able to invoke node and npm on your command line. If desired, you may optionally use a tool such as nvm or nave to manage your Node.js installation.
2. Install the cordova module using npm utility of Node.js. The cordova module will automatically be downloaded by the npm

on OS X and Linux:

On OS X and Linux, prefixing the npm command with sudo may be necessary to install this development utility in otherwise restricted directories such as /usr/local/share. If you are using the optional nvm/nave tool or have write access to the install directory, you may be able to omit the sudo prefix. There are more tips available on using npm without sudo, if you desire to do that.

on Windows:

The -g flag above tells npm to install cordova globally. Otherwise it will be installed in the node_modules subdirectory of the current working directory.

You may need to add the npm directory to your PATH in order to invoke globally installed npm modules. On Windows, npm can usually be found at C:\Users\username\AppData\Roaming\npm. On OS X and Linux it can usually be found at /usr/local/share/npm.

The installation log may produce errors for any uninstalled platform SDKs.

Following installation, you should be able to run cordova on the command line with no arguments and it should print help text.

Create the HelloWorld App

Go to the directory where you maintain your source code, and run a command such as the following:

It may take some time for the command to complete, so be patient. Running the command with the -d option displays information about its progress.

The first argument hello specifies a directory to be generated for your project. This directory should not already exist, Cordova will create it for you. Its www subdirectory houses your application’s home page, along with various resources under css, js, and img, which follow common web development file-naming conventions. These assets will be stored on the device’s local filesystem, not served remotely. The config.xml file contains important metadata needed to generate and distribute the application.

The second argument com.example.hello provides your project with a reverse domain-style identifier. This argument is optional, but only if you also omit the third argument, since the arguments are positional. You can edit this value later in the config.xml file, but do be aware that there may be code generated outside of config.xml using this value, such as Java package names. The default value is io.cordova.hellocordova, but it is recommended that you select an appropriate value.

The third argument HelloWorld provides the application’s display title. This argument is optional. You can edit this value later in the config.xml file, but do be aware that there may be code generated outside of config.xml using this value, such as Java class names. The default value is HelloCordova, but it is recommended that you select an appropriate value.

Add Platforms

All subsequent commands need to be run within the project’s directory, or any subdirectories within its scope:

Before you can build the project, you need to specify a set of target platforms. Your ability to run these commands depends on whether your machine supports each SDK, and whether you have already installed each SDK. Run any of these from a Mac:

Run any of these from a Windows machine, where wp refers to different versions of the Windows Phone operating system:

Run this to check your current set of platforms:

(Note the platform and platforms commands are synonymous.)

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

Running commands to add or remove platforms affects the contents of the project’s platforms directory, where each specified platform appears as a subdirectory. The www source directory is reproduced within each platform’s subdirectory, appearing for example in platforms/ios/www or platforms/android/assets/www. Because the CLI constantly copies over files from the source www folder, you should only edit these files and not the ones located under the platforms subdirectories. If you use version control software, you should add this source www folder, along with the merges folder, to your version control system. (More information about the merges folder can be found in the Customize Each Platform section below.)

WARNING: When using the CLI to build your application, you should not edit any files in the /platforms/ directory unless you know what you are doing, or if documentation specifies otherwise. The files in this directory are routinely overwritten when preparing applications for building, or when plugins are reinstalled.

If you wish at this point, you can use an SDK such as Eclipse or Xcode to open the project you created. You will need to open the derivative set of assets from the /platforms/ directory to develop with an SDK. This is because the SDK specific metadata files are stored within the appropriate /platform/ subdirectory. (See the Platform Guides for information on how to develop applications within each IDE.) Use this approach if you simply want to initialize a project using the CLI and then switch to an SDK for native work.

Read on if you wish to use the cross-platform workflow approach (the CLI) for the entire development cycle.

Build the App

By default, the cordova create script generates a skeletal web-based application whose home page is the project’s www/index.html file. Edit this application however you want, but any initialization should be specified as part of the deviceready event handler, referenced by default from www/js/index.js.

Run the following command to iteratively build the project:

This generates platform-specific code within the project’s platforms subdirectory. You can optionally limit the scope of each build to specific platforms:

The cordova build command is a shorthand for the following, which in this example is also targeted to a single platform:

In this case, once you run prepare, you can use Apple’s Xcode SDK as an alternative to modify and compile the platform-specific code that Cordova generates within platforms/ios. You can use the same approach with other platforms’ SDKs.

Test the App on an Emulator or Device

SDKs for mobile platforms often come bundled with emulators that execute a device image, so that you can launch the app from the home screen and see how it interacts with many platform features. Run a command such as the following to rebuild the app and view it within a specific platform’s emulator:

Some mobile platforms emulate a particular device by default, such as the iPhone for iOS projects. For other platforms, you may need to first associate a device with an emulator.

Learn more at http://docs.phonegap.com/en