On this page
Quick StartEnvironment SetupProject CreationProject TemplateSimple Code ExampleExpected ResultsNext Steps

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:

Simple Code Example

Here is a basic map display example:

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 to deeply understand key terms and design concepts of the platform
  • View Ability Set to learn about complete APIs and functional modules