Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Implement A Barcode Scanner Using Ionic Framework

TwitterFacebookRedditLinkedInHacker News

I recently found myself needing to scan barcodes in one of my apps. More specifically I needed to scan quick response (QR) codes. After doing some searching I found that ngCordova had an extension for the Apache Cordova plugin BarcodeScanner which has the ability to scan barcodes in the following formats:

  • QR Code
  • Data Matrix
  • UPC E
  • UPC A
  • EAN 8
  • EAN 13
  • Code 128
  • Code 39
  • ITF

Pretty much all the formats anyone would ever need. The plugin itself makes use of the very popular ZXing library.

To implement the barcode scanner in our Android and iOS application, lets start by creating a new Ionic Framework project.

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

Remember, if you’re not using a Mac, you cannot add and build for the iOS platform.

The next thing we want to do is add the barcode scanner plugin into our project. This can be done by doing the following from a command line:

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

Now technically you can continue to build your application with just the plugin, but we are going to install the AngularJS ngCordova extension set to make our lives a little easier.

Start by downloading the latest ngCordova release and copying the ng-cordova.min.js file into your project’s www/js directory.

To add the extension set into our application we must first include the script before the cordova.js line in our index.html file. It will look something like this:

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="js/ng-cordova.min.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">

With your index.html file set up, now we need to add the extension set to our app.js file. Alter your angular.module line to look something like the following:

angular.module('starter', ['ionic', 'ngCordova'])

It is now time to work some programming magic. Create a controller and include the following method to initialize the barcode scanner. For this example, I did the following:

exampleApp.controller("ExampleController", function($scope, $cordovaBarcodeScanner) {

    $scope.scanBarcode = function() {
        $cordovaBarcodeScanner.scan().then(function(imageData) {
            alert(imageData.text);
            console.log("Barcode Format -> " + imageData.format);
            console.log("Cancelled -> " + imageData.cancelled);
        }, function(error) {
            console.log("An error happened -> " + error);
        });
    };

});

You’ll notice that we had to include $cordovaBarcodeScanner in our controller. The scanner returns an AngularJS promise, so if there is an error or success we’ll know about it.

Just like that, you’ve got a very simple barcode scanner in your Ionic Framework application.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

Support This Site