Google Apps Script 基本使用:跨網域 AJAX、接 Firebase

/

Google Apps Script 是個輕便的好物

之前要處理跨網域 AJAX 時,像是寫 LINE BotTelegram Bot,幾乎都是 放在 Google Cloud Platform(GCP)上 處理。

覺得有點笨重,因為單純處理 request 的部份,就得開一個 GCP 的專案有點浪費。

自從發現了 Google Apps Script(以下簡稱 GAS)後,覺得是個輕便的功能,可以拿來跨網域 AJAX,也因為跟 Firebase 都是 Google 旗下的產品,所以也能讀寫 Firebase。

而且,有 Google 帳號,進入到 Google Drvie 就可以直接新增,發布新版時也不像 GCP deploy 這麼久,一整個方便。

本篇紀錄一些常會用到的 GAS 功能,雖然在「用 Google Apps Script 接收 / 推播訊息」這篇中有寫到接 Firebase 功能的部份,但想獨立一篇出來,當做之後要使用 GAS 時的初始化。

GAS 免費額度表

GAS 有限定配額,超過一個額度就會收費,限額表在這:

ttps://developers.google.com/apps-script/guides/services/quotas

跨網域 AJAX 是屬於「URL Fetch calls」這項,一般帳號的免費額度是 20,000 / 天。

如果是一般小型專案,或是個人在玩些機器人功能,這額度也夠用了。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝


建立 Google Apps Script

進到 Google 雲端硬碟,按下 新增,在 更多 裡面選擇 Google Apps Script,就新增了一個 GAS 檔。

新增 -> 更多 -> Google Apps Script
新增 -> 更多 -> Google Apps Script

進到新增的 GAS 檔案,會看見初始頁面,專案名稱要修改,預設的 myFunction 可以刪掉:

GAS檔案初始畫面
GAS 檔案初始畫面

Google Apps Script AJAX

一般如果用前端 AJAX,會遇到跨網域而被禁止的問題,但如果是用 GAS 來做 GET、POST 就不會。

GAS 可以處理兩件事:GET、POST,就是一個 API 的使用。

被 GET、POST

當這個 GAS 被 GET、POST 時,function 如下:

// GET
function doGet() { /* 處理被GET的動作 */ }

// POST
function doPost(e) {
  // POST data
  var param = e.parameter;
  
  /* 處理被POST的動作 */
}

前端部份,就像一般要 AJAX 就行,這邊用 Axios。要注意 POST 的資料要轉成字串:

POST 請求

在 GAS 上主動發 POST 請求,很像前端在用 fetch API,在 GAS 上稱「UrlFetchApp」,程式碼如下:

var result = UrlFetchApp.fetch(request_url).getContentText();

result 就會是 POST 後回來的結果,會是字串,再用 JSON.parse 就可以轉成物件。


Google Apps Script 回傳資料

接到 GET、POST 後,發 POST 到別站的 API 拿回資料後,接下來就是要把資料回傳給前端,這邊紀錄回傳的兩種格式:String、JSON:

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

// 回傳字串
return ContentService.createTextOutput('hello world!');

// 回傳json,在createTextOutput裡要是字串
var result = JSON.stringify({
  name: 'Augustus',
  gender: 'male'
});
return ContentService.createTextOutput(result).setMimeType(ContentService.MimeType.JSON);

整合上述應用

整理一個案例:Client 把想跨網域的 API 網址寫進 data,發 POST 到 GAS,GAS 收到 POST 後,執行 POST 請求到 Client 端 data 裡的 URL,收到資料後回傳給 Client 端。

Client 端

GAS default.gs

實際測試後可以確實收到 console.log:

成功跨網域POST
成功跨網域 POST

發布 Google Apps Script

上面的程式碼,前端在 POST 的 URL,都是寫「GAS 發布後得到的網址」,這段寫如何發布 GAS。

按下導覽列上的 發布,再點 部署為網路應用程式

發布
發布

接下來的選項依序選擇:

  • 專案版本:新增
  • 將應用程式執行為:我
  • 具有應用程式存取權的使用者:任何人,甚至是匿名使用者

接著按下 部署,會出現需要授權的確認框,按下 核對權限,接著會出現 這個應用程式未經驗證 的新視窗:

這個應用程式未經驗證的視窗
這個應用程式未經驗證的視窗

