App Linking HarmonyOS

1. Introduction

Overview

App Linking allows links to work across platforms even on devices where your app is not installed. You can use these links to direct users to promotional information or native app content that they can share with others. You can create links of App Linking and send them to users, or allow users to share links dynamically generated in your app. Anyone who receives a link can tap it to access the linked content.
When a user taps a link of App Linking:

On a HarmonyOS device, if the user has installed your app, they will be redirected to your native app content directly. If the user has not installed your app, they will be prompted to install your app first, and then view the in-app content specified by the link.
In a desktop browser, the user will see the web version of the content in your app.

What You Will Create

In this codelab, you will build a HarmonyOS app that integrates App Linking. Your app will:

Implement the App Linking function in your app.
Use an App Linking API to create a long link or short link.
Share a created link in a browser.

What You Will Learn

Integrate the App Linking SDK.
Create a link of App Linking in AppGallery Connect.
Create a link of App Linking through coding in your app.

2. What You Will Need

Hardware Requirements

A computer (desktop or laptop): Windows 10 64-bit or macOS 10.14⁄10.15⁄11.2.2
Test device: a mobile phone running HarmonyOS 2.0 or a later version

Software Requirements

JDK (Version 1.7 or later is recommended.)
DevEco Studio 2.1 or later

Required Knowledge

HarmonyOS app development process
Basic Java syntax

3. Integration Preparations

To integrate App Linking of AppGallery Connect, you must complete the following preparations:

Create an app in AppGallery Connect.
Create a DevEco Studio project.
Add the app package name.
Add the AppGallery Connect plugin and Maven repository address.
Add configurations to the entry module in the HAP file.
Synchronize the project.

For details, please refer to Integration Preparations.

4. Configuring the Development Environment

Enabling App Linking

Click My projects in AppGallery Connect, click your project card, and select your app for which you want to enable App Linking from the drop-down list on the top. Go to Grow > App Linking. If it is the first time that you use App Linking, click Use now in the upper right corner.
If the data processing location is not set, set it for your app.

Integrating the App Linking SDK

If you are using DevEco Studio, you can integrate SDKs by using the Maven repository into your DevEco Studio project before development.

Click My projects in AppGallery Connect, click your project card, and select your app for which you want to use App Linking from the drop-down list on the top.
Go to Project settings > General information, and click agconnect-services.json to download it.
Copy the agconnect-services.json file to the directory of the entry module.

Open the build.gradle file under entry and add the following code to integrate the App Linking SDK:


dependencies { 
    ... 
    implementation 'com.huawei.agconnect:agconnect-applinking-harmony:1.1.0.300' 
    ... 
}

Click Sync Now to synchronize the configuration.

5. Designing the UI

You can create a page in your DevEco Studio project and design the UI according to the following figure, with buttons to create and share links of App Linking.

The sample code for the layout file is as follows:


