本篇将详细介绍基于 Air8101 畅玩板开发钉钉 机器人 APP的完整实验流程。依托 LuatOS 系统与 AirUI 轻量化图形框架，完成硬件环境搭建、软件环境配置、代码仓库准备等前期工作，循序渐进实现钉钉机器人 Webhook 配置、密钥加签、消息一键推送等核心功能，为整机功能调试与项目 落地提供完整实操参考

概述：

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

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

1. 配置钉钉机器人 webhook;

2. 配置钉钉机器人加签密钥；

3. 输入待发送消息，一键发送。

添加图片注释，不超过 140 字（可选）

一、硬件环境准备

1. Win10 及以上的 Windows 操作系统电脑一台;

2. Air8101/1602 UI 畅玩板一块 +type-c 接口 usb 数据线一根；

3. 如果没有上述 2 的这些硬件设备，可以直接在电脑端 pc 模拟器上开发调试 app；

二、软件环境准备

2.1 PC 模拟器

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

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

2.2 代码仓库

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

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

添加图片注释，不超过 140 字（可选）

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

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

添加图片注释，不超过 140 字（可选）

2.3 AI 工具

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

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

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 的过程：

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

添加图片注释，不超过 140 字（可选）

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

添加图片注释，不超过 140 字（可选）

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

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

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

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

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

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

添加图片注释，不超过 140 字（可选）

四、生成 app 项目代码

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

1. 打开 trae 客户端，新建一个会话任务，专门用来处理钉钉机器人 app 代码生成调试

2. 打开编辑器窗口，可以查看 LuatOS-develop 目录内容

3. 右键点击 app_store，添加到对话。

添加图片注释，不超过 140 字（可选）

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

添加图片注释，不超过 140 字（可选）

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

添加图片注释，不超过 140 字（可选）

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

添加图片注释，不超过 140 字（可选）

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

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

添加图片注释，不超过 140 字（可选）

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 目录下.

添加图片注释，不超过 140 字（可选）

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 智能体就开始工作了，几分钟之后，会生成第一份代码，思考输出的过程如下图所示：

添加图片注释，不超过 140 字（可选）

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

添加图片注释，不超过 140 字（可选）

添加图片注释，不超过 140 字（可选）

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

五、运行 app 并调试代码

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

添加图片注释，不超过 140 字（可选）

添加图片注释，不超过 140 字（可选）

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

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

添加图片注释，不超过 140 字（可选）

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

添加图片注释，不超过 140 字（可选）

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\

添加图片注释，不超过 140 字（可选）

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

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

添加图片注释，不超过 140 字（可选）

添加图片注释，不超过 140 字（可选）

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