2025年12月3日 星期三

[Google教學] 門診叫號系統範例:解決協作平台試算表顯示延遲問題

今天這篇教學要分享的是**「門診叫號範例」**。這是在回應網友關於在 Google 協作平台(Google Sites)上嵌入 Google 試算表(Sheets)時遇到的一個常見痛點。

為什麼需要這個解決方案?

當你直接在 Google 協作平台插入 Google 試算表時,顯示的數據通常會有 5分鐘左右的時間差(快取)。對於需要即時顯示的「叫號系統」來說,這5分鐘的延遲是無法接受的。此外,協作平台本身並沒有提供「自動重新讀取」的功能。

為了解決這個問題,我開發了一套使用 Google Apps Script (Web App) 搭配前端 HTML 語法的解決方案,並增加了一個「重新查詢」的按鈕,讓使用者可以點擊後秒速更新最新的叫號資訊。


實作步驟教學

第一步:建立 Google 試算表 (後端資料庫)

首先,你需要一個試算表來儲存叫號資訊。你可以直接複製我的範例檔案。

  1. 取得範例檔案:([連結至你的範例試算表])。

  2. 建立副本:點擊連結後,系統會提示你「建立副本」。請點選建立,這樣檔案才會存到你的 Google Drive 中,你才有編輯權限。

  3. 理解資料結構

    • 我們使用 QUERY 函數(例如在工作表「顯示畫面」中)將原始數據整理成我們想要顯示的格式(例如 B1 到 D4 的範圍)。

    • 這樣做的好處是,後端程式碼只需要抓取這個範圍,不需要去處理複雜的邏輯,你可以在試算表端自由調整要顯示的欄位。

第二步:設定 Google Apps Script (API 服務)

我們要利用 Apps Script 將試算表的資料轉換成網頁可以讀取的 JSON 格式。

  1. 在你的試算表中,點擊上方選單的 「擴充功能」 -> 「Apps Script」

  2. 你會看到我已經寫好的程式碼(doGet 函式)。這段程式碼主要功能是讀取「顯示畫面」工作表的資料,並以 JSON 格式回傳。

    • 注意:如果你的工作表名稱有改動,程式碼中的 

  3. 部署程式

    • 點擊右上角的 「部署」 -> 「新增部署」

    • 選取類型:選取「網頁應用程式」。

    • 說明:可以輸入版本號(如 v1.0)。

    • 執行身分:選擇「我自己」。

    • 誰可以存取請務必選擇「所有人」(這樣前端網頁才讀取得到資料)。

    • 點擊 「部署」

  4. 授權存取

    • 首次部署會跳出授權視窗,點選「授權存取」。

    • 選擇你的 Google 帳號。

    • 若出現「Google 尚未驗證這個應用程式」,請點選 「進階」 -> 「前往... (不安全)」 -> 「允許」

  5. 取得網址:部署成功後,會產生一串 「網頁應用程式網址」,請將這串網址複製下來,等等會用到。

第三步:準備前端程式碼 (HTML/JS)

接下來我們要處理顯示在協作平台上的介面。

  1. 取得前端程式碼範例(請參考文章下方的程式碼區塊或範例檔)。

  2. 關鍵修改

    • 找到程式碼中的 var url = "..." 這一行。

    • 將引號內的網址,替換成你在第二步剛剛複製的「網頁應用程式網址」

    • 這一步非常重要,否則你會讀取到我的範例資料,而不是你自己的資料。

第四步:嵌入 Google 協作平台

最後,將做好的介面放到你的網站上。

  1. 進入 Google 協作平台,開啟你的網站專案。

  2. 在右側工具列選擇 「插入」 -> 「內嵌」

  3. 選擇 「內嵌程式碼」

  4. 將修改好網址的 HTML 程式碼完整貼上。

  5. 點擊 「下一步」 -> 「插入」

  6. 調整區塊的大小以符合版面。


成果展示與測試

完成後,你可以發布網站或預覽。

  1. 在試算表中修改「目前叫號」的數字(例如從 2 改成 3)。

  2. 回到協作平台網頁,點擊我們自製的 「重新查詢」 按鈕。

  3. 你會發現下方的表格內容與更新時間會在幾秒鐘內同步更新,完全不需要等待 Google 預設的 5 分鐘快取時間。

進階功能:每日自動歸零 (選用)

在 Apps Script 的程式碼中,我也有包含一段排程程式碼(reset_number)。如果你希望每天凌晨自動清空叫號紀錄,可以在 Apps Script 的「觸發條件」中設定每日定時執行該函式,系統就會自動將叫號歸零。


常見問題 Q&A

Q: 為什麼我更新了資料,按查詢卻沒變?
A: 請檢查前端 HTML 程式碼中的 url 是否已經換成你自己部署的網址。如果你是用複製的方式,記得要重新部署以取得新的權限。

Q: 我可以顯示更多欄位嗎?
A: 可以。你只需要在 Google 試算表的「顯示畫面」工作表中,利用 QUERY 或其他公式調整你要顯示的範圍(程式碼預設抓取整個表格範圍),前端就會自動顯示出來,不需要修改 Apps Script。


希望這個範例能幫助到需要製作簡易叫號系統的朋友們!如果有任何問題,歡迎在下方留言討論。 



沒有留言:

張貼留言

注意:只有此網誌的成員可以留言。

[Google教學] 門診叫號系統範例:解決協作平台試算表顯示延遲問題

今天這篇教學要分享的是**「門診叫號範例」**。這是在回應網友關於在 Google 協作平台(Google Sites)上嵌入 Google 試算表(Sheets)時遇到的一個常見痛點。 為什麼需要這個解決方案? 當你直接在 Google 協作平台插入 Google 試算表時,顯...