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

In this codelab, you will create an app that integrates Remote Configuration of AppGallery Connect and fetch parameter values. Your app will be able to:

• Set local parameter values
• Fetch parameter values from the cloud

What You Will Learn

• Integrate Remote Configuration of AppGallery Connect
• Fetch parameters from Remote Configuration

Development Environment and Skill Requirements

• IntelliJ IDEA
• Skills in JavaScript and Vue CLI
• A HUAWEI ID, whose identity has been verified

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

• Create an app in AppGallery Connect
• Create a Vue CLI project

1. 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 box on the top, and go to Grow > Remote Configuration. If it is the first time that you use Remote Configuration, click Enable now in the upper right corner.
   
2. If the data processing location is not set, set it for your app.

Run the following command to integrate the Remote Configuration JavaScript SDK into your project:

npm install --save @agconnect/remoteconfig@1.2.1

In this codelab, the third-party open-source layout library based on Element UI is used. You need to import the tool first.

1. Add the dependency on Element UI to dependencies in the package.json file.

   "element-ui": "^2.13.2"
   

   

   Enter the following command:

   npm install
   

2. Open the main.js file and import Element UI.

   import ElementUI from 'element-ui' 
   import 'element-ui/lib/theme-chalk/index.css' 
   Vue.use(ElementUI)
   

   

3. Create the remoteconfig.vue file for the sign-in page and add the required layout to the file.
   The layout code is as follows:

   <template> 
   <div class="remoteconfigContainer"> 
   <el-form :model="dataForm_sdk" :rules="rules" status-icon label-position="left" label-width="80px" 
            class="demo-ruleForm remoteconfig-page"> 
     <h3 class="title">RemoteConfigCodelab</h3> 
     <el-form-item label="FetchConfig" label-width="200px" class="fetchConfigTitle"> 
     </el-form-item> 
     <el-form-item> 
       <el-button type="primary" @click="fetch" class="fetchButton">Fetch</el-button> 
       <el-button type="primary" @click="applyConfig" class="applyConfigButton">Apply</el-button> 
     </el-form-item> 
     <el-form-item label="DefaultConfig" label-width="200px" class="setDefaultVauleTitle"> 
     </el-form-item> 
     <el-form-item> 
       <el-input type="textarea" :disabled="false" v-model="dataForm_sdk.defaultConfig" 
                 placeholder="Please enter JSON format string" 
                 class="inputValueText"></el-input> 
     </el-form-item> 
     <el-button type="primary" @click="applyDefault" class="applyDefaultButton">applyDefault</el-button> 
     <el-form-item label="GetVaule" class="getVauleTitle"> 
     </el-form-item> 
     <el-form-item> 
       <el-input type="textarea" :disabled="false" autosize="autosize" v-model="dataForm_sdk.valueText" 
                 class="getValueText"></el-input> 
     </el-form-item> 
     <el-form-item> 
       <el-button type="primary" @click="getValue" class="getValueButton">Show Value</el-button> 
       <el-button @click="clearAll" class="clearValueButton">ClearAll</el-button> 
     </el-form-item> 
     <el-form-item> 
     </el-form-item> 
   </el-form> 
   </div> 
   </template>
   

   The code in style is as follows:

   <style scoped> 
   .remoteconfig-page { 
     -webkit-border-radius: 5px; 
     border-radius: 5px; 
     margin: auto; 
     width: 800px; 
     padding: 35px 35px 15px; 
     background: #fff; 
     border: 1px solid #eaeaea; 
     box-shadow: 0 0 25px #cac6c6; 
   } 
    
   .getVauleTitle, 
   .fetchConfigTitle, 
   .setDefaultVauleTitle { 
     border-bottom: 1px solid #eaeaea; 
   } 
    
   .applyConfigButton, 
   .fetchButton { 
     width: 120px; 
   } 
    
   .getValueButton { 
     margin-left: 30px; 
     width: 120px; 
   } 
    
   .applyDefaultButton { 
     margin-left: 530px; 
     width: 120px; 
   } 
    
   .getValueText, 
   .inputValueText { 
     width: 600px; 
   } 
   </style>
   

