iT邦幫忙

2025 iThome 鐵人賽

DAY 19
0
自我挑戰組

Google App Script雲端自動化與動態網頁實戰系列 第 19

D19 會議室借用與查詢系統

  • 分享至 

  • xImage
  •  

今天我們要來製作會議室借用與查詢系統,一樣也是用GAS製作。

前置作業

先在我們的雲端硬碟裡建好Google試算表
https://ithelp.ithome.com.tw/upload/images/20250828/20169466UuZsJqaGQ6.png
接下來,從擴充功能打開GAS,處理好專案授權後,就可以開始打我們的程式碼了!!

程式碼解析

function isAvailable(room, startTime, endTime) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("會議室紀錄");
  var data = sheet.getDataRange().getValues();
  
  for (var i = 1; i < data.length; i++) {
    var r = data[i];
    if (r[0] == room) {
      var bookedStart = new Date(r[2]);
      var bookedEnd = new Date(r[3]);
      if (!(endTime <= bookedStart || startTime >= bookedEnd)) {
        return false; // 時間衝突
      }
    }
  }
  return true;
}

這裡是在找我們連接的試算表裡,如果紀錄有衝突的話會回傳false否則為True

function bookRoom(room, user, startMs, endMs) {
  var startTime = new Date(startMs);
  var endTime = new Date(endMs);

  if (!isAvailable(room, startTime, endTime)) {
    return "❌ 該時段已被借用,請選擇其他時間";
  }

  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("會議室紀錄");
  sheet.appendRow([room, user, startTime, endTime, "已確認", ""]);
  return "✅ 借用成功!";
}

參數:
room:會議室名稱(文字)
user:借用人(文字)
startMs:開始時間(毫秒數,timestamp)
endMs:結束時間(毫秒數,timestamp)

把前端傳來的毫秒數轉換成 Date 物件(Google 試算表可以直接存放 Date 格式)
例如:1693215600000 → Thu Aug 28 2025 10:00:00 GMT+0800

在試算表最後新增一列紀錄

格式為:
會議室名稱 | 借用人 | 開始時間 | 結束時間 | 狀態 | 備註
狀態先填「已確認」,備註留空

function getBookings(room) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("sheet");
  var data = sheet.getDataRange().getValues();
  var roomInput = room.trim().toUpperCase();
  var html = "";

  // 先生成表格的開頭
  html += `
    <table>
      <thead>
        <tr>
          <th style="width:20%">借用人</th>
          <th style="width:30%">開始時間</th>
          <th style="width:30%">結束時間</th>
          <th style="width:20%">狀態</th>
        </tr>
      </thead>
      <tbody>
  `;

  // 遍歷資料並生成每一行
  var found = false;
  for (var i = 1; i < data.length; i++) {
    var rowData = data[i];
    var roomName = rowData[0];

    if (roomName && roomName.toString().trim().toUpperCase() === roomInput) {
      found = true;
      html += `
        <tr>
          <td>${rowData[1] ?? ""}</td>
          <td>${formatDate(rowData[2])}</td>
          <td>${formatDate(rowData[3])}</td>
          <td><span class="tag">${rowData[4] ?? ""}</span></td>
        </tr>
      `;
    }
  }

  // 關閉表格
  html += "</tbody></table>";

  // 如果沒有找到任何資料,返回一個特定的空內容
  if (!found) {
    return '<p class="empty">查無資料。</p>';
  }

  return html;
}

function formatDate(date) {
  if (!date) return "";
  var d = new Date(date);
  var pad = n => String(n).padStart(2, "0");
  return `${d.getFullYear()}/${pad(d.getMonth() + 1)}/${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
}

getBookings(room) 函式
這是主要的工作函式,它接收一個名為 room 的參數,代表使用者想要查詢的會議室名稱。

var sheet = ...:這行程式碼會開啟目前專案所綁定的 Google 試算表,並取得名稱為 "sheet" 的工作表。

var data = sheet.getDataRange().getValues();:這行程式碼會讀取整個工作表中的所有資料,並將其儲存在一個名為 data 的二維陣列中。

var roomInput = room.trim().toUpperCase();:這行程式碼會處理使用者傳入的會議室名稱,移除前後的空格並將所有字母轉為大寫,這樣可以確保搜尋時不會因為大小寫或多餘空格而失敗。

var html = ...:這行程式碼開始建立一個 HTML 字串,包含表格的開頭標籤 table>以及表頭 head,這是為了在前端建立一個格式化的表格。

if (roomName && roomName.toString().trim().toUpperCase() === roomInput):這是搜尋的核心。它會檢查每一行的第一欄(rowData[0],也就是會議室名稱),如果該會議室名稱存在,並且經過處理後與使用者輸入的名稱完全匹配,則執行迴圈內的程式碼。

html += ...:如果找到匹配的資料,這行程式碼會將包含借用人、開始時間、結束時間和狀態的 HTML 表格列(tr)字串附加到 html 變數中。

if (!found):在迴圈結束後,如果 found 變數仍為 false,表示沒有找到任何符合條件的紀錄,函式將回傳一個包含「查無資料」的 HTML 段落。

return html;:如果找到了紀錄,函式會回傳完整的 HTML 表格字串,這個字串會被傳送到前端網頁。
接著明天我們要來看網頁的部分。


上一篇
D18 Line Notify 替代
下一篇
D20 會議室借用與查詢系統
系列文
Google App Script雲端自動化與動態網頁實戰20
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言