寫給純前端，讓 Google Sheets 當你的後端完成寫入功能

實作利用前端 JavaScript 語法，將資料寫入 Google Sheets

                             Outline 
 * 使用情境
 * 實作
   - Step1：建立 Google Sheets
   - Step2：進入 Google Sheets 指令碼編輯器
   - Step3：部署
   - Step4：利用 Ajax call API 存入資料
   - Step5：操作一次試試看:)
 * 後記分享

Google Sheets API ? 使用情境 ?

以往調查用戶資訊，大部分的人會採用 Google 表單作爲工具，但有時因應網站客製化需求，需要將表單嵌入網站中。這時可能會遇到以下問題：

• 怎麼嵌入？
• 如何修改樣式？
• 如何送出表單？

所幸 Google 提供開發者直接發送 API 至 Google Sheets 的應用服務，開發者可以依照設計稿需求切出漂亮且彈性的版面，接著在用戶按下發送後連動 Google 提供的這項服務就可以了，真是太棒了！

實作

以下建置一個簡單的切版用以說明，我們的需求是將使用者輸入的資訊填入 Google Sheets。

Step1：建立 Google Sheets

於第一列填入表格的表頭

Step2：進入 Google Sheets 指令碼編輯器

接著寫入 Function doGet，如下程式碼所示，

• 程式碼說明

1. doGet 代表 API method 爲 get
2. 取得參數：傳入的全部參數以 e.parameter 取得，再分別以其他變數存放個別參數
3. Sheet 資訊：程式碼中的 “請輸入自己的 sheet id”，請複製你的 Google Sheet 網址列 https://docs.google.com/spreadsheets/d/ 以後至 edit 中間的代碼。SpreadSheet.getSheets()[0]; 取得要存入的試算表的第一張試算表。Sheet.getLastRow(); 取得該張試算表中，最後一列有值的列數。
4. 存入資訊：Sheet.getRange(LastRow+1, 1).setValue(name); 將資料存入最後有值的下一列，第一欄。其他以此類推。
5. 回傳資訊：return ContentService.createTextOutput(“成功”); 存入過程無誤，回傳成功資訊。若需要其他驗證條件也可以寫 if 條件判斷，並於失敗時，回傳失敗資訊。

Step3：部署

選擇發佈 -> 部署爲網路應用程式，看到以下畫面，將具有應用程式存取權的使用者改爲 “任何人，甚至是匿名使用者“ ，點選部署。

點選核對權限 -> 選擇自己的帳戶 -> 進階 -> 前往 -> 允許，接著就會看到以下畫面，網路應用程式網址即爲 Call API 的 URL。

Step4：利用 Ajax call API 存入資料

爲畫面上的 button 加上 click 監聽事件，並利用 ajax 發送 API，其中 url 請填入 step3 所取得的 API URL。

Step5：操作一次試試看:)

以上爲今日示範的簡單實作，正式實作時，可以再依照需求加入自己需要的驗證機制。若有問題也可以留言給我，一起討論成長。

GitHub

GitHub 程式碼

後記

Google Sheets API 的應用功能除了上述的簡單寫入以外，也能夠進行讀取，但這次專案中並不需要讀取的功能，只需要讓案主能夠透過試算表看到資訊，因此尚未研究，之後如果有研究，會再寫分享文章。

有興趣的人可以繼續研究讀取功能，若能同時寫入與讀取，就真的能將 Google Sheets 作爲小型簡易的後端使用了，也歡迎與我分享哦:)

參考資料

• Web Apps
• Class SpreadsheetAPP