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

0 Like 0 留言 146 瀏覽

鐵人賽 Build on Google AI

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

技術 Day 32 - [成本最佳化] 節約型 AI：縮小影像酬載以大幅降低雲端成本

當選取大型圖片或相片時，直接將其轉換為行內 base64 資料會大幅膨脹酬載（payload）大小，並消耗大量的輸入 Token。透過在用戶端將圖片尺寸縮小至小...

Connie ‧ 2026-10-04

0 Like 0 留言 129 瀏覽

鐵人賽 Build on Google AI

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

技術 Day 31 - 降低雲端成本與延遲：AI 語音合成的響應式快取

我想最佳化 Angular 應用程式的文字轉語音部分以節省 AI Token。當使用者第一次點擊音訊按鈕時，應用程式會將請求連同表單資料（場景、情緒、語音與語速...

Connie ‧ 2026-10-02

0 Like 0 留言 89 瀏覽

鐵人賽 Build on Google AI DAY 30

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

技術 Day 30 - 實作主畫面並測量其效能

使用 Angular CLI MCP Server 啟動 Angular 應用程式 /angular-cli: Please start the develo...

Connie ‧ 2026-10-01

0 Like 0 留言 234 瀏覽

鐵人賽 Build on Google AI DAY 29

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

技術 Day 29 - 使用 Stitch MCP Server 與 AI Agent 技能設計新主畫面

為了減少初始打包大小（main.js），我們引進了一個輕量且即時載入（Eagerly loaded）的主畫面（Home Screen）登陸頁面，同時將繁重的多模...

Connie ‧ 2026-09-30

0 Like 0 留言 165 瀏覽

鐵人賽 Build on Google AI DAY 28

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

技術 Day 28 - Stitch MCP 實務應用：定義設計系統、克服摩擦與清理 CSS

當我最初為這個應用程式建置元件時，它們是在沒有正式設計系統的情況下建立的。當時，我不知道 Google 開發了 Stitch，也沒有意識到我可以將 Stitch...

Connie ‧ 2026-09-29

0 Like 0 留言 72 瀏覽

鐵人賽 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

0 Like 0 留言 144 瀏覽

鐵人賽 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 留言 145 瀏覽

鐵人賽 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

0 Like 0 留言 131 瀏覽

鐵人賽 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

0 Like 0 留言 118 瀏覽

鐵人賽 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 留言 147 瀏覽

鐵人賽 Build on Google AI DAY 22

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

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

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

Connie ‧ 2026-09-23

0 Like 0 留言 157 瀏覽

鐵人賽 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 留言 120 瀏覽

鐵人賽 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

0 Like 0 留言 156 瀏覽

鐵人賽 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

0 Like 0 留言 77 瀏覽

鐵人賽 AI Security DAY 5

AI 寫的程式，安全嗎？完工不是結束，是攻擊倒數的起點系列第 5 篇

技術 D05 資料庫直接開給前端的那一刻

前端能直接連資料庫時，資料庫的權限規則就是你唯一的一道牆。大綱情境：一行 curl，拿走整張會員資料表（2025 年 Lovable 事件）「前端直...

rewrite ‧ 2026-09-19

0 Like 0 留言 118 瀏覽

鐵人賽 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

0 Like 0 留言 129 瀏覽

鐵人賽 Build on Google AI DAY 4

AI-Driven MarTech：用 Google Cloud + Vertex AI 打造全自動廣告歸因與多模態素材分析系統系列第 4 篇

技術 Day 04 | 即時驗證軌：極簡 Live Demo 站與電商事件追蹤

1. 前言：沒有真實點擊，歸因分析只是紙上談兵 Day 01 提過本系列採用「雙軌資料架構」：軌道 B 用合成器灌入 50 萬筆歷史日誌撐起分析規模，軌道 A...

summerzoe ‧ 2026-09-18

0 Like 0 留言 153 瀏覽

鐵人賽 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

0 Like 0 留言 183 瀏覽

鐵人賽 Build on Google AI DAY 15

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

