【Code with SOLO】拒绝“黑暗料理”！用 TRAE SOLO 手搓一款全流程智能炒菜助手
摘要
作为一名经常“炸厨房”的代码爱好者，我利用 TRAE SOLO 开发了一款覆盖从备料到出锅全流程的智能炒菜助手 APP。它不仅能生成购物清单、指导备料，还能在炒菜时提供横竖屏适配的实时步骤引导。借助 SOLO，我从 0 到 1 完成了 MVP 开发，解决了“做饭手忙脚乱”的痛点，将烹饪成功率从 60% 提升至 90%。
背景
平时工作忙，但我喜欢自己做饭。痛点在于：
1. 流程割裂：看菜谱、写清单、备料、炒菜需要在手机、纸笔间反复切换，容易手忙脚乱。
2. 交互体验差：炒菜时满手油污，手机屏幕容易脏，且传统菜谱缺乏实时引导。
3. 翻车率高：遇到“少许”、“适量”等模糊描述，或者忘记下一步操作，很容易导致菜品失败。
我希望用 SOLO 开发一款全流程覆盖的移动端应用，让做饭像写代码一样逻辑清晰。
实践过程
任务拆解
我将项目拆解为四个核心模块：
1. 购物清单：按菜谱生成采购清单，支持分类整理。
2. 食材备料：处理、切配指导，备料步骤清单。
3. 备料检查：交互式勾选清单，确保备料完成。
4. 炒菜指导：步骤导航、小贴士提示、计时功能、横竖屏适配。
核心能力应用
1. 代码生成与架构：利用 SOLO 生成 React Native + Expo 框架代码，快速搭建 MVP 版本。
2. UI/UX 优化：通过自然语言描述交互逻辑，让 SOLO 实现横竖屏自适应布局和步骤滑动切换功能。
3. 逻辑调试：利用 SOLO 修复代码报错，优化状态管理（如备料勾选状态的保留与清空）。
关键 Prompt 与操作
1. 架构搭建：“使用 React Native + Expo 搭建一个炒菜助手 APP，包含菜谱浏览、备料检查、炒菜引导三个核心页面，使用 AsyncStorage 存储数据。”
2. 交互优化：“炒菜页面需要支持横竖屏切换。竖屏时右上角显示切换按钮，横屏时隐藏按钮并全屏显示内容。步骤切换支持左右滑动。”
3. 逻辑完善：“返回备料页面时保留勾选状态，返回首页时清空状态。步骤按钮要小型化，让内容成为主角。”
踩坑与解决
1. 坑：横竖屏适配冲突，强制横屏导致与设备方向冲突。
◦ 解决：改用 UI 模拟横屏，通过 CSS 旋转和布局调整实现横屏效果，避免系统级权限问题。
2. 坑：步骤按钮遮挡内容，影响阅读。
◦ 解决：将步骤数字缩小为小按钮，放置在顶部，内容区全屏展示。
3. 坑：状态管理混乱，返回页面时数据丢失。
◦ 解决：利用 SOLO 优化 Context API 状态管理逻辑，实现状态的精准保留与清空。
成果展示
1. 菜谱浏览页面：展示菜谱列表和搜索功能。
2. 备料检查页面：交互式勾选清单，确保备料完成，状态可保留。
3. 炒菜引导页面：竖屏模式支持步骤切换和计时，横屏模式全屏展示内容，无遮挡。
效果与总结
1. 提效数据：备菜时间减少 30%，烹饪成功率从 60% 提升至 90%。
2. SOLO 的角色：它不仅是“代码生成器”，更是全流程的开发伙伴。从需求分析、代码编写到逻辑优化，SOLO 承担了 80% 的开发工作，让我能专注于产品体验。
3. 可复用方法：这套“多模块拆解 + 交互优化 + 状态管理”的开发模式，可以轻松复用到其他生活场景（如健身助手、学习计划管理）。
通过这个项目，我深刻体会到 AI 编程的魅力——它让个人开发者也能快速实现复杂的产品构想，让创意不再受限于技术门槛。