คลังโค้ดครู DevTech

ระบบ Dashboard ด้วย Chart.js

เปลี่ยนข้อมูลแห้ง ๆ ให้ “สวย” และ “ขยับได้”! สร้าง Dashboard ด้วย Chart.js + ดึงข้อมูลจาก Google Sheet แบบ Real-time ใครยังเอาข้อมูลดิบ ๆ ใส่ Excel แล้วจบ… บอกเลยว่าคุณกำลังพลาดโอกาสโชว์งานแบบมืออาชีพมาก ๆ 😍 ตอนนี้เราสามารถสร้าง Dashboard สวย ๆ ที่อัปเดตเองอัตโนมัติ เพียงใช้ Chart.js ผสมกับ Google Sheet ก็ได้กราฟลื่น ๆ แบบ Real-time ไม่ต้องเปิดโปรแกรมหนัก ๆ อีกต่อไป! ✨ ความปังของวิธีนี้ • ✔️ ดึงข้อมูลจาก Google Sheet ได้ทันที ไม่ต้องทำ API ซับซ้อน • ✔️ อัปเดตข้อมูลปุ๊บ กราฟเปลี่ยนปั๊บ! • ✔️ ใช้ Chart.js สร้างกราฟสวย ๆ ได้หลายแบบ • ✔️ ดูข้อมูลบนมือถือ/คอมได้หมด • ✔️ เอาไปฝังบนเว็บไซต์หรือระบบงานโรงเรียนก็ได้ 📌 เหมาะกับ • ครูที่ต้องสรุปข้อมูลนักเรียน • ผู้ดูแลระบบที่ต้องรายงานผลแบบอัปเดตสด • นักเรียนที่อยากทำโครงงานให้ดู “โปร” • คนทำงานที่อยากทำ Dashboard แบบง่ายแต่ดูดีมาก ยุคนี้ข้อมูลไม่ควรหยุดนิ่ง! ถึงเวลาแปลงข้อมูลธรรมดาให้ “เล่าเรื่องได้” และ “ดูแพงขึ้นทันที” ด้วย Dashboard ของคุณเอง 🚀

ระบบรายงานพยาบาลตรวจการ

#ระบบบันทึกและสรุปข้อมูลพยาบาลตรวจการ (Nursing Supervisor Report System) จากปัญหางานกระดาษกองโต รายงานล่าช้า และการสรุปข้อมูลที่ต้องนั่งรวมตัวเลขเองทุกวัน… ครูนุ่มเลยจัดให้ 💙 ระบบ Web Application ขนาดเล็ก แต่พลังใหญ่! ระบบนี้พัฒนาด้วย 👉 Google Apps Script 👉 ใช้ Google Sheets เป็นฐานข้อมูล ฟรี 100% ไม่ต้องเช่าโฮสติ้ง ไม่ต้องติดตั้งเซิร์ฟเวอร์ ✨ ──────────────────── 🔹 ระบบนี้ทำอะไรได้บ้าง? ✅ 1. หน้าบันทึกข้อมูล (Responsive ใช้ในมือถือได้สบาย) พยาบาลตรวจการกรอกข้อมูลได้ทันที เช่น • วันที่ / เวร • ชื่อพยาบาล • หอผู้ป่วย • สถานะอัตรากำลัง • ยอดผู้ป่วยรวม / ผู้ป่วยหนัก • ปัญหา / ข้อเสนอแนะ พร้อมระบบป้องกันกดซ้ำ + แจ้งเตือนเมื่อบันทึกสำเร็จ ──────────────────── ✅ 2. หน้าสรุปเวรประจำวัน (Dashboard) ผู้บริหารเลือก “วันที่” แล้วดูภาพรวมได้ทันที มีการ์ดสรุป 4 ค่าอัตโนมัติ 📌 จำนวนแผนกที่ตรวจ 📌 ยอดผู้ป่วยรวม 📌 ผู้ป่วยหนัก 📌 แผนกที่ขาดแคลนอัตรากำลัง พร้อมรายละเอียดรายแผนกแบบแยกกล่อง อ่านง่าย เห็นปัญหาชัด ──────────────────── ✅ 3. ระบบหลังบ้าน (API อัจฉริยะ) • Routing เปิดหน้าอัตโนมัติตาม URL • บันทึกข้อมูลลงชีตแบบ Append พร้อม Timestamp • ดึงข้อมูลเฉพาะวันมาแสดงผลทันที ──────────────────── ✅ 4. ฐานข้อมูลพร้อมต่อยอด ข้อมูลทั้งหมดเก็บใน Google Sheets สามารถนำไปทำรายงานภาพรวมรายเดือน/รายปีต่อใน Looker Studio ได้ทันที ──────────────────── 💙 จุดเด่นของระบบนี้ ✔ ฟรี 100% บน Server ของ Google ✔ ลดกระดาษ ลดงานซ้ำซ้อน ✔ ดีไซน์ทันสมัย โทนฟ้าการแพทย์ (Tailwind CSS) ✔ โหลดเร็ว ปลอดภัย ใช้งานง่าย ใครอยู่สายสาธารณสุข โรงพยาบาล คลินิก หรือหน่วยงานรัฐ เอาไปใช้ต่อยอดได้เลยค่ะ 🙌

