和 AI 一起寫程式：創意生活應用 第 10 週 2026-11-09（一） 觀念頁
一票怎麼進試算表、怎麼部署成網站、做完怎麼改一行
這頁是觀念，動手步驟在操作頁。每一節都是一句白話、一個可以按的東西、一行「所以在操作頁的第幾步」。全部在你的瀏覽器裡假裝，不連網、不碰你的試算表。看不懂的詞，第 8 節名詞表可以搜。
- 這週做的東西，一張圖
- 一票的旅程——六步，每步你看到什麼、背後在做什麼
- 試算表是機器的記憶體——本機預覽與雲端差在哪
- 存檔不等於上線——三顆按鈕按按看
- 授權畫面在問什麼——全勾、少勾會怎樣
- 誰可以存取：門開給誰
- 做完改一行：兩條路——模擬終端機
- 卡住了先看哪裡——選症狀
- 名詞表——可以搜
- 想一想——十題，揭曉看解釋
- 出處
小標籤＝這句話從哪裡抄來的：規格 §〇·…本週內容規格的硬事實表那一列；操作頁 第 N 步操作頁那一步；Google 官方·…頁尾那三條官方說明。
0 這週做的東西，一張圖
你會做一個手機投票網站，而且是你自己部署上線的。
題目是「哪一關想看老師再做一次？」，三個選項：找不到部署按鈕／送出後試算表沒新增一筆／同學的手機打不開。同學在手機按一下，你的試算表 Votes 就多一列；電腦按「更新票數」看計數。規格 §〇·這週做什麼規格 §〇·三個選項
點一站，看它做什麼、住在哪台電腦。
三層＝前端（手機看得到的畫面）／後端（跑在 Google 機房的 Code.gs）／資料儲存（試算表 Votes，不同裝置看同一張表）。規格 §〇·三層
所以在操作頁：開頭〈按下去，那一票去了哪裡？〉那三格，就是這四站的前三站。去看那三格
1 一票的旅程
按下「送出一票」之後，一票要走六步；畫面只負責轉述，帳記在試算表。
比喻只用這一次：畫面是餐廳的菜單和點餐單，後端是櫃台，試算表是帳本。規格 §四·比喻
你看到什麼
背後在做什麼
答：去試算表看 Votes 那一列。畫面只是轉述後端的話，帳在試算表。本週的三件驗收：手機能投票、試算表多一列、電腦按「更新票數」看得到新票數。規格 §〇·三件驗收
所以在操作頁：第 4 步〈手機送一票，電腦回來看〉，就是親手走這六步。去第 4 步
2 試算表是機器的記憶體
記憶體＝機器記東西的地方。這週是試算表；下週 Python 會來讀它。
直接用瀏覽器開 Index.html＝本機預覽，票只存在那個瀏覽器，別人看不到。正式投票只認 /exec，那時每一票都寫進同一張 Votes 表。規格 §〇·前端操作頁·本機預覽
Votes| 場次 | 選項 |
|---|
下週（W11）用 Python 讀你這張表：到時候 Python 是機器的大腦，試算表是記憶體。這週不講 Python 怎麼寫。規格 §〇·W11 接點
所以在操作頁：第 4 步用手機開 /exec 投一票，回電腦看 Votes 多一列。去第 4 步
3 存檔不等於上線
部署（deploy）＝把程式變成一個別人打得開的網址。版本（version）＝部署當時那份程式的快照。
開店掛招牌是部署；菜單改版重印、招牌不換，是出新版本。改了程式只按「儲存」，/exec 不會變；要「部署 → 管理部署作業 → 選原本的 → 編輯 → 版本：新版本 → 部署」，網址不變、內容更新。按成「新增部署作業」會多一條新網址，發出去的舊網址不會更新。規格 §〇·存檔≠上線Google 官方·版本更新
情境：你剛在編輯器把標題改成「下一段想看老師重做哪一關？」。按一顆按鈕，看手機會看到什麼。
/dev 試吃口看到的先按一顆按鈕。
/dev＝試吃口
測試部署作業的網址。只有專案編輯者打得開，永遠跑最新存檔。拿來驗收會誤判。
/exec＝正門
正式網址。跑「部署當時那個版本」，給同學用的是這條。認尾巴就好。
規格 §〇·/dev 與 /execGoogle 官方·部署說明
所以在操作頁：第 4 步「認尾巴就好，這次要的是 /exec」；改完程式照〈卡關時〉「我存了新程式，想更新同一個網址」做。去卡關時
4 授權畫面在問什麼
授權＝你簽名同意這支程式替你動試算表。Google 問一次，少勾一項它就做不到。
「Google 尚未驗證這個應用程式」＝Google 不認識這支程式，因為它是你自己剛貼的；不是壞掉。開試算表、授權、路線 A 登入，三次都用 W5 做 bot 的那個個人 Gmail（學校帳號的 Apps Script 可能被關掉）。操作頁 第 1 步
這張授權書的路：規格 §〇·授權畫面操作頁 第 3 步
- 需要授權
- 審查權限
- 選開試算表的那個個人 Gmail
- 尚未驗證（正常）
- 進階
- 前往 …（不安全）
- 有勾選框就每一項都勾
- 繼續
執行記錄
試算表
看到什麼算過：試算表多出 Votes 分頁，第一列「場次」「選項」。執行記錄說完成不算。規格 §〇·看到什麼算過
所以在操作頁：第 3 步「權限清單有勾選框就每一項都勾」。去第 3 步
5 誰可以存取：門開給誰
誰可以存取＝店門開給誰：只有我／要登入 Google 的人／所有人。
部署時還有一格「執行身分」選「我」：程式用你的權限寫你的表，同學只需要能開網站。規格 §〇·部署設定
三種門禁，選一個看看。
這週為什麼可以選「所有人」：表裡只有場次和選項、沒有任何個人資料，同學的手機不用登入就能投。以後的表如果會記名字或成績，就要縮小到「任何擁有 Google 帳戶的使用者」或更小。規格 §〇·誰可以存取三種操作頁 第 4 步
所以在操作頁：第 4 步「執行身分選『我』」「『誰可以存取』選『所有人』」。去第 4 步
6 做完改一行：兩條路
目標一樣：把投票板的標題改成「下一段想看老師重做哪一關？」，手機重新整理後看到新標題。兩條路同分。
路線 B＝瀏覽器問 AI，自己貼回編輯器，再出新版本。路線 A＝agent 加 clasp：agent 是會替你動手的 AI，改檔、下指令，但每一步你看計畫、你同意；clasp 是 Google 出的 Apps Script 命令列工具，讓 agent 把改好的程式直接推上你的專案、更新同一個網址。跟 W3 的 gh、W6 的 gws 同一套：它下指令、你同意。有自己的筆電、W6 或 W7 裝過 Node.js 的人走 A，其他人走 B。W6 的 gws 登入還在的人，做完還能叫同一個 agent 用 gws 讀 Votes 分頁數票（只准讀），操作頁路線 A 底下的〈延伸〉有寫。規格 §〇·兩條路規格 §〇·clasp 是什麼
Code.gs，請它找出 BOARD_TITLE，改成新標題，列出原本和改完的那一行。/exec 重新整理，看到新標題。操作頁·路線 B
winget install --id OpenJS.NodeJS.LTS -e --accept-package-agreements --accept-source-agreements --silent $env:PATH += ";$env:ProgramFiles\nodejs;$env:APPDATA\npm" npm install -g @google/clasp裝過 Node.js 的只要最後一行。
clasp login，瀏覽器跳出來，選同一個個人 Gmail。再到設定頁把 Google Apps Script API 切成開啟。指令碼ID，在空資料夾打 clasp clone-script 貼上指令碼ID。會多出 Code.js、Index.html、appsscript.json；.gs 變 .js 是正常的。BOARD_TITLE，先列計畫等你同意，改完 clasp push -f。先看計畫、再看改了哪幾行、不對就退回。clasp list-deployments，找有版本號的那個 部署ID，再打 clasp create-deployment -i 貼上部署ID -d v2。手機重新整理看到新標題。clasp logout，登入檔等於鑰匙。.clasp.json 不要放進 git。規格 §〇·路線 A 六步規格 §五·逐字區Google 官方·clasp
模擬終端機：三個指令各做了什麼
模擬：不是真的終端機，按了不會動你的專案（按上面的指令，這裡會印出它做了什麼。）
只 push 不更新部署，手機看到的永遠是舊版。規格 §〇·路線 A 最常錯
所以在操作頁：〈做完再請 AI 改一行：兩條路同分〉。去兩條路
7 卡住了先看哪裡
卡住先查三件：網址是不是 /exec、「誰可以存取」是不是「所有人」、改了程式有沒有出「新版本」。
規格 §〇·手機打不開先查兩件手記·11:10
多半是
先查什麼
所以在操作頁：〈卡關時先看這裡〉每一條都對得上。去卡關時
8 名詞表
只放這週用到的詞，每個一句白話，加上「這週在哪一步碰到」。
- 前端（front end）
- 手機看得到、按得到的畫面。這週：
Index.html，第 2 步貼進去。 - 後端（back end）
- 跑在 Google 機房的那支程式，收單、檢查、記帳。這週：
Code.gs，第 2 步貼進去。 - 資料儲存
- 試算表
Votes，一票一列；誰開都是同一張。這週：第 3 步執行後長出來。 - 記憶體
- 機器記東西的地方；這週是試算表，下週 Python 來讀它。這週：第 2 節。
- 部署（deploy）
- 把程式變成一個別人打得開的網址。這週：第 4 步。
- 版本（version）
- 部署當時那份程式的快照；改了程式要出新版本，網址才會更新。這週：〈卡關時〉「想更新同一個網址」。
- 新增部署作業
- 再開一條新網址；舊網址不會跟著更新。這週：別按錯，第 3 節。
/dev、/exec- 試吃口（只有編輯者、永遠最新存檔）／正門（給同學、跑部署版本）。這週：第 4 步認尾巴。
- 授權
- 你簽名同意這支程式替你動試算表；Google 問一次，少勾一項它就做不到。這週：第 3 步。
- 尚未驗證
- Google 不認識這支程式，因為它是你自己剛貼的；不是壞掉。這週：第 3 步授權畫面。
- 誰可以存取
- 店門開給誰：只有我／要登入 Google 的人／所有人。這週：第 4 步選「所有人」。
- 更新票數
- 再問一次後端「現在幾票」。這週：第 4 步最後一下。
- agent
- 會替你動手的 AI：改檔、下指令，但每一步你看計畫、你同意。這週：路線 A 第 ④ 步。
- clasp
- Google 的 Apps Script 命令列工具；讓 agent 把程式推上你的專案、更新同一個網址。像跑腿送菜單到店裡。這週：路線 A。
- 命令列（終端機）
- 用打字下指令的那個黑視窗（PowerShell）。這週：路線 A 第 ① 步。
指令碼ID／部署ID- 專案的門牌號／那條網址的門牌號；抓專案用前者、更新網址用後者。不要貼進作業或公開頁面。這週：路線 A 第 ③、⑤ 步。
規格 §四·白話與比喻
9 想一想：十題，先猜再揭曉
答案都在上面九節裡。先選再按「揭曉」；選項每次重新整理會換順序。分數只存在這台瀏覽器。
10 出處
- 操作頁
student.html：四步、〈做完再請 AI 改一行〉路線 A／B、〈卡關時〉總表。本頁標籤寫「操作頁 第 N 步」的，就是那一步。 - 教師手記
teacher-notes.md：〈上課安排〉11:10 那列「手機打不開先查兩件」、〈卡點與救援〉、〈路線 A 的設計與實測〉。 - 本週內容規格
內容規格.md§〇 硬事實表：本頁標籤寫「規格 §〇·…」的，就是那一列；白話與比喻抄 §四，指令抄 §五。 - Google 官方三頁（跟操作頁頁尾同三條）：部署說明（網頁應用程式、測試部署作業的
/dev）、版本更新說明（管理部署作業 → 新版本）、clasp 說明。
這一頁沒有接 AI、不收集任何資料，離線打得開。每個模擬都是在你的瀏覽器裡假裝，不會動你的試算表或專案。