Similar to Android project, we will add one core plugin which was a part of Cordova core API's till previous releases. And then we will continue to add one third party plugin.
First we need to create a Cordova project following the steps from the previous blog.
Device plugin
We will add Device plugin which was a part of Cordova core API's in the previous versions of Cordova.
The device plugin is available the following git repository.
https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
So run the following command to add the device plugin to the project created.
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
Now that we have added the device plugin to the project, let us use the Device API in our project.
We will make some simple changes to test if the functionality related to Device API is working or not.
Modify your onDeviceReady function in index.js file of your <Project Name>\www\js directory to display the information related to device.
The modifications(in red) are given below.
onDeviceReady: function() {
app.receivedEvent('deviceready');
var element = document.getElementById('deviceProperties');
element.innerHTML = 'Device Name: ' + device.name + '<br />' +
'Device Cordova: ' + device.cordova + '<br />' +
'Device Platform: ' + device.platform + '<br />' +
'Device UUID: ' + device.uuid + '<br />' +
'Device Model: ' + device.model + '<br />' +
'Device Version: ' + device.version + '<br />';
},
Now we will make modifications to index.html file in <Project Name>\www\ folder to display the device information retrieved from the above functions.
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
<p id="deviceProperties">Loading device properties...</p>
</div>
<div>
Now we will add ios platform by running the below command
cordova platform add ios
Now import this project into XCode, launch the emulator and see the device related changes in the app.
It displays the information like cordova version, device platform, device model and the os on device correctly. Since Device name is depreciated don't worry about the undefined displayed.
So we are able to add the core Device API to the Cordova 3 project , make changes to the html and javascript files to use the functions from Device API and create an iOS project, build and launch the iOS project using Cordova Device API.
Now we will add another third party Cordova plugin to the project we created.
Barcode scanner plugin
The Barcode scanner plugin is available the following link.
Run the below command to add the Barcode scanner to the project.
cordova plugin add https://github.com/wildabeast/BarcodeScanner
Now we will use the functionality from this barcode scanner in project we created.
Add a button to trigger the bar code scanner in index.html file of <Project Name>\www\ folder.
The lines of code that needs to be added are indicated in red. The other lines are already there, either from the project creation or from the previous modifications.
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
<p id="deviceProperties">Loading device properties...</p>
</div>
<div>
<button id="btnStart">Start Barcode scanner</button>
</div>
Add the reference of button to the index.js file at <Project Name>\www\js directory.
The lines of code that needs to be added are indicated in red. The other lines are already there either from the project creation or from the previous modifications.
onDeviceReady: function() {
app.receivedEvent('deviceready');
var element = document.getElementById('deviceProperties');
element.innerHTML = 'Device Name: ' + device.name + '<br />' +
'Device Cordova: ' + device.cordova + '<br />' +
'Device Platform: ' + device.platform + '<br />' +
'Device UUID: ' + device.uuid + '<br />' +
'Device Model: ' + device.model + '<br />' +
'Device Version: ' + device.version + '<br />';
var btnStart = document.getElementById('btnStart');
},
Add this code at the end of the file.
btnStart.addEventListener('click', function(){
cordova.plugins.barcodeScanner.scan(
function (result) {
alert("We got a bar code\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
},
function (error) {
alert("Scanning failed: " + error);
}
);
});
We have added the bar code scanner plugin, added a button to trigger the barcode scanning and code to trigger the barcode scanner plugin up on clicking the button.
Now we need to remove the existing iOS platform , add the iOS Platform again and then build the iOS project and the application again and launch it from XCode.
And the application will install the application on the emulator and launch the application in the emulator.
We can see a button at the bottom of screen, which is created by us to trigger Barcode scanner functionality.
Click on button and if you are running on a simulator like me, you will see a failure message like the below. Else
the barcode scanner should be at work.
