ตัวอย่าง
วิธีการสร้าง
- สร้าง Google Sheets: สร้างสเปรดชีตใหม่ และเพิ่มหัวตารางดังนี้
- สร้างไฟล์ Code.gs ตามตัวอย่างด้านล่าง
- สร้างไฟล์ index.html ตามตัวอย่างด้านล่าง
- ปรับแต่ง HTML สามารถปรับแต่งสไตล์เพิ่มเติมใน CSS หรือใช้ Bootstrap Components
- จัดการการทำให้ใช้งานได้
- ทดสอบการทำงาน เปิดเว็บแอปของคุณและทดสอบการส่งข้อความในแชต
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 แล้วครับ
ที่มาครูสมชายคัดมาจาก : {getButton} $text={อ้างอิงที่มา} $icon={link} $color={red}
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.
I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
THANKS FOR VISITING thumariya.blogspot
Have a nice day!
-------------------------- -------------------------
ฉันจะพยายามระดับของฉันให้ดีที่สุดเพื่อแก้ไขปัญหา
ขอบคุณสำหรับการเยี่ยมชม thumariya.blogspot
ขอให้เป็นวันที่ดี!
-------------------------- -------------------------
{fullWidth}