本文以 LuatOS 系统及 AirUI 轻量化图形框架为基础，依次完成硬件环境搭建、软件环境配置、代码仓库准备等前期工作，逐步实现钉钉机器人 Webhook 配置、密钥加签、消息一键推送功能，为整机调试与项目落地提供实操依据。

概述：

本篇旨在讲述在 8101 畅玩板开发钉钉机器人 app（dingding_robot）项目的详细过程。

钉钉机器人 app，是一款使用合宙 AirUI 轻量化图形开发框架，基于工业引擎 Air8101V001 畅玩板硬件和 LuatOS 系统软件开发的一款 UI 应用程序。

钉钉机器人 app 核心功能：

1. 配置钉钉机器人 webhook;
2. 配置钉钉机器人加签密钥；
3. 输入待发送消息，一键发送。

app ui 界面：

一、硬件环境准备

1. Win10 及以上的 Windows 操作系统电脑一台;
2. Air8101/1602 UI 畅玩板一块 +type-c 接口 usb 数据线一根；
3. 如果没有上述 2 的这些硬件设备，可以直接在电脑端 pc 模拟器上开发调试 app；

二、软件环境准备

2.1 PC 模拟器

点击此处学习 LuatOS 模拟器；

使用模拟器时，直接使用在本文 2.2 章节下载的 LuatOS-develop 分支代码进行学习；

在本小节，使用 LuatOS 模拟器 +LuatOS-develop 分支代码，可以正常运行起来一个 UI 项目就算达标；

2.2 代码仓库

1、当前阶段，Air8101 UI 畅玩板项目的代码在 LuatOS 仓库的 develop 分支；

2、点击这里可以通过网络浏览器打开 LuatOS 代码仓库的 develop 分支，可以直接点击克隆/下载，下载在本地

3、（本步骤和步骤 2，二选一即可）通过 TortoiseGit 或者其他客户端工具拉取上述 develop 分支代码到自己的电脑上，以便后续通过客户端提交代码到仓库，只本地运行的话可以不用客户端克隆/下载，直接步骤 2 下载即可；

4、参考这里使用 TortoiseGit 克隆/拉取代码，点击查看 TortoiseGit 详细使用教程

5、develop 分支代码放在你本地任何你觉得合适的位置，比如本文这里新建了存放的路径是 D:\trae\LuatOS_project\：

2.3 AI 工具

AI 工具有很多种，有 Trae，Copilot 等等，每一种 AI 工具都可以配置不同的大模型，我们并不限制你使用哪一种 AI 工具；

各种 AI 工具使用的基本思路都是相同的，在本文，我们仅仅基于 Trae 这种 AI 工具来介绍，如果你使用其他 AI 工具，遇到不懂的问题，可以自行解决；

参考 Trae 的安装和智能体概念理解 和 安装 luatos-docs-code 智能体、规则和技能 安装好 Trae，配置 luatos-docs-code 智能体，配置项目规则和技能；其中：在 Trae 的安装和智能体概念理解第三章节中，不用再新建项目，直接打开自己电脑上的 LuatOS-develop 目录即可；

Trae 的配置使用有以下三点特别重要：

1、当你安装配置好智能体、规则和技能后，最终一定要参考验证智能体、规则和技能是否安装成功来验证安装配置是否正确；

2、Trae中内置的免费大模型，会经常排队，并且性能不可控，容易出问题，所以推荐参考：001 发送会话请求时，提示排队，如何解决？的方法，订阅收费的大模型（目前每月40元）；这样可以大大提高AI性能；如果不想使用收费模型，在非正常工作时间段内，使用内置的免费模型也能勉强凑合；

3、选择收费大模型时，经过我们的实际测试，根据工作任务的不同，可以按照如下建议选择（仅供参考，具体情况还需要根据你自己的实际使用情况来定）：

• 代码开发任务，优先选择GLM（可能是使用的人数太多，有时候处理较慢）；如果GLM处理太慢，再考虑切换到MiniMax；
• 其他任务，可以首先选择ark-code-latest，其次选择MiniMax，最后选择GLM（可能是使用的人数太多，有时候处理较慢）；

三、生成 app 界面和交互逻辑

本步骤是借助 AI 工具，根据定义的 app 需求，生成 html 文件和图片等资源文件。

AI 工具可以使用 Trae，也可以使用网页版的豆包，也可以使用网页版的 deepseek，生成“包含业务逻辑、可交互体验”的 html 文件； 你可以根据自己的实际情况来对比选择使用其他的 AI 工具，经我们对比，网页版的 deepseek 生成的 html ui 效果比较符合需求。

在这一章节记录了使用 deepseek 网页版来生成钉钉机器人 app 的 html 的过程：

3.1 生成 ui 界面.html 文件

浏览器搜索打开 deepseek,输入如下指令：设计一个可用于钉钉机器人消息发送 app 项目页面和交互业务逻辑，分辨率为 480*800，输出可以交互的 html 页面;

3.2 查看 ui 效果

等待 deepseek 思考完成后，运行查看生成效果；

3.3 修改 ui 效果

deepseek 首次生成的 ui 效果不一定能满足 app 需求，可以进行多次对话交互修改效果，比如，去除多余的功能、修改整体色调、添加按钮、添加提示文字等，直至达到满足需求的 ui 效果；

