Vibe Coding — Stage 2 · 上線網頁
M2-4 · 申請 API

Vibe Coding 實戰課 — Stage 2 · 上線網頁

申請 API
串接應用場景

讓你的網頁從靜態變成能跟使用者對話的 AI 工具

M2-4 3 小時 6 輪循環 Stage 2 結業

按 → 或空白鍵開始

M2-4 ・ 3 小時

本模組你會做出什麼

從串一個 API 到應用場景 到體驗 agent 模式

LV1
my-translator.html
輸入中文
翻譯
英文輸出
Powered by Groq

串一個 API 做小工具

LV2 ・ 必做主線
alan-chen.github.io/cs-helper
AI 客服分流
提問 + 自動回應
客戶提問 例 怎麼退貨
分類 售後服務
建議回覆 退貨流程連結 + 預估 3 天
轉售後
自動回覆

串到既有網站 真實應用場景

LV3 ・ 完成後加做
agy ・ agent mode
AGENT
▾ Task list
✓ 計畫
✓ 改檔
✓ 測試
⏳ 回報
Agent Log
✓ Step 1 規劃 4 步
✓ Step 2 改 index.html
✓ Step 3 跑測試 通過
⏳ Step 4 寫摘要回報
▸ Agent
我計畫好 4 步驟✓ 自動執行中

體驗 agent 自己跑工作流

你的網頁從靜態變成能回應使用者 從工具變成系統 從系統變成 agent

六輪循環 逐層遞進

Round 1三大免費 API
Round 2申請 + 安全
Round 3LV1 串 API
Round 4LV2 應用場景
Round 5LV3 agent 預埋
Round 6Stage 2 結業
每一輪的節奏

操作指令 → 補強版參考 → 操作計時 → 分享觀察 → 小結反思

今天 3 小時的路線

0:00 – 0:30
Round 1
API 是什麼三大免費平台 額度比較
0:30 – 1:00
Round 2
申請 + 安全Google AI Studio + .env 標準流程
1:00 – 1:30
Round 3
LV1 串 API會議摘要器 GitHub Pages + GAS proxy 三層架構
1:30 – 2:00
Round 4
LV2 應用場景客服分流 / PDF 摘要器
2:00 – 2:30
Round 5
LV3 agent 預埋AI 自己列計畫 改 測 回報
2:30 – 3:00
Round 6
Stage 2 結業四模組回顧 Stage 3 預告

ROUND 1 · 0:00–0:30

API 是什麼
三大平台比較

免費額度玩到爽 不用綁信用卡

API 是程式跟程式對話的方式

API 是什麼字

API 是 Application Programming Interface 應用程式介面
不用懂英文 就理解成 你的網頁打電話給 AI 服務 用 API 講話

你的網頁
把問題包好
→
AI 平台 API
處理 + 回答
→
你的網頁
顯示答案
關鍵差別

不用裝 AI 模型在你電腦上　你的網頁把問題丟給雲端 AI 服務　收到答案再顯示給使用者

三個你可以免費用的 API 平台

Groq
主力日常用
30 RPM
每分鐘 30 次 不限總量
速度最快 LPU 晶片　llama qwen 多模型可選　M1-4 用過你已熟
Google AI Studio
長文本專家
15 RPM
每天 1500 次
Gemini 模型 1M context 適合處理長 PDF 或文件
OpenRouter
備援多模型
20 RPM
每天 50 次
一個 API 通 28 個免費模型 包含 Claude DeepSeek 等大廠

RPM 是 Request Per Minute 每分鐘最多打幾次　超過會被擋　今天用 Google AI Studio 因為它跟 agy 整合最好

看老師示範 同一題問三家

你不用申請　看老師用同一題
問 Groq / Gemini / OpenRouter 比答案差別

老師示範用的網站　學員 R3 會自己做一個
aipath.cooperation.tw/vibe-coding/three-api-compare/
點開可即時輸入同一題 問三家 比回應風格 速度 字數　每家可挑不同免費模型試
老師會示範的事

