[Huawei Developers] John Wo:
Introduction

Growing old I always wondered how a product will have a barcode format on its back, how this has been generated and why this is required?

I found my answers when I searched this on internet during my college days and could not find any potential way to have this integrated on a small hand held device, however that era had lot many bulky barcode scanners available in the market and guess what!! They were huge at price and away from the reach of common people.

So the science and Technology filled this gap by providing us easy to use readymade API’s to integrate the scanning capabilities into our mobile applications.

But this was not sufficient as the developer always look for hassle free API integration with high quality results.

I was dumbfounded by the capabilities offered by the Huawei Scan kit as I started working on the QR code scanner application.

Huawei Scan Kit provides robust API’s to developer and deliver smooth and high quality barcode or QR code scanner applications.

Huawei Scan kit can also detect and magnify the slightly blurred barcodes places at a distance under the dim light.

Huawei Scan Kit offers, as follows:

Scanning of all the major barcodes by automatically detecting, magnifying and recognizing them

Parsing of all major 1D and 2D barcodes

Barcode generation.

Development Overview

Prerequisite

1. Must have a Huawei Developer Account

2. Must have a Huawei phone with HMS 4.0.0.300 or later

3. React Native environment with Android Studio, Node Js and Visual Studio code.

Major Dependencies

1. React Native CLI : 2.0.1

2. Gradle Version: 6.0.1

3. Gradle Plugin Version: 4.0.1

4. React Native Scan Kit SDK : 1.2.2.300

5. react-native-hms-scan kit gradle dependency

6. AGCP gradle dependency

Software Requirements

1. Java SDK 1.8 or later

2. Android 5.0 or later

Preparation

1. Create a react native project using React Native CLI and open android directory.

2. Download the React Native Scan Kit SDK and paste It under Node modules directory of React Native project.

3. Create an app and project in the Huawei AppGallery Connect.

4. Provide the SHA Key and App Package name of the project.

5. Download the agconnect-services.json file and paste to the app folder of your android folder.

Integration

Add below to build.gradle (project)file, under buildscript/repositories and allprojects/repositories.

Maven {url 'http://developer.huawei.com/repo/'}

Add below to build.gradle (app) file, under dependencies to use the Scan kit SDK in your React Native application.

dependencies{
// Import the SDK.
implementation project(":react-native-hms-scan")
}

Add below under Settings.Gradle file.

include ':react-native-hms-scan'

project(':react-native-hms-scan').projectDir = new File(rootProject.projectDir, '../node_modules/@hmscore/react-native-hms-scan/android')

Add below under MainApplication.java file.

import com.huawei.hms.rn.scan.RNHMSScanPackage;
interface// parclable @Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
//Add following line. Don't forget to add import statement also.
packages.add(new RNHMSScanPackage());
return packages;
}
...
};

Use case

Huawei scan kit provides 5 different API’s to support different requirements and use case ranging from text reading application to payment applications. Below are the supported functionalities for same.

In this article the highlight would be generation of QR code for a URL access and also we will see how can we fetch the QR code information from the QR codes using Default View HMS react native API’s.

Adding Required Permission

React Native plugin for scan kit requires Camera and Storage permissions, same needs to be added into the APP.js file on a button click.

import ScanPlugin from "@hmscore/react-native-hms-scan";
<Button
color="Grey "
title="Request Permission"
onPress={() =>
ScanPlugin.Permission.requestCameraAndStoragePermission().then(
(res) => {
console.log("result", res);
this.setState({permissionGranted: res});
},
)
}
/>
//Also check if the permission is enabled or not prior further operation
const response = await ScanPlugin.Permission.hasCameraAndStoragePermission();
this.setState({permissionGranted: response});

Generating Barcodes

Use the barcode generation API of Scan Kit to generate a barcode as follows:

The app specifies the barcode width and height, character string and format.

The app calls the barcode generation API, buildBitmap from Utils module of the Scan Kit React Native Plugin.

The HMS Scan React Native Plugin sends the generated barcode to the app as Base64 encoded String of Bitmap Image.

Parameters

Set the character string that will be converted into a barcode, set its width and height, and specify the barcode format.

The parameters are as follows:

content: (Required) Barcode content.

width: (Optional) Width of a barcode to be generated.

height: (Optional) Height of a barcode to be generated.

type: (Optional) Barcode format.

margin: (Optional) Barcode margin.

bitmapColor: (Optional) Barcode colour.

backgroundColor: (Optional) Barcode background colour.

More details, you can visit https://forums.developer.huawei.com/forumPortal/en/topic/0203418564668030036