本章節(jié)將圍繞 LuatOS 引擎與 Air8101 硬件平臺(tái)，完整介紹智能售貨機(jī) APP 項(xiàng)目的前期搭建流程。
從硬件選型、軟件環(huán)境部署到代碼倉(cāng)庫(kù)拉取，一步步完成開發(fā)前全部準(zhǔn)備工作，為后續(xù)功能開發(fā)、界面調(diào)試與功能實(shí)驗(yàn)打下基礎(chǔ)。

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

WIN10 以及 WIN10 以上的 Windows 操作系統(tǒng)電腦一臺(tái)
引擎主機(jī)8101一塊 +type-c 接口 usb 數(shù)據(jù)線一根；這一步的環(huán)境不是必須的，如果沒(méi)有這個(gè)環(huán)境，可以直接在模擬器上開發(fā)調(diào)試 app；

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

2.1 代碼倉(cāng)庫(kù)

當(dāng)前階段，引擎主機(jī)8101項(xiàng)目的代碼在 LuatOS 倉(cāng)庫(kù)的 develop 分支；

點(diǎn)擊這里可以通過(guò)網(wǎng)絡(luò)瀏覽器打開 LuatOS 代碼倉(cāng)庫(kù)的 develop 分支；

2.1.1 了解代碼結(jié)構(gòu)

在這個(gè)代碼分支中，以下三項(xiàng)內(nèi)容和本項(xiàng)目直接相關(guān)：

1、 LuatOS/module/Air8101/project/AirUIFrame/ui_play_board/factory

引擎主機(jī)8101項(xiàng)目的默認(rèn)出廠軟件
支持開機(jī)歡迎界面、待機(jī)界面、主菜單界面
支持 WiFi 設(shè)置，系統(tǒng)設(shè)置，應(yīng)用市場(chǎng)功能
如果把 引擎主機(jī)8101比作一個(gè)手機(jī)，這里的 factory 就相當(dāng)于是手機(jī)出廠自帶的默認(rèn)軟件功能
2、 LuatOS/module/Air8101/project/AirUIFrame/ui_play_board/app_store

所有可以在 引擎主機(jī)8101項(xiàng)目上運(yùn)行的 app，例如 airplane_battle（飛機(jī)大戰(zhàn)）、game_2048（2048 游戲）、luatos_competition（LuatOS 知識(shí)競(jìng)賽），等等等等；
這里的每個(gè) app，不是默認(rèn)出廠軟件支持的功能；而是通過(guò)默認(rèn)出廠軟件中的應(yīng)用市場(chǎng)，下載安裝后，才可以在模擬器或者 引擎主機(jī)8101上運(yùn)行；
如果把 引擎主機(jī)8101比作一個(gè)手機(jī)，這里的每個(gè) app 就相當(dāng)于手機(jī)通過(guò)應(yīng)用商店下載安裝的每一個(gè)應(yīng)用；
本文所描述的內(nèi)容，最重要的一個(gè)目標(biāo)就是：根據(jù)自己的 app 需求，生成 app 代碼，把代碼提交到這個(gè) app_store 目錄下
3、 LuatOS/script/libs：LuatOS 擴(kuò)展庫(kù)，和 factory 中的默認(rèn)出廠軟件目錄一起在模擬器上運(yùn)行或者燒錄到 引擎主機(jī)8101上運(yùn)行；

具體到本項(xiàng)目，軟件代碼架構(gòu)如下圖所示，黃色背景的你將要開發(fā)的某個(gè) app，就是參照本文所描述的內(nèi)容，你要開發(fā)完成的某一個(gè) app

2.1.2 下載代碼到自己的電腦上

大家可以通過(guò) TortoiseGit 或者其他客戶端工具拉取代碼到自己的電腦上；

一定要通過(guò)客戶端下載代碼到自己的電腦上，因?yàn)楹罄m(xù)還要通過(guò)客戶端提交代碼；

在這里僅以 TortoiseGit 為例來(lái)說(shuō)明，如果使用其他的客戶端工具，自行通過(guò) AI 學(xué)習(xí)如何使用；

此處僅僅說(shuō)明 TortoiseGit 最基本的使用方法，遇到不懂的問(wèn)題，可以隨時(shí)溝通或者借助 AI 學(xué)習(xí)；

1、在 https://gitee.com 注冊(cè)賬戶；如果已經(jīng)有賬戶，跳過(guò)這一步；如果賬戶還沒(méi)有添加到 LuatOS 倉(cāng)庫(kù)，在群里面發(fā)出來(lái)賬戶，申請(qǐng)?zhí)砑?；只有將戶?hào)添加到 LuatOS 倉(cāng)庫(kù)，后續(xù)才能提交代碼；
2、下載安裝 git，Git 官網(wǎng)最新 windows 版本下載地址，如果官網(wǎng)地址很難打開，可以通過(guò)國(guó)內(nèi)鏡像 https://mirrors.ustc.edu.cn/github-release/git-for-windows/git/下載，也可以問(wèn)豆包：推薦幾個(gè)國(guó)內(nèi)可以下載git的地址，下載下來(lái)之后，一路默認(rèn)安裝即可；
3、下載安裝 TortoiseGit 客戶端，TortoiseGit 官網(wǎng)最新版本軟件下載地址，一路默認(rèn)安裝，在下圖需要填寫第 1 步注冊(cè)的名稱和郵箱地址：

通過(guò) TortoiseGit 下載代碼，在你的電腦上隨便找一個(gè)目錄，空白處點(diǎn)擊右鍵，選擇 Git Clone…，URL 輸入：https://gitee.com/openLuat/LuatOS.git，Directory 的最后一級(jí)目錄修改為 LuatOS-develop

下載過(guò)程中，如下圖所示：

下載成功后，如下圖所示：

2.1.3 代碼切換到 develop 分支

找到剛才下載的 LuatOS-develop 代碼目錄，鼠標(biāo)點(diǎn)擊右鍵，選擇 TortoiseGit，選擇 Switch/Checkout…，如下圖所示：

在打開的小窗口中，Branch 選擇 remote/origin/develop，然后點(diǎn)擊 OK，如下圖所示

切換成功后，會(huì)彈出下圖所示窗口

