Cloud F2E Blog

前端開發紀錄

0%

JavaScript - Google sheet 表單串接 API

發表於 更新於 分類於 Disqus：
本文將介紹如何使用 Google sheet 表單 API 來當我們的後端表單資料庫吧。

前言

Google form 表單服務應該是目前最多人拿來建立表單的一種方式，然而，有優點自然也有缺點，在表單中無法製作相對複雜的內容、需外連到表單網頁、無法追蹤表單行為、無法使用 GA 轉換追蹤，此問題 Google 也聽到了，開發出 API 服務，使得開發者可以透過此 API 來與 Google sheet 讀寫資料。

建立 Google Sheet 表單

Google Sheet method
打開雲端硬碟，建立 Google 試算表，取得表單 ID。
表單 ID 就是網址中間那串亂碼 ex: https://docs.google.com/spreadsheets/d/表單ID/edit#gid=0。
Google Sheet

撰寫 API 執行內容

在表單選單中找到 工具 => 指令碼編輯器

接著會出現以下頁面
指令碼編輯器
中間 Function 參考範例，並有附上說明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* doGet => API method 爲 get */
/* doPost => API method 爲 post */
function doGet(e) {
  //取得參數 e.parameter
  var params = e.parameter;
  var name = params.name; /* 屬性名稱必須跟前端相符合 */
  var phone = params.phone; /* 屬性名稱必須跟前端相符合 */
 
  //sheet資訊
  var SpreadSheet = SpreadsheetApp.openById("表單ID");
  var Sheet = SpreadSheet.getSheets()[0]; /* 取得要存入的試算表的第一張試算表 */
  var LastRow = Sheet.getLastRow(); /* 取得該張試算表中，最後一列有值的列數。 */

  //存入資訊 /* 將資料存入最後有值的下一列 */
  Sheet.getRange(LastRow+1, 1).setValue(name);
  Sheet.getRange(LastRow+1, 2).setValue(phone);
  
  //回傳資訊
  return ContentService.createTextOutput("成功");
}

部屬應用程式

選擇發布 => 部屬為網路應用程式
部屬應用程式
選擇要允許讀寫的的對象，這裡一定要選 任何人，包含匿名使用者，不能選所有人，否則會出現 CORS 問題。
部屬應用程式
都選好就下一步，就會取得該 API 囉。
API

範例模板

以下直接附上 HTML 、 JavaScript 範例程式碼，基本上就單純的 AJAX 行為，可依照自己的專案使用像是 jQuery 取值、Vue 雙向綁定取值等方式。

1
2
3
4
5
6
7
8
9
10
11
12
<body>
  <div class="container">
    <div>
      <span>您的大名：</span><input id="nameValue" type="text">
    </div>
    <div>
      <span>您的電話：</span><input id="phoneValue" type="text">
    </div>
    <button>送出</button>
  </div>
  <script type="text/javascript" src="index.js"></script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let sendButton = document.querySelector('button');

function send() {
  let name = document.querySelector('#nameValue').value;
  let phone = document.querySelector('#phoneValue').value;
  $.ajax({
    type: "get",
    url: "剛剛取得的 API，請直接貼上",
    data: {
      "name": name, /* 屬性名稱需與 Google Sheet 相同 */
      "phone": phone, /* 屬性名稱需與 Google Sheet 相同 */
    },
    dataType: "JSON",
    success: function(response) {
      console.log(response);
      if(response == "成功"){
        alert("成功");
      }
    },
  });
};

sendButton.addEventListener('click', send);

結尾

依照上述操作，就可以執行寫入表單的服務囉。

參考資料

寫給純前端，讓 Google Sheets 當你的後端完成寫入功能
Google sheet 試算表表單串接api