Create a chat room with Google Apps Script

bysemicon -
1

 



ขั้นตอนที่ 1: สร้าง Google Sheet

  1. ไปที่ Google Drive ของคุณและสร้าง Google Sheet ใหม่ (ให้ชื่อว่า "data" หรือชื่อที่คุณต้องการ).
  2. ตั้งชื่อคอลัมน์ในแผ่นงานแรก (data) เช่น:
    • Timestamp - วันที่และเวลาที่ส่งข้อความ
    • Username - ชื่อผู้ใช้
    • Message - ข้อความที่ส่ง

ขั้นตอนที่ 2: สร้าง Google Apps Script

  1. เปิด Google Sheet ที่คุณสร้างขึ้น.
  2. คลิกที่ Extensions > Apps Script.
  3. ในหน้า Google Apps Script ให้คุณเขียนโค้ดที่จำเป็นสำหรับการจัดการข้อมูลการแชต.

ขั้นตอนที่ 3: เขียนโค้ด Google Apps Script


Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
      .setTitle('Simple Chat App')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function getMessages() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('data');
  var data = sheet.getDataRange().getValues();
  var messages = [];
 
  for (var i = 1; i < data.length; i++) {
    var row = data[i];
    messages.push({
      timestamp: row[0],
      username: row[1],
      message: row[2]
    });
  }
 
  return JSON.stringify(messages);
}


function postMessage(username, message) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('data');
  var timestamp = new Date();
 
  sheet.appendRow([timestamp, username, message]);
}


index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Chat Room</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f9;
        padding: 20px;
      }

      .chat-box {
        max-width: 600px;
        margin: 0 auto;
        padding:15px;
        background-color: white;
      }

      #message-form {
        display: flex;
        padding: 20px;
      }

      #messageInput {
        width: calc(100% - 22px);
      }

      input {
        flex-grow: 1;
        padding: 10px;
        margin-right: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }

      .message {
        margin-bottom: 10px;
      }

      .message span {
        font-weight: bold;
      }
     
      button {
        padding: 10px 20px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      button:hover {
        background-color: #45a049;
      }
     
    </style>
  </head>
  <body>
   
    <div class="chat-box">
      <div class="chat-box" id="chatBox"></div>
      <form id="message-form">
        <input type="text" id="username" placeholder="Your Name" required>
        <input type="text" id="messageInput" placeholder="Type a message..." required>
        <button onclick="sendMessage()">Send</button>
      </form>
    </div>

    <script>
      function fetchMessages() {
        google.script.run.withSuccessHandler(displayMessages).getMessages();
      }

      function displayMessages(data) {
        var messages = JSON.parse(data);
        var chatBox = document.getElementById('chatBox');
        chatBox.innerHTML = '';
        messages.forEach(function(msg) {
          var messageDiv = document.createElement('div');
          messageDiv.className = 'message';
          messageDiv.innerHTML = `<span>${msg.username}:</span> ${msg.message} <small>(${new Date(msg.timestamp).toLocaleString()})</small>`;
          chatBox.appendChild(messageDiv);
        });
      }

      function sendMessage() {
        var username = document.getElementById('username').value;
        var message = document.getElementById('messageInput').value;
        if (username && message) {
          google.script.run.postMessage(username, message);
          document.getElementById('messageInput').value = '';
          fetchMessages();
        } else {
          alert('Please enter both a name and a message.');
        }
      }

      // โหลดข้อความเมื่อหน้าเว็บโหลดเสร็จ
      document.addEventListener('DOMContentLoaded', fetchMessages);

      // โหลดข้อความใหม่ทุก 5 วินาที
      setInterval(fetchMessages, 5000);

    </script>
  </body>
</html>

ขอให้สนุกกับการสร้างเว็บแอพห้องแชตของคุณ!


Tags:

1 ความคิดเห็น

แสดงความคิดเห็น
ใหม่กว่า เก่ากว่า