本篇將詳細(xì)介紹基于 Air8101 暢玩板開發(fā)釘釘 機(jī)器人 APP的完整實(shí)驗(yàn)流程。依托 LuatOS 系統(tǒng)與 AirUI 輕量化圖形框架，完成硬件環(huán)境搭建、軟件環(huán)境配置、代碼倉庫準(zhǔn)備等前期工作，循序漸進(jìn)實(shí)現(xiàn)釘釘機(jī)器人 Webhook 配置、密鑰加簽、消息一鍵推送等核心功能，為整機(jī)功能調(diào)試與項(xiàng)目 落地提供完整實(shí)操參考

概述：

本篇旨在講述在 8101 暢玩板開發(fā)釘釘機(jī)器人 app（dingding_robot）項(xiàng)目的詳細(xì)過程。

釘釘機(jī)器人 app，是一款使用合宙 AirUI 輕量化圖形開發(fā)框架，基于工業(yè)引擎 Air8101V001 暢玩板硬件和 LuatOS 系統(tǒng)軟件開發(fā)的一款 UI 應(yīng)用程序。

釘釘機(jī)器人 app 核心功能：

1. 配置釘釘機(jī)器人 webhook;
2. 配置釘釘機(jī)器人加簽密鑰；
3. 輸入待發(fā)送消息，一鍵發(fā)送。

app ui 界面：

一、硬件環(huán)境準(zhǔn)備

1. Win10 及以上的 Windows 操作系統(tǒng)電腦一臺(tái);
2. Air8101/1602 UI 暢玩板一塊 +type-c 接口 usb 數(shù)據(jù)線一根；
3. 如果沒有上述 2 的這些硬件設(shè)備，可以直接在電腦端 pc 模擬器上開發(fā)調(diào)試 app；

二、軟件環(huán)境準(zhǔn)備

2.1 PC
模擬器

點(diǎn)擊此處學(xué)習(xí) LuatOS 模擬器；

使用模擬器時(shí)，直接使用在本文 2.2 章節(jié)下載的 LuatOS-develop 分支代碼進(jìn)行學(xué)習(xí)；

在本小節(jié)，使用 LuatOS 模擬器 +LuatOS-develop 分支代碼，可以正常運(yùn)行起來一個(gè) UI 項(xiàng)目就算達(dá)標(biāo)；

2.2 代碼倉庫

1、當(dāng)前階段，Air8101 UI 暢玩板項(xiàng)目的代碼在 LuatOS 倉庫的 develop 分支；

2、點(diǎn)擊這里可以通過網(wǎng)絡(luò)瀏覽器打開 LuatOS 代碼倉庫的 develop 分支，可以直接點(diǎn)擊克隆/下載，下載在本地

3、（本步驟和步驟 2，二選一即可）通過 TortoiseGit 或者其他客戶端工具拉取上述 develop 分支代碼到自己的電腦上，以便后續(xù)通過客戶端提交代碼到倉庫，只本地運(yùn)行的話可以不用客戶端克隆/下載，直接步驟 2 下載即可；

4、參考這里使用 TortoiseGit 克隆/拉取代碼，點(diǎn)擊查看 TortoiseGit 詳細(xì)使用教程

5、develop 分支代碼放在你本地任何你覺得合適的位置，比如本文這里新建了存放的路徑是 D:\trae\LuatOS_project\：

2.3 AI 工具

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

各種 AI 工具使用的基本思路都是相同的，在本文，我們僅僅基于 Trae 這種 AI 工具來介紹，如果你使用其他 AI 工具，遇到不懂的問題，可以自行解決；

參考 Trae 的安裝和智能體概念理解 和 安裝 luatos-docs-code 智能體、規(guī)則和技能 安裝好 Trae，配置 luatos-docs-code 智能體，配置項(xiàng)目規(guī)則和技能；其中：在 Trae 的安裝和智能體概念理解第三章節(jié)中，不用再新建項(xiàng)目，直接打開自己電腦上的 LuatOS-develop 目錄即可；

Trae 的配置使用有以下三點(diǎn)特別重要：

1、當(dāng)你安裝配置好智能體、規(guī)則和技能后，最終一定要參考驗(yàn)證智能體、規(guī)則和技能是否安裝成功來驗(yàn)證安裝配置是否正確；

