Learn to deploy Links in an Application using Huawei App Linking

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

• Environment set up, refer below link.

  https://reactnative.dev/docs/environment-setup

• Create project using below command.

react-native init project name

• Download the Plugin using NPM.

  Open project directory path in command prompt and run this command.

npm i@react-native-agconnect/applinking

• Configure android level build.gradle.

  a. Add to buildscript/repositores.

maven {url 'http://developer.huawei.com/repo/'}
b. Add to allprojects/repositories.

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. -->
<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.

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 behavior 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.

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.

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