[Huawei Developers] muraliameakula:
Overview

You can use App Messaging of AppGallery Connect to send relevant messages to target active users of your app to encourage them to use key app functions, or send attractive promotion activities to enhance user loyalty. App Messaging even allows you to customize your messages look and the way they will be sent, in addition to default message layouts. You can also define events for triggering message sending to your users at the right moment.

In this article, I will show how user can promote their products using InAppMesseage service.

App Messaging allows you to send targeted messages based on user behaviour in your app to engage users and encourage certain user activities such as update, browse, subscribe and purchase. For example, you can use this service to send a promotion message of a product. When a user views product information, improving the sales and purchase rate.

Create Project in Huawei Developer Console

Before you start developing an app, configure app information in App Gallery Connect.

Register as a Developer

Before you get started, you must register as a Huawei developer and complete identity verification on HUAWEI Developers. For details, refer to Registration and Verification.

Create an App

Follow the instructions to create an app Creating an App Gallery Connect Project and Adding an App to the Project. Set the data storage location to Germany.

React Native setup

Requirements

Huawei phone with HMS 4.0.0.300 or later.

React Native environment with Android Studio, NodeJs and Visual Studio code.

Dependencies

Gradle Version: 6.3

Gradle Plugin Version: 3.5.2

React Native CLI: 2.0.1

1. Environment set up, refer link.

2. Create project using below command.

react-native init project name

3. You can install react native command line interface on npm, using the install -g react-native-cli command as shown below.

npm install –g react-native-cli

Generating a Signing Certificate Fingerprint

Signing certificate fingerprint is required to authenticate your app to Huawei Mobile Services. Make sure JDK is installed. To create one, navigate to JDK directory’s bin folder and open a terminal in this directory. Execute the following command:

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

This command creates the keystore file in application_project_dir/android/app

The next step is to obtain the SHA256 key which is needed for authenticating your app to Huawei services, for the key store file. To obtain it, enter following command in terminal:

keytool -list -v -keystore <application_project_dir>\android\app\<signing_certificate_fingerprint_filename>.jks

After an authentication, the SHA256 key will be revealed as shown below.

Adding SHA256 Key to the Huawei project in App Gallery.

Copy the SHA256 key and visit AppGalleryConnect/ <your_AppMessage_project>/General Information. Paste it to the field SHA-256 certificate fingerprint.

Download the agconnect-services.json from App Gallery and place the file in android/app directory from your React Native Project.

Follow the steps to integrate the InAppMessage plugin to your React Native Application.

Enable the AppMessaging and Analytics kit from ManageAPIs as below.

Integrate the Hms-InAppMessage plugin:

User have react native version 16.6.0 install below command

npm install @react-native-agconnect/appmessaging@1.2.0-beta.1

User have react native version 17.0.0 install below command

npm install --legacy-peer-deps @react-native-agconnect/appmessaging

Download the Plugin from the Download Link

Download ReactNative InAppMessage Plugin under node_modules/@react-native-agconnect of your React Native project, as shown in the directory tree below:

project-dir
|_ node_modules
|_ ...
|_ @react-native-agconnect
|_ ...
|_ appmessaging
|_ ...
|_ ...

Navigate to android/app/build.gradle directory in your React Native project. Follow the steps:

Add the AGC Plugin dependency.

apply plugin: 'com.huawei.agconnect'

Navigate to App level android/build.gradle directory in your React Native project. Follow the steps:

Add to buildscript/repositories

maven {url 'http://developer.huawei.com/repo/'}

Add to buildscript/dependencies

classpath 'com.huawei.agconnect:agcp:1.4.1.300’)

Android setup:

Step 1: An example of your AndroidManifest.xml as follows:

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

Step 2: 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 an In-App Message​

To send huawei in-app messages to users in specific scenarios, you need to create them in AppGallery Connect first and set the message layout and sending target

Procedure​

1. Sign in to AppGallery Connect and click My projects.

2. Find and click your project.

3. Navigate to Grow > App Messaging and click New.

4. Set Name and Description

5. Set the layout and content and click Next.

Select the message type from the Type drop-down list box. Currently, the following options are supported: Pop-up, Image, and Banner.

6. Set the sending time and click Next.

7. Set conversion events.

Associate the display or tap of the in-app message with a conversion event. The conversion relationship will be displayed in statistics.

8. Click Save and Publish in the upper right corner to complete message creation.

In-App Message Display​

The prerequisites for the React Native App Messaging plug-in to display in-app messages as follows:

1. The app must be running on the foreground.

2. A user triggers the event upon which an in-app message will be displayed. Then the React Native App Messaging plug-in synchronizes the message data from the AppGallery Connect server or obtains the message data from the local cache and determines whether to display the message.

Add Below Code in App.js:

The AGCAppMessaging.setFetchMessageEnable API can be called to enable or disable data synchronization from the AppGallery Connect server.

setFetchMessageEnable() {
AGCAppMessaging.getInstance().setFetchMessageEnable(true).then(result => {
Alert.alert("[setFetchMessageEnable] " + JSON.stringify(result));
this.createCustomView("setFetchMessageEnable : ", JSON.stringify(result) + "")
}).catch((err) => {
Alert.alert("[setFetchMessageEnable] Error/Exception: " + JSON.stringify(err));
this.createCustomView("[setFetchMessageEnable] Error/Exception: ", JSON.stringify(err) + "")
});
}

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

