Send messages in App! Integrate Huawei In App Messaging services using React Native

Introduction

In this article, we will learn how to implement In App Messaging service provided by Huawei. App Messaging of AppGallery Connect to send relevant messages to target users actively using your app to encourage them to use key app functions, or send attractive promotion activities to enhance user loyalty.

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 and enable the App Messaging API.
3. Download the agconnect-services.json file.
4. Create an Android project.

Integration process

• Create a react native project using below command:
  react-native init Project Name

• Add below to build.gradle (project) file under buildscript/repositories and allprojects/repositories.
  Maven {url 'http://developer.huawei.com/repo/'}

• Add below to build.gradle(app) file, under dependencies to use the App Messaging Sdk.
  dependencies{
// Import the App Messaging SDK.
implementation 'com.huawei.agconnect:agconnect-appmessaging:1.5.1.300'
Note>> to use the Analytics, please add Analytics SDK
implementation 'com.huawei.hms:hianalytics:5.2.0.300'
}

• Add below permissions to manifest file.
  

<uses-permission android:name="android.permission.INTERNET"/>
 <uses-permission android:name= "android.permission.ACCESS_NETWORK_STATE"/>

• Open the build.gradle file in the android directory of your React Native project, and change the value of minSdkVersion in buildscript to 19.

Development Process

• To make your app's orientation work by default, orientation keywords should be removed from android:configChanges property of the activity tag in AndroidManifest.xml file. An example of your AndroidManifest.xml is as follows:

<!-- AndroidManifest.xml. --> 
<activity
        android:name="com.huawei.agc.rn.appmessaging.example.MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

• Import the following into APP.js file.

import AGCAppMessaging from '@react-native agconnect/appmessaging';
import {Alert} from 'react-native';

• The React Native App Messaging plugin allows you to enable or disable data synchronization from the AppGallery Connect server. The function is enabled by default. The AGCAppMessaging.setFetchMessageEnable API can be called to enable or disable data synchronization from the AppGallery Connect server.

import AGCAppMessaging from '@react-native-agconnect/appmessaging';
import {Alert} from 'react-native';
AGCAppMessaging.setFetchMessageEnable(true).then(result => {
    Alert.alert("[setFetchMessageEnable] " + JSON.stringify(result));
}).catch((err) => {
    Alert.alert("[setFetchMessageEnable] Error/Exception: " + JSON.stringify(err));
});

• The AGCAppMessaging.setDisplayEnable API can be called to set whether to enable message display.

import AGCAppMessaging from '@react-native-agconnect/appmessaging';
import {Alert} from 'react-native';
AGCAppMessaging.setDisplayEnable(false).then(result => {
    Alert.alert("[setDisplayEnable] " + JSON.stringify(result));
}).catch((err) => {
Alert.alert("[setDisplayEnable] Error/Exception: " + JSON.stringify(err));
});

• Add a listener to obtain app message events.

const eventEmitter = new NativeEventEmitter(AGCAppMessaging);
    this.eventListener = eventEmitter.addListener(AGCAppMessaging.EventTypes.ON_MESSAGE_DISPLAY,
        (event) => {
            Alert.alert("[onMessageDisplay] " + JSON.stringify(event));
            console.log("[onMessageDisplay] " + JSON.stringify(event));
        })

• Call the AGCAppMessaging.setForceFetch API in the testing code to specify that the in-app message data must be obtained from the AppGallery Connect server forcibly.

Sending App Message to our App Users

• Choose Your Project in App-Gallery Connect and select the application which you want to test an in-app message of the project.

• Choose Grow > App Messaging > New

• Enter the information required to send App Messages.

• On SELECT SENDING TARGET, Choose your application as Target and click Next.

• Select Target users by referring to this document.

• Now Set Schedule time and click Next.

• Click on OK and then Publish.

• Now navigate to Management > Operation column and click Test.

• Click Add test user and enter the AAID of the test device in the text box. Click Save.
  

• Now in your APP, Test whether the message can be properly displayed and operated.

Output

You can check the action in your console log

Tips and Tricks

1. Set minSdkVersion to 19 or higher.
2. To view the events of App Messaging, Huawei Analytics needs to be enabled and configured.

Conclusion

In this article, we have learned how to integrate IN APP Messaging service by Huawei. APP Messages are very useful for delivering the right message to the target user. It encourages them to use key app functions, or send attractive promotion activities to enhance user loyalty.

Reference

In App Messaging: Documentation
In App Messaging : Training Video