3.4 下载保存.html 文件

达成 ui 效果后，在 deepseek 里下载保存在本地。 本教程最终生成的 ui 效果：

直接双击 deepseek_html_20260331_e77a91.html 在浏览器打开即可查看 ui 效果。

3.5 导出.html 中的图片、图标、表情等资源

修改到最终的 ui 效果后，继续给 deepseek 发指令：帮我导出这里面的所有图片资源大小 3030，背景透明色（或者帮我把这里的表情转换成图片资源，3030，背景透明色）。

deepseek 思考完成后，点击运行，在运行页面可以一键下载图片资源。

四、生成 app 项目代码

本步骤全程在 trae AI 下进行。

在进行本步骤之前，一定确保 2.3 章节 4.验证规则和技能都没有问题，如果验证异常，按照 2.3 章节 2-3-4 步骤重来一遍即可。

4.1 创建任务

1. 打开 trae 客户端，新建一个会话任务，专门用来处理钉钉机器人 app 代码生成调试
2. 打开编辑器窗口，可以查看 LuatOS-develop 目录内容
3. 右键点击 app_store，添加到对话。

1. 此时可以看到 app_store 目录已经被添加到会话窗口，如下图所示

4.2 创建 app 项目目录

1、在会话窗口继续输入指令：在这个目录下创建一个 dingding_robot 目录。点击发送箭头按钮，等待创建完成

2、创建成功后可以在资源管理器 app_store 目录下看到新建的 dingding_robot 目录

3、创建 res，user 目录

继续在会话窗口输入：在dingding_robot目录下创建res，user目录

成功创建后可以在 dingding_robot 目录下看到子目录 res、user。

4.3 添加资源

1、手动把 3.4 中下载的 deepseek_html_20260331_e77a91.html 复制到 dingding_robot 目录下；（快速找到 dingding_robot 本地目录的方法：上图页面 dingding_robot 右键选择 在文件资源管理器中显示）

2、把 3.5 中下载的图片资源复制到 dingding_robot\res 目录下.

可以把图片名称改成自己好识别的英文名称。

3、参考 3.5 的交互生成一个钉钉机器人图标图片，下载后修改图片名称为 icon.png，复制图片到 dingding_robot 目录下.

完成以上三步后最终如下所示:

4.4 生成项目代码

1、在会话窗口输入以下内容（LuatOS-develop 路径需要根据你自己电脑上的实际路径来修改,找不到的可以查看 2.2 章节。），并且发送：

1、参考：D:\trae\LuatOS_project\LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\app_store\dingding_robot\deepseek_html_20260414_3b3a55.html 中的UI界面和交互逻辑，在dingding_robot中生成LuatOS代码 
 2、代码文件格式以及内容参考D:\trae\LuatOS_project\LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\app_store\下的其他目录，包含main.lua，meta.json，dingding_robot\user目录下存储具体UI和业务功能的lua代码文件 
 3、代码中需要的图片资源在dingding_robot\res目录下，代码中用到的图片资源，使用\luadb\xxx.png的路径方式

2、然后 luatos-docs-code-102 智能体就开始工作了，几分钟之后，会生成第一份代码，思考输出的过程如下图所示：

3、查看 dingding_robot 目录下 生成了 main.lua、meta.json、dingding_robot_win.lua、config.lua、message.lua 五个文件，如下图所示：

4、点击查看生成的 5 个代码文件，单击保留

5、trae 可能没办法一次就生成可成功运行的代码，按照下述第五章的方式运行代码，查看运行日志和运行效果，继续使用 AI 工具调试修改代码即可，如果要学习完整的一个 app 代码调试过程，可以参考智能售货机app开发文章。

五、运行 app 并调试代码

5.1 准备运行 app

1、右键 app_store，选择 在文件资源管理器中显示

2、找到本地的 app_store 文件夹

3、把 app_store 文件夹复制到 LuatOS PC 模拟器所在的目录。

可以查看 2.1 PC 模拟器章节中的操作，本教程 LuatOS PC 模拟器所在的目录是 E:\PC 模拟器\LuatOS-SoC_V2025_PC

5.2 在 PC 模拟器上运行

1、找到 PC 模拟器目录下的 cmd 快捷方式，双击打开，如下图所示

2、在命令行窗口粘贴输入以下指令：

luatos-pc-64bit.exe D:\trae\LuatOS_project\LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\factory\ D:\trae\LuatOS_project\LuatOS-develop\script\libs\

3、输入完成后单击回车键，就可以在模拟器上运行 Air8101 UI 畅玩板出厂软件的出厂软件，启动后如下图所示：

4、鼠标模拟左右滑屏，翻到第三页，就可以看到自己添加的钉钉机器人 app,点击运行测试 app 功能。

5.3 调试 app 代码

5.2 的运行结果是最终可用的 app 效果，中间的运行结果这里不再赘述，比如运行死机，或者 app 打开后图片不显示，字体问题、颜色不符等等，等你按照上述所有步骤，走到生成代码这一步的时候，整个项目已经成功了 99%，剩下的代码调试问题，可以参考智能售货机项目开发文章。

本文完整覆盖开发前期准备与核心功能实现流程，可作为项目开发与调试的正式技术参考。