In this tutorial, you will learn, how to create a barcode scanning mobile application using the Ionic2 framework. The barcode scanning feature can be implemented using the phonegap-plugin-barcodescanner plugin.

The barcode is used to carry the data such as product id, product price, URL etc. To read the generated barcode, we have more dedicated barcode scanners in the market. However, the mobile barcode scanner is very useful when you integrate this feature with your mobile application. It is portable. And there is no need to buy the separate barcode scanning device. You can take your mobile at anywhere of the shop and do the billing. This eases the work.

Now we are going to create barcode scanner application using the Ionic 2 framework.

Barcode Scanning Application Preview(Android Device)
 


Create a new Ionic 2 project using the below command.

ionic start app blank --v2

Install the barcode plugin using the below command.

cd app
ionic plugin add phonegap-plugin-barcodescanner --save
npm install --save @ionic-native/barcode-scanner

Import the BarcodeScanner class to the app.module.ts file.

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

Now include the BarcodeScanner class in the provider of the app.module.ts file.

providers: [BarcodeScanner,
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]

Now create a button with click event in the home.html file.

<button ion-button (click)="load()">Scan QR</button>

Now import the BarcodeScanner class to the home.ts file.

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

Create an object reference to the BarcodeScanner class using the constructor.

constructor(private barcodeScanner: BarcodeScanner)
{
}

Then create a function, which will call the scan function of the barcodeScanner class and show the scanned data in the alert box using the alert command.

load()
{
this.barcodeScanner.scan().then((barcodeData) => {
// Success! Barcode data is here
alert(JSON.stringify(barcodeData));

}, (err) => {
// An error occurred
alert("Error "+JSON.stringify(err))
});
}

We are going to test this barcode scanner application on the Android device. We can not preview this using the browser. So Now add the Android platform to the project using the below command.

ionic platform add android

Now generate the APK using the below command.

ionic build android

That's all. You were done. Now the barcode scanning mobile application is ready. Deploy the generated APK file on your device and test it.

Tested Device:
Moto G4 Plus
Android 7

Don't use the barcode scanner and QR code scanner plugin together. Why because, both will try to create a camera permission on the AndroidManifest.XML file while generating the APK. This will cause the build error. So use either barcode scanner or QR code scanner.

Barcode Scanner plugin can also read the QR Code. So there is no need to use the QR Code plugin separately if you need both QR and Barcode. However, if you need only the QR Code scanning then visit the below link to learn QR Scanner plugin.

The following barcode types are currently supported:

Android

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

Not by default, but supported if you pass in the "formats" option:

  • PDF_417
  • AZTEC

iOS

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

Windows

  • UPC_A
  • UPC_E
  • EAN_8
  • EAN_13
  • CODE_39
  • CODE_93
  • CODE_128
  • ITF
  • CODABAR
  • MSI
  • RSS14
  • QR_CODE
  • DATA_MATRIX
  • AZTEC
  • PDF_417

Windows Phone 8

  • UPC_A
  • UPC_E
  • EAN_8
  • EAN_13
  • CODE_39
  • CODE_93
  • CODE_128
  • ITF
  • CODABAR
  • MSI
  • RSS14
  • QR_CODE
  • DATA_MATRIX
  • AZTEC
  • PDF_417

BlackBerry 10

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

Below is the Ionic 2 information while writing this tutorial.
Cordova CLI: 6.5.0 
Ionic Framework Version: 3.6.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 2.1.3
ios-deploy version: Not installed
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.2.1

home.ts file source code

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 {

constructor(private barcodeScanner: BarcodeScanner) 
{
}
load()
{
this.barcodeScanner.scan().then((barcodeData) => {
// Success! Barcode data is here
alert(JSON.stringify(barcodeData));

}, (err) => {
// An error occurred
alert("Error "+JSON.stringify(err))
});
}
}

Note: It works with Ionic App Scripts Version: 2.1.3. However, if any other plugin is not working with Ionic App Scripts Version: 2.1.3 while building the APK, then downgrade the project to the lowest Ionic App Scripts Version. 

To learn how to downgrade Ionic App Scripts Version use the below link.

https://ampersandacademy.com/tutorials/ionic-framework-version-2/downgrade-ionic-app-script-version