Ionic 4 | Add Barcode/ QR Code Scanner/ Encoder Ionic 4 Native Plugin

In this tutorial, we will implement a Barcode or QR Scanner / Encoder plugin in Ionic 4 application. Barcodes and QR codes are widely used for multiple purposes like to add a link where a user doesn’t need to type the whole URL it can be easily scanned from a QR code. Barcodes can also be seen everywhere on the day to day items like eatables clothes etc, we can wimple scan these barcodes to get information like item code date of manufacturing, prices etc.

We will create a similar app to scan these codes.

 

Let’s start…

Create new Ionic 4 application:

To start Ionic 4 application we need to run below command as still, it is in beta phase.

then enter root of the created application

Install the Cordova and Ionic Native plugins:

 

Import Native Barcode Scanner in the Application’s Module

To open the application in Visual Studio code use  code . command

In app.module.ts, import Barcode scanner module then add in providers

here we have added FormsModule in imports and also added it in providers array.

Call Component Method to Scan Barcode or QR Code

In app.component.ts, define an object scannedData to carry scan result and scanCode() method.

We have also defined BarcodeScannerOptions to define options like to show torch button, show button to flip camera front or back etc, you can check out more options here available to configure scanner format encoding.

Add Button to Scan Barcode

In app.component.html, add a button and show the result of scanned Barcode, having text information bar type.

Encode Your Data into a barcode

In app.component.html, add input to get you value and an object to get in return

In app.component.ts, add encode method

Add Native Platform Android or IOS

We need a real device to test this plugin, So now we will add Android platform to create app-debug.apk file to test on an Android device

Run the following command to add Android platform and create app-debug.apk

In this tutorial we have created a sample app to scan Barcode and QR code using Cordova plugins in Ionic Native.

Leave a Reply

avatar
  Subscribe  
Notify of