A. 同一個問題 例如 用 50 字解釋什麼是 vibe coding
B. 三家平台各跑一次 看回應風格 速度 字數差別
C. 老師解釋為什麼這場景適合用哪家

怎麼挑 API 平台

要快

客服回覆 即時翻譯 聊天機器人　選 Groq

要看長文件

讀 PDF 整理報告 分析論文　選 Google AI Studio

要多家比較

同問題試 Claude Gemini DeepSeek　選 OpenRouter

今天主推 Google AI Studio

原因 跟 agy 同一家 整合好 不用額外設定
之後想用其他兩家 流程一樣 都是申請 Key 貼到網頁

分享與觀察

1
你看完三家示範感覺哪家最適合你

講一句話 為什麼

2
三個同學講一輪

聽聽不同產業挑的 API 不同

3
準備好申請 Google AI Studio Key

R2 開始實作

Round 1 小結

免費 API 額度比你想像的大方
夠你做 100 個工具不撞牆
這一輪你拿到

API 是什麼的概念 ・ 三大平台額度認知 ・ 場景跟平台對應 ・ 看過老師示範

ROUND 2 · 0:30–1:00

申請 + 安全
.env 標準流程

拿 API Key 千萬不要 push 上 GitHub

操作指令

打開 aistudio.google.com
登入 Gmail 點 Get API Key

三步驟

1. aistudio.google.com 用 Gmail 登入
2. 左側選單 Get API key
3. Create API key 選 Default project 複製 Key 字串

API Key 介面長這樣

aistudio.google.com/apikey
Google AI Studio · API Keys
My first API key
Active
AIzaSyAbc123Def456Ghi789Jkl0MnoPqRstUvWxYz
Copy
Delete
重要 這個 Key 千萬不要 push 到 GitHub 不要貼到 LINE 群組 別人拿到就會用你的額度

API Key 安全 標準流程

建一個 .env 檔
→
把 Key 放裡面
→
.gitignore 排除 .env
不會 push 上 GitHub
為什麼一定要這樣做

Key 寫在程式碼裡 一旦 push 上 Public GitHub 全世界都看得到
機器人會掃 GitHub 拿你的 Key 去用 你的免費額度被燒光是小事 用量超過收費才慘

這就是 M2-3 token 安全的延伸

跟 SSH token 一樣 任何鑰匙都要放 .env 別 push　GitHub Secrets 還能設定更安全的儲存 R5 會提

.env + .gitignore 怎麼設

agy ・ meeting-summary/
EXPLORER
▾ meeting-summary
.env
.gitignore
index.html
README.md
.env
.gitignore
1 # 不要 push 上 GitHub 的檔案
2 .env
3 node_modules/
4 .DS_Store
▸ Chat
幫我建 .env 跟 .gitignore 把 API Key 安全管理
已建立✓ .env 含 GEMINI_KEY✓ .gitignore 排除 .env

一句話請 AI 幫你建　它會在 .env 寫 GEMINI_API_KEY=你的 Key　在 .gitignore 加 .env 那行

操作計時

20分鐘
含申請 + 設定 .env
完成目標

你有一支 Gemini API Key
已存在 .env 檔 .gitignore 排除了它
準備好 R3 開始串

預期會踩坑

API Key 三種常見災難

Key 寫進 index.html
push 上去全世界看得到
解 立刻 Revoke 重新產 移到 .env
.gitignore 沒擋住
.gitignore 寫錯 .env 還是被 push
解 確認 .gitignore 第一行就是 .env
Key 複製漏字
少了一個字 API 呼叫失敗
解 cmd+A 全選複製 不要拖選

分享與觀察

1
大家都拿到 Key 了嗎

沒拿到的舉手 老師或同學幫看

2
確認你的 .gitignore

打開檔案 確認第一行是 .env

