In this article, I will explain how to integrate Huawei Dynamic Tag Manager(DTM) into React Native project.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
React Native is a framework developed by Facebook that enables cross-platform mobile application development based on JavaScript and React. In this article, HMS will be integrated into react native project and developer sample codes will be provided to increase the productivity of developers.
Service Introduction:
HUAWEI Dynamic Tag Manager (DTM) is a dynamic tag management system. With DTM, you can easily and securely deploy and update your tag configuration in a web-based user interface to monitor specific events and report data to third-party analytics platforms, and to perform data-driven operations based on HUAWEI Analytics' powerful analysis capabilities. While adding HUAWEI Dynamic Tag Manager(DTM) to the application, the analytics kit needs to be integrated into the app.
Integration:
Main steps of integration:
Integrating the HMS Core SDK
Enabling Required Services(Analytics Kit)
Dynamic Tag Manager Configuration
Importing a Configuration File
To able to use Dynamic Tag Manager, you need to follow process below :
1-Register as a Developer and create a new app.
For more detail about registration and verification follow this:
https://developer.huawei.com/consumer/en/doc/10104
2- Enable the analytics kit in the Manage API section .
After that, follow the steps in the link below to integrate HMS Core Sdk into the project and for more details about creating a new project on AppGallery Connect .
https://medium.com/huawei-developers/android-integrating-your-apps-with-huawei-hms-core-1f1e2a090e98
3- Add the DTM and Analytic kit sdk to build.gradle in the app directory from Android Studio
4- Open the Dtm Configuration Page (Growing > Dynamic Tag Manager) on AGC and create configuration. This configuration include all DTM resources (Overview,Variable,Condition,Tag,Group,Version). Only one configuration can be created for an application and the package name cannot be changed while creating the configuration.
After the configuration is created, click on the configuration name.
5-Configuration of Service
On the Overview tab page, you can view the change history and operation records of variables, conditions, and tags in the current configuration version. The operation records on a variable, condition, tag or group are displayed in the operation records area when they are deleted, created, or edited. In change history, it can be checked whether a variable, condition or tag is added or deleted at a specific time.
A variable is a placeholder used in a condition or tag. DTM provides preset variables that can be used to configure most tags and conditions, and also custom variables can be created.
Currently, DTM provides 18 types of preset variables and 6 types of custom variables. Some types of preset variable are shown in below picture.
I created Event Name as a present variable which will use in condition part.
Then, Click the create button in Custom variable row, enter the name, type which is used to obtain the value of the reported event, and event parameter key and click save button.
You can see some of the custom variable types in below, then configure your variable types.
Then, open the condition page. A condition is the prerequisite for triggering a tag and determines when the tag is executed. A tag must contain at least one trigger condition.
A condition consists of three elements: name, type, and trigger condition. Name and type are mandatory section.
For more detail about condition =>
https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/server-dev-0000001050043921
The next step after creating a condition is to create a tag.Tag is used in your app to track events. DTM supports the HUAWEI Analytics and many third-party tag extension templates. It can be set parameters and trigger conditions for a tag in DTM, and release the configuration version to track events.
Firstly, Enter a tag name and set the extension to Huawei Analytics. Then choose one of the operation types shown in below.
After selecting, enter a new event name in event name text box.
NOTE
The event name must start with a letter or reference and can contain only digits, letters, and underscores (_). If a variable is referenced in the event name, you need to ensure that the value of the referenced variable meets the event name constraints. Otherwise, the event may fail to be reported.
Click Add below Parameters for addition or modification and set Key and Value for the parameter. Lastly, click the Add under Trigger condition and set a trigger condition for the tag.
Don’t forget click the save button after creating tag.
Version is used to save different phases of a configuration. It can be created a version for a configuration anytime to save the latest configuration and you can download, preview and release the version in detail page.
To create a version, you can click Create version on the Overview page or click Create on the Version page. Enter the version name and description. All the service configurations are completed on DTM portal. Let’s look at the other detail.
6- After doing all the configuration on DTM portal, download the version page. The name of file is DTM-***.json.
And then, create assets file in src\main directory in app folder and create a new container file in assets, then move to generated configuration DTM-**.json file to the container. The directory will be src/main/assets/container/DTM-***.json.
Hint: Don’t forget to download agconnect-services.json file and add the internet permission to the manifest.
7- It can be skipped this section if you use the visual event function to add events. After all the configurations are imported successfully, the event is sent using the Analytics Kit. Install Analytics kit plugin to project and run the following command.
Then, import Analytics kit to the project and send event.
Using Debug Mode, you can view the event record in real time. Run the following command on an Android device enable the debug mode :
adb shell setprop debug.huwei.hms.analytics.app <Package_name>
Verification Result:
This case successfully integrated HUAWEI Dynamic Tag Manager into react native project. The result shows that developer can integrate DTM to their react native project. For demo project code : https://github.com/simgekeser/React-native-hms-dtm
Official HMS Resources
Dynamic Tag Manager:
Codelab:
https://developer.huawei.com/consumer/en/codelab/HMSDTMKit/index.html#7
Document: https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/introduction-0000001050043907
SDK Library: https://developer.huawei.com/consumer/en/doc/development/HMSCore-Library-V5/sdk-download-0000001050174612-V5
Analytics Kit:
Codelab: https://developer.huawei.com/consumer/en/codelab/HMSAnalyticsKit-ReactNative/index.html#0
Document: https://developer.huawei.com/consumer/en/doc/development/HMS-Guides/react-native-development
SDK Library: https://developer.huawei.com/consumer/en/codelab/HMSAnalyticsKit-ReactNative/index.html#2
Related Links
Thanks to Simge Keser for this article.
Original post:https://medium.com/huawei-developers/dynamic-tag-manager-react-native-d032a03b86d0
Related
More information like this, you can visit HUAWEI Developer Forum
In this article, I would like to record the pits for integrating HUAWEI Wallet Kit I stepped on during the integration, so that you can integrate the Wallet Kit more quickly.
Link to the development guide:
https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides-V5/service-introduction-0000001050042318-V5
Integration Procedure
The Wallet Kit integration process consists of the following five steps:
1. Open the wallet service on the AGC
2. Generating Public and Private Keys
3. Adding a Pass Type on the AGC
4. Running the Demo of the Server
5. Running the Demo of the Client
6. View card adding status
Step 1.2.3 can be performed under the guidance of the development guide.
https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/preparations-server-0000001050160377
You are advised to run the demo provided in the development guide in section 4.5 to avoid many detours.
Note that this function is invoked when the demo is invoked. (The demo is normal, but you need to pay attention to some points when using the demo.)
Download the demo from these
Server demo(huawei-wallet-server-windows-jwe-demo.zip):
https://developer.huawei.com/consumer/en/doc/development/HMSCore-Examples-V5/java-sample-code-0000001050157448-V5
Android demo:
https://developer.huawei.com/consumer/en/doc/development/HMSCore-Examples-V5/android-sample-code-0000001050159395-V5
Note: The sequence of steps in section 4.5 cannot be reversed. The reason is described in the following sections.
Precautions
1. Pass structure
A card is made up of two parts.
Merchant information:
This is called model, which contains fixed information about the same type of vouchers, such as the card base, logo, merchant name, and card type.
Special information about a single pass:
This is called instance, such as membership card numbers, membership points, membership levels, and coupon status.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
2. Sequence of generating templates and objects
In the Wallet Kit, you need to generate a model and then an instance. Only the server has the interface for generating a model. Therefore, the SDK on the device or an interface on the cloud can be invoked to generate a card instance only after the interface for generating a model is invoked on the server.
This is why the order of steps 4.5 cannot be reversed, as described in the integration steps section.
3. Integration server demo
The following describes the five points of the server:
(1) Dependency for downloading each package in the Maven repository
(2) Modifying the Configuration File in the Demo
(3) Run the demo and move the JSON file to the specified location.
(4) Generate JWE character strings.
(5) Binding pass by URL
(1) Dependency for downloading packages in the Maven repository
After the downloaded server demo is opened in the IDEA, some Maven repositories cannot be downloaded. As a result, some files of the project report errors.
You can wait for the IDEA to download it, or manually download it from the Maven official website: https://mvnrepository.com/
Search for the corresponding groupId on the Maven official website. The search list of each artifactId is displayed. Select the required point to download the version of each artifactId.
After the download is complete, you can save the downloaded Maven repository to the local Maven repository. To view the local Maven repository, choose File > SettingsBuild, Execution, Deployment > Build Tools > Mavens on the IDEA.
After the adding is complete, update the Maven repository.
(2) Modify the configuration file in the demo.
After the Maven repository is complete, you can modify the configuration in the demo.
Open the release.config.properties file in the test/resources directory.
appId and appId.secret are the appId and key of the corresponding app in the AGC. The third URL does not need to be changed. The value of walletServerBaseUrl needs to be changed. Check the region (China, Europe, Asia, Africa, and Russia) to which your developer account belongs. For details about the corresponding URL, see https://developer.huawei.com/consum...-V5/wallet-server-api-2-9-0000001050158382-V5, here, my developer account belongs to Europe. Therefore, change the URL to the URL of Europe. (If you forget the region to which your account belongs, you can try each URL when the demo reports an error.)
The screenshot after the modification is as follows:
(3) Run the demo and move the JSON file to the specified directory.
After the configuration is complete, copy the hmspass folder in the config directory, build the project, click Build-Build Progect. Then, copy the hmspass folder to the target/classes directory.
After that, you can run the demo. When you run the demo, you should mainly run the java files in the Test folder
Each type of passes corresponds to two Java files. The file whose name ends with ModelTest provides the examples of adding, modifying, and querying pass models. The file whose name ends with InstanceTest provides the examples of adding, modifying, and querying pass instances.
a. Generate a pass model
The following uses the member card (loyalty) as an example.
Open the HwLoyaltyModelTest file and create a model method named createLoyaltyModel().
The LoyaltyModel.json file is the file to be transferred to Huawei interfaces. Before running the method, you need to modify the file information. You can find the file in the target/classes/hmspass directory.
Modify the passTypeIdentifier and passStyleIdentifier fields. The passTypeIdentifier field is the service ID defined when we add card types on the AGC. The passStyleIdentifier field is the unique identifier of the model and is used when pass instances are created, field defined by the developer. The screenshot after the modification is as follows:
The following figure shows the console after createLoyaltyModel() is executed.
b. Generate a pass instance.
The following uses the member card (loyalty) as an example.
The procedure is similar to that for modifying a model. Open the HwLoyaltyInstanceTest file and view the LoyaltyInstance.json file in createLoyaltyInstance().
Change the values of passTypeIdentifier and passStyleIdentifier to the values generated in the previous step. The values of serialNumber and organizationPassId are unique identifiers of cards (in different application scenarios). Ensure that the values of the two fields are unique.
Then we run createLoyaltyInstance() to generate a pass instance.
(4) Generate a JWE character string
The generateThinJWEToBindUser() and generateJWEToAddPassAndBindUse() methods exist in the InstanceTest file of each pass.
generateThinJWEToBindUser(): Signs and encrypts the generated pass instance and generates a character string. -----The createLoyaltyInstance() method of (3).b does not need to be executed.
generateJWEToAddPassAndBindUse(): Signs and encrypts pass instances that are not generated, and generates corresponding character strings. ------The createLoyaltyInstance() method of (3).b does not need to be executed.
The two methods are similar. The following uses generateThinJWEToBindUser() as an example. The code is as follows:
appId indicates the app ID, and instanceIdListJson indicates the serialNumber set when the pass instance is generated. The code after modification is as follows:
Note: The LoyaltyInstance.json file in generateJWEToAddPassAndBindUse() is a pass instance that is not generated (the createLoyaltyInstance() method is not executed).
Then you need to change the value of jweSignPrivateKey to the private key of the public key configured on the AGC card.
The screenshot after the modification is as follows:
The following results are obtained:
A JWE string is generated after the serialNumber of a pass is encrypted and signed. Generally, the JWE string is called a thin JWE.
(5) Bind pass by URL
Huawei provides an interface for binding pass through the URL. The format is https://{walletkit_website_url}/walletkit/consumer/pass/save?jwt={jwt_content}.
{jwt_content} is the URL-encoded JWE String obtained in the previous step. The URL-encoded code is as follows:
URLEncoder.encode(jwtStrInstanceIds, StandardCharsets.UTF_8.toString())
{walletkit_website_url}: URL of the area where the developer is located. The mapping is as follows:
For example, the URL of the thin JWE in Europe is in the following format:
https://walletpass-dre.cloud.huawei.com/walletkit/consumer/pass/save?jwt=YWlKtBZmNGtT.......eTlabW
After you enter the URL in the browser, the Huawei ID login page is displayed. Log in to a Huawei ID that is in the same region as the developer account.
After the login is successful, the card binding result is displayed.
The possible cause of binding fail is that the pass has been bound by another user or the region of the Huawei ID is different from that of the developer account.
4. Integrate the client demo.
(1) Changing the Key
(2) Enter the pass information and add passes.
(3) Confirm and log in with your Huawei ID.
(4) Bind passes
(5) Open your wallet and check your passes.
(1) Changing the Key
After opening the HmsWalletClientDemo project using Android Studio, you need to modify the PRIVATE_KEY_EUROPE_DEBUG file in the Constant.java file in the com.huawei.hms.wallet package.
Change the value of this field to the content in the private.txt file that is generated when the public key and private key are generated in step 1.
(2) Enter the pass information and add passes.
a. Select European test environment
b. Click ClickSaveLoyaltyCard
For the full content, you can visit HUAWEI Developer Forum
More information like this, you can visit HUAWEI Developer Forum
Original article link: https://forums.developer.huawei.com/forumPortal/en/topicview?tid=0201326096858500005&fid=0101187876626530001
Xamarin with HMS
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Xamarin : Cross-platform. Open source. An app platform for building Android and iOS apps with .NET and C#.
For now we don't have an official nuget plugin for Xamarin so you need to use the native Android sdk so you need to know about :
Binding a Java Library
Overview
The third-party library ecosystem for Android is massive. Because of this, it frequently makes sense to use an existing Android library than to create a new one. Xamarin.Android offers two ways to use these libraries:
Create a Bindings Library that automatically wraps the library with C# wrappers so you can invoke Java code via C# calls.
Use the Java Native Interface (JNI) to invoke calls in Java library code directly. JNI is a programming framework that enables Java code to call and be called by native applications or libraries.
so in briefwe can say if we used the Binding Native library we will convert the sdk from the java code to c# code to being used in your xamarin project , the binding project will contains a wrapper that will convert the jave code to the C# code .
The question now as we know there is a lot of different between C# and Java so should i have any issue after the wrapper job ??
the answer for this yes because you will find some language rules will not be included in C# or maybe you will find something can be implement in Java but in C# have different way to be implement and in some case multiple way ,so the wrapper will make a lot of hard work to you but in some times you need to modify the wrapper result to make the code build-able and compiled with no issues ,
When binding an existing Android library, it is necessary to keep the following points in mind:
Are there any external dependencies for the library? – Any Java dependencies required by the Android library must be included in the Xamarin.Android project as a ReferenceJar or as an EmbeddedReferenceJar. Any native assemblies must be added to the binding project as an EmbeddedNativeLibrary.
What version of the Android API does the Android library target? – It is not possible to "downgrade" the Android API level; ensure that the Xamarin.Android binding project is targeting the same API level (or higher) as the Android library.
What version of the JDK was used to compile the library? – Binding errors may occur if the Android library was built with a different version of JDK than in use by Xamarin.Android. If possible, recompile the Android library using the same version of the JDK that is used by your installation of Xamarin.Android.
Now from where can i got the SDK
You will find a direct link for some SDKs at our website with (.arr) or (jar) extensions some times you need multiple jars and arr for one SDK for example if you want to use the Ads Kit you will find the following files to get the full SDK:
Ads Banner (.arr) or (jar) extensions
Ads Base (.arr) or (jar) extensions
Ads Consent (.arr) or (jar) extensions
Ads Interstitial (.arr) or (jar) extensions
Ads Lan (.arr) or (jar) extensions
Ads Lite (.arr) or (jar) extensions
Ads Native (.arr) or (jar) extensions
Ads Reward (.arr) or (jar) extensions
Ads Splash (.arr) or (jar) extensions
Ads Template (.arr) or (jar) extensions
after you get these files you need to create Bindings Native Library for each project and then add the file (.arr) or (jar) inside the project and then compile it to get the SDK as DLL as following :
1.Create new project
2.Select android bindings library project
3.Configure your new project
4.Finally you will have the following project structures
You can add all the projects in one solution like below
by right click on the soultion => add new project and re-follow all the steps before
After doing this you need to take the (.arr) or (jar) and adding it to the Jars folder and change the Build Actions as following :
EmbeddedJar – Embeds the .jar into the resulting Bindings Library DLL as an embedded resource. This is the simplest and most commonly-used build action. Use this option when you want the .jar automatically compiled into byte code and packaged into the Bindings Library.
InputJar – Does not embed the .jar into the resulting Bindings Library .DLL. Your Bindings Library .DLL will have a dependency on this .jar at runtime. Use this option when you do not want to include the .jar in your Bindings Library (for example, for licensing reasons). If you use this option, you must ensure that the input .jar is available on the device that runs your app.
LibraryProjectZip – Embeds an .AAR file into the resulting Bindings Library .DLL. This is similar to EmbeddedJar, except that you can access resources (as well as code) in the bound .AAR file. Use this option when you want to embed an .AAR into your Bindings Library.
ReferenceJar – Specifies a reference .jar: a reference .jar is a .jar that one of your bound .jar or .AAR files depends on. This reference .jar is used only to satisfy compile-time dependencies. When you use this build action, C# bindings are not created for the reference .jar and it is not embedded in the resulting Bindings Library .DLL. Use this option when you will make a Bindings Library for the reference .jar but have not done so yet. This build action is useful for packaging multiple .jars (and/or .AARs) into multiple interdependent Bindings Libraries.
EmbeddedReferenceJar – Embeds a reference .jar into the resulting Bindings Library .DLL. Use this build action when you want to create C# bindings for both the input .jar (or .AAR) and all of its reference .jar(s) in your Bindings Library.
EmbeddedNativeLibrary – Embeds a native .so into the binding. This build action is used for .so files that are required by the .jar file being bound. It may be necessary to manually load the .so library before executing code from the Java library. This is described below.
but usually we will use EmbeddedJar and LibraryProjectZip .
you can change build action like this
right click at the file it self like this and click on properties
2.then you will note the properties tab like this
And then you should choose from the build action a LibraryProjectZip for aar files and EmbeddedJar for jar files.
After this you need to build the project by right click on the project and build as below.
After the build completed without errors you should go to the obj folder it will be hiden from the solution so maybe you need to open the folder from by the path and you will find the obj folder like this
and you will find the DLL file inside your debug folder with the same name of your project that contains the SDK in C# code and then you can go to you main project and add this Dll as a reference and if you want to know if it compiled fine you can go to objDebuggeneratedsrc and this folder shouldn't be empty like the below
In case you have a build errors and you follow these steps in correct way it could be for tow reason
you have error related to the Java rules can't be done from the wrapper it self like name of object or return type ..ect then you need to fix these error using the metadata.xml file
to know more about these error and how to fix them you need to the following link its a line of code to manage how the wrapper handle this code https://docs.microsoft.com/en-us/xamarin/android/platform/binding-java-library/customizing-bindings/java-bindings-metadata
the second one your project depends on another dll to be complete for example when you use the ADs kit the Ads Banner need a refrance from Ads Base if not you will see error display can't find class with name so you need to know how to refernace your projects together
Conclusion
you need to setup your SDK on C# to enable you access the functions and method by using Binding a Java Library
Reference
https://docs.microsoft.com/en-us/xamarin/android/platform/binding-java-library/customizing-bindings/java-bindings-metadata
https://docs.microsoft.com/en-us/xamarin/android/platform/binding-java-library/
https://developer.huawei.com/consumer/en/doc/HMS-Plugin-Library-V1/xamarin-sdk-download-0000001050175494-V1
https://developer.huawei.com/consumer/en/doc/HMS-Plugin-Guides-V1/creating-xamarin-android-binding-libraries-0000001050267972-V1
What can I do if I want to migrate an application from one account to another?
What can I do if I want to migrate an application with Huawei IAP from one accout to another?
What can I do if I want to migrate an application with Huawei IAP and from one accout to another?
Don’t worry, App Transfer Operation Guide can help you, you just need do as follows:
1. Prepare the following materials:
1）Transfer-out account
2）Transfer-in account
3）App ID: You can log in to AppGallery Connect and go to Develop > Overview > App Information to obtain it.
2. Download the following document and fill it in.
1）App Transfer Application Form
2）App Transfer Checklist (Outside China)
3）lIf your app is distributed to China, you need to prepare copyright documents. For details, please refer to https://developer.huawei.com/consumer/en/doc/distribution/app/30215.
3. Apply for application transfer operations by referring to App Transfer Operation Guide based on your application type.
Learn how to create a flight ticket app that includes the Huawei Scan Kit using the Flutter SDK.
Original link: https://forums.developer.huawei.com/forumPortal/en/topic/0204446847731810079
Introduction
In this article, I am going to be doing a flight ticket barcode scanning and barcode creation application with Flutter. We will be looking at some of the APIs that Huawei Scan Kit provides and learn how to use them in our flight ticket projects.
Huawei Scan Kit
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.
Scan Kit automatically detects, magnifies, and recognizes barcodes from a distance, and is also able to scan a very small barcode in the same way. It works even in suboptimal situations, such as under dim lighting or when the barcode is reflective, dirty, blurry, or printed on a cylindrical surface.
Configuring The Project
Before you get started, you must register as a HUAWEI developer and complete identity verification on the HUAWEI Developer website. For details, please refer to Register a HUAWEI ID.
Create an app in your project is required in App Gallery Connect in order to communicate with Huawei services.
Creating Project in App Gallery Connect
★ Sign in to AppGallery Connect and select My projects. Click your project from the project list.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
★ Go to Project Setting > General information, and click Add app. If an app exists in the project, and you need to add a new one, expand the app selection area on the top of the page and click Add app and enter app information, and click OK.
★ Open your Android Studio and create a Flutter application. The package name of the application must match the package name of the application you created in App Gallery Connect.
★ To use HUAWEI Scan APIs, you need to enable the scan service first. For more information, please refer to Enabling Services.
Configuring the Signing Certificate Fingerprint
· Go to Project Setting > General information. In the App information field, click the add your SHA256 fingerprint.
· After completing the configuration, click(✓) check mark.
Permissions
In order to make your scan work perfectly, you need to add the permissions below in AndroidManifest.xml file.
Integrating HMS and Scan Plugin to Your Flutter Project
· Check whether the agconnect-services.json file and signature file are successfully added to the android/app directory of the Flutter project.
· Add the Maven repository address and AppGallery Connect service dependencies into the android/build.gradle file.
buildscript { repositories {
google()
jcenter()
maven { url 'https://developer.huawei.com/repo/' }
}
dependencies {
/*
* <Other dependencies>
*/
classpath 'com.huawei.agconnect:agcp:1.4.1.300'
}
}
· Configure the Maven repository address for the HMS Core SDK in allprojects.
allprojects { repositories { google() jcenter() maven { url 'https://developer.huawei.com/repo/' } }}
· Add the apply plugin: ‘com.huawei.agconnect’ line after the apply from: “$flutterRoot/packages/flutter_tools/gradle/flutter.gradle” line.
apply plugin: 'com.android.application'apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"apply plugin: 'com.huawei.agconnect'
· Open your app level build.gradle (android/app/build.gradle) file and set minSdkVersion to 19 or higher in defaultConfig. (applicationId must match the package_name entry in the agconnect-services.json file)
defaultConfig { applicationId "<package_name>" minSdkVersion 19 /* * <Other configurations> */ }
· Configure the signature in android(android/app/build.gradle) according to the signature file information.
Code:
/* * <Other configurations> */ signingConfigs { config { storeFile file('<keystore_file>.jks') storePassword '<keystore_password>' keyAlias '<key_alias>' keyPassword '<key_password>' } } buildTypes { debug { signingConfig signingConfigs.config } release { minifyEnabled true shrinkResources true proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' signingConfig signingConfigs.config } }}
Add Dependencies to ‘pubspec.yaml’
On your Flutter project directory find and open your pubspec.yaml file of your project and add Huawei Scan Plugin as a dependency. Run flutter pub get command to integrate Scan Plugin to your project.
There are all plugins in pub.dev with the latest versions. If you downloaded the package from pub.dev, specify the package in your pubspec.yaml file. Then, run flutter pub get command.
· Scan Kit Plugin for Flutter
We’re done with the integration part! Now, we are ready to make our flight ticket application ✓
Make a Flight Ticket App with Flutter
Scan Screen
In this application, we are going to use two features of the Huawei Scan Kit. The first is startDefaultView and we are going to use it to scan the barcode of the tickets. The second is buildBitmap and we are going to use that to generate the ticket barcode.
So let’s start by adding buttons to the main.dart with which we can integrate these two features.
Flight Ticket Scan Screen With startDefaultView
In order to scan flight ticket barcodes, we’ll call the startDefaultView method via the scanUtils class and pass the request result from the DefaultViewRequest to it. In return, this method gives us the scan response result through ScanResponse class.
Let’s create a BoardingPassParser.dart class to parse the data from the result according to flight rules. Also, let’s instance the passenger data details from the Passenger.dart class.
If you want to see the full code, please see the github page.
Now, that we have adjusted our scan result according to flight data, we can show it in Ui. If the barcode is not a flight ticket barcode, it’ll send us a CustomAlertDialog widget in CustomUi class.
Note: I won’t give Ui codes here as it is out of our purpose using the Huawei Scan kit. You can access all the code in the ScanScreen.dart class from Github.
Conclusion
In this article, you learned how you can integrate the HMS Scan Kit with your Flutter projects. We saw, how we can easily use the services such as scanning and barcode generation provided by the Scan kit in your applications, it is time to explore other Huawei kits. I leave a few links below for this and finally, you can find the github link I used for Ui design in the references section. This design was really enjoyable.
For more details, you can go to:
Our official website: https://developer.huawei.com/consumer/en/hms?ha_source=hms1
Our Development Documentation page, to find the documents you need: https://developer.huawei.com/consumer/en/doc/development?ha_source=hms1
Reddit to join our developer discussion: https://www.reddit.com/r/HuaweiDevelopers/
GitHub to download demos and sample codes: https://github.com/HMS-Core
Stack Overflow to solve any integration problems: https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Newest
John Wo said:
Learn how to create a flight ticket app that includes the Huawei Scan Kit using the Flutter SDK.
Original link: https://forums.developer.huawei.com/forumPortal/en/topic/0204446847731810079
Introduction
In this article, I am going to be doing a flight ticket barcode scanning and barcode creation application with Flutter. We will be looking at some of the APIs that Huawei Scan Kit provides and learn how to use them in our flight ticket projects.
Huawei Scan Kit
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.
Scan Kit automatically detects, magnifies, and recognizes barcodes from a distance, and is also able to scan a very small barcode in the same way. It works even in suboptimal situations, such as under dim lighting or when the barcode is reflective, dirty, blurry, or printed on a cylindrical surface.
Configuring The Project
Before you get started, you must register as a HUAWEI developer and complete identity verification on the HUAWEI Developer website. For details, please refer to Register a HUAWEI ID.
Create an app in your project is required in App Gallery Connect in order to communicate with Huawei services.
Creating Project in App Gallery Connect
★ Sign in to AppGallery Connect and select My projects. Click your project from the project list.
★ Go to Project Setting > General information, and click Add app. If an app exists in the project, and you need to add a new one, expand the app selection area on the top of the page and click Add app and enter app information, and click OK.
★ Open your Android Studio and create a Flutter application. The package name of the application must match the package name of the application you created in App Gallery Connect.
★ To use HUAWEI Scan APIs, you need to enable the scan service first. For more information, please refer to Enabling Services.
Configuring the Signing Certificate Fingerprint
· Go to Project Setting > General information. In the App information field, click the add your SHA256 fingerprint.
· After completing the configuration, click(✓) check mark.
Permissions
In order to make your scan work perfectly, you need to add the permissions below in AndroidManifest.xml file.
Integrating HMS and Scan Plugin to Your Flutter Project
· Check whether the agconnect-services.json file and signature file are successfully added to the android/app directory of the Flutter project.
· Add the Maven repository address and AppGallery Connect service dependencies into the android/build.gradle file.
buildscript { repositories {
google()
jcenter()
maven { url 'https://developer.huawei.com/repo/' }
}
dependencies {
/*
* <Other dependencies>
*/
classpath 'com.huawei.agconnect:agcp:1.4.1.300'
}
}
· Configure the Maven repository address for the HMS Core SDK in allprojects.
allprojects { repositories { google() jcenter() maven { url 'https://developer.huawei.com/repo/' } }}
· Add the apply plugin: ‘com.huawei.agconnect’ line after the apply from: “$flutterRoot/packages/flutter_tools/gradle/flutter.gradle” line.
apply plugin: 'com.android.application'apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"apply plugin: 'com.huawei.agconnect'
· Open your app level build.gradle (android/app/build.gradle) file and set minSdkVersion to 19 or higher in defaultConfig. (applicationId must match the package_name entry in the agconnect-services.json file)
defaultConfig { applicationId "<package_name>" minSdkVersion 19 /* * <Other configurations> */ }
· Configure the signature in android(android/app/build.gradle) according to the signature file information.
Code:
/* * <Other configurations> */ signingConfigs { config { storeFile file('<keystore_file>.jks') storePassword '<keystore_password>' keyAlias '<key_alias>' keyPassword '<key_password>' } } buildTypes { debug { signingConfig signingConfigs.config } release { minifyEnabled true shrinkResources true proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' signingConfig signingConfigs.config } }}
Add Dependencies to ‘pubspec.yaml’
On your Flutter project directory find and open your pubspec.yaml file of your project and add Huawei Scan Plugin as a dependency. Run flutter pub get command to integrate Scan Plugin to your project.
There are all plugins in pub.dev with the latest versions. If you downloaded the package from pub.dev, specify the package in your pubspec.yaml file. Then, run flutter pub get command.
· Scan Kit Plugin for Flutter
We’re done with the integration part! Now, we are ready to make our flight ticket application ✓
Make a Flight Ticket App with Flutter
Scan Screen
In this application, we are going to use two features of the Huawei Scan Kit. The first is startDefaultView and we are going to use it to scan the barcode of the tickets. The second is buildBitmap and we are going to use that to generate the ticket barcode.
So let’s start by adding buttons to the main.dart with which we can integrate these two features.
Flight Ticket Scan Screen With startDefaultView
In order to scan flight ticket barcodes, we’ll call the startDefaultView method via the scanUtils class and pass the request result from the DefaultViewRequest to it. In return, this method gives us the scan response result through ScanResponse class.
Let’s create a BoardingPassParser.dart class to parse the data from the result according to flight rules. Also, let’s instance the passenger data details from the Passenger.dart class.
If you want to see the full code, please see the github page.
Now, that we have adjusted our scan result according to flight data, we can show it in Ui. If the barcode is not a flight ticket barcode, it’ll send us a CustomAlertDialog widget in CustomUi class.
Note: I won’t give Ui codes here as it is out of our purpose using the Huawei Scan kit. You can access all the code in the ScanScreen.dart class from Github.
Conclusion
In this article, you learned how you can integrate the HMS Scan Kit with your Flutter projects. We saw, how we can easily use the services such as scanning and barcode generation provided by the Scan kit in your applications, it is time to explore other Huawei kits. I leave a few links below for this and finally, you can find the github link I used for Ui design in the references section. This design was really enjoyable.
For more details, you can go to:
Our official website: https://developer.huawei.com/consumer/en/hms?ha_source=hms1
Our Development Documentation page, to find the documents you need: https://developer.huawei.com/consumer/en/doc/development?ha_source=hms1
Reddit to join our developer discussion: https://www.reddit.com/r/HuaweiDevelopers/
GitHub to download demos and sample codes: https://github.com/HMS-Core
Stack Overflow to solve any integration problems: https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Newest
Click to expand...
Click to collapse
Well explained, what are all the permissions required.
Does service supports for IOS?
You may receive various requirements from product managers in daily work. Basically, you should have a general understanding of the requirement for questioning and reviewing the requirement when communicating further with the product manager. This article simply demonstrates why the third-party sign-in function worth to be integrated to an app.
What is third-party sign-in?
Third-party sign-in helps users register and sign in to an app after authorization with a registered account and password from a third-party platform.
Why does an app need to integrate the third-party sign-in function?
For users: When registering or signing in to an app, users often give up when they experience issues such as a verification code sending too slow or not being sent at all. Creating an app that features a seamless registration and sign-in experience is often overlooked.
For marketers: A lot of advertising is involved before a user even finds and installs an app, which is expensive both for apps that are in startup phase and in mature phase.
Third-party sign-in is a good choice for apps to retain users which ensures that users can smoothly register and sign in to an app.
What third-party sign-in modes are available?
Social third-party sign-in: applicable to most apps.
E-commerce third-party sign-in: suitable for apps in fields such as e-commerce, finance, and travel that involve abundant payment scenarios.
Are there any other third-party sign-in modes?
Similar to most third-party sign-in modes, HUAWEI Account Kit allows users to sign in to an app on multiple devices including Huawei phones, tablets, and HUAWEI Visions with their HUAWEI IDs.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
HUAWEI Account Kit provides the following services:
1. Convenient app sign-in
Users can quickly and easily sign in to apps with their HUAWEI IDs. For first time set-up, users need to authorize the app in order to later sign in to the app with just one tap. For even greater convenience, one HUAWEI ID can be used to sign in to all apps.
2. Supported sign-in on multiple devices by scanning barcodes
All HMS apps and services can be used on Huawei devices by signing in with a HUAWEI ID. In addition, once a user signs in to the account center using a HUAWEI ID, the user's account information can be synchronized on all Huawei devices, enhancing user experience and convenience at the tap of a button.
3. Secure sign-in
HUAWEI Account Kit safeguards user accounts with two-factor authentication (password plus verification code).
How do I integrate HUAWEI Account Kit?
If you are using Android Studio, you can integrate the HMS Core SDK via the Maven repository. Before you start developing an app, integrate the HMS Core SDK into your Android Studio project.
Adding the AppGallery Connect configuration file of your app.
If you have enabled certain services in AppGallery Connect, add the agconnect-services.json file to your app.
Sign in to AppGallery Connect and click My projects.
Find your project and click the app for which you want to integrate the HMS Core SDK.
Go to Project settings > General information. In the App information area, download the agconnect-services.json file.
Copy the agconnect-services.json file to the app's root directory of your Android Studio project.
Configuring the Maven repository address for the HMS Core SDK.
Open the build.gradle file in the root directory of your Android Studio project.
Add the AppGallery Connect plugin and the Maven repository.
Go to buildscript > repositories and configure the Maven repository address for the HMS Core SDK.
Go to allprojects > repositories and configure the Maven repository address for the HMS Core SDK.
If the agconnect-services.json file has been added to the app, go to buildscript > dependencies and add the AppGallery Connect plugin configuration.
Code:
buildscript {
repositories {
google()
jcenter()
// Configure the Maven repository address for the HMS Core SDK.
maven {url 'https://developer.huawei.com/repo/'}
}
dependencies {
...
// Add the AppGallery Connect plugin configuration.
classpath 'com.huawei.agconnect:agcp:1.4.2.300'
}
}
allprojects {
repositories {
google()
jcenter()
// Configure the Maven repository address for the HMS Core SDK.
maven {url 'https://developer.huawei.com/repo/'}
}
}
Note: The Maven repository address cannot be accessed from a browser. It can only be configured in the IDE. If there are multiple Maven repositories, add the Maven repository address of Huawei as the last one.
Adding build dependencies.
Open the build.gradle file in the app directory.
Add a build dependency in the dependencies block.
Code:
dependencies {
implementation 'com.huawei.hms:hwid:
{version}
'
}
Note: hwid indicates HUAWEI Account Kit. Replace {version} with the actual SDK version number, for example, implementation 'com.huawei.hms:hwid:5.2.0.300. For details about the version number, please refer to Version Change History.
Add the AppGallery Connect plugin configuration.
In versions earlier than Android Studio 4.0, add the following information under apply plugin: 'com.android.application' in the file header:
Code:
apply plugin: 'com.huawei.agconnect'
In Android Studio 4.0 or later, add the following configuration in the plugins block:
Code:
plugins {
...
id 'com.huawei.agconnect'
}
Defining multi-language settings.
By default, your app supports all languages provided by the HMS Core SDK. If your app uses all of these languages, skip this section.
If your app uses only some of these languages, follow the steps in this section to complete the required configuration.
Open the build.gradle file in the app directory.
Go to android > defaultConfig, add resConfigs, and configure the supported languages as follows:
Code:
android {
defaultConfig {
...
resConfigs "en", "zh-rCN", "Other languages supported by your app"
}
}
For details about the languages supported by the HMS Core SDK, please refer to Languages Supported by HMS Core SDK.
Synchronizing the project.
After completing the configuration, click the synchronization icon on the toolbar to synchronize the Gradle files.
Note: If an error occurs, check the network connection and the configuration in the Gradle files.
Configuring metadata.
Note:
In the following scenario, configure metadata to prompt users to download HMS Core (APK):
HUAWEI AppGallery allows your app to download other apps in the background, and you call relevant APIs through an activity.
In the following scenario, skip the configuration steps. Currently, it is not possible to prompt users to download HMS Core (APK).
In contrast, Google Play does not allow your app to download other apps in the background, or you call relevant APIs through a context.
Add the following code to the application element in the AndroidManifest.xml file to prompt users to download HMS Core (APK):
Code:
<application ...>
<meta-data
android:name="com.huawei.hms.client.channel.androidMarket"
android:value="false" />
...
</application>
After HMS Core (APK) is downloaded, the HMS Core SDK will automatically install or update HMS Core (APK).
Configuring the AndroidManifest.xml file.
Android 11 has changed the way an app queries and interacts with other apps on the device. You can use the <queries> element to define a group of apps that your app can access.
If targetSdkVersion is 30 or later, add the <queries> element in the manifest element in AndroidManifest.xml to grant you app access to HMS Core (APK).
Code:
<manifest ...>
...
<queries>
<intent>
<action android:name="com.huawei.hms.core.aidlservice" />
</intent>
</queries>
...
</manifest>
Note:
The <queries> element requires the following:
Your Android Studio version is 3.3 or later.
The Android Gradle plugin supported by your Android Studio is in the latest dot release. For more details, please visit the link.
To learn more, please visit:
HUAWEI Developers official website
Development Guide
Reddit to join developer discussions
GitHub or Gitee to download the demo and sample code
Stack Overflow to solve integration problems
Follow our official account for the latest HMS Core-related news and updates.
Original Source