Device Control UI BizBundle

Overview

Device Control UI BizBundle is a panel control solution that applies to Tuya-enabled device panels. This solution frees you from coding and maintenance and enables updates on the fly. Based on Smart Life App SDK, the Device Control UI BizBundle provides end-to-end capabilities to load and display React Native panels and implement device control. You integrate with the UI BizBundle to serve your business without additional development.

Preparation

• Integrate Smart Life App SDK for Android into your project with Android Studio and add the framework of the UI BizBundle to your project. For more information, see Integrate with Framework.

• In addition, you can download the demo of the UI BizBundle on GitHub, modify the Panel module in the demo to debug the Device Control UI BizBundle, and refer to the settings of the app module.

Configure integration

Required configuration

sdk_version description

• When the sdk_version is 2.0.0-cube.2, make sure the Cube deployed in the cloud is 2.0 or later.
• When the sdk_version is 2.1.0-cube.1, make sure the Cube deployed in the cloud is 2.1 or later.

dependencies {
    // Device Control UI BizBundle: required
    implementation 'com.thingclips.smart:thingsmart-bizbundle-panel:2.0.0-cube.2'
    // Basic extension capabilities: required
    implementation "com.thingclips.smart:thingsmart-bizbundle-basekit:${sdk_version}"
    // Business extension capabilities: required
    implementation "com.thingclips.smart:thingsmart-bizbundle-bizkit:${sdk_version}"
    // Device control capabilities: required
    implementation "com.thingclips.smart:thingsmart-bizbundle-devicekit:${sdk_version}"
}

Optional configuration

• Multimedia extension capabilities

   implementation "com.thingclips.smart:thingsmart-bizbundle-mediakit:2.0.0-cube.2"
  

• Home service dependencies

  Each home is the largest unit to manage smart scenes. Home services include management of homes, members, and rooms. It provides the basis to manage paired devices. Users can assign devices to rooms for homes. Home members can be granted different permissions on preferred operations.

   implementation "com.thingclips.smart:thingsmart-bizbundle-family:2.0.0-cube.2"
  

• Dependency of IPC panel

  This dependency contains all dependencies that are required to load an IPC panel. If you do not require IPC panels, we recommend that you do not add this dependency. Otherwise, the unnecessary dependency might increase the size of the Android package (APK) and raise the possible risk of resource conflicts.

   implementation ('com.thingclips.smart:thingsmart-bizbundle-camera_panel:2.0.0-cube.2'){
      exclude group: 'com.squareup.okhttp3', module: 'okhttp'
      exclude group: 'com.thingclips.smart', module: 'thingsmart-ipc-camera-sdk-api'
      exclude group: 'com.thingclips.smart', module: 'thingsmart-ipc-camera-base'
      exclude group: 'com.thingclips.smart', module: 'thingsmart-ipc-yuv-monitor'
      exclude group: 'com.thingclips.smart', module: 'thingsmart-p2p-sdk'
      exclude group: 'com.thingclips.smart', module: 'thingsmart-video-codec-sdk'
      exclude group: 'com.thingclips.smart', module: 'thingsmart-p2p-sdk-api'
  
  }
  

• Dependencies of map capabilities

  The Device Control UI BizBundle includes APIs respecting map capabilities. Underlying third-party libraries are integrated to implement these capabilities.

  • Map extension capabilities

    implementation "com.thingclips.smart:thingsmart-bizbundle-mapkit:2.0.0-cube.2"
    

  • Dependencies of AutoNavi

    If your business is deployed inside mainland China, you must depend on AutoNavi to implement map extension capabilities. Therefore, if your app is developed based on the Device Control UI BizBundle and will be launched on app stores inside mainland China, use the dependencies of AutoNavi.

    implementation 'com.thingclips.smart:thingsmart-react-native-amap:4.5.0-rc.1'
    implementation 'com.amap.api:search:7.9.0'
    implementation 'com.amap.api:3dmap:8.1.0'
    

  • Dependencies of Google Maps

    If your business is deployed outside mainland China, you must depend on Google Maps to implement map extension capabilities. Therefore, if your app will be launched on app stores outside mainland China, use dependencies of Google Maps.

    implementation 'com.thingclips.smart:thingsmart-react-native-googlemap:4.5.0-rc.1'
    implementation 'com.google.android.gms:play-services-maps:18.0.0'
    

