Overview

You can use App Messaging of AppGallery Connect to send relevant messages to target users actively using your app to encourage them to use key app functions. For example, you can send in-app messages to encourage users to subscribe to certain products, provide hints to a game level, or recommend promotions of a restaurant. App Messaging even allows you to customize how your messages look and the way they will be sent, and define events for triggering message sending to your users when you want to engage your users in your app's activities.

What You Will Create

In this codelab, you will build an app that integrates App Messaging. Messages that you create in AppGallery Connect will be displayed in your app.

What You Will Learn

Hardware Requirements

Software Requirements

Required Knowledge

To integrate this service, you must complete the following preparations:

  1. Create an app in AppGallery Connect.
  2. Create a project in DevEco Studio.
  3. Add the app package name.
  4. Add the AppGallery Connect plugin and Maven repository address.
  5. Add configurations to the entry module in the HAP file.
  6. Synchronize the project.
For details, please refer to Integration Preparations.

Enabling App Messaging

  1. Sign in to AppGallery Connect and click My projects. Click your project card, and select an app for which you want to enable App Messaging.
  2. Go to Grow > App Messaging. If this is your first time using App Messaging, click Use now.

Integrating the SDK

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

  1. In AppGallery Connect, click My projects. Click your project card, and select an app for which you want to enable App Messaging.
  2. Go to Project settings > General information, and click agconnect-services.json to download it.
  3. Copy the agconnect-services.json file to the directory of the entry module.
  4. Open the build.gradle file under entry and add the following code to integrate the App Messaging SDK: 
    dependencies { 
    ... 
    implementation "com.huawei.agconnect:agconnect-appmessaging-harmony:1.2.2.300" 
    ... 
}
  5. Click Sync Now to synchronize the configuration.
  1. In AppGallery Connect, click My projects.
  2. Click your project card, and select the app for which you need to enable App Messaging from the app drop-down list on the top.
  3. Go to Grow > App Messaging.
  4. Click New.
  5. On the New message page, enter the content of the message to be created. In this codelab, a modal dialog will be created as an example.
  6. Set images and buttons. For images, their links are required.
  7. Select the app in which you will send this message to users.
  8. Set the message sending time, trigger event, and frequency limit for each device. Here, set the start time to the current time and the trigger event to that the app enters the foreground. Configure the message as being displayed for up to 10 times every day. Click Publish.
  9. Ignore conversion event settings. Click Save.

In this codelab, you can create a layout page in your DevEco Studio project and design the UI according to the following figure, with the BUTTON DEBUG button to forcibly obtain message data from the AppGallery Connect server instead of from the local cache.

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="center" 
    ohos:orientation="vertical"> 
 
    <Button 
        ohos:id="$+id:button_debug" 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:text="$string:btn_debug" 
        ohos:text_size="20vp" 
        ohos:top_margin="40px" 
        ohos:background_element="$graphic:background_ability_main" 
        /> 
 
</DirectionalLayout>

Import header files to the MainAbilitySlice.java file of the project and add code for initialization.

import com.huawei.agconnect.appmessaging.ResourceTable; 
import com.huawei.agconnect.appmessaging.AGConnectAppMessaging; 
import ohos.aafwk.ability.AbilitySlice; 
import ohos.aafwk.content.Intent; 
import ohos.agp.components.Button; 
 
public class MainAbilitySlice extends AbilitySlice { 
 
    @Override 
    public void onStart(Intent intent) { 
        super.onStart(intent); 
        super.setUIContent(ResourceTable.Layout_ability_main); 
 
        Button createShort = (Button) findComponentById(ResourceTable.Id_button_debug); 
        createShort.setClickedListener(component -> 
            debugMessage()); 
    } 
 
    private void debugMessage() { 
        AGConnectAppMessaging.getInstance().setForceFetch() 
    } 
}

Run your project in DevEco Studio, and switch the app to the background and then to the foreground. An in-app message is displayed, which is the same as that set in AppGallery Connect.

Congratulations! You have successfully built an app that integrates App Messaging and learned how to integrate the App Messaging SDK to your project and create in-app messages in AppGallery Connect.

 Code copied