Ionic 4 | Add Barcode/ QR Code Scanner/ Encoder Generator 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.

Also Check : Ionic 4 | Adding Barcode / QR Code Scanner in Ionic 4 Application using ZBar Cordova and Native Plugin

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

Source Code link on GitHub

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

4
Leave a Reply

avatar
2 Comment threads
2 Thread replies
2 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Jolly.exeSzymon KicińskiChristopher Solís Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Christopher Solís
Member

Hi Jolly. I’m having a problem when I try to open the camera to read the QR code that every time I press the button it doesn’t do anything.

Szymon Kiciński
Guest

Hello, could you please share this code on e.g. GitHub? Thanks! 🙂