iT邦幫忙

2025 iThome 鐵人賽

DAY 19
0
佛心分享-SideProject30

AI-Driven Development 實戰篇:30 天 Side Project 開發全紀錄系列 第 19

Day 19 - 心情日記 App Day 1:用 Flutter 打造你的情緒羅盤

  • 分享至 

  • xImage
  •  

昨天完成了 Pocket Smart 的部署,今天要開始新的挑戰:一個能幫助自我覺察的心情日記 Mobile App。這次我決定從 React Native 轉向 Flutter,並且用 AI Driven Development Sprint 來完成這個專案。讓我們看看 AI 如何協助我從一個模糊的想法,變成清晰的產品定義。

可以參考筆者另一篇系列文:AI-Driven Development - 個人開發者的敏捷實踐

今天是 Day 1,AI 主要扮演 Product ManagerSolution Architect 的角色。

為什麼做這個 App?

在這個焦慮感爆棚的時代,我發現身邊越來越多人開始重視情緒管理自我覺察。但市面上的心情記錄 App 往往太複雜——要寫一大段日記、選擇一堆標籤、回答好幾個問題,導致多數人用不到一週就放棄。

核心痛點:想要記錄情緒,但懶得打字、懶得分析

解決方案:極簡的記錄體驗 + AI 的溫暖陪伴

一、專案命名:與 AI 的第一次對話

選名字是很重要的第一步。好的專案名稱要讓人一眼就懂,同時又有點溫度。

我的 Prompt

我要做一個心情日記 Mobile App,核心特色是:
- 快速記錄心情(一句話就好)
- AI 生成每日鼓勵語錄
- 可愛的心情印章(可客製化或 AI 生成)
- 量化情緒的日曆視圖

目標用戶:
- 想要自我覺察的人
- 有情緒管理需求的人
- Quantified Self 愛好者

請建議 5-7 個專案名稱,要:
1. 好記、好唸
2. 有溫暖的感覺
3. Repository 名稱友善(適合 GitHub)
4. 暗示「心情」+「記錄」+「成長」

AI 的建議

AI 給了我這些選項:

  1. moodstamp - mood + stamp(心情印章)
  2. emotrace - emotion + trace(情緒軌跡)
  3. feeljourney - feel + journey(感受旅程)
  4. heartbeat-diary - 心跳日記(暗示活著的感覺)
  5. souly - soul + daily(靈魂日記,俏皮感)
  6. mindful-stamps - 正念印章
  7. vibecheck - 情緒檢查(貼近年輕人語言)

最終決定:MoodStamp

我選擇 MoodStamp 的原因:

  • 直觀:一看就知道是心情相關
  • 核心功能:Stamp(印章)是這個 App 的核心視覺元素
  • Repository 友善moodstamp 簡短、無特殊符號
  • 擴展性:未來可以做 moodstamp-web、moodstamp-ai 等

二、需求分析:讓 AI 當我的 Product Manager

確定名字後,我請 AI 扮演資深 PM,幫我進行更深入的需求分析。

我的 Prompt

你是一位資深產品經理,請針對「MoodStamp - 心情日記 Mobile App」進行需求分析。

## 背景資訊
- 目標用戶:
  1. 想要自我覺察的人
  2. 有情緒管理需求的用戶
  3. Quantified Self 愛好者
  
- 核心痛點:
  1. 傳統日記 App 太複雜,寫不到一週就放棄
  2. 想記錄情緒但不知從何開始
  3. 需要即時的情緒回饋和鼓勵

## MVP 功能(7天內完成)
1. 快速記錄今天的心情(一句話)
2. 給予一個心情印章(emoji 或圖示)
3. 日曆視圖顯示每天的心情印章
4. AI 根據日記生成鼓勵語錄

## 未來擴展
- 印章客製化或 AI 生成
- 心情趨勢分析
- 情緒分類標籤

請從以下角度分析:
1. 用戶場景分析
2. 功能優先級
3. MVP 範圍定義
4. 成功指標
5. Flutter 的技術適配性

AI 的分析重點

AI 給了我很完整的分析,這裡摘錄關鍵洞察:

用戶場景分析

場景一:通勤路上的情緒捕捉

  • Emma 在捷運上感到焦慮
  • 打開 MoodStamp,一句話記錄:「面試有點緊張」
  • 選擇 😰 印章
  • AI 回應:「緊張是因為你在乎,這是你重視自己的證明。」

場景二:睡前的自我覺察

  • Jason 躺在床上回顧今天
  • 快速記錄:「今天完成報告,有成就感」
  • 選擇 💪 印章
  • 打開日曆,看到這週有 3 天是正面情緒

場景三:量化自我的長期追蹤

  • Quantified Self 愛好者 Sarah
  • 每天睡前記錄心情
  • 月底查看日曆,發現週一特別容易焦慮
  • 開始調整週一的行程安排

功能優先級

優先級 功能 理由 P0(必做) 一句話記錄心情 核心價值,降低使用門檻
P0 選擇心情印章 視覺化情緒,直觀易懂 P0 日曆視圖 Quantified Self 的核心需求
P0 AI 生成鼓勵語錄 情感連結,提升留存率 P1(可延後) 編輯/刪除日記 基本但可延後
P1 心情分類標籤 進階分析功能 P2(未來) 自訂印章 差異化功能
P2 AI 生成印章 創新功能

MVP 成功指標

interface MVPSuccess {
  功能完整性: "P0 功能全部可用";
  使用體驗: "從開啟 App 到完成記錄 < 30 秒";
  資料持久化: "日記和印章能正確儲存和讀取";
  AI 整合: "語錄生成成功率 > 95%";
  視覺完整性: "日曆視圖正確顯示所有印章";
}

