How to Scan the QR Code with Huawei Cordova Scan kit

Introduction

In this story, I will show you how to read and create QR code with scankit.
This app will be able to scan QR codes and generate QR codes containing your own information.

I will show you all this with a simple application.

If everything is ready, we can start by introducing the features we will use.

Scan QR Codes

We will use two different methods when scanning QR codes.

If you say you do not want to deal with the design, if you want the method to run like I click the button and scan the QR codes, I have good news for you. The defaultViewMode method is for you. No, if you say I want to do the design myself, the only method you need is the customViewMode method.

There are some settings we need to make before the party starts. Let’s take a look at these together.🎉

Before the creating app, you must register as a HUAWEI developer and complete identity verification on HUAWEI Developers. After the login, we should create an AppGallery Project.
1. Sign in to AppGallery Connect, and click My projects.
2. Click Add project.
3. Enter a project name and click OK.

4. After the create project, go to Project Settings>General Information section and click Add app.
5. On the Add app page, enter the app information.

6. On the Project settings page, enter SHA-256 certificate fingerprint.

NOTE: You can find detailed information about the settings in our Cordova Scankit document.

7. Download the configuration file agconnect-services.json for Android platform.

Create an App

Before the start demo application, make sure you have installed Cordova and npm.

1. First of all, we will generate a Cordova application.

$ cordova create scanQRCode com.scanqrcodes.scankit ScanQr

2. Go into the project directory.

3. Add the android platform to the project.

cordova platform add android@9.0.0

4. Install `HMS Scankit plugin` to the project.

cordova plugin add @hmscore/cordova-plugin-hms-scan

5. Copy the agconnect-services.json file to the <project_root>/platforms/android/app directory.

6. Add the keystore(.jks) and build.json files to your project’s root directory.

Finally, all the adjustments are over. Now we can start writing our codes.

Default View Mode

In Default View mode, Scan Kit scans barcodes using the camera or from images in the album, and also provides activities that can be directly used. You do not need to worry about designing a UI as Scan Kit provides one.

In order to read QR code, it is necessary to obtain the necessary permissions first.

What you have to do in this method is very simple. Just creating a button and calling the defaultViewMode method with the required parameter. This method takes scanTypes as a parameter. Since we will scan QR codes in our application, we choose QRCODE_SCAN_TYPE. Other parameters can be found in the API References document.

Everything is ready. Let’s run the application.

cordova run android

Custom View Mode

In Customized View mode, you do not need to worry about developing the scanning process or camera control. Scan Kit will do all these tasks for you. However, you will need to design the scanning UI.

So how do we do this design ?

1. We will definitely use the “div” element, which is the HTML tag.

2. Create a CustomViewModeRequest object, which is used as the request body for scan barcodes with custom view mode. The related parameters are as follows, among which scanTypes is mandatory:

3. Call the CustomView.on(eventName, ()=>{}) method to get the scan result.

4. Call the customViewMode(customViewModeRequest) method with required parameters. The first parameter of the method takes the id information of the div element. The second parameter takes the customScanRequest object.

So far we have seen two different methods for scanning a QR code. You decide which one of these works best for you.

Now let’s get to how to create QR codes.

Build QR Code

Scan Kit can convert character strings into 1D or 2D barcodes in 13 formats, including EAN-8, EAN-13, UPC-A, UPC-E, Codabar, Code 39, Code 93, Code 128, ITF, QR code, Data Matrix, PDF417, and Aztec. Besides a character string, you still need to specify the format and size for generating a barcode.

1. Set the character string that will be converted into a barcode, set its width and height, and specify the barcode format. For the supported barcode formats. The related parameters are as follows, among which barcodeFormat and inputContent are mandatory:

NOTE: With the qrLogoBitmap parameter, you can put a logo in the middle of your QR code. For this, you can give the Uri information of the logo to the qrLogoBitmap parameter.

2. Call the buildBitmap(buildBitmapRequest) method with required parameters.

Advantages

1. Scankit is highly flexible and serves many purposes.
2. If you don’t want to mess around with design, you can use defaultViewMode for scanning a barcode/QR Codes.
3. It is very easy to use, you can develop your applications quickly.

Conclusion

In this article, we examined the most used methods of Cordova Scankit. We used different methods that function the same but for different purposes.
You can also develop your own applications using this kit.

For more resources, detailed information and sample codes, you can review the Cordova Scan kit document.

References

Cordova ScanKit Development Guide

Cordova Scankit Sample Project Codes

HMS-Core/hms-cordova-plugin