Learn how to Integrate Huawei Remote Configuration services using React Native

Introduction

In this article, we will learn added to implement Remote Configuration service provided by Huawei. Remote Configuration is a cloud service where the behavior or features of an app can be changed remotely without having to publish an app update.

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.

Integration process

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

• Generate a Signature File. First navigate to bin folder of java, then enter 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.

• Now generate SHA 256 key by following command.
  keytool -list -v -keystore <keystore-file path>

• Create an app in App Gallery by following instructions in Creating an AppGallery Connect Project and Adding an App to the Project. Provide the generated SHA256 Key in App Information Section.

• Download the Huawei Remote config plugin by following command.
  npm i @react-native-agconnect/remoteconfig.

• Open react native project in Visual studio code.

• Navigate to android > build.gradle and paste the below maven url inside the repositories of build script and all projects.
  maven { url 'http://developer.huawei.com/repo/' }

And paste the following under dependencies.

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

• Open build.gradle file which is located under the project.dir > android > app directory. Configure following dependency.implementation project(': react-native-agconnect-remoteconfig')

Also add apply plugin: 'com.huawei.agconnect' in app build.gradle file.

• Add the below lines under signingConfigs in app build.gradle.

release {storeFile file(<keystore_filename.jks>)storePassword '<store_password>'keyAlias '<alias key name>'keyPassword '<alias_password>}

• Navigate to Project settings and download the agconnect-services. json file and paste it inside android > app

• Add the following lines to the android/settings.gradle file in your project.
  

include ': react-native-agconnect-remoteconfig'project(':react-native-agconnect-remoteconfig').projectDir = new File(rootProject.projectDir,'../node_modules/@react-native-agconnect/remoteconfig/android')

Development Process

Open AGC, choose Growing > Remote Configuration, then click Enable now.

Now, we have to set the Parameters and Conditions.

-Parameter management is used to define key-value parameters. These parameters are used to configure the value in application.
-Condition management is used to define rules and if that rule criteria is met, value can be configured in the application. These rules are used based on App version, OS version, language, country, region etc.

• Navigate to Growing > Remote Configuration and Click on Condition management tab and then click Add condition.

• In the displayed dialog box, set Condition.

• Click the Parameter management tab and then click Add parameter.

• Enter a parameter name in Default parameter name based on your design. Enter a default value for the parameter in Default value.

• After the parameters are added, click Release.

Code Implementation

Setting In-app Default Parameter Values
Call AGCRemoteConfig.applyDefault to set the default parameter values that will be displayed.

let map = new Map();map.set("Know_more", );AGCRemoteConfig.applyDefault(map); 

Fetch the values from Cloud

Call AGCRemoteConfig.fetch(intervalSeconds) API to fetch the latest parameter values from the cloud and then call the AGCRemoteConfig.applyLastFetched API to make the values take effect.

AGCRemoteConfig.fetch(0).then(() => {console.log("fetch result success");AGCRemoteConfig.applyLastFetched();  })

Source of a Parameter Value
You can call AGCRemoteConfig.getSource to obtain the source of a parameter value to determine whether the parameter is a local one or is fetched.

AGCRemoteConfig.getSource("key").then((source) => {   //success});

There are three types of source. STATIC, DEFAULT and REMOTE.

Get the Parameter values
After default parameter values are set or parameter values are fetched from cloud, you can call AGCRemoteConfig.getValue to obtain the parameter values through key values to use in your app.

AGCRemoteConfig.getValue("Know_more").then((data) => {console.log("default_key_string ==" + (data));});

Get all the Values
We can obtain all parameter values by calling getMergedAll API instead of key values. It will return all values obtained after the combination of the local values and values fetched from the cloud.

AGCRemoteConfig.getMergedAll().then((map) => {map.forEach(function (value, key) {console.log("key-->" + key + ",value-->" + value);});});

Resetting Parameter Values
We can clear all existing parameter values by calling clearAll API.

AGCRemoteConfig.clearAll();

For Example,

import * as React from 'react';import { View, Button, StyleSheet } from 'react-native';import AGCRemoteConfig, { SOURCE} from '@react-native-agconnect/remoteconfig';const Separator = () => {    return <View style={styles.separator} />;}export default function ConfigScreen() {    return (        <View style={{ marginTop: 30, paddingHorizontal: 20 }}> <Button Title= Know_more "                onPress={() => {//add your code here                }}   />            <Separator />

Testing

Enter the below command to run the project.

react-native run-android

Run the below command in the android directory of the project to create the signed apk.
gradlew assembleRelease

Output

You can check every change in your log

Tips and Tricks

• Set minSdkVersion to 19 or higher.

• The default update interval of the AGCRemoteConfig.fetch API is 12 hours. You can call the intervalSeconds API to customize the fetch interval. Calling fetch again within the interval does not trigger data synchronization from the cloud.

• Once you have set the Parameters for remote configuration in AGC console, dont forget to click on release.

Conclusion

In this article, we have learned how to integrate HMS Remote Configuration in React native. Remote Configuration is very useful for delivering the right user experience to users. Remote Configuration service can be used in your application as per your requirement.

Reference

Remote Configuration: Documentation
Remote Configuration: Training Video