四步驟快速建置
跟隨以下步驟，複製貼上程式碼，即可完成部署。我們會引導您完成從資料庫設定到網頁發布的流程。
準備 Google 試算表
這是系統的資料庫。請建立一個新的 Google Sheet，並嚴格遵守右側的格式。工作表名稱必須命名為 成績單。
-
A學號 (帳號)
學生查詢時的唯一識別碼。
-
B驗證碼 (密碼)
例如生日或身分證末四碼，確保隱私。
-
C姓名
顯示於查詢結果頁面。
成績單 (工作表名稱)
| A (學號) | B (驗證碼) | C (姓名) | D (國文) | E (數學) |
|---|---|---|---|---|
| 11201 | 0101 | 王小明 | 90 | 85 |
| 11202 | 0520 | 李小華 | 88 | 92 |
| ... | ... | ... | ... | ... |
提示：D欄以後可以自由新增任何科目或評語。
後端程式碼 (程式碼.gs)
在試算表中點選 擴充功能 > Apps Script，清空編輯器內容並貼上以下程式碼。這段程式負責處理驗證與資料抓取。
// 產生網頁介面
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate()
.setTitle('學生成績查詢系統')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
.addMetaTag('viewport', 'width=device-width, initial-scale=1');
}
// 處理查詢請求的函式
function searchGrade(studentId, password) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("成績單");
if (!sheet) {
return { status: "error", message: "找不到名為'成績單'的工作表" };
}
var data = sheet.getDataRange().getDisplayValues();
for (var i = 1; i < data.length; i++) {
var row = data[i];
// 比對學號與密碼 (去除空白)
if (row[0].toString().trim() == studentId.toString().trim() &&
row[1].toString().trim() == password.toString().trim()) {
return {
status: "success",
header: data[0],
result: row
};
}
}
return { status: "failed" };
}
前端介面 (Index.html)
新增一個 HTML 檔案並命名為 Index，貼上以下代碼。這是學生將會看到的查詢網頁。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta charset="UTF-8">
<style>
body { font-family: "Microsoft JhengHei", sans-serif; padding: 20px; background-color: #f0f2f5; display: flex; justify-content: center; }
.container { width: 100%; max-width: 450px; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
h2 { text-align: center; color: #1a73e8; margin-bottom: 25px; }
.input-group { margin-bottom: 15px; }
input { width: 100%; padding: 12px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; }
button { width: 100%; padding: 12px; background-color: #1a73e8; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: bold; margin-top: 10px; }
button:hover { background-color: #1557b0; }
#resultArea { margin-top: 25px; display: none; border-top: 2px solid #f0f2f5; padding-top: 10px; }
.student-name { text-align: center; font-size: 1.2em; color: #333; margin-bottom: 15px; font-weight: bold; }
.item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed #eee; }
.error { color: #d93025; text-align: center; margin-top: 15px; display: none; background: #fce8e6; padding: 10px; border-radius: 6px; }
</style>
</head>
<body>
<div class="container">
<h2>🏫 成績查詢系統</h2>
<div class="input-group">
<input type="text" id="studentId" placeholder="請輸入學號">
</div>
<div class="input-group">
<input type="password" id="password" placeholder="請輸入驗證碼 (生日/身分證)">
</div>
<button onclick="runSearch()" id="btn">查詢成績</button>
<div id="errorMsg" class="error">查無資料</div>
<div id="resultArea"></div>
</div>
<script>
function runSearch() {
var id = document.getElementById("studentId").value;
var pwd = document.getElementById("password").value;
var btn = document.getElementById("btn");
var errorMsg = document.getElementById("errorMsg");
var resultArea = document.getElementById("resultArea");
if(id === "" || pwd === "") { alert("請輸入完整資訊！"); return; }
btn.disabled = true; btn.innerHTML = "查詢中...";
errorMsg.style.display = "none"; resultArea.style.display = "none";
google.script.run
.withSuccessHandler(function(response) {
btn.disabled = false; btn.innerHTML = "查詢成績";
if (response.status === "success") {
var html = '<div class="student-name">' + response.result[2] + ' 同學的成績單</div>';
for (var i = 3; i < response.header.length; i++) {
if(response.header[i]) {
html += '<div class="item"><span>' + response.header[i] + '</span><span>' + response.result[i] + '</span></div>';
}
}
resultArea.innerHTML = html;
resultArea.style.display = "block";
} else {
errorMsg.style.display = "block";
}
})
.searchGrade(id, pwd);
}
</script>
</body>
</html>
部署與發布
這是最關鍵的一步。如果設定錯誤，學生將無法看到查詢介面。請勾選以下檢查清單：
關於權限授權
首次部署時，Google 會跳出「未驗證的應用程式」警告。請點選「進階 (Advanced)」 -> 「前往... (不安全)」 -> 「允許」，這是正常的流程，因為這是您自己寫的程式。