NotifyApp ไลบรารี่
NotifyApp ไลบรารี่
NotifyApp ไลบรารี่
NotifyApp ไลบรารี่ที่จะช่วยให้การส่ง Line notify ด้วย Google Script ง่ายขึ้น
หรือ https://mdrpmdrp.medium.com/
Code Libary : 1vXbZfRP-7AqwqV7k0fGAnVjCe34pYyI2WdZBJw1Y8U0_DuEbo5fN32P9
ตัวอย่างโค้ดที่เราจะใช้งานเจ้าตัวไลบรารี่ตัวนี้ครับ
1. ส่งข้อความอย่างเดียว
NotifyApp.sendNotify(token,message)
2. ส่งข้อความพร้อมรูปภาพ
NotifyApp.sendNotify(token,message,image_url)
หรือถ้าจะส่งโดยใช้ไฟล์
NotifyApp.sendNotify(token,message,image_blob)
3. ส่งข้อความพร้อมรูปภาพ และสติ๊กเกอร์
ในส่วนของ Sticker Package https://developers.line.biz/en/docs/messaging-api/sticker-list/#sticker-definitions
และ Sticker ID นั้น สามารถดูได้ที่ https://developers.line.biz/en/docs/messaging-api/sticker-list/#sticker-definitions
สรุป Code
function sendMsg() {
let token = "xxxxxxxxxxxxxxxxxxxxxx" //token ที่ได้จาก line notify
let message = 'This is message sent form NotifyApp Library'
let image = 'https://drive.google.com/uc?id=11E6O4nDh4_fVbyjOpQnc0xpc4YHEykpG'
let stickerPackage = 446
let stickerId = 1988
NotifyApp.sendNotify(token,message,image,stickerPackage,stickerId)
}
Login + Line Notify
======= Code.GS============
function doGet() {
return HtmlService.createHtmlOutputFromFile('LoginPage');
}
function checkLogin(username, password) {
const sheet = SpreadsheetApp.openById('1SVqVAtGJuQ_15c1PR00uWQ3I4rNRrjmL-2GSy2BSdJ0').getSheetByName('LoginData');
const data = sheet.getDataRange().getValues();
let status = 'Failed';
for (let i = 1; i < data.length; i++) { // เริ่มที่ 1 เพื่อข้ามหัวตาราง
if (data[i][0] === username && data[i][1] === password) {
status = 'Success';
break;
}
}
logAndNotifyLoginAttempt(username, status); // บันทึกข้อมูลและแจ้งเตือน
return status === 'Success';
}
function logAndNotifyLoginAttempt(username, status) {
const sheet = SpreadsheetApp.openById('1SVqVAtGJuQ_15c1PR00uWQ3I4rNRrjmL-2GSy2BSdJ0').getSheetByName('LoginLogs');
const now = new Date();
sheet.appendRow([now, username, status]);
// สร้างข้อความแจ้งเตือน
const message = `📢 มีการล็อกอิน :\n👤 Username: ${username}\n🕒 เวลา : ${now.toLocaleString()}\n✅ สถานะ : ${status}`;
sendLineNotification(message); // เรียกฟังก์ชันส่ง LINE
}
function sendLineNotification(message) {
const token = 'PyfOzfFN3dg0c12EBSlBJUFu2FCsw7qZ2fNnVxXEsyr'; // ใส่ LINE Notify Token ของคุณ
const url = 'https://notify-api.line.me/api/notify';
const options = {
method: 'post',
headers: {
'Authorization': 'Bearer ' + token
},
payload: {
message: message
}
};
UrlFetchApp.fetch(url, options);
}
======= LoginPage.html ============
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;700&display=swap" rel="stylesheet">
<title>Login</title>
<style>
/* กำหนดฟ้อนต์หลักสำหรับทั้งหน้า */
body {
font-family: 'Prompt', sans-serif; /* ใช้ฟ้อนต์ Prompt จาก Google Fonts */
background-color: #ffffff; /* พื้นหลังของหน้าเว็บสีเทาอ่อน */
display: flex; /* ใช้ Flexbox เพื่อจัดเรียงตำแหน่งขององค์ประกอบภายใน */
justify-content: center; /* จัดให้องค์ประกอบภายใน (login-container) อยู่กึ่งกลางในแนวนอน */
align-items: center; /* จัดให้องค์ประกอบภายใน (login-container) อยู่กึ่งกลางในแนวตั้ง */
height: 100vh; /* ความสูงของหน้าเว็บเต็มหน้าจอ */
margin: 0; /* ยกเลิกค่าระยะขอบทั้งหมด */
}
/* การตกแต่งกล่องล็อกอิน */
.login-container {
background-color: #ADD88D; /* พื้นหลังสีขาวสำหรับกล่องล็อกอิน ------------------------------------------พื้นสีเขียวอ่อน*/
padding: 30px 25px; /* ช่องว่างภายในกล่องล็อกอิน: ด้านบน/ล่าง 40px, ด้านซ้าย/ขวา 30px */
border-radius: 10px; /* ขอบของกล่องล็อกอินโค้งมน */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* เงาของกล่องล็อกอิน, มีความโปร่งแสงเล็กน้อย */
width: 100%; /* กำหนดความกว้างเต็มที่ภายในคอนเทนเนอร์ */
max-width: 300px; /* กำหนดความกว้างสูงสุดของกล่องล็อกอินเป็น 400px */
text-align: center; /* จัดข้อความภายในกล่องล็อกอินให้กึ่งกลาง */
}
/* การตกแต่งหัวข้อของกล่องล็อกอิน */
.login-container h2 {
margin-bottom: 20px; /* ระยะห่างด้านล่างของหัวข้อ */
color: #333; /* สีของข้อความหัวข้อ */
font-weight: 500; /* ความหนาของฟ้อนต์หัวข้อ (ปานกลาง) */
}
/* การตกแต่งป้ายกำกับสำหรับช่องป้อนข้อมูล */
.login-container label {
display: block; /* แสดงป้ายกำกับแบบ block (แยกบรรทัด) */
text-align: left; /* จัดข้อความให้อยู่ด้านซ้าย */
margin-bottom: 8px; /* ระยะห่างด้านล่างของป้ายกำกับ */
color: #555; /* สีของข้อความป้ายกำกับ */
font-size: 18px; /* ขนาดของฟ้อนต์ป้ายกำกับ */
}
/* การตกแต่งช่องป้อนข้อมูล */
.login-container input[type="text"],
.login-container input[type="password"] {
width: 100%; /* กำหนดความกว้างของช่องป้อนข้อมูลเต็มที่ภายในกล่องล็อกอิน */
padding: 10px; /* ระยะห่างภายในช่องป้อนข้อมูล */
margin-bottom: 20px; /* ระยะห่างด้านล่างของช่องป้อนข้อมูล */
border: 1px solid #ddd; /* กำหนดขอบของช่องป้อนข้อมูลสีเทาอ่อน */
border-radius: 5px; /* ขอบของช่องป้อนข้อมูลโค้งมน */
font-size: 16px; /* ขนาดของฟ้อนต์ในช่องป้อนข้อมูล */
color: #333; /* สีของข้อความในช่องป้อนข้อมูล */
background-color: #f9f9f9; /* พื้นหลังของช่องป้อนข้อมูลสีเทาอ่อน */
box-sizing: border-box; /* รวม Padding และ Border ในการคำนวณขนาดของช่องป้อนข้อมูล */
}
/* การตกแต่งปุ่มล็อกอิน */
.login-container input[type="button"] {
width: 100%; /* กำหนดความกว้างของปุ่มเต็มที่ภายในกล่องล็อกอิน */
padding: 12px; /* ระยะห่างภายในปุ่มล็อกอิน */
background-color: #007bff; /* พื้นหลังสีฟ้าของปุ่มล็อกอิน */
border: none; /* ยกเลิกขอบของปุ่มล็อกอิน */
border-radius: 5px; /* ขอบของปุ่มล็อกอินโค้งมน */
font-size: 16px; /* ขนาดของฟ้อนต์ในปุ่มล็อกอิน */
color: white; /* สีของข้อความในปุ่มล็อกอิน */
cursor: pointer; /* แสดงรูปมือชี้เมื่อเลื่อนเมาส์ไปบนปุ่ม */
transition: background-color 0.3s ease; /* เพิ่มการเปลี่ยนสีพื้นหลังของปุ่มแบบนุ่มนวลในเวลา 0.3 วินาที */
}
/* การตกแต่งปุ่มล็อกอินเมื่อผู้ใช้เลื่อนเมาส์ไปวาง (hover) */
.login-container input[type="button"]:hover {
background-color: #0056b3; /* เปลี่ยนสีพื้นหลังของปุ่มเป็นสีฟ้าเข้มเมื่อ hover */
}
/* การตกแต่งข้อความแสดงข้อผิดพลาด */
.login-container #output {
margin-top: 10px; /* ระยะห่างด้านบนของข้อความแสดงข้อผิดพลาด */
color: #e74c3c; /* สีแดงสำหรับข้อความแสดงข้อผิดพลาด */
font-size: 18px; /* ขนาดของฟ้อนต์ข้อความแสดงข้อผิดพลาด */
}
</style>
</head>
<body>
<div class="login-container">
<h2>เข้าสู่ ห้องสมุด อบจ. </h2>
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username">
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password">
<input type="button" value="Login" onclick="processLogin()">
</form>
<div id="output"></div>
<div class="col-md-4">
User:เลขกอง / Pass:เบอร์ภายใน
</div>
</div>
<script>
function processLogin() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
google.script.run.withSuccessHandler(function(response) {
if (response) {
window.open("https://sites.google.com/view/library-kpppao/", "_blank");
} else {
const output = document.getElementById('output');
output.innerHTML = 'ข้อมูลไม่ถูกต้อง ติดต่อมิสเตอร์เอครับ';
}
}).checkLogin(username, password);
}
</script>
</body>
</html>