iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 20 瀏覽

鐵人賽 Build on Google AI DAY 27

2026年，如何利用 Antigravity CLI、Gemini、各項技能及 MCP Server 建構基於 Firebase 的 Angular 應用系列第 27 篇

技術 Day 27 - 使用 Chrome DevTool MCP Server 與 Antigravity CLI 最佳化靜態資源

我們將根據 Chrome DevTools MCP Server 的建議採取行動，透過壓縮 192x192 和 512x512 的圖示、將 Material S...

Connie ‧ 2026-09-28

2 Like 1 留言 23 瀏覽

鐵人賽 Modern Web DAY 13

Angular 22 Signal 進化論系列第 13 篇

技術 Day 13：從 Router Event 到 Signal

路由狀態管理在前端開發中比較少被單獨拿出來討論，但在 Angular 裡，一次路由導航其實會經過不少階段，也會在過程中發出不同的 Router Event，例如...

Antonio ‧ 2026-09-27

0 Like 0 留言 10 瀏覽

鐵人賽自我挑戰組 DAY 13

Angular 開發二三事系列第 13 篇

技術 Day 13: Angular Signal 訊號

今天收到一件噩耗，覺得一切都無所謂了，鐵人賽就平平穩穩地發文吧。什麼是 Signal？先來看官方文件解說： Signal 是對值的套件裝器，當該值發生...

chiayinin ‧ 2026-09-27

0 Like 0 留言 67 瀏覽

鐵人賽 Build on Google AI DAY 26

2026年，如何利用 Antigravity CLI、Gemini、各項技能及 MCP Server 建構基於 Firebase 的 Angular 應用系列第 26 篇

技術 Day 26 - 使用 Chrome DevTool MCP Server 與 Antigravity CLI 提升效能與最佳實踐

今天，我們將使用 Chrome DevTool MCP Server 來稽核桌面與行動裝置檢視埠（Viewport）下的當前效能（Performance）與最佳...

Connie ‧ 2026-09-27

0 Like 0 留言 10 瀏覽

鐵人賽自我挑戰組 DAY 12

Angular 開發二三事系列第 12 篇

技術 Day12: Angular 的生命週期 `ngOnInit`

我已經不知道要寫什麼了元件的生命週期是指元件建立和銷燬之間發生的一系列步驟。每個步驟都代表了 Angular 渲染元件並在一段時間內檢查更新過程的不同部分。...

chiayinin ‧ 2026-09-26

2 Like 0 留言 19 瀏覽

鐵人賽 Modern Web DAY 12

Angular 22 Signal 進化論系列第 12 篇

技術 Day 12：從 httpResource 到 TanStack Query，認識 Server State

前面我們花了不少時間討論，為什麼「請求本身的狀態」和「元件的顯示狀態」應該分開處理。延續這個方向，這篇想從一個更根本的問題開始：TanStack Query...

Antonio ‧ 2026-09-26

0 Like 0 留言 85 瀏覽

鐵人賽 Build on Google AI DAY 25

2026年，如何利用 Antigravity CLI、Gemini、各項技能及 MCP Server 建構基於 Firebase 的 Angular 應用系列第 25 篇

技術 Day 25 - 使用 Chrome DevTool MCP Server 與 Antigravity CLI 改善 SEO、無障礙功能及 Agentic Browsing

我將 Chrome DevTool MCP Server 與 Chrome Lighthouse 搭配使用，以計算 Angular 應用程式的 SEO、無障礙功...

Connie ‧ 2026-09-26

3 Like 0 留言 25 瀏覽

鐵人賽 Modern Web DAY 11

Angular 22 Signal 進化論系列第 11 篇

技術 Day 11：用 rxResource 串起 Observable 與 Resource

前面介紹了不少 Resource 到 httpResource() 的應用。不過在 Angular 開發中，Observable 與 RxJS 仍然是很常見的非...

Antonio ‧ 2026-09-25

0 Like 0 留言 88 瀏覽

鐵人賽 Build on Google AI DAY 24

2026年，如何利用 Antigravity CLI、Gemini、各項技能及 MCP Server 建構基於 Firebase 的 Angular 應用系列第 24 篇

技術 Day 24 - 提升 Angular 效能 - 使用 @defer 實現可延遲檢視（Deferrable Views）

當有可用更新時延遲載入 PWA 更新橫幅 PwaUpdateBanner 僅在部署新版本時才會顯示。因此，我們不需要急先載入它；我們可以將它的載入延遲到根元件中...

Connie ‧ 2026-09-25

3 Like 0 留言 31 瀏覽

鐵人賽 Modern Web DAY 10

Angular 22 Signal 進化論系列第 10 篇

技術 Day 10：linkedSignal 讓相依狀態也能被修改

昨天我們透過 httpResource() 搭配 chain() 處理兩個非同步資料之間的依賴。下游 Request 需要使用上游資料時，會等上游完成後再繼續；...

