在嵌入式硬件與輕量化UI應(yīng)用深度融合的當(dāng)下，依托合宙Air8101 V001暢玩板的硬件支撐，結(jié)合LuatOS系統(tǒng)的高效運(yùn)行特性與AirUI輕量化圖形開發(fā)框架的便捷優(yōu)勢，我們啟動了詩詞闖關(guān)app（SCCG）的開發(fā)項(xiàng)目。

概述：

本篇旨在講述在引擎 8101 開發(fā)詩詞闖關(guān) app（SCCG）項(xiàng)目的詳細(xì)過程。

詩詞闖關(guān) app，是一款使用合宙 AirUI 輕量化圖形開發(fā)框架，基于工業(yè)引擎 Air8101引擎主機(jī)硬件和 LuatOS 系統(tǒng)軟件開發(fā)的一款 UI 應(yīng)用程序。

詩詞闖關(guān) app 核心功能：

以答題闖關(guān)為主線，設(shè)置關(guān)卡和難度

以詩詞庫為內(nèi)容基礎(chǔ)，提供學(xué)習(xí)和查閱功能

將詩詞學(xué)習(xí)包裝成游戲化的闖關(guān)體驗(yàn)

app ui 界面：

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

1、WIN10 以及 WIN10 以上的 Windows 操作系統(tǒng)電腦一臺image

2、合宙引擎 8101 一塊 +type-c 接口 usb 數(shù)據(jù)線一根

3、如果沒有上述 2 的硬件設(shè)備，可以直接在電腦端 pc 模擬器上開發(fā)調(diào)試 app

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

2.1 代碼倉庫

1、合宙引擎 8101 項(xiàng)目的代碼在 LuatOS 倉庫的 master 分支；

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

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

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

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

2.2 PC 模擬器

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

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

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

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

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

代碼開發(fā)任務(wù)，優(yōu)先選擇 GLM（可能是使用的人數(shù)太多，有時候處理較慢）；如果 GLM 處理太慢，再考慮切換到 MiniMax；

其他任務(wù)，可以首先選擇 ark-code-latest，其次選擇 MiniMax，最后選擇 GLM（可能是使用的人數(shù)太多，有時候處理較慢）；

三、定義自己的 app 原始需求

接下來，我們以一個實(shí)際的 app 需求為例，來演示完整的開發(fā)過程；

這個 app 的名字叫做：詩詞闖關(guān)

如果需求不是特別明確，就簡單描述一下即可；如果需求特別明確，則詳細(xì)描述每個頁面如何設(shè)計，以及業(yè)務(wù)邏輯如何設(shè)計；

在本示例中，因?yàn)槌烧Z接龍 app 是一個游戲，沒有太多的思路，所以我們描述的原始需求比較簡單，看 AI 如何發(fā)揮，如下所述：

設(shè)計一個可用于嵌入式設(shè)備的詩詞填空項(xiàng)目的頁面和交互業(yè)務(wù)邏輯，分辨率為480*800，輸出可以交互的html頁面

四、根據(jù) app 需求，借助 AI 工具，生成 html 文件和圖片等資源文件

本步驟是借助 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 的過程：

4.1 生成 ui 界面.html 文件

瀏覽器搜索打開 deepseek,輸入如下指令：幫我生成一個html，用于嵌入式設(shè)備UI 演示 窗口豎屏，適用480*800分辨率，實(shí)現(xiàn)詩詞填空的功能，選擇題形式

4.2 查看 ui 效果

等待 deepseek 思考完成后，運(yùn)行查看生成效果；運(yùn)行后有分為封面和游戲界面兩張，點(diǎn)擊【開始闖關(guān)】即可預(yù)覽全部

4.3 修改 ui 效果

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

4.4 下載保存.html 文件

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

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

修改到最終的 ui 效果后，繼續(xù)給 deepseek 發(fā)指令：幫我導(dǎo)出這里面的所有圖片資源大小32*32，背景透明色

由于很多時候效果圖中只有 Emoji 表情，所以可以給 deepseek 發(fā)指令：幫我把這里的Emoji表情轉(zhuǎn)換成圖片資源，32*32，背景透明色

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

4.6 總結(jié)

這個階段，主要就是根據(jù)需求，不斷的和 AI 交互，生成 html；

根據(jù)自己對實(shí)際 app 的規(guī)劃以及實(shí)際運(yùn)行的效果，可能需要調(diào)整多次才行；

按照同樣的交互思路，進(jìn)行多輪交互即可，直到生成的 html 界面和交互邏輯可以滿足你的需求；

