用 Google App Script 建立預約系統 - 串接 Google Sheet 與 Google Calendar

使用 GAS 作為 API,作為 Google 資源的自動化

最近開始借用 TJO 的團練室練習,能在一個設備齊全又舒適的地方彈琴或討論事情,實在是很舒服
上週練完之後也跟老師稍微哈拉了一下,並確認要怎麼付款、預定(我傳訊息 booking 後就沒有回覆)
才知道近期人力變動,整理場地的人員還沒開始交接,以至於還沒 Check 我的狀況就讓我先來團練\

閒聊之虞也大概瞭解了目前租借的流程,團練室目前有三個,暫時是開放給熟人並且做會員制度,流程如果列出來的話如下\

  1. 會員透過匯款購買時數,
  2. 會員從一份人工維護的 Google Sheet 確認場地
  3. 會員透過 Line 與工作人員聯繫預約
  4. 工作人員確認會員時數,更新 Google Sheet、記錄會員更新點數、通知會員

主要都還是透過人力一關一關的處理,然而三個場地,會員數量又多的狀況下,一來一往溝通其實還是滿浪費時間的
也因此自告奮勇跟師母提案!看能否用一些自動化的方式處理

構想流程

我這幾年一直很愛跟別人推廣 Zapier 這個 SaaS 服務,在我開始辦活動之後,各種雲端作業的串接幫了我大忙
最常用的流程還是集中在於活動報名與確認系統

這次整理了 TJO 的需求中,梳理了之後有以下特色

User Story

WHO      想要租借TJO場地的人
WHAT     透過此系統完成租借
SO THAT  確認我租借成功,準備排練內容

Feature

1. 租借時可以選擇會員
2. 可以看團練室有沒有空
3. 可以選擇團練室、時間進行租借
4. 租借完成時,會記錄在一份 Calender 上
5. 當會員時數不夠時,不能租借

實作開發

一開始評估之後先決定不用 Zapier 了,最主要是一個月只能觸發 100 task ,這樣很容易就在寒暑假很多學生 booking 時爆掉,因此就直接開始考慮製作一個專門的服務。
然後在後端 DB 的部分,決定採用 Google Sheet 作為資料的儲存,這樣對於老師操作會員堂數、整理都還是比較好用的
簡單畫了下架構會是如此\

  
@startuml
|#pink|Web|
start
:Select Member;
|#96CEB4|Member list(GS)|
:Response member hours;
|#F6EACB|Web|
:Select booking date, times;
:Submit;
if (remain hour enough?) is (No) then
:booking failed;
stop
else (yes)
|#96CEB4|Member list(GS)|
:Update user hour;
|#96CEB4|booking log(GS)|
:add booking log;
|#D1E9F6|Google Calendar|
:Create meeting;
|#F6EACB|Web|
:Show success;
stop
@enduml

  

最早的構想是想要透過 Google API 來完成,因為想說最直觀的使用 api 來 應該是最容易
然而實作開發時,發現直接透過 Google API 會有許多權限的問題要解決。
後來找了下其他 Solution,就找到了 Google App Script 這個服務,可以 Javascript 整合不同的應用(Sheet,Calendar,Gmail)的功能
在部署之後就可以直接用來作為 API ,埋在網頁的 Javascript 即可使用。
主要知識來源是 這篇Mdium,因此就開始思考自製 API Server 來執行,甚至未來換掉 Zapier 的使用。

完成品

img 先來放上最後完成的內容,雖然是一個小小的 booking system,但也對自己能完成他很開心
目前還只是先給老師 Demo 版本,如果順利上線應該會一樣放到 Cloudflare page + GAS
而如果要往下延伸的話,還有幾個是可以持續改進修正的

  1. Booking 或許有個會員機制、或者密碼輸入,不然目前可以隨便 booking 別人的
  2. 目前增加了散客 booking,未來或許拆成兩個 site 還是比較適合,另外還可以思考付款流程的自動化
  3. 雖然 Google sheet 很方便了,但對於管理會員儲值系統,或許還是可以有頁面工具
  4. GAS 當 API Server 其實只有小量工具適合,或許還是要熟悉 Google API 以及權限的實際運作可能性