[Huawei Developers] John Wo:
More articles like this, visit HUAWEI Developer Forum and Medium.​

About This Document

In the previous article, we have introduced the quick integration method of HMS Scan Kit and the competitiveness comparison between HMS Scan Kit and other open-source code scanning tools. If you do not find the method, you can click Previous Issue at the bottom of the article to find the method. We are now used to scanning the QR code to pay, scanning the QR code to follow social accounts, scanning the QR code to learn about product information, scanning the QR code to shop, and so on. Today, I'd like to introduce the development process of QR code purchase.

Scenario

The shopping app provides an entry for scanning the QR code of an offering. After the QR code is scanned, the offering information and purchase link are displayed, facilitating offering selection for customers.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/034/238/374/5190001000034238374.20200623081759.30061535522411272615818344444516:50510630025319:2800:2F42359A96408DD5F632D4424328D7B1BC54A9A7FFA3E63725FC652598217519.gif"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/034/238/374/5190001000034238374.20200623081759.30061535522411272615818344444516:50510630025319:2800:2F42359A96408DD5F632D4424328D7B1BC54A9A7FFA3E63725FC652598217519.gif[/IMG]

Development Step

Open the project-level build.gradle file.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/034/238/374/5190001000034238374.20200623081046.94025798794999417278831842230880:50510630025319:2800:0498796DFAE2A7F72ECABF91E31C83EADD3E212F579121C73A0A616791D15EC4.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/034/238/374/5190001000034238374.20200623081046.94025798794999417278831842230880:50510630025319:2800:0498796DFAE2A7F72ECABF91E31C83EADD3E212F579121C73A0A616791D15EC4.png[/IMG]

Choose allprojects > repositories and configure the Maven repository address of HMS SDK.

allprojects {
repositories {
google()
jcenter()
maven {url 'http://developer.huawei.com/repo/'}
}
}

Configure the Maven repository address of HMS SDK in buildscript->repositories.

buildscript {
repositories {
google()
jcenter()
maven {url 'http://developer.huawei.com/repo/'}
}
}

Adding Compilation Dependencies

Open the application levelbuild.gradle file.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/034/238/374/5190001000034238374.20200623081201.28230074141675979754194098724389:50510630025319:2800:54CC1DA2AA50B0A24EDF36DA618DE9A5F79DBCFAA7B7919AC12E9FD467237B51.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/034/238/374/5190001000034238374.20200623081201.28230074141675979754194098724389:50510630025319:2800:54CC1DA2AA50B0A24EDF36DA618DE9A5F79DBCFAA7B7919AC12E9FD467237B51.png[/IMG]

SDK integration

dependencies{
implementation 'com.huawei.hms:scan:1.1.3.301'
}

Specifying Permissions and Features

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

The QR code scanning page is declared in the AndroidManifest.xml file because the defaultview is used.

<activity android:name="com.huawei.hms.hmsscankit.ScanKitActivity" />

Scan to buy key Steps

There are two functions: adding products and querying products. You can scan the QR code and take a photo to bind a group of products. After saving the settings, you can scan the products.

Dynamic permission application

private static final int PERMISSION_REQUESTS = 1;
@Override
public void onCreate(Bundle savedInstanceState) {
// Checking camera permission
if (!allPermissionsGranted()) {
getRuntimePermissions();
}
}

Page for adding a product

Click the add product button to trigger the offering adding page.

public void addProduct(View view) {
Intent intent = new Intent(MainActivity.this, AddProductActivity.class);
startActivityForResult(intent, REQUEST_ADD_PRODUCT);
}

Scan the barcode and enter the product barcode information.

Invoke the defaultview to scan the QR code.

private void scanBarcode(int requestCode) {
HmsScanAnalyzerOptions options = new HmsScanAnalyzerOptions.Creator().setHmsScanTypes(HmsScan.ALL_SCAN_TYPE).create();
ScanUtil.startScan(this, requestCode, options);
}

Save the QR code scanning result in the callback function.

@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (data == null) {
return;
}
if ((requestCode == this.REQUEST_CODE_SCAN_ALL)
&& (resultCode == Activity.RESULT_OK)) {
HmsScan obj = data.getParcelableExtra(ScanUtil.RESULT);
if (obj != null && obj.getOriginalValue() != null) {
this.barcode = obj.getOriginalValue();
}

} else if ((requestCode == this.REQUEST_TAKE_PHOTO)
&& (resultCode == Activity.RESULT_OK)) {
……
}
}

Searching for an Offering by Scanning the QR Code

The method of scanning the QR code is similar. You can directly perform the query on the home page and display the result in the callback function.

public void queryProduct(View view) {
HmsScanAnalyzerOptions options = new HmsScanAnalyzerOptions.Creator().setHmsScanTypes(HmsScan.ALL_SCAN_TYPE).create();
ScanUtil.startScan(this, REQUEST_QUERY_PRODUCT, options);
}

@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (data == null) {
return;
}
if ((requestCode == this.REQUEST_ADD_PRODUCT) && (resultCode == Activity.RESULT_OK)) {
barcodeToProduct.put(data.getStringExtra(Constant.BARCODE_VALUE), data.getStringExtra(Constant.IMAGE_PATH_VALUE));
} else if ((requestCode == this.REQUEST_QUERY_PRODUCT) && (resultCode == Activity.RESULT_OK)) {
HmsScan obj = data.getParcelableExtra(ScanUtil.RESULT);
String path = "";
if (obj != null && obj.getOriginalValue() != null) {
path = barcodeToProduct.get(obj.getOriginalValue());
}
if (path != null && !path.equals("")) {
loadCameraImage(path);
showPictures();
}
}
}

Demo

Use the add product in the demo to enter the QR code information of the offering and take a photo. Then use the query product to scan the QR code of the offering. If the offering has been recorded in the system, the offering information is returned.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/034/238/374/5190001000034238374.20200623081412.27947435545345218436216929373292:50510630025319:2800:6194F509EC5D85F23C03574A0171D1F77AA4B7BDC769D74F804CF27B1EDC9F87.gif"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/034/238/374/5190001000034238374.20200623081412.27947435545345218436216929373292:50510630025319:2800:6194F509EC5D85F23C03574A0171D1F77AA4B7BDC769D74F804CF27B1EDC9F87.gif[/IMG]

Any questions about the process, visit HUAWEI Developer Forum.