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 from the console to modify the app's behavior and appearance.

What You Will Create

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

What You Will Learn

Development Environment and Skill Requirements

Device Requirements

An iPhone or a simulator for testing

To integrate Remote Configuration of AppGallery Connect, you must complete the following preparations:
  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 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.

You need to integrate the Remote Configuration SDK into your Xcode project with CocoaPods.

  1. Sign in to AppGallery Connect and click My projects.
  2. Click your project card and select an app for SDK integration from the app drop-down list on the top.
  3. Go to Project settings > General information. In the App information area, download the agconnect-services.plist file.
  4. Copy the agconnect-services.plist file to the project.
  5. Open the CLI and navigate to the location of the Xcode project. Then, create a Podfile. Skip this step if a Podfile already exists. 
    cd project-directory 
pod init
  6. Edit the Podfile to add the pod dependency ‘AGConnectRemoteConfig'. 
    target 'AGC-RemoteConfig-1' do 
   pod 'AGConnectRemoteConfig' 
end
  7. Install the pod and open the .xcworkspace file to view the project.
    pod install

    The following figure shows the result after installation.

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

Sample code:

let label = UILabel() 
label.frame = CGRect(x: 0, y: 80, width: 320, height: 60) 
label.textAlignment = .center 
label.textColor = UIColor.gray 
self.view.addSubview(label) 
 
let button = UIButton(frame: CGRect(x: 50, y: 200, width: 200, height: 40)) 
button.setTitle("GET ONLINE CONFIG", for: .normal) 
button.setTitleColor(UIColor.gray, for: .normal) 
button.backgroundColor = UIColor.systemGroupedBackground 
button.addTarget(self, action: #selector(getConfig), for: .touchUpInside) 
self.view.addSubview(button)

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

When an app is launched, it loads default parameter values. In this codelab, default in-app parameter values are used. Create a PLIST file (for example, remote_config.plist) in the project and set the default value for each parameter.

Sample code:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> 
<plist version="1.0"> 
   <dict> 
      <key>SET_BOLD_KEY</key> 
      <string>false</string> 
      <key>GREETING_KEY</key> 
      <string>Greeting, CodeLaber</string> 
   </dict> 
</plist>
  1. In AppGallery Connect, click My projects, find a project, and select your app for which you have enabled Remote Configuration. Go to Grow > Remote Configuration, and click New parameter.
  2. On the New parameter page, click Add conditional value.

    Click New condition in the Condition drop-down list.

  3. Set Condition for the current language Chinese, for example, to Diff_Lang_CN. Set Language as the filter, select Chinese (zh) as the value, and click Save.
  4. 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. Then, click Save.


  5. On theNew parameterr page, enter the default parameter name and default value. SelectDiff_Lang_CNN from theAdd conditional valuee drop-down list. Set the value to be displayed in Chinese for theGREETING_KEYY parameter. Then selectDiff_Lang_ENN from theAdd conditional valuee drop-down list, and set the value to be displayed in English for this parameter. After the configuration is complete, clickSavee.

    Then, click Release.

  6. 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.
  7. After the parameter is added successfully, click Release again.
  1. Import AGConnectCore to the AppDelegate class of the app, and call AGCInstance.startUp in the didFinishLaunchingWithOptions method for initialization. 
    import AGConnectCore 
 
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { 
   AGCInstance.startUp() 
   return true 
}
  2. Obtain the AGCRemoteConfig instance, apply the in-app parameter values as default values, and enable them to immediately take effect. Fetch the default parameter value based on the key you configured, display the value as text, and set the font and style for it as required. 
    let config = AGCRemoteConfig.sharedInstance() 
config.applyDefaultsPlistFile("remote_config") 
let boldValue = config.valueAsBool(key: "SET_BOLD_KEY") 
let greetValue = config.valueAsString(key: "GREETING_KEY") 
 
if boldValue { 
   label.font = UIFont.boldSystemFont(ofSize: 18) 
}else { 
   label.font = UIFont.systemFont(ofSize: 18) 
} 
label.text = greetValue
  3. Tap GET ONLINE CONFIG. You can call the [AGCRemoteConfig fetch] API to fetch parameter values from the cloud in asynchronous mode. After the API is successfully called, data of the AGCConfigValues class (used to obtain only cloud data) is returned from the cloud. Call the [AGCRemoteConfig apply:] API to make the parameter values take effect. 
    @objc func getConfig() { 
   let config = AGCRemoteConfig.sharedInstance() 
   config.fetch().onSuccess { [self] (result) in 
      guard result != nil else { return } 
      config.apply(result!) 
 
      let boldValue = config.valueAsBool(key: "SET_BOLD_KEY") 
      let greetValue = config.valueAsString(key: "GREETING_KEY") 
 
      if boldValue { 
         label.font = UIFont.boldSystemFont(ofSize: 18) 
      }else { 
         label.font = UIFont.systemFont(ofSize: 18) 
      } 
      label.text = greetValue 
   }.onFailure { (error) in 
      print("fetch fail") 
   } 
}
  1. Start Xcode and click the run button to run your app on a mobile phone or simulator. The in-app parameter value is displayed.
  2. When the system language is English, tap GET ONLINE CONFIG. The English message is displayed.
  3. Change the system language to Chinese and tap GET ONLINE CONFIG again. The Chinese message is displayed.

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