iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

整合 Google 服務的燃料——透過 Google Apps Script (GAS) 加速你的工作速度系列 第 29

D29 - 如何打包 Apps Script 的程式碼?(二)包成 HTML 網頁與或 API

  • 分享至 

  • xImage
  •  

今日的目標

要怎麼將我們的 GAS 成果打包成別人可以使用的版本?我們已經學了快一個月的 GAS 使用方式,但並不是每個人都熟悉 GAS 的進入與使用。我們要怎麼樣讓其他人也便於上手運用我們 GAS 的成果?

這個主題分成兩個部分——

  1. 包成擴充功能(Add-On)似的 UI 選項
  2. 包成能用於連接的 API / HTML page

昨天我們介紹了第一題,那我們今天會主要介紹第二題背後的「關鍵問題」——

Q2. 怎麼將我的 GAS 成果包成 HTML 網頁或 API 給他人使用?

Input

  • 網頁上想呈現的資訊(簡易)

Output

  • 一個可讓使用者連線的網站

先偷看一下之後的簡易結果——

Step 1 從 Google Sheet 進入 GAS

今天我們用 Google Sheet 作為連結 GAS 的管道,讓我們借用 D14 的影片。

一樣第一次按下 GAS 中的「執行」會有「存取驗證」需要大家按一下。這邊仍是借用一下 D2 的影片。

接著,我們要進入 GAS 中設定 UI 畫面。

Step 2 在 GAS 中新增 html 的範例

在 GAS 中,主要有程式碼與 html 頁面。而我們一直以來主要都是使用前者,今天要來介紹後者,這一步驟很簡單,就是直接按新增即可。

html page 的用途很廣,昨天我們在講包裝成 UI 時,其中的 promptsidebar 中其實就可以放入這 html page。但要怎麼放入呢?主要是要透過 HtmlService.createHtmlOutputFromFile("index"); 來達成,以下搭配網址一起說明。

Step 3 用 doGet 加上部署來取得網站!

基本上,我們要用網址取得我們寫好的 html page,在 GAS 中最簡單的程式碼如下——

function doGet(e){
  return HtmlService.createHtmlOutputFromFile("index");
}

但,我們有了程式碼,可是網址呢?這時候就要講到 GAS 的部署 Deploy 了。部署的意思就是發佈到網路上,可以用網址的形式進行存取(可能是回傳網頁、也可能是回傳數值)。而部署的過程同下面影片——

主要就是右上角按 GAS 右上角的「新增部署」即可,第一次執行可能需要再次存取驗證。好,部署後我們會拿到一個「網頁應用程式網址」,理論上點開就會是我們網頁的內容了。我們簡單新增一個網頁來看結果,理論上會出現「天氣測試」的字樣。

<!DOCTYPE html>
<html>
  <head></head>
  <body>
  	<h1>天氣測試</h1>
  </body>
</html>

跑起來如下,看起來成功!

如果這步驟沒有成功,很有可能是 GAS 中還沒有加入 doGet

Step 4 測試與管理部署作業

基本上部署後的內容,是不會即時跟著我們的網頁更新的。舉例來說,當我在同一個網頁中再複製一個「天氣測試」的字樣。它就不會更新到我剛剛開設的網址中——

這樣的話要怎麼看,我們的程式碼有沒有及時更新呢?我們總不能每次都按一次新部署吧。這時就是「測試部署」派上用場的時候了。測試部署是一個不提供對外連線的部署網址,但是提供即時的更新。進入畫面如下——

一個小提醒是,「測試部署」需要我們已經部署第一個「網頁應用程式」之後,才能順利運作。以下我都會主要用「測試部署」來做說明。

那測試完之後,我們要怎麼更新或刪除部署?這時就可以到右上角的「管理部署作業」進行刪除或更新。這邊假設「三個天氣測試」版本的網頁是我們要更新上去的,這時就要透過「管理部署作業」>點擊要更改的網頁頁面項目 > 按右上角的筆 > 打開下拉選單 > 建立新版本。實作如下圖——

好,那當我們會了新增、測試與更新後,接著很重要的是要會「刪除」。因為如果我們不去刪除 Deployment ,它會一直在網路上跑著,哪天有哪個爬蟲掃到之後,可能 Google 會記很可怕的帳單給你。以下我們示範刪除的步驟。

刪除在部署當中,有另外的名字叫做「封存」。封存的步驟如下圖——

經過封存後的網址,再度連結時,就會像我們影片中最後面那樣的樣子。好,那當了解部署之後,接著就是怎麼跟這部署的網頁互動了。

Step 5 在網頁中執行 GAS 的程式碼,並獲得回傳值

那我們要怎麼在網站應用程式中取得 GAS 的數據呢?主要是要透過 google.script.run.withSuccessHandler 這個 API。以下程式碼為了方便初學者理解,就單純用 vanilla javascript 的語法並在單頁中寫完。進階讀者可以用 JQuery 等框架幫助。