這個 GAS 裡面的內容都是我們自己寫的,當然是可以信任的,按下 進階,再按下 前往「xxxx」允許 就部署成功,接著就會出現一段網址,那個網址就是上面程式碼裡面「GAS 發布後得到的網址」。

GAS的request url
GAS 的 request URL

Google Apps Script 加入 Firebase 功能

Google Apps Script 用的 Firebase,是 Realtime Database。

引用 Firebase App

GAS 的導覽列,點選「資源」 → 「程式庫」:

資源 -> 程式庫
資源 -> 程式庫

新增程式庫 的欄位,填入:

MYeP8ZEEt1ylVDxS7uyg9plDOcoke7-2l

2021.03.08 更新:
有人留言說輸入上面那串找不到,查了一下後發現 FirebaseApp 的 ID 更新了,要改輸入這個:
1hguuh4Zx72XVC1Zldm_vTtcUUKUA6iBUOoGnJUWLfqDWx5WlOJHqYkrt

然後按下新增,就會看見出現了 FirebaseApp,版本選擇 Public release,按下 儲存

程式庫加入FirebaseApp
程式庫加入 FirebaseApp

Firebase Config

一直到以上,很像是 ES6 的 import,把 Firebase 的 function 給引用進來,接下來就是寫 Firebase 的 config。

firebaseUrl

進到 Firebase 後,點選 Project Overview 右邊的齒輪,再點 專案設定

點擊專案設定
點擊專案設定

進入到專案設定介面後,點選 服務帳戶,在 Admin SDK 設定程式碼片段 的地方,會看到程式碼裡有一個 databaseURL,把它的值存下來:

databaseURL
databaseURL

原本的值是這樣:

"https://xxxxxxxxxxxxx.firebaseio.com"

存下來的方式就是在 GAS 裡設成變數,要注意的是,原本的值最後沒有斜線,在存的時候要補上去,變這樣:

var firebaseUrl = 'https://xxxxxxxxxxxxx.firebaseio.com/';

Secret

點擊 資料庫密鑰,會看見密鑰被隱藏起來,滑鼠移過去後,會出現一個 顯示 按鈕,點擊後就可以看見密鑰:

firebase secret
Firebase Secret

一樣設一個變數把密鑰存下來:

var secret = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

config

有了 URL、Secret,最後就可以整理出 FirebaseApp 用的 config:

var secret = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
var firebaseUrl = 'https://xxxxxxxxxxxxx.firebaseio.com/';
var base = FirebaseApp.getDatabaseByUrl(firebaseUrl, secret);

讀寫 Firebase

Firebase Realtime Database 總共有 4 種方法可以讀寫,在 GAS 如下:

官方說明文件:

https://sites.google.com/site/scriptsexamples/new-connectors-to-google-services/firebase/tutorials/read-and-write-data-in-firebase-from-apps-script


Google Apps Script 跨網域 AJAX + Firebase 初始檔

本篇的原始檔整理了一份放在 GAS 上,歡迎取用:

https://script.google.com/d/14R0KQ1NLiz_iaNyRye06IEmepQLrMordKL-7TSu8YC2CD8sm5TIrlpWU/edit?usp=sharing

Summary
Google Apps Script 基本使用:跨網域 AJAX、接 Firebase
Article Name
Google Apps Script 基本使用:跨網域 AJAX、接 Firebase
Description
本篇大綱:Google Apps Script 是個輕便的好物、GAS 免費額度表、建立 Google Apps Script、Google Apps Script AJAX、Google Apps Script 回傳資料、加入 Firebase 功能、讀寫 Firebase。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Forms Google

Google 表單 用網址改變題目預設值

Bot LINE

LIFF v2 基本使用筆記及範例

Front-End

Instagram oEmbed 嵌入 IG 貼文

API

切詞工具結巴 Jeiba 優化標籤關鍵字

Vue

拿 Trello 當資料庫 建一個店家清單 – 下篇:建立清單頁面

Front-End

OSM + Leaflet 學習筆記1:建地圖、marker、事件、換圖層

Forms Google

完全客製 Google 表單,美化表單樣式

Google Maps

Google Maps API 學習筆記 – 2:在地圖上畫個日本結界

Analytics Google

GA:啟用 Web + App 報表

Front-End

製作 RWD email 工具:MJML,如何使用及注意事項

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
4 Comments
最舊
最新
Inline Feedbacks
看所有留言
Denny
Denny
2 年 之前

越玩越大了

Dis
Dis
1 年 之前

您好
我是新手
想請問 default.gs 要如何 include firebase.gs ?