最近學了個新東西
Google 表單 及 試算表
利用這兩個工具
試算表可以當作資料庫儲存
製作網頁上的留言牆
這種效果
Google 表單 = 接收資料的入口
Google 試算表 = 資料庫
首先 建立一個 Google 表單
新增2個 非必填 的 問題
問題 1：名字 右邊 下拉選單 選擇 簡答
問題 2：內容 一樣 選單 選擇 簡答
點擊 表單右上角 發佈按鈕 旁邊 的 三個點 ⋮
選擇 預先填寫表單
名字 欄位 輸入 NAME
內容 欄位 輸入 TXT
按下 取得連結
會得到 類似這樣子的連結
"https://docs.google.com/forms/d/e/"1FA1B2C3D4F5G6H7I8-A1B2C3D4"/viewform?usp=pp_url&entry."1234567"=NAME&entry."7654321"=TXT"
名稱(entry ID)=1234567
內容 (entry ID)=7654321
表單 ID="1FA1B2C3D4F5G6H7I8-A1B2C3D4C5"
-按下 送出按鈕後 的 動作-
window.yumi_mb_send_data = function() {
const NAME = document.getElementById('yumi_mb_NAME').value.trim();
const TXT = document.getElementById('yumi_mb_content').value.trim();
// 發送表單的連結+/formResponse
const formUrl = "https://docs.google.com/forms/d/e/.../formResponse";
const params = new URLSearchParams();
// 名稱ID
params.append('entry.1234567', NAME);
// 內容ID
params.append('entry.7654321', TXT);
fetch(formUrl, { method: 'POST', mode: 'no-cors', body: params }) // 發送！
.then(() => {
yumi_mb_render_note(NAME, TXT, true);
alert("留言成功送出！");
});};
連結試算表
建立
擴充功能 點擊 Apps Script
function doGet() {
// 找到這張試算表
var ss = SpreadsheetApp.getActiveSpreadsheet();
// 找到第一個分頁
var sheet = ss.getSheets()[0];
// 把裡面所有格子的內容都讀出來
var data = sheet.getDataRange().getValues();
var result = [];
// 從第二列開始讀(因為第一列 是 標題) 只要最後 50 則內容
for (var i = Math.max(1, data.length - 50); i < data.length; i++) {
// 如果這行有名字或內容
if (data[i][1] || data[i][2]) {
result.push({
// 把第 2 欄當作 名字
NAME: data[i][1],
// 把第 3 欄當作 內容
TXT: data[i][2]
});}}
// 把最近的留言排到最前面 然後把資料打包
// reverse() 會把留言順序倒過來 最新的在前
// JSON.stringify 則是把資料轉成網頁看得懂的文字格式
var output = JSON.stringify(result.reverse());
var cb = e.parameter.callback;
點擊 部屬 新增部屬
類型選擇 網頁應用程式
誰可以存取 所有人
最後 部屬 授權
這樣 試算表(資料庫) 就建立好了
有 資料庫(試算表)
有 入口(表單)
只要再把 元件 按鈕 加進去 就完成了
-美化留言板-
ndow.yumi_mb_render_note = function(NAME, TXT, isNew = false) {
// 定義顏色清單
const colors = ['#ffb6c1', '#e6e6fa', ];
// 隨機挑一個色
const randomColor = colors[Math.floor(Math.random() * colors.length)];
// 隨機旋轉 -5~5 度
const randomDeg = (Math.random() * 10 - 5).toFixed(1);
// 建立新的 div 區塊
const newNote = document.createElement('div');
// 放入隨機樣式
newNote.style.cssText = `background: ${randomColor}; transform: rotate(${randomDeg}deg); ...`;
// 把名字和內容放進去
newNote.innerHTML = `${NAME}< div>${TXT}< /div>`;
const wall = document.getElementById('yumi_mb_wall');
// 如果是 新留言 放最前面
if(isNew) { wall.prepend(newNote); }
// 但如果是 舊留言 依序往後放
else { wall.appendChild(newNote); }};
-loadMessages 負責讀取資料-
function loadMessages() {
// 網址加時間戳，防止讀到舊資料
const fetchUrl = `${GAS_URL}?t=${new Date().getTime()}`;
fetch(fetchUrl, { method: "GET", mode: "cors", redirect: "follow" })
// 把抓回來的資料變成 JavaScript 看得懂的格式
.then(res => res.json())
// 先清空畫面 然後用資料裡面的每一筆訊息去執行
.then(data => {
data.forEach(item => yumi_mb_render_note(item.NAME, item.TXT));
});}
最後是HTML的外殼
< div id="yumi_mb_container" style="background:""; padding:15px; border-radius:12px; ..." >
< h4 style="color:""; text-align:center;" >"名稱"< /h4 >"內容"< /div >
-輸入區域-
< div style="background:""; padding:10px; border-radius:8px;" >
< div style="display:flex; gap:5px;" >
// 暱稱輸入框 JS 會透過這個 ID 來抓取填寫的名字
< input type="text" id="yumi_mb_NAME" placeholder="名稱" ... >
// 最重要的部分 告訴瀏覽器 有人點這個按鈕時 請去執行 JS 裡面的發送功能
< button id="yumi_mb_submit_btn" onclick="yumi_mb_send_data()" ... >"送出"< /button >
< /div >
< textarea id="yumi_mb_content" placeholder="內容" ... >< /textarea >
< /div >
-留言顯示牆-
// 留言橫著排成一列 內容如果太多時 會出現橫向捲軸
< div id="yumi_mb_wall" style="display:flex; overflow-x:auto; ..." >
< div id="yumi_mb_status_area" >
< div id="loading_spinner" >"讀取留言中..."< /div >< /div >< /div >
這樣 就大功告成了
其它就是一些細項的設定
依照個人喜好去做