Adding barcode scanner functionality to the hybrid app packaged using cordova

In my previous blogs we saw how to create cordova, customize the default cordova app and created a hello world app from scratch.

We can do many more things apart from just creating a hello world app in HTML, CSS, and JavaScript but it has nothing to do with cordova, app from these technologies can be created without Cordova just like as you create any Web application, Once you are sure about its functionality you can copy app related resources into www folder (which we saw in previous blog) and execute commands like "cordova platform add android" to create android app from a given HTML,CSS,Javascript files.

Lets look into adding more cordova specific functionalities that is adding plugins to the project. You might be wondering

What are cordova plugins?

Usually device resources (e.g., camera) are not available to the web apps, to access these resources we write code in a device native languages (e.g., Java for android, Objective C for iOS) and invoke this code using javascript api. This piece of software is referred to as Plugins in cordova, there are huge amount of plugins that are available which provide different functionalities. You can get a list of plugins from here.

These plugins would help web developer to concentrate on writing applications in his proficient technologies like javascript,html5 and css rather than worrying about different programming languages used for different platform.

In this blog will add a barcode scanner functionality to cordova app which we built in previous blog.
Navigate to the folder where you have created cordova application in my case it is barcodeScanner folder at path E:\programs\barcodeScanner
you should see the following folder structure :
folder structure

You can get the barcodeScanner plugin from here. You can either download the repo, save it on a local drive and add it to the cordova app by mentioning it's path in "cordova add plugin" command or you can add it by specifying the github repository url as a part of "cordova add plugin command", but to add directltly from git repo URL you need to have git tool installed in your system.You can download Git tool from here.

I will explain both the methods of adding plugin.

Lets head to the barcodeScanner repository, here you can get the information about barcode scanner plugin,various supported barcode formats from this barcode plugin, currently supported platforms (like android,iOS, bbos etc.) .

method-1 : adding barcode scanner plugin with git repository URL

Make sure git tool is installed and is available at system path.
Lets navigate to cordova working directory (i.e., E:\programs\barcodeScanner) in command prompt, and execute the following command

cordova plugin add https://github.com/wildabeast/BarcodeScanner  

where "https://github.com/wildabeast/BarcodeScanner" is a barcode scanner repository url.
You should see the confirmation message in the command prompt as shown below:

barcodeplugin

Barcode scanner plugin is successfully installed. Under plugins folder you can see the files related to barcodeScanner:

plugin_folder

now you can call the barcode scanner api in javascript.

method-2 : adding barcode scanner plugin from local files

If you don't want to install a git tool and want to add a plugin to the cordova app, you can do so by downloading plugin manually to the local directory and specifying its path in a plugin add command, however git is a handy tool,I strongly recommend you to install git.
Let's head to the repository url : https://github.com/wildabeast/BarcodeScanner and click on a download Zip button at right hand side of the web page
download_zip Extract this zip to a convinient location on the hard drive.I have extracted it to the location E:\programs\BarcodeScanner-master
Let's add plugin to the cordova app, execute the foolowing command

cordova plugin add E:\programs\BarcodeScanner-master  

where "E:\praograms\BarcodeScanner-master" is a location of barcode scanner plugin. Remember, if you have already installed barcode scanner plugin using method-1, you need to remove the plugin before adding it again by executing the following command

cordova plugin remove com.phonegap.plugins.barcodescanner  

Where "com.phonegap.plugins.barcodescanner" is a plugin name.

You should see the following message on successfull installation of barcode scanner.

Let's invoke a barcodeScanner plugin from within the cordova app.

Navigate to www folder in a cordova working directory, open index.html in your favourite editor, in my previous blog i customized this index.html to display "hello world" alert box on click of a "scan" button.
index.html is as follows :

In the above html file, locate "scan()" function at line 52. This function gets called on click of a "scan" button and is displaying "hello world" alert.

Let's invoke barcodeScanner plugin on click of a "scan" button. Barcode scanner plugin can be invoked by calling the following function :

cordova.plugins.barcodeScanner.scan()  

Lets replace the scan() function content with "cordova.plugins.barcodeScanner.scan()" function.

New scan function would be:

 function scan(){
             cordova.plugins.barcodeScanner.scan(
      function (result) {
          alert("We got a barcode\n" +
                "Result: " + result.text + "\n" +
                "Format: " + result.format + "\n" +
                "Cancelled: " + result.cancelled);
      }, 
      function (error) {
          alert("Scanning failed: " + error);
      }
   );
            }

Where first anonymous function in "cordova.plugins.barcodeScanner.scan()" is a success callback, this function gets called on a successfull barcode scanning and second anonymous function gets called, if any error occurs during scanning a barcode.

Updated index.html file would be as follows :

Let's go ahead and build the cordova app for android platform. Execute the following command

cordova run --device  
-or-
cordova run --emulator  

Make sure either device is connected or simulator is runing and execute the suitable command for the same.

Give it a some time, app should appear on the device or emulator

Click on the "scan" button, to scan barcode

As soon as app encounters the barcode (or QRcode as in the above example), app scans it, on success, success callback function is invoked, where we are alerting the contents of the barcode.
on_barcode_success

That's our barcodeScanner app built using cordova, minimal HTML5,javascript and CSS.