Wondering how to add Barcode Scanner/QR Scanner using Native Plugin In Ionic Capacitor app? We can help you with it.

Here at Bobcares, we have seen several such App-related queries as part of our Development Services for developers.

Today, we will take a look at how to add the Barcode Scanner/QR Scanner.

Know more about Ionic

Ionic is an open-source SDK for hybrid mobile app development. It mainly provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass.

In simple words, if we create native apps in Android, we code in Java. If we create native apps in iOS, we code in Obj-C or Swift. Both these languages are complex even though they are powerful.

With Ionic, we can write a single piece of code for the app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS.

How to add Barcode Scanner/QR Scanner using Native Plugin In Ionic Capacitor APP

Here are the steps our Engineers follow to set up the Barcode/QR Scanner.

1.  Create a basic Ionic Angular app

First, we install ionic CLI using npm

Then we create an Angular Ionic app using

$ ionic start barcode-demo blank --type=angular

Also, we can create a blank starter for creating a barcode reader App.

2. Setup Barcode Scanner Plugin

We run the below command to install the following packages.

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

Although we are installing a Cordova plugin, it will work equally well with a Capacitor.

3. Updating Application’s App Module

Now we import the Barcode module in the projects app.module.ts and then inject it inside the provider.
// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { FormsModule } from '@angular/forms';

@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
FormsModule
],
providers: [
StatusBar,
SplashScreen,
BarcodeScanner,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }

4. Adding Barcode to pages

Now we inject it as a dependency inside our page’s constructor and access it all over the app components.

After this, we simply use the following function to complete a scan process.

// home.page.ts

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

@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
data: any;
constructor(private barcodeScanner: BarcodeScanner) {}

scan() {
this.data = null;
this.barcodeScanner.scan().then(barcodeData => {
console.log('Barcode data', barcodeData);
this.data = barcodeData;
}).catch(err => {
console.log('Error', err);
});
}
}

This function will open the phone’s camera. Also, it allows to scan a barcode, and in result will provide success or error.

// home.page.html

<ion-header>
<ion-toolbar>
<ion-title>
Ionic QR/ Barcode Scanner
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
<h1>Click Button To Scan</h1>
<ion-button color="primary" (click)="scan()">
Scan Code
</ion-button>
</ion-content>

5. Build and Test app on Android

Before adding a platform, we need to build our Capacitor assets.

Here is the command we use to build web asset

$ ionic build

Now we add a new platform, Android

$ npx cap add android

Next, we sync any changes done to the code in the platform, and then open the default editor for building the app on a device

npx cap sync

Now we open the project in Android studio

$ npx cap open android

After opening, we can build the app on the device. Once built, we test the app with different QR codes and Barcodes. Following is what we get when we test on different codes.

[Still, finding it difficult to add a Barcode/QR Scanner? – Our experts can help you]

Conclusion

Today, we learned how to integrate a Barcode scanner and QR Code scanner phonegap-plugin-barcodescanner in Ionic Capacitor apps. Using this, we can easily integrate QRcode or barcode scanning functionality in any of our Ionic Capacitor apps.