Antonio ‧ 2026-09-24

0 Like 0 留言 75 瀏覽

鐵人賽 Build on Google AI DAY 23

2026年，如何利用 Antigravity CLI、Gemini、各項技能及 MCP Server 建構基於 Firebase 的 Angular 應用系列第 23 篇

技術 Day 23 - 提升 Angular 效能 - 使用 injectAsync 延遲載入服務

VisionService、TextToSpeechService 以及 AudioPlayerService 都是 Angular 服務，它們引入了龐大的依賴...

Connie ‧ 2026-09-24

0 Like 0 留言 77 瀏覽

鐵人賽自我挑戰組 DAY 10

Angular 開發二三事系列第 10 篇

技術 Day10: 寫一個瀏覽器儲存空間封裝工具

有了 AI 輔助開發後，對寫鐵人賽好迷惘喔。是 AI 懂，不是我懂。我很喜歡「封包」的作法，就好像收納時，會在大抽屜放許多小格子，讓文具分門別類放好，有需要...

chiayinin ‧ 2026-09-24

1 Like 0 留言 32 瀏覽

鐵人賽 Modern Web DAY 9

Angular 22 Signal 進化論系列第 9 篇

技術 Day 9：httpResource 實務篇，統一回覆格式與 chain 相依請求

昨天我們透過 Orval 串起 API Contract，了解如何根據 OpenAPI 規格產生前端需要的型別與 API 呼叫方式。接下來延續這個基礎，看看後...

Antonio ‧ 2026-09-23

0 Like 0 留言 29 瀏覽

鐵人賽自我挑戰組 DAY 9

Angular 開發二三事系列第 9 篇

技術 Day9: 全域 Loading

加班到快斷賽，還無法發文(打第二次了) 步驟一: 建立狀態管理 Service import { Injectable, signal } from '@an...

chiayinin ‧ 2026-09-23

0 Like 0 留言 105 瀏覽

鐵人賽 Build on Google AI DAY 22

2026年，如何利用 Antigravity CLI、Gemini、各項技能及 MCP Server 建構基於 Firebase 的 Angular 應用系列第 22 篇

技術 Day 22 - 掃描程式碼庫以尋找深化契機並以技巧深入探討

架構審查在整個軟體開發生命週期中至關重要，可作為各個成長階段的檢查點。隨著我的 Angular 應用程式現在整合了 Firebase 基礎設施、使用者介面、服務...

Connie ‧ 2026-09-23

2 Like 0 留言 36 瀏覽

鐵人賽 Modern Web DAY 8

Angular 22 Signal 進化論系列第 8 篇

技術 Day 8：用 Orval 串起 Angular API Contract：同時產生 HttpClient、httpResource 與 Zod

前後端在對接 API 時，常見的問題之一，就是雙方對資料格式的定義逐漸不一致。前端串接 API 時，通常會根據後端提供的 Response 格式，定義對應的...

Antonio ‧ 2026-09-22

0 Like 0 留言 30 瀏覽

鐵人賽自我挑戰組 DAY 8

Angular 開發二三事系列第 8 篇

技術 Day8: 寫個 404 頁面

Angular 寫 404 頁面很簡單，跟 Vue 類似。在 Route 的 path 填上兩個 * 字號就行了！直接看程式碼： app.routes.ts...

chiayinin ‧ 2026-09-22

0 Like 0 留言 111 瀏覽

鐵人賽 Build on Google AI DAY 21

2026年，如何利用 Antigravity CLI、Gemini、各項技能及 MCP Server 建構基於 Firebase 的 Angular 應用系列第 21 篇

技術 Day 21 - 建立文字轉語音 Signal 表單

Angular v22 穩定版的 Signal 表單（Signal Form）被用來建置一個音訊標籤表單，供使用者輸入場景描述、情感、說話速度，並選擇語音名稱。...

Connie ‧ 2026-09-22

0 Like 0 留言 49 瀏覽

鐵人賽自我挑戰組 DAY 7

Angular 開發二三事系列第 7 篇

技術 Day 7: Angular 的路由守衛 Route Guards

已經二次回診、加重藥劑量了，希望感冒快快好大家要多保重身體，出門在外、尤其是搭捷運的時候，一定要戴口罩，保護好自己！接下來我們要來做「全域路由守衛」的攔截功...

chiayinin ‧ 2026-09-21

2 Like 0 留言 74 瀏覽

鐵人賽 Modern Web DAY 7

Angular 22 Signal 進化論系列第 7 篇

技術 Day 7：從 Resource 到 httpResource：用 Signal 管理 HTTP 資料請求

昨天我們提到，Resource API 本身是一套通用的非同步資料模型，比較適合用在「讀取資料」這類情境，而不是新增、修改或刪除資料這種 Mutation 操作...

Antonio ‧ 2026-09-21

0 Like 0 留言 92 瀏覽

鐵人賽 Build on Google AI DAY 20