三、為什麼選 Flutter?從 React Native 轉向的理由

原本我打算用 React Native(畢竟我對 React 很熟),但跟 AI 討論後,決定嘗試 Flutter。

我的考量點

我原本想用 React Native,但考慮到:
1. 這是一個視覺重的 App(印章、日曆)
2. 需要流暢的動畫體驗
3. 我想學習新技術
4. 7 天 MVP 時間緊迫

請分析 Flutter vs React Native,哪個更適合 MoodStamp?

AI 的比較分析

維度 Flutter React Native 學習曲線 Dart 需要學習,但文檔完整 熟悉 React,上手快
UI 組件 Material Design 內建,視覺一致性高 需要更多第三方套件 動畫效果 Hero Animation、Lottie 支援好 需要 Reanimated,較複雜
日曆視圖 table_calendar 套件成熟 react-native-calendars 選擇多 AI 整合 HTTP Client 成熟 Axios 更熟悉
開發速度 Hot Reload 超快 Fast Refresh 也不錯 測試支援 Flutter Test 內建,測試體驗好 Jest + Testing Library,也很成熟
最終產物 單一 codebase,效能好 需要 Native Modules

最終決定:Flutter

選擇 Flutter 的關鍵原因:

  1. 視覺導向的 App:Flutter 的 Widget 系統天生適合做印章和日曆這種視覺元素
  2. 學習新技術:鐵人賽本來就是學習的過程
  3. 社群資源:Flutter 的 pub.dev 生態系很完整
  4. 測試友善:Flutter Test 的 Widget Testing 非常直觀,適合 TDD
  5. 一次學習,跨平台使用:未來可以輕鬆擴展到 Web

四、開發模式選擇:為什麼用 TDD?

這次我決定嘗試 TDD(Test-Driven Development),跟 AI 討論後更堅定這個選擇。

我的 Prompt

MoodStamp 這個心情日記 App,我在考慮用 TDD 開發。
考量點:
1. 7 天 MVP,時間緊迫
2. 核心邏輯:日記儲存、日期處理、印章選擇
3. 我沒有很多 TDD 經驗
4. 需要快速驗證功能正確性

請分析 TDD 是否適合?如果適合,該如何實施?

AI 的分析

AI 給了我一個非常中肯的分析:

✅ TDD 適合 MoodStamp 的理由:

  1. 業務邏輯清晰:心情記錄、日期處理、資料儲存都是可明確測試的邏輯
  2. 資料正確性關鍵:日記絕對不能弄丟,測試可以保證這點
  3. 重構信心:未來要改架構時,測試是最好的安全網
  4. Flutter 測試友善:Widget Testing 寫起來很直觀

⚠️ 需要注意的點:

  1. 不要測試 UI 細節:先測核心邏輯,UI 測試可以簡化
  2. AI 整合部分可以 Mock:不要讓測試依賴外部 API
  3. 從簡單開始:先測資料層,再測業務邏輯,最後才是 Widget

TDD 在 MoodStamp 的實施策略

AI 建議我用這樣的分層測試策略:

測試金字塔:
┌─────────────────┐
│  Widget Tests   │  少量(關鍵流程)
├─────────────────┤
│ Integration     │  中量(功能串接)
├─────────────────┤
│  Unit Tests     │  大量(核心邏輯)
└─────────────────┘

優先測試項目:
1. Unit Tests(70%)

  • 日記 Model 的建立、序列化
  • 日期處理邏輯(今天、本週、本月)
  • 印章選擇邏輯
  • Local Storage 的 CRUD

2. Widget Tests(20%)

  • 心情記錄表單的提交流程
  • 日曆視圖的渲染
  • 印章選擇器的互動

3. Integration Tests(10%)

  • 完整的記錄流程:輸入 → 選印章 → 儲存 → 顯示在日曆

TDD 的開發循環

AI 跟我強調,TDD 的重點是「節奏」:

🔴 Red: 寫一個會失敗的測試
   ↓
🟢 Green: 寫最簡單的實作讓測試通過
   ↓
🔵 Refactor: 優化程式碼(測試保護你)
   ↓
重複循環

實際案例:

// 🔴 Red: 先寫測試
test('MoodEntry 應該可以轉成 JSON', () {
  final entry = MoodEntry(
    content: '今天很開心',
    stamp: '😊',
    date: DateTime(2024, 10, 3),
  );
  
  expect(entry.toJson(), {
    'content': '今天很開心',
    'stamp': '😊',
    'date': '2024-10-03',
  });
});

// 測試會失敗,因為 MoodEntry 還沒實作

// 🟢 Green: 實作最簡單的版本
class MoodEntry {
  final String content;
  final String stamp;
  final DateTime date;
  
  MoodEntry({required this.content, required this.stamp, required [this.date](http://this.date)});
  
  Map<String, dynamic> toJson() => {
    'content': content,
    'stamp': stamp,
    'date': DateFormat('yyyy-MM-dd').format(date),
  };
}

// 🔵 Refactor: 優化(如果需要)

為什麼不選其他模式?

跟 AI 討論後,排除其他選項的理由:

模式 為何不選 BDD 適合複雜的業務流程,MoodStamp 邏輯較單純
DDD 適合大型系統,MVP 階段過重 直接寫 沒有測試保護,改 code 會怕怕的

上一篇
Day 18 - 智慧記帳 Day 7:AI 自動化部署 — 從 GitHub 到 Production 的完整旅程
下一篇
Day20 - MoodStamp Day2 - PRD 產出與技術規劃:讓 AI 當你的文件機器
系列文
AI-Driven Development 實戰篇:30 天 Side Project 開發全紀錄24
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言