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

0 Like 0 留言 31 瀏覽

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

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

鐵人賽 Build on Google AI DAY 4

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

技術 Day 4 - 在 Antigravity CLI 註冊全域 MCP 伺服器 - Part 1

我在 Antigravity CLI 中註冊了 Angular、Firebase、Stitch 和 Chrome DevTool MCP 伺服器。這對我進行全端...

Connie ‧ 2026-09-05

0 Like 0 留言 114 瀏覽

鐵人賽 Build on Google AI DAY 3

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

技術 Day 3 - 新增關鍵的 AI 代理技能以打造成功的 Angular 與 Firebase AI Logic 專案

在開發全新的 Angular 與 Firebase AI Logic 專案時，我一直在使用這些 AI 代理技能（AI Agent Skills）。這些技能針對軟...

Connie ‧ 2026-09-04

0 Like 0 留言 124 瀏覽

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

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

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

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

Connie ‧ 2026-09-01

2 Like 0 留言 1033 瀏覽

技術完全離線：使用 LiteRT 與 Gemma 4 建置隱私優先的個人理財助理

想像一下，您擁有一位個人財務規劃師，能夠分析您敏感的交易歷史記錄、標記異常支出，並提供預算最佳化建議，而這一切都 100% 離線運行，直接在您的網頁瀏覽器中進行...

Connie ‧ 2026-08-27

0 Like 0 留言 1448 瀏覽

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

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

Connie ‧ 2026-08-08

0 Like 0 留言 2043 瀏覽

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

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

Connie ‧ 2026-07-16

0 Like 0 留言 1311 瀏覽

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

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

Connie ‧ 2026-06-16

1 Like 0 留言 3439 瀏覽

技術建立富有情感與節奏的動態音訊：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 留言 1372 瀏覽

技術使用 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 留言 1991 瀏覽

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

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

Connie ‧ 2026-02-22

0 Like 0 留言 2095 瀏覽

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

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

Connie ‧ 2026-02-21

2 Like 0 留言 1735 瀏覽

技術 Lazy-load 翻譯資源：怎麼設計路由層、元件層，以及載入快取

後台系統在做 i18n 時，常見的問題是在處理翻譯資源怎麼下載的問題。一開始專案小，大家通常會把所有翻譯塞成一包，或至少塞成少數幾包，先能跑再說。但系統一長大，...

peace&love ‧ 2026-01-24

1 Like 0 留言 2290 瀏覽

技術 Angular 後台系統 i18n 套件比較：Angular 內建 i18n vs ngx-translate vs ngx-atomic-i18n

寫這篇文章是想推薦我做的i18n套件，藉由比較 Angular 最多人用的兩款套件，解釋為什麼做這款工具的原由。做後台系統（admin / dashbo...

peace&love ‧ 2026-01-08

10 Like 0 留言 28975 瀏覽

徵才 [徵才]Angular 講師(高雄/台南)

万十科技股份有限公司招募講師https://onceagain.tw/ 1.上班時間:09:00~18:002.地點:高雄(高雄軟體園區)台南(TTA新創園區)...

once.code ‧ 2025-10-02

0 Like 0 留言 271 瀏覽

鐵人賽 Modern Web DAY 29

Angular 新手練功日誌：從零到職場冒險系列第 29 篇

技術 Day 29 - Animations

今天會體驗一下新動畫 API animate.enter、animate.leave，讓我們能更簡單地為元件添加進場動畫效果。 Angular 作為主流前端框架...

johnson3669 ‧ 2025-09-29

0 Like 0 留言 252 瀏覽

鐵人賽 Modern Web DAY 28

Angular 新手練功日誌：從零到職場冒險系列第 28 篇

技術 Day 28 - Testing

今天要介紹 Angular 的單元測試，單元測試的目的是將程式碼切割成小單元，並針對每個單元進行測試，以確保它們的功能正確且符合預期，不會影響到其他部分。測試...

johnson3669 ‧ 2025-09-28

0 Like 0 留言 264 瀏覽

鐵人賽 Modern Web DAY 27

Angular 新手練功日誌：從零到職場冒險系列第 27 篇

技術 Day 27 - Routing （二）

