實體AI教學課程內容

Firebase Studio AI 編程課程：兩小時精華班大綱

 

課程簡介

「Firebase Studio AI 編程課程」是專為初學者與中階開發者設計的 2 小時實戰精華班，聚焦 Google Firebase Studio ——這款 AI 驅動的全棧應用開發平台。Firebase Studio 整合 Gemini 3 Pro 等頂尖模型，提供自然語言應用生成、即時預覽、程式碼編輯與一鍵部署，讓使用者從想法到上線只需數分鐘。本課程透過動手操作，帶領學員從零建構完整 Web App（如聊天室、待辦清單、電商原型），掌握 AI 輔助編程的核心技巧，提升開發效率 10 倍以上。

 

課程目標：

• 理解 Firebase Studio 的 AI 生成邏輯與全棧整合優勢。

• 熟練使用自然語言提示建構前端、後端與資料庫。

• 完成 3–4 個實戰專案，包含部署與迭代優化。

• 建立個人 AI 開發工作流，適用於個人專案與團隊協作。

適合對象：

• 前端／全棧開發新手（JavaScript 基礎即可）。

• 產品經理與設計師（想快速原型驗證）。

• 中階開發者（探索 AI 加速大型應用）。

• 創業團隊（MVP 快速上線）。
  （無需後端經驗，僅需瀏覽器與 Google 帳號。）

課程長度： 120 分鐘。
所需工具： Firebase Studio 免費帳號（課程含註冊指引）。

---

 

課程大綱

第一模塊：Firebase Studio 概覽與環境準備（15 分鐘）

• 平台介紹：AI 全棧開發革命，整合 Gemini 3 Pro、Firebase 後端服務（Auth、Firestore、Hosting）。

• 與傳統開發比較：從程式碼到提示詞的範式轉移。

• 介面導覽：聊天視窗、即時預覽畫布、檔案總管、部署面板。
  互動實作： 全員註冊帳號，生成第一個「Hello World」應用，體驗一鍵預覽。

第二模塊：自然語言應用生成基礎（20 分鐘）

• 提示工程原則：明確需求、邊界條件、UI 風格、後端邏輯。

• 簡單應用示範：

  • 輸入「建立計時器計數器，含開始/暫停/重置按鈕，Material Design 風格」。

  • AI 自動生成 React 前端 + Firestore 儲存 + 即時同步。

• 程式碼檢視與微調：理解生成邏輯，手動調整樣式與功能。
  實作練習： 學員獨立生成「簡單計算器 App」，分享預覽連結。

第三模塊：進階全棧應用建構（30 分鐘）

• 整合 Firebase 服務：

  • 使用者認證（Google、Email 登入）。

  • 即時資料庫（Firestore 查詢、訂閱更新）。

  • 儲存服務（上傳圖片、檔案管理）。

• 中階專案：

  • 「即時聊天室」：多房間、多使用者、訊息持久化。

  • AI 自動生成 WebSocket 邏輯 + UI 動畫。
    實作練習：

  • 建構「待辦事項清單」，含登入、即時同步與刪除確認。
    休息： 5 分鐘。

第四模塊：AI 迭代優化與除錯（25 分鐘）

• 迭代流程：AI 診斷錯誤、建議修復、一鍵應用變更。

• 效能調校：載入動畫、響應式設計、PWA 轉換。

• 進階提示技巧：

  • 「添加深色模式切換，支援系統偏好」。

  • 「優化行動版導航，加入底部 Tab Bar」。
    實作練習：

  • 優化先前聊天室：新增檔案上傳、通知與離線支援。

第五模塊：部署與進階整合（20 分鐘）

• 一鍵部署：Firebase Hosting、Custom Domain 綁定。

• 後端擴展：Cloud Functions 觸發器、通知服務。

• 外部整合：Stripe 付款、Google Maps、第三方 API。
  實作練習：

  • 部署待辦 App，綁定自訂網域，測試多裝置同步。

第六模塊：專業應用與工作流最佳化（10 分鐘）

• 企業場景：團隊協作、多專案管理、版本控制。

• 原型驗證：PMF 測試、A/B 實驗快速迭代。

• 自訂範本：儲存常用提示，建立個人開發庫。
  互動： 學員分享專案需求，講師示範客製提示。

第七模塊：總結、挑戰與資源（5 分鐘）

• 課程回顧：從提示到部署的全流程掌握。