簡易後端實作 ( Google Apps Script )
因為我屬於前端工程師 ( 前端設計師? ),「後端」往往是我開發的罩門所在,有時候想要做些什麼應用,往往都卡在後端部署或要申請個虛擬機器就不了了之,自從接觸了 Google Apps Script 之後,有些簡單的後端功能也就能輕鬆實現了,這篇將會介紹如何使用 Google Apps Script,實現 GET 與 POST 相關的後端功能。
建立 Apps Script 專案
登入 Google 後,打開 Google 雲端硬碟,從左側選單中可以新增 Google Apps Script。
如果沒有看見相關選項,請點選「連結更多應用程式」,搜尋 Google Apps Script 後添加進去,回到主畫面就可以在選單內看到選項。
doGet
建立專案後,先把專案名稱命名為「test http request」。
先來測試最簡單的 htpp request 例子:「打開一行網址,Server 端就會回應一則訊息」,首先把程式改寫成下面這段代碼,這段代碼等同於接收到客戶端 request 請求之後,伺服器回應 純文字 123 的 response。
需注意的是,如果要使用 GET 方法,一定得用 doGet 的 function 名稱。
function doGet() {
return ContentService.createTextOutput('123');
}
一個簡單的 request 和 response 程式就完成了,就是這麼簡單!接下來只要進行「部署」,就能夠真正啟用相對應功能,點選上方選單「發佈 > 部署為網路應用程式」,就能開始進行部署作業。
點選後會出現部署畫面,專案版本選擇「新增」,將應用程式執行為「我」,具有應用程式存取權的人設定為「任何人,甚至匿名使用者」。
這裡有兩個需注意的地方:第一、每次部署專案一定要用新增,不然就沒反應,第二、存取權限的意思是這個應用程式是由「我」的帳號執行,而任何人只要知道這個應用程式,都能用「我」的權限來操控。
部署完成後,就會看到一串很長的網址,複製這行網址。
打開瀏覽器,在網址列貼上這行網址,執行後就會看到網頁畫面出現伺服器回應 123 的文字,一個簡單的 request 和 response 功能已經完成囉!
接下來我們要加入「參數」,這裡我加入 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
如果使用 jQuery,就用$.get
的方法來實現
$.get('你部署的網址?name=oxxo&age=18',function(e){
console.log(e);
});
如果使用 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);
});
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);
});
如果使用 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);
});
回傳參數
回傳的參數有以下三種,可以依據不同的需求回傳。
字串:
return ContentService.createTextOutput(字串);
HTML:
return HtmlService.createHtmlOutput(HTML);
JSON:
var JSONString = JSON.stringify(result); return ContentService.createTextOutput(JSONString) .setMimeType(ContentService.MimeType.JSON);
小結
透過 Google Apps Script 所建立的簡易後端,讓我這個後端白痴也可以輕鬆實現 http request 的功能,也更能串接更多前端不容易串接的網路服務,像是 LINE BOT 我也是用 Apps Script 來做串接,十分方便好用的啦!