AppGallery Connect Remote Configuration Development

Introduction

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 obtain parameter values delivered on the console to modify the app's behavior and appearance.

What You Will Create

In this codelab, you will 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 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 changing parameters through Remote Configuration.

Development Environment and Skill Requirements

A computer with Android Studio installed for app development
Skills in Java and Android Studio
A developer account registered by referring to Register a HUAWEI ID

Device Requirements

A device running Android 4.2 or a later version

To integrate Remote Configuration of AppGallery Connect, you must complete the following preparations:

Create an app in AppGallery Connect.
Create an Android Studio project.
Add the app package name.
Configure the Maven repository address and AppGallery Connect gradle plug-in.
Synchronize the project.

For details, please refer to Preparations for Intergration in AppGallery Connect.

Enabling Remote Configuration

Sign in to AppGallery Connect and click My projects. Click the app for which you want to enable Remote Configuration on the project card, and go to Growing > Remote Configuration. If it is the first time that you use Remote Configuration, click Enable now in the upper right corner.
If the data storage location is not set, you need to set it for your app. For details, please refer to Setting a Data Storage Location.

Integrating the SDK

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

Click My projects in AppGallery Connect and find the app for which you want to enable Remote Configuration on the project card.
Go to Project Settings > General information, and click agconnect-services.json to download the configuration file.
Copy the agconnect-services.json file to the app's root directory of your Android Studio project.

Open the build.gradle file in the app directory and configure the service addresses for Remote Configuration as follows.


// Configure the following address:
apply plugin: 'com.huawei.agconnect' 

dependencies {
        // Configure the following address.
        implementation 'com.huawei.agconnect:agconnect-remoteconfig:1.4.1.300'
}

Click Sync Now to synchronize the configuration.

In this codelab, you can create a UI layout in the Android Studio project, design the layout based on the following figure, and add a simple text, and a button for obtaining parameters from Remote Configuration.

The layout code is as follows:


<?xml version="1.0" encoding="utf-8"?> 
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context=".MainActivity"> 
 
    <TextView 
        android:id="@+id/greeting" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Greeting CodeLaber" 
        android:textSize="30sp" 
        app:layout_constraintBottom_toBottomOf="parent" 
        app:layout_constraintLeft_toLeftOf="parent" 
        app:layout_constraintRight_toRightOf="parent" 
        app:layout_constraintTop_toTopOf="parent" 
        app:layout_constraintVertical_bias="0.3" /> 
 
    <Button 
        android:id="@+id/fetch_button" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Get Online config" 
        app:layout_constraintBottom_toBottomOf="parent" 
        app:layout_constraintHorizontal_bias="0.5" 
        app:layout_constraintLeft_toLeftOf="parent" 
        app:layout_constraintRight_toRightOf="parent" 
        app:layout_constraintTop_toTopOf="parent" 
        app:layout_constraintVertical_bias="0.6" /> 
 
</androidx.constraintlayout.widget.ConstraintLayout>

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 in the res/xml 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 and click My projects. Click your app on the project card, and go to Growing > Remote Configuration.
Click the Condition management tab and then click Add condition.
In the dialog box that is displayed, set Condition for the current language Chinese, for example Diff_Lang_CN, set Language as the filter, select Chinese(zh) 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 conditions are added, click Release.

Click the Parameter management tab and then click Add parameter.
Enter a parameter name in Default parameter name 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 Add parameter again to add the SET_BOLD_KEY parameter. Enter a default value for the parameter in Default value, for example, false. For Chinese, set the parameter to true, indicating that text is in bold. For English, set the parameter to false, indicating that the text is not in bold. After the configuration is complete, click Save.
After the parameters are added, click Release.

Import related classes.


import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import com.huawei.agconnect.remoteconfig.AGConnectConfig;
import com.huawei.agconnect.remoteconfig.ConfigValues;
import com.huawei.hmf.tasks.OnFailureListener;
import com.huawei.hmf.tasks.OnSuccessListener;

Declare required parameters.


private static final String GREETING_KEY = "GREETING_KEY";
private static final String SET_BOLD_KEY = "SET_BOLD_KEY";
private AGConnectConfig config;
private TextView textView;

Define UI elements in the onCreate method.


setContentView(R.layout.activity_main);
textView = findViewById(R.id.greeting);
Button button = findViewById(R.id.fetch_button);
config = AGConnectConfig.getInstance();

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

Apply the in-app parameter values as default values.


config.applyDefault(R.xml.remote_config);
textView.setText(config.getValueAsString(GREETING_KEY));
Boolean isBold = config.getValueAsBoolean(SET_BOLD_KEY);
if (isBold){
textView.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
}

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


button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
    fetchAndApply();
}
});

The fetchAndApply method is defined as follows:


private void fetchAndApply(){
    config.fetch(0).addOnSuccessListener(new OnSuccessListener<ConfigValues>() {
        @Override
        public void onSuccess(ConfigValues configValues) {
            // Apply Network Config to Current Config
            config.apply(configValues);
            updateUI();
        }
    }).addOnFailureListener(new OnFailureListener() {
        @Override
        public void onFailure(Exception e) {
            textView.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 text = config.getValueAsString(GREETING_KEY);
Boolean isBold = config.getValueAsBoolean(SET_BOLD_KEY);
textView.setText(text);
if (isBold){
    textView.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
}
}

Run the Android Studio project to generate an APK and install the APK on the test mobile phone.
View the initialized page.
Tap GET ONLINE CONFIG. The greeting will change as configured.

Well done. You have successfully built an app that integrates Remote Configuration of AppGallery Connect and learned how to:

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

For details about the development guide of Remote Configuration, please refer to Remote Configuration Introduction.
For details about Remote Configuration APIs, please refer to API Reference.

Download the demo source code used in this codelab from the following address:

Download source code

Code copied