此時(shí)，可以打開 LuatOS-develop 目錄，去看下 2.1.1 章節(jié)中所描述的三部分內(nèi)容是否存在，如果存在，就證明切換成功；

2.2 模擬器

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

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

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

2.3 AI 工具

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

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

參考 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ī)則和技能是否安裝成功來(lái)驗(yàn)證安裝配置是否正確；

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

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

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

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

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

這個(gè) app 的名字叫做：智能售貨機(jī)

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

在本示例中，因?yàn)槭圬洐C(jī) app 僅僅是一個(gè)虛擬的演示項(xiàng)目，并不是一個(gè)真正的 app 需求，所以我們描述的原始需求比較簡(jiǎn)單，如下所述：

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

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

根據(jù)定義的 app 需求，可以使用 Trae，也可以使用網(wǎng)頁(yè)版的豆包，也可以使用網(wǎng)頁(yè)版的 deepseek，生成“包含業(yè)務(wù)邏輯、可交互體驗(yàn)”的 html 文件；（經(jīng)過(guò)我的對(duì)比測(cè)試，網(wǎng)頁(yè)版的 deepseek 生成的 html ui 效果比較，你可以根據(jù)自己的實(shí)際情況來(lái)對(duì)比選擇）

在這一章節(jié)，我僅僅演示使用 deepseek 網(wǎng)頁(yè)版來(lái)生成 html 的過(guò)程

4.1 第一輪交互（原始需求）

4.1.1 輸入

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

4.1.2 輸出
等完全生成后，參考下圖體驗(yàn)效果

4.1.3 存在的問(wèn)題

可以看到，生成的 html 中，僅支持投幣購(gòu)買，不支持現(xiàn)在主流的掃碼購(gòu)買，所以這個(gè)問(wèn)題比較嚴(yán)重；

4.2 第二輪交互（僅支持掃碼支付）

4.2.1 輸入

僅支持掃碼支付，選擇支付后，彈出一個(gè)二維碼，讓用戶掃碼支付，提示支付結(jié)果

4.2.2 輸出

4.2.3 存在的問(wèn)題

在 引擎主機(jī)8101上，每個(gè) app 都需要一個(gè)退出按鈕，點(diǎn)擊這個(gè)按鈕可以關(guān)閉退出本 app；

可以看到，生成的 html 中，還沒(méi)有這個(gè)按鈕；

4.3 第三輪交互（支持退出按鈕）

4.3.1 輸入

主頁(yè)的下面增加一個(gè)退出按鈕，可以不實(shí)現(xiàn)退出按鈕的業(yè)務(wù)邏輯

4.3.2 輸出
等完全生成后，第一張圖片已經(jīng)增加了退出按鈕，如下圖所示

4.3.3 html 滿足需求

經(jīng)過(guò)本輪設(shè)計(jì)，生成的三個(gè)頁(yè)面和業(yè)務(wù)邏輯可以滿足需求，所以本階段的 html 設(shè)計(jì)就算完成；

此時(shí)我們把 html 源碼文件保存下來(lái)，命名為 vending_machine.html;

4.4 第四輪交互（導(dǎo)出所有圖片資源）

雖然在 4.3 小節(jié)已經(jīng)生成了最終可以滿足需求的 html 文件，但是還有一個(gè)問(wèn)題沒(méi)有解決，html 中使用到的圖片資源，還沒(méi)有導(dǎo)出來(lái)，所以我們此時(shí)讓 AI 把圖片資源導(dǎo)出來(lái)

4.4.1 輸入

幫我導(dǎo)出這里面的所有圖片資源

4.4.2 輸出

結(jié)果它在 html 效果圖中增加了一個(gè)導(dǎo)出圖片按鈕，如下圖所示，點(diǎn)擊這個(gè)按鈕，就導(dǎo)出了大部分圖片資源

4.4.3 圖片資源

我們把導(dǎo)出的圖片資源包命名為 vending_machine_images.zip

解壓縮打開查看，如下圖所示，除了二維碼圖片異常外，其余圖片看起來(lái)正常

接下來(lái)再次告訴 AI：我點(diǎn)擊導(dǎo)出圖片按鈕后，導(dǎo)出的圖片中，二維碼圖片不正確

AI 開始重新生成，最終點(diǎn)擊導(dǎo)出圖片按鈕后，導(dǎo)出了全部正確的圖片

右鍵點(diǎn)我，另存為，下載圖片資源包

4.5 總結(jié)

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

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

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

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

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

我們?cè)诮酉聛?lái)的編碼環(huán)節(jié)會(huì)用到這兩個(gè)文件；

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

5.1 app 代碼的基本格式要求

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

我們先來(lái)看看 2.1.3 章節(jié)下載下來(lái)的 LuatOS-develop 代碼倉(cāng)庫(kù)中的 app_store 目錄，在 app_store 內(nèi)，每個(gè)子目錄都是一個(gè)單獨(dú)的 app，如下圖所示：

我們以 airplane_battle 為例，來(lái)說(shuō)明 app 內(nèi)部的代碼結(jié)構(gòu)和格式要求：

5.1.1 main.lua

app 的入口文件，必須存在于單獨(dú) app 的根目錄下；

文件內(nèi)容按照以下格式編寫即可：

PROJECT = "AIRPLANE_BATTLE" VERSION = "001.999.000" log.info("main", PROJECT, VERSION) require "airplane_win" sys.publish("OPEN_AIRPLANE_BATTLE_WIN") sys.run()

注意事項(xiàng)如下：

前 4 行代碼，對(duì) app 的項(xiàng)目和版本信息進(jìn)行配置，并且打??；實(shí)際上沒(méi)有任何用處，但是為了和我們 LuatOS 開發(fā)的完整項(xiàng)目中的 main.lua 格式保持一致，所以也加上了；減少對(duì)外溝通解釋的成本；
第 6 行的 require "airplane_win" 和第 8 行的 sys.publish("OPEN_AIRPLANE_BATTLE_WIN")，加載當(dāng)前 app 的 user 目錄下用戶腳本模塊，并且運(yùn)行；具體的每個(gè) app，需要根據(jù)自己的 app 業(yè)務(wù)邏輯加載很行；
第 10 行的 sys.run()，實(shí)際上沒(méi)有任何用處，但是為了和我們 LuatOS 開發(fā)的完整項(xiàng)目中的 main.lua 格式保持一致，所以也加上了 sys.run()的調(diào)用；減少對(duì)外溝通解釋的成本；

