Vibe Coding — Stage 1 · 用 AI
M1-4

Vibe Coding 實戰課 — Stage 1 · 用 AI

GAS 串接 API
+ TG Bot

你的第一個對外服務 — 有網頁、有 AI、有通知

M1-4 3 小時 6 輪循環 帶走服務

按 → 或空白鍵開始

六輪循環，逐層遞進

Round 1
GAS 網頁 doGet
Round 2
Sheet 讀寫
Round 3
串 Groq API
Round 4
串 TG Bot
Round 5
Demo 互測
Round 6
Stage 1 回顧

故事線
一張飲料菜單（M1-3）→ 團購表單 → 自動統計 → AI 分析 → TG 通知老闆去買
今天做完，就是一條完整服務

前情提要：Stage 1 到目前為止

M1-1
AI 聊天做 HTML
→
M1-2
封裝 GPT/Gem
→
M1-3
GAS 自動化
→
M1-4
對外服務

M1-1 只能自己看 → M1-3 背景自動跑 → 今天：任何人都能用的服務

ROUND 1 · 0:00–0:25

GAS 做網頁
doGet + HtmlService

從「自己電腦看得到」到「全世界看得到」

Step 1 — 開新對話、獨立任務

為什麼開新對話

M1-3 的對話可能在不同視窗或斷掉了
新任務從零開始，順便複習怎麼跟 AI 講清楚

跟 AI 說（獨立完整版）
幫我寫一個 Google Apps Script
做一個網頁，顯示 Google Sheet 裡的飲料訂購資料

我的 Sheet 裡有這些欄位（自己貼上 Sheet 的欄位）
[姓名 / 飲料 / 冰塊 / 甜度 / 數量]

請用 doGet 和 HtmlService 寫
做成讓任何人都能打開的公開網址

關鍵：把你 Sheet 的欄位貼給 AI
AI 才知道要讀哪些資料

Step 2 — 加上「部署」這個需求

繼續跟 AI 說
程式碼貼好了
請告訴我怎麼部署成網頁
讓任何人都能打開
存取權限要設成所有人
回 GAS 看什麼

AI 會教你「部署 → 新增部署 → 網頁應用程式」
你照做，拿到一個 https 網址

完成這一步的同學請舉手，等大家都到位再繼續

Step 3 — 驗證

手機打開你的網址
→
看到團購統計
→
傳給隔壁同學打開
這是你做的第一個「上線的服務」
不是檔案，是公開網址

觀察：跟 M1-1 有什麼不同

M1-1 的 HTML

只能在自己電腦看

分享要傳檔案

沒有公開網址

GAS 網頁

有公開網址

任何人都能打開

手機也能看

關鍵差異：部署（Deploy）= 上架
從「本機檔案」跳到「公開服務」

部署 = 上架

自己電腦
→
部署 Deploy
→
全世界看得到
GAS 網頁 = 免費伺服器 + 免費網址
你的第一個「上線的服務」

細節 1 — 專案要改名字

新建專案預設叫「無標題的專案」
累積幾個之後完全分不出哪個是哪個

Apps Script 編輯器左上角
▼ 無標題的專案 ← 不要留這個
▼ 飲料團購系統 v1 ← 點專案名稱直接改

幾個月後在 Apps Script 列表還認得出來

細節 2 — 部署權限選「所有人」

部署 → 新增部署 → 設定彈窗
執行身分 我
存取權限 所有人 ← 一定要選這個
選錯

別人打開看到「需要登入」或「沒有權限」

選對

任何人都能直接打開，不需要 Google 帳號

細節 3 — 網址在哪裡找

部署完跳出的網址沒複製到，回頭找的方法

右上角「部署 ▼」→ 管理部署
活動 - 版本 1
飲料團購系統
網址 https://script.google.com/macros/s/AKfy...exec 複製

每次都能回來找 — 不用怕網址不見

分享與觀察

1
把 GAS 網頁連結貼到群組

互相打開同學的網頁

2
觀察差異

版面設計、資料呈現方式、手機版面是否正常

3
思考一個問題

這個網頁只能「看」— 訪客能不能「填資料」進來

Round 1 小結

GAS + doGet + HtmlService
= 免費的公開網頁伺服器
但現在只能「看」，不能「寫」

下一輪：讓訪客可以填資料進來，存到 Google Sheet

ROUND 2 · 0:25–0:50

GAS 網頁
+ Sheet 讀寫

讓訪客不只能看，還能填資料進來

Step 1 — 加上「能填資料」這個需求

繼續跟 AI 說
把這個網頁升級成意見收集頁
訪客可以填姓名和意見
送出後寫入 Google Sheet
網頁下方顯示已提交的意見列表
回 GAS 看什麼

