D3 - 先想清楚再動手：系統需求規劃
到了第三篇～！，我們準備進一步進入正題！
上一篇，我們已經選定了要開發的專案：「個人財務管理系統」。不過，開始寫程式之前，千萬別急著衝一波，咱們得先做點規劃。因為需求與系統規劃這一步，就像是開車前要先設定導航。沒有路線圖，你只會繞來繞去，最後迷路在代碼的荒野中。
別擔心，這篇文章將會帶你從需求確認到系統規劃，逐步理清接下來的開發路線。我們會分階段進行，從環境建置、需求確認到每一個開發步驟，一步步來。順序很重要，千萬別跳步，跳步只會導致「debug 全家桶」。
系統架構：選擇合適的技術
接下來，讓我們看看要用哪些技術來實現這些需求。每個選擇都是基於開發效率、可擴展性與實用性來考量的，這樣能讓系統既能快速開發，又能維護與擴展。
- 後端：
- 語言與框架：PHP + Laravel，讓我們可以快速搭建 API，處理資料邏輯。
- 資料庫：MariaDB，輕量且適合處理財務資料。
- 伺服器：Nginx，處理靜態資源與 API 請求的好夥伴。
- 前端：
- 框架：Nuxt，Vue 的全能選手，幫我們快速搭建一個高效的 SPA。
- UI 框架（可選）：Tailwind CSS 或 Bootstrap，讓畫面不那麼對不起自己。Tailwind 比較彈性、客製化強，而 Bootstrap 上手快、組件豐富，選擇看個人愛好。
- 開發環境：
- 容器化：Docker，用 Docker 把所有服務包在一起，讓環境配置不再頭痛，保證開發、測試與生產環境一致。
什麼是適合？ 你自己理解並結合別人的經驗，直覺會告訴你，就是它！
需求確認與規劃
在寫一行程式碼前，先讓我們花點時間確認需求。不管專案大小，需求確認絕對是不可或缺的一步。這次的專案，我們聚焦於打造一個「個人財務管理系統」，所以需求必須簡單且可行，別一次想要做太多。MVP，你們懂的，能跑就行，後續再說。
需求確認與規劃
- 用戶基本操作：
- 新增、編輯、刪除財務記錄（收入與支出）。
- 每月財務總結報表（至少顯示每月收入支出統計）。
- 前後端交互需求：
- 前端用表單收集數據，後端用 API 接收並處理。
- 前端需提供報表 UI，透過 API 從後端獲取數據來呈現。
一開始千萬不要搞太複雜，簡單到位的功能最重要。過度設計通常會導致功能失控，做不完。不要問我是怎麼知道的……
一、環境建置：開發前的第一步
說到環境建置，這通常是整個開發過程中最枯燥的一環。但相信我，環境建置是日後順利開發的基石。若是這部分馬馬虎虎，接下來可能會陷入一堆奇怪的錯誤，像是「Why does Nginx hate me?」這類情況。
環境建置目標
建立一個可用的開發環境，確保所有工具都能正常運作。
- 安裝 Docker：確保你的電腦上有 Docker，容器化管理一切工具。
- 設定 Docker Compose：編寫 docker-compose.yml，配置好 Laravel、MariaDB、Nginx、Nuxt 等服務。
- 把每個服務都放在不同的容器中，避免未來部署時因為環境不同產生錯誤。
- 重點是一次配置後，無論在本機還是伺服器都能無痛運行。
- 啟動容器：使用 docker-compose up，檢查所有服務是否正常啟動。
- 測試環境：在瀏覽器中訪問預設頁面，檢查 Laravel 和 Nuxt 是否正常運作。
這一步雖然無聊，但踩過的坑，將來都會變成你處理問題的超能力。
二、第一階段確認：看到畫面的興奮
當我們完成相關的配置之後，當然是要來看看，搭載出來的內容是否有正常運作，不然搞了老半天，掛在環境沒有Run起來，也是蠻苦的。
- 確認 Laravel 和 Nuxt 可以正常運作。
- 測試 Laravel 與 MariaDB 是否已經進行連線
- 測試當Docker 重新執行時是否同樣正常
三、後端開發：穩固基礎
進入後端部分，我們會使用 Laravel 來處理所有數據邏輯與 API 開發。後端是整個系統的「大腦」，所以要穩紮穩打，特別是數據流與資料庫設計，這關係到日後系統的穩定性與擴展性。
具體步驟
- 資料庫設計：
- 設計「財務記錄」資料表，包含收入與支出金額、類別、日期等欄位。
- 使用 Laravel 的 migration 工具來管理資料庫變更，未來資料庫需要升級時，也能輕鬆應對。
- API 開發：
- 開發 API 來處理前端傳來的數據，包含新增、編輯、刪除記錄的請求。
- 確保 API 能正確地與資料庫互動，成功存入與取出數據。
- 測試 API：
- 別等到前端整合才來測試後端 API！利用 Postman 或 curl 工具來測試 API 確認數據流正常。
四、第二階段確認：後端測試與驗收
這裡進行後端的第二次確認，確保 API、數據庫與資料邏輯一切都在預期內，才能進入前端的開發。如果後端不穩，接下來的開發只會是一場災難，真的。
- 確認 API 可以正確處理各種請求。
- 測試數據庫是否能正確存取資料。
- 檢查 Laravel 日誌，看是否有潛在錯誤未處理。
五、前端開發：展示資料的舞台
有了後端 API 之後，我們可以進入前端開發。這次會使用 Nuxt 來打造一個簡單且直觀的 UI，幫助使用者操作系統並查看財務報表。前端是用戶的第一印象，所以 UI 的易用性相當關鍵。
具體步驟
- 設計 UI：
- 基本表單：用來輸入收入與支出記錄。
- 財務報表頁面：顯示每月的財務數據總結。
- 前後端交互：
- 使用 Axios 向 Laravel API 發送請求，實現新增、編輯、刪除財務記錄的操作。
- 在報表頁面從 API 獲取數據，並用表格或圖表呈現。
- 前端測試：
- 確認每個按鈕、表單與報表都能正確運作。
- 測試 API 回應是否正常，數據是否能成功顯示在前端。
六、第三階段確認：全面測試與驗收
到了這裡，我們已經完成了前後端的開發，接下來就是進行全面的測試與驗收。這部分就是找問題的時刻了，別怕！每個錯誤都會讓你的系統更堅固。
測試項目：
- 功能測試：確認所有核心功能（新增、編輯、刪除記錄、查看報表）都能正常運作。
- 整合測試：確認前後端數據交互順暢，API 沒有錯誤回應。
- 用戶體驗測試：測試表單的易用性，確保 UI 簡單直觀。
最後…待辦清單
最後，這裡給大家整理了一個開發的待辦清單大前提，讓你在進行開發的過程中有個清晰的步驟。
- 安裝 Docker 並設置 Docker Compose與相關的nginx、laravel、nuxt、mariadb的環境
- 建立 Laravel 專案並配置資料庫
- 設計並實作後端 API
- 確認 API 測試通過
- 開發前端頁面並整合 API
- 測試所有功能，確保系統運作正常
- 優化 UI，讓使用者操作更加順暢
最後的小囉唆…每日 Stand-up 和週回顧
即便是獨立開發，仍然建議你每天進行每日 Stand-up，確認每日的工作進度與問題，內容包括：
- 今天完成了什麼？
- 有哪些遇到的困難？
- 明天計劃做什麼？
小結：系統規劃是成功的關鍵
需求與系統規劃這一步可能看起來不太酷，但這是任何成功專案的基礎。隨著專案的進行，規劃的思維會讓你少走很多冤枉路，也讓整個開發過程更有條理。
規劃好流程，接下來的開發會像拆積木一樣，簡單且有成就感！接下來，就讓我們就讓我們逐步完成，看是簡單，細節滿滿的專案吧！
希望這篇文章能幫助你更好地理解如何從需求確認到系統規劃，並且讓整個開發過程更加順暢。別忘了，環境建置雖然很無聊，但越無聊的事越要做得好，這樣才能讓後面的開發更順暢。加油，繼續前進！
你可能也想看
