Add Barcode Scanning Functionality To Your Ionic App

Being able to scan a barcode is a convenient way to share bits of data. Whether you’re using QR codes to share contact information or traditional barcodes for product information, being able to scan an image is more convenient than either entering a long code or similar.

Previously I wrote about scanning barcodes using Ionic Framework 1, but with Ionic 2 being all the rage I thought it would be worth revisiting for Angular.

In this guide we’re going to look at the PhoneGap BarcodeScanner plugin. It is capable of scanning the following barcode types on Android:

• QR_CODE
• DATA_MATRIX
• UPC_E
• UPC_A
• EAN_8
• EAN_13
• CODE_128
• CODE_39
• CODE_93
• CODABAR
• ITF
• RSS14
• PDF417
• RSS_EXPANDED

And it can scan the following barcode types on iOS:

• QR_CODE
• DATA_MATRIX
• UPC_E
• UPC_A
• EAN_8
• EAN_13
• CODE_128
• CODE_39
• ITF

That information was taken right out of the official documentation. Now you’re probably thinking that this is a PhoneGap plugin so it won’t work for Ionic 2. The reality is that PhoneGap based on Apache Cordova just like Ionic Framework, so they can all play nice together.

With the background out of the way, let’s start creating a project that can use this plugin. From your Command Prompt (Windows) or Terminal (Mac and Linux), execute the following:

ionic start BarcodeProject blank --v2
cd BarcodeProject
ionic platform add ios
ionic platform add android

A few important things to note. First, if you’re not using a Mac you cannot add and build for the iOS platform. Second, you must be using the Ionic CLI that supports Ionic 2 applications.

From within your project, execute the following from your Command Prompt or Terminal:

ionic plugin add phonegap-plugin-barcodescanner

This will install the barcode plugin for use in your project.

From here on out we can start coding. We’ll spend most of our time in the app/pages/home/home.html and app/pages/home/home.js files. One being our UI file and the other being our logic file.

Starting with app/pages/home/home.js, add the following code:

import {Page, Platform, Alert, NavController} from 'ionic-angular';

@Page({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
    static get parameters() {
        return [[Platform], [NavController]];
    }

    constructor(platform, navController) {
        this.platform = platform;
        this.navController = navController;
    }

    scan() {
        this.platform.ready().then(() => {
            cordova.plugins.barcodeScanner.scan((result) => {
                this.nav.present(Alert.create({
                    title: "Scan Results",
                    subTitle: result.text,
                    buttons: ["Close"]
                }));
            }, (error) => {
                this.nav.present(Alert.create({
                    title: "Attention!",
                    subTitle: error,
                    buttons: ["Close"]
                }));
            });
        });
    }
}

Let’s break down everything that is happening in the above.

In the constructor method we are passing and initializing our platform and navController objects. Because we’ll be using a native plugin we need to make sure the device is ready first. The Platform class has a function to check for us if the device is ready.

Inside the scan method we do that check and once ready we call the scan function of the actual barcode plugin. If the promise is resolved we will show an alert with the scanned result. If the promise was rejected we will show an alert with the error.

Now let’s take a look at the front end code. We are trying to keep things simple which can easily be reflected in this file. Open app/pages/home/home.html and include the following code:

<ion-navbar *navbar>
    <ion-title>
        Home
    </ion-title>
</ion-navbar>

<ion-content class="home">
    <button primary (click)="scan()">Scan</button>
</ion-content>

We really only have a button that starts the scanner in our UI. Very simple right?

Conclusion

Making use of the barcode scanner plugin in Ionic 2 really wasn’t too different from what was done in the Ionic Framework 1 tutorial I wrote. This is because both versions of the framework use the same plugin. The only difference was in the use of AngularJS and Angular.

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.