Ionic 3 - Build a Barcode/QR Code Scanner/Encoder App -- Words (847)

Build a Barcode/QR Code Scanner App with Ionic 3

In this today's tutorial we are going to see how you can create your own Barcode/QR code scanner app with Ionic 3 ,Ionic Native 3.x+ and Cordova ,we are going also to learn how to encode your own barcodes from some data .

So lets get started .

Create an Ionic 3 project


First start by generating a new project ,you can also skip this to use an existing project .

ionic start CodeScanner blank 

For more information see this tutorial about how to create your first Ionic 3 project

Navigate into your project root directory

cd CodeScanner 

Then follow the steps to install both the Cordova plugin and Ionic Native 3.x+ wrapper for scanning barcodes

Installing Cordova and Ionic Native 3.x+ plugin for Barcode scanning


Start by installing the Cordova Barcode scanner plugin

ionic cordova plugin add phonegap-plugin-barcodescanner

Then install the Ionic Native wrapper for this plugin from npm

npm install --save @ionic-native/barcode-scanner 

Adding Android platform


Since we need to run this app in a actual device we need to add a target platform .In my case I'm adding Android but feel free to add iOS or Windows Phone platforms if you targetting these platforms .

ionic cordova platform add android 

You can now attach your mobile device using an USB cable then run your app to make sure everything is OK

ionic run android -l 

I've added the -l switch for live syncing of code when we change it so we don't have to run the command again .Just continue building your app and watch the changes on your device .

Configuring the Cordova barcode scanner


We have added the barcode scanner plugin but before we can use it ,we have to do a little bit of configuration .

So go ahead open your project using your favorite cod editor .I'm using Visual Code Studio

code .

Open src/app/app.module.ts then import barcode scanner and add it to the list of module providers

/* ... */

import { BarcodeScanner } from '@ionic-native/barcode-scanner';

/* ... */

providers: [
    StatusBar,
    SplashScreen,
    BarcodeScanner,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

Scanning barcodes


Head over to src/pages/home/home.html then add a button for scanning barcodes

<ion-header>

<ion-navbar>
    <ion-title>Barcode/QR Scanner v1.0 </ion-title>
</ion-navbar>

</ion-header>


<ion-content padding>
    <button ion-button (click)="scan()">Scan ... </button>
    <div *ngIf="scanData">
        <p>Scanned Text : </p>
        <p>Scanned Format : </p>

    </div>
</ion-content>

Next open src/pages/home/home.ts then add an implementation for .scan() method bound to Scan button

Start by importing BarcodeScanner

import { BarcodeScanner ,BarcodeScannerOptions } from '@ionic-native/barcode-scanner';

Inject BarcodeScanner in Component constructor

@IonicPage()
@Component({
selector: 'home',
templateUrl: 'home.html',
})
export class HomerPage {
scanData : {};
options :BarcodeScannerOptions;
constructor(public navCtrl: NavController, public navParams: NavParams,private barcodeScanner: BarcodeScanner) {
}    

scan(){
    /* */
}

Then add an implementation for the scan method

scan(){
    this.options = {
        prompt : "Scan your barcode "
    }
    this.barcodeScanner.scan(this.options).then((barcodeData) => {

        console.log(barcodeData);
        this.scanData = barcodeData;
    }, (err) => {
        console.log("Error occured : " + err);
    });         
}    

You can also specify other options such as using the front device camera instead of back camera etc

Check out all available options on the plugin documentation in GitHub or its Ionic Native wrapper .

Encoding your data as barcode


You can also encode your own data such as a text string, an email or a phone number to a barcode using this plugin so go ahead and add another button and bind its click event to an encodeText() method

     <ion-input type="text" [(ngModel)]="encodeData" ></ion-input>   
     <button ion-button (click)="encodeText()">Encode Text</button>

Next on home.ts add a string member variable encodeData and and encodedData variable to hold the result , then add a method to encode the text data .

@IonicPage()
@Component({
selector: 'home',
templateUrl: 'home.html',
})
export class HomerPage {
scanData : {};
encodeData : string ;
encodedData : {} ;
options :BarcodeScannerOptions;
constructor(public navCtrl: NavController, public navParams: NavParams,private barcodeScanner: BarcodeScanner) {
}    

scan(){
    /* */
}    
encodeText(){
    this.barcodeScanner.encode(this.barcodeScanner.Encode.TEXT_TYPE,this.encodeData).then((encodedData) => {

        console.log(encodedData);
        this.encodedData = encodedData;

    }, (err) => {
        console.log("Error occured : " + err);
    });                 
}

Conclusion


As you can see ,thanks to Cordova / Phonegap plugin Barcode Scanner plugin you can easily scan QR and barcode codes and also encode your own data (Text,email pr phone numbers) to a barcode format .

Thanks for reading and see you on the net tutorial .

If you find any problems with the tutorial ,feel free to post your problem as a comment below and I will be more that happy to answer if I can .


I'm a web developer and technical writer. Passionate about modern JavaScript technologies and currently trying to develop all kind of apps (Web, Mobile and Desktop) with JavaScript.