This document provides an overview of Cordova plugins, including how they allow access to native device capabilities from web apps. It discusses the platforms supported by Cordova plugins and describes the command line interface for searching, adding, listing, and removing plugins. Several specific plugins are covered, such as those for accessing the device, vibration, network information, dialogs, battery status, and camera. The document provides code examples for how to use APIs from these plugins.

1. CORDOVA TRAINING
SESSION: 7 - CORDOVA PLUGINS

2. INTRODUCTION
 A plugin provides JavaScript interface to native components.
 They allow your app to use native device capabilities beyond what is available to pure
web apps.

3. PLATFORM SUPPORT
 Cordova plugins support the following platforms mainly:
 Android
 iOS
 Windows Phone 8
 Windows Phone 8.1, 10
 Blackberry 10

4. COMMAND LINE INTERFACE
/
CLI

5. SEARCHING FOR A PLUGIN
 Cordova provides CLI / Command Line Interface for searching for a plugin.The syntax
is:
 cordova plugin search <keyword>

6. ADDING A PLUGIN
 Cordova provides CLI / Command Line Interface for adding a plugin.The syntax is:
 cordova plugin add <plugin-name>

7. VIEWING INSTALLED PLUGINS
 Cordova provides CLI / Command Line Interface for listing the installed plugin(s). The
syntax is:
 cordova plugin ls
 cordova plugin list

8. REMOVE INSTALLED PLUGINS
 Cordova provides CLI / Command Line Interface for removing the installed plugin(s).
The syntax is:
 cordova plugin remove <plugin_name>
 cordova plugin rm <plugin_name>

9. PLUGINS

10. DEVICE
 Cordova provides the following plugin to access the device details. The CLI command
is:
 cordova plugin add cordova-plugin-device

11. DEVICE
 Once the plugin is added, we will get the following attributes:
 device.cordova
 device.model
 device.platform
 device.uuid
 device.version
 device.manufacturer
 device.isVirtual
 device.serial

12. VIBRATION SERVICE
 Cordova provides the following plugin to access the vibration feature/service. The CLI
command is:
 cordova plugin add cordova-plugin-vibration
 Once the plugin is added, we can access the vibration service using the following API:
 navigator.vibrate(time);

13. NETWORK INFORMATION
 Cordova provides the following plugin to access the network feature/service. The CLI
command is:
 cordova plugin add cordova-plugin-network-information
 Once the plugin is added, we can access the network service using the following API:
 navigator.connection

14. NETWORK INFORMATION
 The network type can be detected using the following property:
 navigator.connection.type
 The type can be either of the following:
 Connection.UNKNOWN | Connection.ETHERNET | Connection.WIFI
 Connection.CELL_2G | Connection.CELL_3G | Connection.CELL_4G
 Connection.CELL | Connection.NONE

15. DIALOGS
 Cordova provides the following plugin to implement native device dialogs. The CLI
command is:
 cordova plugin add cordova-plugin-dialogs
 Once the plugin is added, we will get the following methods:
 navigator.notification.alert
 navigator.notification.confirm
 navigator.notification.prompt
 navigator.notification.beep

16. DIALOGS - SYNTAX
 navigator.notification.alert(message, alertCallback, [title], [buttonName])
 navigator.notification.confirm(message, confirmCallback, [title], [buttonLabels])
 navigator.notification.prompt(message, promptCallback, [title], [buttonLabels],
[defaultText])
 navigator.notification.beep(times);

17. BATTERY STATUS
 Cordova provides the following plugin to access device battery information. The CLI
command is:
 cordova plugin add cordova-plugin-battery-status
 Once the plugin is added, we will get the following events:
 batterystatus
 batterylow
 batterycritical

18. BATTERY STATUS
 window.addEventListener("batterystatus", onBatteryStatus, false);
function onBatteryStatus(status) {
console.log("Level: " + status.level + " isPlugged: " + status.isPlugged);
}

19. BATTERY STATUS
 window.addEventListener("batterylow", onBatteryLow, false);
function onBatteryLow(status) {
alert("Battery Level Low " + status.level + "%");
}

20. BATTERY STATUS
 window.addEventListener("batterycritical", onBatteryCritical, false);
function onBatteryCritical(status) {
alert("Battery Level Critical " + status.level + "%nRecharge Soon!");
}

21. CAMERA
 Cordova provides the following plugin to access device battery information. The CLI
command is:
 cordova plugin add cordova-plugin-camera
 To capture an image, we can use the getPicture method. The syntax is:
 camera.getPicture(successCallback, errorCallback, options);

22. CAMERA
navigator.camera.getPicture(onSuccess, onFail, {quality:50, destinationType:
Camera.DestinationType.DATA_URL});
function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}
function onFail(message) { alert('Failed because: ' + message);}

23. CAMERA
 Camera options:
 quality : 0 – 100
 destinationType : DATA_URL | FILE_URI
 encodingType : JPEG | PNG
 mediaType : PICTURE | VIDEO
 cameraDirection : FRONT | BACK

24. THANK YOU