AI 會在原本的 doGet 加 doPost
觀察 doPost 怎麼接收表單、怎麼 appendRow 寫入 Sheet

Step 2 — 重新部署的陷阱

改了程式碼 ≠ 立刻生效

GAS 部署是「快照」概念 — 改完要重新部署，網址才會跑新邏輯

不要選「新增部署」

會產生另一組新網址

之前分享出去的舊網址跑舊程式

同一個 Bot 被你拆成兩個

要選「管理部署 → 編輯」

版本選「新版本」

網址不變，程式碼更新

之前分享的網址也跟著更新

Step 2 — 怎麼點「管理部署」

Apps Script 編輯器右上角
部署 ▼
新增部署（會產生新網址）
✓ 管理部署
測試部署
進入後 → 點鉛筆編輯 → 版本選「新版本」→ 部署 → 網址不變

完成這一步的同學請舉手，等大家都到位再繼續

觀察：資料是共用的

A
A 同學填了一筆資料

在自己手機上填寫表單，送出

B
B 同學重新整理頁面

看到 A 的意見出現在列表中

「資料是共用的！不同的人看到同一份資料！」

前端 vs 後端

M1-1 的 HTML

只有前端（用餐區）

資料存在瀏覽器裡

關掉就沒了

GAS + Sheet

前端（網頁）+ 後端（GAS + Sheet）

資料存在雲端

不同裝置都能存取

前端 = 用餐區（訪客看到的畫面）
後端 = 廚房 + 倉庫（GAS 處理邏輯 + Sheet 存資料）

餐廳比喻

前端
網頁畫面
用餐區
→
後端
GAS 程式碼
廚房
→
資料庫
Google Sheet
倉庫

客人（訪客）在用餐區（網頁）點菜（填表單）
廚房（GAS）接單處理 → 存進倉庫（Sheet）

Step 3 — 加上「防呆驗證」這個需求

繼續跟 AI 說
加上輸入驗證
姓名和意見都不能空白
送出後顯示「已提交」確認訊息
按鈕送出後變灰避免重複送
為什麼要防呆

對外服務一定會遇到空白提交和重複送，會留下垃圾資料

升級後的效果

訪客填表
→
前端驗證
→
寫入 Sheet
→
顯示確認

現在的網頁：能看、能填、能存、有驗證
但資料進來之後，要靠人去看 — 能不能讓 AI 自動分析

Round 2 小結

Round 1
只能看（展示頁）
Round 2
能看 + 能填 + 能存

下一輪：串接 AI API，讓收到的意見自動被分析

ROUND 3 · 0:50–1:15

串免費 AI API
讓表單有 AI 分析

Groq + Llama — 免費、不需信用卡、速度快

申請 Groq 不用信用卡

免費註冊

用 Google 帳號登入
不用綁卡 / 不用付費

速度極快

專門做推理的硬體
回應比一般 API 快數倍

額度夠用

以 console limits 為準
課堂選當天額度足夠的模型

立即申請

console.groq.com → 用 Google 登入 → API Keys → Create Key

順便講：GAS 為什麼不能用 Gemini 免費額度

Gemini API 在外部使用

用 Python / Node.js / 自己的伺服器

免費額度可用

不用綁卡也能跑

在 GAS 裡呼叫 Gemini API

GAS 屬於 Google Workspace 服務

從 Workspace 呼叫外部 API

必須啟用 GCP Billing 才能跑

注意這個坑

Google 給「綁卡送 $300 試用額度」聽起來划算
但 $300 用完會自動扣款，新手很容易忘了關掉
課堂用 Groq 完全免費不用綁卡，沒有這個風險

Step 1 — 拿到 Groq API Key

1
打開 Groq Console

console.groq.com → 用 Google 帳號登入

2
左側選單 → API Keys → Create API Key

取個名字（例如 vibe-coding-class）

3
複製這串 Key（gsk_ 開頭）

視窗關掉就看不到了，先存到記事本

完成這一步的同學請舉手，等大家都到位再繼續

Step 2 — 加上「AI 分析」這個需求

繼續跟 AI 說
升級系統：新意見送出時呼叫 Groq API
優先用當天 console 顯示可用且額度足夠的模型
讓 AI 自動分類成正面 / 中性 / 負面
分類結果寫回 Sheet 同一列的下一欄
機會教育 — 觀察 AI 把 Key 放哪裡

有主動提醒「放 Script Properties」= 好 AI
直接寫死在程式碼 = 你要會自己看出問題

觀察：AI 自動分析了

填意見
→
AI 分析情緒
→
標籤寫回 Sheet
「AI 自動分析了！不用我自己判斷！」

觸發 → 處理 → 儲存 → 展示
四元素已經到齊三個，只差「通知」