<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
        xmlns:ohos="http://schemas.huawei.com/res/ohos" 
        ohos:height="match_parent" 
        ohos:width="match_parent" 
        ohos:alignment="top" 
        ohos:orientation="vertical"> 
 
    <Text 
            ohos:id="$+id:AppLinking" 
            ohos:height="match_content" 
            ohos:width="match_content" 
            ohos:layout_alignment="horizontal_center" 
            ohos:top_margin="100" 
            ohos:text_size="80" 
            ohos:left_margin="60" 
            ohos:right_margin="60" 
            ohos:multiple_lines="true" 
            ohos:text="AppLinking" 
    /> 
 
    <Button 
            ohos:id="$+id:createButton" 
            ohos:height="match_content" 
            ohos:width="match_content" 
            ohos:layout_alignment="horizontal_center" 
            ohos:top_margin="30vp" 
            ohos:text_size="80" 
            ohos:background_element="$graphic:background_ability_main" 
            ohos:text="Create link" 
    /> 
 
    <Text 
            ohos:height="match_content" 
            ohos:width="match_content" 
            ohos:left_margin="60" 
            ohos:right_margin="60" 
            ohos:multiple_lines="true" 
            ohos:text_size="60" 
            ohos:text="Short link" 
    /> 
 
    <Text 
            ohos:id="$+id:shortlink" 
            ohos:height="match_content" 
            ohos:width="match_content" 
            ohos:left_margin="60" 
            ohos:right_margin="60" 
            ohos:multiple_lines="true" 
            ohos:text_size="40" 
    /> 
 
    <Text 
            ohos:height="match_content" 
            ohos:width="match_content" 
            ohos:top_margin="20" 
            ohos:left_margin="60" 
            ohos:right_margin="60" 
            ohos:multiple_lines="true" 
            ohos:text_size="60" 
            ohos:text="Long link" 
    /> 
 
    <Text 
            ohos:id="$+id:longlink" 
            ohos:height="match_content" 
            ohos:width="match_content" 
            ohos:top_margin="20" 
            ohos:left_margin="60" 
            ohos:right_margin="60" 
            ohos:multiple_lines="true" 
            ohos:text_size="40" 
    /> 
 
    <Button 
            ohos:id="$+id:shareLongButton" 
            ohos:height="match_content" 
            ohos:width="match_content" 
            ohos:top_margin="30vp" 
            ohos:layout_alignment="horizontal_center" 
            ohos:text_size="80" 
            ohos:background_element="$graphic:background_ability_main" 
            ohos:text="Share long link" 
    /> 
 
    <Button 
            ohos:id="$+id:shareShortButton" 
            ohos:height="match_content" 
            ohos:width="match_content" 
            ohos:top_margin="30vp" 
            ohos:layout_alignment="horizontal_center" 
            ohos:text_size="80" 
            ohos:background_element="$graphic:background_ability_main" 
            ohos:text="Share short link" 
    /> 
</DirectionalLayout>

6. Configuring a URL Prefix

Sign in to AppGallery Connect and click My projects.
Click your project card and select an app from the app drop-down list on the top.
Go to Grow > App Linking. Click the URL prefixes tab and click New URL prefix. In the Set domain name area, enter a URL prefix used in this codelab.
Click Next. The system automatically checks whether the URL prefix is available.

7. Configuring a URL Prefix and Deep Link in Your App

When creating links of App Linking in your app, you need to specify the URL prefix and deep link. In this codelab, the URL prefix and deep link have been configured.

8. Developing App Linking

Import related classes to MainAbilitySlice.


import com.huawei.agconnect.applinking.AppLinking; 
import com.huawei.agconnect.applinking.ResourceTable; 
import ohos.aafwk.ability.AbilitySlice; 
import ohos.aafwk.content.Intent; 
import ohos.aafwk.content.Operation; 
import ohos.agp.components.Button; 
import ohos.agp.components.Component; 
import ohos.agp.components.Text; 
import ohos.hiviewdfx.HiLog; 
import ohos.hiviewdfx.HiLogLabel; 
import ohos.utils.net.Uri;

Define UI elements in the onStart method.


Button createButton = (Button) findComponentById(ResourceTable.Id_createButton); 
Button shareLongButton = (Button) findComponentById(ResourceTable.Id_shareLongButton); 
Button shareShortButton = (Button) findComponentById(ResourceTable.Id_shareShortButton); 
 
createButton.setClickedListener(new Component.ClickedListener() { 
           @Override 
           public void onClick(Component component) { 
               createLinking(); 
           } 
}); 
 
shareLongButton.setClickedListener(new Component.ClickedListener() { 
    @Override 
    public void onClick(Component component) { 
        shareLink(longLink.getText()); 
    } 
}); 
 
shareShortButton.setClickedListener(new Component.ClickedListener() { 
    @Override 
    public void onClick(Component component) { 
        shareLink(shortLink.getText()); 
    } 
});

Initialize an App Linking instance.
```
AGConnectAppLinking.getInstance();
```

Create a link of App Linking.


