要怎麼將我們的 GAS 成果打包成別人可以使用的版本?我們已經學了快一個月的 GAS 使用方式,但並不是每個人都熟悉 GAS 的進入與使用。我們要怎麼樣讓其他人也便於上手運用我們 GAS 的成果?
這個主題分成兩個部分——
昨天我們介紹了第一題,那我們今天會主要介紹第二題背後的「關鍵問題」——
先偷看一下之後的簡易結果——
今天我們用 Google Sheet 作為連結 GAS 的管道,讓我們借用 D14 的影片。
一樣第一次按下 GAS 中的「執行」會有「存取驗證」需要大家按一下。這邊仍是借用一下 D2 的影片。
接著,我們要進入 GAS 中設定 UI 畫面。
在 GAS 中,主要有程式碼與 html 頁面。而我們一直以來主要都是使用前者,今天要來介紹後者,這一步驟很簡單,就是直接按新增即可。
html page 的用途很廣,昨天我們在講包裝成 UI 時,其中的 prompt
和 sidebar
中其實就可以放入這 html page。但要怎麼放入呢?主要是要透過 HtmlService.createHtmlOutputFromFile("index");
來達成,以下搭配網址一起說明。
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
。
基本上部署後的內容,是不會即時跟著我們的網頁更新的。舉例來說,當我在同一個網頁中再複製一個「天氣測試」的字樣。它就不會更新到我剛剛開設的網址中——
這樣的話要怎麼看,我們的程式碼有沒有及時更新呢?我們總不能每次都按一次新部署吧。這時就是「測試部署」派上用場的時候了。測試部署是一個不提供對外連線的部署網址,但是提供即時的更新。進入畫面如下——
一個小提醒是,「測試部署」需要我們已經部署第一個「網頁應用程式」之後,才能順利運作。以下我都會主要用「測試部署」來做說明。
那測試完之後,我們要怎麼更新或刪除部署?這時就可以到右上角的「管理部署作業」進行刪除或更新。這邊假設「三個天氣測試」版本的網頁是我們要更新上去的,這時就要透過「管理部署作業」>點擊要更改的網頁頁面項目 > 按右上角的筆 > 打開下拉選單 > 建立新版本。實作如下圖——
好,那當我們會了新增、測試與更新後,接著很重要的是要會「刪除」。因為如果我們不去刪除 Deployment ,它會一直在網路上跑著,哪天有哪個爬蟲掃到之後,可能 Google 會記很可怕的帳單給你。以下我們示範刪除的步驟。
刪除在部署當中,有另外的名字叫做「封存」。封存的步驟如下圖——
經過封存後的網址,再度連結時,就會像我們影片中最後面那樣的樣子。好,那當了解部署之後,接著就是怎麼跟這部署的網頁互動了。
那我們要怎麼在網站應用程式中取得 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>
跑起來長這樣——
那我們一步步來看程式碼。
window.onload
表示在使用者點入網址後,就會跑後面 function()
內的程式碼。google.script.run.withSuccessHandler()
與後台溝通。其關係如下。withSuccessHandler()
裡面來指派要在這個頁面執行的任務greeting
的 <span>
,並在withSuccessHandler()
中指派說要將裡面的字體改為 getLoginGreeting()
的回傳值。進階一點,我們來看怎麼將數值傳入前端。
先來看看這份 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 的變化可以參考 官方文件
對 API 不熟悉的人,可先理解成,我們輸入網址時會回傳的資料。而 html 是其中一種資料的格式。我們先來看怎麼樣弄一個簡單的 API,一樣要套用 doGet
function doGet(e){
let response = 'Hello';
return ContentService.createTextOutput(response);
}
看一下怎麼樣新增 API 並執行——
可以看到,它回傳的就是很素很素的文字。但這樣其實就可以搭配回傳 Google Sheet 裡面的值,像是弄一個網址給老闆看到底目前剩多少預算、或是到底多少人報名了等等。有蠻多延伸應用的。
好,那今天就到這邊。我們今天主要學了——
doGet
連線那以上就是我們打包系列的兩堂課。
那今天就到這邊,鐵人賽也接近了尾聲,下一章是做總整理,讓大家知道遇到什麼問題,可以去參考哪一張。希望這些內容對大家有所幫助。如果還有問題,透過留言之外,也可以到 Facebook Group,想開很久這次鐵人賽才真的開起來,歡迎來當 Founding Member。如果不想錯過可以訂閱按讚小鈴鐺(?),也歡迎留言跟我說你還想知道什麼做法/主題。我們明天見。