跳到主要內容區塊

ntuccepaper2019

專題報導

No-code/low-code應用範例-Google表單Line推播
  • 卷期:v0067
  • 出版日期:2023-12-20

作者:陳啟煌 / 臺灣大學計算機及資訊網路中心程式設計組程式設計師


Google表單實在蠻方便設計使用,可是想知道有誰填表還要常回來看後面綁定的試算表,如果可以有人填表就在我的Line出現訊息那可以省下我不少工作;如果還可以No-code/low-code解決,就可以自己動手做不用麻煩別人寫程式…

 

Google表單由於設計簡單,易學易懂,已經逐漸變成非程式人員喜愛的一種收集資料的方式,基本上設置一個基本的Google表單已經不需要coding,達成no-code的境界,透過視覺化的介面,拖拉元件點選設定就可以完成一個線上的問卷或表單。不過如果要再進一步進階的功能如Email通知或結合即時通訊的應用,就難免要寫一些程式(或scripts)。作為一家頂尖的科技公司,陸續推出appsheet等應用,可以進一步no code快速建置Apps. 但是有一點再偉大的公司也無法短期內達成,就是使用者的習慣。舉例每個地區有慣用的即時通訊軟體,每個使用者愛用的軟體不見得是同一家公司的產品。如果是不同公司的產品要互相通訊,免不了有串接的工作,需要額外撰寫程式,那又會造成一些門檻讓非程式背景使用者望之卻步。

舉個大家應該很難忘的情境,如疫情下的看診,每個診間都有醫療資訊系統針對看診需求;不過對於突如其來的疫情,為了防止互相感染,看診前需要了解患者旅遊史、疾病史、體溫等資料。大家應該還記得之前要加填一張書面聲明。因應病毒的變化,大家接受指揮中心的指示設計表單,紙本應該是最快能做到的方式,不過後續如需要電子資料,又要人工補資料;線上填寫的方法,相信用google表單很快就能設計出相對應的表單,但是要加一個診間醫生或陪病護理師檢查的機制。可就沒那麼簡單,要動用程式師修改或設計程式;疫情無法預持續多久,規定填寫表單內容也一直在變化。這時想到了一個變通的方法,很多人手機都有安裝LINE通訊軟體。如果可以填完Google 表單,就推播到診間醫護的LINE,是個省事的解決方法。透過Google的apps script可以呼叫Line的API達成推播。但是沒辦法No-code/low-code達成,又會限制了不大會寫程式的使用者。是否有辦法達成No-code/low-code的串接?

 

要串接Google表單和Line推播,有幾個重要的步驟如下。

  • 建立Google表單
  • 設置Line推播
  • 整合Google表單和Line推播

 

前兩項都已經可以No-code/low-code達成,本文介紹一種靠設定就可達成的Google表單和Line推播整合方式。中間的整合透過pipedream.com平台達成。

pipedream.com是個原為開發人員設計的整合平台,方便串接各種API,透過介面的設計及除錯的介面,讓串接更容易,以提高程式師的效率。一開始使用這個平台也是為了串接API除錯使用。為了串接方便平台提供了不少目前有API的系統,如Google,LINE,Dropbox…等等都是。平台基本上透過一步一步設定達成串接,幾乎不用撰寫程式碼,只需要填入對應的封包的金鑰或設定值。

第一步建立Google表單,在此不贅述,重點是建立好Google表單後要記得綁定Google 試算表;第二步驟設置Line推播,只要到LINE Notify官網,https://notify-bot.line.me/ 登入Line帳號後,在右上角登入者下拉,點選個人頁面,如下圖一所示:

20231220_006705_01

圖一、Line Notfiy 官網截圖

 

點選發行權杖,會跳出視窗讓你選擇權杖名稱(這個未來傳送時會顯示)及要接收通知的群組(如果沒有可以新增一個),未來新增通知人可以在這個群組加上。發行後會有一串權杖的字串,要複製下來好好保管(推播時需要用到),忘記了只能重新發行。設置成功後,該群組會收到一則通知,如下圖二右方所示。

20231220_006705_02

圖二、Line 推播權杖發行截圖

 

接下來最後一個步驟整合Google表單和Line推播,因為要使用pipedream平台來做整合,所以首先要先註冊一個pipedream帳號,至官網https://pipedream.com/ 右上角按Sign Up,可以使用Google/GitHub的帳號連動使用,也可以按Sign Up新申請一組帳號,需要留可以收信的Email帳號,以啟用帳號,畫面如下圖三所示。

