Firebase Studio AI編程課程

上門編程教學課程內容

課程簡介

本課程專注於 Firebase Studio 這款 Google 推出的雲端代理開發環境，讓學員在三小時內透過自然語言、多模態提示（文字、圖片、草圖），快速生成包含前端、後端、Firebase 服務整合的完整 AI 應用原型。Firebase Studio 整合 Gemini AI、App Prototyping Agent、Cloud Firestore、Firebase Authentication 與一鍵部署至 Firebase Hosting，支援 Next.js、React、Flutter、多語言後端（Go、Node.js、Python），提供內建模擬器與即時預覽。課程強調實作導向，學員將從需求描述到公開上線應用，體驗「瀏覽器內全棧開發」的革新性工作流，無需本地環境配置。

課程目標

1. 掌握 Firebase Studio 的 App Prototyping Agent 與多模態提示技巧。

2. 能生成整合 Firebase 服務的全棧 AI 應用（認證、資料庫、託管）。

3. 學習 Gemini AI 程式碼輔助、內建模擬器與 Nix 自訂環境。

4. 完成生產級 Web 或行動應用原型並一鍵部署上線。

5. 建立「雲端 AI 全棧開發」工作模式，實現跨裝置協作開發。

適合對象

• 前端工程師、行動開發者或全棧開發者。

• 非技術創業者，希望快速驗證 AI 應用概念。

• Firebase 使用者，欲體驗雲端代理式開發新範式。

• 跨平台團隊，需要統一雲端開發環境協作。

課程時長與授課方式

• 全長 3 小時。

• 理論講解約 25%，實作操作約 75%。

• 全程使用 Firebase Studio 網頁平台（純瀏覽器，Google 帳號登入）。

• 教學形式：代理示範、個人實作、即時部署與監控體驗。

課程大綱

第一部分：Firebase Studio 環境與代理原型（約 40 分鐘）

• Firebase Studio 架構：雲端 VM + Gemini AI + Firebase 生態 + Project IDX。

• 介面導覽：工作區管理、App Prototyping Agent、Gemini 聊天、模擬器面板。

• 多模態提示：自然語言、Figma 匯入、草圖上傳生成應用原型。

• 實作練習：

  • 使用「建立 AI 聊天助手，支援 Google 登入與對話記錄」提示，體驗 90 秒生成 Next.js + Firestore 完整應用。​

第二部分：全棧 AI 應用對話式開發（約 70 分鐘）

• 代理迭代：對話修改原型（「加入檔案上傳」、「行動端最佳化」）。

• Firebase 整合：自動配置 Authentication、Cloud Functions、Hosting。

• Gemini 輔助：即時程式碼補全、錯誤修正、單元測試生成。

• 實作練習（個人任務）：

  • 打造「AI 圖片生成器」（圖片提示 → Stable Diffusion → 圖庫管理 + 分享）。

第三部分：進階自訂與多平台部署（約 50 分鐘）

• Nix 自訂：環境套件、語言版本、IDE 設定完全客製化。

• 多框架支援：Next.js、Flutter、Python Flask、Go 後端切換。

• 內建模擬器：Firebase Local Emulator + Android 即時預覽。

• 實作練習：

  • 將 Web 應用轉換為 Flutter 行動版，測試跨平台一致性。

第四部分：生產部署與監控（約 20 分鐘）

• 一鍵上線：Firebase App Hosting、Cloud Build、全球 CDN 自動配置。

• 成果展示：學員分享上線應用，比較代理生成與手動開發效率。

• 監控分析：內建效能監控、錯誤追蹤、A/B 測試功能。

• 延伸應用：RAG 搜尋、即時聊天、多租戶 SaaS。

課程特色

• 純雲端代理：無本地安裝，任何裝置隨時開發，團隊即時協作。​

• 多模態生成：文字、Figma、草圖皆可生成生產級應用原型。

• Firebase 原生：Authentication、Firestore、Functions 零配置整合。