Configure environment

• Obfuscate the code

  Configure obfuscation in proguard-rules.pro of the project to ensure normal running of the UI BizBundle.

  # react-native
  -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip
  -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip
  -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters
  # Do not strip any method/class that is annotated with @DoNotStrip
  -keep @com.facebook.proguard.annotations.DoNotStrip class *
  -keep @com.facebook.common.internal.DoNotStrip class *
  -keepclassmembers class * {
      @com.facebook.proguard.annotations.DoNotStrip *;
      @com.facebook.common.internal.DoNotStrip *;
  }
  -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * {
      void set*(***);
      *** get*();
  }
  -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; }
  -keep class * extends com.facebook.react.bridge.NativeModule { *; }
  -keepclassmembers,includedescriptorclasses class * { native <methods>; }
  -keepclassmembers class *  { @com.facebook.react.uimanager.UIProp <fields>; }
  -keepclassmembers class *  { @com.facebook.react.uimanager.annotations.ReactProp <methods>; }
  -keepclassmembers class *  { @com.facebook.react.uimanager.annotations.ReactPropGroup <methods>; }
  -dontwarn com.facebook.react.**
  -keep class com.facebook.** { *; }
  -keep,includedescriptorclasses class com.facebook.react.bridge.** { *; }
  
  # AutoNavi
  -dontwarn com.amap.**
  -keep class com.amap.api.maps.** { *; }
  -keep class com.autonavi.** { *; }
  -keep class com.amap.api.trace.** { *; }
  -keep class com.amap.api.navi.** { *; }
  -keep class com.autonavi.** { *; }
  -keep class com.amap.api.location.** { *; }
  -keep class com.amap.api.fence.** { *; }
  -keep class com.autonavi.aps.amapapi.model.** { *; }
  -keep class com.amap.api.maps.model.** { *; }
  -keep class com.amap.api.services.** { *; }
  
  # Google Play Services
  -keep class com.google.android.gms.common.** {*;}
  -keep class com.google.android.gms.ads.identifier.** {*;}
  -keepattributes Signature,*Annotation*,EnclosingMethod
  -dontwarn com.google.android.gms.**
  
  # MPAndroidChart
  -keep class com.github.mikephil.charting.** { *; }
  -dontwarn com.github.mikephil.charting.**
  
  -keep class com.thingclips.**.**{*;}
  -dontwarn com.thingclips.**.**
  
  -keep,includedescriptorclasses class com.facebook.v8.** { *; }
  
  #TTT
  -keep class * extends com.thingclips.android.universal.base.ThingBaseUniPlugin { *; }
  -keep class com.thingclips.smart.plugin.*.bean.**{ *; }
  

• React Native environment configuration

  The UI BizBundle includes the open source React Native framework (v0.59.10).

  • If your Android project does not integrate with React Native, follow the procedure in this topic to integrate with the UI BizBundle.
  • If your Android project has integrated with React Native, perform the following steps to check whether the UI BizBundle can be integrated:
    • If React Native has been integrated and its version is later than v0.59.10, the UI BizBundle cannot be integrated due to version incompatibility.
    • If React Native has been integrated and its version is later than v0.51 and equal to or earlier than v0.59.10, the Tuya panels cannot be accessed as expected due to the repeated uses of the React Native library. Use either of the following methods to troubleshoot the problem:
      1. Remove React Native from your Android project and use React Native v0.59.10 that the UI BizBundle depends on.
      2. Rename React Native that is integrated with your Android project to avoid the repeated React Native library.

  If both methods failed, the UI BizBundle cannot be integrated.

Description

Open a device panel

• Navigate to a device panel, without any toast displayed on the app

  API description

  Implements navigation to a device panel. If the specified device does not exist, no toast appears, and users are navigated to the previous page.

      goPanel(Activity activity, DeviceBean deviceBean);
  

  Parameters

  Parameter	Description
  activity	The context of the current page.
  deviceBean	Device information

  Example

    AbsPanelCallerService service = MicroContext.getServiceManager().findServiceByInterface(AbsPanelCallerService.class.getName());
    service.goPanel(PanelActivity.this, deviceBean);
  

