【Code With SOLO】用 SOLO 打造游戏化每日委托管理应用，完成委托领取奖励

SOLO挑战赛专区
1

1. 摘要

用 TRAE SOLO 从零开发了一款将日常待办事项包装成开放世界游戏任务的应用。它支持一次性委托和定时委托模板，支持时区切换，配备完整的奖励惩罚机制、AI 语音创建和验收任务功能。从需求分析到功能完善，SOLO 全程参与，仅用 2-3 天便完成了 MVP 开发。

2. 背景

我是一名零项目经验、打算入门应用开发的小白。据说每个小白开发者在学习之路上，都写过至少一款时间管理类应用——番茄钟、日历待办……然而，每个人对任务安排的理解和目标达成的爽点各不相同，市面上的现成应用往往难以贴合个人定制化需求，导致很多人难以坚持使用。

TRAE SOLO 这类 Coding Agent 的出现，让每个普通人都有机会深入挖掘独属于自己的内在驱动力，直面真正的爽点，开发量身定制的时间管理工具。

对我个人来说，我希望这个应用能有以下特点：

  • 类似游戏的奖励惩罚机制，让用户同时收获完成委托的成就感和奖励累积的满足感，奖励多少完全由用户自定义（APP 只设硬性上限防止通货膨胀）
  • 支持语音创建任务和 AI 验收，降低使用门槛，避免用户因手动录入繁琐而放弃使用
  • （构思中）积攒的奖励可兑换虚拟价值，如抽卡、种田游戏中的养料，或用于生成一段时间内委托的复盘精致卡片

3. 实践过程

3.1 初始需求拆解

我希望这个应用能跨平台，同时尽可能复用代码。我和 SOLO 讨论了整个项目的规划和技术栈选择。我们决定使用：

  • React 18 + TypeScript 作为基础框架
  • Zustand 进行状态管理（支持持久化）
  • Tailwind CSS 进行样式开发
  • Capacitor 做移动端打包

3.2 核心功能开发

通过具体需求，展示如何与 SOLO 协作：

需求一：首页委托列表的排序

“首页的委托列表按如下方式排序：今天截止的比以后截止的优先；在此基础上打卡的比反馈验收的优先；在此基础上奖励高的比低的优先。此外，已完成并已领取奖励的放最后。”

需求二：定时重复功能

“现在只能创建一次性的委托是吧？再加个定时模板的功能，用户设一次，每天 0 点自动触发脚本确定当天是否生成新委托。思考一下这种模板的字段要有哪些？模板和生成的委托之间怎么关联？”

需求三：过期自动结算

“首页加个定时器，每秒检查一下委托有没有过期。如果过了 deadline 且还是 pending，就标记为“已过期”同时扣惩罚。另外时区切换的时候这个判断要正确。”

需求四：AI 对话创建委托

“右下角加个聊天按钮，可以直接跟 AI 说“帮我创建一个每天早上 8 点提醒我写日报的委托”（支持语音输入），AI 理解后直接生成。你觉得这个怎么实现比较好？”

需求五：领取奖励的动效

“点击领取奖励的时候，能不能搞个弹窗动画？类似原神抽卡那种感觉，金光闪闪的，给用户一点情绪价值。”

3.3 踩坑与修复

开发过程中遇到了不少问题，SOLO 都帮我一一解决：

如何正确处理 UTC 时间和本地时间，还有保证时区切换时不会发生错乱

  • 解决：存储层统一用 UTC Date 对象，显示时根据用户时区转换。时区切换时显示偏移量标签（如 +2h），避免混淆。夏令时由 Intl.DateTimeFormat API 自动处理

保证首页任务列表定时刷新、委托过期能被正常触发

  • 解决：每秒检查一次，判断委托是否已过期（标记"已过期"并扣惩罚）。每天 0 点（用户时区）触发每日刷新：生成新的定时委托、清理已完成委托、自动领取奖励。若应用长期未打开，重新打开时自动回溯处理离线期间的所有委托结算

定时委托一天内重复孵化问题

  • 解决：为模板添加 lastTriggeredDate 字段，确保一天只孵化一次

主题色怎么选？响应式如何适配小尺寸设备和大尺寸设备？

  • 举例：首页 AI 对话气泡、奖励历史中时间轴设计与历史记录联动滚动
  • 解决：得益于 SOLO 集成的浏览器实时预览，与 SOLO 讨论修改每一处细节，调整 margin、padding 等，然后截图反馈

接近完成时，SOLO Auto Model 匹配到某模型误将 Home.tsx 覆盖，而 git 版本过早，导致新内容丢失

  • 教训：选固定模型，避免"抽奖"翻车
  • 建议：期待 TRAE SOLO 在 Auto Model 模式下，能显示当前抽中了哪个模型

4. 成果展示

项目源代码：daily-quest-manager

4.1 UI 界面

Home
Home1280×2844 169 KB
Manager
Manager1280×2844 173 KB
History
History1280×2844 262 KB

4.2 奖励领取演示

AI_1
AI_11280×2844 180 KB
AI_2
AI_21280×2844 220 KB
Reward
Reward1280×2844 166 KB

5. 效果与总结

5.1 提效成果

TRAE SOLO 的提效，不仅在于加快了编码速度，更在于：

  1. 从技术选型到效果验证的无缝衔接
    对于新手开发者，面对"这个效果怎么做"完全无从下手。传统方式下，大量时间花在 Google 搜索技术论坛和啃官方文档。而在 TRAE SOLO 中，这些都由 Agent 代劳。相比其他 Coding Agent，TRAE SOLO 内置预览功能，开发前端项目时不用频繁切换浏览器，体验更流畅。

  2. 高效的 Bug 发现
    出现 Bug 时，只需把错误信息丢给 Agent，基本都能定位并解决。有时 Bug 表现不明确，只要描述现状和期望效果，经过几轮尝试 Agent 也能找到根本原因并修复。这极大减轻了开发人员的负担，也不至于磨灭小白开发者的学习热情。

5.2 SOLO 的作用

TRAE SOLO 在这个项目中扮演的角色：

  1. 知识助手：帮我跳过"Google 搜索 → 筛选论坛 → 啃官方文档"这个繁琐过程，直接给出实现方案。对于新手来说，不用再为"这个效果怎么做"而焦虑。

  2. 代码生成器：把需求描述清楚，SOLO 就能生成可用的代码，减少了在编辑器里反复试错的时间。

  3. 问题排查者：出现 Bug 时，把错误信息或现象描述给 SOLO，经过几轮尝试通常能找到根本原因。

  4. 实时预览伙伴：内置预览功能让修改所见即所得，不用频繁切换窗口，开发节奏更流畅。

5.3 可复用方法

  1. 分步开发法：不要想一口气做完所有功能，先做 MVP，再逐步迭代
  2. 清晰的需求表述：每次向 SOLO 提需求时，尽量明确具体
  3. 边做边测：开发一部分功能就测试，发现问题及时修复，避免后期堆积
  4. 保持开发记录：将项目规范、技术决策、Prompt 技巧等整理成文档。这样每次打开新 session 时，Agent 能快速理解项目背景，行为更一致

这个应用还可以继续优化，比如奖励闭环（怎么花掉）、更多的委托模板、日历预览、月度/年度总结等，但目前的功能已经完全满足我的日常使用需求了。通过这个项目，我深刻感受到了 AI 辅助编程的力量，它让我可以更专注于产品逻辑，而不是代码细节。