iT邦幫忙

2024 iThome 鐵人賽

DAY 3
0

到了第三篇~!,我們準備進一步進入正題!

上一篇,我們已經選定了要開發的專案:「個人財務管理系統」。不過,開始寫程式之前,千萬別急著衝一波,咱們得先做點規劃。因為需求與系統規劃這一步,就像是開車前要先設定導航。沒有路線圖,你只會繞來繞去,最後迷路在代碼的荒野中。
別擔心,這篇文章將會帶你從需求確認到系統規劃,逐步理清接下來的開發路線。我們會分階段進行,從環境建置、需求確認到每一個開發步驟,一步步來。順序很重要,千萬別跳步,跳步只會導致「debug 全家桶」。

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

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

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

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

需求確認與規劃

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

需求確認與規劃

  1. 用戶基本操作:
    • 新增、編輯、刪除財務記錄(收入與支出)。
    • 每月財務總結報表(至少顯示每月收入支出統計)。
  2. 前後端交互需求:
    • 前端用表單收集數據,後端用 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. 資料庫設計:
    • 設計「財務記錄」資料表,包含收入與支出金額、類別、日期等欄位。
    • 使用 Laravel 的 migration 工具來管理資料庫變更,未來資料庫需要升級時,也能輕鬆應對。
  2. API 開發:
    • 開發 API 來處理前端傳來的數據,包含新增、編輯、刪除記錄的請求。
    • 確保 API 能正確地與資料庫互動,成功存入與取出數據。
  3. 測試 API:
    • 別等到前端整合才來測試後端 API!利用 Postman 或 curl 工具來測試 API 確認數據流正常。

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

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

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

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

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

具體步驟

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

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

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

測試項目:

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

最後…待辦清單

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

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

最後的小囉唆…每日 Stand-up 和週回顧
即便是獨立開發,仍然建議你每天進行每日 Stand-up,確認每日的工作進度與問題,內容包括:

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

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

需求與系統規劃這一步可能看起來不太酷,但這是任何成功專案的基礎。隨著專案的進行,規劃的思維會讓你少走很多冤枉路,也讓整個開發過程更有條理。
規劃好流程,接下來的開發會像拆積木一樣,簡單且有成就感!接下來,就讓我們就讓我們逐步完成,看是簡單,細節滿滿的專案吧!

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


上一篇
D2 - 我獨前後端,快速打造 MVP - 個人財務管理系統
下一篇
D4 - 來吧!用 Docker 打造開發環境(Laravel + Nuxt + Nginx + MariaDB)
系列文
我獨自開發 - 30天進化之路,掌握 Laravel + Nuxt30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言