Barcode Scanner in Ionic App

Setting Up a Barcode Scanner in Your Ionic App Using Capacitor

Integrating barcode scanning into your mobile app can significantly enhance functionality, making data entry faster and reducing errors. This guide will walk you through setting up barcode scanning in your Ionic app using the Capacitor plugin @capacitor/barcode-scanner, which leverages Outsystems Barcode libraries.

Prerequisites

Before we dive into the setup, ensure you have the following prerequisites:

• Node.js and npm installed on your machine.
• Ionic CLI installed globally (npm install -g @ionic/cli).
• Basic knowledge of Ionic and Angular.

Step 1: Create a New Ionic Project

Start by creating a new Ionic project. Open your terminal and run the following command:

ionic start barcode-scanner-app blank --type=angular --capacitor 
--package-id=com.zagham.barcode        

it will ask for

Would you like to build your app with NgModules or Standalone Components?

in my case i am using Standalone you can use NgModules also.

Navigate into your project directory:

cd barcode-scanner-app        

Step 3: Install the Barcode Scanner Plugin

Install the barcode scanner plugin using npm:

npm install @capacitor/barcode-scanner 
npx cap sync        

Step 4: Implement Barcode Scanning Functionality

Open src/app/home/home.page.ts and implement the barcode scanning functionality. First, import and inject the BarcodeScanner:

import { Component } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonText } from '@ionic/angular/standalone';
import { CapacitorBarcodeScanner, CapacitorBarcodeScannerOptions, CapacitorBarcodeScannerTypeHintALLOption } from '@capacitor/barcode-scanner';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: true,
  imports: [IonButton, IonHeader, IonToolbar, IonTitle, IonContent, IonText],
})
export class HomePage {
  public barcodeResult! : string;
  private options: CapacitorBarcodeScannerOptions = {
    scanButton: true,
    hint: CapacitorBarcodeScannerTypeHintALLOption.ALL
  }
  public constructor() {}

  public async scanBarcode() :Promise<void> {
    this.barcodeResult = (await   CapacitorBarcodeScanner.scanBarcode(this.options)).ScanResult;
    console.log('Barcode data:', this.barcodeResult);
  }
}
        

Step 5: Add a Button to Trigger Scanning

Open src/app/home/home.page.html and add a button to trigger the barcode scanner:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Barcode Scanner
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-text>
    <h2>
      Barcode data: {{barcodeResult ? barcodeResult : 'no data found '}}
    </h2>
  </ion-text>
  <ion-button expand="block" (click)="scanBarcode()">Scan Barcode</ion-button>
</ion-content>
        

Step 6: Add Android

npm install @capacitor/android
npx cap add android        

Step 7: Configure Android Platform

The barcode scanner plugin requires a minimum Android SDK target of 26. Update this value in your android/variables.gradle file:

ext {
    minSdkVersion = 26
}        

Next, modify the allprojects > repositories section in your android/build.gradle file to include the Outsystems repository. Your android/build.gradle should look like this:

allprojects {

    repositories {

        google()

        mavenCentral()

        maven {

            url 'https://pkgs.dev.azure.com/OutSystemsRD/9e79bc5b-69b2-4476-9ca5-    d67594972a52/_packaging/PublicArtifactRepository/maven/v1'

            name 'Azure'

            credentials {

                username = "optional"

                password = ""

            }

            content {

                includeGroup "com.github.outsystems"

            }

        }

    }

}        

Step 8: Configure iOS Platform

For iOS, ensure you configure the Privacy - Camera Usage Description in your Info.plist file to allow your app to access the device's camera. Add the following entry:

<key>NSCameraUsageDescription</key>

<string>We need access to your camera to scan barcodes.</string>        

Step 9: Test Your App

Run your app on a device, as barcode scanning won’t work on a browser. Use the following commands:

ionic capacitor add android
ionic capacitor add ios
ionic capacitor run android
ionic capacitor run ios        

Alternatively, build the app and open it in the respective IDE:

ionic capacitor build android
ionic capacitor build ios        

Then deploy to a device using Android Studio or Xcode.

Conclusion

By following these steps, you have successfully integrated a barcode scanner into your Ionic app using the Capacitor plugin.

Full Code On Github

For more posts like this follow me on likedin Zagham Nadeem

or visit my blog

Ionic Notes

Happy coding!