1. 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.
2. On the Conditions tab page, click New condition.
3. On the Parameters tab page, click New parameter.
4. Enter a parameter name in Parameter based on your design, for example, AGC. Enter a default value for the parameter in Default value, for example, RemoteConfig.
5. After the configuration is complete, click Save.
   
6. After the parameter is added successfully, click Release.
   

1. Import dependencies required by Remote Configuration to the vue.js file.

   import agconnect from "@agconnect/api"; 
   import "@agconnect/remoteconfig"; 
   import "@agconnect/instance";
   

2. Define the parameter required by your app and add it to the data block of export default.

   data () { 
       return { 
         dataForm_sdk: { 
           valueText: '', 
           defaultConfig: '' 
         }, 
         rules: {}, 
       }; 
     },
   

3. If you have not added the app configurations in the SDK code snippet to your project, copy and add it to the created method.

   async created() { 
       var agConnectConfig = 
         { 
          // App configurations. 
         }; 
       agconnect.instance().configInstance(agConnectConfig); 
     },
   
   

4. On the sign-in page of your codelab, configure the local parameter value for DefaultConfig and call the applyDefault method to apply it.

   applyDefault() { 
         if (this.dataForm_sdk.defaultConfig != '') { 
           if (typeof this.dataForm_sdk.defaultConfig == 'string') { 
             try { 
               var defaultConfigJson = JSON.parse(this.dataForm_sdk.defaultConfig); 
               if (typeof defaultConfigJson == 'object' && defaultConfigJson) { 
                 let defaultConfigMap = new Map(); 
                 for (var k in defaultConfigJson) { 
                   defaultConfigMap.set(k, JSON.stringify(defaultConfigJson[k])); 
                 } 
                 agconnect.remoteConfig().applyDefault(defaultConfigMap); 
                 alert('applyDefault success'); 
               } else { 
                 alert('please input JSON string!'); 
                 this.dataForm_sdk.defaultConfig = ''; 
               } 
             } catch (e) { 
               alert('please input JSON string!'); 
               this.dataForm_sdk.defaultConfig = ''; 
             } 
           } 
         } else { 
           alert('please input JSON string!'); 
           this.dataForm_sdk.defaultConfig = ''; 
         } 
       },
   
   

5. Call the fetch method to fetch the parameter value from the cloud.

   async fetch() { 
     agconnect.remoteConfig().minFetchIntervalMillis = 1000 
     await agconnect.remoteConfig().fetch().then((res) => { 
       alert('fetch successfully!'); 
     }).catch((err) => { 
       alert(JSON.stringify(err)); 
     }); 
   },
   

   Then call the apply method to update the parameter value from Remote Configuration.

   applyConfig() { 
         return agconnect.remoteConfig().apply().then((res) => { 
               if (res) { 
                 alert('apply successfully!'); 
               } else { 
                 alert('apply failed!'); 
               } 
             } 
           ).catch(error => { 
             alert(JSON.stringify(error)); 
           }); 
       },
   

6. Call getMergedAll to obtain all cloud and local parameter values.

   getValue () { 
     let obj = Object.create(null); 
     let resultMap = agconnect.remoteConfig().getMergedAll(); 
     for (let [k, v] of resultMap) { 
       obj[k] = v.value; 
     } 
     this.dataForm_sdk.valueText = JSON.stringify(obj); 
   },
   

7. Call clearAll to clear all parameter values.

   clearAll() { 
     agconnect.remoteConfig().clearAll().then(()=>{ 
       alert('clearAll OK'); 
     }); 
   }
   

1. Run the following command on the Terminal tab page in IntelliJ IDEA.

   npm start
   

   After the compilation is complete, click the generated link.
   

2. In the DefaultConfig area, enter the local default parameter value in JSON format, click applyDefault to apply it, and then click Show Value below to display it.
   
3. Click Fetch to fetch the parameter value from the cloud, click Apply to apply it to the local host, and then click Show Value to check whether the setting is changed.
   

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

• Integrate Remote Configuration of AppGallery Connect
• Fetch parameters from Remote Configuration

For more information, please refer to the following links:

• Development Guide
• API Reference

Sample Code