Vibe Coding - Google Sheet + App Script 打造專屬免費報到系統
下一個可以拿來實作、真正解決身邊問題的系統會是什麼？
固定運作、現場流程可以更好的活動
我有一個固定參加的台大精煉讀書會，會員資格為期一年，是兩個月一次的定期付費活動，期滿可以再續報下一年，目前已經邁入第12屆。
每年大約招收兩百個會員。兩個月一次的活動，實際參與的人數，大約落在一百六十人上下。
因為是付費活動，就必須有現場的報到及領取識別證的流程，來做會員身分的審核。
代位機制 - 小複雜的報到需求
精煉讀書會有一個彈性機制：
活動是付費的，但允許會員安排代位出席。
也就是當會員本人因事無法出席時，可以將席位指定讓其他人來參加。
這樣的制度設計其實很彈性，但也直接影響到現場報到流程：
• 現場需要清楚知道「誰是正式會員」：一年的活動中會發放兩本書，需要是正式會員才能領書
• 哪些人是「代位出席」：代位人可以參與活動，但不能代替正式會員領書，身分必須要有清楚的標示
所以，報到的功能不僅只是簽到而已，而是牽涉到身分辨識與後續權限。
用會員編號報到 - 可是記不得會員編號
過去我們是用會員編號搭配 Google 表單完成現場報到，簡單且免費。但現場的實務上，容易遇上以下問題：
沒人記得會員編號，但需要用會員編號來搜尋。
• 會員編號的規則：三碼的會員編號(1-200號)，活動兩個月才一次，大部分會員其實不太記得自己的編號。
• 之前的 Google 表單是用下拉選單搜尋會員編號來報到：下拉選單找名字很花時間
• 現場識別證是依照會員編號排列
之前因此需要在現場常常得另外貼一張編號對照表，增加不少混亂。
AI讓小開發不再困難
剛好我之前有開發過名片辨識系統，發現 google 的 app script 有很多強大的功能。
再加上最近我剛成為了 Gemini Pro 的用戶，就開始嘗試，有沒有可能開發一套系統：
○ 可以永久免費使用
○ 又能符合現場「快速報到」的需求
○ 不需要會員記得任何編號
我就這樣一邊跟 Gemini 討論、一邊把需求拆解，慢慢把流程拼出來。
以下就是這套系統實際的功能及設定方式：
簽到系統：包含現場簽到及人數統計
簽到系統的 Google sheet 及相關程式碼，可由以下網址直接複製：https://docs.google.com/spreadsheets/d/1Xcq5QLKRcKJb9nHqpLi9bSgiWJ_8FjztiMQ63e0BGJQ/copy
(裡面的會員名字都是AI生成的假名)
下載前想先看看效果的話
在 google sheet 的「使用說明」中，也有介面的介紹。
在活動結束之後，只需要另外備份資料，並將此份表單清空，就可以再使用一次，永久免費。
(有關重複使用的方式後面會再詳述)
簽到頁面：
1. 用手機打開簽到頁面，需要 4 秒左右的名單載入時間(依網速而定)，此時會顯示：
2. 出現人數 (160人)時，代表名單已經載入，可以開始搜尋
3. 使用編號或姓名任何一個字，就可以帶出名單 (此處都是假名示意)，點選簽到以後，會出現確認頁面
4. 手機出示頁面就可以跟工作人員領取識別證
5. 代位報到也是一樣的邏輯
6. 代位確認頁面會以不同顏色標示，方便識別身分
部署方式
如果未來希望自行使用，複製下檔案後，需要進行部署的程序，才能實際得到自己專屬的使用網址
示範檔請參考：https://docs.google.com/spreadsheets/d/1Xcq5QLKRcKJb9nHqpLi9bSgiWJ_8FjztiMQ63e0BGJQ/copy
1. 點選：擴充功能-> Apps Script
裡面會內含三部分的程式碼
- 程式碼.gs：主要運行的程式碼
- Index.html：現場報到使用的網址
- Admin.html：工作人員看的後台系統，可即時統計已報到人數
2. 點選畫面右上方的「部署」->新增部署作業
3. 部署方式，點選設定圖示->網頁應用程式->存取改為「所有人」->「部署」
4. 依照畫面授予google帳戶存取權
5. 因為是自行開發的程式，沒有經過官方認證，會跳出警示；在此選擇「Advanced」->「Go to 簽到(unsafe)」，接下來依序完成認證即可
6. 部署作業完成之後，請複製網頁應用程式裡面的網址，會是以 /exec 結尾的一串網址
這一串就是現場可以用來做報到的網址
例如示範檔案的現場報到連結就是： https://script.google.com/macros/s/一大串/exec
7. 報到統計後台：把上述網址的結尾手動由「/exec」改為 「/exec?page=admin」
https://script.google.com/macros/s/一大串/exec?page=admin
8. 再次使用：
由於不同的 google sheet 部署後會產生不同的網址，會造成每次需要重新給網址的麻煩
更好的作法是，在這次活動結束後，按另存副本，把此次的紀錄另外存下來後；清空這個檔案裏面的「報到名單」及「出席意願調查」，就可以重複使用了
開發心得
在過去，如果沒有程式開發背景，要自己寫程式、開發系統，幾乎是不可能的事情。
但現在有了 AI 的協助，整個開發過程變得非常迅速，也不再那麼有距離感。
上一次我主要是使用 ChatGPT 這個平台來協助開發；而這一次，因為剛加入 Gemini Pro，便改用了這個平台。實際使用後，我覺得兩個平台在「協助修改程式碼」這件事情上，有一個蠻明顯的差異。
ChatGPT 在修訂時，通常只會提供在那一小段需要修改的程式碼，並且會詢問是否需要提供整段；
而 Gemini Pro 則比較傾向於在每一次修改時，直接重新貼給你一整份完整的程式碼。
對我來說，一鍵複製整段程式碼當然很方便，但同時也會擔心：
會不會有其他我沒有注意到的地方，在這個過程中被一起改動，最後反而導致整個系統出現問題。
因此我會覺得，這兩個平台在「提供資料的方式」上，其實各有不同，也需要使用者花一點時間去熟悉、去適應。
因為已經有過一次實作經驗，這次在開發流程上的節奏明顯快了很多。
我也很意外地發現，Google Apps Script 本身就可以做出一個堪用的 HTML 介面，而且只要透過 google sheet 分享出去，就能簡單使用，不需要額外學習其他的介面。
這讓我重新意識到，其實有很多需求，未必需要透過開發App、python來完成。
對我來說，AI 真正改變是把程式開發這件事，變成一件可以嘗試也不那麼可怕的事情。
並不是所有功能都需要從零開始自己寫，有些情境其實已經有很好用的小工具可以直接搭配使用；
而當真的遇到比較特殊的需求時，就可以透過 AI 來補上這一塊。
這樣的開發過程對我來說非常有趣，
也讓我開始期待，接下來再用同樣的方式，做出其他真正解決問題的小系統。
留言
張貼留言