D15 - 第二階段驗收:盤點需求,為前端整合鋪路

更新於 2024/10/28閱讀時間約 9 分鐘

哈囉,大家好!不知不覺,我們的 30 天鐵人挑戰已經過了一半。這段期間,我們一起從零開始,建立了個人財務管理系統的後端,從資料庫設計、模型建立、路由設定到控制器實作,甚至進行了單元測試。

現在,是時候停下腳步,來一場 第二階段的驗收。

在開始前,我想分享一個個人經驗:以前我在開發專案時,總是急於向前衝,結果到最後才發現有許多細節沒處理好,導致後續的整合和維護變得困難重重。這次,我們不要重蹈覆轍,讓我們一起盤點已完成的功能,確保接下來的 Nuxt 前端串接能夠順利進行。

一、為什麼需要進行中期驗收?

在軟體開發中,定期的驗收和回顧是非常重要的。透過驗收,我們可以:

  • 確認進度:確保已完成的功能符合最初的需求。
  • 發現問題:及早發現並修正潛在的錯誤或遺漏。
  • 調整計畫:根據現狀調整後續的開發方向和優先級。

就像爬山一樣,爬到一半時停下來看看地圖,確認一下方向,補充一下能量,再繼續前進。

二、盤點需求與實際達成內容

首先,我們需要回顧一下最初列出的需求,然後檢查我們實際完成了哪些。

1. 需求清單

  • 使用者管理:
    • 註冊新使用者
    • 使用者登入驗證
    • 更新使用者資料
    • 刪除使用者帳號
  • 銀行帳戶管理:
    • 新增銀行帳戶
    • 編輯銀行帳戶資訊
    • 刪除銀行帳戶
    • 列出使用者的所有銀行帳戶
  • 分類管理:
    • 新增收入/支出分類
    • 編輯分類名稱和類型
    • 刪除分類
    • 列出所有分類
  • 交易紀錄管理:
    • 新增交易紀錄(收入/支出)
    • 編輯交易紀錄
    • 刪除交易紀錄
    • 查詢交易紀錄
    • 根據日期範圍查詢交易紀錄
  • 報表功能:
    • 每月收入/支出統計
    • 按分類統計收入/支出
    • 生成圖表(未實作,計畫在前端完成)

2. 實際完成的內容

經過前面的開發,我們已經:

  • 建立了 使用者、銀行帳戶、分類、交易紀錄 的資料表和模型。
  • 實作了上述資源的 CRUD API。
  • 完成了基本的 資料驗證 和 錯誤處理。
  • 撰寫了部分的 單元測試,確保關鍵功能的正確性。

3. 尚未完成的部分

  • 使用者登入驗證:目前尚未實作身份驗證機制(如 JWT 或 Laravel Sanctum)。
  • 報表功能的 API:報表的生成尚未在後端提供 API。
  • 進階查詢:如根據日期範圍或分類篩選交易紀錄的功能需要加強。
  • 測試覆蓋率:單元測試還不夠全面,需要補充更多測試案例。

三、驗收 API 功能

為了確保後續的前端開發能夠順利進行,我們需要逐一測試每個 API,確認其功能和輸出符合預期。

1. 使用 Postman 測試 API

Postman 是一個強大的 API 測試工具,以下是我常用的驗收方法:

  • 建立測試環境:在 Postman 中設定環境變數,如 API 伺服器的 URL。
  • 撰寫測試腳本:為每個 API 請求建立對應的測試案例。
  • 檢查回應格式:確認 API 回應的 JSON 結構是否符合預期。
  • 驗證狀態碼:例如,創建成功應回傳 201,刪除成功應回傳 204。

2. 測試各個 API

(1)使用者 API

  • GET /api/users:應回傳使用者列表。
  • POST /api/users:提供必要的資料,應成功創建新使用者。
  • GET /api/users/{id}:應回傳指定使用者的資料。
  • PUT /api/users/{id}:更新使用者資料,確認變更是否生效。
  • DELETE /api/users/{id}:刪除使用者,確認資料庫中已無此使用者。

(2)銀行帳戶 API

  • GET /api/bank-accounts:應回傳銀行帳戶列表。
  • POST /api/bank-accounts:創建新帳戶,檢查必填欄位和驗證規則。
  • GET /api/bank-accounts/{id}:取得特定帳戶資訊。
  • PUT /api/bank-accounts/{id}:更新帳戶資訊,確認變更。
  • DELETE /api/bank-accounts/{id}:刪除帳戶,確認是否同時刪除了相關的交易紀錄(若有設定)。

(3)分類 API

  • GET /api/categories:應回傳分類列表。
  • POST /api/categories:新增分類,測試收入和支出類型。
  • GET /api/categories/{id}:取得分類詳情。
  • PUT /api/categories/{id}:更新分類名稱或類型。
  • DELETE /api/categories/{id}:刪除分類,確認系統處理方式(如是否影響相關交易紀錄)。

