Integrating ML Kit's Product Visual Search Service - Huawei Developers

1. Applicable Scenarios
Product visual searches are mainly used for online shopping apps. When you integrate this service into your app, your users will be able to make image-based product searches. This means that when they see a product they like, they can simply take a picture of it, and your app can show them results relating to that product.
2. Enabling the Service
(1) Sign to AppGallery Connect and click My projects. Go to Build > ML Kit > Configuration > Product Visual Search. In the Manage product sets area, click Add a product set.
(2) Once you have added the set, contact us to start the review process. Then, when the set has been approved, you can add products to it.
3. Adding a Product Using Postman
(1) Applying for an Access token
Set the keys under Body, including client_id, client_secret, and grant_type. The values of client_id and client_secret are respectively the app ID and app secret that you have applied in AppGallery Connect. After the keys are set, an access token that is symmetrically encrypted will be returned for the product visual search service to verify the identity of a service request sender. Each access token has a validity period of one hour.
{
"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"
}
URI: https://oauth-login.cloud.huawei.com/oauth2/v2/token
To obtain the values of client_id and client_secret, sign in to AppGallery Connect and go to My projects > Project settings > Convention.
Here's an example of a request result:
Code:
<p style="line-height: 1.5em;">HTTP/1.1 200 OK
Content-Type: text/html;charset=UTF-8
{
"access_token":"CFyJ7eTl8WIPi9603E7Ro9Icy+K0JYe2qVjS8uzwCPltlO0fC7mZ0gzZX9p8CCwAaiU17nyP+N8+ORRzjjk1EA==",
"expires_in":3600,
"token_type":"Bearer"
}
</p>
(2) Adding a Product
The product visual search service authenticates every access request. As a result, all request headers, from either the .com or .cn domain, need to contain the relevant authorization information.
i. In the Token area of the Authorization screen, input the token returned. Choose Bearer Token for TYPE.
ii. Configure the parameters in the Headers section.
Here, the parameter for POST is the address of the data storage location which you set in AppGallery Connect, and a URI.
Choose the address for your country/region:
Chinese mainland: https://ml-api-drcn.ai.dbankcloud.com
Europe: https://ml-api-dre.ai.dbankcloud.com
Russia: https://ml-api-drru.ai.dbankcloud.com
Singapore: https://ml-api-dra.ai.dbankcloud.com
URI: /v1/mlkit/snapshop/set/${product-set-id}/product/add
In the URI, ${product-set-id} is the name of the product set.
HMS-APPLICATION-ID: app ID, which is the client_id of your app applied in AppGallery Connect.
X-Request-ID: request ID, which is generated by UUID.randomUUID().
X-Package-Name: package name of your app.
X-Mlkit-Version: version number of ML Kit.
iii. Go to Body > raw and configure parameters in JSON structure.
Code:
<p style="line-height: 1.5em;">{
"appPackage":"com.huawei.industrydemo.shopping",
"category": "4",
"customContent": "test",
"images": [{"imageId": "", "region": "", "url": "https://res.vmallres.com/pimages//product/6941487204656/group//800_800_2A4099A441BF0670CA0F6BA0EEF5D70E16430F99A6699CB3.png"}],
"productId": 5,
"productUrl": "https://res.vmallres.com/pimages//product/6941487204656/group//800_800_2A4099A441BF0670CA0F6BA0EEF5D70E16430F99A6699CB3.png"
}
</p>
The mandatory parameters are productId, images, and url in images.
category: product category. The options are as follows:
0: others; 1: clothing; 2: shoes; 3: bags; 4: digital & home appliances; 5:homegoods; 6: toys; 7: cosmetics; 8: accessories; 9: food
customContent: custom content of a product.
productId: ID of a product, which should be unique. It should only contain English letters (in either upper- or lower-case form), numbers, hyphens (-), and underscores (_).
images: images list.
productUrl: optional, URL of a product.
iv. Once you have completed the steps above, you can send the POST request. When the request has been sent successfully, the server of the product visual search returns:
{"retCode":"0","retMsg":"Success"}
4. Deleting a Product
You may also want to delete products from a product set.
(1) Configure Authorization parameters. For details, refer to the first step of Adding a Product.
(2) Configure parameters for Headers.
URI: /v1/mlkit/snapshop/set/${product-set-id}/produc t/${product-id}
In the URI, ${product-set-id} is the name of the product set, and {product-id} is the ID of the product.
X-Country-Code: code of your country or region.
The other parameters are the same as those in step 2 of Adding a Product.
(3) Send the POST request after you have completed the two steps above. When the product has been successfully deleted, the product visual search server will return:
{"retCode":"0","retMsg":"Success"}
5. Development Process
(1) Add the Maven repository to the .gradle file in the root directory of your project.
Code:
<p style="line-height: 1.5em;">buildscript {
repositories {
google()
jcenter()
maven {url 'https://developer.huawei.com/repo/'}
}
dependencies {
...
classpath 'com.huawei.agconnect:agcp:1.4.1.300'
}
}
allprojects {
repositories {
google()
jcenter()
maven {url 'https://developer.huawei.com/repo/'}
}
}
</p>
(2) Add SDK dependencies to the app-level build.gradle file
Code:
<p style="line-height: 1.5em;">dependencies{
// Import the product visual search SDK.
implementation 'com.huawei.hms:ml-computer-vision-cloud:2.0.3.300'
}
Under apply plugin: 'com.android.application' , add:
apply plugin: 'com.huawei.agconnect'
</p>
More details, you can check https://forums.developer.huawei.com/forumPortal/en/topic/0201463427323310032