3
互相提醒安全

不要截圖貼 .env 內容到群組

還記得 M2-1 故意 commit 的假 Key 嗎

現在你會 .env 機制了 回頭把那段假 Key 清掉

M2-1 故意留的假 Key
→
IDE 自動掃
→
清掉 + commit
repo 變乾淨
這次怎麼做

A. 跟 agy 說 幫我掃 my-first-page 有沒有 API Key 或 Token 字串
B. AI 會用 grep 掃整個 repo 找 sk- ghp_ AIza 開頭的字串
C. 它會找到 M2-1 你故意留的那段 提示你清掉
D. 確認後讓 AI commit 訊息寫 移除誤留的假 Key push

把安全檢查變成可重用的 skill

為什麼要建 skill

掃 API Key 殘留是你以後每個專案都要做的事
每次手寫 prompt 麻煩
把它變 skill 之後一句話就跑

之後怎麼用

任何新專案 任何時候
跟 agy 說 跑 check-secrets
10 秒掃完整個 repo 告訴你有沒有殘留
這個 skill 是你帶得走的安全資產

跟 agy 說 幫我把這個檢查建成 skill
幫我把 API Key 安全檢查建成 agy skill

skill 名稱 check-secrets
觸發 我說 檢查 secret / 掃 API Key / 安全檢查

做的事
1. grep 整個 repo 找 sk- ghp_ AIza ghs_ xoxb-
2. 找到的位置列出來
3. 問我要不要清 還是真的有用要保留
4. 確認後改檔 + commit + push
5. 最後提醒我 把真實 Key 放到 .env

Round 2 小結

免費的 API 不代表能隨便用
把 Key 當你的銀行密碼 保管好
這一輪你拿到

Gemini API Key ・ .env 安全儲存 ・ .gitignore 排除設定 ・ check-secrets skill 可重用

ROUND 3 · 1:00–1:30

LV1
會議摘要器

逐字稿丟進來 自動產出結論 + email 通知

三層架構 GitHub Pages + GAS proxy + Gemini

前端 GitHub Pages　後端 GAS Web App 帶 Key　學員 M1 已會 GAS 直接接上

使用者瀏覽器
→
GitHub Pages
純前端 不藏 Key
→
GAS proxy
Script Properties 存 Key
→
Gemini API
M2-3 你已學過

SSH key

IDE → GitHub
一次 OAuth 之後 git push 全自動

M2-4 R3 你會學

clasp

IDE → GAS
一次 OAuth 之後 clasp push 全自動

操作指令 兩個 prompt 變體自選

便利 vs 安全 你選一個體驗

變體 A 便利 Key 寫進 prompt
複製貼上
做會議摘要器
前端 index.html 用 SSH 登入放 GitHub Pages
後端用 clasp 幫我設好 GAS 存 GEMINI_KEY
key: AIzaSy你的 Key 整段貼這
保護好 Key 避免上傳洩漏
完成兩個部署 給我兩個網址
完成後告訴我去哪裡確認 Key
便利但有風險

agy 一次搞定 Key 自動填　但 Key 會出現在 chat 對話紀錄

變體 B 安全 推薦 自己貼 Key
複製貼上
做會議摘要器
前端 index.html 用 SSH 登入放 GitHub Pages
後端用 clasp 幫我設好 GAS 存 GEMINI_KEY
保護好 Key 避免上傳洩漏
完成兩個部署 給我兩個網址
完成後告訴我去哪裡放 Key
多一步手動 但 Key 從來不在 chat 出現

agy 部署完 引導你去 GAS UI 自己貼 Key 進 Script Properties

老師示範用的完成範例

用同樣 prompt 跑出來的真實作品 學員 R3 會自己做一個

