D3 - 先想清楚再動手：系統需求規劃

到了第三篇～！，我們準備進一步進入正題！

上一篇，我們已經選定了要開發的專案：「個人財務管理系統」。不過，開始寫程式之前，千萬別急著衝一波，咱們得先做點規劃。因為需求與系統規劃這一步，就像是開車前要先設定導航。沒有路線圖，你只會繞來繞去，最後迷路在代碼的荒野中。

別擔心，這篇文章將會帶你從需求確認到系統規劃，逐步理清接下來的開發路線。我們會分階段進行，從環境建置、需求確認到每一個開發步驟，一步步來。順序很重要，千萬別跳步，跳步只會導致「debug 全家桶」。

系統架構：選擇合適的技術

接下來，讓我們看看要用哪些技術來實現這些需求。每個選擇都是基於開發效率、可擴展性與實用性來考量的，這樣能讓系統既能快速開發，又能維護與擴展。

• 後端：
• • 語言與框架：PHP + Laravel，讓我們可以快速搭建 API，處理資料邏輯。
  • 資料庫：MariaDB，輕量且適合處理財務資料。
  • 伺服器：Nginx，處理靜態資源與 API 請求的好夥伴。
• 前端：
• • 框架：Nuxt，Vue 的全能選手，幫我們快速搭建一個高效的 SPA。
  • UI 框架（可選）：Tailwind CSS 或 Bootstrap，讓畫面不那麼對不起自己。Tailwind 比較彈性、客製化強，而 Bootstrap 上手快、組件豐富，選擇看個人愛好。
• 開發環境：
• • 容器化：Docker，用 Docker 把所有服務包在一起，讓環境配置不再頭痛，保證開發、測試與生產環境一致。

什麼是適合？ 你自己理解並結合別人的經驗，直覺會告訴你，就是它！

需求確認與規劃

在寫一行程式碼前，先讓我們花點時間確認需求。不管專案大小，需求確認絕對是不可或缺的一步。這次的專案，我們聚焦於打造一個「個人財務管理系統」，所以需求必須簡單且可行，別一次想要做太多。MVP，你們懂的，能跑就行，後續再說。

需求確認與規劃

1. 用戶基本操作：
2. • 新增、編輯、刪除財務記錄（收入與支出）。
   • 每月財務總結報表（至少顯示每月收入支出統計）。
2. 前後端交互需求：
3. • 前端用表單收集數據，後端用 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 開發。後端是整個系統的「大腦」，所以要穩紮穩打，特別是數據流與資料庫設計，這關係到日後系統的穩定性與擴展性。

具體步驟

1. 資料庫設計：
2. • 設計「財務記錄」資料表，包含收入與支出金額、類別、日期等欄位。
   • 使用 Laravel 的 migration 工具來管理資料庫變更，未來資料庫需要升級時，也能輕鬆應對。
2. API 開發：
3. • 開發 API 來處理前端傳來的數據，包含新增、編輯、刪除記錄的請求。
   • 確保 API 能正確地與資料庫互動，成功存入與取出數據。
3. 測試 API：
4. • 別等到前端整合才來測試後端 API！利用 Postman 或 curl 工具來測試 API 確認數據流正常。

四、第二階段確認：後端測試與驗收

這裡進行後端的第二次確認，確保 API、數據庫與資料邏輯一切都在預期內，才能進入前端的開發。如果後端不穩，接下來的開發只會是一場災難，真的。

• 確認 API 可以正確處理各種請求。
• 測試數據庫是否能正確存取資料。
• 檢查 Laravel 日誌，看是否有潛在錯誤未處理。

五、前端開發：展示資料的舞台

有了後端 API 之後，我們可以進入前端開發。這次會使用 Nuxt 來打造一個簡單且直觀的 UI，幫助使用者操作系統並查看財務報表。前端是用戶的第一印象，所以 UI 的易用性相當關鍵。

具體步驟

1. 設計 UI：
2. • 基本表單：用來輸入收入與支出記錄。
   • 財務報表頁面：顯示每月的財務數據總結。
2. 前後端交互：
3. • 使用 Axios 向 Laravel API 發送請求，實現新增、編輯、刪除財務記錄的操作。
   • 在報表頁面從 API 獲取數據，並用表格或圖表呈現。
3. 前端測試：
4. • 確認每個按鈕、表單與報表都能正確運作。
   • 測試 API 回應是否正常，數據是否能成功顯示在前端。

六、第三階段確認：全面測試與驗收

到了這裡，我們已經完成了前後端的開發，接下來就是進行全面的測試與驗收。這部分就是找問題的時刻了，別怕！每個錯誤都會讓你的系統更堅固。

測試項目：

1. 功能測試：確認所有核心功能（新增、編輯、刪除記錄、查看報表）都能正常運作。
2. 整合測試：確認前後端數據交互順暢，API 沒有錯誤回應。
3. 用戶體驗測試：測試表單的易用性，確保 UI 簡單直觀。

最後…待辦清單

最後，這裡給大家整理了一個開發的待辦清單大前提，讓你在進行開發的過程中有個清晰的步驟。

• 安裝 Docker 並設置 Docker Compose與相關的nginx、laravel、nuxt、mariadb的環境
• 建立 Laravel 專案並配置資料庫
• 設計並實作後端 API
• 確認 API 測試通過
• 開發前端頁面並整合 API
• 測試所有功能，確保系統運作正常
• 優化 UI，讓使用者操作更加順暢

最後的小囉唆…每日 Stand-up 和週回顧

即便是獨立開發，仍然建議你每天進行每日 Stand-up，確認每日的工作進度與問題，內容包括：

• 今天完成了什麼？
• 有哪些遇到的困難？
• 明天計劃做什麼？

小結：系統規劃是成功的關鍵

需求與系統規劃這一步可能看起來不太酷，但這是任何成功專案的基礎。隨著專案的進行，規劃的思維會讓你少走很多冤枉路，也讓整個開發過程更有條理。

規劃好流程，接下來的開發會像拆積木一樣，簡單且有成就感！接下來，就讓我們就讓我們逐步完成，看是簡單，細節滿滿的專案吧！

希望這篇文章能幫助你更好地理解如何從需求確認到系統規劃，並且讓整個開發過程更加順暢。別忘了，環境建置雖然很無聊，但越無聊的事越要做得好，這樣才能讓後面的開發更順暢。加油，繼續前進！