網頁服務的基本架構
要在 GAS 執行 HTML 網頁。必須使用名為 doGet 的特殊函式。這是 Google 定義的標準接口。它會告訴伺服器你要回傳一個 HTML 檔案。增加 script 到 Code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
建立 HTML 檔案
在程式編輯器左側按下加號。選擇 HTML。檔案名稱輸入 index。在這裡你可以寫標準的 HTML 標籤。例如標題和按鈕。
<!DOCTYPE html>
<html>
<body>
<h1>資料查詢系統</h1>
<button onclick="getData()">獲取資料</button>
<div id="display"></div>
<script>
function getData() {
google.script.run.withSuccessHandler(showData).readSheetData();
}
function showData(data) {
document.getElementById('display').innerText = data;
}
</script>
</body>
</html>
撰寫資料庫讀取函式
回到 .gs 檔案。寫一個 readSheetData 函式。這就像是網頁與資料庫之間的橋樑。它負責進去試算表抓出你要的內容。
function readSheetData() {
var sheet = SpreadsheetApp.getActiveSheet();
var value = sheet.getRange("A1").getValue();
return value;
}
前後端溝通邏輯
在網頁端的 JavaScript 中。我們使用 google.script.run。這是一個特殊的指令。能讓你從網頁上。遠端呼叫雲端主機裡的 GAS 函式。
部署為網頁應用程式
點選右上角的部署。選擇新部署。
- 類型選擇網頁應用程式。
- 將執行身分設為你自己。
- 將誰可以存取設為任何人。
部署後你會得到一串專屬的網址。
實際運行
打開那串網址。你會看到你寫的 HTML 網頁。按下按鈕後。網頁會去抓取試算表 A1 的文字。並顯示在網頁畫面上。這樣你就完成了一個簡單的資料庫網頁。
你想試試看如何把網頁上的輸入框內容。存回試算表裡面嗎？
在網頁端建立輸入介面
首先在 HTML 檔案裡增加一個輸入框跟一個提交按鈕。我們給輸入框一個 id 方便之後抓取數值。
<input type="text" id="userInput">
<button onclick="saveData()">存入資料庫</button>
<script>
function saveData() {
var val = document.getElementById('userInput').value;
// 呼叫後端函式，並把數值傳過去
google.script.run.writeToSheet(val);
}
</script>
撰寫後端寫入函式
回到 .gs 檔案。建立一個接收資料的函式。它會把網頁傳過來的參數。寫進試算表的最後一行。
function writeToSheet(data) {
var sheet = SpreadsheetApp.getActiveSheet();
sheet.appendRow([data, new Date()]);
}
appendRow 的妙用
這個指令非常適合當資料庫使用。它會自動找到工作表最下方的空白行。把資料整排填進去。這裡我們順便存入了當下的時間戳記。
重新部署
修改 HTML 或後端程式碼後。記得要重新部署。點選部署。管理部署。按右上角的鉛筆圖示。選擇新版本。最後按下部署。網址不會變。但功能會更新。
體驗前後端連動
現在打開網頁網址。在框框輸入文字並按下按鈕。回到你的試算表。你會看到資料已經自動新增在最下面了。這就是一個簡易的表單系統。
你想挑戰看看如何把試算表裡的整張清單。用表格的形式顯示在網頁上嗎？
抓取整張清單
首先在後端寫一個抓取整塊資料的函式。我們用 getDisplayValues。這可以確保抓到的資料跟你在螢幕上看到的一模一樣。
JavaScript
function getFullData() {
var sheet = SpreadsheetApp.getActiveSheet();
var rows = sheet.getDataRange().getDisplayValues();
return rows;
}
在網頁端動態生成表格
在 HTML 裡面。我們準備一個空的容器。等資料從後端傳回來後。再用 JavaScript 把它拼成 HTML 表格標籤。
HTML
<div id="tableContainer"></div>
<script>
function loadTable() {
google.script.run.withSuccessHandler(buildTable).getFullData();
}
function buildTable(data) {
var html = '<table border="1">';
for (var i = 0; i < data.length; i++) {
html += '<tr>';
for (var j = 0; j < data[i].length; j++) {
html += '<td>' + data[i][j] + '</td>';
}
html += '</tr>';
}
html += '</table>';
document.getElementById('tableContainer').innerHTML = html;
}
// 網頁一打開就自動載入
window.onload = loadTable;
</script>
雙向運作的邏輯
這段程式碼會讓網頁一開啟。就去問 Google 伺服器要資料。後端把二維陣列傳給前端後。buildTable 函式會跑兩層迴圈。一層處理列。一層處理欄。
增加一點美化
你可以在 HTML 檔案的標頭加上簡單的 CSS。讓表格看起來更專業。不至於像原始的 HTML 那麼簡陋。
HTML
<style>
table { width: 100%; border-collapse: collapse; }
td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; }
tr:hover { background-color: #f5f5f5; }
</style>
成果展示
部署後開啟網址。你的試算表內容就會以乾淨的表格出現在網頁上。每次你修改試算表的格子。重新整理網頁。數據就會跟著同步更新。
這已經是一個非常實用的網頁報表工具。你接下來會想知道如何加上搜尋過濾的功能嗎？
建立搜尋框介面
在 HTML 裡面增加一個 input 標籤。給它一個 id 叫做 searchInput。並設定一個按鈕或使用關鍵字監聽事件。
HTML
<input type="text" id="searchInput" placeholder="輸入關鍵字搜尋...">
<button onclick="filterTable()">搜尋</button>
實作過濾邏輯
過濾功能可以直接在前端完成。這樣反應速度最快。我們修改之前的 JavaScript。將原始資料存起來。搜尋時只顯示符合條件的列。
JavaScript
var allData = []; // 用來存原始資料
function buildTable(data) {
allData = data; // 備份資料
renderTable(data);
}
function filterTable() {
var term = document.getElementById('searchInput').value.toLowerCase();
var filtered = allData.filter(function(row) {
return row.join("").toLowerCase().includes(term);
});
renderTable(filtered);
}
function renderTable(data) {
var html = '<table border="1">';
for (var i = 0; i < data.length; i++) {
html += '<tr>';
for (var j = 0; j < data[i].length; j++) {
html += '<td>' + data[i][j] + '</td>';
}
html += '</tr>';
}
html += '</table>';
document.getElementById('tableContainer').innerHTML = html;
}
關鍵字搜尋原理
filter 函式會檢查每一列。我們把整列的文字用 join 接起來。轉成小寫後。看看是否包含搜尋字串。如果有。這列資料就會被保留並重新畫在畫面上。
搜尋體驗優化
如果你不想要點按鈕。可以在輸入框加上 oninput 屬性。這樣使用者每打一個字。表格就會即時跳動過濾。
HTML
<input type="text" id="searchInput" oninput="filterTable()">
專案完成度
到這一步。你已經做出一個可以新增、自動讀取、格式化顯示、以及具備搜尋功能的網頁系統。而這一切的背後。都只是靠一個免費的 Google 試算表在支撐。
你想嘗試把這個網頁加上密碼登入功能，讓只有特定的人能看到資料嗎？
簡單的密碼檢查邏輯
最快速的方法是在前端放置一個提示框。當網頁載入時，先要求使用者輸入密碼。如果密碼正確，才執行抓取資料的函式。
JavaScript
function checkPassword() {
var password = prompt("請輸入訪問密碼：");
if (password === "1234") {
loadTable();
} else {
alert("密碼錯誤，請重新整理頁面再試一次。");
}
}
window.onload = checkPassword;
進階的安全驗證
前端密碼很容易被破解。比較專業的做法是把密碼存在試算表裡。由後端 GAS 進行比對。如果比對成功，才把資料回傳給網頁。
JavaScript
// 後端 .gs 程式碼
function verifyAndGetData(inputPassword) {
var correctPassword = "專屬密碼";
if (inputPassword === correctPassword) {
return getFullData();
} else {
return "ACCESS_DENIED";
}
}
修改網頁端對接
網頁端發送密碼後。要判斷回傳的結果。如果是拒絕存取，就顯示錯誤訊息。如果是資料，才開始畫表格。
JavaScript
function login() {
var pass = document.getElementById('passInput').value;
google.script.run.withSuccessHandler(function(result) {
if (result === "ACCESS_DENIED") {
alert("密碼不對喔");
} else {
buildTable(result);
}
}).verifyAndGetData(pass);
}
設定特定人員存取
如果你不想用密碼。其實可以在部署網頁應用程式時。將誰可以存取設定為僅限我自己或組織內成員。這樣使用者必須登入 Google 帳號才能看到網頁。這也是最安全的方法。
打造完整的後台
你現在可以自由控制誰能看、誰能搜、誰能改資料。這已經是一個微型管理系統的雛形。非常適合用在內部小組報帳、物資管理或活動報名。
