iT邦幫忙

2026 iThome 鐵人賽

DAY 8
0
佛心分享-IT 人自學之術

老爺爺練習VIBE CODING系列 第 8

Day 8:敏捷開發實踐:用 Next.js + Supabase 快速搭建 LCR 控管 MVP

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20260828/20070969dFj79eZF03.png
大孫女,把風燈挑亮一些,院子裡開始有些風涼了,給小孫女加件擋風的衣裳。來,阿公再給你們滿上一杯溫熱、透著漂亮色澤的琥珀熱茶。

看著夜空裡漸漸升起的明月,阿公坐在這老藤椅上,心裡總是暖洋洋的。昨天阿公跟你們聊了為什麼要把 LCR 估算從 Excel 搬到 Web 系統,今天啊,阿公想跟你們聊聊「快」的藝術。

在金融合規的戰場上,時間有時候就是生命線。如果等到大功告成、四平八穩的正式自建系統做完,可能要花上大半年甚至一整年。但業務單位下個月底就要基本控管上線,火都燒到眉毛了,該怎麼辦?

這時候,阿公以前常掛在嘴邊的「敏捷開發」和「MVP(最小可行產品)」就派上用場了。這就像我們要在小溪上建一座過人的便橋,不必一上來就大費周章去規劃蓋一座百年石拱橋。我們先拿幾塊結實的木板搭個臨時通道,讓大家能安全踩著走過去,把眼前的急迫問題解決了,這就是 MVP 的智慧。

今天,阿公就用最簡單的話,給你們講講這堂課:

Day 8:敏捷開發實踐:用 Next.js + Supabase 快速搭建 LCR 控管 MVP


🚨 痛點場景 —— 「等不及的法規期限」與「遠水救不了近火」

你們在行內常會聽到主管焦慮地催促:「下個月底就要申報月底預估值了,系統還在跑規劃和採購流程?」

這就是金融合規最真實的痛點:法規期限是不等人的。自建系統的開發週期漫長,包含需求確認、系統設計、單元與整合測試、資安審查等,動輒就要耗費數個月甚至半年以上。但業務部門下個月就要上線基本控管,如果硬是用 Excel 繼續撐,大家天天加班、人工催件到口乾舌燥,還容易發生資料基準日不符或公式被誤動的大紕漏。

所以,我們必須在最短時間內,用最低的成本、最快的速度搭建出一個「剛好夠用」的 MVP 來進行試辦。這不是為了偷工減料,而是為了以最快速度驗證核心價值——也就是「用一個線上系統,取代 Email + Excel 人工催件,讓資料彙整窗口能即時看到誰交了、誰逾期、哪筆資料有問題」。


🛠️ 架構實作 —— 輕裝上陣,用 Next.js + Supabase 快速交付

為了能讓一兩個人、在兩到三週內把系統生出來,我們不能採用以前那種需要配置獨立後端伺服器、手寫複雜登入系統與管理資料庫維運的重型架構。阿公推薦的這套輕量化技術棧,就是 Next.js 搭配 Supabase

這套架構厲害在哪裡?聽阿公慢條斯理地給你們分析:

  1. 全端 Next.js 框架:前後端一套程式碼直接搞定,免去了繁瑣的跨系統對接與分別部署,開發速度極快。我們可以使用 React 配合現成的 shadcn/uiTailwind CSS 元件,將表單、表格和日期選擇器一抓過來就能用,幾天內就能做出高質感的網頁。
  2. 後端即服務 Supabase(BaaS):這是我們的祕密武器。它在後台幫我們託管了 PostgreSQL 資料庫、使用者驗證系統(Auth)和檔案儲存空間(Storage)。這意味著我們不用辛辛苦苦去寫登入註冊邏輯、不用花時間去維運資料庫連線,省下了大量的後端功。
  3. 即時狀態看板(Realtime Dashboard)
    我們利用 Supabase 的 Realtime 特性。當財務部或風管部的窗口在他們那一端填寫完畢、上傳附件並點擊「提交」時,資料彙整窗口的網頁畫面上,各單位的申報進度燈號就會即時更新,從「未提供」跳成「已提供」。這就像阿公坐在院子裡,大孫女一推開院子門,掛在屋簷下的銅鈴就跟著搖動一樣,完全不用人工打電話、發 Email 逐一催促,進度即時掌握。
  4. 精簡的三張資料表設計
    MVP 階段的資料模型越簡單越好,阿公幫你們精簡到只需 3 張核心資料表,這在實務上就足以支撐基本控管了:
    • period_task(期別任務表):記錄每一期任務的期別、資料基準日和提供期限。
    • submission(資料提交表):記錄各科室上傳的資料名稱、提交基準日、是否為預估數、預估假設條件以及儲存在 Supabase Storage 的附件連結。
    • check_result(檢核結果表):自動檢核資料基準日、必填、預估標記是否通過,並記錄異常說明。
  5. 自動提醒與一鍵導出
    系統背景會自動執行排程。在截止期限前,系統會自動觸發 Email 提醒機制(可以使用 Resend 或行內郵件 SMTP 寄信),把溫馨提醒送到尚未提交的窗口手中。而當各單位提交完畢後,資料彙整窗口只需要輕輕點一下滑鼠,就能一鍵將彙整資料導出為 CSV 或 Excel 直接送進試算模板,再也不用大半夜手動下載一堆 Email 附件了。

💡 避坑指南 —— 學會放手,在 MVP 階段「抓大放小」

許多剛入行的年輕人做 MVP 最容易踩的坑,就是什麼功能都想一次塞進去,結果越做越重,下個月根本上不了線。阿公常對小孫女說:「吃果子要拜樹頭,做事得抓到源頭。」

為了在 2 至 3 週內快速交付,我們在 MVP 階段必須學會放手,優先實現最核心的兩個痛點,其餘先從簡:

  1. 優先實現「進度追蹤」
    只要讓窗口能在一張網頁上即時看到誰交了、誰逾期,以及有哪些基本的檢核異常(如基準日不符、預估假設未標記),這就已經解決了過去人工催件與對帳 80% 的痛苦。
  2. 優先實現「上傳狀態鎖定」
    這就是我們的安全防護。在資料模型中把期別任務的狀態 status(如 openclosed)與提交狀態 submit_status 關聯好。一旦截止時間到了或者彙整窗口關閉任務,系統就應該鎖定填報權限,不讓單位在後續隨意修改或上傳新附件。這就杜絕了以前人工催件時,有人在截止後偷偷修改 Excel 檔案卻無人知曉的版本混亂災難。

至於跟正式系統或風管系統自動介接、複雜的 RBAC 多層審批流、Teams 即時推播、還有稽核軌跡等進階功能,聽阿公的話,MVP 階段通通先不做,留到以後有預算、有時間再慢慢演進。把進度追蹤與狀態鎖定守護好,這套 MVP 就已經能幫同仁們省下無數個加班對帳的夜晚了。


上一篇
Day 7:合規系統的大哉問:為什麼我們要將 LCR 估算從 Excel 遷移至 Web 系統?
下一篇
Day 9:跨部門協同的時程管理:LCR 資料提供與預測的排程架構
系列文
老爺爺練習VIBE CODING10
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言