跳转至

Air860x UI开发教程

江访

本教程面向零基础开发者，演示如何借助 AI 代码助手，从一句产品想法出发，生成可运行的 UI 代码，并在模拟器和真机上跑起来。

一、本文档链接二维码

本文档链接二维码

二、配套视频

  1. 必备工作条件介绍
  2. 需求设计
  3. 需求生成代码并模拟运行
  4. 代码烧录到 Air860x 并运行

三、必备的工作条件

3.1 AI 代码助手

  1. CodeBuddy（推荐）

    1. 介绍：编程代码助手

    2. 官网：https://www.codebuddy.cn/home/

3.2 MCP 工具

把下面两段配置复制给 AI 代码助手，安装合宙官方MCP工具

安装以下2个MCP工具并测试连通性，后续合宙LuatOS开发都使用以下两个MCP

docs-ai —— docs 文档检索服务

提供 `https://docs.openluat.com` 的完整文档内容，是合宙权威知识库；基于 docs 源码提供原始数据的检索、文档图片识别、资料包检索。


{
  "mcpServers": {
    "docs-ai": {
      "url": "https://docs-ai.luatos.com/mcp"
    }
  }
}


code-ai —— LuatOS 代码库、示例库检索服务

提供合宙模组的权威 demo 集合、各种 turnkey 方案供 AI 检索和学习；提供权威 LuatOS 扩展库的源码和文档数据；基于 LuatOS 源码，提供非闭源代码的 C 代码读取和搜索，比本地 LuatOS 代码仓库更全。


{
  "mcpServers": {
    "code-ai": {
      "url": "https://code-ai.luatos.com/mcp"
    }
  }
}

3.3 Luatools 工具

  1. Luatools 工具介绍

    1. 作用：连接合宙产品，查看运行日志、烧录固件、模拟器运行、下载底层 core 等

    2. 下载网址：https://cdn18.luatos.com/files/exe/Luatools_v3.exe

    3. 详细介绍：https://docs.openluat.com/common/Luatools/

3.4 高速串口驱动CH34SER

  1. 作用：Air860x设备通过USB数据线连接电脑进行通信所需驱动

  2. 下载网址：CH343SER

3.5 认识 Air860x

Air860x 是合宙 Air860X 系列音视频大屏工控板，涵盖 Air8601、Air8602、Air8605、Air8607 等型号，本文的开发流程适用于该系列全部型号，下面的实物图和配套视频以 Air8607 为例。

Air8607 音视频大屏工控板

视频实物介绍：https://weixin.qq.com/sph/A3bKyTIYS3

3.6 硬件与资料对应关系

  1. Air860x 系列资料总览：https://docs.openluat.com/air1601/product/air860x/

  2. 硬件和硬件资料：https://docs.openluat.com/air8607/hardware/（链接以 Air8607 为例，其他型号的硬件资料在 docs.openluat.com 对应型号目录下）

  3. 硬件和 demo：https://gitee.com/openLuat/LuatOS/tree/master/module/Air8607（链接以 Air8607 为例，其他型号的 demo 在 LuatOS 仓库 module 目录下的同名子目录）

3.7 合宙 IoT 平台与账号注册

  1. IoT 平台网址：https://iot.openluat.com/iot/project-list

3.8 合宙其他平台介绍（了解）

【待补充】

四、UI 需求与实现

4.1 UI 需求

UI 需求一般有下面三种情况：

  1. 一句话按自己的想法生成UI界面

  2. 有相关产品功能的图片、视频或者其他资料，想自己复刻一个类似的产品

  3. 已经做了相关产品，手上有相关资料，想通过合宙产品进行迭代

4.2 通过 代码助手 生成自己的 UI 代码

4.2.1 与 代码助手 沟通，直接生成UI代码

  1. 一句话生成UI界面发给代码助手内容：
调用合宙MCP工具，快速生成一个智能家居中控系统项目UI主界面，使用浅色背景，模拟业务逻辑数据，可以点击操作，不需要联网，
生成完毕快速打开模拟器运行，不需要验证模拟器运行日志、不需要截图验证，不需要操作鼠标验证，
让我自行验证效果。代码保存到一个新建目录的code中，可以在Air8607上运行。
  1. 手上有参考资料，发给代码助手内容：
智能家居中控文件夹目录下有智能家居中控界面的参考资料，调用合宙MCP工具，快速生成一个智能家居中控系统项目UI主界面，模拟业务逻辑数据，可以点击操作，
不需要联网，生成完毕快速打开模拟器运行，不需要验证模拟器运行日志、不需要截图验证，不需要操作鼠标验证，
让我自行验证效果。代码保存到一个新建目录的code中，可以在Air8607上运行。
  1. 先按自己的想法设计html文件格式原型，再根据html文件生成UI代码

4.2.2 遇到问题的处理方法

将可见的现象截图、复制报错提示或者通过打字描述出来，在 CodeBuddy 的对话框中按回车发送给代码助手，让代码助手解决。

4.3 使用 Luatools 模拟器验证代码效果

使用 Luatools 模拟器验证代码效果

4.4 UI 代码烧录到设备

【待补充】

五、485 功能与 UI 关联

【待补充】

六、网络功能与 UI 关联

【待补充】

搜索