第23课：习惯打卡APP
进度 0/30
📆
习惯打卡APP
坚持21天，习惯成自然
📖知识引入
🎯需求：今天打卡了吗
核心功能就一个：每个习惯，每天打一次卡。加上习惯列表、连续天数、数据统计——克制的设计成就好用的工具。
🔥连胜机制：上瘾的秘密
「已连续打卡7天🔥」——连续数字会让人舍不得中断，游戏化设计能温柔地推用户一把。中断了也别骂人，鼓励「重新开始」。
📅日历视图
一整月的格子，打过的天数涂上颜色，像一幅「成就地图」。看着格子越来越满，成就感扑面而来。
🔔本地提醒
到了晚上8点，通知栏温柔提醒：「今天还没打卡哦」。本地通知不用服务器，手机自己就能定时发送。
📊打卡热力图
像GitHub的贡献图：颜色越深打卡越多。一年下来是一幅漂亮的「坚持地图」——数据会讲你的成长故事。
💡
好工具让人坚持，好设计让人愿意坚持——打卡APP的灵魂是鼓励不是批评！
🔍打卡逻辑拆解
// 打卡核心逻辑
function checkIn(habit, today) {
if (habit.lastDate === today) return; // 今天已打卡
const streak = (habit.lastDate === 昨天)
? habit.streak + 1 // 连续：天数+1
: 1; // 断了：重新开始
saveRecord({ habitId: habit.id, date: today, streak });
playCelebrate(); // 撒花动画 🎉
}「今天打卡」按钮背后的思考：
❓ 已打过卡了吗？
├─ 是 → 按钮变灰显示「今日已完成」
└─ 否 ↓
❓ 昨天打卡了吗？
├─ 是 → 连续天数+1 🔥
└─ 否 → 连续天数归1
（温柔提示：「新的开始！」）
│
▼
💾 保存记录+刷新界面+庆祝动画日历视图长这样： ┌─────────────────┐ │ 九月 │ │ 一 三 三 四 五 六 日 │ │ ✅ ✅ ✅ ✅ ✅ ✅ ⬜ │ │ ✅ ✅ ⬜ ⬜ ⬜ ⬜ ⬜ │ │ ... │ │ 连续7天 🔥 │ └─────────────────┘
🎯小测验
第1题：用户中断打卡后，APP应该？
第2题：「晚上8点提醒打卡」用什么技术？
第3题：打卡热力图的作用是？
📝本课知识点
- ✓核心功能：每个习惯每天打卡一次
- ✓连胜机制激励坚持
- ✓日历视图=成就地图
- ✓本地通知到点温柔提醒
- ✓热力图讲述坚持的故事
第23课完成！继续探索下一课吧 🚀