---
title: Preface
summary: Overview of the Panel MiniApp solution, covering core features (JS/TS development, IDE debugging, IoT integration, multi-platform distribution), its strong association with products, device list invocation entry, built-in device environment, and the complete workflow from creation to launch.
---

# Solution Introduction

The Panel MiniApp is a lightweight development solution designed specifically for smart device control panels. Based on the MiniApp framework, it supports cross-platform development and powerful IoT functions, helping developers quickly and cost-effectively build smart device management solutions.

## Core Features

- **Easy to Use**: Developed using `JavaScript` / `Typescript`, similar to `H5` page development, easy to get started.
- **Device Tools**: Provides integrated `IDE` and device debugging tools, supporting the entire development process from coding to testing, improving efficiency.
- **IoT Integration**: Built-in device control `API` and `SDK`, simplifying `IoT` function integration for smart management.
- **Multi-Platform Distribution**: Write once, adapt to `Android` and `iOS`, saving development time.

## Differences and Constraints

### Strong Association with Products

The Panel MiniApp is designed specifically for smart device control and is closely associated with device products. Developers need to bind the MiniApp with the product on the Tuya developer platform, as shown in the image below.

<Image
  src='/images/panel/panel-solution-related.en-US.png'
  alt='Binding process of Panel MiniApp and product'
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
    maxWidth: '375px',
    maxHeight: '667px',
  }}
/>

### Different Invocation Entry

The Panel MiniApp is invoked through the device list entry and is strongly associated with smart devices. Users and developers need to enter the MiniApp from the device list, as shown in the image below. During the development phase, it must be entered from the device list entry in the IDE's device tools, and similarly, in the App environment, it must be entered from the device list entry.

<Image
  src='https://images.tuyacn.com/content-platform/hestia/1729068192d8ebbf0f183.png'
  alt='Device list entry illustration'
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
    maxWidth: '375px',
    maxHeight: '667px',
  }}
/>

### Built-in Device Environment

The Panel MiniApp relies on a virtual or real device environment, integrating device ID, group ID, and multi-language support for products. Below is sample code for obtaining the device ID and multi-language settings:

```typescript
import { getLaunchOptionsSync } from '@ray-js/ray';

// Obtain the device ID (single device)
const { deviceId } = getLaunchOptionsSync()?.query ?? {};

// Obtain the group ID (group device)
const { groupId } = getLaunchOptionsSync()?.query ?? {};

// Obtain the corresponding multi-language value for the product or group
Strings.getDpLang('switch_led');
```

## Solution Process

<Callout type="info" emoji="ℹ️">
  For a complete development process, please refer to [Quick Start - Panel MiniApp](/en/miniapp/develop/ray/guide/start/quick-start).
</Callout>

<Image
  src='/images/panel/panel.en-US.png?t=1'
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
    maxWidth: '375px',
    maxHeight: '667px',
  }}
/>

- **Create Product**: First, we need to create a product on the Tuya Developer Platform, where panel development engineers, hardware engineers, and product designers define the functionality points.

- **Development and Debugging**: Next, the panel development engineer develops the Panel MiniApp around the operation functionality points. During the development phase, the Tuya MiniApp IDE provides a virtual device for debugging. Meanwhile, the hardware engineer also develops embedded programs around the functionality points.

- **Experience Testing**: In the joint debugging phase, the Panel MiniApp releases a trial version, which connects to real devices via the SmartLife App for testing (or utilizes the real device debugging feature).

- **Review and Launch**: After testing is complete, the Panel MiniApp can be submitted for review and officially released. Then, you can bind the product and Panel MiniApp on the Tuya Developer Platform, completing the entire Panel MiniApp development process.