• Navigate to a device panel, with a toast displayed on the app

  API description

  Implements navigation to a device panel. If the specified device does not exist, a toast appears.

  goPanelWithCheckAndTip(Activity activity, String devId)
  

  Parameters

  Parameter	Description
  activity	The context of the current page.
  devId	The device ID that can be obtained from the Smart Life App SDK.

  Example

    AbsPanelCallerService service = MicroContext.getServiceManager().findServiceByInterface(AbsPanelCallerService.class.getName());
    service.goPanelWithCheckAndTip(PanelActivity.this,devId);
  

Open a group panel

• Navigate to a group panel, without any toast displayed on the app

  API description

  Implements navigation to a device group. By default, stabilization is enabled and the stabilization threshold is 1.5s. If the specified device group does not exist, no toast appears.

      goPanel(Activity activity, GroupBean groupBean, boolean isAdmin);
  

  Parameters

  Parameter	Description
  activity	The context of the current page.
  groupBean	The information about the group.
  isAdmin	Specifies whether the user is an administrator. If the user is not an administrator, when the group does not contain any device, only a toast appears. If the user is an administrator, the user will be guided to group management.

  Example

    AbsPanelCallerService service = MicroContext.getServiceManager().findServiceByInterface(AbsPanelCallerService.class.getName());
    service.goPanel(PanelActivity.this, groupBean, false);
  

• Navigate to a panel, with a toast displayed on the app

  API description

  Implements navigation to a device panel. If the specified device does not exist, a toast appears.

    goPanelWithCheckAndTip(Activity activity, long groupId, boolean isAdmin);
  

  Parameters

  Parameter	Description
  activity	The context of the current page.
  groupId	The groupId of the device. The value can be obtained from the Smart Life App SDK.
  isAdmin	Specifies whether the user is an administrator. If the user is not an administrator, when the group does not contain any device, only a toast appears. If the user is an administrator, the user will be guided to group management.

  Example

  AbsPanelCallerService service = MicroContext.getServiceManager().findServiceByInterface(AbsPanelCallerService.class.getName());
  service.goPanelWithCheckAndTip(PanelActivity.this, groupId,true);
  

Close a device control page

ThingSmartSdk.getEventBus().post(new PageCloseEventModel());

Clear cache

During the process of loading a panel, the panel file is stored in the current app storage directory. When the panel is opened next time, this file will be loaded from the cache. If the content of the panel file package is modified, you must clear the cache first, and then reload the new panel file package. This allows the content changes to take effect.

Example

ClearCacheService service = MicroContext.getServiceManager().findServiceByInterface(ClearCacheService.class.getName())
if (service != null) {
    service.clearCache(PanelActivity.this);
}

Example

You can get tuya-ui-bizbundle-android-demo on GitHub.

FAQs

Why does the system return the error message The current version is unavailable. Please update the app on the app store during the process of opening a device panel?

Check whether com.thingclips.smart.paneloutside.RNVersionPipeline is configured in the module_app.json file of your project.

• If it is not configured, add the pipeline configuration in PIPE_LINE_APPLICATION_SYNC.

• If it is configured, check whether the configuration is added to the correct location.

  "PIPE_LINE_APPLICATION_SYNC": [
      ...
      "com.thingclips.smart.paneloutside.RNVersionPipeline"
  ]
  

Why was a GIF image not animated in a device panel?

The following latest versions of dependencies can be added to the project:

  implementation 'com.facebook.fresco:animated-drawable:2.6.0'
  implementation 'com.facebook.fresco:animated-webp:2.6.0'
  implementation 'com.facebook.fresco:animated-gif'

Why were certain features of the Device Control UI BizBundle unavailable in the release package?

Check whether the obfuscation is configured correctly.

A device panel could not be opened and used. How can I deal with this problem?

After the Device Control UI BizBundle is integrated, the home services must be implemented. Otherwise, the device panel cannot be opened as expected.

  AbsBizBundleFamilyService familyService = MicroServiceManager.getInstance().findServiceByInterface(AbsBizBundleFamilyService.class.getName());
  familyService.shiftCurrentFamily(homeBean.getHomeId(), homeBean.getName());