四元素進度

觸發
表單送出
處理
AI 分析
儲存
寫入 Sheet
通知
Round 4

三個元素到齊 — 最後一個「通知」在下一輪補上

注意：API Key 安全

危險做法

const KEY = "gsk_abc123..."

Key 寫在程式碼裡
任何能看到程式碼的人
都能拿走你的 Key

正確做法

PropertiesService .getScriptProperties() .getProperty('GROQ_KEY')

Key 存在 Script Properties
程式碼裡只有取用邏輯

核心原則

密碼不能寫在程式碼裡 — 這個概念到 Stage 2 會變成 .env / Secrets

Step 3 — 把 Key 存到 Script Properties

Apps Script — 專案設定
編輯器
觸發器
執行項目
① 點專案設定
▼ 指令碼屬性
屬性值
GROQ_KEY gsk_xxxx... 移除
② 點「新增指令碼屬性」→ 填 GROQ_KEY → 貼你的 Key → 儲存

Groq + GAS 的應用範例

自動客服分類

客戶留言進來
→ AI 自動分類：
退款 / 技術問題 / 建議
→ 分到不同 Sheet 頁籤

自動翻譯回覆

外國客戶留言
→ AI 自動翻譯成中文
→ 翻譯結果寫回 Sheet
→ 中文團隊即時處理

同樣的架構（表單 + AI + Sheet），套到不同場景
差異只在 AI 的指令和 Sheet 的欄位設計

Round 3 小結

R1
能看
→
R2
能填能存
→
R3
AI 自動分析
現在缺一件事：有新資料進來的時候
你得自己去看 Sheet 才知道
能不能自動通知你

ROUND 4 · 1:15–1:35

串接 Telegram Bot
自動通知

四元素最後一塊拼圖 — 推播通知

Step 1 — 跟 @BotFather 建 Bot

B @BotFather
歡迎！我可以幫你管理 Telegram Bots
/newbot
你的 Bot 叫什麼名字？
我的意見收集 Bot
建立成功！這是你的 Token：
8434xxx:AAH...（複製這串）

在 Telegram 搜尋 @BotFather → 對話按 /newbot → 取得 Token
完成這一步的同學請舉手，等大家都到位再繼續

Step 2 — 加上「TG 通知」這個需求

繼續跟 AI 說（把常見坑都寫進 prompt）
升級系統：有人提交意見時自動推 Telegram 給我
通知內容：意見原文 + AI 情緒標籤

Bot Token 和 Chat ID 我會放 Script Properties
（叫 TG_TOKEN 和 TG_CHAT_ID）

如果我還不知道 Chat ID，請教我怎麼取得
也請提醒我第一次要先對 Bot 按 /start

把常見坑寫進 prompt → AI 會主動引導你，不用事後修

測試：完整流程跑一遍

填表單
→
AI 分析
→
存 Sheet
→
TG 通知

填一個意見 → 手機收到 TG 推播
推播內容包含：意見內容 + AI 分析結果
全自動，零人工介入

四元素完整版

觸發
表單送出
處理
AI 分析情緒
儲存
寫入 Sheet
通知
TG 推播

觸發 → 處理 → 儲存 → 通知

這四個元素組合在一起，就是一個完整的自動化服務
幾乎所有 SaaS 產品的核心邏輯都是這四步

你今天學到的：事件驅動

當 A 事件發生 → 自動觸發 B 動作

你做的

有人填表單（事件）
→ AI 分析 + 寫 Sheet
→ TG 主動推播給你

常見的

GitHub 有 push（事件）
→ 自動跑測試
→ 自動部署

商業的

收到付款（事件）
→ 更新庫存
→ 發出貨通知

事件驅動是所有自動化的共同模式 — 今天用的是 GAS 觸發器 + API 主動推送

R4 常見問題

Token 貼錯

多了空格或少了字元
→ 用 M1-3 學的「整段執行記錄貼給 AI」

新訊息沒進 getUpdates

Telegram 30 秒內取一次新訊息
→ 自己對 Bot 發一則訊息再執行

大部分問題已經在 Step 2 的 prompt 預埋好了
剩下的小問題用 M1-3 的除錯流程就能搞定

Round 4 小結

R1
能看
→
R2
能填存
→
R3
AI 分析
→
R4
TG 通知

四元素全部到齊
你有了一個完整的對外自動化服務

ROUND 5 · 1:35–1:55

Demo 互測
+ 變化應用

技術相同，差異在「你解決了什麼問題」

Demo 操作

1
每人把網址貼到群組

大家有彼此的意見收集頁網址

2
互相填彼此的表單

每個人去填其他同學的網頁

3
觀察手機收到一連串 TG 推播

