Are you trying to figure out how to add Barcode Scanner/QR Scanner using Native Plugin In Ionic Capacitor app?

This guide is for you.

Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript.

Here at Ibmi Media, as part of our Server Management Services, we regularly help our Customers to fix Software / App related queries.

In this context, we shall look into the steps to add the Barcode Scanner/QR Scanner.

More information about Ionic?

Basically, 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.

Ionic Framework focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as Angular, React, or Vue.

In summary, 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 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 the command;

$ 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. 

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