前端 GitHub Pages
已上線
cooperation.tw/meeting-summarizer/
點開貼一段會議逐字稿 看 AI 產出結論 + Action items + email 草稿
後端 GAS Web App
需一次手動授權
script.google.com/macros/s/AKfycby.../exec
前端 fetch 這個 endpoint　帶逐字稿 → GAS 帶 GEMINI_KEY 呼叫 Gemini → 回傳結論
老師示範流程

點前端網址 → 貼一段會議逐字稿 → 按產出摘要 → 學員看到三層架構真實跑起來的樣子
等下你自己用 R3 兩變體 prompt 也能做出同款

後端第一次點開會看到 Google 授權頁

GAS Web App 第一次跑會要求一次手動授權　Google 安全沙盒要求 這不是 bug 是設計
老師示範時按一次同意 之後學員存取就不會再跳了

agy 跑變體 B 的完整流程

agy ・ meeting-summary/
AGENT TASKS
✓ clasp login
✓ clasp create gas
✓ 產 index.html
✓ 產 Code.gs
✓ clasp push GAS
✓ git push Pages
⏸ 換你貼 Key
Agent Log
[1] ✓ clasp 連 Google OAuth 完成
[2] ✓ GAS 新專案 meeting-summary-be 已建
[3] ✓ 產 index.html 前端 + Code.gs 後端
[4] ✓ Code.gs 讀 PropertiesService.getScriptProperties().getProperty('GEMINI_KEY')
[5] ✓ clasp push GAS 部署完成
[6] ✓ git push 前端到 GitHub Pages
⏸ 最後一步 換你貼 Key
　 我已開啟 GAS 編輯器
　 Project Settings → Script Properties
　 Add property: GEMINI_KEY = 你的 Key
▸ Chat
做會議摘要器 前端 GitHub Pages 後端 GAS...
7 步完成✓ 前 6 步自動跑完⏸ 最後 Key 換你貼

你只做兩件事 OAuth 授權 clasp 一次 + 到 GAS UI 貼 Key 一次　其他 agy 全包

資料夾長這樣 Key 放這裡

你的 meeting-summary 資料夾
agy ・ meeting-summary/
EXPLORER
▾ meeting-summary
index.html　→ git push
README.md　→ git push
Code.gs　→ clasp push GAS
appsscript.json　→ clasp push GAS
.clasp.json　scriptId 對應
.gitignore
.env　本機用
前端後端兩個檔在同一個資料夾
agy 自己知道哪個 push 到哪
變體 B 最後一步 你到 GAS UI 貼 Key
script.google.com/.../settings
Project Settings
▾ Script Properties
Property
Value
GEMINI_KEY
AIzaSy你的 Key
Save script properties
Key 存在 GAS 後端 Code.gs 用 PropertiesService 讀取　永遠不會出現在前端
agy 會自動開 GAS 編輯器到這頁
你貼上 Save 完成

產出的會議摘要器長這樣

alan.github.io/meeting-summary
會議摘要器
貼逐字稿 自動產結論 + Action items + email
A: 我們下季要推新方案 預算 50 萬
B: OK 我下週給時程
C: 客戶名單我整理 兩週內...
產出摘要
結論　Q1 推新方案 預算 50 萬
Action items
・B 下週給時程
・C 兩週內整理客戶名單
[Email 草稿已產 點複製寄出]

逐字稿丟進去 結論 + Action items + email 草稿　以前 30 分鐘整理現在 30 秒

操作計時

25分鐘
含 AI 產出 + 測試 + push 上線
完成目標

會議摘要器網頁能跑 貼逐字稿產出結論 + Action items
push 到 GitHub Pages 線上可用
把網址貼到群組

亮點時刻
你的網頁從今天起
它真的會跟人對話

過去網頁只能看 不能回應　今天 你的網頁長出了大腦　它能聽 能想 能回答　而且只用了 25 分鐘建出來

靜態
M2-1 ~ M2-3
會說話
M2-4 從現在開始
能服務人
Stage 3 系統化

分享與觀察

1
把你的會議摘要器網址貼到群組