setDisplayEnable() {
AGCAppMessaging.getInstance().setDisplayEnable(false).then(result => {
Alert.alert("[setDisplayEnable] " + JSON.stringify(result));
this.createCustomView("setDisplayEnable : ", JSON.stringify(result) + "")
}).catch((err) => {
Alert.alert("[setDisplayEnable] Error/Exception: " + JSON.stringify(err));
this.createCustomView("[setDisplayEnable] Error/Exception: ", JSON.stringify(err) + "")
});
}

To add a custom view on the Android platform, add the following code to the onCreate method of your React-Native project /Android/MainApplication.java.

AgcAppMessagingModule.addCustomView();

Call the AGCAppMessaging.handleCustomViewMessageEvent for custom app message interactions. The following example calls the AGCAppMessaging.ON_MESSAGE_DISPLAY event once the custom app message has been shown:

componentDidMount() {
this.addMessageCustomViewListener();
}

addMessageCustomViewListener = () => {
AGCAppMessaging.getInstance().addMessageCustomViewListener((result) => {
Alert.alert(AGCAppMessaging.EventTypes.CUSTOM_VIEW + JSON.stringify(result))
/*
* Add Custom Message Event Handler method.
* When using custom app message layout, handle custom app message click events like below.
* gets eventType ( AGCAppMessaging.ON_MESSAGE_DISPLAY, AGCAppMessaging.ON_MESSAGE_CLICK, AGCAppMessaging.ON_MESSAGE_DISMISS, AGCAppMessaging.ON_MESSAGE_ERROR)
* and dismissType param( AGCAppMessaging.DISMISS_TYPE_CLICK, AGCAppMessaging.DISMISS_TYPE_CLICK_OUTSIDE, AGCAppMessaging.DISMISS_TYPE_AUTO, AGCAppMessaging.DISMISS_TYPE_SWIPE) when using AGCAppMessaging.ON_MESSAGE_DISMISS.
*/
this.handleCustomViewMessageEvent();
});

handleCustomViewMessageEvent() {
const customMessageDisplayReq = {
"eventType" : AGCAppMessaging.EventTypes.ON_MESSAGE_DISPLAY
}

const customMessageClickReq = {
"eventType" : AGCAppMessaging.EventTypes.ON_MESSAGE_CLICK
}

const customMessageDismissReq = {
"eventType" : AGCAppMessaging.EventTypes.ON_MESSAGE_DISMISS,
"dismissType": AGCAppMessaging.DismissTypes.DISMISS_TYPE_CLICK
}

const customMessageErrorReq = {
"eventType" : AGCAppMessaging.EventTypes.ON_MESSAGE_ERROR
}

AGCAppMessaging.getInstance().handleCustomViewMessageEvent(customMessageDisplayReq).then(result => {
Alert.alert("[handleCustomViewMessageEvent] " + JSON.stringify(result));
this.createCustomView("handleCustomViewMessageEvent : ", JSON.stringify(result) + "")
}).catch((err) => {
Alert.alert("[handleCustomViewMessageEvent] Error/Exception: " + JSON.stringify(err));
this.createCustomView("[handleCustomViewMessageEvent] Error/Exception: ", JSON.stringify(err) + "")
});
}

class AGCAppMessaging{

constructor() {
this.emitter = new NativeEventEmitter(AGCAppMessagingModule);
}

static getInstance() {
if (!this.instance) {
this.instance = new AGCAppMessaging();
}
return this.instance;
}

addMessageDisplayListener(listener){
return subscription = this.emitter.addListener(
EventTypes.ON_MESSAGE_DISPLAY, listener
);
}

Test InAppMessage

Huawei In-app messages can only be displayed to users who have installed your officially released app. App Messaging allows you to test an in-app message when your app is still under tests. The testing procedure is as follows:

1. Obtain the anonymous application identifier (AAID) of the test device. For details, refer to Obtaining AAID.

2. Sign in to AppGallery Connect and select My projects.

3. Find your project from the project list and click the app for which you want to test an in-app message on the project card.

4. Navigate to Growing > App Messaging > Management, find the message that you need to test, and click Test in the Operation column.

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

6. Click Save to set the in-app message to a test message and save the device as a test device.

Run the application (Generating the Signed Apk):

1. Open project directory path in command prompt.

2. Navigate to android directory and run the below command for signing the Apk.

gradlew assembleRelease

Output:

Tips and Tricks

Download latest HMS ReactNativeAppMessage plugin.

Add AAID to Test AppMessage in AppGalleryConnect.

For project cleaning, navigate to android directory and run the below command.

gradlew clean

Conclusion:

In this article, we have learnt to integrate InAppMessage in React native project. We can integrate this service in different scenarios such as Travel, Education, Finance, Gaming and E-commerce apps to send the update, browse, subscribe and promote the product for better sales.

Thanks for reading! If you enjoyed this story, please click the Like button and Follow. Feel free to leave a Comment 💬 below.

Reference:

App Messaging

Original Source