Vibe Coding 實戰課 — Stage 1 · 用 AI
AI 幫你寫程式 你只需要說需求
按 → 或空白鍵開始
M1-1 你學會了跟 AI 聊天做作品
M1-2 你學會了讓 AI 讀圖、讀文件
今天要把這些能力串起來 — 讓程式在背景自動跑
M1-3 ・ 3 小時
從靜態網頁升級成自動跑的系統,再延伸到實體 NFC 入口
同樣內容,有了正式網址
表單一送出,系統自己跑
碰一下,實體 → 雲端
3 小時內,把今天學的 Web App 能力套到三種不同場景。
ROUND 1 · 0:00–0:15
先看效果 再拆原理
這套系統就是你現在報名 Vibe Coding 用的那一套
這堂課結束時
你也會做出一套類似的自動化系統
跟記事本一樣
把程式碼貼進去就好
AI 寫，你貼
這就是 M1-3
的核心流程
左側「觸發器」選單
不需要寫程式設定
有 Google 帳號就能用
不用裝任何軟體、不用租伺服器、不用學寫程式
讀寫
試算表
自動統計
建立表單
收回覆
觸發動作
自動寄信
讀取信件
建立行程
時間到
提醒
管理檔案
自動整理
會貼 — 把 AI 給的程式碼貼進編輯器
會跑 — 按下執行按鈕
會把錯誤丟給 AI — 截圖貼回去讓 AI 修
不用安裝、不用花錢、不用會寫程式
AI 寫 → 你貼 → 設觸發器 → 自動跑
ROUND 2 · 0:15–0:55
先看 GAS 能做什麼 再決定你要做什麼
M1-1 你做了個人頁，但 GAS 後端能做的事還多得多
M1-1 的 HTML
介紹頁
靜態內容
無後端
同一份頁面，
加入互動 + 後端
+ 資料收集
HTML 移植到 GAS
+ 加 CTA 表單
+ 寫入 Sheet
在進實作之前，先看一個真實的 GAS 應用範例
用 GAS 部署的真實應用，與個人介紹頁性質完全不同
掃 QR code 進去點點看 — 這整個系統是 GAS 部署的，沒有後端伺服器
Sheet 存題目
隨機抽 20 題
分類標籤
計時器
答題進度
已答與未答記錄
比對正解
即時計分
顯示對錯
答題記錄
寫 Sheet
分數累積
個人追蹤
四個能力分區，每一區都從 Sheet 讀寫資料。整個系統的後端 = Sheet
相同架構（前端表單 + Sheet 後端）可以套用到很多場景
日期 + 主題
+ 聯絡方式
寫入 Sheet 回覆
姓名 + 人數
+ 場次
名額限制計算
領域 + 程度
+ 想學什麼
分類統計
滿意度
+ 改善建議
累積成資料庫
姓名 + 時間 + 地點
無紙化簽到
只要符合
「表單收
→ Sheet 存
→ 顯示／通知」
都做得到
把你的 M1-1 個人頁，搬到 GAS 上部署成網站，
並加上一個你選的 CTA 應用（不限定要是個人介紹頁）
三個步驟，完全交給 AI 引導。你只需要描述要做什麼，AI 負責產出程式碼
請把以下 HTML 部署成 Google Apps Script 網頁 [貼上 M1-1 你做的個人頁完整 HTML] 請給我完整的 Code.gs 和 index.html 告訴我每一步怎麼貼進 GAS Editor、怎麼部署、怎麼拿到網址
建立 GAS 專案 → 貼 Code.gs → 建立 index.html → 部署 → 取得網址
不需要你看懂程式碼，AI 會說明每一步在做什麼
挑前一張的場景之一，描述給 AI
加諮詢預約表單
欄位：日期、主題
姓名、email
提交後顯示已收到
加興趣調查問卷
三題單選
+ 一個開放問答
提交後感謝頁
加活動報名表單
姓名、人數、場次
限額 50 人
AI 會把 CTA 表單加到你的 HTML 裡，繼續引導你部署
表單送出後，把資料寫進 Google Sheet 請告訴我： 1. 怎麼建立要存資料的 Sheet 2. 怎麼把 Sheet ID 給 GAS 3. 怎麼授權（看到警告畫面該怎麼處理） 4. 怎麼測試表單真的有寫進去
doPost 接送出資料 → SpreadsheetApp 打開 Sheet → appendRow 寫入 → 重新部署 → 學員提交一筆測試
第一次部署會看到「未經 Google 驗證」警告 — 因為這是你自己的腳本操作你自己的 Sheet，安全。下一個 Round 會深入討論
照 AI 引導部署，拿到你的 GAS 網址
諮詢預約 / 興趣調查 / 活動報名擇一
送出後打開 Sheet 看資料有沒有進去
手機打開你的網址，CTA 送出後 Sheet 多一筆 = 完成
卡住了 — 舉手，或回看 Step 1-3 的 prompt 原句貼給 AI
用手機開一次（不是用你的電腦），確認別人也看得到
自己提交一筆測試資料，確認有寫進 Sheet
看 3 個同學的 CTA 設計，挑一個你想學的設計或 prompt 寫法
M1-1 的 HTML 是給人看的靜態內容。
Round 2 之後，同一份頁面變成可以收資料、寫 Sheet 的完整應用。
架構（前端表單 → GAS 後端 → Sheet 資料）
今天會在 R4 / R5 繼續用
課堂上 80% 同學會遇到 — 跑完 GAS function，「執行紀錄」沒印出 Form URL。
通常是 AI 忘了加 Logger.log。再下一道指令叫 AI 補就好
我剛剛跑完你給我的 code， 但 GAS 的執行紀錄沒看到表單連結， 也沒看到 Sheet 連結。 請幫我修改 code， 讓我下次跑完之後，執行紀錄會印出兩個網址： 1. Google 表單的網址 2. 試算表 (Sheet) 的網址
再跑一次 → GAS 編輯器左側「執行項目」點進去 → 看「紀錄」分頁 → 表單網址 + Sheet 網址 兩個都印出來
同樣狀況：看不到資料的值 / 不知道 code 跑到哪一步
解法都一樣 — 叫 AI「在執行紀錄印出 OO」，AI 會自動加上程式碼
ROUND 3 · 0:55–1:15
把 R2 的經驗，固化成可重複使用的工具
R2 大家做完之後，回頭看 prompt 怎麼寫的
同學怎麼開頭、
怎麼分段、
怎麼下需求
「加表單」vs
「加意見回饋表單
＋欄位規格」
差別在 AI
產出品質
什麼時候
該一次給全部？
何時分段對話？
R2 大家用同一個 AI，但 prompt 寫法不同 → 產出差距很大。差距來自 prompt 結構
GAS 相關需求有共同骨架，可以固化成範本
Editor 與部署環境
哪些 API 可用
SpreadsheetApp
MailApp
HtmlService
UrlFetchApp
doGet / doPost
觸發器 / 排程
Scopes 設定
第一次授權流程
try / catch
執行記錄 / Logger
五個槽位。GAS prompt 助手 = 自動帶這五個槽位的範本生成器
左下角「Explore Gems」→「New Gem」
命名清楚，之後在 Gem 列表找得到
下一張提供範本，可以直接複製
未來所有 GAS 需求都在這個 Gem 裡問
你是 Google Apps Script 教學助手，協助無程式背景的學員。 當學員提出 GAS 需求時，你的回答必須涵蓋： 1. 用到的 Google 服務（SpreadsheetApp / MailApp / 等） 2. 觸發方式（doGet / doPost / 觸發器 / 手動執行） 3. 完整可貼上的 Code.gs 程式碼 4. 如果有 HTML，給完整的 index.html 5. 部署步驟（每一步說明） 6. 第一次授權的處理方式 7. 如何驗證有跑成功 回答時用繁體中文，每段加上「為什麼」的說明。 不要假設學員會看程式碼，每個關鍵變數都加註解。
這個 Instructions 把 R3-2 的五個槽位變成自動規範。未來每次問 GAS，輸出格式都一致
命名「GAS 助手」，之後在列表找得到
整段複製貼上就好，不用改
看輸出有沒有照五個槽位走
Gem 的回答帶齊程式碼 + 部署步驟 + 授權說明 = 建好了
卡住了 — 舉手，或回看前兩頁的步驟與範本
同一個需求，輸出差異一目瞭然
「幫我做表單寫 Sheet」
→ 給一段 code
→ 沒講授權
→ 沒講部署
→ 沒講驗證
「幫我做表單寫 Sheet」
→ 完整 Code.gs + index.html
→ 授權說明
→ 部署步驟
→ 驗證方式
→ 每段為什麼
差別不是 AI 變聰明，是你把規格固化進 Instructions。每次都不用重新講一遍
R2 你跑過一次完整流程，知道 GAS 需要哪些東西。
R3 把這份「知道」固化成 Gem 助手，未來每次需求都自動帶完整規格。
這個方法不只用在 GAS — 任何重複出現的需求類型，都可以建專屬 Gem
ROUND 2 · 0:15–0:35
一張照片 + 兩步 AI = 可用的系統
用手機拍一張你身邊的實體素材，AI 幫你變成數位表單
團購表單
品項+冰塊
甜度+數量
最實用
午餐表單
主菜+配菜
白飯/糙米
每天用
聚餐投票
口味+大小
數量
選擇救星
下午茶
表單
手寫字辨識
OCR 挑戰
簽到表單
姓名+部門
時間
無紙化
報名表單
姓名+人數
場次
素材也能用
這是一張飲料店菜單 辨識所有品項、價格、可選規格 整理成結構化清單
AI 回傳乾淨的結構化資料
品名、價格、冰塊選項、甜度選項 — 全部辨識完成
根據這份清單 寫一個 GAS，自動建立 Google Form 標題「XX 飲料團購單」 每個品項是一個區塊 包含數量和規格選項
AI 會回傳一整段程式碼
你不需要讀懂，只需要貼進 Apps Script Editor
script.google.com → 新專案
取代預設的空白函式
第一次執行需要允許程式操作你的 Google 服務
表單已經自動建好了
「這個應用程式未經驗證」
「可能不安全」
紅色警告文字
這是你帳號裡的腳本
但程式碼來源是 AI
授權前要先看權限範圍
先用測試表單 / 測試 Sheet
不要放敏感資料
看到 Gmail / Drive 全域權限先停下來問老師
拿到品項、價格、規格的結構化清單
整段程式碼貼進 Apps Script Editor
打開表單，對照原菜單檢查選項
Google Drive 出現 AI 建好的表單，打開能填 = 完成
卡住了 — 舉手，或回看 Step 1 / Step 2 的指令原句
全程不到 10 分鐘
你做的第一個自動化工具，馬上有人用
OCR + 結構化
讓 AI 讀懂
實體世界
GAS 建表單
程式代替人工
兩步 AI → 一個成果 →「用 AI 串起流程」的雛形
有些字讀錯 → AI OCR 不是 100%，要人工檢查
不急 — Round 4 專門教除錯
AI 辨識結果要人工核對
紙本和數位世界的橋樑
數位化的第一步
程式操作你的
Google 服務
需要你的許可
AI 讀圖（M1-2）+ AI 寫碼（M1-3）
兩步串接，從紙本到數位表單不到 10 分鐘
ROUND 3 · 0:35–0:55
no-code 精神：你說 → AI 寫 → 你驗證
每加一個需求，就回 GAS 看 AI 怎麼套用
不是教你怎麼點 GAS 的選單
是教你怎麼讓 AI 一步一步長出完整系統
幫我寫一個 GAS 讀取我這個 Google Form 的回覆 統計每個品項的訂購數量
AI 給你的程式碼貼進 Apps Script
觀察它怎麼用 SpreadsheetApp 讀 Sheet 的欄位
不用看懂每一行，看「它讀了哪一欄、寫到哪一欄」
很好 現在我希望表單一收到新回覆 就自動執行這段統計 不用我手動點
AI 會教你到「觸發器」頁面新增一個 onFormSubmit
你照做，看到觸發器列表多了一筆
這就是「鬧鐘」被裝上了
每次統計時，順便加上時間戳 讓我知道是什麼時候更新的
AI 在統計程式裡多加了一行 new Date()
填到 Sheet 的某一欄
你重新貼程式碼，再執行一次
你沒寫一行程式碼
但透過三次「加需求 → 看 AI 寫 → 驗證套用」
長出了一套有觸發器、有統計、有時間戳的完整系統
貼進 GAS，手動執行一次
觸發器列表要多出一筆 onFormSubmit
看整條流程自己跑完
填一筆表單，Sheet 自動多出統計 + 時間戳 = 完成
卡住了 — 舉手，或回看 Step 1-3 的 prompt 原句
什麼事件啟動程式
表單提交 / 時間到
新資料
程式要做什麼
統計、寄信
搬資料
怎麼知道它有跑
執行記錄
結果驗證
三要素齊全 = 一個完整的自動化系統
「它真的有跑嗎？」
設了之後不知道怎麼確認
Apps Script → 左側「執行項目」
每次觸發都有紀錄
成功/失敗一目了然
Sheet 的欄位叫「您想喝什麼？」 但 AI 寫的程式碼找的是「品項」 → 找不到欄位 → 報錯
AI 不知道你的 Sheet 長什麼樣
把 Sheet 的欄位名稱截圖或列出來告訴 AI
所有執行紀錄都在這裡
點開可以看到詳細的錯誤訊息
每次表單提交都應該有一筆紀錄
四個 Step 拼起來才算完整
少一個都跑不起來，這就是「系統」的概念
ROUND 4 · 0:55–1:15
R3 過程中你一定遇過紅字錯誤
這 20 分鐘把處理錯誤的肌肉練起來
AI 寫的欄位名
跟你 Sheet
不一樣
第一次執行
沒同意授權
用了不存在的
API 名稱
（幻覺）
這些錯誤不需要避免 — 遇到才有機會學會處理
下一頁學三步除錯法，把它變成你的反射動作
看錯誤訊息
截圖保留完整畫面
把截圖丟給 AI
「跑出來的錯誤
請幫我修」
AI 給修正版
貼回去再跑一次
這是執行記錄，幫我修 [把整段執行記錄貼這裡]
執行記錄裡已經有 AI 需要的全部資訊
錯誤類型、出錯位置、相關程式碼
你不需要當翻譯，AI 自己看得懂
請在程式裡加上 Logger.log 記錄每個關鍵步驟的執行狀態 方便我看執行記錄追蹤問題
執行記錄會自動印出每一步做了什麼
出錯時你不只看到錯誤，還看到「錯之前發生了什麼」
下次貼給 AI，它修得更準
寫程式 → 跑 → 報錯 → 修 → 再跑
差別只在描述錯誤和修復的速度
沒有的話，把程式裡的欄位名改錯製造一個
用前頁格式：「這是執行記錄，幫我修」
還是紅的就把新紀錄再貼回去
原本報錯的程式重跑變綠色成功 = 打通
卡住了 — 舉手，或回看「貼給 AI 的格式」那一頁
知道紅字是訊號，不是失敗
不再說「程式壞了，幫我修」
親手跑過一次「看 → 丟 → 貼」的循環
從現在開始，遇到任何 Error
都不會卡住你 — 進入 Round 5
ROUND 5 · 1:15–1:35
同一個任務問三個 AI
看哪一個的回答方式最適合你的習慣
Sheet 有新資料時 自動統計各品項的數量 把結果寫到統計表
分別把同一段需求貼到三個 AI
比較回傳的 GAS 程式碼
分別貼到 ChatGPT / Claude / Gemini
註解多寡、步驟完整度、對話順不順
能不能跑、統計對不對
說得出「我會選哪個平台、為什麼」= 完成
卡住了 — 舉手，或回看上一頁的統一需求
跟 Google
生態整合
但也常搞錯指令
實測才知道
附詳細中文註解
程式結構清晰
適合學習理解
給完整可跑版本
包含錯誤處理
直接貼就能用
這只是常見傾向，不是絕對
同一題你問三次可能拿到三種答案
| 你比較在意 | 可能適合的方向 |
|---|---|
| 看懂程式碼在做什麼 | 找註解詳細的那個 |
| 貼了就能跑，不想改 | 找完整度高的那個 |
| 來回問細節都耐心回 | 找對話順暢的那個 |
「最適合」沒有標準答案 — 親自跑過才知道哪個對你的胃口
Claude 偶爾用到不存在的 GAS API
函式名稱看起來很像，但 Google 根本沒有這個功能
AI 會「一本正經地胡說八道」
這就是 M1-1 提過的 AI 風險 — 幻覺
程式碼也會有幻覺，不只是文字
能跑 ≠ 正確，但不能跑 = 一定有問題
Sheet 裡的統計數字對不對
把程式碼給另一個 AI 看 —「這段有沒有問題」
M1-1 學了指令技巧 → M1-3 加上工具選擇
指令品質 + 工具選擇 = 更好的產出
三個平台都會有幻覺、都會搞錯指令
差別在「誰的回答方式適合你的工作習慣」
選對工具不靠別人推薦，靠自己實測
能用，但一眼就是表單工具
有店名、有截止時間，像一個訂購網站
幫我做一個飲料訂購網頁，全部只要一個 HTML 檔 我已經有 Google 表單，連結是：<你的表單連結> 1. 頁面上方放店名大標「XX 飲料團購」 加一句訂購說明，和截止時間「今天 15:00 收單」 2. 下方用 iframe 嵌入這個表單 連結請改成表單的 embedded 內嵌版 3. 配色溫暖，手機打開也要正常顯示 4. 存成 index.html 之後，雙擊就能直接打開
AI 會回一整包 HTML — 跟 GAS 一樣，不用讀懂
複製全部 → 貼到記事本 → 另存新檔叫 index.html
file:// 開頭 = 這一頁只存在你的電腦裡
表單照收、統計照跑 — 但門面還沒上網（先記住這件事）
把「你的表單連結」換成你 R2 建好的表單網址
複製全部 → 記事本貼上 → 另存新檔 index.html
順手檢查：手機開不跑版、表單沒被切一半
雙擊打開，看到自己的表單嵌在頁面裡 = 完成
卡住了 — 舉手，或回看前頁 prompt
表單連結要用「傳送」裡的內嵌版
從一張菜單開始
你今天親手把它變成一套會自己跑的系統
ROUND 6 · 1:35–1:45
盤點收穫 看見下一步
OCR + GAS，紙本到數位不到 10 分鐘
表單提交 → 自動統計 → Sheet 更新
看 → 丟 → 貼，Error 不再可怕
GAS 場景選 Gemini，想看懂選 Claude
AI 生 index.html，表單嵌進漂亮的訂購頁
建表單
統計資料
觸發自動化
嵌進本機 HTML 門面
在 Google 生態內運作
做對外的網頁
串接 AI API
發 Telegram 通知
讓外部使用者互動
function doGet() {
return HtmlService.createHtmlOutput("Hello!");
}
→ 部署後你會拿到一個公開網址
→ 任何人都能打開
下一堂會用 doGet() 做一個真正的網頁
有網址、有介面 — 你的門面就不用只待在電腦裡
GAS + AI API + Telegram = 你的第一個對外服務
有網頁、有 AI、有通知
每一堂都在同一個專案上疊加新能力
飲料團購系統會越來越完整
不只學了什麼，是想法怎麼變了
從「我補流程的洞」→ 流程開始替我分工
| # | 常見問題 | 學到什麼 |
|---|---|---|
| 1 | 手寫菜單 AI 辨識率低 | OCR 要人工核對 |
| 2 | 授權畫面嚇人 | 授權 = 允許程式操作帳號 |
| 3 | 觸發器設了不知道有沒有跑 | 確認機制（執行記錄） |
| 4 | AI 程式碼貼進去報 error | 三步除錯法 |
| 5 | Claude 用到不存在的 GAS API | 幻覺 + 工具選場景 |
| 6 | 網頁裡的表單沒顯示或跑版 | iframe 要用「傳送」的內嵌連結 |
NEXT UP
你的第一個對外服務 — 有網頁、有 AI、有通知
一張菜單 → 團購表單 → 自動統計 → 漂亮門面 → 下一堂加通知
M1-3 完成