2、Trae中內(nèi)置的免費(fèi)大模型，會(huì)經(jīng)常排隊(duì)，并且性能不可控，容易出問題，所以推薦參考：001 發(fā)送會(huì)話請求時(shí)，提示排隊(duì)，如何解決？的方法，訂閱收費(fèi)的大模型（目前每月40元）；這樣可以大大提高AI性能；如果不想使用收費(fèi)模型，在非正常工作時(shí)間段內(nèi)，使用內(nèi)置的免費(fèi)模型也能勉強(qiáng)湊合；

3、選擇收費(fèi)大模型時(shí)，經(jīng)過我們的實(shí)際測試，根據(jù)工作任務(wù)的不同，可以按照如下建議選擇（僅供參考，具體情況還需要根據(jù)你自己的實(shí)際使用情況來定）：

• 代碼開發(fā)任務(wù)，優(yōu)先選擇GLM（可能是使用的人數(shù)太多，有時(shí)候處理較慢）；如果GLM處理太慢，再考慮切換到MiniMax；
• 其他任務(wù)，可以首先選擇ark-code-latest，其次選擇MiniMax，最后選擇GLM（可能是使用的人數(shù)太多，有時(shí)候處理較慢）；

三、生成 app 界面和交互邏輯

本步驟是借助 AI 工具，根據(jù)定義的 app 需求，生成 html 文件和圖片等資源文件。

AI 工具可以使用 Trae，也可以使用網(wǎng)頁版的豆包，也可以使用網(wǎng)頁版的 deepseek，生成“包含業(yè)務(wù)邏輯、可交互體驗(yàn)”的 html 文件； 你可以根據(jù)自己的實(shí)際情況來對比選擇使用其他的 AI 工具，經(jīng)我們對比，網(wǎng)頁版的 deepseek 生成的 html ui 效果比較符合需求。

在這一章節(jié)記錄了使用 deepseek 網(wǎng)頁版來生成釘釘機(jī)器人 app 的 html 的過程：

3.1 生成 ui 界面.html 文件

瀏覽器搜索打開 deepseek,輸入如下指令：設(shè)計(jì)一個(gè)可用于釘釘機(jī)器人消息發(fā)送 app 項(xiàng)目頁面和交互業(yè)務(wù)邏輯，分辨率為 480*800，輸出可以交互的 html 頁面;

3.2 查看 ui 效果

等待 deepseek 思考完成后，運(yùn)行查看生成效果；

3.3 修改 ui 效果

deepseek 首次生成的 ui 效果不一定能滿足 app 需求，可以進(jìn)行多次對話交互修改效果，比如，去除多余的功能、修改整體色調(diào)、添加按鈕、添加提示文字等，直至達(dá)到滿足需求的 ui 效果；

3.4 下載保存.html 文件

達(dá)成 ui 效果后，在 deepseek 里下載保存在本地。 本教程最終生成的 ui 效果：

直接雙擊 deepseek_html_20260331_e77a91.html 在瀏覽器打開即可查看 ui 效果。

3.5 導(dǎo)出.html 中的圖片、圖標(biāo)、表情等資源

修改到最終的 ui 效果后，繼續(xù)給 deepseek 發(fā)指令：幫我導(dǎo)出這里面的所有圖片資源大小 3030，背景透明色（或者幫我把這里的表情轉(zhuǎn)換成圖片資源，3030，背景透明色）。

deepseek 思考完成后，點(diǎn)擊運(yùn)行，在運(yùn)行頁面可以一鍵下載圖片資源。

四、生成 app 項(xiàng)目代碼

本步驟全程在 trae AI 下進(jìn)行。

在進(jìn)行本步驟之前，一定確保 2.3 章節(jié) 4.驗(yàn)證規(guī)則和技能都沒有問題，如果驗(yàn)證異常，按照 2.3 章節(jié) 2-3-4 步驟重來一遍即可。

4.1 創(chuàng)建任務(wù)

1. 打開 trae 客戶端，新建一個(gè)會(huì)話任務(wù)，專門用來處理釘釘機(jī)器人 app 代碼生成調(diào)試
2. 打開編輯器窗口，可以查看 LuatOS-develop 目錄內(nèi)容
3. 右鍵點(diǎn)擊 app_store，添加到對話。

1. 此時(shí)可以看到 app_store 目錄已經(jīng)被添加到會(huì)話窗口，如下圖所示

4.2 創(chuàng)建 app 項(xiàng)目目錄

1、在會(huì)話窗口繼續(xù)輸入指令：在這個(gè)目錄下創(chuàng)建一個(gè) dingding_robot 目錄。點(diǎn)擊發(fā)送箭頭按鈕，等待創(chuàng)建完成

