Device Control UI BizBundle

Overview

Device Control UI BizBundle for Android is a panel control solution that applies to ‘Powered by Tuya’ device panels. This solution frees you from coding and maintenance and enables updates on the fly. Based on Tuya Smart Life App SDK for Android, the 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.

Integration instruction

Prerequisites

Tuya Smart Life App SDK for Android is integrated into your project with Android Studio. The framework of the Device Control UI BizBundle is added to your project. For more information, see Integrate with Framework.

In addition, you can download the demo of the UI BizBundle, and modify the Panel module in the demo to debug the Device Control UI BizBundle.

Configure features

Required configuration

dependencies {
    implementation 'com.tuya.smart:tuyasmart-bizbundle-panel:4.2.0-33'
}

Optional configuration

• Map dependencies

  The Device Control UI BizBundle includes APIs respecting map capabilities. Underlying third-party libraries are integrated to implement these capabilities. For the services deployed inside mainland China, the map capabilities depend on by AutoNavi. For the services in other countries, they depend on Google Maps. AutoNavi is unavailable outside mainland China and Google Maps is unavailable inside mainland China. 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. If your app will be launched on Google Play, use dependencies of Google Maps. Both types of dependencies are mutually exclusive and cannot be used together.

  Dependencies of AutoNavi

    implementation 'com.tuya.smart:tuyasmart-react-native-amap:3.35.5-rc.4'
    implementation 'com.amap.api:search:7.9.0'
    implementation 'com.amap.api:navi-3dmap:8.0.0_3dmap8.0.0'
  

  Dependencies of Google Maps

    implementation 'com.tuya.smart:tuyasmart-react-native-googlemap:3.35.5-rc.2'
    implementation 'com.google.android.gms:play-services-maps:17.0.0'
  

• 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.tuya.smart:tuyasmart-bizbundle-camera_panel:4.2.0-22'
  

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.tuya.**.**{*;}
-dontwarn com.tuya.**.**

-keep,includedescriptorclasses class com.facebook.v8.** { *; }

#TTT
-keep class * extends com.tuya.android.universal.base.TYBaseUniPlugin { *; }
-keep class com.tuya.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.

Usage instruction

Before the Device Control UI BizBundle is used, make sure required resources are imported and the project is initialized, as instructed in Integrate with Framework. Otherwise, the UI BizBundle cannot be used as expected. The configurations of the app module in the demo of the UI BizBundle are provided for your reference.

Open a device panel

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	The 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 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 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

TuyaSmartSdk.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);
      }

FAQs

Q: 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.tuya.smart.panel.base.RNVersionPipeLine is configured in the module_app.json file of your project.

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

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

  "PIPE_LINE_BUSINESS_PIPELINE_APPLICATION_START": [
      ...
      "com.tuya.smart.panel.base.RNVersionPipeLine"
  ],
  "PIPE_LINE_APPLICATION_SYNC": [
      "com.tuya.smart.panel.base.RNVersionPipeLine"
      ...
  ],
  

Q: 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'

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

Check whether the obfuscation is configured correctly.

Q: 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 service 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());

Others

Download the sample code.