เว็บไซต์งานโสตทัศนศึกษาโรงเรียนพิจิตรพิทยาคม
เว็บไซต์งานโสตทัศนศึกษาโรงเรียนพิจิตรพิทยาคม
เว็บไซต์งานโสตทัศนศึกษาโรงเรียนพิจิตรพิทยาคม คือ ระบบบริหารจัดการงานโสตทัศนศึกษา ขับเคลื่อนด้วยการประสานงานของ 3 องค์ประกอบหลัก ได้แก่:
ฮาร์ดแวร์ (Hardware): บริหารจัดการ "ทรัพยากรทางกายภาพ"
ซอฟต์แวร์ (Software): ใช้ "ระบบอัตโนมัติและ AI" (Web App, Google Apps Script, Chatbot) เป็นสมองกลในการจัดการงาน ตรวจสอบความทับซ้อน และลดขั้นตอนงาน
พีเพิลแวร์ (Peopleware): ออกแบบโดยมี "มนุษย์เป็นศูนย์กลาง" ช่วยให้ครูและนักเรียน หรือบุคคลที่เกี่ยวข้องกับการทำงานของระบบคอมพิวเตอร์ ทั้งทางตรงและทางอ้อมทำงานง่ายขึ้น
การบูรณาการทั้ง 3 ส่วนนี้ สร้างระบบนิเวศการทำงานที่สมบูรณ์ และเพื่อทำความเข้าใจโครงสร้างกลไกการทำงานเบื้องหลัง ผ่าน Flowchart ทั้ง 3 ส่วน ดังต่อไปนี้
1. System Architecture (ภาพรวมระบบ)
"โครงสร้างพื้นฐานที่เชื่อมต่อทุกส่วนเข้าด้วยกัน"
โครงสร้างของระบบโสตทัศนศึกษา ซึ่งเป็นรูปแบบ Serverless Architecture (ไม่ต้องตั้งเซิร์ฟเวอร์เอง) โดยแบ่งการทำงานออกเป็น 4 ส่วนหลัก:
💻 Frontend (หน้าบ้าน): ส่วนติดต่อผู้ใช้งานที่ออกแบบให้ใช้งานง่าย (UI) รองรับทั้งนักเรียน ครู และแอดมิน
⚙️ Backend (หลังบ้าน): ใช้ Google Apps Script เป็น "สมองส่วนกลาง" คอยรับข้อมูล ประมวลผล และมีระบบ Conflict Detection ตรวจสอบการทับซ้อนของข้อมูลอย่างอัจฉริยะ
📊 Database (ฐานข้อมูล): ใช้ Google Sheets เป็นฐานข้อมูล ซึ่งประหยัดต้นทุนและจัดการข้อมูลได้แบบ Real-time
🌐 External APIs (การเชื่อมต่อภายนอก): ระบบสามารถคุยกับโลกภายนอกได้ผ่าน Telegram API (เพื่อแจ้งเตือน) และ Groq API / LLaMA 3.3 (เพื่อเป็นสมองกลให้แชทบอท)
📌 จุดเด่น: ระบบมีความเสถียรสูง ศูนย์รวมข้อมูลอยู่ที่เดียว และทำงานประสานกันแบบอัตโนมัติ 100%
2. Job Request Workflow (ขั้นตอนการส่งคำของานโสตทัศนศึกษา)
"กระบวนการอนุมัติงานที่ดีและป้องกันข้อผิดพลาดเชิงรุก"
นี้คือ "วงจรชีวิตของคำขอลงงาน (Lifecycle)" ตั้งแต่ผู้ใช้เริ่มกรอกฟอร์ม จนถึงตอนที่งานถูกลงในปฏิทิน โดยเน้นย้ำระบบป้องกันความผิดพลาด (Fail-safe):
ด่านที่ 1 (เตือนผู้ใช้): ทันทีที่ผู้ใช้เลือกสถานที่และเวลา ระบบจะเช็คทันทีว่า "ซ้ำกับคนอื่นไหม?" หากซ้ำจะเตือนสีส้ม แต่ยังอนุญาตให้ส่งคำขอได้เผื่อแอดมินพิจารณา
ด่านที่ 2 (เตือนแอดมิน): เมื่อแอดมินจะกด "อนุมัติ" ระบบจะไปเช็ค ตารางสอน (ScheduleDB) ของบุคลากรคนนั้น หากบุคลากรติดสอนคาบเรียน ระบบจะแจ้งเตือนสีแดงทันที ป้องกันการจัดคนทับซ้อน
ระบบอัตโนมัติ (Automation): เมื่อแอดมินอนุมัติ ระบบจะเปลี่ยนสถานะ ย้ายข้อมูลลงปฏิทิน และส่งข้อความแจ้งเตือนเข้า Telegram อัตโนมัติ โดยไม่ต้องทำมือ
📌 จุดเด่น: ลดความผิดพลาดจากคน (Human Error) ลดขั้นตอนการทำงาน และสื่อสารรวดเร็วแบบ Real-time (ประสานงานผ่าน Telegram)
3. AI Chatbot State Machine
(การทำงานของ BOT-9)
📌 จุดเด่น: ผู้ใช้ไม่ต้องกรอกฟอร์มยาวๆ แต่เปลี่ยนเป็นการสนทนาที่ลื่นไหล พร้อมระบบแก้ไขข้อผิดพลาดก่อนส่งข้อมูลจริง
แชทบอท BOT-9 "ผู้ช่วยAI" ซึ่งไม่ได้ใช้แค่ระบบถาม-ตอบคำถามทั่วไป แต่ใช้โครงสร้างทางวิศวกรรมซอฟต์แวร์ คุยเล่นทั่วไป หรือดึงสถิติจากฐานข้อมูลมาตอบแบบรวดเร็ว
โหมดปกติ (Normal State): บอทจะใช้ AI (LLaMA 3.3) คุยเล่นทั่วไป หรือดึงสถิติจากฐานข้อมูลมาตอบแบบรวดเร็ว
โหมดจองคิวงาน (Booking State): ทันทีที่ผู้ใช้พิมพ์ว่า "ขอจองสถานที่" บอทจะเข้าสู่โหมดนี้ และจะทยอยถามคำถามทีละข้อ (Step 1 ถึง Step 9) อย่างเป็นลำดับขั้นตอน
ระบบทบทวนและแก้ไข (Review & Edit): เมื่อตอบครบ บอทจะสรุปข้อมูลให้ตรวจสอบ หากผู้ใช้พิมพ์ว่า "ขอแก้ไขเวลา" บอทจะกลับไปถามเวลาใหม่ แล้วกลับมาสรุปใหม่อีกครั้ง ก่อนกดยืนยัน
โค้ดสำคัญ 4 ชุด
🧠 1. โค้ดส่วน "สมองกล AI" (AI Integration via Groq API)
จุดเด่น: การใช้ Google Apps Scriptเชื่อมต่อกับ AI ระดับโลก (LLaMA 3.3) ผ่าน API พร้อมการสั่งการแบบ (System Prompt) ให้ AI สวมบทบาทเป็นผู้ช่วยโสตฯ
// ฟังก์ชันเชื่อมต่อ AI
function callGeminiAPI(userMessage) {
var API_KEY = 'บอกไม่ได้';
var url = 'https://api.groq.com/openai/v1/chat/completions';
// กำหนดบทบาทและข้อจำกัดให้ AI (System Prompt)
var systemPrompt = "คุณคือ 'BOT-9' ผู้ช่วย AI ประจำงานโสตฯ ร.ร.พิจิตรพิทยาคม ... " +
"กฎ: ห้ามสมมติข้อมูลเอง ถ้าจะจองคิวให้แนะนำผู้ใช้กดเมนูติดต่องาน";
var payload = {
"model": "llama-3.3-70b-versatile", ใช้สมองกล LLaMA 3.3
"messages": [
{ "role": "system", "content": systemPrompt },
{ "role": "user", "content": userMessage }
]
};
การยิง Request ไปหา AI และส่งคำตอบกลับไปหน้าเว็บ
var response = UrlFetchApp.fetch(url, options);
return JSON.parse(response.getContentText()).choices[0].message.content;
}
🛡️ 2. โค้ดส่วน "อัลกอริทึมป้องกันการทับซ้อน" (Smart Conflict Detection)
จุดเด่น: ใช้วิธีคิดทางคณิตศาสตร์ ในการตรวจสอบว่า เวลางานที่กำลังจะบันทึก "ชน" กับตารางสอนของครู หรือ "ชน" กับสถานที่ที่มีคนจองไว้แล้วหรือไม่
//ฟังก์ชันตรวจสอบเวลาทับซ้อน
function checkScheduleConflict() {
const eventStartMins = timeToMins(startTimeStr);
const eventEndMins = timeToMins(endTimeStr);
let conflictFound = false;
วนลูปเช็คกับเวลาตารางสอนของครู
PERIOD_TIMES.forEach(period => {
อัลกอริทึม ถ้า (เริ่มงาน < จบคาบสอน) และ (จบงาน > เริ่มคาบสอน) = ชนกัน!
if (eventStartMins < period.end && eventEndMins > period.start) {
conflictFound = true; // แจ้งเตือนแอดมินทันที
}
});
}
🤖 3. โค้ดส่วน "State Machine ของแชทบอท" (Conversational UI Logic)
จุดเด่น: การเขียนโปรแกรมแบบจัดการสถานะ (State Management) เพื่อให้บอทจำได้ว่ากำลังคุยถึงขั้นตอนไหน (ถามวันที่ -> สถานที่ -> เวลา)
codeJavaScript
// ฟังก์ชันจัดการสถานะการจองคิวผ่านแชท
function processUserMessage(text) {
if (chatbotState === 'BOOK_REQ_LOC') {
bookingData.location = text; // บันทึกสถานที่
chatbotState = 'BOOK_TIME';
addMessage(`บันทึกสถานที่: ${text} | ต้องการใช้เวลาไหนถึงเวลาไหนครับ?`);
return;
}
if (chatbotState === 'BOOK_TIME') {
const timeMatch = text.match(/(\d{1,2})[:\.](\d{2})\s*(?:-|ถึง)?\s*(\d{1,2})?[:\.]?(\d{2})?/);
if (timeMatch) {
bookingData.time = timeMatch[0];
chatbotState = 'BOOK_ACT_NAME';
addMessage(`บันทึกเวลา: ${bookingData.time} | ขอทราบชื่อกิจกรรมครับ`);
} else {
addMessage("รูปแบบเวลาไม่ถูกต้องครับ รบกวนพิมพ์เช่น 09:00 - 12:00");
}
}
}
⚡ 4. โค้ดส่วน "ระบบอัตโนมัติแจ้งเตือน" (Automation & Webhooks)
จุดเด่น: การทำงานร่วมกับระบบภายนอกแบบ Real-time และการทำ Auto-Trigger
// ฟังก์ชันส่งแจ้งเตือน Telegram ทันทีที่มีการกรอกฟอร์ม
function saveJobRequest(data) {
sheet.appendRow([data.timestamp, data.jobType, data.activityName, ...]);
var msg = "⬛ <b>มีคำขอติดต่องาน ใหม่!</b>\n" +
"🤵 ผู้ขอ: " + data.applicantName + "\n" +
"📅 วันที่: " + data.jobDate + "\n" +
"📍 สถานที่: " + data.jobLocation;
// การยิง HTTP POST Request ไปที่ Telegram API
var url = "https://api.telegram.org/bot" + บอกไม่ได้ + "/sendMessage";
UrlFetchApp.fetch(url, {
"method": "post",
"contentType": "application/json",
"payload": JSON.stringify({ "chat_id": TELEGRAM_CHAT_ID_JOB, "text": msg })
});
}
ความสำคัญของ เว็บไซต์งานโสตทัศนศึกษาโรงเรียนพิจิตรพิทยาคม
1. 🛑 Before vs After (Pain Points & Solutions)
ระบบนี้สร้างขึ้นมาเพื่ออะไร?
ก่อนมีระบบ (Pain Points):
สรุปผลงานยาก ต้องมานั่งนับมือ
จัดคิวงานซ้อนทับกัน หรือจัดงานให้บุคลากรในเวลาที่ "ติดสอน"
เจ้าหน้าที่ใช้ google sheets เป็นศูนย์กลางในการลงข้อมูลดิบตาราง และยังคงต้องประสานงานต่อทีมโสตฯ ตามช่องทางต่างๆ
หลังมีระบบ (Solutions):
สามารถปรึกษาแชทบอทได้ 24 ชม. (Paperless)
สามารถจองผ่านสมาร์ทโฟน ระบบจะแจ้งประสานงานอัตโนมัติ
ระบบประมวลผลสถิติและออกรายงาน (PDF/PNG) อัตโนมัติในคลิกเดียว
ระบบเช็คการทับซ้อนของสถานที่และตารางสอนอัตโนมัติ (Smart Conflict Detection)
2. 💰 Zero-Cost Architecture (ความคุ้มค่าและเทคโนโลยีที่ใช้)
การมีวิสัยทัศน์ของผู้พัฒนา ว่าสามารถสร้างระบบระดับ Enterprise ได้โดย "ไม่มีค่าใช้จ่ายเซิร์ฟเวอร์"
AI Engine: ใช้ Groq API (LLaMA 3.3) โมเดลอัจฉริยะที่ประมวลผลเร็วที่สุดในโลก
Notification: ใช้ Telegram API ซึ่งฟรี เสถียร และรองรับการส่งข้อความจำนวนมาก
Database & Backend: ใช้ Google Apps Script และ Google Sheets ซึ่งมีความเสถียรระดับโลก ฟรี และไม่ต้องบำรุงรักษาเซิร์ฟเวอร์เอง
3. 🔒 Security & Data Privacy (ความปลอดภัยและความลับของข้อมูล)
ระบบ Login: ฟังก์ชันสำคัญ (เช่น การอนุมัติงาน, จัดการบุคลากร) จะถูกซ่อนไว้ เปิดให้เฉพาะ Admin ที่ล็อกอินถูกต้องเท่านั้น
ระบบรายงานพฤติกรรม (Confidential Report): มีฟีเจอร์รายงานปัญหาแบบลับสุดยอด ซึ่งข้อมูลจะยิงตรงเข้ากลุ่มแอดมินโดยเฉพาะ เพื่อปกป้องผู้แจ้งและจัดการปัญหาอย่างรวดเร็ว
4. 📊 Data Analytics & Reporting (ระบบสารสนเทศเพื่อบริหาร)
การเปลี่ยน "ข้อมูลดิบ" ให้เป็น "สถิติที่ดูง่าย":
Dashboard ที่สรุปว่า ใครรับงานเยอะที่สุด? สถานที่ไหนใช้บ่อยที่สุด? วันไหนงานชุมที่สุด?
การกดส่งออกตารางงานเป็น PDF (ผ่าน html2pdf) และ PNG (ผ่าน html2canvas) พร้อมนำไปปริ้นหรือส่งไลน์ต่อได้ทันที
(แผนการพัฒนาต่อยอดในอนาคต)
การพัฒนาระบบ ยืม-คืนอุปกรณ์ แบบออนไลน์ (ซึ่งในโค้ดมีการทำหน้า UI รอไว้แล้ว)
11 Apr. 2026 - 07.09 AM