Vibe Coding 實戰：用 Google 試算表輕鬆搞定「線上點名系統」

不論是老師或活動主辦人，時常會遇到手忙腳亂的點名狀況，這篇教學會要用最流行的 Vibe Coding，單純靠 Google 試算表搭配 Google Apps Script，快速又輕鬆的打造一個多功能的「線上點名系統」，不僅可即時同步 Google 試算表，更能即時查看出缺勤狀態喔！

更多參考：Vibe Coding 全方位開發導讀

快速導覽：

• Step 1、使用 Google 試算表建立點名單樣板
• Step 2、Vibe Coding 點名單程式碼
• Step 3、Apps Script 部署網頁應用程式
• Step 4、測試點名單功能，並查看 Google 試算表
• 如何刪除部署的專案
• 相關注意事項

教學影片

搭配教學影片一起閱讀，效果會更好！歡迎大家訂閱 STEAM 教育學習網的 Youtube 頻道。

前往：https://www.youtube.com/@steam.oxxostudio

Step 1、使用 Google 試算表建立點名單樣板

在自己的 Google 雲端硬碟，按照下列步驟建立試算表 ( 不一定要完全照教學的方法做，但提供給 AI 提示詞必須清楚描述自己的試算表結構 )：

• 建立一個資料夾。
• 在資料夾中建立一份名為「名單」的 Google 試算表。
• 試算表的第一列是標題 ( 只有 A 欄是姓名，B 之後的欄位都會自動填上日期 )。
• A 欄位從第二列開始就是人名，下方工作表則是科目名稱
• 每一個工作表都是同樣的格式。

Step 2、Vibe Coding 點名單程式碼

開啟自己常用的生成式 AI 工具，準備透過 Vibe Coding 產生對應的網頁，首先確認點名單要有哪些功能：

• 會自動讀取名單，用勾選的方式確認出席狀況。
• 可以選擇科目和日期，預設是今天的日期。

確認需求之後，就可以使用下面的提示詞產生網頁，如果是使用 Gemini 進行 Vibe Coding，也可以串聯 Google 雲端硬碟，將名單的 Google 試算表提供給 AI 參考。。

更多參考：Vibe Coding 實戰：利用 Google Apps Script 打造免費網頁部署基地、AI 時代的輕量級後端：當 Vibe Coding 遇上 Google Sheets

請幫我產生一個 apps script 點名單網頁
- apps script 為獨立檔案，會串接位於同一個目錄裡的名為「名單」google 試算表。
- google 試算表的第一列是「標題」，第一欄是「姓名」，例如：A1 內容是「姓名」，A2 是「多啦A夢」、A3 是「大雄」，依此類推。
- 除了 A 欄，B 之後的欄位的第一列的標題都是「日期」，第二列之下都用打圈「O」來表現是否出席。
- 試算表中的工作表名稱為「科目」，例如「國語」、「數學」。
- 網頁中請自動串接科目，用點選的方式切換科目。
- 提供日期選單，預設為今日。
- 自動抓取該科目裡的人名，使用 check box 的方式，勾選就表示這個人已經出席，並自動在試算表中更新這個人的出席狀況。
- 試算表範例請參考附件。
- 前後端分離。
- 使用簡潔大方的扁平化設計風格。

完成後應該可以看到「後端程式碼」，待會要複製貼上到 Apps Script 的「程式碼.gs」檔案中。

還有「前端程式碼」，待會要複製貼到到 Apps Script 的「Index.html」檔案中。

Step 3、Apps Script 部署網頁應用程式

進入剛剛的資料夾，在資料夾裡新增並開啟一個「Apps Script」( 和剛剛的 Google 試算表位於同一個資料夾裡 )。

複製剛剛產生的「後端程式碼」，貼到 Apps Script 的「程式碼.gs」檔案中。

點擊左側「+」按鈕，新增「HTML 檔案」，檔名設定為「Index」( 不用加上 .html，但需注意大小寫，要與剛剛 AI 產生前端程式碼的檔名相同 )。

複製剛剛產生的「前端程式碼」，貼到 Apps Script 的「Index.html」檔案中。

儲存檔案之後，按下右上角的「部署」，選擇「新增部署作業」。

點擊小齒輪圖示，選擇部署為「網頁應用程式」，並將「誰可以存取」設定為「所有人」。

因為這個網頁應用程式會存取 Google 試算表，所以需要進行一些「授權」動作，按照下圖不斷點擊授權按鈕即可 ( 最後出現授權同意畫面後，按下「Continue」按鈕 )。

