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

กระดานข้อความสด (Live Sticky Notes Board)

“Live Sticky Notes Board” 💬 กระดานข้อความสดแบบ Real-time ที่สร้างด้วย Canva AI + Google Sheet + Apps Script 📌 ระบบนี้ใช้ได้ทั้งในคอม มือถือ และแท็บเล็ต เมื่อใครพิมพ์ข้อความ ข้อความจะปรากฏบนกระดานสดทันที พร้อมเก็บข้อมูลไว้ใน Google Sheet อัตโนมัติ ✅ ⸻ 🔧 วิธีการทำสำเนา “Live Sticky Notes Board” 1️⃣ แก้ไข Sheet_ID • เปิดไฟล์ รหัส .gs → แก้ไขค่า SheetId บรรทัดที่ 459 • เปิดไฟล์ index.html → แก้ไขค่า SHEET_ID บรรทัดที่ 172 2️⃣ แก้ไข SCRIPT_URL • ในไฟล์ index.html แก้ URL ของสคริปต์ให้ตรงกับโปรเจกต์ของคุณเอง 💾 เมื่อแก้ไขครบแล้ว กด Deploy → Web App แล้วแชร์ลิงก์ให้ทุกคนเข้ามาพิมพ์ข้อความบนบอร์ดได้เลย 🎨✨

ระบบ 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 ก็ลองใช้งานได้ทันที - เหมาะสำหรับฝึก/ทดลองก่อนใช้งานจริง --- 💡 เหมาะสำหรับ: 🏫 โรงเรียน (โครงการธนาคารขยะ) 🏘️ ชุมชน 🏢 องค์กรที่อยากเริ่มระบบจัดการขยะอย่างเป็นระบบ 📥 โหลดไปใช้งาน / ต่อยอดได้เลยค่ะ 💬 ถ้ามีเวลาจะทำเวอร์ชันอัปเกรดมาแจกอีกนะคะ