Apache Cordova Tutorial

Introduction to Apache Cordova Apache Cordova is an open-source mobile development framework. It is a simple project used to build hybrid applications for mobile devices using the three web technologies: HTML, CSS & JAVASCRIPT. Web applications cannot use the native mobile functionalities by default, so we can use the Cordova as a container for connecting our web apps with mobile functionalities. HTML5 designs the user interface, and by the use of CSS, we can add the styles and the applications programming interface written in JavaScript. Apache Cardova

Evaluation of Cordova

PhoneGap is a software development framework which is created by a startup called Nitobi in 2009. It is used to develop native mobile applications with web technologies. In 2011, Nitobi was acquired by Adobe and donated open source core to the Apache Software Foundation, who rebranded PhoneGap as an Apache Cordova.

Features of Apache Cordova

Following are the features of Cordova:
  • Command Line Interface: This feature can be used to installing plugins, for starting projects and for building the process in different platforms.
  • Cordova Core Components: Cordova provides various components that the mobile application needs.
  • Cordova plugins: Provides different APIs which used for implements native mobile functionalities in our JavaScript code.

Advantages of Apache Cordova

The advantages of Cordova are as follows:
  • No need to learn platform-specific Programming languages when working with the Cordova.
  • By using the Apache Cordova, we can develop one app that can be used on different platforms.
  • In the Cordova, the apps can be built easily.
  • With the help of Cordova, you can access the native device functionalities such as camera, geolocation, and SMS.

Platforms available for Cordova App

  • Android
  • Ios
  • Windows
  • Blackberry
  • Firefox os
  • Symbian
  • Tizen
  • Web OS
  • Ubuntu

Cordova Plugins

Cardova Plugin It provides a JavaScript Interface to native components. Some components can be used to utilize the native OS features, which are as follows:
  1. Geolocation
  2. Accelerometer
  3. Camera
  4. Media
  5. Contacts
  • Geolocation:
Geolocation is a component or a Cordova plugin that provides information about device location based on its Global positioning system (GPS) Sensor. It captures the location by longitude and latitude. Geolocation supported only the following three platforms:
  • Android
  • ios
  • Window
Geolocation provides the following methods:
  • getCurrentPosition()
  • watchPosition()
  • clearWatch()
  1. getCurrentPosition() Method:
This function returns the device's current position to the geolocationSuccess callback with a position object as a parameter.
navigator.geolocation.getCurrentPosition(geolocationSuccess,[geolocationError],
                                                                               [geolocationOptions]);
  • geolocationSuccess: This parameter passed the current position of the device.
  • geolocationError: It is optional, and executed where there is an error in finding the location.
  1. watchPosition() Method:
This function returns the device position where there is a change in position is detected. When the device gives the new location, then the geolocationSuccesss callback executes with a position object of a device as a parameter.
varwatchposition=navigator.geolocation.watchPosition(geolocationSuccess,
                                                                                            [geolocationError],
                                                                                    [geolocationOptions]);
  1. clearWatch() Method: This function is used to stop watching for the change in the device location.
Navigator.geolocation.clearWatch(watchId);
  • Accelerometer:
It is also called as a Device-Motion. An accelerometer is a component or another Cordova plugin that Captures the motion of a Device in three directions as x, y, and z-axis. This plugin function supports the following platforms:
  • Android
  • Blackberry Webworks
  • Ios
  • Tizen
  • Windows Phone 7 and 8
  • Windows 8.
The three methods in Accelerometer which are as follows:
  • getCurrentAcceleration()
  • watchAcceleration()
  • clearWatch()
Navigator.accelerometer.getCurrentAcceleration(accelerometrSuccess,accelerometerError);
  1. getCurrentAcceleration() Method:
This function detects the change in movement relative to the current device, in x, y and z dimensions.
varwatchaccelerometer=navigator.accelerometer.watchAcceleration(accelerometerSuccess,
accelerometerError,[accelerometerOption]);
  1. watchAcceleration() Method:
This function detects the change in the movement relative to the current position.
varwatchaccelerometer=navigator.accelerometer.watchAcceleration(accelerometerSuccess,
accelerometerError,[accelerometerOption]);
3. clearWatch() Method: This function stops watching the acceleration referenced by the watchId parameter.
Navigator.accelerometer.clearWatch(watchId);
Camera This function stops watching the acceleration referenced by the watchId parameter. This Cordova plugin provides an API for taking a photo and choose the pictures from the system image gallery. Supported platforms by camera plugin are as :
  • Android
  • Browser
  • Ios
  • Windows
  • OSX

Four methods which comes under in the camera plugin as follows :

  1. getPicture(successCallback,errorCallback, options) Method