最後就會看到一串網頁應用程式的「網址」，點擊或分享這個網址，就可以開始進行點名或查看出缺勤狀況！

Step 4、測試功能點名單，並查看 Google 試算表

點擊並開啟網址，可以看見切換科目、日期和可以勾選出缺席的名單，這時就可以嘗試勾選人名，或者切換科目和日期。

當確定點名完成後，開啟剛剛的點名單 Google 試算表，就可以看見每個科目中，每個人的出缺席狀況。

如何刪除部署的專案

因為部署的 Apps Script 並不會因為檔案被刪除就跟著被刪除，如果要永久移除網頁應用程式，建議可以透過 Google 個人帳號裡的「連結的應用程式」進行移除。

進入「連結的應用程式」之後，選擇剛剛部署的專案。

當確定點名完成後，開啟剛剛的點名單 Google 試算表，就可以看見每個科目中，每個人的出缺席狀況。

點擊「全部刪除」，就可以刪除這個專案。

相關注意事項

使用 Google Apps Script 雖然可以快速又方便的產生頁面，但需要特別注意「安全性」，因為 Apps Script 產生的網頁應用程式無法進行「保護」，所以「任何人」都可以透過這個網址修改點名單內容，所以如果要讓 Apps Script 更具有安全性，建議可以額外增加輸入「帳號密碼」的功能，避免有心人士破壞。

參考：Vibe Coding 實戰：利用 Google Apps Script 打造免費網頁部署基地

此外，因為 Google Sheets 並不是標準資料庫，透過 Google Apps Script 讀寫檔案的速度比較慢，如果是正式上線產品，建議仍要使用標準資料庫的做法。

參考：AI 時代的輕量級後端：當 Vibe Coding 遇上 Google Sheets

小結

隨著 Vibe Coding 的出現，徹底打破了程式開發的專業壁壘。在過去，要做出一個串接資料庫、擁有後台管理、同時具備美觀 RWD ( 響應式 ) 排版的訂餐網頁，至少需要前端與後端工程師協作數天、甚至數週。而今天只要透過 Google Sheets、Apps Script，不需要任何語法基礎，就可以輕鬆打造輕量級產品。

延伸閱讀

Vibe Coding 的重點都不在於「寫程式」，而是為了配合程式的各種「準備工作」，下方列出 Vibe Coding 相關的教學，透過一系列的教學，就更能掌握正確且順暢的開發流程:

• 認識 Vibe Coding：程式不再是拼邏輯，而是拼「感覺」
• Vibe Coding 新手入門：從藍圖規劃到 AI 開發的思維轉型
• Vibe Coding 重要的準備工作：架構流程圖
• Vibe Coding 網頁必備知識：開發者的「溝通工具箱」
• Vibe Coding Python 必備知識：AI 與 Colab 開啟程式直覺
• Vibe Coding 固定網頁樣式：解決樣式不一致的惱人問題
• Vibe Coding 圖片處理心法：從雲端空間到 Base64 的完美配置
• Vibe Coding 玩家必備的 SVG 進階操作指南
• Vibe Coding 字體指南：用文字風格定義網頁靈魂
• 下載 Vibe Coding 網頁程式碼，掌握程式碼的主導權
• Vibe Coding 實戰：利用 Google Apps Script 打造免費網頁部署基地
• Vibe Coding 實戰：使用 GitHub 部署你的網頁作品
• AI 時代的輕量級後端：當 Vibe Coding 遇上 Google Sheets
• 從靈感到即時同步：Vibe Coding 遇上 Firebase Realtime Database
• 數位靈魂的存放處：Vibe Coding 串接 Firebase Firestore
• 拒絕資料裸奔！Vibe Coding 必備 Firebase App Check 安全防護指南
• Vibe Coding + Firebase Authentication 打造順暢的註冊登入體驗
• Vibe Coding 將 Google Drive 變身最強檔案後端
• 靈感即程式：用 Gemini API 開啟你的 Vibe Coding 新時代
• Vibe Coding 極速打造 LINE Bot 智慧機器人
• Vibe Coding 實戰：免寫程式！把 Google 試算表變成超精美點餐系統
• Vibe Coding 實戰：用 Google Drive 輕鬆打造「檔案＆作業上傳系統」
• Vibe Coding 實戰：用 Google 試算表輕鬆搞定「線上點名系統」
• Vibe Coding 實戰：打造自己的英文單字卡！

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～