按下去,那一票去了哪裡?
前端(front end)
Index.html 是手機看得到的畫面。它把你選的按鈕交給後端,也顯示票數。
後端(back end)
Code.gs 跑在 Google 的伺服器上。它確認收到的是三個選項之一,再存票和算票。
資料儲存(storage)
Google 試算表每票加一列,只記場次和選項。不同裝置看的都是這張表的票數。
部署(deployment)就是把這套程式放到一個網址,讓別人也能用。W5 的 bot 走的是同一套:Apps Script 當後端、試算表當儲存;這次多了一個你自己的畫面。
可跳過:開啟本機預覽看看按鈕長什麼樣。預覽按的票不會進練習表,正式投票只認 /exec。想知道每一步為什麼這樣做,開觀念頁:一票的旅程、存檔不等於上線、授權畫面在問什麼,都可以按著玩。
1建自己的空白試算表
- 用電腦登入 Google,用 W5 做 bot 的那個個人 Gmail(學校帳號的 Apps Script 可能被管理員關掉)。開啟 Google 試算表,新增一份空白試算表。
- 把檔名改成「班級求援板練習」。這是今天專用的練習表。
- 在試算表上方按「擴充功能」→「Apps Script」,會在另一個分頁打開編輯器。試算表分頁先留著。
看到這裡就對了。 一個分頁是空白試算表,另一個分頁是 Apps Script 編輯器。
2把兩份程式貼到對的檔案
畫面放在 Index
在左側「檔案」旁按「+」,選「HTML」,輸入 Index(大寫 I、一字不差,後端會照這個名字找畫面)。開啟新增的 Index.html,把原有的範例整段換成起步檔 Index.html 的內容。
查看 Index.html 原始碼
若從下載檔複製,請用記事本或其他純文字編輯器開檔。兩份程式都貼完後,在 Apps Script 按上方的儲存圖示(或 Ctrl+S)。
3執行一次,讓程式準備好試算表
- 在 Apps Script 點回左側的指令碼檔。在上方「執行」旁的函式下拉選單,選
setupHelpBoard,再按「執行」。 - 跳出「需要授權」→「審查權限」→ 選剛才用來開這份試算表的那個個人 Gmail → 看到「Google 尚未驗證這個應用程式」是正常的,這支程式是你自己剛貼的 → 左下「進階」→「前往 …(不安全)」→ 權限清單有勾選框就每一項都勾 →「繼續」。跟 W5 做 bot 時按過的授權畫面一樣;拿不準要按哪一個,先找老師。
- 切回試算表,找底部的
Votes分頁。必要時重新整理試算表。
先看資料再往下走。 Votes 的第一列應該有「場次」和「選項」兩個欄名。看得到再進下一步。
4部署後,換一台裝置投一票
拿到網站網址
- 在 Apps Script 右上角按「部署」→「新增部署作業」。按「選取類型」旁的齒輪,選「網頁應用程式」。
- 執行身分選「我」,讓程式用你的權限寫入練習表。同學只需要能開網站。
- 「誰可以存取」選「所有人」,跟 W5 的 bot 一樣。這張表只記場次和選項、沒有任何個人資料,所以可以開給所有人,同學的手機不用登入就能投。以後的表如果會記名字或成績,就要縮小到「任何擁有 Google 帳戶的使用者」或更小。
- 按「部署」,複製網頁應用程式的網址。認尾巴就好,這次要的是
/exec。先試投,再交網址。
手機送一票,電腦回來看
- 先在電腦開
/exec,看一下目前票數。 - 用手機開同一個
/exec網址(選了「所有人」就不用登入),選一項送出一次。也可以請旁邊的同學用他的手機幫你投。 - 回電腦看試算表的
Votes。底下應該多一列,選項對得上剛才投的那一項。 - 在電腦的網站按「更新票數」,確認剛才選的那一項多一票。老師請你交網址時,交這個
/exec。
做到這裡就完成。 手機能投票、試算表多一列、電腦按「更新票數」看得到新票數。
做完再請 AI 改一行:兩條路同分
目標一樣:把投票板的標題改成「下一段想看老師重做哪一關?」,手機重新整理後看到新標題。有自己的筆電、W6 或 W7 裝過 Node.js 的人走路線 A;其他人走路線 B。兩條路同分。
路線 B:瀏覽器問 AI,自己貼回去
用你手邊的 AI 工具,貼上起步檔的 Code.gs 來問。
請找出這份程式裡的 BOARD_TITLE,把標題改成「下一段想看老師重做哪一關?」。請列出原本和改完的那一行。
確認 AI 指的是畫面上看得到的那一行,再自己貼回編輯器。要讓手機看到改版,照〈卡關時〉的「我存了新程式,想更新同一個網址」做。
路線 A:讓 agent 改程式、自己推上線
W3 讓 agent 用 gh 替你按 GitHub 的按鈕,W6 用 gws 讀雲端硬碟。這次換 clasp,Google 出的 Apps Script 命令列工具:agent 改完程式,可以直接推上你的專案、更新同一個網址,不用再複製貼上。
- 裝 clasp(只做一次;教室機重開會消失,當天再貼一次)。開 PowerShell 貼這三行:
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
W6、W7 裝過 Node.js 的筆電只要貼最後一行。你應該看到:新開一個 PowerShell 視窗打clasp -v,出現版本號。 - 登入、開 API。打
clasp login,瀏覽器會跳出來,選跟練習表同一個個人 Gmail、按允許,終端機說已登入。再開 script.google.com/home/usersettings,把「Google Apps Script API」切成開啟,不開的話下一步會被擋。 - 把專案抓下來。在 Apps Script 編輯器左側按齒輪「專案設定」,複製「指令碼 ID」。新建一個空資料夾,在裡面開 PowerShell 打
clasp clone-script 貼上指令碼ID(ID 接在指令後面、同一行,不是先按 Enter 再貼)。你應該看到:資料夾裡多出Code.js、Index.html、appsscript.json。後端的副檔名從 .gs 變 .js 是正常的,內容一樣。 - 交給 agent。用 Antigravity 或 Codex 開這個資料夾,用自己的話講目標,例如:「把 Code.js 裡的 BOARD_TITLE 改成『下一段想看老師重做哪一關?』,先列計畫等我同意;改完先給我看改前改後的對照,我說可以再執行 clasp push -f 推上去。」W3 的規矩照用:先看計畫、再看 diff、不對就退回一次。push 會用電腦上的檔整份蓋掉雲端,所以之後只在電腦上改。
- 更新同一個網址。打
clasp list-deployments,找到有版本號和說明的那個部署 ID(另一個顯示@HEAD、沒版本號的是測試用;有兩個以上就對照手機正在用的網址裡那串)。再打clasp create-deployment -i 貼上部署ID -d v2。你應該看到:終端機印出同一個 ID,後面接 @2;手機重新整理看到新標題。只 push 不更新部署,手機看到的永遠是舊版。 - 收尾。教室機下課前打
clasp logout,把這台電腦上的 clasp 登入拿掉(登入檔等於鑰匙)。想把程式放進 W3 的 repo 可以,但.clasp.json不要進 git。
路線 A 做到這裡就完成。 手機重新整理看到新標題、clasp list-deployments 的版本號變了、試算表裡原本的票還在。
延伸(選做):W6 的 gws 還在?叫 agent 幫你數票
clasp 管程式,gws 管資料。W6 在自己筆電裝好 gws、登入還在的人,可以讓同一個 agent 順手把票數算出來;沒有的人跳過,不用為了這段重裝。
- 先確認還能用。打
gws auth status,scopes裡要有spreadsheets。說沒登入、或清單裡沒有,這段就跳過(教室機的還原卡會清掉 W6 裝的東西)。 - 跟 agent 講目標。練習表網址裡
/d/後面那一串就是試算表 ID。對 agent 說:「用 gws 讀我這張試算表的 Votes 分頁,算每個選項各幾票給我看。只准讀,不准改、不准刪。」它要下的指令長這樣,想自己打就貼這一行(引號照打):gws.cmd sheets spreadsheets values get --params '{\"spreadsheetId\":\"貼上試算表ID\",\"range\":\"Votes!A:B\"}' - 你應該看到:兩欄「場次、選項」,一列就是一票。agent 數出來的票數要跟網頁按「更新票數」的一樣,不一樣以試算表為準。它想跑
update、append、delete,一律回「只准讀」。
老師 11:35 換場次推上線後,可能也用這招當場數票。下週 W11 換 Python 來讀同一張表。
卡關時先看這裡
下拉選單找不到 setupHelpBoard
點左側的指令碼檔(通常叫「程式碼.gs」,檔名不用改),確認 Code.gs 的內容貼在這裡。按儲存,等一下再看選單。
執行顯示完成,卻沒有 Votes 分頁
確認目前看的就是第一步建的練習表,重新整理一次。還是沒有,多半是授權畫面少勾了:到 Google 帳戶的「第三方應用程式與服務」 找到這個專案 →「刪除所有連結」(按鈕名以畫面為準)→ 回編輯器重跑 setupHelpBoard → 這次每一項都勾。看到 Votes 兩個欄名才算過,執行記錄說完成不算。
手機說沒有權限,或網站開不出來
先看網址是不是 /exec 結尾。再到「部署」→「管理部署作業」看「誰可以存取」是不是「所有人」(不是「任何擁有 Google 帳戶的使用者」);改了要選「新版本」再部署。網頁寫找不到 Index 之類的字,回第二步看 HTML 檔名是不是一字不差的 Index。
改程式後不小心又按了「新增部署作業」
會多出一個新的 /exec 網址。回「部署」→「管理部署作業」用原本那一個;多出來的可以封存。
我存了新程式,想更新同一個網址
先儲存,再走「部署」→「管理部署作業」→選原本的部署→按編輯。把版本改為「新版本」,再按「部署」。重新整理原本的 /exec 檢查新畫面。
路線 A:打 clasp 跳「因為這個系統上已停用指令碼執行」
PowerShell 擋住了 npm 裝的 clasp.ps1。把指令開頭改成 clasp.cmd(例如 clasp.cmd login),其餘不變;npm 被擋就改 npm.cmd。
路線 A:打 clasp 說「不是內部或外部命令」或「無法辨識」
這個視窗還沒讀到剛裝好的程式。再貼一次 $env:PATH += ";$env:ProgramFiles\nodejs;$env:APPDATA\npm",或關掉 PowerShell 重開一個再打 clasp -v。
路線 A:push 說 User has not enabled the Apps Script API
這個帳號的 Apps Script API 開關沒開。到 script.google.com/home/usersettings 切成開啟,等一分鐘再 push。
路線 A:clasp login 的瀏覽器沒跳出來
把終端機印出來的那串網址自己貼到瀏覽器開。還是不行就打 clasp login --no-localhost,照畫面把代碼貼回終端機。
路線 A:push 成功了,手機還是舊的
push 只更新程式,網址跑的是部署當時的版本。照路線 A 第 5 步 clasp create-deployment -i 部署ID -d v3 更新同一個部署;更新完用無痕視窗開一次,確認「誰可以存取」還是「所有人」。
路線 A:我在編輯器也改了,push 之後不見了
push 是用電腦上的檔整份蓋掉雲端。要以雲端為準,先確認電腦上沒有要保留的修改,再 clasp pull 抓下來改,之後只在電腦上改。