Related

Integrating Huawei Analytics Kit to Flutter Projects and Sending Events

In this article, I am going to create a Flutter project –actually a tiny game- and explain how to implement Analytics Kit. But first, let me inform you about Huawei Analytics Kit a little.
{
"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 Analytics Kit
Huawei Analytics Kit offers you a range of analytics models that help you not only to analyze users’ behavior with preset and custom events, but also gain an insight into your products and contents. So that you can improve your skills about marketing your apps and optimizing your products.
HUAWEI Analytics Kit identifies users and collects statistics on users by anonymous application identifier (AAID). The AAID is reset in the following scenarios:
1) Uninstall or reinstall the app.
2) The user clears the app data.
After the AAID is reset, the user will be counted as a new user.
HUAWEI Analytics Kit supports event management. For each event, maximum 25 parameters; for each app maximum 100 parameters can be defined.
There are 3 types of events: Automatically collected, predefined and custom.
Automatically collected events are collected from the moment you enable the kit in your code. Event IDs are already reserved by HUAWEI Analytics Kit and cannot be reused.
Predefined events include their own Event IDs which are predefined by the HMS Core Analytics SDK based on common application scenarios. The ID of a custom event cannot be the same as a predefined event’s ID. If so, you will create a predefined event instead of a custom event.
Custom events are the events that you can create for your own requirements.
More info about the kit and events.
Configuration in AppGallery Connect
Firstly, you will need a Huawei developer account. If you don’t have one, click here and register. It will be activated in 1–2 days.
After signing in to AppGallery Connect, you can add a new project or select an existing project. In the project you choose, add an app. While adding app, make sure you enter the package name right. It should be the same as your Flutter project’s package name.
Also, make sure you set data storage location, enable Analytics kit and add SHA-256 fingerprint to AppGallery Connect.
How to generate SHA-256 Fingerprint?
In Android Studio, right click on android folder under your project and select Flutter > Open Android module in Android Studio.
On the right panel, select Gradle and follow the steps that are shown in the picture below. Open signingReport and there is your SHA-256 fingerprint.
Copy the code and paste it on the project settings in the AppGallery Connect.
Integrate HMS to your project
Download agconnect-services.json file and place it under project_name > android > app.
Add Signing Configuration
Create a file named key.properties under android folder and add your signing configs here.
Code:
storeFile file(‘<keystore_file>.jks’)
storePassword ‘<keystore_password>’
keyAlias ‘<key_alias>’
keyPassword ‘<key_password>’
Define your key.properties file by adding the code below, before android block in your app-level build.gradle file.
Code:
def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file(‘key.properties’)
if (keystorePropertiesFile.exists()) {
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}
TO-DOs in project-level build.gradle
Code:
buildscript {
repositories {
google()
jcenter()
maven {url 'http://developer.huawei.com/repo/'} //add this line
}
dependencies {
classpath 'com.android.tools.build:gradle:3.5.0'
classpath 'com.huawei.agconnect:agcp:1.1.1.300' //add this line
}
}
allprojects {
repositories {
google()
jcenter()
maven {url 'http://developer.huawei.com/repo/'} //add this line
}
}
TO-DOs in app-level build.gradle
Code:
defaultConfig {
...
minSdkVersion 19 //Increase this to 19
}
//Add these lines
signingConfigs {
release {
keyAlias keystoreProperties['keyAlias']
keyPassword keystoreProperties['keyPassword']
storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
storePassword keystoreProperties['storePassword']
}
}
//Edit buildTypes
buildTypes {
debug {
signingConfig signingConfigs.release
}
release {
signingConfig signingConfigs.release
}
}
//Add dependencies
dependencies {
implementation 'com.huawei.agconnect:agconnect-core:1.0.0.300'
implementation 'com.huawei.hms:hianalytics:5.0.1.300'
}
apply plugin: 'com.huawei.agconnect' //Add this line to the bottom of the page
Add Analytics Kit to your project
There are 2 ways to do this step.
1) Go to developer website and download plugin. In Android Studio create a new folder in your root directory and name it “hms”. Unzip the plugin and paste it in “hms” folder.
Then, go to pubspec.yaml and add the plugin under dependencies.
2) This way is much easier and also more familiar to Flutter developers. In pub.dev copy the plugin and add it under dependencies as usual.
For both ways, after running pub get command, the plugin is ready to use!
For more information about HMS Core integration, click.
We are all done. Let’s begin coding.
I will make a tiny and very easy game that I belive most of you know the concept: Guess the number!
As you play the game and try to guess the number, Huawei Analytics Kit will collect statistics how many times you guessed.

