簡易後端實作 ( Google Apps Script )

因為我屬於前端工程師 ( 前端設計師? ),「後端」往往是我開發的罩門所在,有時候想要做些什麼應用,往往都卡在後端部署或要申請個虛擬機器就不了了之,自從接觸了 Google Apps Script 之後,有些簡單的後端功能也就能輕鬆實現了,這篇將會介紹如何使用 Google Apps Script,實現 GET 與 POST 相關的後端功能。

建立 Apps Script 專案

登入 Google 後,打開 Google 雲端硬碟,從左側選單中可以新增 Google Apps Script。

簡易後端實作 ( Google Apps Script )

如果沒有看見相關選項,請點選「連結更多應用程式」,搜尋 Google Apps Script 後添加進去,回到主畫面就可以在選單內看到選項。

簡易後端實作 ( Google Apps Script )

doGet

建立專案後,先把專案名稱命名為「test http request」。

簡易後端實作 ( Google Apps Script )

先來測試最簡單的 htpp request 例子:「打開一行網址,Server 端就會回應一則訊息」,首先把程式改寫成下面這段代碼,這段代碼等同於接收到客戶端 request 請求之後,伺服器回應 純文字 123 的 response。

需注意的是,如果要使用 GET 方法,一定得用 doGet 的 function 名稱。

function doGet() {

  return ContentService.createTextOutput('123');

}

簡易後端實作 ( Google Apps Script )

一個簡單的 request 和 response 程式就完成了,就是這麼簡單!接下來只要進行「部署」,就能夠真正啟用相對應功能,點選上方選單「發佈 > 部署為網路應用程式」,就能開始進行部署作業。

簡易後端實作 ( Google Apps Script )

點選後會出現部署畫面,專案版本選擇「新增」,將應用程式執行為「」,具有應用程式存取權的人設定為「任何人,甚至匿名使用者」。

這裡有兩個需注意的地方:第一、每次部署專案一定要用新增,不然就沒反應,第二、存取權限的意思是這個應用程式是由「我」的帳號執行,而任何人只要知道這個應用程式,都能用「我」的權限來操控。

簡易後端實作 ( Google Apps Script )

部署完成後,就會看到一串很長的網址,複製這行網址。

簡易後端實作 ( Google Apps Script )

打開瀏覽器,在網址列貼上這行網址,執行後就會看到網頁畫面出現伺服器回應 123 的文字,一個簡單的 request 和 response 功能已經完成囉!

簡易後端實作 ( Google Apps Script )

接下來我們要加入「參數」,這裡我加入 name 和 age 兩個參數,依據 Apps Script doGet 的傳值規則,傳進來的值會放在 e.parameter 的物件內,依據規則將 name 和 age 取出,轉換成回應的文字再顯示出來。

function doGet(e) {

  var param = e.parameter;
  var name = param.name;
  var age = param.age;

  var replyMsg = '你的名字是:' + name + ',年紀:' + age + '歲。';

  return ContentService.createTextOutput(replyMsg);

}

編輯完成點選部署,部署後打開瀏覽器,輸入下列的網址,執行結果就會是「你的名字是:oxxo,年紀:18歲。」

你部署的網址?name=oxxo&age=18

簡易後端實作 ( Google Apps Script )

如果使用 jQuery,就用$.get的方法來實現

$.get('你部署的網址?name=oxxo&age=18',function(e){
    console.log(e);
});

簡易後端實作 ( Google Apps Script )

如果使用 Node.js,就用 request 的方法來實現

var request = require("request");

var options = {
    url:'你部署的網址?name=oxxo&age=18',
    method: 'GET'
}

request(options,function(err, res, body){
    console.log(body);
});

簡易後端實作 ( Google Apps Script )

doPost

看完了 doGet 的用法,接著就來看看使用 POST 的方式的 doPost,使用方式很簡單,只需要把 doGet 改成 doPost 即可,內容完全不用更動,改完記得再部署一次。

function doPost(e) {

  var param = e.parameter;
  var name = param.name;
  var age = param.age;

  var replyMsg = '你的名字是:' + name + ',年紀:' + age + '歲。';

  return ContentService.createTextOutput(replyMsg);

}

由於傳值的方法由 GET 改為 POST,所以在網頁端就不能單純透過網址傳值,如果是使用 jQuery,就用$.post的方法來實現。

$.post('你部署的網址',{
    name:'oxxo',
    age:18
},function(e){
    console.log(e);
});

簡易後端實作 ( Google Apps Script )

如果使用 Node.js,一樣就用 request 的方法來實現,只是 method 要改為 POST,且必須加入 followAllRedirects: true 這段參數來解決 api server 執行 301/302 redirect 的動作。

var request = require("request");

var options = {
    url:'你部署的網址',
    method: 'POST',
    followAllRedirects: true,
    form:{
        name:'oxxo',
        age:18
    }
}
request(options,function(err, res, body){
    console.log(body);
});

簡易後端實作 ( Google Apps Script )

回傳參數

回傳的參數有以下三種,可以依據不同的需求回傳。

小結

透過 Google Apps Script 所建立的簡易後端,讓我這個後端白痴也可以輕鬆實現 http request 的功能,也更能串接更多前端不容易串接的網路服務,像是 LINE BOT 我也是用 Apps Script 來做串接,十分方便好用的啦!

參考:實作 LINE 聊天機器人 ( Google Apps Script )

有興趣瞧瞧其他新文章嗎?