系統自動在跑 — 你寫的服務真的有人在用

收到至少 3 筆通知的同學請舉手

同樣架構可以做什麼

客服自動分類

留言 → AI 分類 → TG 通知對應客服

庫存警報

定時掃 Sheet → AI 判斷不足 → TG 推採購

每日銷售報告

18:00 觸發 → AI 摘要 → TG 推主管

問卷自動歸納

回覆累積 → AI 歸納主題 → TG 推研究者

技術都一樣（網頁 + AI + Sheet + 通知），差別只在「你解決什麼問題」

從一張菜單到完整服務

M1-3
飲料菜單
→
團購表單
→
自動統計
→
AI 分析
→
TG 通知老闆

一條龍完整服務

從一張飲料菜單開始
到一個完整的自動化對外服務
這就是 Stage 1 的終點

六維度反思

1
功能完整度
2
畫面品質
3
幾步完成
4
花多少時間
5
操作難易度
6
總體效果

用這六個維度評估自己和同學的作品
差距來自哪裡 — 指令品質、架構理解、還是除錯速度

Round 5 小結

你擁有了一個可以複製到任何場景的架構
觸發 → 處理 → 儲存 → 通知
接下來只需要換場景和需求

ROUND 6 · 1:55–2:05

Stage 1 回顧
+ Stage 2 預告

四堂課的升級線，和下一階段的方向

Stage 1 升級線

M1-1
AI 聊天做 HTML
存自己電腦，最原始
M1-2
封裝 GPT/Gem + 圖文生成
可重複用 + 多模態
M1-3
GAS 自動化
背景自動跑，飲料團購系統
M1-4
GAS 網頁 + AI API + TG
對外服務，一條龍

Stage 1 能力累積

0
行程式碼自己寫
4
堂課完成
1
完整對外服務

從「完全不會寫程式」到「有一個公開的自動化服務」
中間只靠 AI 聊天 + 正確的操作流程

記憶機制回顧

Stage 1 用到的四種「記住設定」的方式

GPT Instructions

ChatGPT 的自定義指令
每次對話自動帶入

Gem System Instructions

Gemini 的系統指令
角色 + 限制 + 格式

GAS Script Properties

GAS 的安全儲存
API Key / Token

Claude Projects

Claude.ai 的專案設定
跨對話保留指示與知識

M1-4 常見問題回顧

#常見問題學到什麼
1部署權限選錯權限管理
2新增部署 vs 管理部署搞混網址不變要選「管理部署」
3沒驗證收到空白提交對外服務要防呆
4API Key 寫在程式碼裡Script Properties
5TG Token 貼錯整段執行記錄貼給 AI

帶走清單

本堂定位 輸入 + 輸出 + 後台 + API — AI 系統的最小架構

不只學了什麼，是想法怎麼變了
從「我是服務的使用者」→ 我能組裝自己的服務

從「網頁是別人做的」
↓
入口可以自己打造
從「表格只是記資料」
↓
資料是服務的心臟
從「AI 只能在網站用」
↓
智能可以被接入
從「通知只是被動收」
↓
對話能成為入口
從「能跑就算完成」
↓
服務要經得起互測
從「我只是學工具」
↓
我已能組裝服務

Stage 1 全景：你學會了什麼

M1-1
AI 聊天
做作品
→
M1-2
封裝助手
多模態
→
M1-3
GAS 自動化
背景執行
→
M1-4
對外服務
一條龍

從「零基礎」到「有公開服務」
Stage 1 的核心：用 AI 做事，不用自己寫程式

Stage 1 的限制

你用的都是「別人的平台」

ChatGPT / Claude

別人的 AI

Google Apps Script

別人的伺服器

Telegram

別人的通訊管道

平台規則改了，你就被影響
能不能有「自己的地盤」

Stage 2 預告：串 AI

1
GitHub 做「你自己的網站」

不再依賴 GAS 的超長網址

2
學會安全管理

.env / Secrets — API Key 的正式管理方式

3
用 IDE 做更強的工具

從瀏覽器操作進入開發環境

Stage 1 = 用 AI → Stage 2 = 串 AI → Stage 3 = 造 AI

課後操作

實踐任務

把今天的意見收集系統改成你工作中的實際場景
例如：客戶回饋收集 / 內部建議箱 / 日報通知

記錄要求

記錄你改了什麼、遇到什麼問題、怎麼解決
這些素材在 Stage 2 會用到

下一階段 — Stage 2

你做了對外服務
但地盤是別人的

Stage 2：用 GitHub 建你自己的網站
學會安全管理，用 IDE 做更強的工具

GitHub Pages .env / Secrets IDE 免費 AI API

M1-4 / Stage 1 完成

1 / 59
◆ 章節 ▲