iT邦幫忙

2025 iThome 鐵人賽

DAY 5
0
生成式 AI

30 天 Vibe Coding:全端 × 機器學習的實作挑戰系列 第 5

Day 5|30 天 Vibe Coding:到底是固定支出還是我又亂花

  • 分享至 

  • xImage
  •  

昨天我們把記帳 App 搬到雲端,資料全丟進 Firestore 了,今天要解決一個更基礎的需求 → 支出的分類與標籤管理,只有單純輸入金額沒辦法分析錢到底花在哪,所以今天要做一個系統化的「分類功能」


今日目標

  1. 使用者能建立支出類別(例如:餐飲、交通、娛樂)
  2. 能刪除或修改類別
  3. 新增支出時必須選擇一個類別
  4. 支出紀錄能正確顯示所屬類別

給 Cursor 的 Prompt(僅供參考)

請在既有的 SwiftUI 記帳 App(已整合 Firebase Auth/Firestore)加入「分類與標籤管理」。

=== 資料結構(每位使用者底下)===
- users/{uid}/categories/{categoryId}
  fields: id(String), name(String), createdAt(Timestamp)
- users/{uid}/expenses/{expenseId}
  fields: id(String), amount(Double), date(Timestamp),
          categoryId(String), categoryName(String) // 去正規化,顯示用

=== 功能 ===
1) 類別 CRUD
   - 類別頁面:列表 + 新增(輸入 name)+ 重新命名 + 刪除
   - 寫入路徑一律包含目前登入者 uid:users/{uid}/categories
   - 刪除保護:若此類別被任何 expense 使用,禁止刪除並提示(可先以查詢 count > 0 判斷)
2) 新增支出(ContentView)
   - 顯示 Picker 載入使用者的所有 categories,必選一個
   - 新增時同時寫入 categoryId 與 categoryName(從選單當下的 name 帶入)
   - 列表顯示:日期 | $金額 | 類別名稱(直接用 categoryName 欄位)
3) 監聽/狀態
   - categories 與 expenses 皆用 onSnapshot 監聽,保持即時
  - 類別改名時,同步批次更新該使用者底下所有對應 expenses 的 categoryName(用 batched write)
4) UI/體驗
   - 新增類別彈出視窗(TextField + 確認/取消)
   - 類別列表支援 swipe actions(Rename / Delete)
   - 新增支出時,若沒有任何類別→顯示引導「先新增一個類別」
5) 錯誤處理
   - 無登入(無 uid)→ 不讀不寫,顯示登入提示
   - Firestore 錯誤以 Alert 呈現
6) 型別/服務
   - struct Category: Identifiable, Codable { id, name, createdAt }
   - CategoryStore:observeCategories(), add(name), rename(id,newName), delete(id), isInUse(id) -> Bool
   - 既有 ExpenseStore:add(...) 需接受 category 物件,寫入 categoryId & categoryName
7) 測試與遷移
   - 若已有舊 expenses 但沒有 categoryId/categoryName,第一次載入時顯示導引,禁止新增直到使用者至少建立 1 個類別

Firestore Rules 提示(概念)

  • 僅允許讀寫 request.auth.uid 自己底下的 users/{uid}/…
  • 類別刪除需在前端檢查「是否被使用」,Rules 很難做關聯檢查,交給前端邏輯即可

今日驗收 ✅

  1. 能新增 / 重新命名 / 刪除類別(被使用中的類別不能刪)
    https://ithelp.ithome.com.tw/upload/images/20250903/20140998rZCYMivVRw.pnghttps://ithelp.ithome.com.tw/upload/images/20250903/20140998CB3oYODsUu.png
    https://ithelp.ithome.com.tw/upload/images/20250903/20140998UBZghuEFpJ.pnghttps://ithelp.ithome.com.tw/upload/images/20250903/20140998JkEzlXZyhY.png
  2. 新增支出必選類別,列表顯示正確名稱
    https://ithelp.ithome.com.tw/upload/images/20250903/20140998vk6FnggT1V.pnghttps://ithelp.ithome.com.tw/upload/images/20250903/20140998JOThDOOYGA.png
  3. 類別改名後,舊支出列的名稱也會同步更新
    https://ithelp.ithome.com.tw/upload/images/20250903/20140998Awsf7Zrqio.png
  4. 登出換帳號,看到的是各自的類別與支出

我的程式碼放在這裡:2025ithome-ExpenseTracker


明日預告

Day 6 要繼續加強這個統計功能:加上「日期篩選」→ 只看本月 or 上個月支出,讓圖表可以切換顯示不同時間範圍,這樣就能變成一個真正的「財務報告」小工具,不只是流水帳


上一篇
Day 4|30 天 Vibe Coding:換手機就失憶,帳本一定要上雲端
系列文
30 天 Vibe Coding:全端 × 機器學習的實作挑戰5
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言