[給心理人的前端網頁開發] 15 關卡二：網路問卷 - 用 Google App Script 當後端 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 15

Modern Web

給心理人的前端網頁開發系列第 15 篇

[給心理人的前端網頁開發] 15 關卡二：網路問卷 - 用 Google App Script 當後端

15th鐵人賽

ayugioh2003

2023-09-30 23:01:12

528 瀏覽

分享至

關卡二要做出一個網路問卷系統。昨天講了用 Google Sheet 當作資料庫，今天要用 Google App Script 當作是後端。今天會提到

後端具體來說在幹麻，API 是啥可以吃嗎
該怎麼用 Google App Script 當作後端
如何用 Postman 去測試後端是否能正常運作

一、後端是啥、API 又是啥

在前幾天有提到，後端其實就是前端與資料的橋樑。

當前端要最新的資料時，前端會向後端發出請求，接著後端會跟資料庫請求資料。資料庫收到請求後回傳響應給後端，最後後端再回傳響應給前端。

那前端跟後端具體來說，會如何進行交流呢？就是透過 API (Application Interface)，應用程式界面。以網頁程式來說，後端的 API 會以網址的方式呈現，讓前端可以透過 API 去跟後端拿資料。

例如，想知道一個使用者的資料，後端開發者可以建立一個網址，讓前端開發者去呼叫取得資料。例如：https://random-data-api.com/api/v2/users。裡面有 first_name、last_name、email 等資料，前端開發者從 API 取得響應後，就可以自行取用這些資料。

{
	"last_name": "Williamson",
	"username": "santana.williamson",
	"email": "santana.williamson@email.com",
}

在 API 的功能設計中，會有新增、修改、刪除、查詢、取得資料等功能。而在關卡二：網路問卷中，我們只會用到新增功能。但為了教學說明，也會稍微提一下取得資料。

後端在開發 API 的功能時，不同的的功能類型，會對應到不同的寫法。例如查詢與取得會用 GET、新增會用到 POST、修改會用到 PUT or PATCH、刪除會用到 DELETE。這邊只要稍微知道有這觀念就好。

二、Google App Script

Google App Script 是 Google 提供的一個語言與服務，可以連動一些 Google 的服務，像是 Google Sheet。打開 Google App Script 編輯頁面的步驟： 擴充功能 -> App Script。詳細操作請參考延伸閱讀。

以下程式碼會用註解解釋每個區塊的程式碼在做什麼

var ss = SpreadsheetApp.getActiveSpreadsheet(), // 抓取對應到的 Google Sheet
sheet1 = ss.getSheetByName("questionnaire"); // "sheet1" 改成你的工作表名稱

// 若前端發送 GET 請求給後端
// 則回傳響應文字 'Hello World
function doGet(e) {
  return ContentService.createTextOutput('Hello World');
}

// 若前端發送 POST 請求給後端
// 則回傳響應 write_data(para) 的執行結果
function doPost(e) {
  var para = JSON.parse(e.postData.contents); // 存放 post 所有傳送的資料
  return write_data(para);
}

function write_data(para) {
  var date = new Date() // 抓目前的日期與時間
  const {
    name,
    intro,
    sex,
    age,
    height,
    weight,
    why,
    note
  } = para // 從參數中取出問卷需要的欄位
  sheet1.appendRow([date, name, intro, sex, age, height, weight, why, note]); // 插入一列新的資料 
  return ContentService.createTextOutput("thanks for your help") // 回傳響應文字 thanks for your help
}

延伸資料

（2023.10.01 更新）Google App Script，可能需要搭配 GCP 專案。參考一下教學資源進行設定

如何對 Google Apps Script Debug - (05)建立 Google Cloud Platform 專案 - YouTube
如何對 Google Apps Script Debug - (06)Google Cloud Platform 專案的「OAuth 同意畫面」設定 - YouTube

如何對 Google Apps Script Debug - (07)在 Google Apps Script 編輯器內變更 Google Cloud Platform 專案 - YouTube

三、Postman

在後端的 API 建立好後，會需要測試 API 是否正常。在前端開發中，時常會使用 Postman 這個軟體/線上服務去測試 API。在測試一支 API 時，會需要知道至少這些東西：

API 的網址路徑
API 的請求方法 (GET, POST, PUT, DELETE)
API 傳遞的參數或資料

詳細的操作測試請參考延伸閱讀

[GET] https://script.google.com/macros/s/AKfycbyMhkzKep2hqcr8XwBoHl5f9co5jNIikP3_sZOq3ozo-G30Sh_qLS0UN-K7TNbhV6vH/exec
// 回傳 Hello World

[POST] https://script.google.com/macros/s/AKfycbyMhkzKep2hqcr8XwBoHl5f9co5jNIikP3_sZOq3ozo-G30Sh_qLS0UN-K7TNbhV6vH/exec

Request Body
{
    "name": "tester4",
    "intro": "yo",
    "sex": "boy",
    "age": 25,
    "height": 170,
    "weight": 50,
    "why": "ya",
    "note": "hello world"
}

// 若成功，會回傳 thanks for your help