最后再導(dǎo)出來用到的所有圖片資源；

具體到本項(xiàng)目，最終輸出了 SCCG.html 和 SCCG_images.zip 兩個文件；

我們在接下來的編碼環(huán)節(jié)會用到這兩個文件；

五、根據(jù) html 文件 + 圖片等資源文件 + 代碼倉庫，讓 AI 工具生成 app 代碼

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

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

app 代碼的基本格式要求

app 代碼有基本的格式要求；

我們先來看看 2.1.3 章節(jié)下載下來的 LuatOS 代碼倉庫中的 LuatOS/module/AirUI/app_store/vertical_app 目錄，在 vertical_app 內(nèi)，每個子目錄都是一個單獨(dú)的 app，如下圖所示：

5.1 Trae 生成 app 代碼

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

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

5.1.1 在 app_store 下創(chuàng)建 SCCG 目錄

首先我們在 LuatOS-developmoduleAir8101projectAirUIFrameui_play_boardapp_store 下創(chuàng)建一個 SCCG 目錄；

創(chuàng)建目錄的方式有很多種，此處僅僅演示使用 Trae 創(chuàng)建的過程；

1、在工具右側(cè)的資源管理器中，找到 LuatOS-developmoduleAir8101projectAirUIFrameui_play_boardapp_store 目錄，鼠標(biāo)點(diǎn)擊右鍵，在彈出的菜單中，選擇 添加到對話

2、在會話窗口繼續(xù)輸入 在這個目錄下創(chuàng)建一個SCCG目錄，

3、創(chuàng)建成功后，會話窗口輸入：在SCCG目錄下創(chuàng)建res，user目錄

最終創(chuàng)建成功，如下圖所示

5.1.2 把第四章節(jié)生成的 html 和圖片文件復(fù)制過來

這一步就不借助 Trae 完成了，直接人工手動操作：

1、手動將 4.4 中保存的 SCCG.html 復(fù)制到 SCCG 目錄下；

2、將 4.5 中導(dǎo)出的 SCCG_images.zip 中的圖片解壓，然后復(fù)制到 SCCG/res 目錄下

3、參考 3.5 的交互生成詩詞填空圖標(biāo)圖片，下載后修改圖片名稱為 icon.png，復(fù)制圖片到 SCCG 目錄下.

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

5.1.3 第一次自動生成 app 代碼

1、在會話窗口輸入以下內(nèi)容（LuatOS-develop 路徑需要根據(jù)你自己電腦上的實(shí)際路徑來修改），并且發(fā)送：

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

3、可以看出，這次交互，生成了 main.lua、meta.json、sccg.lua 三個文件，并一定要依次點(diǎn)開點(diǎn)擊【保留】

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

六、在模擬上運(yùn)行 app，根據(jù)運(yùn)行結(jié)果，讓 Trae 不斷的調(diào)試代碼，直到運(yùn)行通過

在本章節(jié)，我們在 LuatOS 模擬器上不斷地運(yùn)行剛才生成的 SCCG 代碼；

如果發(fā)現(xiàn)問題，讓 Trae 不斷的調(diào)試，直到在模擬器上可以正常運(yùn)行；

如果你忘記了模擬器怎么使用，再參考本文的 2.2 章節(jié)回顧學(xué)習(xí)一下；

6.1 將 app_store 目錄復(fù)制到 LuatOS 模擬器所在的目錄

1、如下圖所示，將

D:appLuatOS-masterapp_engineapp_storevertical_app

目錄下的SCCG子目錄復(fù)制到 LuatOS 模擬器根目錄下的app_store目錄中

LuatOS 模擬器根目錄下的app_store目錄，默認(rèn)不存在，需要自己手動創(chuàng)建

復(fù)制成功后，模擬器目錄結(jié)構(gòu)如下面兩張圖片所示

6.2 使用 cmd 命令行 +LuatOS 模擬器運(yùn)行：LuatOS 擴(kuò)展庫代碼 +合宙引擎主機(jī)8101出廠軟件

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

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

luatos-pc.exe D:appLuatOS-masterapp_enginefactory D:appLuatOS-masterscriptlibs

3、輸入完成后單擊回車鍵，就可以在模擬器上運(yùn)行 合宙引擎 Air8101 出廠軟件的出廠軟件，啟動后如下圖所示：

4、鼠標(biāo)模擬左右滑屏，翻到第三頁，就可以看到自己添加的詩詞闖關(guān) app，點(diǎn)擊運(yùn)行測試 app 功能。

6.3 調(diào)試 app 代碼

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

審核編輯 黃宇