Building hybrid mobile apps with cordova or phonegap

Cordova is a platform to build native mobile applications using HTML,CSS and Javascript. Cordova enables you to access native device functionality such as camera,contacts, bluetooth etc using cordova plugins which are normally not available to the web apps.

Difference between cordova and phoneGap

There is some confusion about phoneGap and cordova, as far as codebase is concerned there is no difference between them. Phonegap is a command that encapsulates cordova, major difference is that phonegap has a remote build capability known as phoneGap build whereas cordova supports local builds, you can find more information about this here. In this blog series I will create simple cordova application and add barcode scanner plugins to it.

Cordova command line tools are distributed as "npm package" that is node package manager.
Node is a platform to build network application quickly. Node has been built on chromes v8 engine, and uses javascript as a programming language. Over the time javascript has evolved as powerful server side language all thanks to its huge developer base.To bigin with, lets download node and install it.

Node has a powerful package manager i.e., npm which helps in downloading packages and their dependencies without much of a hastle. Once node has been installed, open the command prompt and type command (npm package manager will be installed along with node)

npm  

you should see all the commands possible with npm
npm

Install cordova

Now you can install cordova using npm package manager.
execute following command:

npm install -g cordova  

Guys behind proxy, to set proxy parameters ,execute following command :

set HTTPPROXY=http://user:password@proxy.domain.com:port
set HTTPS
PROXY=http://user:password@proxy.domain.com:port.

now you can execute "cordova" command to see if it is installed properly, you should see all the cordova related commands.
Once cordova installation is confirmed, execute following command to create cordova project.

cordova create E:\programs\barcodeScanner com.enterprisemobility.barcodeScanner barcodeScanner  

cordova-create This command basically creates a cordova project at folder location "E:\programs\barcodeScanner" with name barcodeScanner and with the name space com.enterprisemobility.barcodeScanner. You can change these parameter names according to your convenient.

Now do "cd barcodeScanner" you should see the following folder structure
folder structure execute the command

cordova platform add android  

this command adds specified platform (i.e., android) to the cordova project, in this case the Android platform. Make sure android SDK is in your "PATH" or else you will run into an error. Similarly if you are on a MAC system and have ios devtools, you can simply execute the command

cordova platform add ios  

this command will create a iOS/android app from HTML,JavaScript and CSS resources present in "WWW" folder in your root directory.

Let's run our cordova app on a device, make sure you are in a cordova app's root directory that is "barcodeScanner" folder and run following commands :

cordova run --device or  
cordova run --emulator  

command will produce following output as in the screen shot
executeCommand application should start on device if device is connected or else you should execute above command with --emulator option so that emulator gets opened. On device/emulator screen you can see default cordova app.
emulator Thats it :) congratulations,you have created your first html5 app/hybrid app with cordova. In my next blog I will explain cordova folder structure in detail and customising the default app.

                                          Customising default cordova/phoneGap app →