5.1.2 icon.png

app 的圖標(biāo)文件，必須存在于單獨(dú) app 的根目錄下；

要求：png 格式，32*32 像素，背景色透明；

5.1.3 meta.json

app 的元數(shù)據(jù)文件，必須存在于單獨(dú) app 的根目錄下；

文件內(nèi)容按照以下格式編寫即可：

{ "app_name_cn": "飛機(jī)大戰(zhàn)", "app_name_en": "airplane-battle", "version": "1.0.0", "publish_time": "2026-04-04 12:00:00", "category": "游戲", "description": "拖拽飛機(jī)躲避敵機(jī)，自動(dòng)發(fā)射子彈并挑戰(zhàn)更高分?jǐn)?shù)", "resolution": "480x800", "supported_models": { "Air8101": [ { "firmware_id": 104, "min_firmware_version": 2010 }, { "firmware_id": 105, "min_firmware_version": 2010 } ] }, "zip_size_kb": 100, "origin_size_kb": 300 }

注意事項(xiàng)如下：

1. 文件內(nèi)容必須是 json 格式；
   
2. version 的格式必須是 x.y.z 格式，從 1.0.0 開始；
   
3. 其余字段，參考示例都很好理解；

5.1.4 user 目錄

1. 存放 app 具體功能模塊的用戶 Lua 腳本文件；
   
2. user 目錄下不能再包含子目錄；

5.1.5 res 目錄

1. 存放 app 使用到的圖片，音頻，視頻，字體等資源文件；
   
2. 只要不是 Lua 腳本文件，都存放到這里；
   
