1.1 Version Change History
{
"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"
}
1.2 Service Introduction1.2.1 OverviewThis document describes how to integrate Push Kit using the official Unity asset. After the integration, your app can use the services of this Kit on HMS mobile phones.
For details about Push Kit, please visit HUAWEI Developers.
1.2.2 RestrictionsFor details, please refer to the development guide.
1.2.3 Supported Unity Versions
Note: If the version is earlier than 2018.4.25, you can manually import assets.
1.3 Preparations1.3.1 Importing Unity Assets1. Open Asset Store in Unity.
Go to Window > Asset Store in Unity.
2. Search for the Huawei HMS AGC Services asset. Download and then import it.
3. Import the asset to My Assets, with all services selected.
4. Change the package name.
Go to Edit > Project Settings > Player > Android > Other Settings in Unity, and then set Package Name.
The default package name is com.${Company Name}.${Product Name}. You need to change the package name, and the app will be released to AppGallery with the new name.
1.3.2 Generating .gradle Files1. Enable project gradle.
Go to Edit > Project Settings > Player in Unity, click the Android icon, and go to Publishing Settings > Build.
Enable Custom Base Gradle Template.
Enable Custom Launcher Gradle Template.
Enable Custom Main Gradle Template.
Enable Custom Main Manifest.
2. Signature
You can use an existing keystore file or create a new one to sign your app.
Go to Edit > Project Settings > Player in Unity, click the Android icon, and go to Publishing Settings > Keystore Manager > Keystore... > Create New.
Enter the password when you open Unity. Otherwise, you cannot build the APK.
1.3.3 Configuring .gradle Files1. Configure the BaseProjectTemplate.gradle file.
Configure the Maven repository address.
Code:
<p style="line-height: 1.5em;">buildscript {
repositories {**ARTIFACTORYREPOSITORY**
google()
jcenter()
maven { url 'https://developer.huawei.com/repo/' }
}
dependencies {
// If you are changing the Android Gradle Plugin version, make sure it is compatible with the Gradle version preinstalled with Unity.
// For the Gradle version preinstalled with Unity, please visit https://docs.unity3d.com/Manual/android-gradle-overview.html.
// For the official Gradle and Android Gradle Plugin compatibility table, please visit https://developer.android.com/studio/releases/gradle-plugin#updating-gradle.
// To specify a custom Gradle version in Unity, go do Preferences > External Tools, deselect Gradle Installed with Unity (recommended) and specify a path to a custom Gradle version.
classpath 'com.android.tools.build:gradle:3.4.0'
classpath 'com.huawei.agconnect:agcp:1.2.1.301'
**BUILD_SCRIPT_DEPS**
}
repositories {**ARTIFACTORYREPOSITORY**
google()
jcenter()
maven { url 'https://developer.huawei.com/repo/' }
flatDir {
dirs "${project(':unityLibrary').projectDir}/libs"
}
}</p>
2. Configure the launcherTemplate.gradle file.
Code:
<p style="line-height: 1.5em;">// Generated by Unity. Remove this comment to prevent overwriting when exporting again.
apply plugin: 'com.android.application'
apply plugin: 'com.huawei.agconnect'
dependencies {
implementation project(':unityLibrary')
implementation 'com.huawei.hms:push:4.0.3.301'
implementation 'com.huawei.agconnect:agconnect-core:1.2.0.300'
}</p>
3. Configure the mainTemplate.gradle file.
Code:
<p style="line-height: 1.5em;">apply plugin: 'com.android.library'
apply plugin: 'com.huawei.agconnect'
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.huawei.agconnect:agconnect-core:1.2.0.300'
**DEPS**}</p>
4. Add the <service> block to the AndroidManifest.xml file.
Code:
<p style="line-height: 1.5em;"><?xml version="1.0" encoding="utf-8"?>
<!-- Generated by Unity. Remove this comment to prevent overwriting when exporting again. -->
<manifest
xmlns:android="http://schemas.android.com/apk/res/android"
package="com.unity3d.player"
xmlns:tools="http://schemas.android.com/tools">
<application>
<activity android:name="com.unity3d.player.UnityPlayerActivity"
android:theme="@style/UnityThemeSelector">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<meta-data android:name="unityplayer.UnityActivity" android:value="true" />
</activity>
<service
android:name="com.unity.hms.push.MyPushService"
android:exported="false">
<intent-filter>
<action android:name="com.huawei.push.action.MESSAGING_EVENT"/>
</intent-filter>
</service>
</application>
</manifest></p>
5. Change the package name.
Go to Edit > Project Settings > Player, click the Android icon, and go to Other Settings in Unity. Then, set Package Name.
The default package name is com.${Company Name}.${Product Name}. You need to change the package name, and the app will be released to AppGallery with the new name.
1.3.4 Adding the agconnect-services.json File1. Create an app by following instructions in Creating an AppGallery Connect Project and Adding an App to the Project.
Run keytool -list -v -keystore C:\TestApp.keyStore to generate the SHA-256 certificate fingerprint based on the keystore file of the app. Then, configure the fingerprint in AppGallery Connect.
2. Download the agconnect-services.json file and place it in the Assets/Plugins/Android directory of your Unity project.
1.3.5 Enabling Push KitFor details, please refer to the development guide.
1.4 App Development with the Official Asset1.4.1 Sample CodeRead in forum
1.4.2 Testing the APK1. Generate the APK.
Go to File > Build Settings > Android, click Switch Platform and then Build And Run.
2. Create messages to be pushed in AppGallery Connect.
Sign in to AppGallery Connect and click My projects. Go to Push Kit and click Add notification.
3. Run the APK to obtain the device token and configure it in AppGallery Connect.
4. Check logs for data messages.
For more details, you can go to:
l Our official website
l Our Development Documentation page, to find the documents you need
l Reddit to join our developer discussion
l GitHub to download demos and sample codes
l Stack Overflow to solve any integration problems
Read in forum
Related
Introduction
Back in the 90’s, it was a revolutionary to have your own website and putting an advertisement in the website was the only source of revenue. But today as space matures, it’s essential for brands to have a clear strategy to monetize their mobile presence. Some companies charge their users before downloading their apps. Others depend on in-app advertising as their sole revenue stream. But, for a lot of brands, their mobile monetization strategy relies entirely (or some part) on In App Purchase. To summarise, when a customer spends money within a mobile app, that’s an in-app purchase.
To make easier for users to make payments and developers to focus solely on app innovation, Huawei provided us with an extraordinary kit i.e. HMS Core In App Purchase (IAP) Kit. HMS In App Purchase helps developers in variety of situation to earn revenue such as paying for access to a dating app’s special features, subscribing to a streaming music app’s premium tier, buying more gold bars in games etc.
In this article, we are going to integrate HMS Core In App Purchase Kit into an Ionic application.
Ionic Framework
Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies such as HTML, CSS, and JavaScript with integrations for popular frameworks like Angular and React.
Think of Ionic as the front-end UI framework that handles all of the look and feel and UI interactions your app needs in order to be compelling. Unlike a responsive framework, Ionic comes with very native-styled mobile UI elements and layouts that you’d get with a native SDK on Android or iOS but didn’t really exist before on the web.
Since Ionic is an HTML5 framework, it needs a native wrapper like Cordova or Capacitor in order to run as a native app.
Here we will use Ionic framework with Angular and Capacitor as native wrapper.
Demo
{
"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"
}
The above Ionic framework demo application is created with the same concept of my previous work and that is a quiz game which was created using android native and java as language. The concept of this game is to show In App Purchase in a game and how user can purchase subscription and non-subscription products. The name of the game is Quiz Mania. Below is the demo of that application.
To know more click on the link below:
https://forums.developer.huawei.com/forumPortal/en/topic/0201255229704010231
Prerequisite
1) Must have a Huawei Developer Account.
2) Must have a Huawei phone with HMS 4.0.0.300 or later.
3) Must have a laptop or desktop with Android Studio, Jdk 1.8, SDK platform 26 and Gradle 4.6 installed.
4) Must install node in the system
5) Must install Ionic in the system using below command:
Code:
npm install -g @ionic/cli
Things need to be done
1) Generating a Signing Certificate Fingerprint. For generating the SHA key, refer this article.
2) Create an app in the Huawei AppGallery connect and enable In App Purchase Kit in Manage Api section.
3) Provide the SHA Key in App Information Section.
4) Provide storage location.
5) Download the agconnect-services.json and store it somewhere on our computer.
6) Create a blank Ionic Project using below command:
Code:
ionic start Your_Application_Name blank --type=angular
7) Run the following command in the root directory of your Ionic project to install HMS IAP kit it through npm.
Code:
npm install @hmscore/cordova-plugin-hms-iap
8) If you want full Ionic support with code completion etc., install @iONiC-native/core in your project.
Code:
npm install @ionic-native/core --save-dev
9) Run the following command to copy the "ionic/dist/hms-ml" folder from library to "node_modules/@iONiC-native" folder under your Ionic project.
Code:
cp node_modules/@hmscore/cordova-plugin-hms-iap/ionic/dist/hms-in-app-purchases node_modules/@ionic-native/ -r
10) Run the following command to compile the project:
Code:
ionic build
npx cap init [appName] [appId]
Where appName is the name of your app, and appId is package_name in your agconnect-services.json file (ex: com.example.app).
11) Run the following command to add android platform to your project:
Code:
ionic capacitor add android
12) Make sure your project has a build.gradle file with a maven repository address and agconnect service dependencies as shown below:
Code:
buildscript {
repositories {
google()
jcenter()
maven {url 'https://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.3.1.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 'https://developer.huawei.com/repo/'}
}
}
13) Add the Signing certificate configuration to the build.gradle file in the app directory as show below:
Code:
android {
compileSdkVersion rootProject.ext.compileSdkVersion
defaultConfig {
applicationId "YOUR_PACKAGE_NAME"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
signingConfigs {
release {
storeFile file("mykeystore.jks") // Signing certificate.
storePassword "XXXXXX" // KeyStore password.
keyAlias "XXXXXX" // Alias.
keyPassword "XXXXXX" // Key password.
v1SigningEnabled true
v2SigningEnabled true
}
}
buildTypes {
release {
signingConfig signingConfigs.release
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
debug {
signingConfig signingConfigs.release
debuggable true
}
}
}
14) Add plugin to the build.gradle file in the app directory as show below:
Code:
apply plugin: 'com.android.application'
apply plugin: 'com.huawei.agconnect'
15) Add site kit service implementation into to dependencies section of build.gradle file in the app directory as show below:
Code:
dependencies {
….
implementation 'com.huawei.hms:iap:5.0.4.301'
}
16) Add agconnect-services.json and signing certificate jks file to the app directory in your Android project as show below:
17) To update dependencies, and copy any web assets to your project, run the following code:
Code:
npx capacitor sync
More details, you can visit https://forums.developer.huawei.com/forumPortal/en/topic/0204418699662160038
1.1 Service IntroductionAccount Kit provides you with simple, secure, and quick sign-in and authorization functions. Instead of entering accounts and passwords and waiting for authentication, users can just tap the Sign in with HUAWEI ID button to quickly and securely sign in to your app with their HUAWEI IDs.
1.2 Version Change History
{
"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"
}
1.2.1 Version Dependenciesl The SDK of the latest version can be used only on devices running HMS Core (APK) 4.0.0.300 or later. If a user is using a device without HMS Core (APK) 4.0.0.300 or later, the user will be directed to install it when it is called by your app. User devices need to run EMUI 3.0 or later or Android 4.4 or later (API level 19 or later). The Unity version must be 2018.4.25 or later.
1.3 Preparations1.3.1 Importing Unity Assets1. Open Asset Store.
Go to Window > Asset Store in Unity.
2. Search for the Huawei HMS AGC Services asset. Download and then import it.
3. Import the asset to My Assets, with all services selected.
4. Search for the Unity Distribution Portal (UDP) asset in Asset Store. Download and then import it.
5. Change the package name.
Go to Edit > Project Settings > Player, click the Android icon, and go to Other Settings in Unity. Then, set Package Name.
The default package name is com.${Company Name}.${Product Name}. You need to change the package name, and the app will be released to AppGallery with the new name.
1.3.2 Generating .gradle Files1. Enable project gradle.
Go to Edit > Project Settings > Player in Unity, click the Android icon, and go to Publishing Settings > Build.
Enable Custom Base Gradle Template.
Enable Custom Launcher Gradle Template.
Enable Custom Main Gradle Template.
Enable Custom Main Manifest.
2. Signature
You can use an existing keystore file or create a new one to sign your app.
Go to Edit > Project Settings > Player in Unity, click the Android icon, and go to Publishing Settings > Keystore Manager > Keystore... > Create New.
Enter the password when you open Unity. Otherwise, you cannot build the APK.
1.3.3 Configuring .gradle Files1. Configure the baseProjectTemplate.gradle file.
Java:
allprojects {
buildscript {
repositories {**ARTIFACTORYREPOSITORY**
google()
jcenter()
maven { url 'https://developer.huawei.com/repo/' }
}
dependencies {
classpath 'com.android.tools.build:gradle:3.4.0'
classpath 'com.huawei.agconnect:agcp:1.2.1.301'
}
}
repositories {
google()
jcenter()
flatDir {
dirs "${project(':unityLibrary').projectDir}/libs"
}
maven { url 'https://developer.huawei.com/repo/' }
}
}
2. Configure the launcherTemplate.gradle file.
Java:
apply plugin: 'com.android.application'
apply plugin: 'com.huawei.agconnect'
dependencies {
implementation 'com.huawei.agconnect:agconnect-core:1.2.0.300'
implementation 'com.huawei.hms:base:4.0.1.300'
implementation 'com.huawei.hms:hwid:4.0.1.300'
...
}
3. Configure the mainTemplate.gradle file.
Java:
apply plugin: 'com.android.library'
apply plugin: 'com.huawei.agconnect'
dependencies {
...
implementation 'com.huawei.agconnect:agconnect-core:1.2.0.300'
implementation 'com.huawei.hms:base:4.0.1.300'
implementation 'com.huawei.hms:hwid:4.0.1.300'
...
}
1.3.4 Adding the agconnect-services.json File1. Create an app by following instructions in Creating an AppGallery Connect Project and Adding an App to the Project.
Run keytool -list -v -keystore C:\TestApp.keyStore to generate the SHA-256 certificate fingerprint based on the keystore file of the app. Then, configure the fingerprint in AppGallery Connect.
2. Download the agconnect-services.json file and place it in the Assets/Plugins/Android directory of your Unity project.
1.3.5 Enabling Account Kit1. Sign in to AppGallery Connect.
2. Click My projects and find your project. Go to Build > Account Kit.
1.4 App DevelopmentFor details, please refer to udpServiceSampleScript under Assets > HuaweiServiceDemo > Scripts in the demo package provided by Huawei.
1.4.1 Uploading Your Project to UDPFor details about UDP, please refer to its official documents.
1.
Go to Window > Unity Distribution Portal > Settings in Unity and click Go to the Services Window.
2. Select an organization.
3. Link your project to a UDP client.
Go to Window > Unity Distribution Portal > Settings > Inspector in Unity and click Generate new UDP client.
4. Set Game Title and UDP Sandbox Test Accounts.
5. Push all the settings.
1.4.2 Testing the APK1. Go to File > Build Settings > Android in Unity and click Switch Platform.
1.1 Select UDP/Sample/UDPSampleScene.
1.2 Build the project. Save and install the APK.
2. Use the configured sandbox test account to initialize the APK.
2.1 Open the APK and tap Init.
2.2 Enter the configured sandbox account.
2.3 Verify that the sandbox test is successful.
1.4.3 Repacking the APK1. Sign in to the UDP console.
2. Click the newly created game.
3. Edit the game information and then click Release.
4. Choose HUAWEI AppGallery.
5. Set your In-App Purchases public key manually. Unity will automatically obtain other information from AppGallery Connect based on the package name.
6. Choose HUAWEI AppGallery and click Publish.
7. The UDP console repacks your APK.
8. Download the repacked APK, which supports sign-in with a HUAWEI ID.
More Information
To join in on developer discussion forums, go to Reddit
To download the demo app and sample code, go to GitHub
For solutions to integration-related issues, go to Stack Overflow
Read In Forum
Introduction
In this article, we will learn how to implement Huawei App Linking service. This service is very important service for enterprises that are digitalizing to effectively manage deep links.
{
"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"
}
What can we do using App Linking?
Huawei App Linking is a very useful service to make existing deep links smarter and useful. Developers can improve user experience in their apps. If user opens the link android or iOS it can be directly forwarded to the linked content in your application.
We can use these links to direct users to promotional information or native content that they can share with others. We can create links of app linking and send them to users or users share links of app linking dynamically generated in application. User can click the link to access the content.
Do you know how it will work?
Developer can create links in different ways using App Gallery console, from app or manual by adding required parameters to a specific domain for app.
Users clicks a link if the app is not installed, the user is redirect to App Gallery to install your app otherwise your app opens directly. You can retrieve the link that was to your app and handle the deep link as per requirement of your app.
Table of content
1. Project setup
2. Create Link using App Gallery console
3. Create Link from APP
Mobile app Linking Benefits
1. Enhance the user experience: users can easily access the linked content, with essentially no navigation. If you are linking to something in your app from social media, a mobile website, etc., users are able to navigate seamlessly to that content.
2. Improve User Retention, Engagement, and Usage: Users who were deep linked showed double the activation rate, double the retention rate, and visited the app twice as frequently versus users who had not been deep linked.
3. Help Re-Engage users: When a user has your app installed, but has been inactive for a period of time, you can use deep linking to direct them to specific content to encourage use, rather than the generic home screen.
Requirements
1. Any operating system (i.e. MacOS, Linux and Windows).
2. Any IDE with Flutter SDK installed (i.e. IntelliJ, Android Studio and VsCode etc.).
3. A little knowledge of Dart and Flutter.
4. Minimum API Level 19 is required.
5. Required EMUI 5.0 and later version devices.
Setting up the APP Linking
1. First create a developer account in AppGallery Connect. After create your developer account, you can create a new project and new app. For more information, click here.
2. Generating a Signing certificate fingerprint follow below command.
Code:
keytool -genkey -keystore <application_project_dir>\android\app\<signing_certificate_fingerprint_filename>.jks -storepass <store_password> -alias <alias> -keypass <key_password> -keysize 2048 -keyalg RSA -validity 36500
3. The above command creates the keystore file in appdir/android/app.
4. Now we need to obtain the SHA256 key, follow the command.
Code:
keytool -list -v -keystore <application_project_dir>\android\app\<signing_certificate_fingerprint_filename>.jks
5. Enable the App Linking service on the App Gallery.
6. After configuring project, we need to download agconnect-services.json file in your project and add into your project.
7. After that follow the URL for cross-platform plugins add required plugin into sample.
8. The following dependencies for HMS usage need to be added to the build.gradle file under the android directory.
Code:
buildscript {
ext.kotlin_version = '1.3.50'
repositories {
google()
jcenter()
maven {url 'http://developer.huawei.com/repo/'}
}
dependencies {
classpath 'com.android.tools.build:gradle:3.5.0'
classpath 'com.huawei.agconnect:agcp:1.4.1.300'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
allprojects {
repositories {
google()
jcenter()
maven {url 'http://developer.huawei.com/repo/'}
}
}
9. Add the below plugin into build.gradle file under the android/app directory.
Code:
apply plugin: 'com.huawei.agconnect'
10. Add the required permissions to the AndroidManifest.xml file under app/src/main folder.
Code:
<uses-permission android:name="com.huawei.permission.SECURITY_DIAGNOSE" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.INTERNET" />
<intent-filter>
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE"/>
<data
android:host="developer.huawei.com"
android:scheme="http"/>
<data
android:host="developer.huawei.com"
android:scheme="https"/>
</intent-filter>
11. After completing all the above steps, you need to add the required kits’. Flutter plugins as dependencie to pubspec.yaml file. You can find all the plugins in pub.dev with the latest versions.
Code:
agconnect_applinking: ^1.2.0+201
12. To launch the url we need to add flutter url_launcher plugin.
Code:
url_launcher: ^5.7.10
After adding them, run flutter pub get command. Now all the plugins are ready to use.
Note: Set multiDexEnabled to true in the android/app directory, so the app will not crash.
Config App Linking
1. We can access the App Linking on the console side by following the My Projects > Project settings > Grow > App Linking steps.
2. Before creating our custom link we need to add URL prefix. URL Prefix are free domains provided by AppGallery Connect. If you do not have a custom domain address. We can create up to 5 URL prefixes.
Enter domain name and then click on Next button.
3. After creating the URL Prefix we can create our links after following the App Linking Tab > Create App Linking steps.
4. We need to set a short link value to the URL prefix we created. Short link value is generated automatically by Console. However, if we wish, we can arrange this area according to our wishes.
5. After setting up all the necessary information, now we will define the behavior of our deep link, by which we can determine how our deep links will behave.
6. We need to enter preview information such as title, image, description this information optional. Click Next and then click Release.
Creating Link
Now let’s create the same link within the application.create object for AGCAppLinking.
To Generate LongLinks
Code:
final AGCAppLinking agcAppLinking = new AGCAppLinking();
createLongAppLinking(BuildContext context) async {
AndroidLinkInfo androidLinkInfo = new AndroidLinkInfo(
androidOpenType:
AppLinkingAndroidLinkInfoAndroidOpenTypeConstants.APP_GALLERY,
androidPackageName: "com.huawei.sample.wellfit",
androidDeepLink:
'https://appgallery.huawei.com/#/app/C101529369');
ApplinkingInfo appLinkingInfo = ApplinkingInfo(
androidLinkInfo: androidLinkInfo,
shortAppLinkingLength: ShortAppLinkingLengthConstants.SHORT,
domainUriPrefix: 'https://wellfit.dra.agconnect.link',
deepLink: 'https://appgallery.huawei.com/#/app/C101529369',
previewType: AppLinkingLinkingPreviewTypeConstants.APP_INFO);
try {
setState(() async {
longAppLinking =
await agcAppLinking.buildLongAppLinking(appLinkingInfo);
print(longAppLinking.longLink.toString());
});
} on PlatformException catch (e) {
_showDialog(context, e.toString());
}
}
To Generate ShortLink
Code:
try {
ShortAppLinking shortAppLinking =
await agcAppLinking.buildShortAppLinking(appLinkingInfo);
print(shortAppLinking.toString());
} on PlatformException catch (e) {
_showDialog(context, e.toString());
}
Demo
Tips and Tricks
1. Download latest HMS Flutter plugin.
2. Set minSDK version to 19 or later.
3. Do not forget to click pug get after adding dependencies.
4. HMS Core APK 4.0.2.300 is required.
5. Currently this service supports 5 URLs.
Conclusion
That’s it!
We have finished a complete demo of a flutter app that app handles Huawei App Linking services. This service can bring significant improvements to the user experience of our mobile apps.
Thanks for reading! If you enjoyed this story, please click the Like button and Follow. Feel free to leave a Comment below.
Reference
App Linking service URL
Original Source
{
"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"
}
Introduction
In this article, I will explain how to subscribe the topic using integrating the Huawei Push Kit into React Native project. React Native is a tool announced and open-sourced by Facebook in April 2015. It is a cross-platform mobile app development framework that is derived from Facebook's earlier open-source JavaScript framework React. It helps to adapt to native mobile app platforms.
Push Kit
Push notifications offers a great way to increase your application’s user engagement and boost your retention rates by sending meaningful messages or by informing users about your application. Push Kit supports two types of messages: notification messages and data messages. You can send notifications and data messages to your users from your server using the Push Kit APIs or directly from the AppGallery Push Kit Console.
Requirements
1. Any operating system (MacOS, Linux and Windows).
2. Must have a Huawei phone with HMS 4.0.2.300 or later.
3. Must have a laptop or desktop with Android Studio, Jdk 1.8, SDK platform 26 and Gradle 4.6 installed.
4. Minimum API Level 21 is required.
5. Required EMUI 9.0.0 and later version devices.
Integrate HMS Dependencies and React Native Project Preparation
1. First register as Huawei developer and complete identity verification in Huawei developers website, refer to register a Huawei ID.
2. Create a project in android studio, refer Creating an Android Studio Project.
3. Generate a SHA-256 certificate fingerprint.
4. To generate SHA-256 certificate fingerprint. Choose View > Tool Windows > Gradle > Signingreport > SHA256 code.
Or use cmd as explained in SHA256 CODE
5. Create an App in AppGallery Connect.
6. Download the agconnect-services.json file from App information, copy and paste in android Project under app directory.
7. Enter SHA-256 certificate fingerprint and click Save, as follows.
8. Click Manage APIs tab and enable Push Kit.
9. Environment set up, refer below link
https://reactnative.dev/docs/environment-setup
10. Create project using below command
Code:
react-native init projectname
11. You can install react native command line interface on npm, using the install -g react-native-cli command as shown below.
Code:
npm install –g react-native-cli
12. Integrate the Hmspush plugin
npm i @hmscore/react-native-hms-push
13. Add the AGC Plugin dependency.
Code:
apply plugin: 'com.huawei.agconnect'
14. Add to dependencies.
Code:
Implementation project (': react-native-hms-push)
15. Project level build.gradle/buildScript directory set minSdkVersion to 19 or higher higher. In android/signingConfigs/config node, enter the keystore file credentials.
Code:
signingConfigs {
config {
storeFile file(<keystore_file_name>)
storePassword ‘<store_password>’
keyAlias ‘<alias>’
keyPassword ‘<key_password>’
}
}
16. Navigate to App level android/build.gradle directory in your React Native project. Follow the steps:
-Add to buildscript/repositories
Code:
maven {url 'http://developer.huawei.com/repo/'}
-Add to buildscript/dependencies
Code:
classpath 'com.huawei.agconnect:agcp:1.3.1.300’'3)
17. Navigate to android/settings.gradle and add the following.
Code:
include ':react-native-hms-push'
project(':react-native-hms-push').projectDir = new File(rootProject.projectDir, '../node_modules/@hmscore/react-native-hms-push/android')
18. Add below permissions in Android.manifest file.
XML:
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
Development
Obtain a Token:
In order to push notifications to a device, you need to obtain a token. To get the token, use getToken method from HmsPushInstanceId module.
JavaScript:
HmsPushInstanceId.getToken("")
.then((result) => {
this.log("getToken", result);
})
.catch((err) => {
alert("[getToken] Error/Exception: " + JSON.stringify(err));
});
Add Push Notifications
To push a notification message to your device, navigate to your Huawei developer console and choose Project>Growing>Push Kit>Add notification.
Subscribing the Topics
Subscribing to a topic enables the users to receive data messages by the subscribed topic. To subscribe a topic, use subscribe method from HmsPushMessaging module.
JavaScript:
subscribe() {
HmsPushMessaging.subscribe(this.state.topic)
.then((result) => {
this.log("subscribe", result);
})
.catch((err) => {
alert("[subscribe] Error/Exception: " + JSON.stringify(err));
});
}
To push a notification or data message by topic, navigate to the Huawei push console to push a new notification, choose push scope as Subscriber and then select the topic of the message to be sent.
Unsubscribe the topics
Unsubscribing from a topic lets the user not to listen data messages by the unsubscribed topic. To unsubscribe from a topic, use unsubscribe method of the HmsPushMessaging module.
JavaScript:
unsubscribe() {
HmsPushMessaging.unsubscribe(this.state.topic)
.then((result) => {
this.log("unsubscribe", result);
})
.catch((err) => {
alert("[unsubscribe] Error/Exception: " + JSON.stringify(err));
});
}
Run the application (Generating the Signed Apk):
1. Open project directory path in command prompt. Navigate to android directory and run the below command for signing the apk.
Code:
gradlew assembleRelease
Result
Tips and Tricks
1. Set minSDK version to 24 or later, otherwise you will get AndriodManifest merge issue.
2. Make sure you have added the agconnect-services.json file to app folder.
3. Make sure you have added SHA-256 fingerprint without fail.
4. Make sure all the dependencies are added properly.
5. For project cleaning navigate to android directory and run the below command.
Code:
gradlew clean
Conclusion
In this article, we can learn about how to integrate Push Kit and how to subscribe the topic in React native project. It will guide you to increase your application’s user engagement and boost your retention rates by sending meaningful messages or by informing users about your application.
Reference
Push Kit: Documentation
Push Kit: Training Video
{
"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"
}
Introduction
In this article, we will learn how to implement App Linking service provided by Huawei. App Linking allows you to create cross-platform links that can work as defined regardless of whether your app has been installed by a user. When a user taps the link on an Android, an iOS, or a HarmonyOS device, the user will be redirected to the specified in-app content. If a user opens the link in a browser on a PC, the user will be redirected to the same content of the web version. When creating a link, you can set tracking parameters for different channels to identify traffic sources, analyze their performance, and determine the platform or campaign that best suits your app.
Requirements
1. JDK version: 1.7 or later
2. Android Studio version: 3.X or later
3. minSdkVersion: 21 or later
4. targetSdkVersion: 31 (recommended)
5. compileSdkVersion: 29 (recommended)
6. Gradle: 4.1 or later (recommended)
7. Must have a Huawei Developer Account.
8. Must have a Huawei phone with HMS 4.0.0.300 or later and running EMUI 4.0 or later.
9. React Native environment with Android Studio, Node Js and Visual Studio code.
Preparation
1. Create an app or project in the Huawei App Gallery Connect.
2. Provide the SHA Key and App Package name of the project in App Information Section.
3. Download the agconnect-services.json file.
Integration process
1. Environment set up, refer below link.
Setting up the development environment · React Native
This page will help you install and build your first React Native app.
reactnative.dev
2. Create project using below command.
Code:
react-native init project name
3. Download the Plugin using NPM.
Open project directory path in command prompt and run this command.
Code:
npm [email protected]/applinking
4. Configure android level build.gradle.
a. Add to buildscript/repositores.
Code:
maven {url 'http://developer.huawei.com/repo/'}
b. Add to allprojects/repositories.
Code:
maven {url 'http://developer.huawei.com/repo/'}
Development Process
Add the following configuration to the activity for processing links. Set android:host to the domain name in deepLink and android:scheme to the custom scheme. When a user taps a link containing this deep link, your app uses this activity to process the link.
<!-- AndroidManifest.xml. -->
Code:
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<!-- Add the custom domain name and scheme -->
<data android:host="<DeepLink_Host>" android:scheme="https" />
</intent-filter>
Note: Make sure you do not specify Android launch mode in your React Native project. In case you have set android:launchMode="singleTask" in your project. App Linking will not work properly so you need to remove that line from your AndroidManifest.xml file.
Open the build.gradle file in the android directory of your React Native project, and change the value of minSdkVersion in buildscript to 19.
Code:
defaultConfig {
applicationId "<package_name>"
minSdkVersion 19
/*
<Other configurations>
*/
}
Creating a Link of App Linking in a React Native App using AppGallery Connect
Log In to AppGallery Connect and Choose your App from My Projects tab.
Go to>Growing > App Linking>Enable now.
Choose URL prefix>Add URL prefix.
Select Set domain name option and then click on Next button. A page will come up will verification completion alert.
Click App Linking and then click Create App Linking for deep linking purpose. Set a short link and click Next.
Set Deep Link and click Next.
App Linking works on multiple platforms regardless of whether your app has been installed. On an Android, HarmonyOS, or iOS device that has your app installed, users will see your in-app content when they tap the link.
App Linking name: deep link name.
Default deep link: deep link used to open an app.
Android deep link: deep link preferentially opened on an Android device.
iOS deep Link URL: deep link preferentially opened on an iOS device.
Click Next and Select Set Android link behaviour for your Android application as below.
Select your application from the Add Android app menu. Redirect user to AppGallery page if the application is not installed on the device. Then click on Next button.
Receiving Links of App Linking
Short App Linking
AgcAppLinking.buildShortAppLinking () is used to get the short link url. Add this code in App.js.
Code:
AgcAppLinking.buildShortAppLinking(object).then(result => { Alert.alert("Short App Linking",result.shortLink); this.createCustomView("buildShortAppLinking : ", result.shortLink)
});
Long App Linking
AgcAppLinking.buildLongAppLinking () is used to get the long link url. Add this code in App.js.
Code:
AgcAppLinking.buildLongAppLinking(object).then(result => {
Alert.alert("Long App Linking", JSON.stringify(result));
this.createCustomView("buildLongAppLinking : ", result)
});
Output
Tips and Tricks
1. Set minSdkVersion to 19 or higher.
2. URL prefix should be unique and can contain only lowercase letters and digits.
3. Link name and Default deep link can be same and follow as https://domainname.com/xxx
Where “domainname” is URLprefix which we set above and “xxx” is specific in-app content page to re-direct.
4. You can customize the deep link, which is different from the URL prefix of the link.
5. Ensure that the App Store ID and team ID have been configured. If they are not configured, add them as prompted.
Conclusion
In this article, we have learnt integration of Huawei AppLinking service into React Native app development. Links can be created using Huawei App Linking capabilities and use them further for in –app content re-directions for large scale android applications.
Reference
App Linking: Documentation
App Linking: Training Video