iT邦幫忙

2026 iThome 鐵人賽

DAY 30
0
Vibe Coding

《腦中的點子真的做得出來嗎?30 天 AI Vibe Coding 實驗》系列 第 30 篇

Day 30|三十天後,我做出了一個什麼樣的分錢系統?

  • 分享至 

  • xImage
  •  

更新日期:2026年10月14日。本篇保留三十天的開發回顧,並補入系列結束後實際完成的部署、驗收與備份成果;後續補驗不是第三十天當天全部完成。

一開始,我只是想解決聚餐結束後的那個問題:到底誰要給誰多少錢?做著做著,我才發現,分帳不只是把總額除以人數。有人先代墊、有人沒參與某筆消費,有人只帶大鈔,也有人不希望每次都由同一個人替大家登記。這些生活中的細節,逐漸把一起 AA 從單人使用的計算工具,變成多人共享、各自填寫,並能試算現金交付方式的 Web App。

最初的版本從本機帳本開始,加入多本帳本、固定成員 ID、不同代墊者、指定參與者,以及平均與自訂分攤。後來再補上瀏覽器保存與 JSON 備份。這次實際驗收時,我用「週末聚餐」的三位成員、三筆支出,核對總額 1,830 元,將備份匯入無痕視窗建立副本,重新整理後資料仍在,原視窗的帳本也沒有被覆蓋。這確認了該案例的本機匯出、預覽、匯入和保存流程,但它不等於共享資料庫的備份。

當需求變成「大家各自填」,資料就不能只留在一台電腦。專案接上 Supabase,加入電子郵件登入、共享帳本、邀請與成員管理。共同帳單只建立一次,每個人提交自己的份額。實測的一張 300 元帳單,由兩人各填 150 元,最後顯示「分攤已齊、已提交 2/2」。我也逐漸理解,誰可以看、誰可以改,以及資料變動後能不能沿用舊確認,都需要後端規則支撐。

公開部署是另一個重要轉折。之前把 127.0.0.1 的網址交給妹妹,手機無法開啟,因為那是裝置自己的本機位址。現在網站已透過 GitHub Pages 部署到 一起 AA,邀請也要從公開網站重新產生。在後續測試中,手機關閉 Wi-Fi、改用行動網路後,仍能讀取共享資料並計算方案;手機修改現金後,電腦也能讀到待確認狀態。這比只在同一台電腦切換帳號,更接近我原本希望的使用情境。

現金找零是我最想做好的功能。兩人測試中,一方淨應付 150 元,手上只有兩張 100 元,另一方有一枚 50 元,系統給出的方案是先交 200 元,再找回 50 元,合計交付三張或枚。改成持有一張 100 元和一枚 50 元後,就顯示剛好付款,不需要找零;缺少可用面額或總額不足時,也顯示沒有可行的兩人方案。未參與這筆現金交付的第三人,則看不到雙方的交付面額。

三人測試也有實際結果:第一步由 A 給 B 一張 100 元,第二步由 C 給 A 一枚 50 元,最後 A、C 各淨付 50 元,B 淨收 100 元。A 看得到兩步,B 只看得到第一步的面額,C 只看得到第二步的面額,其餘步驟顯示等待。這驗證了該案例的交付順序和不同帳號看到的內容;不過這次每一步都使用原有庫存,不能據此宣稱已實測「收到現金後再把同一筆現金交出去」的情境。

為了避免大家核對不同版本,結算前會要求成員確認,再鎖定當時的資料快照。測試中修改現金後,原確認與快照會失效,需要重新核對。其他成員能看到是否準備好,但看不到對方完整的現金數量。這些額外步驟有時會讓人覺得麻煩,卻也提醒我:接下來要改善的是把原因和下一步說清楚,而不是省略必要的確認。

介面也跟著需求調整。我希望它有柔和的馬卡龍色系、明確的大按鈕和一致的底部導覽,常用功能容易找到,成員管理等低頻操作則收進選項區。後續真人檢查涵蓋手機帳單、現金與結算頁、鍵盤彈出後的提交,以及桌面 200% 縮放和 Tab、Shift+Tab、Enter 操作,使用者回報這些檢查符合預期。這是已測裝置的結果,還不能推廣成所有手機與完整無障礙驗收都通過。

備份是這次補驗最後完成的一段。我用 Supabase CLI 匯出了 schema.sql、data.sql 和 roles.sql,保留在電腦上,再另存到 Google Drive。從雲端下載回來後,逐一比對三個檔案的 SHA-256,結果全部一致。這表示目前已完成手動匯出、異地保存與下載完整性檢查;但還沒有在獨立測試資料庫實際還原,因此「備份可以成功恢復整個系統」仍是待驗證項目。

回頭看,第三十天當時留下的十八組自動回歸結果,主要涵蓋本機模組、模擬介面與嵌入式資料庫。本次更新補上的是後續操作回報和備份比對,沒有重新執行全部自動測試。Day 25、26 的雲端 SQL 已成功執行,九個預期函式的存在與呼叫權限也通過唯讀檢查;不過函式存在,不代表所有真實登入權限與多連線競態都已驗收完成。

現在的一起 AA 已經可以在公開網址使用,支援共享分帳與有限範圍的現金試算,但還不是完整的付款紀錄系統。它不會因為算出方案就扣除現金或標記已付款,也還沒有付款方與收款方各自確認、跨裝置交付進度,以及部分付款後修改帳目的處理。多人搜尋目前最多四人、十二張或枚、三千個狀態,不保證最少交付次數;超過搜尋範圍也不能直接判定無解。這些限制都應該繼續清楚呈現。

三十天最大的收穫,是學會把「我想要」拆成可以實際觀察的小步驟。AI 可以幫我寫程式、整理文件和找問題,但需求是否貼近生活、畫面是否容易理解、測試是否真的成功,仍需要自己參與確認。系列寫到第三十天,是一次整理成果的機會。接下來,我會優先補上獨立環境的還原演練、付款雙方確認與剩餘權限測試,再逐步減少重複操作,讓一起 AA 更接近大家願意持續使用的工具。


上一篇
Day 29|把專案整理成別人接得起來的版本
系列文
《腦中的點子真的做得出來嗎?30 天 AI Vibe Coding 實驗》 共 30 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言