(4)交易紀錄 API

  • GET /api/transactions:應回傳所有交易紀錄。
  • POST /api/transactions:新增交易紀錄,測試不同類型、金額和日期。
  • GET /api/transactions/{id}:取得交易詳情。
  • PUT /api/transactions/{id}:更新交易資訊。
  • DELETE /api/transactions/{id}:刪除交易,確認資料庫更新。

3. 檢查資料驗證與錯誤處理

  • 輸入驗證:嘗試傳遞錯誤或缺少的資料,確認系統是否返回適當的錯誤訊息。
  • 權限控制:目前尚未實作,但需要考慮未來加入身份驗證後的權限驗證。
  • 錯誤回應格式:確保錯誤訊息統一且易於理解,方便前端處理。

4. 確認 API 文件

雖然我們是獨立開發,但良好的 API 文件對於自己和他人都是一種負責任的態度。建議使用工具如 Swagger 或 ApiDoc 生成 API 文件,記錄:

  • API 路徑與方法:如 GET /api/transactions。
  • 請求參數:包括必要的和可選的參數,類型和說明。
  • 回應格式:成功和錯誤的回應範例。
  • 錯誤碼:常見的錯誤碼及其意義。

四、為前端整合做好準備

在確認後端 API 功能正常後,我們需要考慮如何讓前端開發更順利。

1. 統一回應格式

  • 成功回應:統一使用固定的格式,例如:
{
"status": "success",
"data": { ... }
}
  • 錯誤回應:提供一致的錯誤結構,方便前端解析:
{
"status": "error",
"message": "錯誤訊息",
"errors": { ... }
}

2. CORS 設定

為了讓前端(尤其是使用不同網域時)能夠順利訪問 API,需要在後端設定 CORS(跨來源資源共享)。

在 app/Http/Kernel.php 中,確認已經加入了 \Fruitcake\Cors\HandleCors::class。

3. 身份驗證與安全性

雖然我們還沒有實作身份驗證,但在進行前端整合前,需要決定:

  • 使用哪種身份驗證方式:如 JWT、Laravel Sanctum 等。
  • 保護哪些路由:哪些 API 需要登入後才能訪問。
  • 前後端如何傳遞身份驗證資訊:如使用 HTTP Header 傳遞 Token。

五、未來的調整與計畫

經過這次驗收,我們發現還有一些需要改進的地方:

  • 完善單元測試:增加測試覆蓋率,特別是關鍵功能和邊界情況。
  • 實作身份驗證:保護使用者資料的安全性。
  • 優化 API:考慮性能和可擴展性,如加入分頁、快取等。
  • 準備前端開發環境:設定 Nuxt 專案,並與後端 API 整合。

六、個人經驗分享

走到這裡,我們已經完成了後端開發的主要部分。回想起來,每次在專案中進行這樣的中期驗收,總能讓我發現許多之前忽略的細節。這不僅有助於提升專案品質,還能節省後續整合時的時間和精力。

我建議大家在開發過程中,多花點時間進行這樣的盤點和檢查。雖然看似耗時,但長遠來看,絕對是划算的投資。

小結

今天,我們一起進行了第二階段的驗收,盤點了需求與實際完成的內容,並測試了各個 API 的功能。這為我們接下來的前端整合鋪平了道路。


在接下來的日子裡,我們將:

  • 實作身份驗證機制,確保使用者資料安全。
  • 開始前端開發,使用 Nuxt.js 建立使用者介面。
  • 持續優化,根據測試和反饋進行改進。
    希望大家能夠從這次驗收中學到一些實用的方法和技巧,應用到自己的專案中。讓我們繼續保持熱情,迎接下半程的挑戰!