3. 代碼中使用時(shí)，直接以/luadb/*.*方式使用
   
4. res 目錄下不能再包含子目錄；

5.1.6 libs 目錄

1. 存放 app 使用到的擴(kuò)展庫(kù)腳本文件；
   
2. 如果用到的擴(kuò)展庫(kù)腳本文件，在默認(rèn)出廠軟件中已經(jīng)包含，則此處的 libs 目錄是否包含重復(fù)的擴(kuò)展庫(kù)腳本文件都沒(méi)有任何影響，即使包含了也沒(méi)有任何用處，app 使用的仍然是默認(rèn)出廠軟件環(huán)境中的擴(kuò)展庫(kù)腳本文件；
   
3. 如果用到的擴(kuò)展庫(kù)腳本文件，在默認(rèn)出廠軟件中沒(méi)有被包含，則此處的 libs 目錄必須包含進(jìn)來(lái)；
   
4. 為了節(jié)省空間，如果不確定默認(rèn)出廠軟件中是否已經(jīng)包含 app 需要的擴(kuò)展庫(kù)文件，則可以默認(rèn)已經(jīng)包含，在調(diào)試 app 過(guò)程中，如果發(fā)現(xiàn)沒(méi)有需要的擴(kuò)展庫(kù)，會(huì)提示出錯(cuò)，此時(shí)再加上擴(kuò)展庫(kù)腳本文件調(diào)試；
   
5. 已經(jīng)包含在默認(rèn)出廠軟件中的擴(kuò)展庫(kù)文件有：dhcpsrv、dnsproxy、exapp、excloud、exmtn、exnetif、exwin、httpdns、httpplus、udpsrv（2026 年 4 月 7 日的默認(rèn)出廠軟件包含這么多，僅供參考，后續(xù)可能會(huì)動(dòng)態(tài)增加或者刪除）；
   
6. libs 目錄下不能再包含子目錄；

5.1.7 其他注意事項(xiàng)

1. 每個(gè)獨(dú)立的 app 內(nèi)部不再需要初始化 lcd 和 tp，因?yàn)樵谀J(rèn)出廠軟件中已經(jīng)完成這兩項(xiàng)動(dòng)作
2. 每個(gè) app 都可以使用 fskv 來(lái)存儲(chǔ)鍵值對(duì)參數(shù)，僅可以讀、寫、清除 app 自己創(chuàng)建的參數(shù)，沒(méi)有權(quán)限操作每個(gè) app 之外的其他 fskv 參數(shù)
3. 每個(gè) app 都可以使用 io 核心庫(kù)執(zhí)行文件和目錄操作，僅可以控制自己 app 內(nèi)的目錄和文件，自己 app 的所有目錄和文件都可讀，自己 app 內(nèi)的部分目
4. 錄和文件可寫，操作目錄和文件時(shí)以/luadb/或者/開頭，app 內(nèi)部會(huì)自動(dòng)做路徑映射，路徑映射關(guān)系如下（前面三種只讀，最后兩種可讀寫）
5. /luadb/icon.png：映射到 \/icon.png（應(yīng)用圖標(biāo)，特殊處理）
   /luadb/xxx.lua 或 /luadb/xxx.luac：按優(yōu)先級(jí)映射
   \/xxx.lua 或者 luac
   \/user/xxx.lua 或者 luac
   \/libs/xxx.lua 或者 luac
6. /luadb/xxx（非 lua 文件）：映射到 \/res/xxx（資源文件目錄）
7. /ram/xxx：直接返回 /ram/xxx（內(nèi)存文件系統(tǒng)，不做轉(zhuǎn)換）
8. /xxx（其他以/開頭的路徑）：映射到 \/data/xxx（數(shù)據(jù)存儲(chǔ)目錄）

5.2 Trae 生成 app 代碼前的準(zhǔn)備工作

在了解了每個(gè) app 的代碼基本格式和要求之后，接下來(lái)我們使用 Trae 來(lái)生成自動(dòng)售貨機(jī)的 app 代碼；

注意：5.2.1 和 5.2.2 的順序不能顛倒，必須是先打開項(xiàng)目代碼，然后再驗(yàn)證項(xiàng)目規(guī)則和技能

如果此處驗(yàn)證不通過(guò)，返回到本文的 2.3 章節(jié)重新學(xué)習(xí)操作一遍

5.2.1 打開 Trae，切換為 SOLO 模式，打開 LuatOS-develop 項(xiàng)目代碼

1、打開 Trae，切換為 SOLO 模式；如下圖所示，在工具的左上角有 SOLO 字樣

5.2.2 驗(yàn)證 Trae 中的智能體，模型，項(xiàng)目規(guī)則和技能配置是否正確

1、使用 luatos-docs-code 智能體，寫本篇文章時(shí)，最新版本為 luat-docs-code-101，當(dāng)你閱讀本文章時(shí)，如果有更新的版本，使用更新的版本即可；如下圖所示，在會(huì)話窗口有智能體名稱；如果不對(duì)，點(diǎn)擊箭頭處，選擇正確的智能體

1. 根據(jù)實(shí)際情況配置合適的模型
   
2. Trae 中內(nèi)置的免費(fèi)大模型，會(huì)經(jīng)常排隊(duì)，并且性能不可控，容易出問(wèn)題，所以推薦參考：001 發(fā)送會(huì)話請(qǐng)求時(shí)，提示排隊(duì)，如何解決？的方法，訂閱收費(fèi)的大模型（目前每月 40 元）；這樣可以大大提高 AI 編程的質(zhì)量；如果不想使用收費(fèi)模型，在非正常工作時(shí)間段內(nèi)，使用內(nèi)置的免費(fèi)模型也能勉強(qiáng)湊合；
   
3. 選擇大模型時(shí)，經(jīng)過(guò)實(shí)際測(cè)試，GLM，MiniMax 的效果比較好，大家根據(jù)自己實(shí)際使用的情況對(duì)比選擇；
   
4. 最終建議：能使用收費(fèi)模型盡量使用收費(fèi)模型，會(huì)讓你在接下來(lái)的工作中省很多時(shí)間
   

5. 模型配置如下圖所示，我使用的是收費(fèi)的 GLM-4.7 模型

6. 在會(huì)話窗口輸入內(nèi)容：完整的告訴我，給你配置了哪些提示詞、規(guī)則和技能？ 如果給出的回復(fù)包含以下紅框中的幾點(diǎn)信息，則表示項(xiàng)目規(guī)則和技能配置正確

5.2.3 新建一個(gè)會(huì)話任務(wù)，專門用來(lái)處理售貨機(jī) app 代碼生成調(diào)試

5.2.4 打開編輯器窗口，可以查看 LuatOS-develop 目錄內(nèi)容

5.3 Trae 生成 app 代碼

為了演示整個(gè)過(guò)程的字節(jié)，此處拆分為多步來(lái)逐步生成

5.3.1 在 app_store 下創(chuàng)建 vending_machine 目錄

首先我們?cè)?LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\app_store 下創(chuàng)建一個(gè) vending_machine 目錄；

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

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

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

3.在會(huì)話窗口繼續(xù)輸入 在這個(gè)目錄下創(chuàng)建一個(gè)vending_machine目錄，如下圖所示，然后點(diǎn)擊發(fā)送箭頭按鈕

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

5.3.2 在 vending_machine 目錄下創(chuàng)建 res，user，libs 目錄

會(huì)話窗口輸入：在vending_machine目錄下創(chuàng)建res，user，libs目錄

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

5.3.3 把第四章節(jié)生成的 html 和圖片文件復(fù)制過(guò)來(lái)

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

手動(dòng)將 vending_machine.html 復(fù)制到 vending_machine 目錄下；
將下圖紅框中的幾張圖片改名為英文名稱，然后復(fù)制到 vending_machine/res 目錄下

完成這兩步操作之后，如下圖所示

5.3.4 第一次自動(dòng)生成 app 代碼

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

1、參考：G:\code\LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\app_store\vending_machine\vending_machine.html 中的UI界面和交互邏輯，在vending_machine中生成LuatOS代碼 2、代碼文件格式以及內(nèi)容參考G:\code\LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\app_store\下的其他目錄，包含main.lua，meta.json，vending_machine\user目錄下存儲(chǔ)具體UI和業(yè)務(wù)功能的lua代碼文件 3、代碼中需要的圖片資源在vending_machine\user目錄下，代碼中用到的圖片資源，使用\luadb\xxx.png的路徑方式

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

可以看出，這次交互，生成了 main.lua、meta.json、vending_machine_win.lua 三個(gè)文件，如下圖所示

依次點(diǎn)擊這三個(gè)文件，在中間的編輯器窗口，點(diǎn)擊保留按鈕，如下圖所示

5.3.5 手動(dòng)生成一個(gè)售貨機(jī)的 icon.png
之前嘗試過(guò)讓 Trae 從網(wǎng)上搜索一個(gè) app 的圖標(biāo)，處理成 32*32 像素，背景色透明的樣式；

但是 Trae 搜索的過(guò)程非常漫長(zhǎng)，看起來(lái)效率比較低；

所以此處，就不再使用 Trae 來(lái)生成 icon.png；

首先使用網(wǎng)頁(yè)版的豆包，輸入 幫我搜索或者生成一個(gè)適用于智能售貨機(jī)應(yīng)用的圖標(biāo)，png格式，32*32像素，背景色透明，豆包可以生成，但是像素不滿足需求，一直輸出 20482048 像素，讓他改成 3232 像素，總是改不過(guò)來(lái)；

接著使用網(wǎng)頁(yè)版的 deepseek，輸入 幫我搜索或者生成一個(gè)適用于智能售貨機(jī)應(yīng)用的圖標(biāo)，png格式，32*32像素，背景色透明，直接生成了一個(gè) html 頁(yè)面，運(yùn)行這個(gè)頁(yè)面，可以下載下來(lái)一個(gè) 32*32 像素的圖標(biāo)，能直接使用，如下圖所示

把下載下來(lái)的圖片，改名為 icon.png，然后復(fù)制到 vending_machine 目錄下，如下圖所示

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

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

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

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

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

如下圖所示，將

G:\code\LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\app_store

整個(gè)目錄復(fù)制到 LuatOS 模擬器所在的目錄

G:\code\LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\app_store

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

1. 雙擊打開模擬器所在目錄的 cmd，如下圖所示

在命令行窗口粘貼輸入：

luatos-pc.exe G:\code\LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\factory\ G:\code\LuatOS-develop\script\libs\

如下圖所示

按回車鍵，就可以在模擬器上運(yùn)行 引擎主機(jī)8101出廠軟件的出廠軟件，啟動(dòng)后如下圖所示：

2. 點(diǎn)擊右下角的 主菜單 按鈕，打開主菜單窗口，如下圖所示，可以看到，出現(xiàn)了 智能售貨機(jī) app

點(diǎn)擊 智能售貨機(jī) app 圖標(biāo)，就可以正式運(yùn)行這個(gè) app；我們點(diǎn)擊一下看看是否可以正常運(yùn)行；點(diǎn)擊之后，第一個(gè)窗口如下圖所示

點(diǎn)擊掃碼支付按鈕，打開二維碼支付窗口如下圖所示

點(diǎn)擊我已支付完成按鈕，直接提示運(yùn)行錯(cuò)誤，模擬器異常關(guān)閉，如下圖所示

1. 除此之外，很多圖片和小圖標(biāo)都沒(méi)有顯示出來(lái)
2. 總的來(lái)說(shuō)，雖然已經(jīng)有基本的輪廓，但是也存在不少問(wèn)題，這里就不完整列舉具體的問(wèn)題了，接下來(lái)我們使用智能體來(lái)修復(fù)每一個(gè)問(wèn)題，嘗試修復(fù)之后，再次復(fù)制 app_store 代碼到模擬器所在目錄下，再次運(yùn)行模擬器來(lái)驗(yàn)證

6.3 修復(fù)問(wèn)題：商品中的圖片沒(méi)有正常顯示

6.3.1 第一輪修復(fù)

輸入：

商品中的圖片沒(méi)有正常顯示，注意使用 g:\code\LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\app_store\vending_machine\res 中的圖片資源

思考修復(fù)過(guò)程如下圖：

從智能體的思考過(guò)程我們可以看出，他把 emoji 替換為了 res 目錄下的圖片資源，看起來(lái)思路沒(méi)問(wèn)題，我們先不管智能體修復(fù)的是否正確，先來(lái)看下它這次具體修改了什么代碼；這次僅僅修改了 vending_machine_win.lua，打開這個(gè)文件，如下圖所示，點(diǎn)擊上下切換按鈕，可以查看具體的修改內(nèi)容

如果你會(huì) LuatOS 編程，就知道，智能體這次的修復(fù)還是存在問(wèn)題；我們先不管有什么問(wèn)題，把 app_store 復(fù)制到模擬器目錄，再運(yùn)行一下看看效果，仍然沒(méi)有顯示出來(lái)圖片

6.3.2 第二輪修復(fù)

輸入：

你剛才修復(fù)之后，圖片仍然沒(méi)有顯示出來(lái)

思考修復(fù)過(guò)程如下圖（重點(diǎn)關(guān)注紅框部分）：

復(fù)制代碼到模擬器目錄之后，模擬器關(guān)閉之后再次運(yùn)行，效果圖和上次完全一樣，圖片仍然沒(méi)有顯示出來(lái)，此時(shí)還多了一些錯(cuò)誤日志，如下圖所示

6.3.3 第三輪修復(fù)

輸入：

你剛才修復(fù)之后，圖片仍然沒(méi)有顯示出來(lái)，另外出現(xiàn)了以下錯(cuò)誤日志信息 [2026-04-06 09:54:17.608][00000008.575] E/user.[/app_store/vending_machine/] resolve_file_path path must start with /luadb/ or /: \luadb\cola.png [2026-04-06 09:54:17.613][00000008.580] E/user.[/app_store/vending_machine/] resolve_file_path path must start with /luadb/ or /: \luadb\sprite.png [2026-04-06 09:54:17.616][00000008.583] E/user.[/app_store/vending_machine/] resolve_file_path path must start with /luadb/ or /: \luadb\orange_juice.png [2026-04-06 09:54:17.619][00000008.586] E/user.[/app_store/vending_machine/] resolve_file_path path must start with /luadb/ or /: \luadb\material_water.png [2026-04-06 09:54:17.623][00000008.590] E/user.[/app_store/vending_machine/] resolve_file_path path must start with /luadb/ or /: \luadb\potato_chips.png [2026-04-06 09:54:17.624][00000008.592] E/user.[/app_store/vending_machine/] resolve_file_path path must start with /luadb/ or /: \luadb\chocolate.png [2026-04-06 09:54:17.628][00000008.595] E/user.[/app_store/vending_machine/] resolve_file_path path must start with /luadb/ or /: \luadb\biscuit.png [2026-04-06 09:54:17.632][00000008.599] E/user.[/app_store/vending_machine/] resolve_file_path path must start with /luadb/ or /: \luadb\energy_drink.png

思考修復(fù)過(guò)程如下圖（重點(diǎn)關(guān)注紅框部分）：

可以看出，這次的商品圖片和二維碼圖片都顯示出來(lái)了，但是商品圖片太大，顯示區(qū)域太小，我們需要調(diào)整一下圖片大小才行；

另外還有一個(gè)比較好的結(jié)果，我們讓它修復(fù)商品中的圖片顯示問(wèn)題，它把二維碼圖片顯示問(wèn)題也修復(fù)了，它會(huì)一起修復(fù)類似的問(wèn)題；

6.3.4 第四輪修復(fù)

輸入：

商品中的圖片可以正常顯示了，但是圖片尺寸太大，沒(méi)有顯示完整

思考修復(fù)過(guò)程如下圖（重點(diǎn)關(guān)注紅框部分）：

6.3.5 第五輪修復(fù)

輸入：

圖片還是沒(méi)有顯示完整，你要縮小圖片尺寸，才能顯示完整，好好思考一下

思考修復(fù)過(guò)程如下圖（重點(diǎn)關(guān)注紅框部分）：

復(fù)制代碼到模擬器目錄之后，模擬器關(guān)閉之后再次運(yùn)行，仍然沒(méi)有顯示完整；

6.3.6 第六輪修復(fù)

看來(lái)智能體在這方面的處理能力比較差，接下來(lái)我們需要人工介入，詳細(xì)告訴他什么原因，以及怎么修改，看他能不能完成修改

輸入：

圖片還是沒(méi)有顯示完整，你之前的修改思路不對(duì)，你應(yīng)該看一下創(chuàng)建的 airui.img 控件的寬和高是多少，然后再對(duì)比看下實(shí)際圖片的寬和高是多少；代碼中，airui.image 的 w 和 h 分別是 100 和 60，實(shí)際上最大圖片的尺寸的 w 和 h 分別為 268 和 138，每張圖片的尺寸不完全一樣；你要么把所有原始圖片給我處理一下，尺寸變??；要么寫一套算法，自動(dòng)縮放這些圖片來(lái)適配 airui.image 的尺寸

思考修復(fù)過(guò)程如下圖（重點(diǎn)關(guān)注紅框部分）：

復(fù)制代碼到模擬器目錄之后，模擬器關(guān)閉之后再次運(yùn)行，效果圖如下所示：

圖片終于可以正常顯示了！

通過(guò) 6.3 小節(jié)調(diào)試修復(fù)這個(gè)問(wèn)題，我們可以總結(jié)出重要的一點(diǎn)：智能體修復(fù)過(guò)程中，你要學(xué)會(huì)看代碼，根據(jù)代碼思路和實(shí)際效果，給智能體更詳細(xì)的輸入信息和指令，它可以理解得更透徹！

6.4 修復(fù)問(wèn)題：很多小圖標(biāo)顯示不正常

問(wèn)題如下圖紅框所示

6.4.1 第一輪修復(fù)

輸入：

以下幾類文字前面的小圖標(biāo)沒(méi)有顯示出來(lái)，不用顯示這些圖標(biāo)了，把圖標(biāo)刪除，刪除后，適當(dāng)調(diào)整對(duì)應(yīng)的文字位置，讓顯示更美觀： 1、當(dāng)前選中前面的圖標(biāo) 2、每種商品價(jià)格前面的圖標(biāo) 3、掃碼支付等按鈕上面的圖標(biāo) 4、還有其他類似的這種小圖標(biāo)

思考修復(fù)過(guò)程如下圖（重點(diǎn)關(guān)注紅框部分，這一次思考處理的過(guò)程很長(zhǎng)，有 10 幾分鐘之久，感覺(jué) GLM-4.7 大模型變慢了，如果以后還是這么慢，可以考慮換 MiniMAX 模型試下）：

復(fù)制代碼到模擬器目錄之后，模擬器關(guān)閉之后再次運(yùn)行，效果圖如下所示：

可以看到，大部分的小圖標(biāo)已經(jīng)刪除了，還有三處沒(méi)有刪除

6.4.2 第二輪修復(fù)

輸入：

大部分的圖標(biāo)已經(jīng)被刪除了，還有以下三處沒(méi)有刪除： 1、選中商品后，在窗口右上角，顯示商品名稱和價(jià)格之間的圖標(biāo) 2、二維碼支付窗口，價(jià)格左方的圖標(biāo) 3、二維碼支付窗口，我已支付完成按鈕上的圖標(biāo)

思考修復(fù)過(guò)程如下圖（重點(diǎn)關(guān)注紅框部分）：

復(fù)制代碼到模擬器目錄之后，模擬器關(guān)閉之后再次運(yùn)行，效果圖如下所示：

小圖標(biāo)顯示不正常的問(wèn)題已經(jīng)全部修復(fù)！

6.5 修復(fù)問(wèn)題：刪除主窗口最下方的一段提示文字

問(wèn)題如下圖紅框所示

6.5.1 第一輪修復(fù)

因?yàn)樵谇懊鎯奢啎?huì)話過(guò)程中，使用的收費(fèi) GLM-4.7 模型，處理速度有點(diǎn)兒慢；

所以，在這里，我把模型切換為收費(fèi)的 MiniMAX-M2.5，看看處理速度和效果如何，如下圖所示

輸入：

刪除主窗口下方的 “點(diǎn)擊商品-> 掃碼支付…”這一行提示語(yǔ)

思考修復(fù)過(guò)程如下圖（重點(diǎn)關(guān)注紅框部分，讓人驚喜的是，它還把之前漏掉的一處修復(fù)給解決了）：

復(fù)制代碼到模擬器目錄之后，模擬器關(guān)閉之后再次運(yùn)行，效果圖如下所示：

最下方的提示語(yǔ)，已經(jīng)被刪除！

6.6 修復(fù)問(wèn)題：掃碼支付窗口布局調(diào)整

問(wèn)題如下圖紅框所示（布局不好，豎直滾動(dòng)條滑動(dòng)才能看到完整的按鈕）：

6.6.1 第一輪修復(fù)

輸入：

掃碼支付窗口，刪除豎直滾動(dòng)條，我已支付完成和取消兩個(gè)按鈕并排顯示完整

思考修復(fù)過(guò)程如下圖（重點(diǎn)關(guān)注紅框部分）：

復(fù)制代碼到模擬器目錄之后，模擬器關(guān)閉之后再次運(yùn)行，效果圖如下所示：

雖然整體窗口的整體豎直滾動(dòng)條，已經(jīng)去掉了，并且下面的兩個(gè)按鈕也并排正常顯示了；

但是二維碼區(qū)域卻給加上了豎直滾動(dòng)條，還要繼續(xù)修改；

6.6.2 第二輪修復(fù)

輸入：

二維碼那個(gè)區(qū)域也不要豎直滾動(dòng)條

思考修復(fù)過(guò)程如下圖（重點(diǎn)關(guān)注紅框部分）：

復(fù)制代碼到模擬器目錄之后，模擬器關(guān)閉之后再次運(yùn)行，仍然沒(méi)有解決；

6.6.3 第三輪修復(fù)

輸入：

改了之后還是沒(méi)有顯示完整，還有豎直滾動(dòng)條，你再好好計(jì)算一下，看看控件的寬和高，看看實(shí)際圖片的寬和高

思考修復(fù)過(guò)程如下圖（重點(diǎn)關(guān)注紅框部分）：

復(fù)制代碼到模擬器目錄之后，模擬器關(guān)閉之后再次運(yùn)行，效果圖如下所示：

已經(jīng)解決問(wèn)題！

6.7 修復(fù)問(wèn)題：掃碼支付窗口，點(diǎn)擊我已支付按鈕后異常死機(jī)

問(wèn)題如下圖所示

6.7.1 第一輪修復(fù)

輸入：

點(diǎn)擊掃碼支付窗口的我已支付成功按鈕后，出現(xiàn)異常日志： E/main /app_store/vending_machine/user/vending_machine_win.lua:138: attempt to call a nil value (method ‘set_alpha’)

思考修復(fù)過(guò)程如下圖（重點(diǎn)關(guān)注紅框部分）：

復(fù)制代碼到模擬器目錄之后，模擬器關(guān)閉之后再次運(yùn)行，仍然沒(méi)有解決，此時(shí)提示找不到 set_opacity 方法；

此時(shí)我們看一下 vending_machine_win.lua 的 138 行代碼 card.container:set_opacity(255)，可以知道這個(gè)異常表示 airui 的容器組件找不到 set_opacity 函數(shù)，我們?cè)偃?airui 核心庫(kù)看一下，確實(shí)不支持這個(gè)函數(shù)，應(yīng)該是 ai 自己杜撰的一個(gè)函數(shù)；接下來(lái)我們不告訴智能體怎么修復(fù)，僅僅告訴它錯(cuò)誤信息，看它能不能解決；

6.7.2 第二輪修復(fù)

輸入：

點(diǎn)擊掃碼支付窗口的我已支付成功按鈕后，出現(xiàn)異常日志： E/main /app_store/vending_machine/user/vending_machine_win.lua:138: attempt to call a nil value (method ‘set_opacity’)

思考修復(fù)過(guò)程如下圖（重點(diǎn)關(guān)注紅框部分）：

復(fù)制代碼到模擬器目錄之后，模擬器關(guān)閉之后再次運(yùn)行；

運(yùn)行正常！

6.8 增加功能：實(shí)現(xiàn)退出按鈕的邏輯

目前主窗口的退出按鈕還沒(méi)有任何功能，所以我們需要添加退出業(yè)務(wù)邏輯；

6.8.1 第一輪交互

輸入：

目前的退出按鈕還沒(méi)有實(shí)際功能，參考 app_store 下面的其他 app 的退出業(yè)務(wù)邏輯代碼，實(shí)現(xiàn)退出業(yè)務(wù)邏輯

思考修復(fù)過(guò)程如下圖（重點(diǎn)關(guān)注紅框部分）：

復(fù)制代碼到模擬器目錄之后，模擬器關(guān)閉之后再次運(yùn)行，退出功能正常，可以關(guān)閉當(dāng)前 app，返回到主菜單；

6.9 總結(jié)

6.9.1 完整演示

截止到這里，基本的售貨機(jī) UI 和模擬業(yè)務(wù)邏輯已經(jīng)調(diào)試完成，可以正常運(yùn)行了，下面是完整的演示視頻

6.9.2 后續(xù)功能迭代

還有其他一些小問(wèn)題或者新的功能需求，大家如果自己想練手，可以借助 Trae 進(jìn)一步解決實(shí)現(xiàn)，例如：

1. 商品和滾動(dòng)條小范圍重疊顯示的問(wèn)題
2. 各個(gè)控件的色彩和 html 文件不符
3. 二維碼動(dòng)態(tài)顯示
4. 給代碼添加詳細(xì)注釋
5. …

七、基本功能測(cè)試說(shuō)明

1. app 內(nèi)部有 退出 按鈕，可以點(diǎn)擊返回到 主菜單窗口；app 退出后，在主菜單窗口，再次點(diǎn)擊，可以再次正常進(jìn)入 app；如果有問(wèn)題，參考 6.8 章節(jié)檢查代碼
2. app 內(nèi)部的基本業(yè)務(wù)邏輯和 UI 界面都正常
3. 退出 app 后，app 內(nèi)部的業(yè)務(wù)邏輯也要停止，不要在后臺(tái)運(yùn)行；如果自己的 app 內(nèi)部有運(yùn)行日志，可以通過(guò)日志判斷是否在后臺(tái)運(yùn)行；

八、UI分辨率自適應(yīng)說(shuō)明

1、“智能售貨機(jī)”app的UI界面，目前基于豎屏480*800分辨率設(shè)計(jì)，我們稱這個(gè)分辨率為“app基準(zhǔn)分辨率”；

2、有多款不同lcd分辨率的豎屏引擎主機(jī)，例如Air8000W引擎主機(jī)的lcd分辨率為320480，Air8101引擎主機(jī)的lcd分辨率為480854，Air1602引擎主機(jī)的lcd分辨率為720*1280，后續(xù)可能還有其他型號(hào)的引擎主機(jī)；

3、引擎主機(jī)的默認(rèn)出廠軟件，可以根據(jù)“app基準(zhǔn)分辨率”，自適應(yīng)為引擎主機(jī)硬件的lcd分辨率，這個(gè)自適應(yīng)過(guò)程是自動(dòng)完成的，不需要你的app做特殊處理；

4、也就是說(shuō)，雖然app只是基于了某一種分辨率來(lái)設(shè)計(jì)，但是從理論上說(shuō)，app可以自動(dòng)地在不同分辨率的引擎主機(jī)和模擬器上自適應(yīng)運(yùn)行；

5、雖然引擎主機(jī)的出廠軟件支持自適應(yīng)分辨率功能，不需要app內(nèi)部再設(shè)計(jì)自適應(yīng)；但是也不禁止你在app內(nèi)部設(shè)計(jì)自適應(yīng)分辨率功能，如果你在app內(nèi)部設(shè)計(jì)了自適應(yīng)分辨率功能，在app內(nèi)的meta.json文件中，將display_zoom字段填寫為adaptive即可；

九、打包 app，在應(yīng)用市場(chǎng)上架

在本地模擬器上開發(fā)調(diào)試完成會(huì)后，就可以打包提交到應(yīng)用市場(chǎng)了，打包提交流程如下：

1、找到本地的 vending_machine 目錄，在這個(gè)目錄下，僅保留本文 5.1 章節(jié)所描述的文件，其余文件和文件夾全部刪除，例如我們?cè)?5.3.3 章節(jié)復(fù)制了 vending_machine.html，此時(shí)需要把這個(gè)文件從本目錄移除；在我的電腦上完整路徑為 G:\code\LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\app_store\vending_machine，最終這個(gè)目錄內(nèi)的內(nèi)容如下圖所示

2、返回到 vending_machine 目錄所在的上一級(jí)目錄 app_store，在這里找到 vending_machine 目錄，在 vending_machine 目錄點(diǎn)擊鼠標(biāo)右鍵，使用壓縮工具選項(xiàng)，壓縮為 vending_machine.zip；這里需要特別注意：壓縮后的 zip 文件，第一級(jí)是 vending_machine 目錄，完整的結(jié)構(gòu)如下（不同壓縮工具的壓縮表現(xiàn)不一樣，無(wú)論使用什么工具壓縮，要確保壓縮后的 zip 文件中的目錄結(jié)構(gòu)滿足下面的要求）：

vending_machine.zip

|------vending_machine 目錄

|------main.lua

|------meta.json

|------icon.png

|------user 目錄

|------res 目錄

|------libs 目錄

3、在電腦上訪問(wèn)：https://iot.luatos.com/，登錄之后，打開 Turnkey方案->我的應(yīng)用管理 菜單，點(diǎn)擊 應(yīng)用上傳 按鈕，在彈出的 上傳應(yīng)用 小窗口，上傳 vending_machine.zip 文件即可，如下面幾張圖片所示

十、在模擬器上，通過(guò)應(yīng)用市場(chǎng)，下載安裝 app，運(yùn)行驗(yàn)證 app

在本章節(jié)，我們通過(guò)模擬器的應(yīng)用市場(chǎng)去下載、安裝并且測(cè)試 vending_machine 這個(gè) app，操作過(guò)程如下：

1、刪除 LuatOS 模擬器所在目錄下的 app_store 目錄，如下圖所示

2、模擬器上的 app_store 目錄有什么作用？ - app_store 是模擬器內(nèi)置文件系統(tǒng)根目錄/下的一個(gè)子目錄，所有的 app 都保存到了這個(gè) app_store 目錄下； - 在本篇文章的前文中，我們開發(fā)調(diào)試 vending_machine 這個(gè) app 的代碼時(shí)，為了開發(fā)調(diào)試方便，都是直接將代碼放到模擬器同級(jí)的 app_store 目錄下，模擬器可以直接識(shí)別并且運(yùn)行； - 現(xiàn)在我們開發(fā)調(diào)試結(jié)束，將 app 上傳到了應(yīng)用市場(chǎng)，可以通過(guò)模擬器端的應(yīng)用市場(chǎng)功能，將 app 下載安裝到模擬器的內(nèi)置文件系統(tǒng)/app_store/目錄下；所以我們需要在下載安裝 app 之前，將之前我們手動(dòng)復(fù)制過(guò)來(lái)的 app_store 下面的 app 刪除；方便在真實(shí)的使用環(huán)境中測(cè)試驗(yàn)證； 3、運(yùn)行模擬器，進(jìn)入主菜單，打開應(yīng)用市場(chǎng)功能，找到智能售貨機(jī)，安裝成功后，返回，再打開主菜單，就能看到這個(gè) app，運(yùn)行測(cè)試即可，如下面幾張圖片所示

4、安裝成功之后，我們?cè)倏茨M器所在的目錄，自動(dòng)創(chuàng)建了 app_store 目錄，并且 vending_machine 子目錄保存到了這個(gè)目錄中，如下圖所示

十一、在 引擎主機(jī)8101上，通過(guò)應(yīng)用市場(chǎng)，下載安裝 app，運(yùn)行驗(yàn)證 app

上一章節(jié)，如果在模擬器上已經(jīng)測(cè)試通過(guò)；

在 引擎主機(jī)8101測(cè)試，功能上不應(yīng)該出問(wèn)題，只有可能出現(xiàn)性能問(wèn)題（例如打開 app 比較慢，運(yùn)行 app 比較卡），如果出現(xiàn)性能問(wèn)題，可以告訴 Trae，看看它是否可以優(yōu)化，如果無(wú)法優(yōu)化，發(fā)出來(lái)一起討論，看看是否可以優(yōu)化以及如何優(yōu)化；

在 引擎主機(jī)8101上，下載、安裝并且測(cè)試 vending_machine 這個(gè) app，操作過(guò)程如下：

1. 準(zhǔn)備一塊 合宙引擎主機(jī)8101和一根 type-c usb 數(shù)據(jù)線；
2. 使用 Luatools 同時(shí)燒錄以下四部分內(nèi)容：
3. Air8101 105 編號(hào)的最新版本內(nèi)核固件（https://docs.openluat.com/air8101/luatos/firmware/），如果找不到 105 編號(hào)的固件，在內(nèi)部群溝通獲??；
4. LuatOS 倉(cāng)庫(kù)的 develop 分支中 引擎主機(jī)8101的默認(rèn)出廠軟件（factory）
5. LuatOS 倉(cāng)庫(kù)的 develop 分支中的擴(kuò)展庫(kù)（LuatOS/script/libs），一定不要勾選使用 Luatools 的默認(rèn) lib（默認(rèn)發(fā)布的 lib 還沒(méi)支持全部功能）
6. 文件系統(tǒng)中選擇 hzfont 字庫(kù)（參考燒錄 hzfont 字庫(kù)）
7. 燒錄成功后，開機(jī)運(yùn)行，之后的操作方式和模擬器上的操作方式完全一樣；

十二、提交代碼到 LuatOS 倉(cāng)庫(kù)的 develop 分支

自己開發(fā)的 app 驗(yàn)證通過(guò)之后，就可以提交代碼到服務(wù)器了，使用 TortoiseGit 提交代碼，簡(jiǎn)單的操作過(guò)程如下（更詳細(xì)的流程，自行上網(wǎng)或者借助 AI 學(xué)習(xí)）：

1、在自己電腦上的代碼倉(cāng)庫(kù)目錄的空白區(qū)域，鼠標(biāo)點(diǎn)擊右鍵，先 pull 下來(lái)服務(wù)器最新代碼，如下圖所示

2、在自己電腦上的代碼倉(cāng)庫(kù)目錄的空白區(qū)域，鼠標(biāo)點(diǎn)擊右鍵，add 自己新增的文件，如下圖所示

3、在自己電腦上的代碼倉(cāng)庫(kù)目錄的空白區(qū)域，鼠標(biāo)點(diǎn)擊右鍵，提交自己的修改，如下面兩張圖片所示