Remote Configuration for HarmonyOS

Overview

AppGallery Connect Remote Configuration allows you to manage parameters online. With the service, you can change the behavior and appearance of your app online without requiring users to update the app.
Remote Configuration provides cloud-based services, the console, and the client SDK. By integrating the client SDK, your app can periodically fetch parameter values delivered on the console to modify the app's behavior and appearance.

What You Will Create

Build an app that can use AppGallery Connect Remote Configuration to configure the app UI text. Your app will be able to:

Change the text language and its boldfaced status by defining parameters in Remote Configuration.
Localize the greeting based on the system language.

What You Will Learn

Integrate Remote Configuration of AppGallery Connect.
Change how your app acts and looks by modifying parameters through Remote Configuration.

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

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

Create an app in AppGallery Connect.
Create a project in DevEco Studio.
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.

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

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

In AppGallery Connect, click My projects, click your project card, and select an app for which you want to enable Remote Configuration 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 app-level build.gradle file in DevEco Studio and add the Remote Configuration SDK dependency under dependencies.


// Configure the following address: 
  apply plugin: 'com.huawei.agconnect'
  dependencies { 
      ... 
      implementation "com.huawei.agconnect:agconnect-remoteconfig-harmony:1.2.0.300" 
  }

Click Sync Now to synchronize the configuration.

You can create a page in your DevEco Studio project and design the UI according to the following figure, with a text and a button for fetching parameters from Remote Configuration as required.

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"> 
   
      <Text 
          ohos:id="$+id:greeting" 
          ohos:text="Greeting CodeLaber" 
          ohos:layout_alignment="horizontal_center" 
          ohos:height="match_content" 
          ohos:width="match_content" 
          ohos:top_margin="100" 
          ohos:left_margin="60" 
          ohos:right_margin="60" 
          ohos:multiple_lines="true" 
          ohos:text_color="#ff888888" 
          ohos:text_size="100" 
          /> 
   
      <Button 
          ohos:id="$+id:fetch_button" 
          ohos:text="Get Online config" 
          ohos:background_element="$graphic:background_ability_main" 
          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="100" 
          /> 
  </DirectionalLayout>

As you need to implement functions including localizing the greeting and changing the boldfaced status, the following parameters need to be designed:

GREETING_KEY: greeting text.
SET_BOLD_KEY: indicates whether the text is in bold. The options are true (yes) and false (no).

When an app is launched, it loads default parameter values. In this codelab, you will use in-app default parameter values. Create an XML file (for example, remote_config.xml) in the resources/base directory and set the default value for each parameter.


<?xml version="1.0" encoding="utf-8"?> 
  <remoteconfig> 
      <value> key="GREETING_KEY">Greeting, CodeLaber</value> 
      <value> key="SET_BOLD_KEY">false</value> 
  </remoteconfig>

Sign in to AppGallery Connect, click My projects, find a project, and select your app for which you want to enable Remote Configuration from the drop-down list on the top. Go to Grow > Remote Configuration.
On the Conditions tab page, click New condition.
In the displayed dialog box, set Condition for the current language Chinese, for example, to Diff_Lang_CN, set Language as the filter, select Simplified Chinese for Language, and click Save.
Add a condition for the language English in the same way, for example, Diff_Lang_EN. In this case, select English (US) (en) for Language. After the condition is added, click Release.

On the Parameters tab page, click New parameter.
Enter a parameter name in Parameter based on your design, for example, GREETING_KEY. Enter a default value for the parameter in Default value, for example, Greeting, CodeLaber.
Select Diff_Lang_CN from the Add conditional value drop-down list box. Set the value to be displayed in Chinese for the GREETING_KEY parameter. Then select Diff_Lang_EN from the Add conditional value drop-down list box, and set the value to be displayed in English for this parameter. After the configuration is complete, click Save.
Click New parameter again to add the SET_BOLD_KEY parameter. Enter a default value for the parameter in Default value, for example, false. Settings in the following figure indicate Chinese characters will be in bold, and English characters will not. After the configuration is complete, click Save.
After the parameters are added, click Release.

Import related classes.


import com.huawei.agconnect.remoteconfig.AGConnectConfig; 
import com.huawei.agconnect.remoteconfig.ConfigValues; 
import com.huawei.agconnect.remoteconfig.ResourceTable; 
import com.huawei.hmf.tasks.OnFailureListener; 
import com.huawei.hmf.tasks.OnSuccessListener; 
import ohos.aafwk.ability.AbilitySlice; 
import ohos.aafwk.content.Intent; 
import ohos.agp.components.Button; 
import ohos.agp.components.Component; 
import ohos.agp.components.Text; 
import ohos.agp.text.Font;

Declare parameters, the Remote Configuration instance, and more.


private static final String GREETING_KEY = "GREETING_KEY"; 
private static final String SET_BOLD_KEY = "SET_BOLD_KEY"; 
private AGConnectConfig config; 
private Text text;

Define UI elements in the onStart method.


super.setUIContent(ResourceTable.Layout_ability_main); 
text = (Text) findComponentById(ResourceTable.Id_greeting); 
Button button = (Button) findComponentById(ResourceTable.Id_fetch_button);

Initialize a Remote Configuration instance.
```
config = AGConnectConfig.getInstance();
```

Apply the in-app parameter values as default values.


config.applyDefault(ResourceTable.Profile_remote_config); 
  text.setText(config.getValueAsString(GREETING_KEY)); 
  Boolean isBold = config.getValueAsBoolean(SET_BOLD_KEY); 
  if (isBold){ 
      text.setFont(Font.DEFAULT_BOLD); 
  }

Trigger the fetchAndApply method when the button for fetching parameter values from Remote Configuration is tapped.


button.setClickedListener(new Component.ClickedListener() { 
  @Override 
  public void onClick(Component component) { 
        fetchAndApply(); 
  } 
});

The fetchAndApply method is defined as follows:


private void fetchAndApply(){ 
        config.fetch(0).addOnSuccessListener(new OnSuccessListener&lt;ConfigValues&gt;() { 
            @Override 
            public void onSuccess(ConfigValues configValues) { 
                config.apply(configValues); 
                updateUI(); 
            } 
        }).addOnFailureListener(new OnFailureListener() { 
            @Override 
            public void onFailure(Exception e) { 
                text.setText("fetch setting failed: " + e.getMessage()); 
            } 
        }); 
    }

Obtain the parameter values from the updateUI method and load them to corresponding UI elements.


private void updateUI(){ 
  String greeting = config.getValueAsString(GREETING_KEY); 
  Boolean isBold = config.getValueAsBoolean(SET_BOLD_KEY); 
  text.setText(greeting); 
  if (isBold){ 
      text.setFont(Font.DEFAULT_BOLD); 
  } 
}

Run your DevEco Studio project and generate the HAP. Then, install the HAP on your mobile phone for testing.
View the initialized page.
Tap Get Online config. The greeting will change as configured.

Well done. You have successfully built your first app that integrates Remote Configuration and learned how to:

Use Remote Configuration to dynamically load parameter values set over the cloud.

Sample code

Code copied