Thursday, 1 March 2018

How to Implement Barcode Scanner in ionic 2 and ionic 3.

Barcode Scanner is used to scan QR/Bar Codes which contains url links, geo coordinates, and text. In this Post we are going to use Cordova plugin : phonegap-plugin-barcodescanner ,this Plugin opens a camera view and automatically starts scanning for a barcode, it returns the data back as a response when it detects a QR/Bar code.
First lets create a page in our ionic project using the below command.
ionic generate page qrcode
Here i'm creating a page with name qrcode, once the command is executed a folder will be created with name qrcode in src/pages folder of the current ionic project. Now since our page is created, lets install the barcode scanner plugin. run the following command to install cordova barcode scanner plugin.
ionic cordova plugin add phonegap-plugin-barcodescanner
we also need the native plugin for the barcode to work properly, so run the below command also.
npm install --save @ionic-native/barcode-scanner
Note : for the above command to work you should have Node.js installed Since the above plugins are installed, for the plugin to work,we should tell the app to import the plugin. modify app.module.ts to include below code.

app.module.ts

import { BarcodeScanner } from '@ionic-native/barcode-scanner';
and in NgModule's providers add BarcodeScanner as shown below.

app.module.ts


  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    BarcodeScanner
  ]
  
lets head to qrcode folder we have created, Open qrcode.html and replace the content with the below code provided. Copy and Pase the Below code to your components html template.

qrcode.html


<ion-content padding>

  <p *ngIf="showScanQRCode" class="scanText">Click the Button to Scan.</p>
    <div *ngIf="scannedData !=undefined" class="scanCode">
     <p>Welcome to QRCODE Scanner</p>
     </br>    
     <p>{{scannedData}}</p>  
    </div>

  <ion-footer>
    <button style="margin-bottom: 35px !important;" ion-button full (click)="openScanner()" >Scan Code</button>            
  </ion-footer>

</ion-content>

That's it for the html part, now lets head to qrcode.ts file, modify your file to inclue the following code provided. Copy and Pase the Below code to your components ts file.

qrcode.ts


import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BarcodeScanner } from '@ionic-native/barcode-scanner';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  scannedData:any;
  showScanQRCode:Boolean = true;
  constructor(public navCtrl: NavController,private barcodeScanner: BarcodeScanner) {
  }


  openScanner(){
    console.log("Opening Scanner");
    this.barcodeScanner.scan().then((barcodeData) => {
      this.showScanQRCode = false;
      // Success! Barcode data is here
       console.log("BarCode data",barcodeData);
       this.scannedData = barcodeData.text;
      
     }, (err) => {
         // An error occurred
         console.log("BarCode error",err);
         
     });
  }

}

Here we are importing BarcodeScanner from ionic-native, and the injected BarcodeScanner to HomePage class's constructor. The openScanner function is called when we click on Scan Code Button. barcodeScanner.scan() method open's qrcode scanner in a new view and starts scanning for qrcode or barcode and when provided one its scans it and retrns response as text. In this example it barcodeData.text returns www.ionicsync.com, since the qrcode contains it.
Now for the css part, copy and paste the below code to your components .scss file.

  .scanText{
    text-align: center;
    position: sticky;
    top: 40%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .scanCode{
    display: block;
    text-align: center;
    margin-top: 50%;
  }

That's it, feel free to comments below if you have any doubt's or queries.

1 comment:

  1. how can i query from the database with the barcode scanner info ? such as if i scanned a product it will dispaly to the user the price and the product information

    ReplyDelete