🪧AI自动编程结合聚合数据的“数据集(块)/API”，编程小白也能轻松打造各类各场景的应用。
关键词：聚合数据、AI、Trae、Claude-3.5-Sonnet、GPT-4o、数据集
随着人们生活条件的提高，大家越来越注重饮食的健康与营养，一直希望有一款属于自己的“食物营养成分”快速查询分析(如：能量、碳水化合物、蛋白质、脂肪、维生素等含量)的H5应用小册🌽。
但作为一个基础薄弱的小白🐶，想从零开始创建这么一个“食物营养成分查询小册”的H5应用，至少要学会前端、后端、数据库甚至UI，之前是想都不用想就放弃了。
随着AI大模型的飞速发展，不断有各种基于大模型的AI编程工具的发布，如：Ai Cursor、Trae、通议灵码等等。看了其他开发者使用这类工具的开发应用的案例，让我看到了希望，即使是小白也能快速搭建应用的😜。
那么，就让我们从零开始尝试去创造一个属于自己的“食物营养成分查询小册”的H5应用吧。
一、应用功能需求介绍🍎
应用名称：食物营养成分查询小册
功能需求：用户可以通过分类或关键词检索食物，查询各种食物🥛🍎🍃🥩每100克的营养成分信息（如能量、蛋白质、碳水化合物、脂肪、维生素、矿物质等含量），应用页面要求简洁易用。
二、先做一些前期准备
2.1 选择AI开发工具🔧
AI开发工具这类目前市面上有很多，基本都可以免费试用。那就摇骰子🎲从中随机选一个吧。最终选中：Trae。
2.1.1 Trae下载与安装
Trae 是一款字节跳动推出了一款面向海外市场的AI编程工具。Trae 与 AI 深度集成，提供智能问答、代码自动补全以及基于 Agent 的 AI 自动编程能力。
你可以通过访问其官网（https://trae.ai）,下载和安装适合自己系统的版本和语言。更多Trae安装使用教程可以访问：https://docs.trae.ai/docs/set-up-trae?_lang=zh
2.1.2 Chat和Builder模式介绍
你可以通过Chat和Builder两种模式来使用Trae。两种模式的区别：
Chat模式： 本模式是编码过程中的全能 AI 伙伴，可以用来回答编码问题、讲解代码仓库、生成代码片段、修复错误等。
Builder模式： 本模式可以帮助你从 0 到 1 开发一个完整的项目。你可以将它无缝融入到项目构建的流程中。
在 Builder 模式下，AI 助手在回答时会根据需求调用不同的工具，包括分析代码文件的工具、编辑代码文件的工具、运行命令的工具等等。从而让回答更精确、更有效。
（作为一个基础薄弱的开发小白，不用多想了，我肯定选择Builder模式啦！🤣）
2.2 获取食物营养成分数据📊
前面，我们已选定了哪个🤖工具替我们编写代码了。接下来，我们需要搜集整理下各种食物营养成分的标准化数据了。
网络上资料很多，有在线查询的、格式多样的文档等等，但这个整理起来相当耗时和费劲。
运气🍀不错，最后在聚合数据的数据集市场，找到了现成且已整理好的“食物营养成分数据”。（主要还免费🆓）
看了下数据内容和结构基本能满足需要，而且还支持多种格式免费下载（csv/sql/db）。我果断选择下载SQLite数据库文件，后续可以让🤖直接编写代码检索数据库获取数据。
如果你有其数据需求，你也可以去聚合逛逛：https://www.juhe.cn/market/product/id/11087
三、让AI开始工作吧🤖
3.1、创建项目🈳
首先，在电脑上创建一个文件夹 food_nutrition作为项目目录。然后启动Trae软件，选择打开刚刚创建的文件夹，并切换到的Builder模式。
本次应用开发，打算让AI使用Vue.js+Python+SQLite去实现。前置的Node.js和Python环境的安装这里不介绍了，或你也可以问Trae😜
3.2、开始对话⏰
开始第一轮对话，让🤖开始正式开始创建项目和编写代码吧。（它很智能，不用太专业需求描述，大白话它也能听懂）。
告诉它💬：
“
创建一个H5项目
项目功能：一个食物营养成分在线查询手册，用户可以通过分类或搜索关键词进行查看。
技术选型：前端Vue,后端Python,数据库SQLite
”
等待机器人应答…⌛️
接下来，它将会一步步引导你去完成项目的基础框架创建，你跟着提示操作即可。
经过第一轮对话，Trae已经替我们创建好了整个项目的前后端基本框架。
3.3、继续对话⏰
继续对话💬：
“继续，创建2个页面，分别是首页、搜索页。首页主要是展示食物的分类，搜索页用于搜索食物。”
经过它一顿🔧操作之后，已经替我们创建好了首页和搜索两个页面的初稿了。
3.5、再次对话⏰
上一轮，已经完成首页和搜索页的创建和访问。但显示的数据还是🤖自动模拟生成的，不是我们获取到的数据库里面的数据。
接下来，就是让它自动从我们数据库中读取我们想要的数据并展示。
Ps：我们要先将从聚合平台下载的“食物营养成分”数据库DB文件food_nutrition.db，复制到的项目文件夹/backend/app/下。
数据具体的表结构及字段，官网有详细介绍说明。
继续对话💬：
“
Home首页的食物分类从数据库food_nutritioin.db中的j_food_categories表读取且只读取cate_id=0的分类。
读取字段id、title并展示，分类的icon为assets目录下id值加上.svg后缀文件。
”
再次经过它一顿操作之后⌛️…
我们已经完成了首页的食物分类列表的展示，且数据是通过数据库中读取返回的。 当然，过程中会遇到一些异常、错误，我们只需简单的将错误提示内容，以对话方式发给🤖，他就会帮你解决的👌。
其他页面的功能实现，也是类似的思路和逻辑。不断的和🤖进行对话，让其不断完成、修复，直到页面正常访问。
3.6、一直对话⏰
食物营养成分小册所需要的功能基本完成后，我们就需要让AI继续帮我们美化页面。
前面阶段完成的只是功能的完善，还未进行页面的美化处理。
我们同样是采用不断和🤖对话的方式，让他优化，直到达成我们所需要的效果。（不用怕🤖劳累，它是不知疲倦的，也不会生气，可以24小时工作😜）。
比如你可以这样、这样、这样去让他优化💬：
“优化Home页面，能适配移动端显示”
“Home底部新增通用导航，导航内容： 首页、食物搜索、关于我们”
“导航文字居中显示，并美化导航”
“继续优化Home首页，移动端显示每行最少显示2个分类"
“foods页面，每个卡片里面增加显示 每100g食物的能量 、蛋白质、脂肪 含量。 布局要好看。分别创建能量、蛋白质、脂肪的小icon”
“......”，
3.4、完成对话✅
最终所有完成的效果达到你满意，你就可以验收啦😁，结束本次项目开发。下面来看看我们最终完成的效果。
四、H5应用效果预览
五、源代码分享
大家有兴趣的，可以去看看🤖写的这个引用代码。
