Skip to main content
Back to LearnTuyaOpen IDE ยท Practice 3

Mini-app panel

Build a device control panel that runs in the phone app and cooperates with the firmware over DP (Data Points) โ€” create, bind, preview, and publish.

Intermediate20 minIDE

This practice turns to the interface โ€” you use Tuya mini-app technology to build a device control panel that runs inside the phone app and talks to the firmware through DP (Data Points). The two sides cooperate over DP: the firmware defines and reports DPs, and the panel reads and sends DPs.

How firmware and panel cooperate over DPโ€‹

Firmware and panel are two independent programs that communicate through DP:

  • Firmware side: define DPs in TuyaOpen IDE (for example switch_led) and report them.
  • Panel side: use the mini-app API โ€” publishDps to send, onDpDataChange to listen โ€” to control the device.
note

Prerequisite: at least one device that can reach the Tuya Cloud. Build one first in Practice 2.

Step 1: Account and productโ€‹

  1. Open Mini App Panel Dev and follow the three steps on the right.

    Mini-app panel development โ€” three steps
    Mini-app panel development โ€” three steps

  2. After Practice 2 you are already logged in and have a bound product. Now go to the developer platform to create a mini-app for binding.

    Create a mini-app on the developer platform
    Create a mini-app on the developer platform

  3. Create a new mini-app panel.

    Create a mini-app panel
    Create a mini-app panel

  4. Select the panel mini-app type.

    Select the panel mini-app type
    Select the panel mini-app type

  5. After creating it, close the page and return to the IDE, then click Refresh. You see the panel mini-app you just created on the developer site โ€” click Select.

    Bind the panel mini-app
    Bind the panel mini-app

Step 2: Debug and previewโ€‹

  1. Click Build MiniApp on the right to build the mini-app and render the panel. The panel appears below on a virtual device.

    Mini-app debug and preview
    Mini-app debug and preview

  2. Click the virtual panel on the left to interact; the right side shows the DP data for the virtual device interaction.

    Virtual panel and DP interaction
    Virtual panel and DP interaction

  3. Now you can personalize the mini-app code. After editing, rebuild and re-render to preview. Installing the IDE-provided skills speeds this up โ€” see Vibe Coding skills.

Step 3: Upload and publishโ€‹

  1. Click Upload to Cloud on the right to upload the mini-app. Once it uploads, go to the Tuya Developer Platform to submit it for review and publish.

    Upload the mini-app to the cloud
    Upload the mini-app to the cloud

  2. Open Basic settings, fill in the mini-app description and English display name, and upload a preview image.

    Panel basic settings โ€” intro and preview image
    Panel basic settings โ€” intro and preview image

  3. Open Version management and submit for review.

    Version management โ€” submit for review
    Version management โ€” submit for review

  4. Open the review version and wait. After a few minutes, refresh to see it approved, then publish.

    Review approved โ€” publish
    Review approved โ€” publish

Step 4: Bind the mini-app to the productโ€‹

After developing the mini-app, to use the panel in the phone app you need to bind it to the product.

  1. Back in the IDE, open Project Details and click Rebind MiniApp.

    Rebind MiniApp in Project Details
    Rebind MiniApp in Project Details

  2. Click Change Panel and choose the custom panel.

    Change the custom panel in the IDE
    Change the custom panel in the IDE

  3. Select the custom panel โ€” you can now see the published mini-app panel.

    Published custom panel
    Published custom panel

  4. You can now see the latest panel in the SmartLife app.

Where to go deeperโ€‹

Want toGo here
Speed up development with AIVibe Coding skills
Build your own cloud AgentAgent Development Guide
Build device control panelsPanel Mini-App portal
Learn the mini-app technology / APITuya Mini-App docs
Build a panel with no codePanel Studio