Sitemap
Funda Ese

Funda Ese

Mobile Application Developer

HUAWEI Scan Plugin | Outsystems

6 min readJul 5, 2021

--

Introduction

Hello, I will show how to integrate Huawei Scan Plugin to an Outsystems project in this article.

Prerequisites

You should install Outsystems Service Studio on your PC. And create an account from Outsystems Sign In page.

Configuring App Information in AppGallery Connect

Before you get started, you must register as a HUAWEI developer and complete identity verification on HUAWEI Developers.

Let’s create an AppGallery Connect Project.

  1. Sign in to AppGallery Connect and select My projects.
  2. Click Add project.

3. Enter a project name and click OK.

After the project is created, the Project settings page is displayed. Before you use the development capabilities provided by AppGallery Connect, you need to add an app to your project first.

  1. In section Project settings > General information, click Add app.
  2. On the Add app page, enter app information.
Press enter or click to view image in full size

Enter App Information

3. On the Project settings page, enter SHA-256 certificate fingerprint and then download the configuration file agconnect-services.json for the Android platform.

A signing certificate fingerprint is used to verify the authenticity of an app when it attempts to access an HMS Core (APK) through the HMS SDK. Before using the HMS Core (APK), you must locally generate a signing certificate fingerprint and configure it in the AppGallery Connect. You can refer to 3rd and 4th steps of Generating a Signing Certificate Codelab tutorial for the certificate generation. Perform the following steps after you have generated the certificate.

Installation

Firstly, open Outsystems Service Studio. Log In to your account which created before.

Create a new application. We are choosing “From scratch” to create an application.

And we are selecting “Phone App”.

We are filling the App Name and Descriptions part. After that, we are clicking to Create Module button and the project will be created.

Press enter or click to view image in full size

Now, we must create a screen. So we are clicking the Screen component from the left side and selecting Empty screen.

Now, we must install HUAWEI Scan Plugin from Forge. Click the Forge tab from the top left of the Outsystems Service Studio. And search for “HMS Scan Plugin”, click it then install it.

Get Funda Ese’s stories in your inbox

Join Medium for free to get updates from this writer.

When installation finished, go back to the demo project. Click the Module tab and click to Manage Dependencies ( You can also use the Ctrl+Q shortcut ). Search HMScanPlugin and enable it.

Press enter or click to view image in full size

In the application, navigate to Data > Resources. Right-click it. Click Import Resource on the popup menu opened. Browse the agconnect-services.json and click Open. Make sure that Deploy Action is set to Deploy to Target Directory.

Press enter or click to view image in full size

Now, we can use every method in HUAWEI Scan Plugin.

Assigning Permissions

Before calling Scan Kit, you must obtain the necessary permissions. To build the function of scanning barcodes using the camera, you need to apply for the camera permission (specified by CAMERA). To build the function of scanning barcodes from images in the album, you need to apply for the file read permission (specified by READ_EXTERNAL_STORAGE).

Has Permission

The hasPermission method checks the permissions required to use this Kit.

Has Permission Implementation Procedure

Firstly, we are creating a button on the screen. And we double click it to add a hasPermission method. On the opened page, we are clicking the Logic, top right of the page and going to Client Actions > HMSScanPlugin > HMSScan > hasPermission method. Drop and drag this method to the flowchart. When the method returned a successfully it checks permissions.

  1. Create a parameter of type HMSPermission.
  2. Call the hasPermission(permission) method with required parameter.
Press enter or click to view image in full size

Example input value for hasPermission method , shown below.

Request Permission

The requestPermission(permission) method sets the permission required for services to run.

Request Permission Implementation Procedure

We are creating an another button on the screen. And we double click it to add a requestPermissions method. On the opened page, we are clicking the Logic, top right of the page and going to Client Actions > HMSScanPlugin > HMSScan > requestPermissions method. Drop and drag this method to the flowchart. When the method returned a successfully you can accept permissions for your app.

  1. Create a parameter of type HMSPermission.
  2. Call the requestPermissions(permissions) method.
Press enter or click to view image in full size

Example input value for requestPermissions method , shown below.

After the permissions have been granted successfully, we can now use a scan barcode type in our application. Scan Kit can be called in five different ways, from which you can choose as needed.

Press enter or click to view image in full size

Here, we will inplement Default View.

Default View

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.

Implementation Procedure

  1. To use the defaultViewMode action in OutSystems, navigate to Logic > HMSScanPlugin > HMSScan > defaultViewMode. Drag and drop the client action. If the defaultViewMode method is successful, the client action’s IsSuccess field will be return result. Otherwise, IsSuccess will be false and Error field of the output will store the Error info.
  2. The related parameters are as follows, among which scanTypes is mandatory:

Call the defaultViewMode(scanTypes) method with required parameters.

Press enter or click to view image in full size

Example input value for defaultViewMode method , shown below.

When all is done, we are clicking the Default View Mode button.

Conclusion

In this article, I integrated HMS Scan Plugin into an Outsystems and showed the basic functionalities of the Scan Kit.

Thank you for reading :)

--

--

Written by Funda Ese

Mobile Application Developer