HMS Site kit Integration into Ionic Application | Installation and Example

Introduction
Huawei Site Kit is a development kit for Android applications that provides location search functions like auto-completing keywords, searching for places and providing the details of places. With integrating of this kit into your application, you can search for a destination with keywords including location types like restaurants, hotels, hospitals and 500+ more, and provide detailed information including rating, address and phone number of the place.
You can benefit from Huawei Site Kit’s database by sending queries to its Web API. More than 130 million locations and its detailed information are accessible with easy to use API. All of these services and more is also supported in 13 languages, and 200+ countries.
{
"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"
}
Usecase
We will use Huawei site kit to search for nearby places based on query entered on search bar. Once we have nearby places, we will show them on Map.
To learn how to show places on Map, refer this article.
Prerequisites
1. Before installing Site Kit, you should have installed npm, Node.js, ionic CLI. To install ionic in system use below command.
Code:
npm install -g @ionic/cli
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
1. Open windows CMD or terminal, and create ionic project.
Code:
ionic start Application_Name blank --type=angular
2. Download Cordova Site kit plugin. Navigate to your project root directory and install plugin using npm.
Code:
npm install <CORDOVA_SITE_KIT_PLUGIN_PATH>
3. Install @iONiC-native/core in your project for full ionic support with completion code.
Code:
npm install @ionic-native/core --save-dev
4. Copy the “node_modules\@hmscore\cordova-plugin-hms-map\ionic\dist\hms-map” folder to “node_modules/@iONiC-native” folder under your Ionic project.
5. Compile the project.
Code:
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.
Code:
ionic capacitor add android
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 address and agconnect service dependencies in root level build.gradle.
Code:
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
repositories {
google()
jcenter()
maven { url 'http://developer.huawei.com/repo/' }
}
dependencies {
classpath 'com.android.tools.build:gradle:3.6.1'
classpath 'com.google.gms:google-services:4.3.3'
classpath 'com.huawei.agconnect:agcp:1.4.0.300'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
apply from: "variables.gradle"
allprojects {
repositories {
google()
jcenter()
maven { url 'http://developer.huawei.com/repo/' } //This line is added by cordova-plugin-hms-account plugin
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}
9. Add signing certificate configuration information in app-level build.gradle.
Code:
signingConfigs {
release {
storeFile file("mykeystore.jks") // Signing certificate.
storePassword "******" // KeyStore password.
keyAlias "******" // Alias.
keyPassword "******" // Key password.
v1SigningEnabled true
v2SigningEnabled true
}
}
10. Add plugin to the app-level build.gradle.
Code:
apply plugin: 'com.huawei.agconnect'
11. Add Site kit dependency in app-level build.gradle.
Code:
dependencies {
implementation 'com.huawei.hms:site:5.0.1.300'
}
12. Sync the project
Code:
npx capacitor sync
13. Import HmsSite in app_module.ts and add it in provider.
Code:
import {HmsSite} from '@ionic-native/hms-site/ngx';
providers: [
StatusBar,
HmsSite,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
]
More details, you can check https://forums.developer.huawei.com/forumPortal/en/topic/0204430607447740048

In app Authentication using Google accounts with Unified sign-in from AppGallery Connect

With the release of AppGallery Connect version 1.5.2 the Auth service now has full support for making use of unified sign-in with a Google account!
This new functionality makes AppGallery Connect Auth a great option for all of your app’s authentication needs both on Huawei devices and other Android devices.
So how do we go about using unified sign-in with a Google account? Let’s take a look!
Preparing the environment for Google Sign-in​Details: Google Identity
Navigate to your Google API&Services console.
Open the API&Services and click My Project on the upper left corner. You can create one if no project exists.
{
"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"
}
Then, click CREATE CREDENTIALS to create an OAuth client ID for your project. If you haven’t already configured the consent screen for this project, follow the on-screen instructions to configure it.
After the configuration is complete, you can navigate back to Credentials > Create CREDENTIALS > OAuth client ID to continue. Select Android as the application type and configure the package name and the SHA-1 certificate fingerprint of the JKS file. The SHA-1 certificate fingerprint here is the SHA-1 value generated in step 3. (If this step is not performed, the timeout error code 10 will be displayed when you integrate Google sign-in.)
After the Android OAuth client has been created, go to the settings page, click Web client (auto-created by Google Service) and copy Client ID and Client secret which are needed for integrating Google sign-in.
Add a resource file. Set app_id and client_id in the /app/res/values/strings.xml of the Android project. The value of client_id is Client ID in the previous step and the value of app_id is the string of numbers that starts with the Client ID.
XML:
<string name="google_app_id">81792xxxx258</string>
<string name="google_client_id">81792xxxx2258-m8crjg1xxxxxxx3kufvbji0amlp.apps.googleusercontent.com</string>
Now that everything is ready, let’s move on to enabling Auth Service.
Enabling Auth Service​Sign in to AppGallery Connect, create a project and an app, and enable Auth Service. You need to enter the Client ID and Client secret when enabling Google account authentication.
As covered in the previous step, these two can be found by going to Google API&Services > Credentials > OAuth 2.0 Client IDs and opening Web client (Auto-created for Google Sign-in).
Generating the certificate fingerprint for your Android project​If the app does not have a JKS certificate, go to Generate Signed Bundle or APK and click Create a new key store to create one. The generated JKS certificate is the JKS file used in Step 1.
Generate an SHA-256 certificate fingerprint by running the following command and entering the configured password. The SHA1 value must be identical to that configured in step 1.
keytool -list -v -keystore you_path\AuthDemo-Union\app\authdemounion.jks
Configure the corresponding Gradle file, open the app-level build.gradle file, and configure the certificate. Click here to view more details.
Configure the generated SHA256 certificate fingerprint in AppGallery Connect. (If you do not perform this step, error 6003 is reported.)
Configuring the Android service​Open the project-level build.gradle file and configure the Maven repository address and other parameters, as follows:
Code:
buildscript {
repositories {
google()
jcenter()
maven { url 'http://developer.huawei.com/repo/' } // config this maven
}
dependencies {
classpath "com.android.tools.build:gradle:4.1.1"
classpath 'com.huawei.agconnect:agcp:1.5.1.300' // config this path
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
google()
jcenter()
maven { url 'http://developer.huawei.com/repo/' } // config this maven
}
}
Open the app-level build.gradle file and configure the SDK, app plug-in address and other parameters, as follows:
Code:
apply plugin: 'com.android.application'
apply plugin: 'com.huawei.agconnect' // config this apply
android {…}
dependencies {
implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'com.google.android.material:material:1.3.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
testImplementation 'junit:junit:4.+'
androidTestImplementation 'androidx.test.ext:junit:1.1.2'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
implementation "com.huawei.agconnect:agconnect-auth-google:1.5.2.201" // config this SDK
implementation 'com.huawei.agconnect:agconnect-auth:1.5.2.201' // config this SDK
}
Example sign in code:
Code:
private void GoogleIDLogin(){
Log.i("AuthDemo", "start:" );
AGConnectAuth.getInstance().signIn(this, AGConnectAuthCredential. Google_Provider)
.addOnSuccessListener(new OnSuccessListener<SignInResult>() {
@Override
public void onSuccess(SignInResult signInResult) {
// onSuccess
AGConnectUser user = signInResult.getUser();
Log.i("AuthDemo", "success:" + user);
}
})
.addOnFailureListener(new OnFailureListener() {
@Override
public void onFailure(Exception e) {
// onFail
Log.i("AuthDemo", "failed:" + e.getMessage());
}
});
}
// Lifecycle required by the unified channel.
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
AGConnectApi.getInstance().activityLifecycle().onActivityResult(requestCode, resultCode, data);
}
Result​Once you run the app that has been configured with the signature file in an Android phone and call the GoogleIDLogin method, the following page will appear.
After completing authorization and sign-in, you can view the following logs, which indicate the authentication and sign-in are successful.
Compared with the traditional authentication mode, unified sign-in has significantly improved development, and for this reason, we strongly recommend that you leverage this function.
References:
Auth Service for Android
Google sign-in integration in Auth Service
Does it support non-Huawei phones as well?
Basavaraj.navi said:
Does it support non-Huawei phones as well?
Click to expand...
Click to collapse
it does yes! this can be used across all android devices

In app Authentication using Facebook accounts with Unified sign-in from AppGallery Connect

With the release of AppGallery Connect version 1.5.2 the Auth service now has full support for making use of unified sign-in with a Facebook account!
This new functionality makes AppGallery Connect Auth a great option for all of your app’s authentication needs both on Huawei devices and other Android devices.
So how do we go about using unified sign-in with a Facebook account? Let’s take a look!
Configuring the Facebook Login Environment​First, you’ll need to configure the Facebook Login environment.
Select or create a Facebook app.
{
"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"
}
Edit your resource file. Copy the following code to the /app/res/values/strings.xml file of your Android project.
Edit your manifest file. Add the following uses-permission element following the application element in the /app/manifest/AndroidManifest.xml file of your Android project.
Copy the following meta-data element to the application element.
Associate your package name and default activity class with your app and click Save. Confirm the use of this package name (skip this if your app has not been released on Google Play).
Develop a key hash using the following command, and release it for your app.
If you haven’t installed OpenSSL (openssl-for-windows) for your project, please go to Google Code Archive and download it as required.
keytool -exportcert -alias authdemounion -keystore F:\1.test\4.Auth\AuthDemo-Union\app\authdemounion.jks | openssl sha1 -binary | openssl base64
The command format is as follows:
keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore YOUR_RELEASE_KEY_PATH* | openssl sha1 -binary | openssl base64
The Facebook Login environment has now been successfully configured. Let’s move on to the operations relevant to Auth Service.
Enabling Auth Service​Sign in to AppGallery Connect, create a project and an app, and enable Auth Service. You’ll need to enter the App ID and App Secret for your app when enabling Facebook under Authentication modes, which can be found under Settings > Basic on Facebook for Developers. If they are not displayed, click the button following App Secret to show them.
Generating the Certificate Fingerprint for Your Android Project​If the demo project does not provide a Java KeyStore, go to Generate Signed Bundle or APK and click Create new.key store to create one
Generate an SHA-256 certificate fingerprint. Run the following command and enter the configured password to generate a SHA-256 certificate fingerprint.
keytool -list -v -keystore you_path\AuthDemo-Union\app\authdemounion.jks
Open the app-level build.gradle file, and configure the certificate information for your project
Click here to view the sample code.
Configure the generated SHA-256 certificate fingerprint in AppGallery Connect. (If you do not perform this step, error 6003 will be reported.)
Configure Your App​Open the project-level build.gradle file and configure information, including the Maven repository address. The code is as follows:
Code:
buildscript {
repositories {
google()
jcenter()
maven { url 'http://developer.huawei.com/repo/' } // Configure this maven.
}
dependencies {
classpath "com.android.tools.build:gradle:4.1.1"
classpath 'com.huawei.agconnect:agcp:1.5.1.300' // Configure this path.
// NOTE: Do not copy your dependencies in here, which should be included
// in the build.gradle files of each module.
}
}
allprojects {
repositories {
google()
jcenter()
maven { url 'http://developer.huawei.com/repo/' } // Configure this maven.
}
}
Open the app-level build.gradle file and configure information, including the SDK information and app plug-in address. The code is as follows:
Code:
apply plugin: 'com.android.application'
apply plugin: 'com.huawei.agconnect' // Configure the apply plug-in.
android {…}
dependencies {
implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'com.google.android.material:material:1.3.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
testImplementation 'junit:junit:4.+'
androidTestImplementation 'androidx.test.ext:junit:1.1.2'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
implementation "com.huawei.agconnect:agconnect-auth-facebook:1.5.2.201" // Configure this SDK.
implementation 'com.huawei.agconnect:agconnect-auth:1.5.2.201' // Configure this SDK.
}
Add the code for implementing unified sign-in:
Java:
private void FaceBookLogin(){
Log.i("AuthDemo", "start:" );
AGConnectAuth.getInstance().signIn(this, AGConnectAuthCredential.Facebook_Provider)
.addOnSuccessListener(new OnSuccessListener<SignInResult>() {
@Override
public void onSuccess(SignInResult signInResult) {
// onSuccess
AGConnectUser user = signInResult.getUser();
Log.i("AuthDemo", "success:" + user);
}
})
.addOnFailureListener(new OnFailureListener() {
@Override
public void onFailure(Exception e) {
// onFail
Log.i("AuthDemo", "failed:" + e.getMessage());
}
});
}
// Activity lifecycle required by the unified sign-in.
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
AGConnectApi.getInstance().activityLifecycle().onActivityResult(requestCode, resultCode, data);
Viewing the Result and Logs​Once you run your signed APK on an Android phone and call the FaceBookLogin method, you’ll get the following page.
You can tap CONTINUE AS LINKING and sign in to your app with your Facebook account. The following log information will be displayed.
Compared with the traditional implementation mode, the unified sign-in has greatly simplified the development process. It is strongly recommended that you use the new mode.
For details about Auth Service, please refer to:
Auth Service document for Android
Guide for integrating Facebook account
Thanks for sharing.

Using Huawei App Messaging in Flutter

Huawei AppGallery Connect’s App Messaging service allows you to send targeted, useful in-app messages to your users.
The look and content of messages are completely customisable, and there is a wide range of triggers and filters that can be used to decide who will receive a message and when.
Let's take a look today at how we can set this up to work within a flutter project.
As always we will start with a fresh project but of course, you can just as easily use this guide to build the service into an app you already have!
Installing the Flutter Environment​
Download the Flutter SDK.
Decompress the package to any directory.
Add the Flutter command file to the environment variable.
Download the Flutter and Dart plugins in Android Studio.
{
"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"
}
Enabling the Service and Creating a Flutter project​Sign in to AppGallery Connect, click My projects, click your project, go to Grow > App Messaging, and click Use now. For more information, please refer to App Messaging.
If you do not have an Android project, create one first.
After completing these steps, you can start creating an in-app message.
Click New in the upper right corner.
Set Name and Description
Set the style and content and click Next.
Select a message type from the Layout drop-down list, and set its style and content. Currently, the Modal, Image, and Banner message types are supported.
Set target users and click Next.
In App, select the name of the app package for which you need to publish the in-app message.
You can click New condition to add a condition for matching target users, which include app version, OS version, language, country/region, audience, and more. Among the types, User attributes are defined under HUAWEI Analytics > Management > User attributes, and Prediction is defined by creating prediction tasks under My projects > Grow > Prediction.
Set the message sending time
Message display is triggered by specific events. App Messaging supports two types of trigger events: preset events and HUAWEI Analytics events.
(Optional) Set conversion events. Before setting a conversion event, you need to toggle it on first, which can be done as follows:
Go to HUAWEI Analytics > Management > Events and toggle Mark as conversion event and Event switch on for the specified event. In addition to the events the SDK collects, you can also create a preset or custom event for event tracking and analysis.
Finally, Click Save or Publish.
Integrating the Service SDK​Add dependencies​Start by creating a Flutter project in Android Studio (or opening one).
Then add the agconnect-services.json file from your AppGallery project to the android/app directory
Within the project level build.gradle file make sure to include the huawei maven repo and add the agcp package as a dependency.
Code:
buildscript {
repositories {
google()
mavenCentral()
maven { url 'https://developer.huawei.com/repo/' }
}
dependencies {
classpath 'com.android.tools.build:gradle:7.0.4'
classpath 'com.huawei.agconnect:agcp:1.6.2.300'
}
}
Next in your app level build.gradle apply the agconnect plugin as so:
Code:
apply plugin: 'com.android.application'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
apply plugin: 'com.huawei.agconnect'
Then in your pubspec.yaml file add the App Messaging SDK dependency.
Code:
dependencies:
flutter:
sdk: flutter
agconnect_appmessaging: ^1.2.0+300
Displaying an In-App Message​If you choose to display a message using the default message layout, the development process is totally coding-free.
By integrating the SDK as above you are all good to go, your creating message will be displayed as per its filters and triggers.
You can also call APIs provided by the service SDK to customize your in-app message.
Customising the Message Layout​Add the following code to onCreate in MainActivity,
Code:
AGCAppMessagingCustomEventStreamHandler.addCustomView();
so that the service SDK can listen to the corresponding event and apply the customized layout.
Code:
streamSubscriptionDisplay = agconnectAppmessaging.customEvent.listen((event) {
showDialog(context ,event.toString());
agconnectAppmessaging.handleCustomViewMessageEvent
(AppMessagingEventType.onMessageDismiss(AppMessagingDismissTypeConstants.CLICK));
});
Then the message is displayed in your app.
Code:
void _showDialog(BuildContext context, String content) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
key: Key("dialog"),
title: Text("Result"),
content: Text(content),
actions: <Widget>[
FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
)
],
);
});
}
Testing an In-App Message​App Messaging allows you to test an in-app message before it is published. You need to obtain the Anonymous Application Identifier (AAID) of your test device by adding the following code to your Android app module.
Code:
HmsInstanceId inst = HmsInstanceId.getInstance(this);
Task<AAIDResult> idResult = inst.getAAID();
idResult.addOnSuccessListener(new OnSuccessListener<AAIDResult>() {
@Override
public void onSuccess(AAIDResult aaidResult) {
String aaid = aaidResult.getId();
textView.setText(aaid);
Log.d(TAG, "getAAID success:" + aaid );
}
}).addOnFailureListener(new OnFailureListener() {
@Override
public void onFailure(Exception e) {
Log.d(TAG, "getAAID failure:" + e);
}
});
Sign in to AppGallery Connect, go to Grow > App Messaging > Messages, find the message that you created, click and select Test in the Operation column.
Click Add test user and enter the AAID
Click Save. Check whether the test message is properly displayed on your test device

Categories

Resources