利用 Google 服務寫一個 API server 真的只能在小眾或是測試你的前端時使用。因為流量的關係，如果你放到 Production ，會很精彩喔～
使用 Google Apps Script (GAS) 是我這次與兔兔教教友們（見最後一張圖）一起參加 2021 鐵人賽，我想要寫的題目之一。
因為最近在處理學校（恩對我換去學校服務了）的一些行政流程時，發現如果使用 GAS 做 Google Service 的自動化處理，會非常方便，因此就入坑了。
入坑之後不得了！Google 竟然佛心到這樣，還可以直接免費的 Deploy 到他的 server 上，讓你直接當作小型的網站後端或是 API Server，真的是讓我決定在自動化的部分加上網頁或是 API 服務當作後續的撰寫題目中。
這邊文章主要是紀錄一下自己練習的過程～
讓我們開始吧！
今天會講到：
1. 基本概念與 doc
2. 實作
3. 部署與驗證
做一個回覆 JSON 格式 {“Hello”: “World”} 的簡易 API 服務
我們先來看一下可(ㄊㄠˇ)愛(ㄧㄢˋ)的 Doc 部分：
可以看到在使用的部分，GAS 提供了三種方案：單獨使用、搭配 Google Workspace 其他服務使用，以及今天要講的 Web apps 使用。
讓我看一下點選 Web Apps 之後的欄位：
基本上，這只是部分，但是你可以發現在裡面提供了兩種已經設定好的 function 名稱： doGet() 以及 doPost()。
跟你想的差不多（如果你對於網路或是 API 有一點概念的話），doGet() 的函式就是提供當 request method 是 GET 時所觸發的事件函式；同理， doPost() 就是 request 為 POST 時所觸發的事件函式。
因此只要運用得當，你也可以輕鬆建構起一個簡單的 API，甚至搭配其他 Google 提供的 Service，甚至可以做到一部分的自動化。
廢話不多說我們開始寫 Code！
實作
我們開啟 Apps Script 網頁：
然後直接點選 ＋新專案 開啟一個全新的 Google Apps Script 專案。
接著就開始打 Code 了：
這樣就開始？
好啦，當然我們還是有一點好習慣，稍微的修改一下檔名：
接下來我們在 doGet() 的函式中打入以下程式碼：
const data = JSON.stringify({"Hello": "World"});return ContentService.createTextOutput(data)
.setMimeType(ContentService.MimeType.JSON);
然後長成這樣：
恩，你的 Hello World API 就完成了。
沒錯你沒看錯，一行指令，搞定千山萬水，就算有 Quata 限制，那也挺值得的（抹眼淚）。
弄完之後，我們來試試看吧！
發布與驗證
我們接下來好好的發布一下。
發布一下別忘記按一下執行，看看你有沒有打錯喔～
然後按下右上面的「部署」按鈕：
選擇新增部署後，會看到兩欄，每一欄的第一列都有小齒輪，點左邊的小齒輪：
然後選網頁應用程式，會出現以下畫面：
說明的部分就打你喜歡的。
執行身份如果你不想麻煩就選自己（反正我也只實作過這個..）
誰可以存取要選「所有人」
接下來就長這樣：
接著就按下「部署」
等待片刻出現以下畫面，就代表你的 API 上線啦！
接下來我們就來驗證一下你的 API 是否可行！
按下複製網址，然後在電腦中（隨便路徑，開心就好）建立一個 html 與 js，把程式碼都打上
HTML → index.html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test api</title> </head> <body> <script src="./index.js"></script> </body></html>
JS → index.js
getData();async function getData() { const uri = '你的連結～' const response = await fetch(uri); const data = await response.json(); console.log(data);}
然後開啟網頁，打開開發人員選項，看到 Console 應該長這樣：
🎉🎉🎉🎉 大功告成 🎉🎉🎉🎉
如果你出現下面的情況：
你真的去 Google 了也別慌張！
根據我目前測試的結果，通常要馬你的程式碼打錯了，要馬就是你忘記先按執行一下（其實有時候沒按也可以，但是按了更安心），所以出現 CORS 的問題！
所以千萬別慌張，回去好好的把 code 重新打對，應該就會好了！
如果還不對…那聽說 Google 很方便的！千萬不要吝嗇跟 Google 好好進行一番人與機器之間激情且刺激的交流！
（精神上的，肢體上的就不必了，除非你真的不缺錢）
今天我就是很簡單的把 GET 部分做完了！
如果要 POST，其實也就是把 doGet() 改成 doPost() 而已！
在 fetch 的時候（或是其他的 ajax 方法）記得 method 改成 ‘POST’ 就行了！
今天就這樣囉～
先留一個坑，就是 HTML 的後端～
就下次再見囉～掰掰！
喜歡我的文章記得給我點掌聲，或是留言告訴我！
你們喜愛這樣的內容，是我持續不當富堅（有看獵人你就會懂）的動力喔！
