รายละเอียดระบบ

🎉 แจกฟรี! Template ระบบแจ้งเตือน Admin ผ่าน LINE Official Account (LINE OA)

สวัสดีค่ะ 😊

วันนี้ครูนุ่มมี Template ระบบแจ้งเตือน Admin ผ่าน LINE Official Account มาแจกฟรี สำหรับทุกท่านที่กำลังพัฒนา Web App ด้วย Google Apps Script ค่ะ

เทมเพลตนี้ออกแบบให้เป็น Template กลาง สามารถนำไปต่อยอดกับระบบต่าง ๆ ได้ทันที ไม่ว่าจะเป็น

✅ ระบบแจ้งซ่อม
✅ ระบบขอใช้รถราชการ
✅ ระบบจองห้องประชุม
✅ ระบบลงทะเบียน
✅ ระบบลางาน
✅ ระบบครุภัณฑ์
✅ หรือ Web App อื่น ๆ ที่ต้องการแจ้งเตือนผ่าน LINE OA

✨ จุดเด่นของระบบ

🔹 Admin เชื่อมต่อ LINE OA ได้ด้วยตัวเองผ่านหน้าเว็บไซต์
🔹 ไม่ต้องรู้หรือกรอก LINE User ID เอง
🔹 รองรับผู้ดูแลหลายคนในระบบเดียว
🔹 ส่งแจ้งเตือนเฉพาะผู้ที่เชื่อมต่อสำเร็จ (Active)
🔹 แยกโครงสร้างโค้ดเป็นสัดส่วน ใช้งานและต่อยอดง่าย
🔹 เขียนด้วย JavaScript ES6 พร้อม JSDoc และจัดโครงสร้างแบบมืออาชีพ

📦 ภายใน Template ประกอบด้วย

✅ ระบบสร้างรหัสเชื่อมต่อ LINE อัตโนมัติ
✅ LINE Webhook สำหรับยืนยันการเชื่อมต่อ
✅ ระบบ Push Message แจ้งเตือน
✅ ส่งแจ้งเตือนทุก Admin หรือเลือกส่งเฉพาะรายบุคคล
✅ ระบบยกเลิกการเชื่อมต่อ
✅ ระบบตรวจสอบสถานะการเชื่อมต่อ
✅ Utilities สำหรับ Reply / Push / Broadcast
✅ แยกไฟล์ Config, Utils, Service และ Webhook อย่างเป็นระเบียบ

ตัวอย่างการแจ้งเตือน

📢 มีคำขอใช้รถราชการใหม่
📢 มีรายการแจ้งซ่อมใหม่
📢 มีผู้ลงทะเบียนใหม่
📢 มีการอนุมัติคำขอ
📢 แจ้งเตือนเฉพาะผู้ดูแลที่เกี่ยวข้อง

ทั้งหมดสามารถเรียกใช้งานได้เพียงไม่กี่บรรทัดของโค้ด

💝 แจกฟรีเพื่อการศึกษาและพัฒนาระบบเท่านั้น

❌ ไม่อนุญาตให้นำไปจำหน่าย
❌ ไม่อนุญาตให้นำไปขายต่อหรือดัดแปลงเพื่อจำหน่าย
✅ สามารถนำไปศึกษา ปรับปรุง และประยุกต์ใช้กับหน่วยงานหรือโรงเรียนของตนเองได้

🚀 ขั้นตอนการติดตั้งและนำไปใช้งาน (Workflow)
1. เตรียมฐานข้อมูล Google Sheets
สร้าง Google Sheets ใหม่ 1 ไฟล์ และตั้งชื่อ Sheet ว่า line_users จากนั้นพิมพ์หัวคอลัมน์ในแถวที่ 1 ให้ตรงตามนี้เป๊ะๆ (ห้ามเว้นวรรค):
id, admin_id, name, line_user_id, verify_code, status, created_at, connected_at, last_notify

2. ตั้งค่า LINE Official Account

ไปที่ LINE Developers สร้าง Provider และ Messaging API Channel

ในแท็บ Messaging API ให้คัดลอก Channel access token (long-lived) เก็บไว้

ในเมนู LINE Official Account features ปิดการใช้งาน Auto-reply messages และ Greeting messages (เพื่อให้ Webhook ทำงานแทน)

3. นำโค้ดไปใส่ใน Google Apps Script

ไปที่ Google Sheets ของคุณ เลือกเมนู ส่วนขยาย (Extensions) > Apps Script

คัดลอกโค้ดทั้งหมดที่ผมสร้างให้ไปวางทับใน Code.gs (หรือจะสร้างไฟล์แยกตาม Comment ในโค้ดก็ได้ครับ)

แก้ไขค่า 2 จุดในส่วนบนสุด (Config):

ACCESS_TOKEN: วาง Token จากข้อ 2

SHEET.ID: วาง ID ของ Google Sheets (ดูได้จาก URL ของ Sheet)

4. Deploy เป็น Web App

กดปุ่ม Deploy (การทำให้ใช้งานได้) ด้านขวาบน > New deployment

เลือกประเภทเป็น Web App

Execute as: Me (อีเมลของคุณ)

Who has access: Anyone (ทุกคน)

กด Deploy และให้สิทธิ์อนุญาตบัญชี (Authorize)

คัดลอก Web App URL ที่ได้เก็บไว้

5. เชื่อมต่อ Webhook เข้ากับ LINE

กลับไปที่ LINE Developers (แท็บ Messaging API)

เลื่อนลงมาที่หมวด Webhook URL

นำ Web App URL จากข้อ 4 มาวางและเปิด Use webhook

กด Verify เพื่อทดสอบ (ถ้าขึ้น Success คือผ่าน)

💻 การเชื่อมต่อกับเว็บแอปพลิเคชัน (Frontend)
ระบบนี้รองรับการทำงานแบบ API ทำให้เว็บแอป (HTML/JS) สามารถสื่อสารผ่าน HTTP GET Request ได้ง่ายๆ:

สร้างรหัส: เมื่อแอดมินกด "เชื่อมต่อ LINE" ให้ยิง Fetch ไปยัง Web App URL
GET {WebApp_URL}?action=generateCode&admin_id=xxx&name=xxx
(ระบบจะคืนค่ารหัสสุ่ม 6 ตัว เช่น K4P8M2 ให้นำไปแสดงบนหน้าเว็บให้ Admin ทราบ)

ยกเลิกการเชื่อมต่อ:
GET {WebApp_URL}?action=disconnect&admin_id=xxx

🔔 การนำไปใช้กับระบบอื่นๆ ภายใน Apps Script
หากคุณเขียนระบบอื่น (เช่น ระบบแจ้งซ่อม) ใน Apps Script โปรเจ็กต์นี้ คุณสามารถเรียกใช้ 2 คำสั่งนี้ได้ทุกที่เลยครับ:

NotificationSystem.sendNotify("📢 มีการแจ้งซ่อมใหม่..."); (ส่งหาแอดมินทุกคน)

NotificationSystem.sendNotifyToAdmin("admin001", "แจ้งเตือนเฉพาะคุณ"); (ส่งรายบุคคล)

หากโพสต์นี้เป็นประโยชน์ ฝากกด 👍 กดแชร์ และติดตามเพจ ครูนุ่ม เดฟเทค เพื่อไม่พลาดเทคนิคการพัฒนา Web App, Google Apps Script, PHP, AI และเครื่องมือใหม่ ๆ ที่จะช่วยให้การพัฒนาระบบง่ายขึ้นด้วยนะคะ ❤️