---
title: Get Started
---

## Set up environment

### Prerequisites

- Before building a miniapp, get your Node.js environment ready. Go to the [Node.js](https://nodejs.org/en) website and download the installer.

### Install editor

Before you develop a panel miniapp, download and install the following recommended editors as needed:

- Visual Studio Code (recommended): supports common built-in features, such as formatting and navigation. This editor is subject to a high level of community engagement.
- WebStorm: Highly integrated IDE.
- Sublime Text: a lightweight editor.

### Install app

> If you want to install a specific app version, you can [submit a ticket](https://service.console.tuya.com/8/3/list?source=support_center) on the Tuya Developer Platform to request further support.

**iOS:**

Go to [App Store > SmartLife](https://apps.apple.com/us/app/smart-life-smart-living/id1115101477), or search for `SmartLife` on App Store for iPhones, and download the app.

**Android:**

Go to [Google Play > SmartLife](https://play.google.com/store/apps/details?id=com.tuya.smartlife&hl=en_US), or search for `SmartLife` on app stores for Android, and download the app.

### Install Tuya MiniApp IDE

> Tuya MiniApp IDE can be used to create your miniapp project, and develop, debug, and upload the miniapp.

Go to [Tuya MiniApp IDE](/en/miniapp/devtools/tools/download) and download the latest version.

### Install NVM

> Node.js version manager (NVM) helps you manage multiple Node.js versions. If this is your first installation, set up the environment variable as per the instruction.

1. Open the Terminal.

2. Install the [NVM](https://github.com/nvm-sh/nvm).

   ```shell
   	curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash
   ```

3. Enter `nvm -v` to confirm that NVM is installed as expected. If a version number is returned, the installation is successful. Make sure you are using Node.js v18.0.0 or later. If the error `nvm: command not found` is returned, follow the instructions in FAQs to fix the error.

4. Enter `nvm install 18.20.8` to install Node.js v18.20.8.

5. (Optional) Run the command `nvm use` to switch among Node.js versions. We recommend that you install Node.js v18.20.8 or later.

   ```shell
   	nvm use 18.20.8
   ```

### Install Yarn

> If you have installed Yarn, or used Node.js Package Manager (npm), performant npm (pnpm), or other dependency manager tools, you can skip this section.

1. Open the Terminal.

2. Enter `npm install -g yarn` to install Yarn.

3. (Optional) Enter `yarn -v` to confirm that Yarn is installed as expected.

## Create product

### Concepts

> A control panel runs on an app and represents a product that is an abstraction of a smart device. Before you create a product, you can learn about the relationship between control panels, products, and devices.

1. A `control panel` is a graphical user interface (GUI) application that can run on the `SmartLife app` and Tuya-enabled `OEM apps` to control `smart devices` and display real-time `device status`.
2. A `product` links a `control panel` with a `smart device`. A product describes the name, features, and data points (DPs) of the smart device displayed on the app.
3. A `smart device` is embedded with a `network module` provided by Tuya. The device is labeled with a QR code. Users can scan the QR code with the `SmartLife app`, and get and install the `control panel` of the device on the app.
4. The following figure shows the relationship between `control panels`, `products`, and `smart devices`.

   <Image src='/images/panel/panel.en-US.png?t=1'/>

### Procedure

> A product defines the DPs of the associated panel and device. Before you develop a panel, you must create a product, defines the required DPs, and then implement these DPs on the panel.

The steps to create a product on the Tuya Developer Platform:

1. Register and log in to the [Tuya Developer Platform](https://iot.tuya.com).

2. In the left navigation pane, choose [Product > Development](https://iot.tuya.com/pmg/solution) and then click **Create**. Suppose you want to create a home appliance product. Select **Standard Category** > **Large Home Appliance** > **Air Conditioner**.

   <Image src='https://images.tuyaus.com/content-platform/hestia/16678842701370711234c.gif'/>

3. Enter a product name, keep other default options, and then click **Create**.

4. After the product is created, go to the development page of the smart product and enter the **Function Definition** step. Click **Add** in the **Standard Functions** section to see a list of available standard functions. Click **Select All** > **OK** to have standard functions configured for the product.

   <Image src='https://images.tuyaus.com/content-platform/hestia/1667884290ff3448b48b0.gif'/>

- For more information about how to create a product, see [Create Products](https://developer.tuya.com/en/docs/iot/create-product?id=K914jp1ijtsfe).
- For more information about product functions, see [Product Functions](https://developer.tuya.com/en/docs/iot/define-product-features?id=K97vug7wgxpoq).

## Initialize project

### Prerequisites

You must register an account with the Tuya Developer Platform and use this account to log in to the Tuya MiniApp Developer Platform before you can create a miniapp. If you do not have an account, [register now](https://auth.tuya.com/register?from=https%3A%2F%2Fiot.tuya.com%2Fminiapp%2F).

### Create panel miniapp

1. Log in to the [Tuya MiniApp Developer Platform](https://iot.tuya.com/miniapp/) to see the page that lists existing **miniapps**.
2. Click **Create** on this page.
3. Set the name, logo, type, and other required information about the miniapp, and click **OK**. **Miniapp Type** must be set to **Panel Miniapp**.

   <Image src='https://images.tuyaus.com/content-platform/hestia/1667884305e84b1e65b26.gif'/>

### Initialize project

1. Open Tuya MiniApp IDE, log in to it with the account of the Tuya Developer Platform, and then create a miniapp project.
2. Set the following information as instructed, click **OK**, and then proceed to select a project template.

   - **Project Path**: the directory in which the project will be located.
   - **Project Name**: the name of the project.
   - **Link MiniApp**: Select the miniapp created on the Tuya MiniApp Developer Platform.

     > The account logged in to Tuya MiniApp IDE must have developer permissions granted in the Tuya MiniApp Developer Platform and be associated with the miniapp. This allows the account to develop, debug, and upload the code with Tuya MiniApp IDE.

   - **Link Product**: the product to be linked with the current panel miniapp. This is the product created in the **Create Product** step in this quick start guide.

      <Image src='https://images.tuyaus.com/content-platform/hestia/16902787484abec01a843.png'/>

3. Select a preset template suitable for your panel miniapp scenario and click **Create**.

   <Image src='https://images.tuyaus.com/content-platform/hestia/16902787764e5067886be.png'/>

4. Then, you are automatically navigated to the miniapp development and debugging window. Now, your project is initialized.

   <Image src='https://images.tuyaus.com/content-platform/hestia/16902788107f6e25f756d.png'/>

## Develop and debug

### Start project

Navigate to the project directory. `Tuya MiniApp IDE` will automatically install dependencies and start the panel miniapp.

> After the project is imported, if `Tuya MiniApp IDE` does not automatically install dependencies and start the panel miniapp, check if the parameter `devMode: ray` exists in `project.tuya.json`.

```json
{
  "devMode": "ray"
}
```

### Enable panel tools

After a project is started, your program is automatically compiled in real time. However, a live preview of the UI layout is unavailable on Tuya MiniApp IDE.

The miniapp requires the virtual device plugin for live preview, so you must enable this plugin first.

1. In the top right corner of Tuya MiniApp IDE, click `Account` to show a QR code. Open the SmartLife app and scan the QR code to grant your account access to the miniapp.

   <Image src='https://images.tuyaus.com/content-platform/hestia/169027833549d5c811479.png'/>

2. Click `Plugins > Panel Tools` at the top of Tuya MiniApp IDE to display the list of devices. The panel tools support three debugging modes: `debug virtual device`, `debug real device`, and `debug device group`.

   <Image src='/images/quick-start/dev-debug-device-list.en-US.png'/>

Debug virtual device

Choose the device you want to debug from the list of devices labeled as `Virtual Device`. If no virtual device is available, click `Add virtual devices` in the top right corner to add one.

<Image src='/images/panel/virtual-device-bind.en-US.png'/>

Use the SmartLife app to scan the code. The following screen will appear, with the panel miniapp reloaded. You can proceed to develop your panel miniapp.

> Note that after you scan the QR code, the default panel associated with the current product will open instead of the miniapp being developed. To debug the miniapp on the app, see the Remote Debugger section.

<Image src='/images/panel/virtual-device-intro.en-US.png'/>

Debug real device

If you have added a real device to the app, it will appear in the list of devices labeled as `Real Device`. Choose a device to open the debugging interface. If no real device is available, add one using the SmartLife app. The plugin supports protocols including Wi-Fi, Zigbee, mesh, Bluetooth mesh, and beacon, as well as TuyaLink-based devices.

<Image src='/images/quick-start/dev-debug-device-list.en-US.png'/>

Debug device group

If you have created a device group on the app, it will appear in the list of devices labeled as `Group`. Choose a group to open the debugging interface.

Differences in three debugging modes

- Virtual devices can simulate status reporting after receiving commands from the control panel, but this feature does not apply to real devices or groups.
- Virtual devices can be unbound from the plugin and added to another account, but this feature does not apply to real devices or groups.
- Virtual devices can simulate status reporting in online status, but this feature does not apply to real devices or groups.

### Remote debugger

> If the real app environment is not required in your current development stage, you can skip this section.

The built-in plugin in Tuya MiniApp IDE is v1.4.0. If you are using the plugin v1.4.0 or later, you can open the debugging interface by clicking the third button in the menu bar without specifying any parameters. There is also no need to modify the `deviceId` or `groupId` parameter. However, this does not apply to devices that support Bluetooth only.

<Image src='/images/quick-start/dev-debug-device-list.en-US.png'/>

### Debug development and trial versions

You can enable the `debug mode` on the app and then tap the `vConsole` button on the panel interface to view logs for troubleshooting.

Call [changeDebugMode](/en/miniapp/develop/ray/api/other/changeDebugMode) to enable the debug mode on the app. Make sure to disable the debug mode before the app goes live.

<div>
<Image src='/images/quick-start/vConsole1.en-US.jpg' width="200px" />
<Image src='/images/quick-start/vConsole2.en-US.jpg' width="200px"  />
</div>

## Test miniapp

### Upload program

Click **Upload** in the top right corner of Tuya MiniApp IDE, enter the version number and remarks, and then upload the local program to the cloud.

<Image src='/images/panel/basic-settings.en-US.png'/>

### Complete required information

1. After the program is uploaded, make sure the current panel miniapp has basic information and settings configured. For this purpose, go to the [Tuya MiniApp Developer Platform](https://iot.tuya.com/miniapp/) and tap the target miniapp on the list.

2. Go to **Basic Settings**, set **Miniapp Logo**, **Miniapp Name**, and other basic information, and enter the **display names** and **preview images**, respectively in Chinese and English, to be displayed on the Tuya Developer Platform.

   <Image src='/images/panel/basic-settings.en-US.png'/>

### Set as trial version

1. Go to **Versions** and find the uploaded version.

2. Click **Set as Trial Version** and then **OK**. The **Trial QR code** button will appear. Before you scan the QR code, set the allowlist first.

   <Image src='https://images.tuyaus.com/content-platform/hestia/166755598396d9a9875db.png'/>

### Add test account to allowlist

Go to **Allowlist** and click **Add**. In the dialog box that appears, select the target app, set the **app account** and **remarks**, and then click **OK**.

<Image src='https://images.tuyaus.com/content-platform/hestia/1667555999bbb1b5d4f00.png'/>

### Scan to test miniapp

1. Go to **Versions**, find the trial version, and then click **Trial QR Code**.

2. Get the required device ID, and enter it in the **QR Code of Trial Version** dialog box that appears. Note that you need to choose between a **virtual device ID** and a **real device ID** and enter the required device ID.

   > For more information about getting the device ID, see [Develop and Debug](/en/miniapp/develop/miniapp/guide/start/quick-start#how-can-i-debug-using-a-plugin-earlier-than-v140).

3. Use the allowlisted account of the SmartLife app to scan the QR code to start testing. Note that the virtual device or real device must exist in the home that is managed on the current app before you can access the device panel.

## Submit for review and release

### Submit for review

1. Log in to the [Tuya MiniApp Developer Platform](https://iot.tuya.com/miniapp) and click the target miniapp to go to **Versions**.

2. On the **Dev Version** tab, find the target version and click **Submit for Review**.

### Release approved version

1. This version is moved to the **Review Version** tab and appears with the review status.

2. The approved version is moved to the **Official Version** tab. You can click **Start Service** to make this version available to users, or click **Pause Service** to make it unavailable to users.

### Link product

1. After the official version is available to users, go to the [Tuya Developer Platform](https://iot.tuya.com/).

2. Find the product to be linked with the miniapp, go to the **Device Interaction** step of product development, and then click **Change Panel**.

   <Image src='/images/panel/change-panel.en-US.png'/>

3. Select **Self-Developed Panel** to find the newly-released panel miniapp. Hover over the panel miniapp and click **Select**.

   <Image src='/images/panel/self-developed.en-US.png'/>

### Perform regression test

1. On the Tuya Developer Platform, go to the **Device Interaction** step of product development, use the SmartLife app to scan the QR code, and then add the virtual device.

2. Now, the app account outside the allowlist can access the virtual device of the product or the real device paired with the app. Then, the newly-released panel miniapp will appear for device control.

## FAQs

### Why does the error `nvm: command not found` occur after entering `nvm -v`?

The possible reason is that the path where NVM is located is not specified as an environment variable. You can perform the following steps and set the environment variable:

1. Open the Terminal.

2. Enter `cd ~ ` to go to the Home directory of the current account.

3. Run the following command to open the configuration file.

   - Windows

     ```shell
     open .bash_profile
     ```

   - macOS

     ```shell
     open .bashrc
     ```

4. Copy and paste the following code block to the configuration file and save the file.

   ```shell
   export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
   ```

5. Enter `source .bash_profile` or `source .bashrc` to reload the configuration file.

6. Enter `nvm -v` to view the NVM version and check whether the installation is successful.

For more information, see [NVM#Additional Notes](https://github.com/nvm-sh/nvm#additional-notes).

### What are the differences between Tuya MiniApp IDE debugging and remote debugger?

Tuya MiniApp IDE-based debugging relies on a virtual device generated with the dedicated plugin. Basic hardware and device capabilities required by the panel miniapp are preset in the virtual device. This allows you to quickly design the UI layout in Tuya MiniApp IDE. However, you cannot access all hardware or device capabilities available on the app, for example, QR code scanning, phone calls, and device connection. You can use these two debugging methods according to your needs.

1. Tuya MiniApp IDE-based debugging: During the initial development stage, this debugging method helps you quickly build the UI layout and implement basic functional logic.
2. Remote debugger: During the medium and later development stages, after basic functional logic is finished, this debugging method helps you test the capabilities available on the app.

### How can I fix the issue of the app not supporting the miniapp?

The app does not support the **base library** or **Kit package** that the miniapp depends on. See [API Overview](/en/miniapp/common/desc/tech-stack/api) and check for version compatibility.

### How can I debug using a plugin earlier than v1.4.0?

The remote debugger allows you to debug the miniapp that controls a virtual device or real device on the real app. Perform the following steps:

1. Get the device ID (`deviceId`) in either of the following ways as needed:

- **Tuya MiniApp IDE:**

  - Go to the page for debugging with Virtual Device, find the **deviceId** field, and then click the **Copy** icon next to the field to copy the field value.

     <Image src='https://images.tuyaus.com/content-platform/hestia/169027852810e2124a07f.png'/>

- **Tuya Developer Platform:**

  - Create a product. If the product has been created, skip this step.
  - Go to **Product** > **Device Debugging**.
  - In the **Real Device Debug** or **List of Virtual Devices** section, copy the device ID for debugging.
  - If no device is available for debugging, click **Add Real Device Debug** or **Add Virtual Device** to add a device for debugging. Then, copy the respective device ID.

     <Image src='/images/panel/virtual-device.en-US.png'/>

- **Mobile app:**

  - Open the SmartLife app or an OEM app, and go to the homepage.
  - Tap the target device.
  - Tap the meatballs menu (**⋯**) icon in the top right corner of the page to enter the device setting page.
  - Tap **Device Information**.
  - Find the **Virtual ID** field, which is the **deviceId**. Tap **Copy** next to this field to get the **deviceId**.

     <Image src='https://images.tuyaus.com/content-platform/hestia/1690282482001c337b6b6.gif'/>

1. In the top of Tuya MiniApp IDE, click `Compile Parameters`, enter the obtained `deviceId` or `groupId` in the format as shown in the following figure to set launch parameters. `groupId` is used for debugging a device group only.

   <Image src='https://images.tuyaus.com/content-platform/hestia/1690281775a70bb55fc3f.png'/>

2. In the miniapp, you can call [getLaunchOptionsSync](/en/miniapp/develop/ray/api/base/container/getLaunchOptionsSync) or [getLaunchOptions](/en/miniapp/develop/ray/api/base/container/getLaunchOptions) to get the launch parameters.

3. After QR code scanning with the SmartLife app, the following debugging tool appears to show the connected state. Now, real-app debugging is finished.

   <Image src='https://images.tuyaus.com/content-platform/hestia/16670520714eefa4ded4d.jpg'/>