ระบบขออนุมัติงบประมาณออนไลน์

“ระบบขออนุมัติงบประมาณ” ❌ ไม่อนุญาตให้นำไปจำหน่ายทุกกรณี ใครกำลังมองหาระบบขออนุมัติงบแบบใช้งานง่าย ไม่ต้องมีเซิร์ฟเวอร์ ต้องลองตัวนี้เลย 💡 🔎 ภาพรวมการทำงานของระบบ 💻 1. ส่วนหน้าบ้าน (Frontend) • เป็นเว็บฟอร์ม รองรับทั้งมือถือและคอม (Responsive) • ดีไซน์ด้วย Tailwind CSS เรียบ สะอาด ใช้งานง่าย • กรอกข้อมูลสำคัญครบ: ▪️ ชื่อ-นามสกุล ▪️ แผนก/ฝ่าย ▪️ รายการที่ขอ ▪️ จำนวนเงิน ▪️ เหตุผลความจำเป็น • มี Loading + Pop-up แจ้งเตือนสวยๆ ด้วย SweetAlert2 • ป้องกันการกดส่งซ้ำ UX ดีมาก 👍 🔗 2. การเชื่อมต่อ (Bridge) • ใช้ google.script.run เชื่อมตรงเข้า Google Apps Script • ไม่ต้องเปิด API URL ให้เสี่ยง • ปลอดภัยกว่า และทำงานได้ลื่นไหล ⚙️ 3. ส่วนหลังบ้าน (Backend + Database) • ใช้ Google Apps Script (Code.gs) ประมวลผล • บันทึกข้อมูลลง Google Sheet อัตโนมัติ • มี Timestamp + ตั้งสถานะเริ่มต้น “รออนุมัติ” • ส่งผลกลับหน้าเว็บแบบ Real-time พร้อมแจ้ง “สำเร็จ!” ✅ ✨ สรุป นี่คือระบบ Serverless เต็มรูปแบบ ไม่ต้องเช่า Hosting ไม่ต้องดูแลเซิร์ฟเวอร์ ใช้แค่ Google ก็จบ ครบ จบในตัวเดียว! 🎯 เหมาะกับ: • โรงเรียน • หน่วยงานราชการ • องค์กรที่ต้องการระบบอนุมัติงบง่ายๆ • คนที่อยากเริ่มใช้ Web App แบบไม่ยุ่งยาก 📌 โหลดไปใช้ ปรับต่อได้เต็มที่ แต่ “ห้ามนำไปขาย” นะคะ ❤️

ระบบครุภัณฑ์พร้อม QR Code