用一份範例逐字稿測試 看摘要品質

2
互測三位同學的

同一份逐字稿丟進不同人的　看 Action items 抓得準不準

3
記下 R4 想做的應用場景

會議摘要是熱身 R4 換到你工作真實會用的

Round 3 小結

你做出來的不是練習作品
是一個真的能用的 AI 工具
這一輪你拿到

線上能用的會議摘要器 ・ 串 API 完整流程 ・ 摘要器 prompt 架構 ・ LV1 達成

ROUND 4 · 1:30–2:00

LV2
應用場景

客服分流 PDF 摘要器 工作真實會用的

工具 跟 應用 的差別

LV1 是工具

會議摘要器只解決一件事
逐字稿丟進去 重點抓出來
沒有商業邏輯　沒有領域知識
每個人都可以做一樣的

LV2 是應用

客服分流帶你的領域知識
輸入提問 分類 + 建議回覆
有商業邏輯 有規則
結合你的工作場景

關鍵差別

LV2 你不只串 API 你還在 prompt 裡寫了商業規則　例如 客戶問退貨 → 走售後流程 客戶問價格 → 給優惠資訊
這個叫做 把領域知識內化進 prompt

操作指令

挑一個你工作真實會用的場景
下一張有模板可以套

建議場景

客服分流 / 客戶提問 → 分類 + 建議回覆
PDF 摘要器 / 文件 → 重點摘要
會議摘要 / 逐字稿 → 結論 + Action items
市場研究 / 競品名 → 自動整理對比表

客服分流 prompt 架構

簡報只給架構 完整版見 prompt 教材

複製這段
幫我做客服分流網頁 串 Gemini
- 我賣 [產品/服務]
- 客戶提問分三類 售前 / 售後 / 抱怨
- 各類給不同建議回覆
- 抱怨類自動轉真人
比 LV1 強在哪

會議摘要器你只是用 AI　客服分流還告訴 AI 你公司怎麼運作　商業規則內化 價值高 10 倍

操作計時

25分鐘
含 AI 產出 + push + 用真實情境測
完成目標

應用場景網頁能跑　至少測 3 個真實案例
能截圖貼出來說 這個能用
push 到 GitHub Pages 線上可用

分享與觀察

1
你的應用場景是什麼

講一句話 解決誰的什麼問題

2
互測三位同學的場景

不同產業看不同設計 你可能會發現你也能用

3
記下你想實際用它做什麼

回家可以接著優化 真的丟給客戶用

Round 4 小結

你的領域知識 + AI 串接
就是別人做不出來的應用
這一輪你拿到

一個真實場景應用 ・ 領域知識內化進 prompt 的方法 ・ 場景 prompt 模板 ・ LV2 主線達成

ROUND 5 · 2:00–2:30

LV3
體驗 agent 模式

AI 自己列計畫 改檔 測試 回報

agent 不是更聰明的 prompt

一般 prompt

你下一個指令
AI 回一個答案
你看結果
你再下一個指令
你決定每一步

agent 模式

你下一個目標
AI 自己列計畫
自己跑每一步
自己驗證結果
你只看最後回報

關鍵差別

agent 自己想步驟 自己決定下一步要做什麼
它跟 AI 工具的差別 就像員工跟工具的差別
Stage 3 整堂課都在學怎麼跟 agent 工作

操作指令

給 AI 一個有 4-5 步的目標
讓它自己拆解 跑完 回報

這次的目標

幫我把今天做的會議摘要器加 3 個功能 字數限制 歷史紀錄 一鍵複製 email
完成後 push 上 GitHub Pages 給我網址確認

給 agent 的 prompt 怎麼寫

關鍵差別

不要每一步都問我 自己判斷　這句話讓 AI 進入 agent 模式
它會自己一步一步跑 你只看最後結果

什麼時候適合用

