NativeScript 3 : Create a Barcode/QR/UPC Code Scanner [Angular]

In this tutorial ,we are going to cover how to create a NativeScript mobile application for both Android and iOS for scanning barcodes with different formats (Barcode ,QR Code ,UPC Code etc.)

A Barcode helps you encode information about a product while a Barcode scanner scans and decode the information associated with some types of barcodes .

This tutorial assumes you already have installed and configured your development environment to work with NativeScript 3 framework .

So lets get started

Head over to your terminal on MAC/Linux or prompt on Windows and run the following command to generate a new NativeScript 3 (Angular 4 ) project .

tns create BarcodeScannerDemo --ng

So thanks to --ng switch our project will be using a TypeScript/Angular rather than just TypeScript or plain JavaScript which are also supported by NativeScript .

Next we need to add the plugin which provides barcode scanning capabilities to our project so go ahead and run :

tns plugin add nativescript-barcodescanner

We have added a NativeScript plugin created by Eddy Verbruggen .You can also create your own barcode scanner plugin or add native (Java and Swift ) code for barcode scanning support directly in your NativeScript project but since this this task may be intimidating to most developers it's easier to just use a ready plugin which is the approach we are taking in this tutorial .

Now open your project in a code editor or IDE .I'm using Visual Code Studio .

cd BarcodeScannerDemo
code .

Then open your Angular project app/app.module.ts and register the BarcodeScanner provider with main module :

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { BarcodeScanner } from 'nativescript-barcodescanner';

import { AppComponent } from "./app.component";

@NgModule({
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    imports: [NativeScriptModule],
    schemas: [NO_ERRORS_SCHEMA],
    providers: [BarcodeScanner]        
})
export class AppModule { }

After importing and providing BarcodeScanner you can inject it in any component to get an instance that you can use to work with the Barcode Scanner plugin :

For example open app/app.component.ts

import { Component } from "@angular/core";
import { BarcodeScanner } from 'nativescript-barcodescanner';

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
    constructor(private barcodeScanner: BarcodeScanner){

    }

}

Next add a method onScan which makes use of this.barcodeScanner instance to invoke the scanner

public onScan() {
    this.barcodeScanner.scan({
        formats: "QR_CODE, EAN_13",
        showFlipCameraButton: true,   
        preferFrontCamera: false,     
        showTorchButton: true,        
        beepOnScan: true,             
        torchOn: false,               
        resultDisplayDuration: 500,   
        orientation: orientation,     
        openSettingsIfPermissionWasPreviouslyDenied: true //ios only 
    }).then((result) => {
        alert({
            title: "You Scanned ",
            message: "Format: " + result.format + ",\nContent: " + result.text,
            okButtonText: "OK"
        });
        }, (errorMessage) => {
            console.log("Error when scanning " + errorMessage);
        }
    );
}

Lets add a button to invoke the scan method .Go ahead and open app/app.component.html then add a button and set the click/tap handler to onScan() method :

<StackLayout class="p-20">

    <Label text="barcode Scanner" class="h1 text-center"></Label>
    <Button text="SCAN" (tap)="onScan()" class="btn btn-primary btn-active"></Button>

</StackLayout>

You should be able to run and test your app on a device or emulator :

tns run android 

For iOS run :

tns run ios 

You can find more information about this plugin at Eddy Verbruggen GitHub repository

Conclusion


We covered how to use a NativeScript plugin to add barcode scanning support to our Android or iOS mobile application .

If you have any problems or questions feel free to drop a comment below .

Thanks for reading and see on the next tutorial .

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status