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

ระบบครุภัณฑ์พร้อม 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 • ไม่ต้องมีเซิร์ฟเวอร์ส่วนตัว • แก้ไข/ปรับแต่งเองได้ • นำไปพัฒนาต่อยอด ⸻

ระบบติดตามงานนักเรียน

ระบบติดตามงานนักเรียน (Email Alert System) ระบบเล็กๆ แต่ช่วยครูได้เยอะมาก ✨ ระบบนี้เป็น Web Application สำหรับครูผู้สอน ใช้ติดตามการส่งงานของนักเรียนรายบุคคล พร้อมส่งอีเมลแจ้งเตือนได้ทันทีจากหน้าเว็บเดียว ไม่ต้องสลับหลายเครื่องมือ 🔹 การทำงานหลักของระบบ แบ่งออกเป็น 4 ส่วน 📊 1. Dashboard แสดงข้อมูลแบบชัดเจน – ดึงข้อมูลจาก Google Sheet มาแสดงเป็นตาราง – มีชื่อ, อีเมล, รายละเอียดงาน, กำหนดส่ง และสถานะ – ใช้สีช่วยแยกสถานะ 🟠 Pending = รอแจ้งเตือน 🟢 Sent = ส่งแล้ว มองปุ๊บรู้ทันที ใครยังไม่ส่ง ใครเรียบร้อยแล้ว ➕ 2. เพิ่มงานใหม่ได้ง่ายมาก – กดปุ่ม “เพิ่มงานใหม่” – กรอกข้อมูลนักเรียนและรายละเอียดงาน – บันทึกแล้วข้อมูลจะเข้า Google Sheet ทันที – ตารางอัปเดตอัตโนมัติ ไม่ต้องรีโหลดหน้าเว็บ 🚀 3. กดแจ้งเตือน ส่งอีเมลรายบุคคล – มีปุ่ม “แจ้งเตือน” (ไอคอนจรวด 🚀) เฉพาะงานที่ยังไม่ส่ง – ระบบจะสั่งงาน Apps Script ให้ส่งอีเมลหานักเรียนทันที – มี Loading แสดงระหว่างส่ง รู้เลยว่าระบบกำลังทำงาน ⚡ 4. อัปเดตสถานะแบบ Real-time (จุดเด่นสุด) – ส่งอีเมลสำเร็จ → สถานะเปลี่ยนทันที – ปุ่มแจ้งเตือนกลายเป็น “ส่งแล้ว” กดซ้ำไม่ได้ – สถานะในตารางเปลี่ยนจาก Pending → Sent – พร้อมบันทึกสถานะกลับไปที่ Google Sheet แบบอัตโนมัติ 🔎 สรุปสั้นๆ นี่คือระบบแนวคิด “ดูงาน → เพิ่มงาน → กดส่ง → เปลี่ยนสถานะ” จบในหน้าเดียว ใช้งานเร็ว ลดภาระครู และหน้าตาดูทันสมัยด้วย Tailwind CSS 💻✨ เหมาะมากสำหรับ 👩‍🏫 ครูผู้สอน 🏫 โรงเรียน 📚 ห้องเรียนที่อยากจัดการงานให้เป็นระบบ

ระบบแจ้งซ่อมไฟถนน/ถนนชำรุด พร้อมพิกัด Google Maps