Navigator.camera.getPicture(cameraSucces,CameraError,CameraOptions);
By using this function (camera.getPicture), the user can allow taking a photo or picture by using the default camera application.
  1. cleanup() Method:
Navigator.camera.cleanup(OnSuccess, OnFail);
This function removes or deletes the intermediate image files that are stored in temporary storage. This Function supported only the IOS platform.
  • Media
This Cordova Plugin is used in recording and playing the audio songs in Cordova applications. In this Cordova plugin, there exists four Supported platforms are as follows:
  • Android
  • iOS
  • Windows
  • Browser
This plugin Defines a Global Media Constructor which is given as :
var media=new Media(src,  MediaSuccess, [mediaError]);

Parameters containing in the Media Constructor:

  • Src: Path of file.
  • mediaSuccess: This Parameter is optional. This parameter callback when the Media Object has completed the current play of audio.
mediaError: It is also an optional parameter. This Parameter callback when there is an error message.

Methods which come under media plugin:

  • getCurrentAmplitude (): In Audio Files, this function returns the current amplitude.
media.getCurrentAmplitude(mediaSuccess, mediaError]);
  • getCurrentPosition(): This Function returns the current position in Audio file.
Media.getCurrentPosition(mediaSuccess, [mediaError]);
  • play(): Start playing the audio files when this function is called.
Media.play();
  • pause(): pause a playing Audio file.
Media.pause();
  • pauseRecord(): Pause recording of an audio file.
Media.pauseRecord();
  • seekTo(): This function moves the position within the audio file.
Media.seekTo(milliseconds);
  • setvolume(): this function set the volume for audio playback.
Media.setVolume(volume);
  • stop(): this function used to stop playing an audio file.
Media.stop();
  • stopRecord(): Stop recording of an audio file.
Media.stopRecord();
  • Contacts
Contacts is a Cordova plugin which provides access to the device contacts database. Methods Come under the Contacts plugin are as follows: 1. navigator.contacts.create 2. navigator.contacts.find 3.navigator.contacts.pickcontact

Installation of  Apache Cordova For Windows

For installing the Cordova in windows, you have to follow these steps which are as follows:
  1. Cordova runs on the node.js platform, so you have to download first the js.
  2. Download the node.js from this site.
  3. Now, run the downloaded installation file.
  4. After the installation, now to Test the installation, Open a command prompt by the following steps:
a). Search command prompt in your system and Run as administrator. Installing Apache cardova Step by step for windows b). Open it and Type the below command to check the installation of Nodejs: Node --version
  1. If the version of node.js is displayed then, It is installed and working.
  2. After that, you install Git, if not installed on your system. Cordova is used git for some Background processes.
  3. Now, Download and install git from http://git-scm.com.
Installing Apache cardova After clicking on downloads, a new window will appear which shows the different operating system, now click on windows option. Apache Cardova Install step by step
  1. Now, your downloading starts. Run the downloaded file:
i) After file runs, click on the next button as shown in below figure: Apache Cardova Install ii) Then again click on next button. Don't change the settings. Default settings are recommended. Apache cardova installation Guide iii) Click on next until below figure can reach. Configure and Install iv) At last click on the Install button. And after that, Git is Successfully installed in your system.
  1. Install Cordova: Cordova is installed using npm i.e., node package manager. Now, Type the following command to install Cordova:
npm install  -g Cordova
Install Cardova
  1. Now, test the Cordova is successfully installed or not by typing this command:
Cordova --version
Cardova Version If you see the version number of Cordova such as a version that displayed in the above figure, then you have successfully installed Apache Cordova.

Installing different Plugins of Cordova

For installing and managing plugins, you want to install the plugman, which is a useful command line tool. So, First install the Plugman before installing the plugins of Cordova :

Installing Plugman:

For installing a Plugman, first open the Command prompt window & run the following node command:
npm install  -g plugman
Cardova Plugin Install After the installing of plugman, Now installing the different plugins of Cordova:
  1. Camera: Installation of camera plugin by using this command in the command prompt:
npm install Cordova-plugin-camera
Install Cardova Plugin
  1. Geolocation: Installation of geolocation plugin by using this command in the command prompt:
npm install Cordova-plugin-geolocation
Cardova Geolocation Plugin
  1. Accelerometer: Installation of accelerometer plugin by using this command in the command prompt:
npm install Cordova-plugin-device-motion
Cardova accelerometer
  1. Contacts: Installation of contacts plugin by using this command in the command prompt:
npm install Cordova-plugin-contacts
Cardova Contacts
  1. Media: Installation of media plugin by using this command in the command prompt:
npm install Cordova-plugin-media
Cardova Media
  1. Battery Status: This Cordova plugin used for Showing the Battery status of a device.
Installation of Battery Status plugin by using this command in the command prompt:
npm install Cordova-plugin-battery-status
Cardova Battery