ระบบบริหารจัดการครุภัณฑ์ ด้วย Google Apps Script สำเนาใต้คอมเมนต์ 👇 (ไม่อนุญาตให้นำไปจำหน่าย) ใครกำลังมองหาระบบจัดการครุภัณฑ์แบบออนไลน์ ใช้งานง่าย ไม่ต้องเช่า Server ไม่ต้องซื้อโปรแกรมแพงๆ โพสต์นี้ห้ามพลาดค่ะ! ครูนุ่มขอแจกฟรี “ระบบบริหารจัดการครุภัณฑ์” เล็กๆ พัฒนาด้วย HTML + CSS (Bootstrap 5) + JavaScript เชื่อมต่อฐานข้อมูลกับ Google Sheets ผ่าน Google Apps Script 💻 รูปแบบระบบเป็น Web Application แบบหน้าเดียว (Single Page Application – SPA) ใช้งานลื่น ไม่ต้องรีเฟรชหน้า รองรับทั้งคอมพิวเตอร์และมือถือ ⸻ 🔹 โครงสร้างการทำงานของระบบ 1️⃣ หน้าเพิ่มครุภัณฑ์ (ลงทะเบียนอุปกรณ์) • กรอกข้อมูลสำคัญ เช่น ▪ รหัสครุภัณฑ์ ▪ ชื่อรายการ ▪ หมวดหมู่ ▪ วันที่ ▪ สถานที่ ▪ ผู้รับผิดชอบ ▪ สถานะ • เมื่อกด “บันทึก” ระบบจะส่งข้อมูลไปยัง Google Apps Script แล้วเขียนลง Google Sheets อัตโนมัติ • ✅ สร้าง QR Code ให้อัตโนมัติทันทีหลังบันทึกสำเร็จ QR จะเก็บ URL พร้อมพารามิเตอร์ เช่น ?view=COM-001 สามารถกด “พิมพ์ QR Code” เพื่อนำไปติดที่อุปกรณ์ได้เลย ⸻ 2️⃣ หน้ารายการครุภัณฑ์ • แสดงข้อมูลทั้งหมดจาก Google Sheets ในรูปแบบตารางอ่านง่าย • มี Badge สีบอกสถานะชัดเจน 🟢 ใช้งานปกติ 🟡 ส่งซ่อม 🔴 ชำรุด • มีปุ่ม “ดู QR Code ย้อนหลัง” ในแต่ละรายการ • มีปุ่มรีเฟรช โหลดข้อมูลล่าสุดได้ทันที ⸻ 3️⃣ หน้าสแกน QR (จำลองการสแกน) • เตรียมไว้สำหรับพัฒนาต่อยอดเปิดกล้องมือถือสแกนจริง • ปัจจุบันเป็นโหมด Simulate Scan สามารถกรอกรหัสเพื่อจำลองการสแกนได้ • รองรับการนำไปเชื่อมต่อกับไลบรารี เช่น html5-qrcode ในอนาคต ⸻ 🌟 จุดเด่นของระบบ ✔ รองรับมือถือ 100% ด้วย Bootstrap 5 ✔ ใช้ Google Sheets เป็นฐานข้อมูล (จัดการง่ายเหมือน Excel) ✔ ไม่ต้องมี Server ✔ ไม่เสียค่าโฮสติ้ง ✔ เหมาะกับโรงเรียน หน่วยงานราชการ อบต. เทศบาล และองค์กรขนาดเล็ก ⸻

ระบบจัดการข้อมูลขยะ/ธนาคารขยะ

ระบบ “ธนาคารขยะ” ♻️💚 สายโรงเรียน / ชุมชน / องค์กร ห้ามพลาดเลยค่ะ! 📌 ทำสำเนาได้ที่คอมเมนต์ด้านล่าง ❗ ไม่อนุญาตให้นำไปจำหน่ายนะคะ วันนี้ขอสรุปภาพรวมการทำงานของระบบให้เข้าใจง่ายๆ กันค่ะ 👇 💻 ระบบนี้ถูกพัฒนาเป็น “เว็บแอปหน้าเดียว (SPA)” ทำงานร่วมกับ Google Apps Script (ฝั่งเซิร์ฟเวอร์) และ Google Sheets (ฐานข้อมูล) ใช้งานง่าย ไม่ต้องมีโฮส! --- 🔹 1. ส่วนแสดงผล (Frontend & UI) ✨ ออกแบบด้วย Tailwind CSS รองรับทั้งมือถือและคอม ใช้งานลื่นไหล 🔔 ใช้ SweetAlert2 แสดง Pop-up แจ้งเตือน สวยงาม เข้าใจง่าย 🔄 เปลี่ยนหน้าแบบไม่ต้องรีโหลด (Dashboard / สมาชิก / ฝากขยะ) --- 🔹 2. ฟังก์ชันหลักของระบบ 📊 Dashboard - สรุปจำนวนสมาชิก - รวมยอดเงินสะสมทั้งหมดในระบบ 👥 จัดการสมาชิก - สมัครสมาชิกใหม่ (ชื่อ + เบอร์โทร) - แสดงข้อมูลสมาชิกทั้งหมด พร้อมยอดเงิน ♻️ รับฝากขยะ - เลือกสมาชิก + ประเภทขยะ (มีราคากำหนด) - ใส่น้ำหนัก → ระบบคำนวณเงินให้อัตโนมัติ 💰 - บันทึกข้อมูล + อัปเดตยอดเงินแบบทันที --- 🔹 3. การเชื่อมต่อข้อมูล 🔗 ใช้ Google Apps Script เชื่อมกับ Google Sheets แบบเรียลไทม์ 🧪 มีโหมดทดสอบ (Mock Mode) - เปิดไฟล์ผ่าน Browser ก็ลองใช้งานได้ทันที - เหมาะสำหรับฝึก/ทดลองก่อนใช้งานจริง --- 💡 เหมาะสำหรับ: 🏫 โรงเรียน (โครงการธนาคารขยะ) 🏘️ ชุมชน 🏢 องค์กรที่อยากเริ่มระบบจัดการขยะอย่างเป็นระบบ 📥 โหลดไปใช้งาน / ต่อยอดได้เลยค่ะ 💬 ถ้ามีเวลาจะทำเวอร์ชันอัปเกรดมาแจกอีกนะคะ

