很多朋友使用 Google 表單來收集訂單、報名資料或其他資訊，但常常遇到一個困擾：Google 表單本身沒有提供讓使用者查詢自己資料的功能。例如，客戶下單後想查詢訂單處理狀態，或是活動報名者想確認報名是否成功，都無法直接透過表單完成。
為了解決這個問題，今天我們要來教大家如何利用 Google Apps Script (GAS)，為你的 Google Sheet 資料加上一個簡易的查詢系統，並將它嵌入到任何可以貼上 HTML 的地方，例如 Blogger、Google Sites 或你自己的網站，讓使用者可以輸入特定關鍵字（像是訂單編號、身分證字號等）來即時查詢相關資料。
這個方法的好處是：
免費： 完全使用 Google 的免費服務 (Google Sheet, Apps Script, Blogger/Sites)。
即時： 查詢結果直接來自 Google Sheet，資料更新後查詢結果也同步更新。
彈性： 可自行修改查詢的欄位與顯示方式。
成果預覽： (類似影片 0:57 處展示的頁面)
使用者在一個簡單的網頁介面上輸入查詢關鍵字（例如訂單編號），按下「查詢」按鈕後，符合條件的資料就會以表格形式顯示出來。
製作步驟：
第一步：準備你的 Google Sheet 資料
首先，你需要有一個 Google Sheet 檔案，裡面包含你想讓使用者查詢的資料。
必要條件： 資料的第一列必須是「欄位標題」(Header Row)，例如：身分證號、訂單編號、姓名、訂單狀態... 等。
查詢欄位： 你需要決定讓使用者用哪一個欄位的資料來當作查詢關鍵字。 在本教學範例中，我們一開始示範用「身分證號」（第一欄），後來改成用「訂單編號」（第二欄）來查詢。
範例資料結構： (類似影片 1:17 處的表格)
A01 A0001 蔡明和 已寄出 A02 A0002 一整天 等待匯款 A01 A0003 蔡明和 等待匯款 A03 A0004 範例名 已寄出
第二步：撰寫並部署 Google Apps Script
打開你的 Google Sheet 檔案。
點選頂部菜單的「工具」>「指令碼編輯器」。
你會進入 Apps Script 編輯器畫面。將原本預設的程式碼 ( function myFunction() { ... } ) 全部刪除。
將下方的 Apps Script 程式碼完整複製並貼到編輯器中。
【重要修改】 找到程式碼中這一段（大約在第 20 行）：
for (var i = 1 ; i < listAll.length; i++) {
if (listAll[i][0 ] == uid) {
data .push(listAll[i]);
}
}
listAll[i][0] 中的數字 0 代表「 要用來比對查詢關鍵字的是第幾欄 」。
0 代表第一欄 (Column A)
1 代表第二欄 (Column B)
2 代表第三欄 (Column C)，以此類推。
請根據你想讓使用者查詢的欄位，修改這個數字。 例如，若要用「訂單編號」（範例中的第二欄）查詢，就將 [0] 改成 [1] 。
== uid 代表進行「完全符合」的比對。
點擊上方的「儲存專案」圖示 (💾)，並為這個指令碼專案命名（例如：訂單查詢系統）。
部署指令碼：
點擊右上角的「部署」>「新增部署」。
在「選取類型」旁點擊齒輪圖示，選擇「 網路應用程式 」。
設定：
描述：可自行輸入（例如：訂單查詢 v1）。
執行身分：選擇「我」。
誰可以存取： 選擇「任何人 (甚至匿名使用者)」 (這是讓公開網頁能呼叫的關鍵)。
點擊「部署」。
授權： 第一次部署會要求授權。點擊「授予存取權」，選擇你的 Google 帳戶，可能會顯示「Google 尚未驗證這個應用程式」，點擊「進階」>「前往 [你的專案名稱] (不安全)」，然後點擊「允許」。
複製網址： 授權成功後，會顯示一個「網路應用程式網址」， 請務必將這個網址複製下來 ，等一下會用到。點擊「完成」。
Apps Script 程式碼：
function doGet(e) {
var params = e.parameter;
var uid = params.uid;
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getActiveSheet();
var lastRow = sheet.getLastRow();
var lastColumn = sheet.getLastColumn();
var data = [];
var listAll = sheet.getRange(1 , 1 , lastRow, lastColumn).getValues();
if (listAll.length > 0 ) {
data .push(listAll[0 ]);
}
for (var i = 1 ; i < listAll.length; i++) {
if (listAll[i][0 ] == uid) {
data .push(listAll[i]);
}
}
var result = JSON.stringify(data );
return ContentService.createTextOutput(result).setMimeType(ContentService.MimeType.JSON);
}
第三步：製作查詢介面 (HTML + JavaScript)
複製下方的 HTML 與 JavaScript 程式碼。
你可以將這段程式碼貼到：
Blogger: 新增文章，切換到「HTML 檢視模式」貼上。
Google Sites: 使用「嵌入」>「嵌入程式碼」功能貼上。
任何支援 HTML 的網頁空間。
【重要修改】 找到程式碼中這一段（大約在第 41 行）：
var url = "【請貼上你剛剛複製的網路應用程式網址】" ;
將 【請貼上你剛剛複製的網路應用程式網址】 這串文字， 換成你剛剛在第二步部署後複製的那個網址 。
【選擇性修改】 你可以修改輸入框前面的提示文字、按鈕文字、或查詢結果的區域名稱 ( id="order_status" )，但記得若修改了 id ，對應的 JavaScript 也要修改。修改輸入框的 id="uid" ，則 Apps Script 中的 params.uid 也要對應修改。
儲存或發佈你的網頁/文章。
HTML + JavaScript 程式碼：
<!DOCTYPE html >
<html >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<title > 訂單查詢</title >
<style >
table , th , td {
border : 1px solid black;
border-collapse : collapse;
padding : 5px ;
}
th {
background-color : #f2f2f2 ;
}
</style >
</head >
<body >
<h2 > 訂單查詢</h2 >
請輸入訂單編號：
<input type ="text" id ="uid" placeholder ="輸入查詢關鍵字" >
<input type ="button" value ="查詢" onclick ="showList(document.getElementById('uid').value);" >
<br > <br >
<span id ="order_status" > 請輸入關鍵字後點擊查詢按鈕</span >
<script >
function showList (crit ) if (!crit) {
document .getElementById('order_status' ).innerHTML = '<font color="red">請輸入查詢關鍵字！</font>' ;
return ;
}
document .getElementById('order_status' ).innerHTML = '查詢中...' ;
var url = "【請貼上你剛剛複製的網路應用程式網址】" ;
var finalUrl = url + "?uid=" + encodeURIComponent (crit);
var xhr = new XMLHttpRequest();
xhr.open("GET" , finalUrl, true );
xhr.onreadystatechange = function (if (xhr.readyState == 4 && xhr.status == 200 ) {
try {
var jsonData = JSON .parse(xhr.responseText);
if (jsonData.length <= 1 ) {
document .getElementById('order_status' ).innerHTML = '<font color="red">查無資料</font>' ;
} else {
var html = '<table>' ;
html += '<tr>' ;
for (var j = 0 ; j < jsonData[0 ].length; j++) {
html += '<th>' + jsonData[0 ][j] + '</th>' ;
}
html += '</tr>' ;
for (var i = 1 ; i < jsonData.length; i++) {
html += '<tr>' ;
for (var j = 0 ; j < jsonData[i].length; j++) {
html += '<td>' + jsonData[i][j] + '</td>' ;
}
html += '</tr>' ;
}
html += '</table>' ;
document .getElementById('order_status' ).innerHTML = html;
}
} catch (e) {
document .getElementById('order_status' ).innerHTML = '<font color="red">查詢出錯，請稍後再試或聯繫管理員。</font>' ;
console .error("JSON Parsing Error:" , e);
console .error("Received Text:" , xhr.responseText);
}
} else if (xhr.readyState == 4 ) {
document .getElementById('order_status' ).innerHTML = '<font color="red">查詢失敗 (Status: ' + xhr.status + ')</font>' ;
}
};
xhr.send();
}
</script >
</body >
</html >
第四步：測試
打開你剛剛嵌入 HTML 的網頁或 Blogger 文章，在輸入框中輸入你在 Google Sheet 中存在的訂單編號或其他關鍵字，按下「查詢」按鈕，看看是否能成功顯示對應的資料。也可以試試輸入不存在的關鍵字，看看是否顯示「查無資料」。
常見問題與進階：
修改了 Apps Script 程式碼後查詢沒反應？
請儲存 Apps Script。
最重要的是，你需要 重新部署 一次網路應用程式（部署 > 管理部署 > 選擇你的部署 > 編輯(鉛筆圖示) > 版本選擇「新增版本」> 部署）。每次修改後端 Apps Script 都需要重新部署。
查詢欄位不是第一欄？ 依照【第二步：第 5 點】修改 Apps Script 中的欄位索引數字。
想用多個條件查詢（例如：身分證 + 手機號碼）？
Apps Script ( doGet ): 需要接收多個參數 (例如 params.uid , params.phone )，並修改 if 判斷式，使用 && (AND) 連接多個條件比對 (例如 if (listAll[i][0] == uid && listAll[i][3] == phone) )。
HTML/JavaScript: 需要增加輸入欄位，並在 showList 函數中組合網址時加入多個參數 (例如 finalUrl = url + "?uid=" + uidValue + "&phone=" + phoneValue; )。
效能問題： 如果你的 Google Sheet 資料量非常大（上萬筆），每次查詢都讀取整個工作表可能會變慢。進階作法可以考慮只讀取特定範圍或使用更有效率的查詢方式，但會更複雜。
希望這個教學對你有幫助！透過簡單的設定，你就能為你的 Google 表單資料建立一個方便的查詢系統了。如果遇到問題，歡迎到論壇或留言討論。
VIDEO
沒有留言:
張貼留言
注意：只有此網誌的成員可以留言。