Vibe Coding 實戰課 — Stage 2 · 串 AI
三大免費平台 + 用量限制 + 做出你的 AI 工具
按 → 或空白鍵開始
這一堂的主線
認識免費 API 生態系 → 親手申請 → 串接工具 → 撞 RPM → 完成期末成品
拿到 API Key → 用 IDE 串接成工具 → 理解 RPM 限制 → Stage 2 期末成品上線
第一個免費 API，LPU 極速推論
Google Apps Script 呼叫 API，做出第一個 AI 工具
從一家餐廳 → 認識整個美食街
ROUND 1 · 0:00–0:20
不是只有一家餐廳，每家的菜色和份量不同
自研硬體，回應速度遠快於 GPU 方案
M1-4 已經用過
換 endpoint 就能切換
學一套用到底
註冊即用
免費額度充足
主力模型：llama-3.3-70b（日常）/ qwen3-32b（寫程式）/ llama-3.1-8b（大量任務）
能一次吃進整本書
適合長文件分析
Flash 快速 / Pro 最強推理
兩種模型自由切換
不需另外註冊
不需綁信用卡
直接呼叫走 GCP 需 Billing → 用 UrlFetchApp 呼叫 AI Studio endpoint 就免費
一個帳號
用遍所有模型
換 model name 就能切
不用學不同 SDK
Groq 撞額度時
切到 OpenRouter 繼續
| 平台 | 主力模型 | RPM | RPD | 最佳場景 |
|---|---|---|---|---|
| Groq | llama-3.3-70b | 30 | 1,000 | 日常聊天、快速回應 |
| Groq | qwen3-32b / kimi-k2 | 60 | 1,000 | 寫程式、強推理 |
| Groq | llama-3.1-8b | 30 | 14,400 | 大量簡單任務 |
| AI Studio | gemini-2.5-flash | 10 | 250 | 長文本分析 (1M ctx) |
| AI Studio | gemini-2.5-pro | 5 | 100 | 最強推理 |
| OpenRouter | 28 個免費模型 | 20 | 50 | 備援、多模型測試 |
開課前 1 週重新查驗 — Groq 額度每天太平洋午夜重置
免費 API 隨時可能調整額度
有備援才不會被卡住
觀察回應速度差異
模型不同，風格與深度不同
哪個最快、哪個最詳細、哪個格式最好
三大平台各有專長
Groq 主力 / Gemini 長文本 / OpenRouter 備援
都不需要信用卡
ROUND 2 · 0:20–0:45
主力 + 備援，不要只靠一家
登入你的 Google 帳號
左側選單 → Get API Key → Create
存到 .env 檔案 → 同時存到 GitHub Secrets
拿到 GEMINI_API_KEY 且存入 .env 和 GitHub Secrets
註冊帳號（可用 Google / GitHub 登入）
Keys 頁面 → Create Key
Playground 裡篩選 Free 模型 → 測試對話
直接貼在程式碼裡
const key = "AIza..."
push 到 GitHub → 全世界都看得到
放在 .env + .gitignore
GEMINI_KEY=AIza... ← .env .env ← .gitignore
回扣 M2-2 安全 Checklist
# M1-4 已申請 GROQ_API_KEY=gsk_xxxxxxxxxx # 今天新申請 GEMINI_API_KEY=AIzaxxxxxxxxxx OPENROUTER_API_KEY=sk-or-xxxxxxxxxx
.env .env.*
同步到 GitHub Secrets — M3-4 的 GitHub Actions 會直接從 Secrets 讀取
OpenAI 兼容格式
換 endpoint 就能切
學一套用到底
Google 自有格式
不同但不難
AI 幫你處理轉換
告訴 AI「用 Gemini API 格式呼叫」→ AI 自動產生正確的 fetch 程式碼
M1-4 已申請，存在 .env 中
AI Studio 或 OpenRouter，存到 .env + GitHub Secrets
確認 Key 不會被 push 到 GitHub
你現在有兩個（或三個）免費 API Key
都不需信用卡
Key 安全存放在 .env + GitHub Secrets
ROUND 3 · 0:45–1:10
跟 AI 說你要什麼，API 串接它來處理
貼入長文
自動產出重點摘要
一鍵翻譯多國語言
保留格式
上傳文件
AI 幫你找重點
每天生成勵志句
搭配精美排版
幫我做一個 AI 摘要器 用 Gemini API Key 從 .env 讀取 前端用 HTML + CSS 後端用 JavaScript fetch 使用者貼入文字 → 按按鈕 → 顯示摘要
AI 會幫你做：建前端介面 + 寫 API 呼叫邏輯 + 錯誤處理
在 Google Apps Script 裡寫
要手動處理格式
部署步驟多
在 IDE 裡跟 AI 協作
AI 幫你處理一切
更快、更靈活
const response = await fetch(ENDPOINT, {
method: "POST",
headers: {
"Authorization": `Bearer ${API_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
model: "模型名稱",
messages: [{ role: "user", content: "你的問題" }]
})
})
你不需要背 — AI 會幫你寫
但你要看得懂 endpoint / model / messages 三個關鍵
| 平台 | Endpoint | 格式 |
|---|---|---|
| Groq | api.groq.com/openai/v1/chat/completions | OpenAI |
| AI Studio | generativelanguage.googleapis.com/v1beta | |
| OpenRouter | openrouter.ai/api/v1/chat/completions | OpenAI |
Groq 和 OpenRouter 格式相同 — 換 endpoint + model name 就能切
摘要器 / 翻譯 / 文件分析 / 每日金句
指定用哪個 API + Key 從 .env 讀取
至少成功呼叫一次 API 拿到回應
瀏覽器直接呼叫 API 被擋 → 用後端 proxy 或 serverless function
Key 錯誤或過期 → 重新檢查 .env 裡的值
不同 API 回傳結構不同 → 用 console.log 看完整回應
用 IDE + AI 完成了一個真正能用的工具
前端 + API 串接 + 錯誤處理
這就是 Vibe Coding 的核心流程
ROUND 4 · 1:10–1:30
免費不是無限 — 做 API 專案前先算用量
RPM 是最容易撞到的牆 — Groq 30 RPM = 每 2 秒才能呼叫一次
Gemini Pro 最強但 RPM 最少（5 RPM）→ 不適合批量任務
連續呼叫 → 429 被擋
30 個任務只完成 15 個
慢但穩 → 全部完成
30 個任務 × 2 秒 = 1 分鐘搞定
for (const item of items) {
await callAPI(item)
await sleep(2000) // 等 2 秒再呼叫下一個
}
付費 API 沒有設 budget cap
bug 導致程式不斷呼叫 API
免費 API 撞 RPM 只是被擋，付費 API 撞的是錢包
你的工具一天會被用幾次
Groq 1,000 RPD / AI Studio 250 RPD / OpenRouter 50 RPD
Groq 用完切 OpenRouter → 再切 AI Studio
每個 API 都有看不見的天花板
做 API 專案前先算用量
撞牆不可怕 — 可怕的是不知道牆在哪裡
帶走：RPM / RPD / Token Limit 三個維度 + 延遲策略 + 用量規劃意識
ROUND 5 · 1:30–1:55
完善工具 + 部署上線 + 互測回饋
Round 3 的工具能正常運作，不會 crash
.env 存 Key + .gitignore 排除 → M2-2 安全 Checklist
push 到 GitHub → GitHub Pages 部署
429 時顯示友善訊息、不要整個頁面爆掉
呼叫 API 時顯示「處理中...」
429 → 「請稍後再試」/ 401 → 「API Key 有誤」
排版美化、手機版適配、操作說明
免費 Key + 個人課堂用 OK
正式專案要怎麼保護 Key，Stage 3 會教進階做法
免費 Key + 個人使用
前端直接呼叫可以接受
被盜用也不會花錢
付費 Key + 公開使用
必須走後端 proxy
Stage 3 會教進階做法
貼到群組讓大家看到
實際使用、找 bug、觀察差異
什麼好用、什麼卡住、什麼可以改
API 有回應嗎
結果正確嗎
錯誤有處理嗎
操作直覺嗎
有 Loading 提示嗎
手機能用嗎
打開 DevTools
看得到 Key 嗎
.gitignore 有設嗎
一個真正能用的 AI 工具
部署在 GitHub Pages 上
任何人都能打開使用
ROUND 6 · 1:55–2:05
四個模組、四層能力
新概念、新工具
實際完成的成品
遇到的困難
解題策略
延伸想法
Stage 3 目標
不只學了什麼，是想法怎麼變了
從「AI 是訂閱服務」→ AI 是可調度的基礎資源
從「跟 AI 聊天產出作品」到「用 API 串接做出自己的 AI 工具」
這是從使用者到開發者的關鍵跨越
| # | 常見問題 | 學到什麼 |
|---|---|---|
| 1 | API Key 直接貼程式碼 | 安全 Checklist 復用 |
| 2 | GAS 呼叫 AI Studio 需 Billing | 用 UrlFetchApp 繞過 |
| 3 | 撞 RPM 429 | Rate Limiting |
| 4 | 免費 ≠ 無限 | 用量規劃 |
| 5 | 批量任務超時 | 延遲策略 |
NEXT STAGE
IDE Extension → CLI → MCP → Skills
從 Extension 升級到 CLI
更快更強更自動
AI 接上更多工具
能力無限擴展
AI 永遠記住你教的技能
不用每次重說
你今天申請的 API Key 已存在 GitHub Secrets 裡
M3-4 的 GitHub Actions 會直接用
安裝 CLI 環境
MCP 基礎概念 + Skills 初探
CLI 操作練習 + 進階設定
Stage 3 課前準備必須完成 → 上課才能直接動手
M2-4 完成
從使用者到開發者的關鍵跨越
Stage 2 完成 — Stage 3 見