到了第三篇~!,我們準備進一步進入正題!
上一篇,我們已經選定了要開發的專案:「個人財務管理系統」。不過,開始寫程式之前,千萬別急著衝一波,咱們得先做點規劃。因為需求與系統規劃這一步,就像是開車前要先設定導航。沒有路線圖,你只會繞來繞去,最後迷路在代碼的荒野中。
別擔心,這篇文章將會帶你從需求確認到系統規劃,逐步理清接下來的開發路線。我們會分階段進行,從環境建置、需求確認到每一個開發步驟,一步步來。順序很重要,千萬別跳步,跳步只會導致「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,確認每日的工作進度與問題,內容包括:
- 今天完成了什麼?
- 有哪些遇到的困難?
- 明天計劃做什麼?
小結:系統規劃是成功的關鍵
需求與系統規劃這一步可能看起來不太酷,但這是任何成功專案的基礎。隨著專案的進行,規劃的思維會讓你少走很多冤枉路,也讓整個開發過程更有條理。
規劃好流程,接下來的開發會像拆積木一樣,簡單且有成就感!接下來,就讓我們就讓我們逐步完成,看是簡單,細節滿滿的專案吧!
希望這篇文章能幫助你更好地理解如何從需求確認到系統規劃,並且讓整個開發過程更加順暢。別忘了,環境建置雖然很無聊,但越無聊的事越要做得好,這樣才能讓後面的開發更順暢。加油,繼續前進!