HMS Scan kit Integration into Ionic Application | Installation and Example
Use Huawei Scan kit in-app scanner and generator for 1D and 2D barcodes to equip your app for real-world usage.
Introduction
In this article, we will practice how to build a different view mode using HMS Scan SDK.
HUAWEI Scan Kit scans and parses all major 1D and 2D barcodes and generates QR codes, helping you quickly build barcode scanning functions into your apps.
HUAWEI Scan Kit automatically detects, magnifies, and identifies barcodes from a distance, and is also able to scan a very small barcode in the same way.
Scanning Barcodes
HMS Scan Kit can be called in multiple ways. You can choose any mode which suits your requirements best.
1. Default View Mode
This view mode is provided by HMS scan kit. You do not need to worry about designing a UI as Scan Kit provides one.
2. Customize View Mode
Custom view is literally designing a unique camera view layout for your apps which allows you to:
- Beautify your UI
- Improve user-experience
- Customize colours and theme
- Add Flash Button
3. Bitmap Mode
In Bitmap mode, barcodes can be scanned using the camera or from images, which you can specify when calling the scanning API. If you choose to scan barcodes using the camera, camera control capabilities required for scanning need to be developed by yourself. For the two barcode scanning ways, Scan Kit provides optimized scanning algorithms. Choosing the one that suits your needs best will provide you with the best experience.
Prerequisites
- Before installing Site Kit, you should have installed npm, Node.js, ionic CLI. To install ionic in system use below command.
2. Generate a Signing Certificate Fingerprint. For generating the SHA key, refer this article.
3. Create an app in the Huawei AppGallery connect and enable Site Kit in Manage API section. Provide the SHA Key in App Information Section.
4. Provide storage location.
5. Download the agconnect-services.json.
Installation
- Open windows CMD or terminal, and create ionic project.
2. Download Cordova Scan kit plugin. Navigate to your project root directory and install plugin using npm.
3. Install @ionic-native/core in your project for full ionic support with completion code.
4. Copy the “node_modules\@hmscore\cordova-plugin-hms-map\ionic\wrapper\dist\hms-scan” folder to “node_modules/@ionic-native” folder under your Ionic project.
5. Compile the project.
ionic build
npx cap init [appName] [appId]
where appId is package name.
6. After this command, you should add platform to the project. To add, follow command below.
7. Add agconnect-services.json and signing certificate jks file to the app directory in your Android project as show below.
8. Add maven repository and agconnect service dependencies in root level build.gradle.
9. Add plugin and scan kit dependency to the app-level build.gradle.
10. Now sync the project.
11. Import HmsScan in app_module.ts and add it in provider.
Implementation
When app is launched, first screen will have 3 buttons for scanning. DefaultView mode, CustomizeView Mode and Bitmap Mode.
Let us see implementation now.
permissionGranted() method is called when app is launched to get camera and external storage permission from user. Once permission is granted, user can use different modes to scan barcodes.
If scan results contain any URL or link, we will open it in external browser.
Congratulations!! You have implemented different view modes for scanning barcode using HMS Scan kit.
Conclusion
As you can see, it is very simple to use Huawei Mobile Service Scan kit with Ionic. You can develop very wonderful barcode scanner app which can be used in stores, markets, notaries, education, ticket purchases, health institutions, and even street vendors in short, almost all institutions and organizations.
