本文以Air8101引擎为硬件目标依托Trae智能体与DeepSeek网页版两款AI工具从一份简洁的24节气APP需求描述出发构建了“需求定义—UI原型生成—资源导出—代码生成—模拟器调试—问题修复”的完整开发闭环。整个过程无需涉及复杂的底层移植操作核心聚焦于AI工具在嵌入式前端领域的实践应用清晰展示AI辅助开发的可用边界、操作方法与高效优势同时结合人工验证与调试最终交付一款可正常运行、兼具实用性与文化性的24节气查询APP为嵌入式开发者提供可复用的AI辅助开发参考范式。本次开发的24节气APP核心功能与UI要求明确具体如下国风节气列表首页以卡片布局呈现全部二十四节气每张卡片清晰标注节气名称、时间区间与专属标识。节气全维度详解点击节气卡片即可进入详情页面全方位解锁节气内涵包含节气概述、三候物候、古籍典故原文 白话释义、气候农时特点、养生饮食指南、经典节气诗词、民间传统习俗以及节气谚语歌谣。节气歌速览首页顶端展示完整版二十四节气歌方便诵读记忆传承传统节气文化。24 节气 app ui 界面一、准备硬件环境WIN10 以及 WIN10 以上的 Windows 操作系统电脑一台引擎 8101 一块 type-c 接口 usb 数据线一根如果没有上述 2 的硬件设备可以直接在电脑端 pc 模拟器上开发调试 app二、准备软件环境2.1 代码仓库当前阶段引擎 8101 项目的代码在 LuatOS 仓库的 master 分支 HEAD:docs/root/docs/ai/traeluatos-docs-code/project/air8101_engine_project_app/005_24_Solar_Terms.md点击这里可以通过网络浏览器打开 LuatOS 代码仓库的 master 分支可以直接点击克隆/下载下载在本地c413a283b3197c2ac4d1f8b8022673c306c6bc13:docs/root/docs/ai/traeluatos-docs-code/project/engine_host_vertical_app/005_24_Solar_Terms.md本步骤和步骤 2二选一即可通过 TortoiseGit 或者其他客户端工具拉取上述 master 分支代码到自己的电脑上以便后续通过客户端提交代码到仓库只本地运行的话可以不用客户端克隆/下载直接步骤 2 下载即可参考这里使用 TortoiseGit 克隆/拉取代码点击查看 TortoiseGit 详细使用教程master 分支代码放在你本地任何你觉得合适的位置比如本文这里新建了存放的路径是 F:\LuatOS-master2.2 PC 模拟器下载 Luatools 工具luatos.com点击此处下载学习 Luatools 工具使用模拟器时直接使用在本文 2.1.3 章节下载的 LuatOS-master 分支代码进行学习在本小节使用 LuatOS 模拟器 LuatOS-master 分支代码可以正常运行起来一个 UI 项目就算达标2.3 AI 工具AI 工具有很多种有 TraeCopilot 等等每一种 AI 工具都可以配置不同的大模型我们并不限制你使用哪一种 AI 工具各种 AI 工具使用的基本思路都是相同的在本文我们仅仅基于 Trae 这种 AI 工具来介绍如果你使用其他 AI 工具遇到不懂的问题可以自行解决参考 Trae 的安装和智能体概念理解 和 安装 luatos-docs-code 智能体、规则和技能 安装好 Trae配置 luatos-docs-code 智能体配置项目规则和技能其中在 Trae 的安装和智能体概念理解第三章节中不用再新建项目直接打开自己电脑上的 LuatOS-master 目录即可Trae 的配置使用有以下三点特别重要当你安装配置好智能体、规则和技能后最终一定要参考验证智能体、规则和技能是否安装成功来验证安装配置是否正确Trae 中内置的免费大模型会经常排队并且性能不可控容易出问题所以推荐参考001 发送会话请求时提示排队如何解决的方法订阅收费的大模型目前每月 40 元这样可以大大提高 AI 性能如果不想使用收费模型在非正常工作时间段内使用内置的免费模型也能勉强凑合选择收费大模型时经过我们的实际测试根据工作任务的不同可以按照如下建议选择仅供参考具体情况还需要根据你自己的实际使用情况来定代码开发任务优先选择 GLM可能是使用的人数太多有时候处理较慢如果 GLM 处理太慢再考虑切换到 MiniMax其他任务可以首先选择 ark-code-latest其次选择 MiniMax最后选择 GLM可能是使用的人数太多有时候处理较慢三、定义自己的 app 原始需求以一款实际的应用程序需求为案例完整演示项目开发的全流程。本次演示所用应用 APP 的名字是「24 节气」。对于应用开发需求若界定不够清晰仅需进行简要描述即可若需求明确具体则需对各页面设计方案及业务逻辑架构展开详细说明。在本次示例中由于 24 节气属于民俗节气查询类 APP 品类应用相对简单因此对应的原始需求描述较为简洁以此为基础观察 AI 的实现效果。如下所述设计一个可用于嵌入式设备的售货机项目页面和交互业务逻辑分辨率为480*800输出可以交互的html页面四、根据 app 需求借助 AI 工具生成 html 文件和图片等资源文件本步骤选择 Deepseek 这个 AI 工具根据定义的 app 需求生成 html 文件和图片等资源文件。使用网页版的 deepseek生成“包含业务逻辑、可交互体验”的 html 文件 可以根据自己的实际情况来对比选择使用其他的 AI 工具。在这一章节记录了使用 deepseek 网页版来生成 24 节气的 html 的过程4.1 生成 ui 界面.html 文件4.1.1 输入帮我生成一个html用于嵌入式设备UI 演示 窗口竖屏分辨率w320,h480 实现24节气的浏览功能4.1.2 输出全生成后的体验效果如下图4.1.3 存在的问题点击运行可以看到生成的 html 中点击节气卡片无法跳转到详情页4.2 第二轮交互支持跳转详情页4.2.1 输入点击节气卡片进入详情页页面每一个节气的详情页展示这个节气的介绍、历史渊源、农业、气候特征、 饮食与养生、节日祝福、谚语歌谣等信息4.2.2 输出生成后的体验效果如下图4.1.3 存在的问题详情页下方没有添加「归卷」「上一个 / 下一个节气」的导航按钮4.3 第三轮交互添加详情页导航按钮4.3.1 输入详情页下方添加「归卷」「上一个 / 下一个节气」的导航按钮4.3.2 输出等完全生成后如下图所示4.4 第三轮交互完善首页节气歌内容4.4.1 输入首页位置二十四节气歌完整显示春雨惊春清谷天夏满芒夏暑相连。秋处露秋寒霜降冬雪雪冬小大寒4.4.2 输出生成后的体验效果如下图4.3.3 html 满足需求经过本轮设计生成的两个页面和业务逻辑可以满足需求所以本阶段的 html 设计就算完成此时我们把 html 源码文件保存下来命名为 24_Solar_Terms4.5 第四轮交互导出所有图片资源虽然在前面已经生成了最终可以满足需求的 html 文件但是还有一个问题没有解决html 中使用到的图片资源还没有导出来所以我们此时让 AI 把图片资源导出来4.5.1 输入生成一个完整的HTML文件。该文件在之前看到的24节气浏览界面基础上右下角增加了一个导出图片”按钮(样式与原有按钮统一不破坏整体UI)点击后即可将节气图片、详情页小图片打包成zip文件下载注意要求 AI 给出的图片都用英文命名不然后期要一个一个修改4.5.2 输出它会在 html 效果图中增加了一个导出图片按钮如下图所示点击这个按钮就导出了大部分图片资源4.5.3 图片资源我们把导出的图片资源包命名为 24_Solar_Terms_images.zip解压缩打开如下图所示查看图片看起来正常。4.6 总结这个阶段主要就是根据需求不断的和 AI 交互生成 html你自己的实际 app根据自己的规划以及实际运行的效果可能需要调整多次才行按照同样的交互思路进行多轮交互即可直到生成的 html 界面和交互逻辑可以满足你的需求最后再导出来用到的所有图片资源具体到本项目最终输出了 24_Solar_Terms.html 和 24_Solar_Terms_images.zip 两个文件我们在接下来的编码环节会用到这两个文件5.1 app 代码的基本格式要求app 代码有基本的格式要求我们先来看看 2.1.3 章节下载下来的 LuatOS-master 代码仓库中的 vertical_app 目录在 vertical_app 内每个子目录都是一个单独的 app如下图所示我们以 airplane_battle 为例来说明 app 内部的代码结构和格式要求5.1.1 main.luaapp 的入口文件必须存在于单独 app 的根目录下文件内容按照以下格式编写即可PROJECTAIRPLANE_BATTLEVERSION001.999.000log.info(main, PROJECT, VERSION)requireairplane_winsys.publish(OPEN_AIRPLANE_BATTLE_WIN)sys.run()注意事项如下前4行代码对app的项目和版本信息进行配置并且打印实际上没有任何用处但是为了和我们LuatOS开发的完整项目中的main.lua格式保持一致所以也加上了减少对外沟通解释的成本第6行的require airplane_win和第8行的sys.publish(OPEN_AIRPLANE_BATTLE_WIN)加载当前app的user目录下用户脚本模块并且运行具体的每个app需要根据自己的app业务逻辑加载很行第10行的sys.run()实际上没有任何用处但是为了和我们LuatOS开发的完整项目中的main.lua格式保持一致所以也加上了sys.run()的调用减少对外沟通解释的成本5.1.2 icon.pngapp的图标文件必须存在于单独app的根目录下要求png格式32*32像素背景色透明5.1.3 meta.jsonapp的元数据文件必须存在于单独app的根目录下文件内容按照以下格式编写即可{app_name_cn:飞机大战,app_name_en:airplane-battle,version:1.0.0,publish_time:2026-04-04 12:00:00,category:游戏,description:拖拽飞机躲避敌机自动发射子弹并挑战更高分数,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}注意事项如下文件内容必须是json格式version的格式必须是x.y.z格式从1.0.0开始其余字段参考示例都很好理解5.1.4 user目录存放app具体功能模块的用户Lua脚本文件user目录下不能再包含子目录5.1.5 res目录存放app使用到的图片音频视频字体等资源文件只要不是Lua脚本文件都存放到这里代码中使用时直接以/luadb/*.*方式使用res目录下不能再包含子目录5.1.6 libs目录存放app使用到的扩展库脚本文件如果用到的扩展库脚本文件在默认出厂软件中已经包含则此处的libs目录是否包含重复的扩展库脚本文件都没有任何影响即使包含了也没有任何用处app使用的仍然是默认出厂软件环境中的扩展库脚本文件如果用到的扩展库脚本文件在默认出厂软件中没有被包含则此处的libs目录必须包含进来为了节省空间如果不确定默认出厂软件中是否已经包含app需要的扩展库文件则可以默认已经包含在调试app过程中如果发现没有需要的扩展库会提示出错此时再加上扩展库脚本文件调试已经包含在默认出厂软件中的扩展库文件有dhcpsrv、dnsproxy、exapp、excloud、exmtn、exnetif、exwin、httpdns、httpplus、udpsrv2026年4月7日的默认出厂软件包含这么多仅供参考后续可能会动态增加或者删除libs目录下不能再包含子目录5.1.7 其他注意事项每个独立的app内部不再需要初始化lcd和tp因为在默认出厂软件中已经完成这两项动作每个app都可以使用fskv来存储键值对参数仅可以读、写、清除app自己创建的参数没有权限操作每个app之外的其他fskv参数每个app都可以使用io核心库执行文件和目录操作仅可以控制自己app内的目录和文件自己app的所有目录和文件都可读自己app内的部分目录和文件可写操作目录和文件时以/luadb/或者/开头app内部会自动做路径映射路径映射关系如下前面三种只读最后两种可读写/luadb/icon.png映射到 /icon.png应用图标特殊处理/luadb/xxx.lua 或 /luadb/xxx.luac按优先级映射/xxx.lua或者luac/user/xxx.lua或者luac/libs/xxx.lua或者luac/luadb/xxx非lua文件映射到 /res/xxx资源文件目录/ram/xxx直接返回 /ram/xxx内存文件系统不做转换/xxx其他以/开头的路径映射到 /data/xxx数据存储目录5.2 Trae 生成 app 代码前的准备工作在了解了每个 app 的代码基本格式和要求之后接下来我们使用 Trae 来生成24节气app 代码注意5.2.1 和 5.2.2 的顺序不能颠倒必须是先打开项目代码然后再验证项目规则和技能如果此处验证不通过返回到本文的 2.3 章节重新学习操作一遍5.2.1 检查配置参考2.3章节的内容查验Trae的1. SOLO模式、2. LuatOS-master、3. luatos-docs-code、4. Trae中智能体模型的项目规则和技能配置是否正确配置5.2.1 新建一个会话任务专门用来24节气app代码生成调试5.3 Trae生成app代码为了演示整个过程的字节此处拆分为多步来逐步生成5.3.1 在vertical_app下创建24_Solar_Terms目录首先我们在F:\LuatOS_master\module\AirUI\app_store\vertical_app下创建一个24_Solar_Terms目录创建目录的方式有很多种此处仅仅演示使用Trae创建的过程在工具右侧的资源管理器中找到F:\LuatOS_master\module\AirUI\app_store\vertical_app\24_Solar_Terms\目录鼠标点击右键在弹出的菜单中选择添加到对话此时可以看到vertical_app目录已经被添加到会话窗口如下图所示在会话窗口继续输入在这个目录下创建一个24_Solar_Terms目录如下图所示然后点击发送箭头按钮如下图所示最终创建成功5.3.2 在24_Solar_Terms目录下创建resuserlibs目录会话窗口输入在24_Solar_Terms目录下创建resuserlibs目录最终创建成功如下图所示5.3.3 把第四章节生成的html和图片文件复制过来这一步就不借助Trae完成了直接人工手动操作手动将24_Solar_Terms.html复制到24_Solar_Terms目录下将所有图片改名为英文命名然后复制到24_Solar_Terms/res目录下完成这两步操作之后如下图所示5.3.4 第一次自动生成app代码在会话窗口输入以下内容LuatOS-master路径需要根据你自己电脑上的实际路径来修改并且发送1、参考F:\LuatOS_master\module\AirUI\app_store\vertical_app\24_Solar_Terms\24_Solar_Terms.html 中的UI界面和交互逻辑在24_Solar_Terms中生成LuatOS代码2、代码文件格式以及内容参考F:\LuatOS_master\module\AirUI\app_store\vertical_app\下的其他目录包含main.luameta.json24_Solar_Terms\user目录下存储具体UI和业务功能的lua代码文件3、代码中需要的图片资源在24_Solar_Terms\user目录下代码中用到的图片资源使用\luadb\xxx.png的路径方式然后luatos-docs-code-103智能体就开始工作了几分钟之后生成了第一份代码完成后 24_Solar_Terms 目录下生成了 main.lua、meta.json、24_Solar_Terms_win.lua、三个文件如下图所示在中间的编辑器窗口依次点击main.lua、meta.json、24_Solar_Terms_win.lua三个文件,点击保留按钮如下图所示5.3.5 手动生成一个 24 节气的 icon.png使用网页版的 deepseek输入帮我搜索或者生成一个适用于24节气应用的图标png格式32*32像素背景色透明直接生成了一个 html 页面运行这个页面可以下载下来一个 32*32 像素的图标能直接使用如下图所示我是直接让生成 3 个从中选取了一个把下载下来的图片改名为 icon.png然后复制到 24_Solar_Terms 目录下如下图所示在本章节我们在 LuatOS 模拟器上不断地运行刚才生成的 24_Solar_Terms 代码如果发现问题让 Trae 不断的调试直到在模拟器上可以正常运行6.1 准备运行 app右键 vertical_app选择 在文件资源管理器中显示找到本地的 vertical_app 文件夹把 vertical_app 文件夹复制到 LuatOS PC 模拟器所在的目录。可以查看 2.2 PC 模拟器章节中的操作本教程 LuatOS PC 模拟器所在的目录是 E:\PC 模拟器\LuatOS-SoC_V2026_PC6.2 在 PC 模拟器上运行找到 PC 模拟器目录下的 cmd 快捷方式双击打开如下图所示在命令行窗口粘贴输入以下指令luatos-pc-64bit.exe F:\LuatOS_project\LuatOS-master\app_engine\factory F:\LuatOS_project\LuatOS-master\script\libs输入完成后单击回车键就可以在模拟器上运行 引擎 Air8101 出厂软件的出厂软件启动后如下图所示鼠标模拟左右滑屏就可以看到自己添加的 24 节气 app点击运行测试 app 功能看看是否可以正常运行。点击一下点击之后第一个窗口如下图所示点击节气卡片进入详情页如下图所示从图片种可以看出主页节气图片和详情页小图标都没有显示出来总的来说虽然已经有基本的轮廓但是也存在不少问题接下来我们使用智能体来修复每一个问题尝试修复之后再次复制 vertical_app 代码到模拟器所在目录下再次运行模拟器来验证6.3 修复问题商品中的图片没有正常显示6.3.1 第一轮修复输入首页中的图片没有正常显示注意使用F:\LuatOS_master\module\AirUI\app_store\vertical_app/24_Solar_Terms/res中的图片资源查看智能体的思考过程看下它这次具体修改了什么代码这次仅修改了 24_Solar_Terms_win.lua修改完成之后点击查看具体的修改内容如果你会 LuatOS 编程就知道智能体这次的修复还是存在问题我们先不管有什么问题把修改的内容点击保留_不需要让 AI 修改的部分点击__撤销___把 vertical_app 复制到模拟器目录运行一下看看效果图片仍然没有显示出来的话可以进行多次交互直到在模拟器的运行后首页和详情页图片正常显示出来如下图所示通过 6.3.1 小节调试修复这个问题我们可以总结出重要的一点智能体修复过程中你要学会看代码根据代码思路和实际效果给智能体更详细的输入信息和指令它可以理解得更透彻6.3.2 第二轮修复输入所有详情页面“历史渊源·古文引证处的文字在容器内不能完整显示马上修正查看思考和修改内容保存修改内容如下图所示多次交互后“历史渊源·古文引证处的文字可以在容器内完整显示6.4 总结程序运行过程中若出现图片无法加载、应用启动失败、图片显示异常、字体渲染错误、色彩参数不符等问题可依照前述全部流程进行多次迭代修改。其余代码调试相关问题可查阅智能售货机项目开发文档智能售货机项目开发文档
基于Air8101引擎的24节气APP开发全流程
本文以Air8101引擎为硬件目标依托Trae智能体与DeepSeek网页版两款AI工具从一份简洁的24节气APP需求描述出发构建了“需求定义—UI原型生成—资源导出—代码生成—模拟器调试—问题修复”的完整开发闭环。整个过程无需涉及复杂的底层移植操作核心聚焦于AI工具在嵌入式前端领域的实践应用清晰展示AI辅助开发的可用边界、操作方法与高效优势同时结合人工验证与调试最终交付一款可正常运行、兼具实用性与文化性的24节气查询APP为嵌入式开发者提供可复用的AI辅助开发参考范式。本次开发的24节气APP核心功能与UI要求明确具体如下国风节气列表首页以卡片布局呈现全部二十四节气每张卡片清晰标注节气名称、时间区间与专属标识。节气全维度详解点击节气卡片即可进入详情页面全方位解锁节气内涵包含节气概述、三候物候、古籍典故原文 白话释义、气候农时特点、养生饮食指南、经典节气诗词、民间传统习俗以及节气谚语歌谣。节气歌速览首页顶端展示完整版二十四节气歌方便诵读记忆传承传统节气文化。24 节气 app ui 界面一、准备硬件环境WIN10 以及 WIN10 以上的 Windows 操作系统电脑一台引擎 8101 一块 type-c 接口 usb 数据线一根如果没有上述 2 的硬件设备可以直接在电脑端 pc 模拟器上开发调试 app二、准备软件环境2.1 代码仓库当前阶段引擎 8101 项目的代码在 LuatOS 仓库的 master 分支 HEAD:docs/root/docs/ai/traeluatos-docs-code/project/air8101_engine_project_app/005_24_Solar_Terms.md点击这里可以通过网络浏览器打开 LuatOS 代码仓库的 master 分支可以直接点击克隆/下载下载在本地c413a283b3197c2ac4d1f8b8022673c306c6bc13:docs/root/docs/ai/traeluatos-docs-code/project/engine_host_vertical_app/005_24_Solar_Terms.md本步骤和步骤 2二选一即可通过 TortoiseGit 或者其他客户端工具拉取上述 master 分支代码到自己的电脑上以便后续通过客户端提交代码到仓库只本地运行的话可以不用客户端克隆/下载直接步骤 2 下载即可参考这里使用 TortoiseGit 克隆/拉取代码点击查看 TortoiseGit 详细使用教程master 分支代码放在你本地任何你觉得合适的位置比如本文这里新建了存放的路径是 F:\LuatOS-master2.2 PC 模拟器下载 Luatools 工具luatos.com点击此处下载学习 Luatools 工具使用模拟器时直接使用在本文 2.1.3 章节下载的 LuatOS-master 分支代码进行学习在本小节使用 LuatOS 模拟器 LuatOS-master 分支代码可以正常运行起来一个 UI 项目就算达标2.3 AI 工具AI 工具有很多种有 TraeCopilot 等等每一种 AI 工具都可以配置不同的大模型我们并不限制你使用哪一种 AI 工具各种 AI 工具使用的基本思路都是相同的在本文我们仅仅基于 Trae 这种 AI 工具来介绍如果你使用其他 AI 工具遇到不懂的问题可以自行解决参考 Trae 的安装和智能体概念理解 和 安装 luatos-docs-code 智能体、规则和技能 安装好 Trae配置 luatos-docs-code 智能体配置项目规则和技能其中在 Trae 的安装和智能体概念理解第三章节中不用再新建项目直接打开自己电脑上的 LuatOS-master 目录即可Trae 的配置使用有以下三点特别重要当你安装配置好智能体、规则和技能后最终一定要参考验证智能体、规则和技能是否安装成功来验证安装配置是否正确Trae 中内置的免费大模型会经常排队并且性能不可控容易出问题所以推荐参考001 发送会话请求时提示排队如何解决的方法订阅收费的大模型目前每月 40 元这样可以大大提高 AI 性能如果不想使用收费模型在非正常工作时间段内使用内置的免费模型也能勉强凑合选择收费大模型时经过我们的实际测试根据工作任务的不同可以按照如下建议选择仅供参考具体情况还需要根据你自己的实际使用情况来定代码开发任务优先选择 GLM可能是使用的人数太多有时候处理较慢如果 GLM 处理太慢再考虑切换到 MiniMax其他任务可以首先选择 ark-code-latest其次选择 MiniMax最后选择 GLM可能是使用的人数太多有时候处理较慢三、定义自己的 app 原始需求以一款实际的应用程序需求为案例完整演示项目开发的全流程。本次演示所用应用 APP 的名字是「24 节气」。对于应用开发需求若界定不够清晰仅需进行简要描述即可若需求明确具体则需对各页面设计方案及业务逻辑架构展开详细说明。在本次示例中由于 24 节气属于民俗节气查询类 APP 品类应用相对简单因此对应的原始需求描述较为简洁以此为基础观察 AI 的实现效果。如下所述设计一个可用于嵌入式设备的售货机项目页面和交互业务逻辑分辨率为480*800输出可以交互的html页面四、根据 app 需求借助 AI 工具生成 html 文件和图片等资源文件本步骤选择 Deepseek 这个 AI 工具根据定义的 app 需求生成 html 文件和图片等资源文件。使用网页版的 deepseek生成“包含业务逻辑、可交互体验”的 html 文件 可以根据自己的实际情况来对比选择使用其他的 AI 工具。在这一章节记录了使用 deepseek 网页版来生成 24 节气的 html 的过程4.1 生成 ui 界面.html 文件4.1.1 输入帮我生成一个html用于嵌入式设备UI 演示 窗口竖屏分辨率w320,h480 实现24节气的浏览功能4.1.2 输出全生成后的体验效果如下图4.1.3 存在的问题点击运行可以看到生成的 html 中点击节气卡片无法跳转到详情页4.2 第二轮交互支持跳转详情页4.2.1 输入点击节气卡片进入详情页页面每一个节气的详情页展示这个节气的介绍、历史渊源、农业、气候特征、 饮食与养生、节日祝福、谚语歌谣等信息4.2.2 输出生成后的体验效果如下图4.1.3 存在的问题详情页下方没有添加「归卷」「上一个 / 下一个节气」的导航按钮4.3 第三轮交互添加详情页导航按钮4.3.1 输入详情页下方添加「归卷」「上一个 / 下一个节气」的导航按钮4.3.2 输出等完全生成后如下图所示4.4 第三轮交互完善首页节气歌内容4.4.1 输入首页位置二十四节气歌完整显示春雨惊春清谷天夏满芒夏暑相连。秋处露秋寒霜降冬雪雪冬小大寒4.4.2 输出生成后的体验效果如下图4.3.3 html 满足需求经过本轮设计生成的两个页面和业务逻辑可以满足需求所以本阶段的 html 设计就算完成此时我们把 html 源码文件保存下来命名为 24_Solar_Terms4.5 第四轮交互导出所有图片资源虽然在前面已经生成了最终可以满足需求的 html 文件但是还有一个问题没有解决html 中使用到的图片资源还没有导出来所以我们此时让 AI 把图片资源导出来4.5.1 输入生成一个完整的HTML文件。该文件在之前看到的24节气浏览界面基础上右下角增加了一个导出图片”按钮(样式与原有按钮统一不破坏整体UI)点击后即可将节气图片、详情页小图片打包成zip文件下载注意要求 AI 给出的图片都用英文命名不然后期要一个一个修改4.5.2 输出它会在 html 效果图中增加了一个导出图片按钮如下图所示点击这个按钮就导出了大部分图片资源4.5.3 图片资源我们把导出的图片资源包命名为 24_Solar_Terms_images.zip解压缩打开如下图所示查看图片看起来正常。4.6 总结这个阶段主要就是根据需求不断的和 AI 交互生成 html你自己的实际 app根据自己的规划以及实际运行的效果可能需要调整多次才行按照同样的交互思路进行多轮交互即可直到生成的 html 界面和交互逻辑可以满足你的需求最后再导出来用到的所有图片资源具体到本项目最终输出了 24_Solar_Terms.html 和 24_Solar_Terms_images.zip 两个文件我们在接下来的编码环节会用到这两个文件5.1 app 代码的基本格式要求app 代码有基本的格式要求我们先来看看 2.1.3 章节下载下来的 LuatOS-master 代码仓库中的 vertical_app 目录在 vertical_app 内每个子目录都是一个单独的 app如下图所示我们以 airplane_battle 为例来说明 app 内部的代码结构和格式要求5.1.1 main.luaapp 的入口文件必须存在于单独 app 的根目录下文件内容按照以下格式编写即可PROJECTAIRPLANE_BATTLEVERSION001.999.000log.info(main, PROJECT, VERSION)requireairplane_winsys.publish(OPEN_AIRPLANE_BATTLE_WIN)sys.run()注意事项如下前4行代码对app的项目和版本信息进行配置并且打印实际上没有任何用处但是为了和我们LuatOS开发的完整项目中的main.lua格式保持一致所以也加上了减少对外沟通解释的成本第6行的require airplane_win和第8行的sys.publish(OPEN_AIRPLANE_BATTLE_WIN)加载当前app的user目录下用户脚本模块并且运行具体的每个app需要根据自己的app业务逻辑加载很行第10行的sys.run()实际上没有任何用处但是为了和我们LuatOS开发的完整项目中的main.lua格式保持一致所以也加上了sys.run()的调用减少对外沟通解释的成本5.1.2 icon.pngapp的图标文件必须存在于单独app的根目录下要求png格式32*32像素背景色透明5.1.3 meta.jsonapp的元数据文件必须存在于单独app的根目录下文件内容按照以下格式编写即可{app_name_cn:飞机大战,app_name_en:airplane-battle,version:1.0.0,publish_time:2026-04-04 12:00:00,category:游戏,description:拖拽飞机躲避敌机自动发射子弹并挑战更高分数,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}注意事项如下文件内容必须是json格式version的格式必须是x.y.z格式从1.0.0开始其余字段参考示例都很好理解5.1.4 user目录存放app具体功能模块的用户Lua脚本文件user目录下不能再包含子目录5.1.5 res目录存放app使用到的图片音频视频字体等资源文件只要不是Lua脚本文件都存放到这里代码中使用时直接以/luadb/*.*方式使用res目录下不能再包含子目录5.1.6 libs目录存放app使用到的扩展库脚本文件如果用到的扩展库脚本文件在默认出厂软件中已经包含则此处的libs目录是否包含重复的扩展库脚本文件都没有任何影响即使包含了也没有任何用处app使用的仍然是默认出厂软件环境中的扩展库脚本文件如果用到的扩展库脚本文件在默认出厂软件中没有被包含则此处的libs目录必须包含进来为了节省空间如果不确定默认出厂软件中是否已经包含app需要的扩展库文件则可以默认已经包含在调试app过程中如果发现没有需要的扩展库会提示出错此时再加上扩展库脚本文件调试已经包含在默认出厂软件中的扩展库文件有dhcpsrv、dnsproxy、exapp、excloud、exmtn、exnetif、exwin、httpdns、httpplus、udpsrv2026年4月7日的默认出厂软件包含这么多仅供参考后续可能会动态增加或者删除libs目录下不能再包含子目录5.1.7 其他注意事项每个独立的app内部不再需要初始化lcd和tp因为在默认出厂软件中已经完成这两项动作每个app都可以使用fskv来存储键值对参数仅可以读、写、清除app自己创建的参数没有权限操作每个app之外的其他fskv参数每个app都可以使用io核心库执行文件和目录操作仅可以控制自己app内的目录和文件自己app的所有目录和文件都可读自己app内的部分目录和文件可写操作目录和文件时以/luadb/或者/开头app内部会自动做路径映射路径映射关系如下前面三种只读最后两种可读写/luadb/icon.png映射到 /icon.png应用图标特殊处理/luadb/xxx.lua 或 /luadb/xxx.luac按优先级映射/xxx.lua或者luac/user/xxx.lua或者luac/libs/xxx.lua或者luac/luadb/xxx非lua文件映射到 /res/xxx资源文件目录/ram/xxx直接返回 /ram/xxx内存文件系统不做转换/xxx其他以/开头的路径映射到 /data/xxx数据存储目录5.2 Trae 生成 app 代码前的准备工作在了解了每个 app 的代码基本格式和要求之后接下来我们使用 Trae 来生成24节气app 代码注意5.2.1 和 5.2.2 的顺序不能颠倒必须是先打开项目代码然后再验证项目规则和技能如果此处验证不通过返回到本文的 2.3 章节重新学习操作一遍5.2.1 检查配置参考2.3章节的内容查验Trae的1. SOLO模式、2. LuatOS-master、3. luatos-docs-code、4. Trae中智能体模型的项目规则和技能配置是否正确配置5.2.1 新建一个会话任务专门用来24节气app代码生成调试5.3 Trae生成app代码为了演示整个过程的字节此处拆分为多步来逐步生成5.3.1 在vertical_app下创建24_Solar_Terms目录首先我们在F:\LuatOS_master\module\AirUI\app_store\vertical_app下创建一个24_Solar_Terms目录创建目录的方式有很多种此处仅仅演示使用Trae创建的过程在工具右侧的资源管理器中找到F:\LuatOS_master\module\AirUI\app_store\vertical_app\24_Solar_Terms\目录鼠标点击右键在弹出的菜单中选择添加到对话此时可以看到vertical_app目录已经被添加到会话窗口如下图所示在会话窗口继续输入在这个目录下创建一个24_Solar_Terms目录如下图所示然后点击发送箭头按钮如下图所示最终创建成功5.3.2 在24_Solar_Terms目录下创建resuserlibs目录会话窗口输入在24_Solar_Terms目录下创建resuserlibs目录最终创建成功如下图所示5.3.3 把第四章节生成的html和图片文件复制过来这一步就不借助Trae完成了直接人工手动操作手动将24_Solar_Terms.html复制到24_Solar_Terms目录下将所有图片改名为英文命名然后复制到24_Solar_Terms/res目录下完成这两步操作之后如下图所示5.3.4 第一次自动生成app代码在会话窗口输入以下内容LuatOS-master路径需要根据你自己电脑上的实际路径来修改并且发送1、参考F:\LuatOS_master\module\AirUI\app_store\vertical_app\24_Solar_Terms\24_Solar_Terms.html 中的UI界面和交互逻辑在24_Solar_Terms中生成LuatOS代码2、代码文件格式以及内容参考F:\LuatOS_master\module\AirUI\app_store\vertical_app\下的其他目录包含main.luameta.json24_Solar_Terms\user目录下存储具体UI和业务功能的lua代码文件3、代码中需要的图片资源在24_Solar_Terms\user目录下代码中用到的图片资源使用\luadb\xxx.png的路径方式然后luatos-docs-code-103智能体就开始工作了几分钟之后生成了第一份代码完成后 24_Solar_Terms 目录下生成了 main.lua、meta.json、24_Solar_Terms_win.lua、三个文件如下图所示在中间的编辑器窗口依次点击main.lua、meta.json、24_Solar_Terms_win.lua三个文件,点击保留按钮如下图所示5.3.5 手动生成一个 24 节气的 icon.png使用网页版的 deepseek输入帮我搜索或者生成一个适用于24节气应用的图标png格式32*32像素背景色透明直接生成了一个 html 页面运行这个页面可以下载下来一个 32*32 像素的图标能直接使用如下图所示我是直接让生成 3 个从中选取了一个把下载下来的图片改名为 icon.png然后复制到 24_Solar_Terms 目录下如下图所示在本章节我们在 LuatOS 模拟器上不断地运行刚才生成的 24_Solar_Terms 代码如果发现问题让 Trae 不断的调试直到在模拟器上可以正常运行6.1 准备运行 app右键 vertical_app选择 在文件资源管理器中显示找到本地的 vertical_app 文件夹把 vertical_app 文件夹复制到 LuatOS PC 模拟器所在的目录。可以查看 2.2 PC 模拟器章节中的操作本教程 LuatOS PC 模拟器所在的目录是 E:\PC 模拟器\LuatOS-SoC_V2026_PC6.2 在 PC 模拟器上运行找到 PC 模拟器目录下的 cmd 快捷方式双击打开如下图所示在命令行窗口粘贴输入以下指令luatos-pc-64bit.exe F:\LuatOS_project\LuatOS-master\app_engine\factory F:\LuatOS_project\LuatOS-master\script\libs输入完成后单击回车键就可以在模拟器上运行 引擎 Air8101 出厂软件的出厂软件启动后如下图所示鼠标模拟左右滑屏就可以看到自己添加的 24 节气 app点击运行测试 app 功能看看是否可以正常运行。点击一下点击之后第一个窗口如下图所示点击节气卡片进入详情页如下图所示从图片种可以看出主页节气图片和详情页小图标都没有显示出来总的来说虽然已经有基本的轮廓但是也存在不少问题接下来我们使用智能体来修复每一个问题尝试修复之后再次复制 vertical_app 代码到模拟器所在目录下再次运行模拟器来验证6.3 修复问题商品中的图片没有正常显示6.3.1 第一轮修复输入首页中的图片没有正常显示注意使用F:\LuatOS_master\module\AirUI\app_store\vertical_app/24_Solar_Terms/res中的图片资源查看智能体的思考过程看下它这次具体修改了什么代码这次仅修改了 24_Solar_Terms_win.lua修改完成之后点击查看具体的修改内容如果你会 LuatOS 编程就知道智能体这次的修复还是存在问题我们先不管有什么问题把修改的内容点击保留_不需要让 AI 修改的部分点击__撤销___把 vertical_app 复制到模拟器目录运行一下看看效果图片仍然没有显示出来的话可以进行多次交互直到在模拟器的运行后首页和详情页图片正常显示出来如下图所示通过 6.3.1 小节调试修复这个问题我们可以总结出重要的一点智能体修复过程中你要学会看代码根据代码思路和实际效果给智能体更详细的输入信息和指令它可以理解得更透彻6.3.2 第二轮修复输入所有详情页面“历史渊源·古文引证处的文字在容器内不能完整显示马上修正查看思考和修改内容保存修改内容如下图所示多次交互后“历史渊源·古文引证处的文字可以在容器内完整显示6.4 总结程序运行过程中若出现图片无法加载、应用启动失败、图片显示异常、字体渲染错误、色彩参数不符等问题可依照前述全部流程进行多次迭代修改。其余代码调试相关问题可查阅智能售货机项目开发文档智能售货机项目开发文档
