【社会服务赛道】菜场砍价情报站
标签：
社会服务
0. 先和大家打个招呼吧 
大家好，我是一个普通的上班族，平时周末喜欢逛菜市场。一直想做一个能帮大家买菜省钱的小工具，但是搁置了很久。
直到遇到 TRAE。
说实话，整个过程比我想象的简单太多了。我只需要用大白话把想法告诉它——“我想做一个菜市场比价工具，消费者打开就能看到每个菜在不同摊位的价格，摊主自己能上报价格”——然后 TRAE 就一步步帮我搭出来了。最让我惊讶的是，当我说"菜品应该也要包含葱姜蒜等内容"时，它立刻帮我把14种菜扩展到了45种，还自动分好了10个分类。当我说"所有摊主不能修改别人的数据吧？防止有人使坏"，它马上设计了一套 PIN 密码验证机制。
以前觉得"做个小程序"是程序员才敢想的事，现在发现，只要你能把需求说清楚，TRAE 就能帮你实现。原来门槛不是技术，是想象力。
1. Demo 简介
菜场砍价情报站 是一个单页 Web 应用，无需安装，手机浏览器打开就能用。
面向谁：
- 经常逛菜市场的消费者——想快速找到今天哪个摊位最便宜
- 菜市场的摊主——想让自己摊位的价格被更多顾客看到
核心功能：
功能一：打开即看，全部菜品一目了然
不需要输入任何菜名，打开页面就能看到 45 种菜品按 10 个分类排列（叶菜、根茎、茄果、豆类、菌菇、葱姜蒜、肉类、水产、禽蛋、豆制品）。每个菜品卡片上直接显示最低价和摊位名。
[截图 1：消费者浏览首页 - 展示所有菜品分类和最低价]
支持四种排序模式一键切换：
最便宜（默认）—— 比价格
最新鲜 —— 比品质
兼顾 —— 性价比
轮播 —— 每 3 秒自动切换
功能二：点击展开，全部摊位比价一目了然
点击任意菜品卡片，原地展开内联比价详情：最佳推荐卡片高亮显示，其余摊位按排名列出，带价格差异标注。暂停营业的摊位自动排到最末尾。
功能三：摊主自助上报，PIN 密码防篡改
摊主输入摊位名和价格即可上报。首次使用需设置 4-6 位数字密码，后续修改价格需要验证密码。密码用 SHA-256 哈希存储，别人看不到。还支持暂停营业、删除摊位等管理功能。
其他亮点
语音输入：对着手机说菜名就能搜索
自动暂停：3 天未报价的摊位自动标记为暂停
响应式设计：手机上体验良好
2. Demo 创作思路
灵感来源：
我每周去菜市场买菜，总是要逛好几圈才能找到最便宜的摊位。有时候为了省几毛钱走了很多冤枉路。我就想：如果有一个工具，能让我一眼看到今天哪个摊位最便宜，该多好？
想解决的问题：
- 信息不对称：消费者不知道各摊位的价格，只能靠"逛"来比价
- 摊主曝光难：好摊位、好价格缺乏展示渠道
- 品质难量化：除了价格，新鲜度也很重要，但消费者没有直观的对比方式
为什么做这个方向：
- 菜市场是高频场景，几乎人人都会用到
- 摊主有动力上报价格（获得曝光），消费者有动力查看（省钱）
- 技术门槛低，不需要后端服务器，一个 HTML 文件就能跑
- 真实的社区服务场景，有温度
3. Demo 体验地址
Zip 文件下载： 点击下载（见附件）
菜场砍价情报站-demo.zip (11.7 KB)
下载后解压，用浏览器打开 index.html 即可体验。
种子摊位数据已预置，无需任何配置，打开即用。
4. TRAE 实践过程
整个 Demo 从零到完成，完全由 TRAE 辅助开发。以下是关键步骤：
阶段一：创意到原型（1 个 Session）
目标： 把"菜场砍价情报站"的想法变成可交互的 Demo。
和 TRAE 的对话：
- “报名已经通过，现在需要完成这个作品”
- “要求使用难度极低，方便，人们会去使用而不是做一个看起来不错的垃圾”
TRAE 帮我完成了一个极简版 Demo：消费者搜索菜名 → 看到最低价摊位，摊主输入摊位名+菜品+价格 → 提交。全部用 localStorage 存储，无需后端。
Session ID：
[3059260643873161:fdb9839ee0794df5b1bf341367d8523b_6a3347828c1afa4bce5bc620.6a3347828c1afa4bce5bc623.6a3347828c1afa4bce5bc621:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/18 09:18:58)]
阶段二：完善功能 —— 菜品扩展 + 安全机制（1 个 Session）
目标： 扩展菜品覆盖范围，增加 PIN 密码防篡改。
和 TRAE 的对话：
- “菜品应该也要包含葱姜蒜等内容，因为显示的不全，是否应该有更合理的规划？”
- “所有摊主不能修改别人的数据吧？防止有人使坏”
TRAE 帮我把菜品从 14 种扩展到 45 种，覆盖 10 个分类。同时设计了一套完整的 PIN 安全机制：SHA-256 哈希存储密码、sessionStorage 会话级解锁、种子摊位无需 PIN。摊主管理面板也改为仅显示当前会话已解锁的摊位。
Session ID：
[3059260643873161:2dcbb41597338201e46d574f4e232333_6a3347828c1afa4bce5bc620.6a39dd610e159180c8dabf6a.6a39dd610e159180c8dabf68:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/23 09:12:01)]
阶段三：体验升级 —— 浏览模式 + 排序切换（1 个 Session）
目标： 让用户不用输入菜名就能看到所有价格，增加排序模式。
和 TRAE 的对话：
- “最好是不需要输入菜名才能查询，应该是对应菜名在不同摊位的价格”
- “默认是最便宜，可以选择最新鲜因为有人注重的方向不同，或者两者兼顾，或者两者轮播”
TRAE 把首页从"空白搜索框"改成了"全菜品浏览模式"，按分类排列，每个菜品显示最低价和摊位。新增四种排序模式：最便宜、最新鲜、兼顾性价比、自动轮播。搜索框改为实时过滤工具。
Session ID：
[3059260643873161:29dcfd9856d5f952c6e53206eea32c80_6a3347828c1afa4bce5bc620.6a39f5190e159180c8dac6b6.6a39f5190e159180c8dac6b4:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/23 10:53:13)]
阶段四：报名创意展示（1 个 Session）
目标： 生成比赛报名的创意提案 HTML。
Session ID：
[3059260643873161:2d05d79fd4564617a154b3f3fdeadaa0_6a3347828c1afa4bce5bc620.6a3a24b70e159180c8dad15e.6a3a24b70e159180c8dad15c:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/23 14:16:23)]
开发关键步骤截图
技术栈
- 纯前端：HTML + CSS + JavaScript
- 数据持久化：localStorage + sessionStorage
- 密码安全：Web Crypto API（SHA-256）
- 语音输入：Web Speech API
- 零依赖，单个 HTML 文件，打开即用
所有数据均依赖上报数据，没有模拟以及测试数据
附：报名帖
感谢 TRAE 让零基础的人也能做出完整的作品！