avatar
文章
8
標籤
15
分類
12
關於我
HAO Lab
關於我

HAO Lab

Zog 簡介
發表於2025-06-28|更新於2025-06-28|GolangBackendValidation|Backend•Golang•Validation
什麼是 Zog? 圖片來源 Zog 是一個 Golang 資料驗證、轉換工具,透過定義 資料結構(Schema) 以便於 運行時(Runtime) 進行值的解析、轉換與驗證。如果有在關注 TypeScript 生態圈,對 Zod 肯定不陌生,而 Zog 正是受 Zod 啟發,提供與 Zod 極為相似的 API,使用 方法鏈(Method chain) 來建置 Schema 進而保障 型別安全(Type-safe)。使用 Zog 可以更清楚直觀地驗證、轉換資料,是一套值得學習的 Schema Validation 套件。 為什麼選擇 Zog?在 Golang 生態圈中,最廣泛使用的驗證套件為 go-playground/validator,其設計風格是 在 struct tag 加上驗證描述,下方為範例程式碼: 123456type Todo struct { Id string `json:"id" validate:"required,uuid4"` Title string...
Highlight 表格搜尋關鍵字
發表於2025-05-25|更新於2025-05-26|FrontendAngularWeb APIs|Frontend•Angular•Web APIs
資料表格經常會有搜尋關鍵字的功能,當使用者在搜尋框輸入特定關鍵字時,資料表格會將符合該關鍵字的資料過濾出來,熱門的資料表格套件都有提供相關功能,像是:DataTables、Ag Grid 等。以下圖為例,Ag Grid 的 Quick Filter 功能可以讓使用者針對整個資料表格進行關鍵字查詢: 這個功能很方便,不過面對較複雜、欄位較多的資料表格時,就比較難一眼看出是哪個欄位有符合該關鍵字查詢。於是就出現了 高亮(Highlight) 關鍵字的搜尋功能,當使用者在輸入框輸入特定關鍵字時,資料表格內符合該關鍵字的文字會像使用 Ctrl + F 的搜尋方式一樣 加上底色,來強調文字。 傳統的 Highlight 解法要做到上述 Highlight 最直覺的做法是 在符合關鍵字的文字周圍動態插入 span 元素,假如本來的結構如下: 1234<div class="row"> <div class="cell">John</div> <div...
NestJS 結合 Pact Broker 完善契約測試
發表於2025-04-23|更新於2025-04-23|BackendNestJSContract Testing|Backend•NestJS•Contract Testing•Pact•Pact Broker
什麼是 Pact Broker?契約測試可以用更快、更低的成本來測試服務之間的介面是否有破壞性變更,強化服務之間介面的穩固性。但此測試方式面臨了一些挑戰: 契約管理:在微服務架構中,每個服務之間的契約可能數量很多且版本頻繁變動。需要一個集中的平台來儲存、追蹤這些契約檔案,並協助團隊理解每個契約的來源與歷史。 驗證結果管理:當 Provider 驗證 Consumer 所提交的契約時,我們需要一個地方來儲存這些驗證結果,讓團隊成員可以清楚知道目前哪個版本的服務與哪個契約已經完成驗證、是否相容。 為了解決上述問題,Pact 團隊打造了 Pact Broker 這個工具。它是一個專門設計來儲存和管理 Pact 契約與驗證結果的服務。透過 Pact Broker,我們可以更有效地管理微服務之間的契約、驗證狀態、版本關係,將其融入 CI/CD 即可打造自動化、高效的契約測試流程。 補充:有關於 Pact 相關的介紹可以參考官方文件或是我之前寫的文章。 參與者 (Pacticipants)參與者 (Pacticipants) 一詞是 Pact 與英文中的參與者 -...
在 NestJS 使用 Pact 實現契約測試
發表於2025-03-08|更新於2025-04-08|BackendNestJSContract Testing|Backend•NestJS•Contract Testing•Pact
在微服務架構中,各個服務由不同團隊獨立開發、部署與維運,這樣的彈性雖然增加了開發效率,但也同時導致服務間互動的不確定性。如何確保每個服務在獨立更新的同時,仍能正確溝通與協作? 契約測試(Contract Testing) 正是解決這一問題的有效工具。 什麼是 Contract Testing?Contract Testing 是一種專注於驗證服務間 介面(Interface) 正確性的自動化測試方法。此方法論會將服務區分成兩個角色: 提供者(Provider) :提供 API 的服務。 消費者(Consumer) :使用 Provider 提供的 API 的服務。 Provider 與 Consumer 之間會 提前 約定好 Interface,包含:請求格式、回應格式、錯誤處理機制等。這種約定可以是 OpenAPI、JSON Schema 或是其他 Contract Testing 工具來作為服務間共同遵循的標準,這套約定即 契約(Contract) 。而 Contract Testing 有兩種方法,分別是: 消費者驅動的契約測試(Consumer-Driven...
在 NestJS 使用 Valkey 實現 Cache
發表於2025-02-23|更新於2025-02-23|BackendNestJS|Backend•NestJS•Cache•Valkey
什麼是 Valkey?在 2024 年時,Redis 官方宣佈要針對 License 進行異動,對於託管 Redis 的雲端服務供應商將不能免費使用 Redis,像是:AWS、Google Cloud Platform 等平台。因此,社群 fork 了 Redis 並建立開源的替代品 - Valkey。它是一個高效的鍵值儲存系統,可以用來實現 快取(Cache)、訊息佇列(Message Queue) 等功能,在運行方面,同樣也支援 獨立運作模式(Standalone) 與 叢集運作模式(Cluster) 。 圖片來源 補充:對於 Redis 異動的內容,可以參考 Will 保哥翻譯後的版本。 架設 Valkey官方有提供 Binary 與 Docker 兩種方式,這裡我們使用 Docker 來進行架設。透過下方指令將 Valkey 的 Docker Image 從 DockerHub 下載下來: 1$ docker pull valkey/valkey:8.0.2 補充:這裡指定版本為 8.0.2,若有需要可以自行換成所需的版本號。 在啟動 Valkey...
KrakenD 簡介
發表於2025-01-11|更新於2025-01-11|BackendKrakenD|Backend•APIGateway•KrakenD
什麼是 KrakenD?KrakenD 是一套開源、可擴充、高效能的 API Gateway,使用 Golang 所撰寫,透過 JSON 設定檔即可聚合多個微服務到單一 Endpoint,並能夠運用內建或社群提供的 中介軟體(Middleware) 來擴展其功能,自動完成部分繁重的工作,如:聚合(Aggregate)、轉換(Transform)、過濾(Filter)、解碼(Decode)、節流(Throttle)、身份驗證(Authenticate) 等。 圖片來源 安裝 KrakenDKrakenD 有提供多種安裝方式,其中 Docker Image 的方式是最快、最容易的。透過下方指令即可將 KrakenD 的 Docker Image 從 Docker Hub 下載下來: 1$ docker pull devopsfaith/krakend 使用下方指令即可快速啟動 KrakenD: 1$ docker run -p 8080:8080 devopsfaith/krakend 啟動後,可以透過 GET 方法存取...
你可能不知道的 NestJS 隱藏技巧:Discovery Module
發表於2023-09-17|更新於2023-09-17|BackendNestJSAdvanced|Backend•NestJS
在某些應用場景下,可能會需要去遍歷封裝於 模組(Module) 內的元件,比如:找出帶有特定 裝飾器(Decorator) 的元件,甚至是元件底下的方法,來預先處理一些事情,最典型的案例就是 EventEmitterModule,當某個事件觸發時,會呼叫帶有特定裝飾器的方法。 NOTE:關於 EventEmitterModule 可以參考官方文件的說明。 下方是官方 EventEmitterModule 的範例,透過 EventEmitter2 發送 order.created 事件時,會呼叫帶有 @OnEvent 裝飾器且值為 order.created 的方法: 1234567this.eventEmitter.emit( 'order.created', new OrderCreatedEvent({ orderId: 1, payload: {}, }),); 123456789// ...@Injectable()export class OrderListener { ...
動態載入 Web Component
發表於2023-09-10|更新於2023-09-10|FrontendWeb Component|Frontend•Angular•Web Component
什麼是 Web Component?Web Component 是一個封裝自定義元件的技術,讓我們可以輕易地在不同應用程式中重用這些被封裝的元件,不僅如此,Web Component 不限定應用程式使用的框架或函式庫,不論今天是 Angular 或 React,甚至是 Vanilla JavaScript 都能夠輕鬆使用。 INFO:關於 Web Component 的詳細資訊可以參考 MDN。 為什麼需要 Web Component?Web Component 的問世,可以實現較理想的 微前端(Micro Frontend) 概念,在過去,會以 iframe 的形式將其他團隊開發的元件、頁面嵌入至自己的系統內來實現微前端,但這樣的做法會有很多的限制,比如:跨域、生命週期等。 透過 Web Component 則可以避免這些問題,因為概念上就是將其他團隊開發的元件程式碼嵌入並串接至自己的系統裡。 NOTE:微前端也可以用 Module Federation 技術來實作,有興趣的話,可以參考相關文件。 動態載入 Web Component目前常見的 Web...
1
avatar
HAO
樂於分享與熱愛學習的工程師
文章
8
標籤
15
分類
12
公告
全世界第一本繁體中文 NestJS 入門書籍已上架,歡迎點擊這裡前往購買!
最新文章
Zog 簡介2025-06-28
Highlight 表格搜尋關鍵字2025-05-25
NestJS 結合 Pact Broker 完善契約測試2025-04-23
在 NestJS 使用 Pact 實現契約測試2025-03-08
在 NestJS 使用 Valkey 實現 Cache2025-02-23
分類
  • Backend5
    • KrakenD1
    • NestJS4
      • Advanced1
      • Contract Testing2
  • Frontend2
    • Angular1
      • Web APIs1
標籤
Web Component KrakenD Golang NestJS Valkey Backend Pact Pact Broker Web APIs Frontend Validation Angular Cache APIGateway Contract Testing
歸檔
  • 六月 2025 1
  • 五月 2025 1
  • 四月 2025 1
  • 三月 2025 1
  • 二月 2025 1
  • 一月 2025 1
  • 九月 2023 2
網站資訊
文章數量 :
8
訪客數 :
總瀏覽量 :
最後更新時間 :
推薦 Blog
hcLuo Blog
Leo's Coding Life
©2023 - 2025 By HAO
框架 Hexo 7.3.0|主題 Butterfly 5.3.5