How to Integrate Remote Configuration into Cordova App
Hello everyone 👋, in this article, we’ll look at how to implement remote configuration in Cordova applications without releasing a new app version to your users.
Introduction
Remote Configuration, provided by AppGallery Connect, allows you to manage parameters online.
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.
Configuration
Enabling Remote Configuration and Integrating the Remote Configuration SDK
1- Sign in to AppGallery Connect and click My projects.Cck your project, and select your app for which you want to enable Remote Configuration from the drop-down list on the top.
2- Click your project, and select your app for which you want to enable Remote Configuration from the drop-down list on the top.
3- Go to Grow > Remote Configuration. If you have not enabled the service, click Use now.
4- Go to Project settings > General information. Download the configuration file under App information.
- File for Android: agconnect-services.json
- File for iOS: agconnect-services.plist
5- Add the configuration file to your Cordova project.
- Android: Add the agconnect-services.json file to the android/app directory of the Cordova project.
- iOS: Open the iOS module of the Cordova project in Xcode and add the agconnect-services.plist file to the project.
6- Add the dependency to the pubspec.yaml file of the Cordova project.
- cordova plugin add @cordova-plugin-agconnect/remoteconfig
7- The following figure shows the result after installation.
Designing the UI
You can create a page in your Cordova project, and design the UI according to the following figure. The function buttons are as follows:
Setting Parameter Values in Remote Configuration
1- Go to Grow > Remote Configuration. On the Parameters tab page, click New parameter.
2- On the New parameter page, add a parameter and its value, which is a key-value pair to be fetched by the service SDK. Click Save, return to the Remote Configuration page, and click Release.
Development & Test
Developing Functions
1- Set the in-app default parameter value, and then call AGCConfigPlugin.fetch to fetch the updated parameter value from the cloud. After that, call the AGCConfigPlugin.applyLastFetched method to apply the updated parameter value immediately.
2- Set the in-app default parameter value. Call the AGCConfigPlugin.applyLastFetched method to apply the updated parameter value immediately, and then call AGCConfigPlugin.fetch to fetch the updated parameter value from the cloud, which will be applied upon next launch.
3- Call the AGCConfigPlugin.getMergedAll method to fetch all key-value pairs or call AGCConfigPlugin.getValue to fetch the value of a specific key. In addition, you can call AGCConfigPlugin.getSource to obtain the source of a parameter value, and check whether an in-app or on-cloud parameter value is obtained.
4- Clear cached data.
Compiling and Testing Your App
1- Open your project in Android Studio or Xcode, and run your app on a mobile phone or simulator. You can also run the following commands in the CLI:
- cordova run android
- cordova run ios
2- Tap Obtain values and sources and then Apply values immediately. The key-value pair key1:abc1 from the cloud is displayed in the log information.
3- Tap Clear cached data and then Apply values upon next launch. The log information shows that the parameter value from the cloud is fetched successfully. However, only the in-app default value has taken effect.
4- Tap Apply values upon next launch again to apply the parameter value fetched from the cloud, which is key1:abc1.
5- Change the value of key1 and tap Obtain values and sources. Then tap Apply parameter values immediately. The parameter value is changed.
Summary
In this article, we have learnt how to change the behavior and appearance of your app online without requiring users to update the app by using Huawei AppGallery Connect Remote Configuration cloud based service.
Reference
You can contact with me for your questions. See you next!