2026年，如何利用 Antigravity CLI、Gemini、各項技能及 MCP Server 建構基於 Firebase 的 Angular 應用系列第 20 篇

技術 Day 20 - 建立圖片轉替代文字檢視

為圖片產生替代文字是一項基本的可存取性（Accessibility，簡稱 a11y）需求。AI 可以分析上傳的圖片並產生描述性的替代文字，螢幕閱讀器（Scree...

Connie ‧ 2026-09-21

4 Like 0 留言 71 瀏覽

鐵人賽 Modern Web DAY 6

Angular 22 Signal 進化論系列第 6 篇

技術 Day 6：Resource API：把非同步資料帶進 Signal

今天來看 Angular Signal 裡一個很重要的非同步資料 API：Resource API。前面介紹 Signal 時，我們處理的大多都是同步狀態，例...

Antonio ‧ 2026-09-20

0 Like 0 留言 120 瀏覽

鐵人賽 Build on Google AI DAY 19

2026年，如何利用 Antigravity CLI、Gemini、各項技能及 MCP Server 建構基於 Firebase 的 Angular 應用系列第 19 篇

技術 Day 19 - 定義 App Shell 與應用程式路由

我們已經抵達應用程式的使用者介面層。它由核心路由結構、應用程式外殼（App Shell）以及集中式儀表板元件所組成。該儀表板協調了多個專門的子元件，包括相片上傳...

Connie ‧ 2026-09-20

3 Like 0 留言 432 瀏覽

鐵人賽 Modern Web DAY 5

Angular 22 Signal 進化論系列第 5 篇

技術 Day 5：從 Reactive Graph 到 View Tree，看 Angular 如何找到真正需要更新的畫面

前面我們已經知道，當 Signal 的值發生變化後，Angular 會透過 Reactive Graph 找到受到影響的 Consumer。不過找到 Cons...

Antonio ‧ 2026-09-19

0 Like 0 留言 399 瀏覽

鐵人賽自我挑戰組 DAY 5

Angular 開發二三事系列第 5 篇

技術 Day5: 設定 Prompt，避免 AI 寫出舊版過時程式碼

寫到一半忘記存檔了 Angular 是 Google 推出的前端框架，歷史悠久，各個版本的寫法皆有差異。對於只寫過 Vue3、React Hook 的我來說...

chiayinin ‧ 2026-09-19

0 Like 0 留言 91 瀏覽

鐵人賽 Build on Google AI DAY 18

2026年，如何利用 Antigravity CLI、Gemini、各項技能及 MCP Server 建構基於 Firebase 的 Angular 應用系列第 18 篇

技術 Day 18 - 使用 Web Audio API 實現即時串流音訊播放

Firebase AI Logic 的文字轉語音（Text-to-Speech）功能新增了對串流播放的支援，並將二進位資料以區塊（Chunk）形式回傳。然而，我...

Connie ‧ 2026-09-19

3 Like 0 留言 62 瀏覽

鐵人賽 Modern Web DAY 4

Angular 22 Signal 進化論系列第 4 篇

技術 Day 4：Angular 怎麼知道誰正在讀 Signal？從 Reactive Context 理解依賴追蹤

前面我們看過，當 Template 讀取 Signal 時，Angular 會記住「誰依賴了誰」；當 Signal 發生變化後，也會透過 Reactive Gr...

Antonio ‧ 2026-09-18

0 Like 0 留言 121 瀏覽

鐵人賽自我挑戰組 DAY 4

Angular 開發二三事系列第 4 篇

技術 Day4: 「Orval.dev」自動生成與後端 API 相同規格的 TypeScript API 文件的前端好工具

一早起來，國外同事就丟給我 Orval 網站，問我：「用過沒？」聽都沒聽過啊 T_T 什麼是「Orval.dev」？ Orval（官方網站為 Orval）是一...

chiayinin ‧ 2026-09-18

0 Like 0 留言 119 瀏覽

鐵人賽 Build on Google AI DAY 17

2026年，如何利用 Antigravity CLI、Gemini、各項技能及 MCP Server 建構基於 Firebase 的 Angular 應用系列第 17 篇

技術 Day 17 - Firebase 與 Angular 整合 - 建立用於文字轉語音任務的 TextToSpeech 服務

Firebase AI Logic 在八月新增了文字轉語音（Text-to-Speech）功能，這簡化了在我的 Angular 應用程式中從文字生成語音的架構。...

Connie ‧ 2026-09-18

2 Like 0 留言 115 瀏覽

鐵人賽 Modern Web DAY 3

Angular 22 Signal 進化論系列第 3 篇

技術 Day 3：從 set()、update() 看懂 Angular Signal 的基本使用與更新機制

昨天我們先試著理解，在 Template 中使用 Signal() 時，Angular 是如何建立依賴關係，並在 Signal 發生變化後，知道哪些 View...

Antonio ‧ 2026-09-17