【More Than Coding】用 SOLO 48 小时打造一款专业的婴儿健康追踪 App
摘要
作为一名关注育儿领域的开发者,我利用 TRAE SOLO 全程辅助开发,仅用 48 小时 就完成了从需求分析到功能交付的全流程,打造出一款集睡眠分析、心情追踪、健康日历、用药管理、幼儿园食谱于一体的 baby_daily 婴儿健康追踪 App。相比传统开发模式,效率提升 5 倍以上。
成果展示(分析页面更多图表开发中…)
!
其他页面
背景
我的角色
后端开发者 + 新手爸爸
面临的挑战
本人是一名后端开发者,对于移动端和flutter技能仅仅是熟悉,然后在育儿过程中,我发现市面上的婴儿健康记录 App 普遍存在以下痛点:
| 痛点 | 具体表现 |
|---|---|
| 操作繁琐 |
记录一次睡眠需要填写 5+ 个字段,耗时 2-3 分钟 |
 数据孤岛 |
睡眠、饮食、健康数据分散在不同 App,无法关联分析 |
 体验不佳 |
界面设计老旧,缺乏数据可视化,难以发现规律 |
 食谱缺失 |
没有针对幼儿园食谱的管理和对比功能 |
目标
开发一款 All-in-One 的婴儿健康追踪工具,让数据记录变得简单,让健康洞察变得直观。
实践过程
Step 1: 需求拆解与架构设计
核心功能矩阵
┌─────────────────────────────────────────────────────────────┐
│ baby_daily 功能架构 │
├─────────────────────────────────────────────────────────────┤
│ 🛏️ 睡眠追踪 │ 自动计算睡眠时长、入睡/醒来时间分布、趋势分析 │
│ 😊 心情记录 │ 每日情绪状态追踪、月度心情日历可视化 │
│ 🏥 健康管理 │ 疼痛等级 1-10 可视化、疾病记录时间轴 │
│ 💊 用药管理 │ 药物服用记录、维生素补充追踪 │
│ 🍽️ 食谱管理 │ 幼儿园食谱导入、周计划制定、实际记录对比 │
│ 📊 数据分析 │ 7天/30天数据切换、自定义图表、健康日历 │
└─────────────────────────────────────────────────────────────┘
SOLO Prompt 示例:
"帮我设计一个 Flutter 婴儿健康追踪 App 的架构,要求:
1. 使用 Cubit 进行状态管理
2. 采用 Repository 模式处理数据持久化
3. 支持 SQLite 本地存储
4. 清晰的层级划分: UI层 / 业务层 / 数据层
5. 预留多宝宝切换的扩展能力"
SOLO 输出:
完整的项目目录结构- 各层职责划分说明
- Repository 接口定义模板
- Cubit 状态管理最佳实践
Step 2: 数据模型设计
睡眠记录模型
/// 睡眠日志实体
class SleepLog {
final int? id;
final int userId; // 关联宝宝
final DateTime bedTime; // 上床时间
final DateTime? wakeTime; // 醒来时间
final int? quality; // 睡眠质量 1-5
final String? notes; // 备注
Duration get duration =>
wakeTime?.difference(bedTime) ?? Duration.zero;
}
SOLO Prompt:
"生成婴儿健康追踪 App 的核心数据模型:
1. 用户(宝宝)信息模型
2. 睡眠记录模型,支持多次入睡/醒来
3. 心情记录模型,支持多种情绪状态
4. 疼痛记录模型,包含等级、部位、持续时间
5. 用药记录模型,支持药物和维生素"
Step 3: 核心功能开发
3.1 睡眠分析图表
技术挑战: 需要实现平滑的睡眠趋势曲线,支持 7天/30天 数据切换
SOLO Prompt:
"用 Flutter CustomPainter 实现睡眠数据趋势图表:
- 支持贝塞尔曲线平滑连接数据点
- 渐变填充折线下方区域
- 显示数据点数值标签
- 支持 7天和 30天两种时间维度
- X轴显示日期,Y轴显示睡眠时长(小时)"
核心代码:
class SleepChartPainter extends CustomPainter {
final Map<DateTime, double> data;
final Color lineColor;
final Color fillColor;
@override
void paint(Canvas canvas, Size size) {
// 使用贝塞尔曲线绘制平滑折线
final linePath = Path();
linePath.moveTo(points.first.dx, points.first.dy);
for (int i = 1; i < points.length; i++) {
final prev = points[i - 1];
final curr = points[i];
final midX = (prev.dx + curr.dx) / 2;
linePath.cubicTo(
midX, prev.dy,
midX, curr.dy,
curr.dx, curr.dy,
);
}
// 渐变填充
final fillPath = Path();
fillPath.moveTo(points.first.dx, padding.top + chartHeight);
for (final point in points) {
fillPath.lineTo(point.dx, point.dy);
}
fillPath.close();
canvas.drawPath(fillPath, fillPaint);
canvas.drawPath(linePath, linePaint);
}
}
实现效果:
- 平滑的睡眠趋势曲线
- 渐变填充增强视觉层次
- 数据点悬停显示具体数值
- 7天/30天一键切换,带缓存优化
3.2 疼痛等级可视化
创新点: 根据疼痛等级 1-10 显示不同样式,直观反映严重程度
// 疼痛等级标记 - 根据等级显示不同样式
Widget _buildPainLevelMarker(int level, bool isSelected) {
final color = PainLevelColors.getColor(level);
if (level <= 4) {
// 轻微/轻度 - 小圆点
return Container(
width: 8, height: 8,
decoration: BoxDecoration(color: color, shape: BoxShape.circle),
);
} else if (level <= 6) {
// 中度 - 中等圆点带边框
return Container(
width: 12, height: 12,
decoration: BoxDecoration(
color: color.withAlpha(200),
shape: BoxShape.circle,
border: Border.all(color: color, width: 2),
),
);
} else if (level <= 8) {
// 重度 - 带感叹号的警示圆点
return Container(
width: 14, height: 14,
decoration: BoxDecoration(
color: color.withAlpha(50),
shape: BoxShape.circle,
border: Border.all(color: color, width: 2),
),
child: Center(child: Text('!', style: TextStyle(color: color))),
);
} else {
// 剧烈 - 带叉号的紧急标记
return Container(
width: 16, height: 16,
decoration: BoxDecoration(
color: color.withAlpha(30),
shape: BoxShape.circle,
border: Border.all(color: color, width: 2),
),
child: Center(child: Text('×', style: TextStyle(color: color))),
);
}
}
3.3 健康日历
功能亮点:
月度日历视图,支持月份切换- 疼痛等级颜色编码(绿→黄→橙→红)
疾病记录右上角标记- 月度健康概况统计
Step 4: 踩坑与解决方案
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 睡眠统计跨午夜计算错误 | 入睡 23:00,醒来 07:00,直接计算得到负数 | 定义统计区间为 [前一天 19:00, 当天 19:00),跨午夜时间加 24 小时 |
| 图表数据点过多导致拥挤 | 30天数据在手机上显示重叠 | 动态调整标签显示间隔: >14天每5天显示, >7天每2天显示 |
| 用户切换后数据未刷新 | Cubit 状态监听未及时更新 | 在 didChangeDependencies 中监听用户变化,清除缓存并重新加载 |
| 日历网格计算偏移 | 星期计算未考虑时区 | 使用 weekday % 7 统一处理周日为一周第一天 |
成果展示
应用界面预览
首页仪表盘
- 深色主题设计,护眼舒适
- 快捷入口:睡眠、心情、健康、用药
- 今日概览卡片
睡眠分析页
┌─────────────────────────────────────┐
│ 睡眠分析 [7天▼] │
├─────────────────────────────────────┤
│ ┌─────────┐ ┌─────┐ ┌─────┐ │
│ │ 8.5h │ │ 12h │ │ 7天 │ │
│ │ 平均睡眠 │ │ 最长 │ │记录 │ │
│ └─────────┘ └─────┘ └─────┘ │
│ │
│ [睡眠时长] [入睡时间] │
│ │
│ ╭─╮ ╭─╮ ╭─╮ │
│ ╱ ╲ ╱ ╲ ╱ ╲ │
│ ╱ ╲ ╱ ╲ ╱ ╲ │
│ ╱ ╲╱ ╲╱ ╲ │
│ ╱ ╲ │
│ 01/13 01/14 01/15 01/16... │
└─────────────────────────────────────┘
健康日历
- 月份导航:左右箭头切换
- 疼痛标记:根据等级显示不同样式
- 疾病提示:右上角橙色小圆点
- 选中高亮:绿色背景突出显示
食谱管理
- 周计划表格视图
- Excel 一键导入
- 实际记录与计划对比
- 营养分析统计
技术架构
baby_daily/
├── lib/
│ ├── cubits/ # Cubit 状态管理
│ │ ├── sleep_cubit.dart
│ │ ├── mood_cubit.dart
│ │ └── health_cubit.dart
│ ├── database/
│ │ ├── repositories/ # 数据访问层
│ │ └── storage/ # SQLite 实现
│ ├── models/ # 数据实体
│ ├── pages/ # 页面
│ │ ├── analysis/ # 数据分析
│ │ ├── logs/ # 各类日志
│ │ └── kindergarten_diet/ # 食谱管理
│ ├── widgets/ # 通用组件
│ └── services/ # 业务服务
└── test/ # 单元测试
核心指标
| 指标 | 数值 |
|---|---|
| 代码行数 | ~8,000 行 |
| 页面数量 | 15+ 个 |
| 自定义组件 | 20+ 个 |
| 数据实体 | 10+ 个 |
| 平台支持 | iOS / Android / Web / Desktop |
效果与总结
效率对比
| 阶段 | 传统开发 | SOLO 辅助 | 提升倍数 |
|---|---|---|---|
| 架构设计 | 1 天 | 2 小时 | 12x |
| 数据模型 | 4 小时 | 30 分钟 | 8x |
| 图表实现 | 2 天 | 4 小时 | 12x |
| UI 开发 | 3 天 | 1 天 | 3x |
| 调试优化 | 2 天 | 4 小时 | 12x |
| 总计 | 8 天 | 48 小时 | 4x |
SOLO 在我流程中的角色
需求分析 → 架构设计 → 代码实现 → 调试优化 → 交付
↓ ↓ ↓ ↓
辅助 主导 主导 辅助
- 架构设计阶段: SOLO 提供最佳实践建议,避免架构陷阱
- 代码实现阶段: SOLO 生成高质量模板代码,我专注业务逻辑
- 调试优化阶段: SOLO 快速定位问题,提供解决方案
可复用的方法
1. 分模块迭代开发
MVP → 核心功能 → 增强功能 → 优化体验
- 先完成睡眠追踪 MVP,验证可行性
- 逐步添加心情、健康、用药等模块
- 最后优化 UI 和交互体验
2. 数据驱动设计
- 优先设计数据模型和存储方案
- UI 根据数据结构自动适配
- 减少后期重构成本
3. Prompt 工程技巧
- 明确需求边界:功能、技术栈、约束条件
- 提供上下文:项目背景、已有代码、目标效果
- 迭代优化:先跑通再优化,逐步细化
对 AI 工作方式的思考
传统开发 vs AI 辅助开发
| 维度 | 传统开发 | AI 辅助 |
|---|---|---|
| 代码产出 | 逐行手写 | 批量生成+人工审核 |
| 问题解决 | 搜索文档+试错 | 直接对话获取方案 |
| 学习曲线 | 陡峭 | 平缓 |
| 创造力 | 受限于个人经验 | 融合海量最佳实践 |
我的结论:
AI 不是替代开发者,而是放大开发者的能力。优秀的 Prompt 工程师 + AI = 超级开发者。
Tags
#Flutter #婴儿健康 #SOLO挑战赛 #AI开发 #跨平台应用 #Cubit #数据可视化 # parenting
本作品使用 TRAE SOLO 全程辅助开发,感谢 AI 让开发更高效、更有趣!