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.
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
It provides a JavaScript Interface to native components. Some components can be used to utilize the native OS features, which are as follows:- Geolocation
- Accelerometer
- Camera
- Media
- Contacts
- Geolocation:
- Android
- ios
- Window
- getCurrentPosition()
- watchPosition()
- clearWatch()
- getCurrentPosition() Method:
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.
- watchPosition() Method:
varwatchposition=navigator.geolocation.watchPosition(geolocationSuccess, [geolocationError], [geolocationOptions]);
- clearWatch() Method: This function is used to stop watching for the change in the device location.
Navigator.geolocation.clearWatch(watchId);
- Accelerometer:
- Android
- Blackberry Webworks
- Ios
- Tizen
- Windows Phone 7 and 8
- Windows 8.
- getCurrentAcceleration()
- watchAcceleration()
- clearWatch()
Navigator.accelerometer.getCurrentAcceleration(accelerometrSuccess,accelerometerError);
- getCurrentAcceleration() Method:
varwatchaccelerometer=navigator.accelerometer.watchAcceleration(accelerometerSuccess, accelerometerError,[accelerometerOption]);
- watchAcceleration() Method:
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 :
- 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.
- 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
- Android
- iOS
- Windows
- Browser
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.
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
Installation of Apache Cordova For Windows
For installing the Cordova in windows, you have to follow these steps which are as follows:- Cordova runs on the node.js platform, so you have to download first the js.
- Download the node.js from this site.
- Now, run the downloaded installation file.
- After the installation, now to Test the installation, Open a command prompt by the following steps:
- If the version of node.js is displayed then, It is installed and working.
- After that, you install Git, if not installed on your system. Cordova is used git for some Background processes.
- Now, Download and install git from http://git-scm.com.
- Now, your downloading starts. Run the downloaded file:
- Install Cordova: Cordova is installed using npm i.e., node package manager. Now, Type the following command to install Cordova:
npm install -g Cordova
- Now, test the Cordova is successfully installed or not by typing this command:
Cordova --versionIf 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 plugmanAfter the installing of plugman, Now installing the different plugins of Cordova:
- Camera: Installation of camera plugin by using this command in the command prompt:
npm install Cordova-plugin-camera
- Geolocation: Installation of geolocation plugin by using this command in the command prompt:
npm install Cordova-plugin-geolocation
- Accelerometer: Installation of accelerometer plugin by using this command in the command prompt:
npm install Cordova-plugin-device-motion
- Contacts: Installation of contacts plugin by using this command in the command prompt:
npm install Cordova-plugin-contacts
- Media: Installation of media plugin by using this command in the command prompt:
npm install Cordova-plugin-media
- Battery Status: This Cordova plugin used for Showing the Battery status of a device.
npm install Cordova-plugin-battery-status