如何集成华为AGC远程配置-cordova

简介

AppGallery Connect远程配置服务提供了在线的配置参数管理能力，可以实现应用在线更改行为和外观，而无需用户下载应用更新。

AppGallery Connect远程配置服务提供云端服务，管理台和客户端SDK，应用集成客户端SDK后可以定期获取远程配置管理台配置下发的参数值，实现客户端行为和UI的修改。

开通服务和集成SDK

1、登录AppGallery Connect网站，点击“我的项目”。

2、在项目列表中找到您的项目，在项目下的应用列表中选择需要开通远程配置服务的应用。

3、进入“增长 > 远程配置”，如果远程配置服务未开通，请点击“立即使用”，开通远程配置服务。

4、选择常规页签下的“应用”区域，下载agconnect-services配置文件。

Android：下载agconnect-services.json文件。

iOS：下载agconnect-services.plist文件。

5、在Cordova开发项目中添加配置文件。

Android：将配置文件agconnect-services.json添加到Cordova项目的android/app目录下。

iOS：用Xcode打开Cordova项目的iOS模块，将配置文件agconnect-services.plist添加进项目。

6、在Cordova项目的pubspec.yaml文件中添加依赖。

cordova plugin add @cordova-plugin-agconnect/remoteconfig

7、安装成功效果如下图。

界面设计

您可以在Cordova项目中创建一个布局页面，参照下图进行设计。功能按钮如下：

配置云端参数值

1、选择"增长 > 远程配置"，此时选中"配置项管理"页签，点击"添加配置项"按钮。

2、在添加配置项页填入配置默认值名称和默认值，即通过SDK获取的远程配置的key和value。点击"保存配置项"，返回远程配置页点击"发布"。

功能开发

1、设置默认值，再调用AGCConfigPlugin.fetch拉取云端数据成功后，立刻调用AGCConfigPlugin.applyLastFetched方法使更新的数据生效。

function test1() { 
   var defaults = { 
      mLong: 1000, 
      mString: 'hello world', 
      mDouble: 3.14, 
      mBoolean: true 
   } 
   AGCConfigPlugin.applyDefault(defaults, applyDefaultSuccess, applyDefaultError); 
   function applyDefaultSuccess() { 
      AGCConfigPlugin.fetch(0, fetchSuccess, fetchError); 
      console.log('applyDefault success'); 
    } 
   function applyDefaultError(result) { 
      console.log('applyDefault fail:' + result); 
   } 
   function fetchSuccess() { 
      AGCConfigPlugin.applyLastFetched(applyLastFetchedSuccess, applyLastFetchedError); 
      console.log('fetch success'); 
   } 
   function fetchError(result) { 
      console.log('fetch fail: throttleEndTimeMillis=' + result.throttleEndTimeMillis + ' ,message=' + result.message); 
   } 
   function applyLastFetchedSuccess() { 
      showAllValue(); 
      console.log('applyLastFetched success'); 
   } 
   function applyLastFetchedError(result) { 
      console.log('applyLastFetched fail:' + result); 
   } 
}

2、设置默认值，先调用AGCConfigPlugin.applyLastFetched方法使上次更新的数据生效，再调用AGCConfigPlugin.fetch拉取云端数据，留作下次生效使用。

function test2() { 
   var defaults = { 
      mLong: 1000, 
      mString: 'hello world', 
      mDouble: 3.14, 
      mBoolean: true 
   } 
   AGCConfigPlugin.applyDefault(defaults, applyDefaultSuccess, applyDefaultError); 
   function applyDefaultSuccess() { 
      AGCConfigPlugin.applyLastFetched(applyLastFetchedSuccess, applyLastFetchedError); 
      console.log('applyDefault success'); 
   } 
   function applyDefaultError(result) { 
      console.log('applyDefault fail:' + result); 
   } 
   function fetchSuccess() { 
      showAllValue(); 
      console.log('fetch success'); 
   } 
   function fetchError(result) { 
      console.log('fetch fail: throttleEndTimeMillis=' + result.throttleEndTimeMillis + ' ,message=' + result.message); 
   } 
   function applyLastFetchedSuccess() { 
      AGCConfigPlugin.fetch(0, fetchSuccess, fetchError); 
      console.log('applyLastFetched success'); 
   } 
   function applyLastFetchedError(result) { 
      console.log('applyLastFetched fail:' + result); 
   } 
}

3、数据生效后，您可以通过AGCConfigPlugin.getMergedAll方法获得全部键值对，也可以调用AGCConfigPlugin.getValue获取指定key的value。另外，您还可以调用AGCConfigPlugin.getSource来获取参数值的来源，判断获取的参数值是本地的还是远程的。

function showAllValue() { 
   AGCConfigPlugin.getMergedAll(success, error); 
   function success(result) { 
      for (var key in result) { 
         console.log(key + " : " + result[key]); 
      } 
   } 
   function error(result) { 
      console.log('showAllValue fail:' + result); 
   } 
} 
 
function getValue() { 
   AGCConfigPlugin.getValue('mLong', getValueSuccess, getValueError); 
   function getValueSuccess(success_result) { 
      console.log('getValue success, value = '+ success_result); 
   } 
   function getValueError(error_result) { 
      console.log('getValue error, errMessage = '+ error_result); 
   } 
   AGCConfigPlugin.getSource('mLong', getSourceSuccess, getSourceError); 
   function getSourceSuccess(success_result) { 
      console.log('getSource success, source = '+ success_result); 
   } 
   function getSourceError(error_result) { 
      console.log('getSource error, errMessage = '+ error_result); 
   } 
}

4、清除缓存数据。

function clear() { 
   AGCConfigPlugin.clearAll(); 
}

打包测试

1、重新编译后，使用Android Studio或者Xcode打开对应工程，点击运行按钮，在手机或模拟器上运行应用。您也可以打开终端，执行以下命令来运行应用。

cordova run android

cordova run ios

2、点击“获取数据及来源”，点击“拉取数据后立刻生效”按钮，看到控制台日志显示最新数据，其中key1:abc1，为我们在云端配置项。

3、点击“清除缓存数据”，点击“拉取数据后下次生效”。第一次点击可以在日志中看到拉取成功，但生效的数据还是默认值。

4、第二次点击上次拉取的数据才生效，云端配置项的数据为key1:abc1。

5、在云端修改key1的值，重新获取数据及来源。点击“拉取数据后立刻生效”按钮，可以看到配置项的值已改变。

恭喜您

祝贺您，您已经成功地构建了您的第一个集成AGC远程配置服务的应用程序，并学到了如何在AGC控制台设置云端配置值。您也可以在AGC上添加不同类型的远程配置数据，然后在APP上查看。

参考文档

远程配置

欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh

{{o.name}}

{{m.name}}