ระบบจัดคิวอัตโนมัติ

ระบบจัดคิวอัตโนมัติ (Queue Management System) ❌ ไม่อนุญาตให้นำไปทำขายหรือดัดแปลงเพื่อจำหน่ายทุกกรณี ⸻ 🎯 ระบบนี้คืออะไร? เป็น Web Application แบบหน้าเดียว (Single Page Application) พัฒนาโดยใช้ HTML + Tailwind CSS + JavaScript ทำงานร่วมกับ Google Apps Script + Google Sheets เป็นฐานข้อมูลหลังบ้าน ไม่ต้องเช่าโฮสติ้ง ❗ ไม่ต้องติดตั้งโปรแกรม ❗ เปิดผ่านเบราว์เซอร์ได้ทันที ❗ ⸻ 🔹 โครงสร้างระบบ แบ่งเป็น 3 หน้าจอหลัก 1️⃣ จุดรับคิว (Kiosk – สำหรับลูกค้า) 📍 ใช้ตั้งไว้หน้าจุดบริการ วิธีใช้งาน: • ลูกค้ากดปุ่ม “รับคิว” สีเขียว • ระบบสร้างคิวใหม่ (เช่น A001) • แสดงหมายเลขคิว 5 วินาที • บันทึกลงฐานข้อมูลอัตโนมัติ ⸻ 2️⃣ จุดเรียกคิว (Staff – สำหรับพนักงาน) 📍 ใช้ที่เคาน์เตอร์บริการ วิธีใช้งาน: • หน้าจอแสดง “คิวที่เรียกล่าสุด” • กดปุ่ม “เรียกคิวถัดไป” • ระบบเรียกตามลำดับ FIFO (มาก่อนได้ก่อน) • หากไม่มีคิวรอ ระบบแจ้งเตือนทันที ⸻ 3️⃣ จอแสดงผลคิว (Display – สำหรับจอทีวีส่วนกลาง) 📍 ใช้แสดงผลให้ลูกค้านั่งรอดู ⚠️ สำคัญมาก: เมื่อเปิดครั้งแรก ต้องกดปุ่ม “เริ่มจอแสดงผล (เปิดระบบเสียง)” เพื่ออนุญาตให้เบราว์เซอร์เล่นเสียงได้ การทำงาน: • รีเฟรชข้อมูลทุก 3 วินาทีอัตโนมัติ • คิวปัจจุบันแสดงตัวใหญ่ กระพริบสีเหลือง • มีเสียงประกาศภาษาไทย เช่น “ขอเชิญหมายเลขคิว เอ ศูนย์ ศูนย์ หนึ่ง ที่ช่องบริการค่ะ” • แสดงจำนวนคิวที่รอทั้งหมดแบบเรียลไทม์ ⸻ 🏢 เหมาะกับหน่วยงานไหนบ้าง? ✔ โรงพยาบาล / คลินิก ✔ โรงเรียน / งานทะเบียน / ห้องวิชาการ ✔ อบต. / เทศบาล / หน่วยงานราชการ ✔ ธนาคาร / สหกรณ์ ✔ ศูนย์บริการลูกค้า ✔ จุดรับบัตรคิวงานกิจกรรม ✔ งาน Open House / รับสมัครนักเรียน ✔ หน่วยงานสาธารณสุข ⸻ 🔧 วิธีติดตั้งใช้งานจริง ใช้เพียง URL เดียว เปิดพร้อมกัน 3 อุปกรณ์: 📱 แท็บเล็ต → เปิดหน้า “จุดรับคิว” 💻 คอมพนักงาน → เปิดหน้า “จุดเรียกคิว” 📺 ทีวีต่อเน็ต → เปิดหน้า “จอแสดงผลคิว” จบครบในลิงก์เดียว ✨ ⸻ 💡 จุดเด่น • ฟรี 100% • ใช้ Google Account ก็พอ • ทำงานแบบ Real-Time • ไม่ต้องมีเซิร์ฟเวอร์ส่วนตัว • แก้ไข/ปรับแต่งเองได้ • นำไปพัฒนาต่อยอด ⸻