iT邦幫忙

2025 iThome 鐵人賽

DAY 8
0
生成式 AI

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

Day 8|30 天 Vibe Coding:想翻舊帳還翻不出來

  • 分享至 

  • xImage
  •  

昨天我們做了「預算與超支提醒」,今天要解決另一個日常痛點:
帳本裡紀錄一多,光靠手動滑清單實在太麻煩。
我只想知道「上個月交通費到底花了多少」——但卻要翻很久

所以今天的目標就是:加上搜尋與篩選功能,讓使用者能快速找到特定的支出紀錄


今日目標

  1. 新增「搜尋與篩選」功能:可依日期區間、分類縮小清單
  2. 預設顯示「本月歷史紀錄」
  3. 標題會依篩選條件動態更新,例如:
  • 本月 → 本月歷史紀錄
  • 上月 → 2025/08 歷史紀錄
  • 全部 → 全部歷史紀錄
  1. 篩選後,清單與統計圖表會同步更新,數值正確

給 Cursor 的 Prompt(僅供參考)

幫我在 SwiftUI 記帳 App(已經有 Firestore、分類、圖表功能)加上「搜尋與篩選」功能,並且預設顯示本月資料。

=== 功能需求 ===
1. 篩選模型 FilterState:
   - quickPreset: .all / .thisMonth / .lastMonth / .custom
   - startDate, endDate(for .custom)
   - selectedCategoryIds: Set<String>

2. 預設值:quickPreset = .thisMonth
   - 計算當月起訖日期,當作日期區間
   - UI 標題顯示「本月歷史紀錄」

3. 篩選邏輯:
   - filteredExpenses = 所有 expenses → 先依日期 → 再依類別
   - 若 selectedCategoryIds 為空,代表全部類別

4. UI 顯示:
   - 篩選列:SegmentedControl(全部 / 本月 / 上月 / 自訂)+「套用 / 清除」
   - 標題:依 quickPreset 動態切換  
   - 顯示「篩選總計:$xxx」;金額格式化為 TWD

5. 清單與圖表:
   - 使用 filteredExpenses 計算
   - 確保數字一致

6. Firestore 優化(可先 TODO):
   - 若 quickPreset 為 .thisMonth / .lastMonth,改成用 whereField("date") 篩選,避免抓全部。


今日驗收 ✅

  1. 預設顯示本月資料
  2. 日期篩選可切換至「全部 / 本月 / 上月 / 自訂區間」,標題會依條件動態更新,例如「2025/09 歷史紀錄」
    https://ithelp.ithome.com.tw/upload/images/20250905/20140998aQwJxlWFJl.pnghttps://ithelp.ithome.com.tw/upload/images/20250905/20140998bgBwEljMzo.pnghttps://ithelp.ithome.com.tw/upload/images/20250905/20140998hMFMIoHNFO.pnghttps://ithelp.ithome.com.tw/upload/images/20250905/20140998YIr4VyAPuW.png
  3. 可選擇特定分類(例如:飲食),僅顯示該類別的支出,並在清單上方顯示篩選總計
    https://ithelp.ithome.com.tw/upload/images/20250905/2014099832EaFwTP3d.png
  4. 日期區間 + 分類可同時套用,結果會同步反映在清單與統計圖表
    https://ithelp.ithome.com.tw/upload/images/20250905/201409982LNEG0sexz.pnghttps://ithelp.ithome.com.tw/upload/images/20250905/20140998FdtalX1GkP.png
    https://ithelp.ithome.com.tw/upload/images/20250905/20140998EbpraOwHTp.pnghttps://ithelp.ithome.com.tw/upload/images/20250905/20140998HoP7KtXFqC.png
  5. 加總數字正確、與篩選後的清單一致

這功能做下來才發現,平常我們翻帳本時,最常用的就是「查詢」而不是「新增」。以前只是一股腦把錢丟進去,現在終於能快速找到自己想要的紀錄,像是「上個月餐飲 5,000?交通 2,000?」一目了然

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


明日預告

Day 9 要繼續補強基礎功能:
支出除了「金額 + 分類 + 日期」,還要能加上 備註(例如「和朋友聚餐」、「Uber 計程車」)。
這樣日後在查帳時,不會只看到冷冰冰的數字,而是能記得這筆錢到底怎麼花的。


上一篇
Day 7|30 天 Vibe Coding:財富自由我不知道,透支我倒是挺擅長
下一篇
Day 9|30 天 Vibe Coding:只看數字,完全想不起來我在幹嘛
系列文
30 天 Vibe Coding:全端 × 機器學習的實作挑戰14
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言