สร้าง Chatroom Application สำหรับห้องเรียน

bysemicon -
1

 

ตัวอย่าง

วิธีการสร้าง

  1. สร้าง Google Sheets: สร้างสเปรดชีตใหม่ และเพิ่มหัวตารางดังนี้
    datenamemesseges

  2. สร้างไฟล์ Code.gs  ตามตัวอย่างด้านล่าง

  3. สร้างไฟล์ index.html ตามตัวอย่างด้านล่าง 

  4. ปรับแต่ง HTML สามารถปรับแต่งสไตล์เพิ่มเติมใน CSS หรือใช้ Bootstrap Components 

  5. จัดการการทำให้ใช้งานได้

  6. ทดสอบการทำงาน เปิดเว็บแอปของคุณและทดสอบการส่งข้อความในแชต


Code.gs

function doGet() {
  return HtmlService.createTemplateFromFile('index')
      .evaluate()
      .setTitle('Chat App')
      .addMetaTag('viewport', 'width=device-width, initial-scale=1')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}


function sendMessage(name, message) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  sheet.appendRow([new Date(), name, message]);
  return getMessages();
}

function getMessages() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var data = sheet.getRange(1, 1, sheet.getLastRow(), 3).getDisplayValues().slice(1);
  return data.map(function(row) {
    return {time: row[0], name: row[1], message: row[2]};
  });
}



index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Chat Application</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .chat-container {
      max-width: 600px;
      margin: 50px auto;
    }
    .chat-box {
      height: 500px;
      overflow-y: auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #f8f9fa;
    }
    .message-row {
      display: flex;
      flex-direction: column;
      margin-bottom: 15px;
    }
    .message-row.right {
      align-items: flex-end;
    }
    .message-row.left {
      align-items: flex-start;
    }
    .message-bubble {
      max-width: 70%;
      padding: 10px;
      border-radius: 15px;
      position: relative;
    }
    .message-bubble.right {
      background-color: #b1e8f8;
      color: #000;
    }
    .message-bubble.left {
      background-color: #e9ecef;
      color: #000;
    }
    .message-info {
      font-size: 0.85em;
      margin-bottom: 5px;
      color: #6c757d;
    }
    #loginModal .modal-dialog {
      top: 30%;
    }
  </style>
</head>
<body>
  <div class="chat-container">
    <h2 class="text-center mb-4">Chat Application</h2>
    <div id="chat-box" class="chat-box"></div>
    <div class="input-group mt-3">
      <input type="text" id="message-input" class="form-control" placeholder="Type your message" autocomplete="off">
      <button class="btn btn-primary" onclick="sendMessage()">Send</button>
    </div>
  </div>

  <!-- Login Modal -->
  <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Enter Your Name</h5>
        </div>
        <div class="modal-body">
          <input type="text" id="username-input" class="form-control" placeholder="Your name" autocomplete="off">
          <div id="username-error" class="text-danger mt-2" style="display: none;">Please enter your name.</div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" onclick="saveUsername()">Join Chat</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS and dependencies -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  <script>
    let username = '';

    // Show login modal on page load
    document.addEventListener('DOMContentLoaded', function() {
      const loginModal = new bootstrap.Modal(document.getElementById('loginModal'));
      loginModal.show();
      loadChat();
      setInterval(loadChat, 3000);
    });

    function saveUsername() {
      const input = document.getElementById('username-input');
      const error = document.getElementById('username-error');
      if (input.value.trim() === '') {
        error.style.display = 'block';
      } else {
        username = input.value.trim();
        const loginModal = bootstrap.Modal.getInstance(document.getElementById('loginModal'));
        loginModal.hide();
      }
    }

    function sendMessage() {
      const messageInput = document.getElementById('message-input');
      const message = messageInput.value.trim();
      if (message === '' || username === '') return;
      google.script.run.withSuccessHandler(updateChatBox).sendMessage(username, message);
      messageInput.value = '';
    }

    function loadChat() {
      google.script.run.withSuccessHandler(updateChatBox).getMessages();
    }

    function updateChatBox(messages) {
      const chatBox = document.getElementById('chat-box');
      chatBox.innerHTML = '';
      messages.forEach(function(msg) {
        const messageRow = document.createElement('div');
        messageRow.classList.add('message-row');
        messageRow.classList.add(msg.name === username ? 'right' : 'left');

        const messageInfo = document.createElement('div');
        messageInfo.classList.add('message-info');
        messageInfo.textContent = `${msg.name} • ${new Date(msg.time).toLocaleString()}`;

        const messageBubble = document.createElement('div');
        messageBubble.classList.add('message-bubble');
        messageBubble.classList.add(msg.name === username ? 'right' : 'left');
        messageBubble.textContent = msg.message;

        messageRow.appendChild(messageInfo);
        messageRow.appendChild(messageBubble);
        chatBox.appendChild(messageRow);
      });
      chatBox.scrollTop = chatBox.scrollHeight;
    }
  </script>
</body>
</html>

แค่นี้คุณก็จะมีแชตแอปพลิเคชันที่ใช้ Google Apps Script แล้วครับ 


Tags:

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

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