public void createLinking(){ 
    AppLinking.Builder builder = 
            AppLinking.newBuilder() 
                    .setIsShowPreview(true) 
                    .setUriPrefix(DOMAIN_URI_PREFIX) 
                    .setDeepLink(Uri.parse(DEEP_LINK)) 
                    .setHarmonyLinkInfo( 
                            AppLinking.HarmonyLinkInfo.newBuilder() 
                                    .setHarmonyDeepLink("agckit://helloWorld") 
                                    .build()) 
                    .setCampaignInfo( 
                            AppLinking.CampaignInfo.newBuilder() 
                                    .setName("HDC") 
                                    .setSource("Huawei") 
                                    .setMedium("App") 
                                    .build()) 
                    // Display the preview page. 
                    .setPreviewType(AppLinking.LinkingPreviewType.SocialInfo) 
                    .setSocialCardInfo( 
                            AppLinking.SocialCardInfo.newBuilder() 
                                    .setDescription("HDC") 
                                    .setTitle("Huawei") 
                                    .setImageUrl("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3862731350,3483076630&fm=26&gp=0.jpg") 
                                    .build()); 
    LongUri = builder.buildAppLinking().getUri().toString(); 
    longLink.setText(LongUri); 
    HiLog.info(hiLogLabel,"this is LongUri: " + LongUri); 
 
    builder.buildShortAppLinking().addOnSuccessListener(shortAppLinking -> 
    { 
        ShortUri = shortAppLinking.getShortUrl().toString(); 
        shortLink.setText(ShortUri); 
        HiLog.info(hiLogLabel,"this is ShortLink: " + ShortUri); 
    }).addOnFailureListener(e -> { 
 
    }); 
}

Share the created link of App Linking.


public void shareLink(String appLinking){ 
    if (appLinking != null) { 
        Intent intent = new Intent(); 
        Operation operation = new Intent.OperationBuilder().withUri(Uri.parse(appLinking)).build(); 
        intent.setOperation(operation); 
        startAbility(intent); 
    } 
}

9. Receiving a Link of App Linking

Before your app receives links, add the skills field to the config.json file of your HarmonyOS project to specify the links of App Linking to be processed. Currently, to use deep links to receive data, you need to add the following configuration to the ability for processing links:


"skills": [ 
  { 
	"entities": [ 
	  "entity.system.home", 
	  "android.intent.action.VIEW" 
	], 
	"actions": [ 
	  "action.system.home", 
	  "entity.system.default", 
	  "entity.system.browsable" 
	], 
	"uris": [ 
	  { 
		"scheme": "agckit", 
		"host": "www.example.com" 
	  } 
	] 
  } 
]

Call AGConnectAppLinking.getInstance() in the ability that needs to receive links to initialize the AGConnectAppLinking instance.


AGConnectAppLinking.getInstance() 
            .getAppLinking(getAbility()) 
            .addOnSuccessListener( 
                    resolvedLinkData -> { 
                        if(resolvedLinkData != null){ 
                            StringBuilder stringBuffer = new StringBuilder(); 
                            if(resolvedLinkData.getDeepLink() != null){ 
                                stringBuffer.append(resolvedLinkData.getDeepLink().toString()); 
                                // Redirect to the actual page after parsing the deep link. 
                                Intent intents = new Intent(); 
                                intents.setUri(Uri.parse(resolvedLinkData.getDeepLink().toString())); 
                                startAbility(intents); 
                            } 
                        } 
                    }) 
            .addOnFailureListener( 
                    e -> { 
                        AGCLogger.e("ApplinkingAbilitySlice", "getAppLinking:onFailure", e); 
                    });

10. Packaging and Testing

Start DevEco Studio and click the run button to run your app on a mobile phone or simulator. Tap Create link. You can see short and long links generated by the SDK.
Tap Share long link to open the link in a browser. On the displayed page, tap Open/Download. If you are redirected to an app store for app download, the link generated by the SDK is able to launch the app. The test method for a short link is the same.

11. Congratulations

Well done. You have successfully built an app that integrates App Linking of AppGallery Connect and learned how to:

Use App Linking to create a sharing link in your app.
Use an App Linking API to create a long link or short link.

12. Reference

Back