ระบบแจ้งซ่อมสาธารณูปโภค (ไฟถนน / ถนนชำรุด) พร้อมพิกัดแผนที่ ใครกำลังมองหา ระบบรับแจ้งปัญหาสาธารณูปโภคออนไลน์ ใช้งานง่าย และไม่ต้องเสียค่าเซิร์ฟเวอร์รายเดือน ระบบนี้สามารถนำไปใช้งานได้จริงทันทีค่ะ 👍 ระบบนี้เป็น Web Application ขนาดเล็ก ที่ทำงานร่วมกับ Google Apps Script และ Google Sheets ทำให้สามารถใช้งานได้ฟรีแบบ Serverless ไม่ต้องเช่าโฮสต์ ไม่ต้องดูแลเซิร์ฟเวอร์เอง ⸻ 🧩 ความสามารถของระบบ ✅ หน้าเว็บสวยงาม ใช้งานง่าย รองรับมือถือ (Responsive) ✅ ใช้ฟอนต์ Sarabun มาตรฐานราชการไทย อ่านง่าย ✅ มี แผนที่ให้ระบุตำแหน่งจุดที่เกิดปัญหา ได้อย่างแม่นยำ ✅ รองรับ การดึงพิกัด GPS อัตโนมัติ จากมือถือผู้แจ้ง ✅ บันทึกข้อมูลลง Google Sheets อัตโนมัติ ✅ สามารถนำข้อมูลไปทำ Dashboard / รายงาน / กราฟสรุปผล ได้ทันที ข้อมูลที่ระบบบันทึก เช่น • วันที่และเวลาแจ้ง • ประเภทปัญหา • รายละเอียดปัญหา • ชื่อผู้แจ้ง • พิกัด Latitude / Longitude • สถานะการดำเนินงาน ⸻ 🏢 ระบบนี้เหมาะกับหน่วยงานไหนบ้าง 🏘 หมู่บ้านจัดสรร / คอนโดมิเนียม ให้ลูกบ้านแจ้งปัญหาพื้นที่ส่วนกลาง เช่น ไฟทางเดินดับ ท่อระบายน้ำตัน หรืออุปกรณ์ชำรุด 🏛 เทศบาล / อบต. / ผู้นำชุมชน ใช้รับแจ้งปัญหาจากประชาชน เช่น ถนนเป็นหลุม ไฟสาธารณะดับ กิ่งไม้หัก 🎓 โรงเรียน / มหาวิทยาลัย ใช้แจ้งซ่อมอาคารสถานที่ ไฟส่องสว่าง ถนนภายในสถานศึกษา 🏭 โรงงาน / นิคมอุตสาหกรรม ใช้แจ้งซ่อมพื้นที่ส่วนกลางหรือแจ้งเหตุภายในโรงงาน 🤝 หน่วยงานจิตอาสา / มูลนิธิ ใช้รับแจ้งเหตุหรือจุดที่ต้องการความช่วยเหลือ พร้อมพิกัดตำแหน่ง ⸻ 💡 จุดเด่นของระบบนี้ • ใช้งานผ่านเว็บได้ทันที • ไม่ต้องติดตั้งโปรแกรม • ใช้บัญชี Google ก็เริ่มใช้งานได้ • สามารถต่อยอดทำ Dashboard หรือระบบแจ้งเตือนเพิ่มเติมได้ ⸻

ระบบแจ้งเตือนงานใกล้กำหนด

แจ้งเตือนงานใกล้กำหนดผ่าน LINE อัตโนมัติ ด้วย Google Apps Script + LINE Messaging API 📊 ใช้แค่ Google Sheet 4 คอลัมน์ | งาน | กำหนดส่ง | สถานะ | LINE_USER_ID | 📌 เช็กงานจาก Google Sheet 📌 ยังไม่ส่ง → เหลือ ≤ 1 วัน 📌 ส่ง LINE แจ้งเตือนถึงนักเรียนทันที เหมาะทั้งการบ้าน งานค้าง และงานระบบโรงเรียน ครูไม่ต้องทวง เด็กไม่ลืมงาน 💚 ⏰ ตั้งเวลาอัตโนมัติ • Trigger → Time-driven • รันวันละครั้ง (เช้า / เย็น) 🎯 เหมาะสำหรับ ✅ แจ้งเตือนการบ้าน ✅ งานค้าง ✅ ระบบติดตามงานนักเรียน ✅ ต่อยอดเป็นบอทโรงเรียน