先在 GAS 中寫一段簡易的功能,主要是會回傳一個「Hello」的數值。

function getLoginGreeting(){
  let greeting="Hello";
  Logger.log(greeting);
  return greeting;
}

測試一下功能性,確定會回傳——

接著就是要將這個功能與 HTML 串連,來看看我們 index.html 的程式碼——

  <head>
    <script>
      window.onload = function() {
        google.script.run.withSuccessHandler(
          function(greeting){
            document.getElementById("greeting").innerHTML=greeting;
          }
        ).getLoginGreeting();
      });
    </script>
  </head>
  <body>
    <div>
      <div><span id="greeting"></span></div>
      <h1>天氣測試</h1>
    </div>
  </body>

跑起來長這樣——

那我們一步步來看程式碼。

  1. 首先,透過 window.onload 表示在使用者點入網址後,就會跑後面 function() 內的程式碼。
  2. 再來,我們透過 google.script.run.withSuccessHandler() 與後台溝通。其關係如下。

  1. 當我們後台的程式碼執行完畢後,再透過 withSuccessHandler() 裡面來指派要在這個頁面執行的任務
  2. 我在這個頁面中,創造一個 id 是 greeting<span> ,並在withSuccessHandler() 中指派說要將裡面的字體改為 getLoginGreeting() 的回傳值。

進階一點,我們來看怎麼將數值傳入前端。


Step 5-1 在網頁中將數值傳入 GAS 的程式

先來看看這份 GAS 中的程式碼,跟剛剛比,我們多設定了一個變數 name

function getLoginGreeting(name){
  let greeting="Hello "+ name;
  Logger.log(greeting);
  return greeting;
}

然後修正 html, 主要加入 name 的部分。這邊是用比較簡單的加法,直接加上 <script> 之上。但也可以是跟網頁互動後得到的數值。

  <head>
    <script>
	var user_name = "Brad"
      window.onload = function() {
        google.script.run.withSuccessHandler(
          function(greeting){
            document.getElementById("greeting").innerHTML=greeting;
          }
        ).getLoginGreeting(user_name);
      });
    </script>
    <style>
    </style>
  </head>
  <body>
    <div>
      <div><span id="greeting"></span></div>
      <h1>天氣測試</h1>
    </div>
  </body>

跑起來長這樣——

好,那當知道怎麼傳入數值後,變化就很多元。包括在前端做一個簡單的問卷傳到後台,或甚至是要將一些前端互動的紀錄到後台也沒問題。基本上就是扣回之前說的,在 GAS 中運用 setValue 即可達到。更多 HTML 的變化可以參考 官方文件


Step 6 將 GAS 的程式打包成 API

對 API 不熟悉的人,可先理解成,我們輸入網址時會回傳的資料。而 html 是其中一種資料的格式。我們先來看怎麼樣弄一個簡單的 API,一樣要套用 doGet

function doGet(e){
  let response = 'Hello';
  return ContentService.createTextOutput(response);
}

看一下怎麼樣新增 API 並執行——

可以看到,它回傳的就是很素很素的文字。但這樣其實就可以搭配回傳 Google Sheet 裡面的值,像是弄一個網址給老闆看到底目前剩多少預算、或是到底多少人報名了等等。有蠻多延伸應用的。


好,那今天就到這邊。我們今天主要學了——

  1. 如何在 GAS 中創造 html 頁面並設定部署與用 doGet 連線
  2. 如何新增、開發、更新與刪除部署
  3. 如何讓創造的 html 網頁與 GAS 程式碼互動
  4. 如何創造可以回傳單純資料的 API

那以上就是我們打包系列的兩堂課。

那今天就到這邊,鐵人賽也接近了尾聲,下一章是做總整理,讓大家知道遇到什麼問題,可以去參考哪一張。希望這些內容對大家有所幫助。如果還有問題,透過留言之外,也可以到 Facebook Group,想開很久這次鐵人賽才真的開起來,歡迎來當 Founding Member。如果不想錯過可以訂閱按讚小鈴鐺(?),也歡迎留言跟我說你還想知道什麼做法/主題。我們明天見。


上一篇
D28 - 如何打包 Apps Script 的程式碼?(一) 變成擴充功能似的 UI 按鍵
下一篇
D30 - 如何看自己需要哪篇 Apps Script 的功能?三十天 Apps Script 旅程的總整理
系列文
整合 Google 服務的燃料——透過 Google Apps Script (GAS) 加速你的工作速度30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
andrew_wang
iT邦新手 5 級 ‧ 2022-10-14 14:58:04

您好,我做到 Step 5 的時候,Hello 一直無法出現,請問有可能是什麼問題? 需要您的協助

我要留言

立即登入留言