---
title: 快速开始
summary: 5 分钟快速创建激光扫地机基础项目，包含环境搭建、项目模板及地图展示示例代码。
---

## 快速开始

本指南将帮助你在 5 分钟内创建一个可以控制激光扫地机的基础项目。

### 环境搭建

确保你已经完成了涂鸦小程序的基础环境搭建，包括：

- 安装 Node.js（推荐 v14+）
- 安装 Ray 开发工具
- 完成涂鸦开发者账号注册

### 项目创建

使用项目模板快速创建项目：

#### 项目模板

项目模板是为了降低开发者搭建项目的难度，将常见的品类和常见能力进行了整理并对外提供了相应的项目源码。

**获取模板：**

- [模板文档](https://developer.tuya.com/cn/miniapp-codelabs/codelabs/panel-robot-sweeper-guide/index.html#0)
- [物料仓库](https://developer.tuya.com/material/library_hKiOVClc/component?code=SweepRobotTemplate)

### 简单编码示例

以下是一个最基础的地图展示示例：

```typescript
import React, { useState } from 'react';
import { RobotMap, RoomProperty } from '@ray-js/robot-map';
import { useP2PDataStream } from '@ray-js/robot-data-stream';
import { useDevice } from '@ray-js/ray';

const RobotVacuumPanel = () => {
  const { devId } = useDevice(device => device.devInfo);

  // 地图和路径数据状态（通常来自 P2P 通道）
  const [mapData, setMapData] = useState<string>('');
  const [pathData, setPathData] = useState<string>('');

  // 房间属性数据（通常来自 MQTT 通道，结构化协议）
  const [roomProperties, setRoomProperties] = useState<RoomProperty[]>([]);

  // P2P 数据流处理
  const onMapData = (mapDataStr: string) => {
    // 处理地图数据
    setMapData(mapDataStr);
  };

  const onPathData = (pathDataStr: string) => {
    // 处理路径数据
    setPathData(pathDataStr);
  };

  // 使用 P2P 数据流获取地图和路径数据
  useP2PDataStream(devId, onMapData, onPathData);

  // 示例：房间属性数据结构（实际使用时从 MQTT 通道获取）
  // const roomProperties: RoomProperty[] = [
  //   {
  //     id: 1,
  //     name: '客厅',
  //     cleanTimes: 2,
  //     order: 1,
  //     floorType: 0,
  //     yMop: 1,
  //     suction: 0,
  //     cistern: 0,
  //     cleanMode: 0,
  //   },
  // ];

  // 地图准备就绪回调
  const handleMapReady = (mapApi) => {
    console.log('地图已准备就绪', mapApi);
  };

  return (
    <RobotMap
      map={mapData}
      path={pathData}
      roomProperties={roomProperties}
      onMapReady={handleMapReady}
    />
  );
};
```

### 运行效果

完成上述步骤后，你将能够：

- 看到设备的地图数据
- 控制设备开始/暂停清扫
- 查看设备的实时路径

### 下一步

- 了解 [核心概念](/cn/miniapp/solution-ai/ability/sweeper-solution/robot-vacuum-laser/getting-started/core-concepts)，深入理解平台的关键术语和设计理念
- 查看 [能力集](/cn/miniapp/solution-ai/ability/sweeper-solution/robot-vacuum-laser/ability-set/cloud)，了解完整的 API 和功能模块