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

Updated ( 06 Apr 2019 ) for latest Ionic CLI v4.12.0

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 imports 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 home.page.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 home.page.html, add a button and show the result of scanned Barcode, having text information bar type.

Encode Your Data into a barcode

In home.page.html, add input to get you value and an object to get in return

In home.page.ts, add encode method

Add Native Platform Android or IOS

We need a real device to test this plugin, So now we will add the 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

You can generate QR codes online here

See mine 😛

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.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

13
Leave a Reply

avatar
8 Comment threads
5 Thread replies
10 Followers
 
Most reacted comment
Hottest comment thread
10 Comment authors
Julian VargasEduardo CorteVadimjoao vitorBlaqPrynx 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! 🙂

Pichit W
Guest
Pichit W

Hello Jolly, I’ve try this project then show the problem about ‘Cannot find module ‘node-sass’ ‘ with npm v 6.8.0. How can I fix this?
Thanks.

karol
Guest
karol

hello, i have a problem, when I scann the code, the app show and alert: barcode data{“text”:”www.facebook.com\n.”,”format”:”QR_CODE”,”cancelled”:false}

BlaqPrynx
Guest
BlaqPrynx

wow i really love this …Jolly you are the man it actually worked for me when i used the ionic devApp to try….. But my problem is it only shows the number…..how can i get details like the name of the product ,manufacturing date or the expiring date of the product……………..but really its a GoodWork out there….God Bless you…….will be looking forward to hear from you soon

joao vitor
Guest
joao vitor

how do I get the string of the link that was scanned? I need to put it in an array of strings

Vadim
Guest
Vadim

Jolly, thank you!
To run this command “ionic cordova build android”, do i need to have installed:
• Android Studio;
• Android Studio SDK;
• Java 8 SDK
?

Eduardo Corte
Guest
Eduardo Corte

Hi, The qr code generator works great on android, but when testing it on ios the pop up window with the qr code doesn’t appear, is there any solution for ios?

Julian Vargas
Member
Julian Vargas

was you result the problem?