Ionic

Create Angular App for QR Scan

by will

First you need to make sure you have the latest Ionic CLI. This will ensure you are using everything latest. Ensure latest Ionic CLI installation using

$ npm install -g ionic@latest

Creating a basic Ionic-Angular app

$ ionic start IonicScanner blank --cordova
  •  --cordova tells the CLI to create a Cordova integration, not Capacitor!!
  • blank template gives a blank home page

Run the app in browser using:

$ ionic serve

Let’s modify the page with some basic UI.

<ion-header [translucent]="true">
  <ion-toolbar color="dark">
    <ion-title>
      QR Scanner
    </ion-title>
  </ion-toolbar>
  <ion-toolbar color="medium">
    <ion-title>
      Trip: Singapore - Indonesia
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-img src="assets/qr-marine.jpeg"></ion-img>

    <ion-card-header>
      <ion-card-title>QR Scanning</ion-card-title>
      <ion-card-subtitle>Scan QR Code at your seat</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <ion-button expand="full" color="success" (click)="scanBarcode()">Scan a Code</ion-button>
      <div *ngIf="scannedData">
        <p>
          Your Seat : <b>{{ scannedData["text"] }}</b>
        </p>
        <p>
          You Seat info saved in our database. 
        </p>
      </div>
    </ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>
      <ion-card-title>Adult - Two ways ticket</ion-card-title>
      <ion-card-subtitle></ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <!-- <ion-input type="text" [(ngModel)]="inputData"></ion-input>
      <ion-button expand="full" color="success" (click)="createBarcode()">Create a QR code</ion-button> -->
      <p>Departure date: Nov 25, 2023</p>
      <p>Returning date: Dec 09, 2023</p>
      <p>Departure location: Singapore</p>
    </ion-card-content>
  </ion-card>
</ion-content>

We will use the Cordova plugin phonegap-plugin-barcodescanner for both barcode and QR code scanning functionality. This is also integrated in Ionic Native module. You can use cordova-plugin-qrscanner for QR scanning separately as well, but phonegap-plugin-barcodescanner does both tasks in one.

Install the plugin with

$ ionic cordova plugin add phonegap-plugin-barcodescanner
$ npm install @ionic-native/barcode-scanner

Import the plugin in app.module.ts 

import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
@NgModule({
...
providers: [
...,
BarcodeScanner
],
...
})

Import the plugin in your HomePage home.page.ts

import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
constructor(private barcodeScanner: BarcodeScanner) { }

Now we implement scanning and creation methods. The home.page.ts will contain the following code.

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  scannedData: any;
  encodedData: '';
  encodeData: any;
  inputData: any;
  constructor(private barcodeScanner: BarcodeScanner) { }
  scanBarcode() {
    const options: BarcodeScannerOptions = {
      preferFrontCamera: false,
      showFlipCameraButton: true,
      showTorchButton: true,
      torchOn: false,
      prompt: 'Place a barcode inside the scan area',
      resultDisplayDuration: 500,
      formats: 'EAN_13,EAN_8,QR_CODE,PDF_417 ',
      orientation: 'portrait',
    };

    this.barcodeScanner.scan(options).then(barcodeData => {
      console.log('Barcode data', barcodeData);
      this.scannedData = barcodeData;

    }).catch(err => {
      console.log('Error', err);
    });
  }

  createBarcode() {
    this.barcodeScanner.encode(this.barcodeScanner.Encode.TEXT_TYPE, this.inputData).then((encodedData) => {
      console.log(encodedData);
      this.encodedData = encodedData;
    }, (err) => {
      console.log('Error occured : ' + err);
    });
  }

}

Build your app on android device using 

$ ionic cordova platform add android
$ ionic cordova run android
0