哈囉，大家好！不知不覺，我們的 30 天鐵人挑戰已經來到了第 29 天。
在過去的 28 篇文章中，我們從零開始，一步一步地建立了一個完整的個人財務管理系統。
今天，我想帶大家一起回顧這段旅程，總結我們在三個階段中所完成的內容，並反思我們的成長與收穫。
我們從需求分析開始，明確了系統需要具備的功能，包括：
• 使用者管理：註冊、登入、更新個人資料
• 銀行帳戶管理：新增、編輯、刪除、查看帳戶列表
• 分類管理：新增、編輯、刪除收入/支出分類
• 交易紀錄管理：新增、編輯、刪除、查詢交易紀錄
• 報表功能：查看收入/支出統計、生成圖表
接著，我們建立了開發環境，使用 Docker 來搭建 Laravel 和 MySQL 的容器，確保開發環境的一致性和便利性。
在確立需求後，我們進行了資料庫設計：
• 設計資料表：users、bank_accounts、categories、transactions
• 定義欄位和關聯關係：一對多、多對多等
隨後，我們使用 Laravel 的 Migration 建立資料表，並為每個資料表建立了對應的模型（Model），設定了它們之間的關聯。
我們定義了後端的 API 路由，遵循 RESTful 的設計原則，為每個資源建立對應的路由（GET、POST、PUT、DELETE）。接著，實作了控制器（Controller），在其中處理請求、驗證資料、與模型互動，完成了基本的 CRUD 功能。
為了確保程式碼的品質和可靠性，我們撰寫了單元測試，使用 PHPUnit 測試模型和控制器的方法。透過測試，我們找出了潛在的問題，並進行了修正，確保系統能夠按照預期運作。
完成後端基礎建設後，我們開始進行前端開發。首先，建立了 Nuxt 的開發環境，並使用 Docker 來管理。我們選擇了 Nuxt 3 作為前端框架，並使用了 Tailwind CSS 來快速建立美觀的介面。
我們深入了解了 Nuxt 的架構，特別是 app.vue 和 layouts/default.vue 的作用，並規劃了應用程式的介面結構。我們建立了必要的頁面，包括：
• 首頁
• 註冊/登入頁面
• 銀行帳戶管理
• 分類管理
• 交易紀錄管理
• 報表與統計
為了讓前端能夠與後端溝通，我們使用了 Nuxt 內建的 $fetch 方法（原先使用 Axios，後來更新為 $fetch），透過 RESTful API 取得資料。我們實作了登入與註冊功能，並使用 JWT 進行身份驗證，保護受限的路由。
在前端開發中，我們遵循元件化的設計原則，將可重用的部分抽離為元件，如表單、列表、導航列等。此外，使用 Pinia 作為狀態管理工具，統一管理全域的狀態，如使用者資訊、身份驗證狀態等。
完成基本的 CRUD 功能後，我們著手實作報表功能。透過 Chart.js，我們在前端繪製了各種圖表，如收入與支出的折線圖、分類支出的圓餅圖等，讓使用者可以直觀地了解自己的財務狀況。
為了提升系統的性能和可維護性，我們對程式碼進行了重構：
• 後端：使用服務層（Service Layer）和表單請求（Form Request）優化控制器的程式碼，加強資料驗證與錯誤處理。
• 前端：進一步拆分元件，優化資料的取得與處理方式。
完成開發後，我們將系統部署到生產環境：
• 使用 Docker Compose 管理容器
• 設定 Nginx 作為反向代理，配置 SSL 加密，確保系統安全性
• 管理環境變數，將敏感資訊從程式碼中抽離
為了保障系統安全，我們實作了角色與權限管理，限制使用者的操作範圍。同時，加入了日誌記錄功能，記錄使用者的關鍵操作，方便日後的問題排查與監控。
在這 29 天的旅程中，我們從零開始，建立了一個完整的個人財務管理系統。透過這個過程，我們不僅學習了技術，更體會到了獨自開發的挑戰與樂趣。
• 技術提升：深入了解了 Laravel、Nuxt 3、Tailwind CSS 等技術的應用。
• 問題解決：面對技術難題，如 Vue 2 與 Vue 3 的語法差異，我們主動學習並解決問題。
• 開發流程：體會到良好規劃與持續驗收的重要性，確保專案能夠順利進行。
未來展望
雖然我們已經完成主要功能，但軟體開發是一個持續優化的過程。未來，我們可以：
• 功能擴充：加入預算管理、提醒通知、多語系支援等功能。
• 提升使用者體驗：優化介面設計，提升系統的易用性和美觀度。
• 加強安全性：實作雙因素驗證、資料加密等，提高系統安全等級。
• 優化性能：透過快取、優化查詢等方式，提升系統的響應速度。
結語
感謝大家一路以來的支持與陪伴！這段旅程讓我們收穫滿滿，不僅提升了技術能力，也對軟體開發有了更深入的理解。
希望這份總結能夠幫助大家回顧整個過程，並從中獲得啟發。讓我們繼續保持熱情，在軟體開發的道路上，不斷學習與成長！
我們下篇文章見！
iThome鐵人賽
看影片追技術