技術 Day 15 - Firebase 與 Angular 整合 - 初始化 Firebase App、App Check 並取得 Remote Config

到目前為止，我們已經建置好 Firebase 基礎設施（專案、應用程式、reCAPTCHA Enterprise 金鑰、App Check、Remote Con...

Connie ‧ 2026-09-16

0 Like 0 留言 121 瀏覽

鐵人賽 Build on Google AI DAY 14

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

技術 Day 14 - 建置 Firebase 基礎設施 - 透過 App Hosting 環境變數進行部署

我們的 Angular 應用程式目前已部署至 Firebase App Hosting，但尚未設定 Firebase API Key、Auth Domain、專...

Connie ‧ 2026-09-15

0 Like 0 留言 223 瀏覽

鐵人賽 Build on Google AI DAY 13

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

技術 Day 13 - 建置 Firebase 基礎設施 - 將 GitHub 存放庫連結至 Firebase App Hosting

Firebase App Hosting 是我不可或缺的 Firebase 服務之一。它讓 Angular 應用程式的部署變得非常快速且容易。在定義 App H...

Connie ‧ 2026-09-14

0 Like 0 留言 172 瀏覽

鐵人賽 Build on Google AI DAY 12

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

技術 Day 12 - 建置 Firebase 基礎設施 - Remote Config 預設值與 Firebase 設定物件

過去，在我的 Angular 專案中初始化 Firebase App 和 App Check，以及擷取 Remote Config 參數之前，我總是重複進行以下...

Connie ‧ 2026-09-13

0 Like 0 留言 1438 瀏覽

鐵人賽 Build on Google AI DAY 11

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

技術 Day 11 - 建置 Firebase 基礎設施 - Firebase 專案

今天，我們將使用 Firebase MCP Server 為 Angular 應用程式建立 Firebase 專案。伺服器會呼叫工具來建立專案、新增 Web 應...

Connie ‧ 2026-09-12

0 Like 0 留言 175 瀏覽

鐵人賽 Build on Google AI DAY 10

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

技術 Day 10 - 在 Angular 中加入 Angular Aria 支援 - 第二部分

在第一部分中，我們展示了如何使推薦和標籤列表符合 a11y 規範。在第二部分中，我們展示了 AudioTagsComponent 的程式碼重構，以及在新的 Vo...

Connie ‧ 2026-09-11

0 Like 0 留言 188 瀏覽

鐵人賽 Build on Google AI DAY 9

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

技術 Day 9 - 在 Angular 中加入 Angular Aria 支援 - 第一部分

每當我在 Angular 中建立展示（demo）時，我都沒有注意到無障礙輔助功能（accessibility），儘管這對視障人士來說是一項重要的功能。當 Ang...

Connie ‧ 2026-09-10

0 Like 0 留言 147 瀏覽

鐵人賽 Build on Google AI DAY 8

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

技術 # Day 8 - 在 Angular 中加入漸進式網頁應用程式（PWA）支援 - Part 2

Day 8 - 在 Angular 中加入漸進式網頁應用程式（PWA）支援 - Part 2 昨天，我們看到了觸發 MCP 伺服器工具並生成檔案的不同提示詞。...

Connie ‧ 2026-09-09

0 Like 0 留言 169 瀏覽

鐵人賽 Build on Google AI DAY 7

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

技術 Day 7 - 在 Angular 中加入漸進式網頁應用程式（PWA）支援 - Part 1

漸進式網頁應用程式（Progressive Web App，PWA）具有許多優勢：離線功能：Service Worker 會快取各項資產（圖示、圖片、字型等...

Connie ‧ 2026-09-08

0 Like 0 留言 140 瀏覽

鐵人賽 Build on Google AI DAY 6

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

技術 Day 6 - 自訂 Agent 規則設定檔

在配置了 ESLint 規則、Agent 技能與 MCP 伺服器之後，Gemini 的表現依然沒有完全符合我的預期。 Gemini 難以捉摸的行為在進行 AI...

Connie ‧ 2026-09-07