任務超過 3 步驟而且每步明確
例如 加 3 個功能 / 改版部署上線 / 跑完一輪測試
不適合 模糊需求 你也不清楚要什麼

複製這段
進 agent 模式 我有一個 4 步任務

目標 升級我的 meeting-summary
1. 加字數限制 輸入超過 500 字提示
2. 加歷史紀錄 localStorage 存最近 10 筆
3. 加一鍵複製 翻譯結果右上角複製按鈕
4. push 到 GitHub 並確認 Pages 部署成功

要求
- 每步做完跟我說做了什麼
- 全部跑完給我網址讓我測
- 過程中遇到問題自己用除錯儀式
- 不要每一步都問我 自己判斷

agent 自己跑的樣子

agy ・ meeting-summary/ · agent
AGENT TASKS
✓ 1. 加字數限制
✓ 2. 加歷史紀錄
✓ 3. 一鍵複製
⏳ 4. push 部署
Agent Log
[Step 1] ✓ index.html 加 maxLength 500
[Step 2] ✓ 新增 localStorage 存 history
[Step 3] ✓ 加 copy 按鈕 + clipboard API
[Test] ✓ 自測 三個功能正常
[Step 4] git add commit push 進行中
預計 30 秒完成 部署 1 分鐘
▸ Agent
升級會議摘要器 4 個任務
已規劃 自動執行中✓ 前 3 步完成⏳ push 中

操作計時

25分鐘
從給目標到拿到結果
這 25 分鐘你要做的

給目標 不要中途干涉　看 agent 自己跑　遇到它做錯記下來 R6 討論
大部分時候你不用做事 只是等它跑完

分享與觀察

1
agent 自己跑的感覺

跟你用 prompt 一步步指揮比 哪裡不一樣

2
它哪一步出錯了

有人可能 agent 跑歪 講你發生什麼 怎麼修

3
你會想用 agent 模式做什麼工作

未來 Stage 3 整堂課都在學這個

Round 5 小結

agent 不是工具升級
是 AI 從你的助手變成你的同事
這一輪你拿到

agent 模式體驗 ・ 多步任務交給 AI 自跑 ・ agent prompt 模板 ・ Stage 3 的鋪墊

ROUND 6 · 2:30–3:00

Stage 2 結業
12 小時走完了

回顧四模組 預告 Stage 3

Stage 2 四模組你都走過了

M2-1

GitHub 平台

註冊 開 repo 部署 commit Public Private

M2-2

IDE 改檔

改 HTML 讀 PDF 產簡報

M2-3

IDE 接 GitHub

token 串接 多頁網站 新專案部署

M2-4

API 串接

會議摘要器 應用場景 agent 模式

你今天可以說的話

我會用 GitHub 部署網頁 我會用 IDE 跟 AI 改檔 我會接 API 做 AI 應用 我體驗過 agent 模式

Stage 2 完整帶走清單

作品產出
  • ✓ 個人介紹多頁網站
  • ✓ 會議摘要器
  • ✓ 應用場景 AI 工具
  • ✓ 升級版會議摘要器 含歷史紀錄
能力習慣
  • ✓ GitHub 完整流程
  • ✓ IDE + AI 工作流
  • ✓ API + .env 安全
  • ✓ agent 模式初體驗

下一站 Stage 3

Stage 3 主軸

Stage 1 是用 AI　Stage 2 是讓 AI 改你的檔案
Stage 3 是 跟 agent 一起工作　從工具升級到同事

M3-1

Claude Code CLI 進階　harness 觀念 CLAUDE.md Skills Rules

M3-2

SDD + TDD　跟 agent 一起設計系統

M3-3

任務拆解 + 人跟 AI 互動模式

M3-4

GitHub Actions + Cloudflare Worker 雲端自動化

Stage 3 等你來

今天結束你不只能做網頁　你已經有能力用 AI 解決真實工作的問題　Stage 3 把它變成系統

◈ 章節 ▲
1 / 47