Air8101诗词闯关APP 开发指南

在嵌入式硬件与轻量化UI应用深度融合的当下，依托合宙Air8101 V001畅玩板的硬件支撑，结合LuatOS系统的高效运行特性与AirUI轻量化图形开发框架的便捷优势，我们启动了诗词闯关app（SCCG）的开发项目。

概述：

本篇旨在讲述在引擎 8101 开发诗词闯关 app（SCCG）项目的详细过程。

诗词闯关 app，是一款使用合宙 AirUI 轻量化图形开发框架，基于工业引擎 Air8101引擎主机硬件和 LuatOS 系统软件开发的一款 UI 应用程序。

诗词闯关 app 核心功能：

以答题闯关为主线，设置关卡和难度

以诗词库为内容基础，提供学习和查阅功能

将诗词学习包装成游戏化的闯关体验

app ui 界面：

一、准备硬件环境

1、WIN10 以及 WIN10 以上的 Windows 操作系统电脑一台image

2、合宙引擎 8101 一块 +type-c 接口 usb 数据线一根

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

二、准备软件环境

2.1 代码仓库

1、合宙引擎 8101 项目的代码在 LuatOS 仓库的 master 分支；

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

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

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

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

2.2 PC 模拟器

点击此处学习 LuatOS 模拟器；

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

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

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 原始需求

接下来，我们以一个实际的 app 需求为例，来演示完整的开发过程；

这个 app 的名字叫做：诗词闯关

如果需求不是特别明确，就简单描述一下即可；如果需求特别明确，则详细描述每个页面如何设计，以及业务逻辑如何设计；

在本示例中，因为成语接龙 app 是一个游戏，没有太多的思路，所以我们描述的原始需求比较简单，看 AI 如何发挥，如下所述：

设计一个可用于嵌入式设备的诗词填空项目的页面和交互业务逻辑，分辨率为480*800，输出可以交互的html页面

四、根据 app 需求，借助 AI 工具，生成 html 文件和图片等资源文件

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

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

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

4.1 生成 ui 界面.html 文件

浏览器搜索打开 deepseek,输入如下指令：帮我生成一个html，用于嵌入式设备UI 演示 窗口竖屏，适用480*800分辨率，实现诗词填空的功能，选择题形式

4.2 查看 ui 效果

等待 deepseek 思考完成后，运行查看生成效果；运行后有分为封面和游戏界面两张，点击【开始闯关】即可预览全部

4.3 修改 ui 效果

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

4.4 下载保存.html 文件

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

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

修改到最终的 ui 效果后，继续给 deepseek 发指令：帮我导出这里面的所有图片资源大小32*32，背景透明色

由于很多时候效果图中只有 Emoji 表情，所以可以给 deepseek 发指令：帮我把这里的Emoji表情转换成图片资源，32*32，背景透明色

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

4.6 总结

这个阶段，主要就是根据需求，不断的和 AI 交互，生成 html；

根据自己对实际 app 的规划以及实际运行的效果，可能需要调整多次才行；

按照同样的交互思路，进行多轮交互即可，直到生成的 html 界面和交互逻辑可以满足你的需求；

最后再导出来用到的所有图片资源；

具体到本项目，最终输出了 SCCG.html 和 SCCG_images.zip 两个文件；

我们在接下来的编码环节会用到这两个文件；

五、根据 html 文件 + 图片等资源文件 + 代码仓库，让 AI 工具生成 app 代码

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

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

app 代码的基本格式要求

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

我们先来看看 2.1.3 章节下载下来的 LuatOS 代码仓库中的 LuatOS/module/AirUI/app_store/vertical_app 目录，在 vertical_app 内，每个子目录都是一个单独的 app，如下图所示：

5.1 Trae 生成 app 代码

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

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

5.1.1 在 app_store 下创建 SCCG 目录

首先我们在 LuatOS-developmoduleAir8101projectAirUIFrameui_play_boardapp_store 下创建一个 SCCG 目录；

创建目录的方式有很多种，此处仅仅演示使用 Trae 创建的过程；

1、在工具右侧的资源管理器中，找到 LuatOS-developmoduleAir8101projectAirUIFrameui_play_boardapp_store 目录，鼠标点击右键，在弹出的菜单中，选择 添加到对话

2、在会话窗口继续输入 在这个目录下创建一个SCCG目录，

3、创建成功后，会话窗口输入：在SCCG目录下创建res，user目录

最终创建成功，如下图所示

5.1.2 把第四章节生成的 html 和图片文件复制过来

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

1、手动将 4.4 中保存的 SCCG.html 复制到 SCCG 目录下；

2、将 4.5 中导出的 SCCG_images.zip 中的图片解压，然后复制到 SCCG/res 目录下

3、参考 3.5 的交互生成诗词填空图标图片，下载后修改图片名称为 icon.png，复制图片到 SCCG 目录下.

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

5.1.3 第一次自动生成 app 代码

1、在会话窗口输入以下内容（LuatOS-develop 路径需要根据你自己电脑上的实际路径来修改），并且发送：

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

3、可以看出，这次交互，生成了 main.lua、meta.json、sccg.lua 三个文件，并一定要依次点开点击【保留】

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

六、在模拟上运行 app，根据运行结果，让 Trae 不断的调试代码，直到运行通过

在本章节，我们在 LuatOS 模拟器上不断地运行刚才生成的 SCCG 代码；

如果发现问题，让 Trae 不断的调试，直到在模拟器上可以正常运行；

如果你忘记了模拟器怎么使用，再参考本文的 2.2 章节回顾学习一下；

6.1 将 app_store 目录复制到 LuatOS 模拟器所在的目录

1、如下图所示，将

D:appLuatOS-masterapp_engineapp_storevertical_app

目录下的SCCG子目录复制到 LuatOS 模拟器根目录下的app_store目录中

LuatOS 模拟器根目录下的app_store目录，默认不存在，需要自己手动创建

复制成功后，模拟器目录结构如下面两张图片所示

6.2 使用 cmd 命令行 +LuatOS 模拟器运行：LuatOS 扩展库代码 +合宙引擎主机8101出厂软件

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

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

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

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

4、鼠标模拟左右滑屏，翻到第三页，就可以看到自己添加的诗词闯关 app，点击运行测试 app 功能。

6.3 调试 app 代码

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

审核编辑 黄宇