今天會介紹一些昨天沒提到的路由功能，像是路由設定屬性、路由守衛以及延遲加載路由等功能路由設定屬性 **：通配符路由，用來匹配所有未定義的路由，通常用於顯示...

johnson3669 ‧ 2025-09-27

0 Like 0 留言 284 瀏覽

鐵人賽 Modern Web DAY 26

Angular 新手練功日誌：從零到職場冒險系列第 26 篇

技術 Day 26 - Routing （一）

Angular 預設是一個單頁應用程式（SPA），為了實現不同頁面內容的切換，提供了強大的路由功能。透過路由，使用者可以根據網址（URL）的變化，動態顯示不同的...

johnson3669 ‧ 2025-09-26

0 Like 0 留言 281 瀏覽

鐵人賽 Modern Web DAY 25

Angular 新手練功日誌：從零到職場冒險系列第 25 篇

技術 Day 25 - HTTP Client

在處理動態資料時，經常需要與後端伺服器進行溝通，這通常透過 HTTP 請求來完成。今天要介紹如何在 Angular 中實現這一功能。 HttpClient Ht...

johnson3669 ‧ 2025-09-25

0 Like 0 留言 271 瀏覽

鐵人賽 Modern Web DAY 24

Angular 新手練功日誌：從零到職場冒險系列第 24 篇

技術 Day 24 - RxJs

RxJs 是一個用於處理非同步資料流的函式庫，在 Angular 中被廣泛使用，特別是在處理 HTTP 請求、事件和其他非同步操作時。今天僅會介紹一些 RxJ...

johnson3669 ‧ 2025-09-24

0 Like 0 留言 227 瀏覽

鐵人賽 Modern Web DAY 23

Angular 新手練功日誌：從零到職場冒險系列第 23 篇

技術 Day 23 - 回應式表單

今天介紹回應式表單 Reactive Forms ，它不在模板中定義表單，而是在元件類別中使用 FormControl、FormGroup 等來建立表單，適合複...

johnson3669 ‧ 2025-09-23

0 Like 0 留言 285 瀏覽

鐵人賽 Modern Web DAY 22

Angular 新手練功日誌：從零到職場冒險系列第 22 篇

技術 Day 22 - 範本驅動型表單

目前在 Angular 中表單處理方式，主要有兩種：範本驅動型表單 (Template-driven Forms) 反應式表單 (Reactive Form...

johnson3669 ‧ 2025-09-22

0 Like 0 留言 244 瀏覽

鐵人賽 Modern Web DAY 21

Angular 新手練功日誌：從零到職場冒險系列第 21 篇

技術 Day 21 - Pipes

管道 Pipes 是 Angular 模板表達式中的一個特殊運算符，使用 | 來轉換數據在畫面上顯示的格式官方有再提供 @angular/common 許多內建...

johnson3669 ‧ 2025-09-21

0 Like 0 留言 247 瀏覽

鐵人賽 Modern Web DAY 20

Angular 新手練功日誌：從零到職場冒險系列第 20 篇

技術 Day 20 - 指令

指令是指在 Angular 應用程式中，可以改變元素的設定、樣式及添加附加行為的類別，所以我們前面提到的元件本質上也是一種指令，只是帶有模板和樣式。而不含模板的...

johnson3669 ‧ 2025-09-20

0 Like 0 留言 314 瀏覽

鐵人賽 Modern Web DAY 19

Angular 新手練功日誌：從零到職場冒險系列第 19 篇

技術 Day 19 - 元件生命週期

今天會介紹元件的生命週期，從建立到銷毀之間發生的一系列步驟。每個步驟代表 Angular 渲染元件並隨時間檢查元件更新過程的不同部分。若需要在特定時間點執行邏...

johnson3669 ‧ 2025-09-19

0 Like 0 留言 205 瀏覽

鐵人賽 Modern Web DAY 18

Angular 新手練功日誌：從零到職場冒險系列第 18 篇

技術 Day 18 - Service

在前面篇章中，有介紹 input/output 與父子元件溝通的方式，但在實際應用中，會遇到需要多個元件共享資料或邏輯的情況，而一但需要跨越兩個元件以上，inp...

johnson3669 ‧ 2025-09-18