In this blog post we will add one core plugin which is a part of core Cordova API in the previous versions and one third party plugin.
First we need start by creating a new Cordova project from the steps in the previous blog post.
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 android platform running the below command
cordova platform add android
After adding the Android platform, we will build the Android project and then launch the project in emulator running the below commands.
cordova build android
cordova emulate android
The emulate command will install the application and launch the project in the emulator.
As you can see from the above screen shot , the application is launched on the Android emulator.
Don't worry about some of the information displayed there. Device model is not correct as it is an emulator and hence no model and device name is depreciated which is to return same thing as device model. And yes, the device Cordova which is expected to display Cordova version is incorrect. This is a bug in Cordova 3 which is fixed in patch releases later.
So we are able to add a 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 a Android project, build and launch the Android 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);
}
);
});
Now 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 Android platform , add the Android platform again and then build the Android project and the application again which are almost similar steps we followed earlier.
cordova platform rm android
cordova platform add android
cordova build android
cordova emulate android
And the application will install the application on the emulator and launch the application in the emulator.
Click on the 'Start Barcode Scanner' button to start the bar code scanner plugin.
Since this is an emulator , we cant scan the bar code , but if you are running it on actual Android device, you should be able to scan the barcode.
So i will cancel the action on which the application will show the below message. But if did scan a barcode on Android , you will see the result in this screen.
If you import this project into eclipse, you will see similar errors as observed in the previous blogpost which needs to be fixed by selecting latest Android version in the eclipse configurations.
No comments:
Post a Comment