經過前面兩天稍微了解了 HTML Service 後，今天我們要來開始實作我們的 To Do List 了！
今天我們分成三個部分進行：
建立假資料。
完成 GAS 程式設定。
完成 HTML。
就讓我們開始吧！
首先我們開啟我們塵封已久的 To Do List DB 試算表。
真的是許久不見了，空白了那麼久就讓我們來寵信你吧（金變態）。
開玩笑的！
我們首先先定義一下我們的資料欄位，我分為幾個部分 - 登錄時間、Key、事件 event、是否已經完成 isDone：
接下來我們來新增一些假資料：
一樣，金變態。
這樣就好了，沒錯，就是這麼簡單！
歐對了，你會發現 isDone 欄位我是使用 Check Box ，因為這樣在 Google Apps Script 中比較好處理。
接下來來到第二部分：完成 GAS 程式。
今天的部分因為我只是想要呈現資料，因此我就寫了兩個函式來處理：
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function showToDoListData() {
const datas = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0].getDataRange().getValues();
return datas.slice(1);
}
跟 Day 16 一樣，第一個 doGet 負責處理 HTTP 的 GET 請求。
而第二個 showToDoListData 則是把資料吐給前端。
這樣就完成第二部分啦！
接下來是第三部分，其實才是最麻煩的地方…
因為畫面要呈現，所以勢必要看看如何呈現。
但是因為這系列文章的重點不是在前端網頁，所以我決定用最醜的方式書寫就好…
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function showData(datas) {
const tbody = document.querySelector('#items');
datasFormat = []
datas.forEach(data => {
datasFormat.push([data[2], data[3]])
});
datasFormat.forEach((data, index) => {
const tr = document.createElement('tr');
const count = document.createElement('td');
count.innerText = index;
tr.appendChild(count)
data.forEach(item => {
const td = document.createElement('td');
td.innerText = item;
tr.appendChild(td)
});
tbody.appendChild(tr);
});
}
google.script.run.withSuccessHandler(showData)
.showToDoListData();
</script>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>編號</th>
<th>事情</th>
<th>是否完成</th>
</tr>
</thead>
<tbody id="items"></tbody>
</table>
</div>
</body>
</html>
完成了三步驟，我們來重新部署一下。
部署過程中一樣會要權限允許，就稍微按一下吧！
過程我就不 ＰＯ 了！
然後我們來看一下結果：
耶？東西怎麼都沒有跑出來？
看一下 console ：
哇哩咧！？怎麼會是傳 null ？
這邊我修修改改修修改改，差點是以為我早上起床姿勢不對（？）才導致的 Bug 時，我又瞥到了可愛的 Docs ：
簡單來說，不能直接傳 Array 啦！我們只能傳 Number , Boolean , String 或是 null 。
所以在 .gs 的部分必須要來處理一下：
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function showToDoListData() {
const datas = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0].getDataRange().getValues();
return JSON.stringify(datas.slice(1));
}
這邊我把它利用 JSON.stringify 轉為字串傳出。
而 .html 的部分則是另外把他轉回 Array 型態：
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function showData(datas) {
const tbody = document.querySelector('#items');
datasFormat = []
JSON.parse(datas).forEach(data => {
datasFormat.push([data[2], data[3]])
});
datasFormat.forEach((data, index) => {
const tr = document.createElement('tr');
const count = document.createElement('td');
count.innerText = index;
tr.appendChild(count)
data.forEach(item => {
const td = document.createElement('td');
td.innerText = item;
tr.appendChild(td)
});
tbody.appendChild(tr);
});
}
google.script.run.withSuccessHandler(showData)
.showToDoListData();
</script>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>編號</th>
<th>事情</th>
<th>是否完成</th>
</tr>
</thead>
<tbody id="items"></tbody>
</table>
</div>
</body>
</html>
然後我們重新部署後來看一下結果吧！
ＯＫ～版型雖然難看，但是完成了！！
今天就到這裡囉！
也是平安的結束了一天呢！
就到這裡囉！
明天見！
Tailwind CSS 臺灣 (臉書粉絲專頁)
兔兔教 × Tailwind CSS Taiwan (臉書社群)
我：今天週六，但是也莫名其妙的忙到了現在…到底我在忙什麼啊…？
iThome鐵人賽
看影片追技術