Cross Platform Application from PhoneGap with HTML5, JavaScript

Leave a Comment / App Development / By

Developing a mobile application needs some innovative, useful thoughts and programming skill. Since my last article described well about Cross Platform Application Development, let’s starts from Installing the Cordova CLI (Command line interface). All we need is to install PhoneGap framework on your computer.

Installing Cordova PhoneGap through CLI:

The Cordova command-line interface is a tool and it is distributed as an npm package. In order to compile HTML and JavaScript, it is necessary to be installed

In order to get installed the Cordova command-line tool you should have to follow these steps:

    1. Download and install Node.js. Following installation, you should be able to invoke node and npm on your command line.
    1. Download and install a git client, if you don’t already have one. Following installation, you should be able to invoke git on your command line.
  1. Install the Cordova module using npm utility of Node.js. The Cordova module will automatically be downloaded by the npm utility.
  • on OS X and Linux:
$ sudo npm install -g cordova

On OS X and Linux, You should prefix the npm command with sudo to install this development utility, or else restricted directories such as /usr/local/share..

  • on Windows:
C:\>npm install -g cordova

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.

Let’s start with creating a Cordova application:

In node.js get your appropriate directory where you want to where you maintain your source code. Enter the following code in that.

$ cordova create application com.folder.application MyFirstApp

To complete creating the application it will take a while. In this command the first argument “application” indicates directory to be generated for your profile. And be careful that the directory should not be already edited manually. Cordova itself create these directories. Its subdirectorywww holds your application’s home page, along with various resources like,cssjs, and,img which follow common web development file-naming conventions.

The fileconfig.xml will be having metadata which is needed to generate and distribute the application.

In the command second argument providescom.folder.application your project with a reverse domain-style identifier. You can edit this value later in the fileconfig.xml, but do be aware that there may be code generated outside of usingconfig.xml 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 isMyFirstApp the title of the application. This is also can be edit from the fileconfig.xml.

Adding the various Platforms to the project:

In order to add platforms, you should have to be in the same directory or location where ever you have created the project, to do that type the following command.

  $ cd application

In Order to build your 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:


    $ cordova platform add ios
    $ cordova platform add amazon-fireos
    $ cordova platform add android
    $ cordova platform add blackberry10
    $ cordova platform add firefoxos
    $ cordova platform add wp7
    $ cordova platform add wp8
    $ cordova platform add windows8
    $ cordova platform add amazon-fireos

So Here Run this to you have to check what set of platforms is installed in your machine:

  $ cordova platforms ls

Run the following commands to remove a platform:

    $ cordova platform remove blackberry10
    $ cordova platform rm amazon-fireos
    $ cordova platform rm android

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 orplatforms/ios/wwwplatforms/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.

You should be very careful that you should not edit any files in the directory/platforms/ Unless the necessity of edit needs.

Building Your application:

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

Run the following command to iteratively build the project:

    $ cordova build

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

    $ cordova build ios

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

    $ cordova prepare ios
    $ cordova compile ios

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.

Once you have done with these works, We have two options to work with it.

    1. Build and run in either testing device or in the emulator.
  1. Use an SDK such as Eclipse or Xcode. and build from there.

Using the SDK such as Eclipse or Xcode Is best practice to develop an application. To do this you need to import the folders which are Cordova created. and it is always better to copy the folder after the build command for appropriate OS and use it alone. because we can always add some of our features for our application from our native IDE.

For more information see the Platform Guides to develop an application from various IDE. Simply initialize a project using the CLI and then switch to an SDK for native work.

Leave a Reply