## Quick Start

This guide will help you create a basic project that can control a laser sweeper vacuum in 5 minutes.

### Environment Setup

Ensure you have completed the basic environment setup for Tuya Mini Program, including:

- Install Node.js (recommended v14+)
- Install Ray development tools
- Complete Tuya developer account registration

### Project Creation

Use the project template to quickly create a project:

#### Project Template

The project template is designed to reduce the difficulty for developers in setting up projects by organizing common categories and capabilities, and providing corresponding project source code.

**Get Template:**

- [Template Documentation](https://developer.tuya.com/cn/miniapp-codelabs/codelabs/panel-robot-sweeper-guide/index.html#0)
- [Material Repository](https://developer.tuya.com/material/library_hKiOVClc/component?code=SweepRobotTemplate)

### Simple Code Example

Here is a basic map display example:

```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);

  // Map and path data state (usually from P2P channel)
  const [mapData, setMapData] = useState<string>('');
  const [pathData, setPathData] = useState<string>('');

  // Room property data (usually from MQTT channel, structured protocol)
  const [roomProperties, setRoomProperties] = useState<RoomProperty[]>([]);

  // P2P data stream processing
  const onMapData = (mapDataStr: string) => {
    // Process map data
    setMapData(mapDataStr);
  };

  const onPathData = (pathDataStr: string) => {
    // Process path data
    setPathData(pathDataStr);
  };

  // Use P2P data stream to get map and path data
  useP2PDataStream(devId, onMapData, onPathData);

  // Example: Room property data structure (get from MQTT channel in actual use)
  // const roomProperties: RoomProperty[] = [
  //   {
  //     id: 1,
  //     name: 'Living Room',
  //     cleanTimes: 2,
  //     order: 1,
  //     floorType: 0,
  //     yMop: 1,
  //     suction: 0,
  //     cistern: 0,
  //     cleanMode: 0,
  //   },
  // ];

  // Map ready callback
  const handleMapReady = (mapApi) => {
    console.log('Map is ready', mapApi);
  };

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

### Expected Results

After completing the above steps, you will be able to:

- See device map data
- Control device start/pause cleaning
- View device real-time path

### Next Steps

- Learn about [Core Concepts](/en/miniapp/solution-ai/ability/sweeper-solution/robot-vacuum-laser/getting-started/core-concepts) to deeply understand key terms and design concepts of the platform
- View [Ability Set](/en/miniapp/solution-ai/ability/sweeper-solution/robot-vacuum-laser/ability-set/cloud) to learn about complete APIs and functional modules