20231220_006705_03

圖三、Pipedream 帳號申請流程截圖

 

登入平台後,點選右邊功能區Project,按+ New project新增專案,需要輸入專案名稱,下方有Configure GitHub Sync選項(這個對程式師的版本控制或想研究程式碼很有幫助),本文針對的是no-code user,所以這個選項暫時用不到,不需要勾選設定。再來按New workflow,隨意取個名字。進入編輯區,第一個flow是trigger事件觸發,我們是要實作填完Google表單後用Line推播,這裡有個事件可以用,點選Google Sheets,會出現內含的可用事件觸發,我們要使用 New Row Added(Instant),就是當Google試算表有新增紀錄時觸發。因為Google表單後面可以綁定試算表,所以我們可以用綁定的試算表新增紀錄來抓取表單內容。畫面如圖四所示。

 

20231220_006705_04

圖四、Pipedreamy工作流程設定觸發元件圖

 

需要設定的部分有Google Sheets Account, Spreadsheet, Worksheet(s)三欄,第一個是要綁定這個試算表屬於哪個Google帳號,會需要Google Drive 的權限,因為要存取試算表檔案。設定成功後Google會發安全性警告提醒使用者,新增了這項存取權;設定成功後,Spreadsheet欄位可下拉綁定帳號的檔案,選取相關的試算表後,Worksheet欄位下就可以選取這個試算表的工作表,如果是預設值應該是表單回應1。都設定好後,按Create Source,平台會幫你產生對應的程式碼。成功後,第一次會把目前試算表的資料全抓回來當成新的事件。你可以點選幾筆就可以看到平台把資料變成Json格式準備傳給下一個元件。可以按Continue進行下一步。操作過程如圖五所示。

 

20231220_006705_05

圖五、Pipedream Google表單觸發設定圖

 

下一步就是要串接Line Notify,出現的常用應用沒有Line,可以再上方輸入Line搜尋,點選Line之後會出現平台提供串接Line的API,這裡我們要Line推播,所以點選Send Notification Message,如下圖六所示。

 

20231220_006705_06

圖六、Pipedream Line推播設定圖

 

再來出現有兩個必要的設定欄位,分別是綁定Line Account和Message Text;綁定Line Account有兩個方法,第一個直接跳出Line Account的欄位,會出現類似Line授權推播的畫面,點選群組按授權即可;第二種方式是點選下面的Optional Fields裡面的 Access Token,然後把之前在Line Notify發行推播權杖的字串填上完成綁定。至於Message Text,就是要推播到Line Notify的內容。點選進Message Text欄位後,底下會出現可以用的參數,這裡平台有個貼心的設計,下面會列出從上一個步驟下來的參數,例如是最近的一筆試算表的內容,參數自動展開成stepstriggereventnewRow,下面就是試算表各欄的資料,例如我想要傳送填表時間就在Message Text填入填表時間:然後滑鼠移動到填表時間那欄,旁邊會出現select path,點選後:系統自動帶入參數{{steps.trigger.event.newRow[0]}}。如此重複填入你要傳送的各項參數。如下圖所示,設定好後可以按Test,平台會把資料傳送到設定的Line推播。

之前畫面上的Optional Fields,有些是用來設定貼圖或小圖示,有興趣的讀者可以自己添加,設定內容如圖七、圖八所示。

20231220_006705_07

圖七、Line 推播來源參數設定圖

 

都完成後,要按右上角Deploy,將這個專案正式佈署。之後就可以去填前面的Google表單,再去看看是否推播正確。推播的內容如下圖九所示。

 

20231220_006705_08

圖八推播內容範例圖

 

Art editor Img

圖九、成果示意圖

 

Google表單是一個強大的資料收集工具,不過後面綁定試算表收集資料,比較被動,需要人工一直來檢查是否有新增紀錄。有些應用沒問題,有些應用就需要主動推播,比較容易做的是寄送郵件或串聯通訊軟體推播。如果會寫程式串接這些服務都不是問題。不過對於部分Google表單的使用者有些是不具程式背景的,只有No-code/Low-code的解決方案比較這些使用者。希望透過本文解決不會寫程式的Google表單愛用者的問題,依照類似的方法,pipedream平台提供相當多的串接方法,應該可以後續嘗試串接屬於自己的服務。

 

參考資料

  1. Introduction to Pipedream, https://pipedream.com/docs
  2. LINE Notify API Document,https://notify-bot.line.me/doc/en/