2、創(chuàng)建成功后可以在資源管理器 app_store 目錄下看到新建的 dingding_robot 目錄

3、創(chuàng)建 res，user 目錄

繼續(xù)在會(huì)話窗口輸入：在dingding_robot目錄下創(chuàng)建res，user目錄

成功創(chuàng)建后可以在 dingding_robot 目錄下看到子目錄 res、user

4.3 添加資源

1、手動(dòng)把 3.4 中下載的 deepseek_html_20260331_e77a91.html 復(fù)制到 dingding_robot 目錄下；（快速找到 dingding_robot 本地目錄的方法：上圖頁面 dingding_robot 右鍵選擇 在文件資源管理器中顯示）

2、把 3.5 中下載的圖片資源復(fù)制到 dingding_robot\res 目錄下.

可以把圖片名稱改成自己好識別的英文名稱。

3、參考 3.5 的交互生成一個(gè)釘釘機(jī)器人圖標(biāo)圖片，下載后修改圖片名稱為 icon.png，復(fù)制圖片到 dingding_robot 目錄下.

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

4.4 生成項(xiàng)目代碼

1、在會(huì)話窗口輸入以下內(nèi)容（LuatOS-develop 路徑需要根據(jù)你自己電腦上的實(shí)際路徑來修改,找不到的可以查看 2.2 章節(jié)。），并且發(fā)送：

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、代碼文件格式以及內(nèi)容參考D:\trae\LuatOS_project\LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\app_store\下的其他目錄，包含main.lua，meta.json，dingding_robot\user目錄下存儲(chǔ)具體UI和業(yè)務(wù)功能的lua代碼文件

3、代碼中需要的圖片資源在dingding_robot\res目錄下，代碼中用到的圖片資源，使用\luadb\xxx.png的路徑方式

2、然后 luatos-docs-code-102 智能體就開始工作了，幾分鐘之后，會(huì)生成第一份代碼，思考輸出的過程如下圖所示：

3、查看 dingding_robot 目錄下 生成了 main.lua、meta.json、dingding_robot_win.lua、config.lua、message.lua 五個(gè)文件，如下圖所示：

4、點(diǎn)擊查看生成的 5 個(gè)代碼文件，單擊保留

5、trae 可能沒辦法一次就生成可成功運(yùn)行的代碼，按照下述第五章的方式運(yùn)行代碼，查看運(yùn)行日志和運(yùn)行效果，繼續(xù)使用 AI 工具調(diào)試修改代碼即可，如果要學(xué)習(xí)完整的一個(gè) app 代碼調(diào)試過程，可以參考智能售貨機(jī)app開發(fā)文章。

五、運(yùn)行 app 并調(diào)試代碼

5.1 準(zhǔn)備運(yùn)行 app

1、右鍵 app_store，選擇 在文件資源管理器中顯示

2、找到本地的 app_store 文件夾

3、把 app_store 文件夾復(fù)制到 LuatOS PC 模擬器所在的目錄。

可以查看 2.1 PC 模擬器章節(jié)中的操作，本教程 LuatOS PC 模擬器所在的目錄是 E:\PC 模擬器\LuatOS-SoC_V2025_PC

5.2 在 PC 模擬器上運(yùn)行

1、找到 PC 模擬器目錄下的 cmd 快捷方式，雙擊打開，如下圖所示

2、在命令行窗口粘貼輸入以下指令：

luatos-pc-64bit.exe D:\trae\LuatOS_project\LuatOS-master1\app_engine\factory D:\trae\LuatOS_project\LuatOS-master1\script\libs

3、輸入完成后單擊回車鍵，就可以在模擬器上運(yùn)行 Air8101 UI 暢玩板出廠軟件的出廠軟件，啟動(dòng)后如下圖所示：

4、鼠標(biāo)模擬左右滑屏，翻到第三頁，就可以看到自己添加的釘釘機(jī)器人 app,點(diǎn)擊運(yùn)行測試 app 功能。

5.3 調(diào)試 app 代碼

5.2 的運(yùn)行結(jié)果是最終可用的 app 效果，中間的運(yùn)行結(jié)果這里不再贅述，比如運(yùn)行死機(jī)，或者 app 打開后圖片不顯示，字體問題、顏色不符等等，等你按照上述所有步驟，走到生成代碼這一步的時(shí)候，整個(gè)項(xiàng)目已經(jīng)成功了 99%，剩下的代碼調(diào)試問題，可以參考智能售貨機(jī)項(xiàng)目開發(fā)文章，或者交流群里隨時(shí)溝通。