今天我們做了一個出缺席查詢的網頁。
利用試算表作為我們的資料庫，使用google apps script去部屬成網頁。
附上網頁：網頁連結，目前只有小明小華小美

程式碼解析

function doGet() {
  var html = `...`;
  return HtmlService.createHtmlOutput(html);
}

doGet() 是 GAS Web App 的入口函式。
當你用瀏覽器訪問 Web App URL 時，GAS 會自動呼叫 doGet()。
函式內容是將一段 HTML 字串回傳給瀏覽器，生成前端網頁。

function searchAttendance() {
  var name = document.getElementById("name").value;
  if (!name) {
    document.getElementById("result").innerHTML = "<p class='empty'>請輸入姓名</p>";
    return;
  }
  google.script.run.withSuccessHandler(function(html) {
    document.getElementById("result").innerHTML = html;
  }).getAttendance(name);
}

function clearSearch() {
  document.getElementById("name").value = "";
  document.getElementById("result").innerHTML = "";
}

🔹 searchAttendance()
讀取 的輸入值（姓名）。
如果沒輸入姓名，顯示 請輸入姓名，並停止函式。
呼叫後端 GAS 函式 getAttendance(name)：
google.script.run：前端 JS 呼叫後端 GAS 的方式。
withSuccessHandler(function(html){...})：後端執行成功後，將回傳的 HTML 放到 。
🔹 clearSearch()
清空姓名輸入框
清空查詢結果

var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Attendance");
var data = sheet.getDataRange().getValues();

取得試算表中名稱為 "Attendance" 的工作表
getDataRange().getValues()：抓取整張表格的值，形成二維陣列（每列是一個陣列）

var result = [];
var presentCount = 0;
var totalCount = 0;

for (var i = 1; i < data.length; i++) {
  if (data[i][1] == name) {
    var status = data[i][2];
    result.push({ date: data[i][0], status: status });
    totalCount++;
    if (status.toLowerCase() === "出席" || status.toLowerCase() === "present") {
      presentCount++;
    }
  }
}

🔹 功能
result：儲存該姓名的出缺席紀錄
totalCount：該姓名的總紀錄數
presentCount：該姓名的出席次數
for 從第 2 列 (i=1) 開始，避免標題列
data[i][1]：姓名欄，符合輸入姓名就記錄
status.toLowerCase()：支援中文「出席」或英文「present」判斷

if (result.length === 0) {
  return `<p class="empty">查無 ${name} 的紀錄。</p>`;
} else {
  var table = "<table><tr><th>日期</th><th>狀態</th></tr>";
  result.forEach(function(r) {
    table += "<tr><td>" + r.date + "</td><td>" + r.status + "</td></tr>";
  });
  table += "</table>";

  var attendanceRate = ((presentCount / totalCount) * 100).toFixed(1);
  var summary = `<p style="margin-top: 15px; font-size:16px; text-align:center;">
                   出席率：<b>${attendanceRate}%</b> （${presentCount}/${totalCount} 次）
                 </p>`;

  return table + summary;
}

心得

這個出缺席查詢 Web App 讓我完整理解了前後端分工的概念，前端負責顯示與操作，後端負責資料讀取和計算，透過 Google Apps Script 的 google.script.run 實現即時互動，整體流程清楚且易維護。UI 設計使用卡片、陰影、圓角和表格奇偶行色差，讓介面簡潔美觀，使用者體驗良好。後端程式邏輯清楚，從試算表抓取資料、過濾特定姓名紀錄、計算出席率，再生成 HTML 回傳給前端，使用者能快速看到結果和出席統計。整個專案不僅練習了資料處理和前端互動，也讓我體會到如何將程式功能與視覺設計結合，使程式既能用又好看，並且具備擴充性，例如加入多筆同名搜尋、進度條或狀態變色都很方便。