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

0 Like 0 留言 12 瀏覽

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

鐵人賽 AI Security DAY 5

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

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

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

rewrite ‧ 2026-09-19

0 Like 0 留言 41 瀏覽

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

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

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

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

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

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

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

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

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

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

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

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

0 Like 0 留言 134 瀏覽

鐵人賽 Build on Google AI DAY 5

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

技術 Day 5 - 在 Antigravity CLI 註冊全域 Chrome DevTool 與 Vitest MCP 伺服器 - Part 2

Chrome DevTool MCP 伺服器的設定非常簡單，但要在我的 MacOS 筆記型電腦上正常運作卻有些困難。最終，我請 AI 幫我解決了這個問題。 Ch...

Connie ‧ 2026-09-06

0 Like 0 留言 163 瀏覽

鐵人賽 Build on Google AI DAY 2

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

技術 # Day 2 - 建立包含程式碼品質開發依賴項與設定檔的全新 Angular 專案

歷史背景 Firebase AI Logic 在 2025 年以及 2026 年的大部分時間裡都不支援文字轉語音（Text-to-Speech），因此我舊的專案...

Connie ‧ 2026-09-03

0 Like 0 留言 180 瀏覽

鐵人賽 Build on Google AI DAY 1

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

技術 Day 1 - 我是如何在 2026 鐵人賽中想到這個主題的

在選擇要於 2026 鐵人賽中撰寫的主題時，我遇到了一些困難。我最終選擇了這個主題，因為在 2026 年，我使用 Antigravity CLI 和 Gemin...

Connie ‧ 2026-09-02

1 Like 0 留言 1400 瀏覽

技術在 Angular 中使用 Firebase AI Logic 與 Gemini 建構即時用戶端 TTS

在我之前發表於 Dev.to 平台的文章中，我示範了如何使用 Gemini 與 Firebase Cloud Functions 建構富有表現力的文字轉語音（...

Connie ‧ 2026-09-01

0 Like 0 留言 2123 瀏覽

技術使用 Angular、Firebase AI Logic 與 Gemini Nano 打造混合式影像分析應用程式

本教學將示範如何使用 Angular、Firebase AI Logic 與 Gemini 打造混合式影像分析應用程式。使用者只需上傳圖片、點擊按鈕，並等待 G...

Connie ‧ 2026-08-08

0 Like 0 留言 191 瀏覽

鐵人賽 AI Engineering DAY 22

買錯保險的血淚教訓：我用 Python + AI Agent 重構人生財務防禦系統系列第 22 篇

技術 Day 22 — 遊戲的終點：寫出三種 FIRE (財務自由) 的判定引擎

前情提要：昨天我們為人生模擬器建立《致富心態》的哲學觀。本日目標：今天我們要寫 Python 程式碼，為遊戲定義「過關條件」。當玩家資產達到什麼程度時，AI...

dandanisgood ‧ 2026-08-22

0 Like 0 留言 2616 瀏覽

技術使用 Antigravity CLI 建置 Firebase AI Logic 應用程式

注意：本專案已提供 Google Cloud 額度。在這篇部落格文章中，我將示範如何使用 Antigravity CLI（這是一個透過技能 (skills)...

Connie ‧ 2026-07-16

0 Like 0 留言 1809 瀏覽

技術在 Angular 中使用相依性注入 (Dependency Injection) 遷移至 Firebase Server Prompt Templates

Firebase 推出了伺服器端提示詞範本（Server Prompt Templates），以在其基礎設施中代管提示詞範本。此範本遵循 DotPrompt 格...

Connie ‧ 2026-06-16

1 Like 0 留言 3480 瀏覽

技術建立富有情感與節奏的動態音訊：Gemini 3.1 Flash TTS、Angular 與 Firebase 雲端函式

Google 在 Gemini API、Vertex AI 中的 Gemini 以及 Gemini AI Studio 中發佈了用於 AI 音訊產生的 Gemi...

Connie ‧ 2026-05-03

0 Like 0 留言 1389 瀏覽

技術使用 Angular、Veo 3.1 Lite、Firebase Cloud Functions 和 Firebase Cloud Storage 擴展影片

Google 在 Gemini API、Gemini in Vertex AI 以及 Gemini AI Studio 中發佈了用於 AI 影片生成的 Veo...

Connie ‧ 2026-04-18

1 Like 0 留言 1994 瀏覽

技術使用 Angular、Veo 3.1 與 Firebase 雲端函式建立影片生成管線

在現代網頁應用程式中，將繁重的生成式人工智慧（Generative AI）邏輯從前端卸載到後端是必要的。在我的最新專案中，我重構了一個 Angular 應用程式...

Connie ‧ 2026-02-22

0 Like 0 留言 2121 瀏覽

技術使用 Gemini 2.5 Flash TTS、Angular v21 和 Firebase 串流 AI 語音

在這篇技術深潛中，我們將探討如何將最新的 Google Gemini 模型整合到現代網頁技術堆疊中。我們使用 Gemini 3 Flash Preview 來產...

Connie ‧ 2026-02-21

0 Like 0 留言 362 瀏覽

鐵人賽 Modern Web DAY 17

30 天，讓 TypeScript 把你的 Node.js 開發再升級系列第 17 篇

技術 Day 17｜Firebase Storage 實戰：用 Node.js + multer 上傳圖片到雲端

昨天我們完成了 Firebase Storage 的環境設定：建立專案 & Bucket 下載服務金鑰設定 .env 今天就要正式進入實戰篇！...

arvinyang ‧ 2025-10-01

0 Like 0 留言 685 瀏覽

鐵人賽 Modern Web DAY 16

30 天，讓 TypeScript 把你的 Node.js 開發再升級系列第 16 篇

技術 Day 16｜Firebase Storage 初探：輕鬆搞定專案檔案上傳前置作業

在前幾天，我們的 API 主要處理「資料」的 CRUD。但在真實專案裡，除了文字資料，圖片與檔案上傳也幾乎是必備功能（例如：會員大頭貼、商品圖片、文章配圖）...

arvinyang ‧ 2025-09-30

0 Like 0 留言 265 瀏覽

鐵人賽 Modern Web DAY 12

不只是登入畫面！一起打造現代化登入系統系列第 12 篇

技術屋內安全[ 1 / 6 ]：Firebase Rules

在前幾篇，我們已經有了「房門與門鎖」的表單驗證，也做好「屋況驗收」。但如果門鎖只是裝飾，任何人都能翻窗進來，那這棟房子還是非常危險。這時候，就需要 Fi...

阿杰 ‧ 2025-09-26 ‧團隊夢幻公牛

0 Like 0 留言 661 瀏覽

鐵人賽 Modern Web DAY 8

不只是登入畫面！一起打造現代化登入系統系列第 8 篇

技術房門與門鎖[ 5 / 6 ]：OAuth 實戰 — 用 Firebase 實作 Google 登入

在上一篇，我們完成了登入表單的驗證，算是裝好了「基本門鎖」。但如果你常用現代網站或 App，應該會發現：許多平台除了傳統帳號密碼之外，還提供了「社群登入」選項。...

阿杰 ‧ 2025-09-22 ‧團隊夢幻公牛