這是一系列以軟體開發為主題的輕鬆分享,內容涵蓋了技術選擇、開發經驗、實戰應用等多方面的議題。無論是如何在眾多框架中做出選擇,還是如何應對技術轉移的挑戰,這裡有幽默、有趣的對話風格,將複雜的技術問題轉化為易懂的故事。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
單元測試為重構提供了安全防線,確保程式碼在修改後仍能正常運作。透過撰寫測試,我們能夠提高程式碼品質、預防回歸錯誤,並在重構過程中更具信心。測試的過程不僅幫助找出錯誤,也促使我們深入思考系統設計,從而優化整體架構。
單元測試不僅能發現錯誤,更是提升開發技能的關鍵工具。Laravel 提供強大的測試框架,讓我們可以輕鬆撰寫測試。建立測試資料庫、撰寫測試方法、使用 Factory 生成測試資料,能確保程式碼穩定,並幫助開發者在修改與重構中更有信心。持續撰寫測試能提高程式碼品質,並讓開發過程更有條理與安全感。
本文介紹了如何在 Laravel 中實作控制器,為個人財務管理系統建立完整的 CRUD API。我們實現了資料的建立、查詢、更新和刪除,並使用資料驗證提升應用安全性。未來將進行程式碼重構及 API 測試,持續優化應用程式。
本文介紹 Laravel 中的路由設定,討論手動定義路由、群組、前綴和中介層的使用。透過這些技巧,能夠靈活組織 API 結構,提升可讀性和安全性。此外,還探討子資源路由及命名空間等進階技巧,幫助開發者精細控制路由行為。接下來會探討控制器的實作。
本文介紹 Laravel 中的 Model,透過 Eloquent ORM 進行資料庫互動。內容涵蓋 Model 建立、資料表關聯設定,以及利用 Eloquent 特性來優化程式碼。目的是簡化資料庫操作,提高程式碼可讀性與維護性。接下來將開發後端 API,進一步實現系統功能。
這篇文章介紹在 Laravel 中使用 Migration 管理資料庫結構,實現財務管理系統的資料表建立。Migration 提供版本控制、自動化管理和可移植性,方便開發者同步資料庫變更。還介紹了填充測試資料(Seeder)的操作,提高團隊協作效率。
單元測試為重構提供了安全防線,確保程式碼在修改後仍能正常運作。透過撰寫測試,我們能夠提高程式碼品質、預防回歸錯誤,並在重構過程中更具信心。測試的過程不僅幫助找出錯誤,也促使我們深入思考系統設計,從而優化整體架構。
單元測試不僅能發現錯誤,更是提升開發技能的關鍵工具。Laravel 提供強大的測試框架,讓我們可以輕鬆撰寫測試。建立測試資料庫、撰寫測試方法、使用 Factory 生成測試資料,能確保程式碼穩定,並幫助開發者在修改與重構中更有信心。持續撰寫測試能提高程式碼品質,並讓開發過程更有條理與安全感。
本文介紹了如何在 Laravel 中實作控制器,為個人財務管理系統建立完整的 CRUD API。我們實現了資料的建立、查詢、更新和刪除,並使用資料驗證提升應用安全性。未來將進行程式碼重構及 API 測試,持續優化應用程式。
本文介紹 Laravel 中的路由設定,討論手動定義路由、群組、前綴和中介層的使用。透過這些技巧,能夠靈活組織 API 結構,提升可讀性和安全性。此外,還探討子資源路由及命名空間等進階技巧,幫助開發者精細控制路由行為。接下來會探討控制器的實作。
本文介紹 Laravel 中的 Model,透過 Eloquent ORM 進行資料庫互動。內容涵蓋 Model 建立、資料表關聯設定,以及利用 Eloquent 特性來優化程式碼。目的是簡化資料庫操作,提高程式碼可讀性與維護性。接下來將開發後端 API,進一步實現系統功能。
這篇文章介紹在 Laravel 中使用 Migration 管理資料庫結構,實現財務管理系統的資料表建立。Migration 提供版本控制、自動化管理和可移植性,方便開發者同步資料庫變更。還介紹了填充測試資料(Seeder)的操作,提高團隊協作效率。
你可能也想看
Google News 追蹤
Thumbnail
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
在過去兩年中,我持續運用 Notion 進行個人管理,個人管理的模板也逐漸定型,藉此分享個人管理模板的使用心得。
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
在前一篇我們已經成功地建立簽核表單及簽核節點並關聯回請假表單,而本篇會接著介紹如何管理簽核節點狀態並同步更新簽核表單狀態。
Thumbnail
本文介紹瞭如何在後端系統開發時設計不同表單的簽核流程,包括請假表單和採購表單。以及如何動態生成簽核表單,並建立簽核節點。另外還介紹瞭如何利用繼承來簡化簽核流程的設定。
※ 補充說明: ※ npm 常用指令: ◦ npm init–y:快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version:快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱:用來安裝
Thumbnail
前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
Thumbnail
第一份正職工作 在iot公司擔任後端工程師,一上工就使用先前沒用過的php/laravel,也馬上負責公司產品的架構規劃,先前資料庫只有簡單記載使用者跟使用者的一些設定,很多地方有資料不一致的問題,產品內容還有很多實體的關係沒有被定義進資料庫都是這次改版我要做的事情。 改版納入公司、機器
Thumbnail
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
在過去兩年中,我持續運用 Notion 進行個人管理,個人管理的模板也逐漸定型,藉此分享個人管理模板的使用心得。
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
在前一篇我們已經成功地建立簽核表單及簽核節點並關聯回請假表單,而本篇會接著介紹如何管理簽核節點狀態並同步更新簽核表單狀態。
Thumbnail
本文介紹瞭如何在後端系統開發時設計不同表單的簽核流程,包括請假表單和採購表單。以及如何動態生成簽核表單,並建立簽核節點。另外還介紹瞭如何利用繼承來簡化簽核流程的設定。
※ 補充說明: ※ npm 常用指令: ◦ npm init–y:快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version:快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱:用來安裝
Thumbnail
前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
Thumbnail
第一份正職工作 在iot公司擔任後端工程師,一上工就使用先前沒用過的php/laravel,也馬上負責公司產品的架構規劃,先前資料庫只有簡單記載使用者跟使用者的一些設定,很多地方有資料不一致的問題,產品內容還有很多實體的關係沒有被定義進資料庫都是這次改版我要做的事情。 改版納入公司、機器