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

ระบบติดตามงานซ่อมบำรุง

ระบบแจ้งซ่อมบำรุง 🔧 เปลี่ยนงานซ่อม “กระดาษยุ่งๆ” ให้เป็นระบบดิจิทัลครบวงจร นี่คือภาพรวมของ ระบบติดตามงานซ่อมบำรุง ที่ใช้งานได้จริงในโรงเรียน/หน่วยงาน พร้อม Workflow ตั้งแต่แจ้ง → บันทึก → ติดตาม ระบบถูกออกแบบให้ทำงานร่วมกัน 3 ส่วนหลัก 🖥️ 1) ส่วนหน้าบ้าน (Frontend) – หน้าฟอร์มแจ้งซ่อม • ดีไซน์ทันสมัย รองรับมือถือ ใช้งานง่าย • ใช้ Floating Labels ทำให้กรอกข้อมูลสะดวก • มี Popup แจ้งเตือนสวยงามเมื่อบันทึกสำเร็จ/ผิดพลาด • กด “ส่งแจ้งซ่อม” แล้วระบบจะตรวจสอบข้อมูล + ป้องกันการกดซ้ำอัตโนมัติ • ส่งข้อมูลเข้าไปยังระบบหลังบ้านทันที ⚙️ 2) ส่วนหลังบ้าน (Backend) • รับข้อมูลจากฟอร์ม • สร้างรหัสใบงานอัตโนมัติ เช่น REQ-123456 • บันทึกวัน–เวลาแจ้ง (Timestamp) • ส่งข้อมูลเข้าไปเก็บในฐานข้อมูล 📊 3) ฐานข้อมูล (Database) • เก็บข้อมูลทั้งหมดในรูปแบบตาราง • เพิ่มข้อมูลต่อท้ายอัตโนมัติ • บันทึกครบ: ผู้แจ้ง / สถานที่ / อาการเสีย / สถานะงาน 🔁 Workflow การทำงานจริง User → เปิดเว็บ → กรอกข้อมูล → กดส่ง ระบบ → ตรวจสอบ → สร้าง ID → บันทึกฐานข้อมูล หน้าเว็บ → แจ้ง “บันทึกสำเร็จ” → พร้อมใช้งานต่อทันที ผลลัพธ์ที่ได้ ✔ แจ้งซ่อมผ่านมือถือได้ ✔ ข้อมูลไม่หาย ไม่ตกหล่น ✔ ติดตามสถานะย้อนหลังได้ ✔ ลดงานเอกสารและเวลาประสานงาน เหมาะสำหรับ: 🏫 โรงเรียน 🏢 หน่วยงานราชการ 🏭 องค์กรที่มีงานซ่อมภายใน

ระบบติดตามงานฝ่ายบริหารโรงเรียน

📌 เลิกตามงานในไลน์ เปลี่ยนมาใช้ “ระบบติดตามงานฝ่ายบริหารโรงเรียน” ผู้บริหารเห็นภาพรวม หัวหน้าฝ่ายรู้สถานะงาน ครูรายงานความคืบหน้าได้ง่ายในที่เดียว ✨ วันนี้ครูนุ่มแจก Prompt สร้างระบบติดตามงานฝ่ายบริหารโรงเรียน โดยใช้ ✅ Gemini (Canvas) ✅ Google Sheets ✅ Google Apps Script ❌ ไม่ต้องเขียนโค้ดเองทั้งหมด ❌ ไม่ต้องซื้อระบบแพง ⸻ 🔧 ระบบนี้ทำอะไรได้บ้าง ✔️ มอบหมายงานเป็นระบบ ✔️ ติดตามสถานะงานแบบ Real-time ✔️ แยกงานตามฝ่าย / ผู้รับผิดชอบ ✔️ Dashboard สำหรับผู้บริหาร ✔️ แจ้งเตือนงานใกล้ครบกำหนด / งานล่าช้า ✔️ มี Log การแก้ไข ตรวจสอบย้อนหลังได้ ⸻ 🏫 เหมาะกับ 👔 ผู้บริหารโรงเรียน 📂 งานแผนงาน / ธุรการ / งบประมาณ 💻 ครูสายเทค / ICT โรงเรียน 📊 โรงเรียนที่ใช้ Google Workspace ⸻ 💡 ใช้ได้จริงในโรงเรียน 💡 ปรับแต่งต่อยอดได้ 💡 ใช้แทนกระดาษ + LINE ได้ทันที ⸻

ระบบติดตามรถเก็บขยะ

ระบบติดตามรถเก็บขยะแบบ Real-Time สำหรับหน่วยงานที่ต้องการดูตำแหน่งรถเก็บขยะบนแผนที่ได้ทันที 🚛📍 ระบบนี้ถูกพัฒนาเป็น Web Application ที่ทำงานร่วมกับ Google Apps Script + Google Sheets ทำให้สามารถติดตามตำแหน่งรถเก็บขยะได้แบบเกือบ Real-Time ผ่านหน้าเว็บ ใช้งานง่าย ไม่ต้องติดตั้งโปรแกรมเพิ่มเติม ⸻ 🔎 ภาพรวมการทำงานของระบบ ระบบประกอบด้วย 3 ส่วนหลัก 1️⃣ Google Sheets (ฐานข้อมูล) ทำหน้าที่เป็น Database สำหรับเก็บข้อมูลพิกัดล่าสุดของรถแต่ละคัน เช่น • วันเวลา • รหัสรถ • Latitude • Longitude 2️⃣ Google Apps Script (Backend) ทำหน้าที่เป็นตัวกลางรับ-ส่งข้อมูลระหว่างหน้าเว็บกับ Google Sheets ฟังก์ชันสำคัญ เช่น • doGet(e) → เรียกหน้าเว็บมาแสดงผลเมื่อมีคนเปิดระบบ • setupSheet() → ใช้สร้างหัวตารางใน Google Sheets (รันครั้งแรกครั้งเดียว) • saveLocation(truckId, lat, lng) → รับพิกัด GPS จากมือถือคนขับ และอัปเดตตำแหน่งล่าสุดของรถ • getAllLocations() → ดึงตำแหน่งรถทุกคันจากฐานข้อมูล เพื่อส่งไปแสดงบนแผนที่ 3️⃣ HTML / JavaScript (Frontend) เป็นหน้าเว็บสำหรับผู้ใช้งาน แบ่งเป็น 2 โหมด 👨‍✈️ โหมดคนขับ • เปิดระบบจากมือถือ • เลือกรถที่กำลังขับ • กดเริ่มส่งตำแหน่ง • ระบบจะใช้ GPS ของมือถือส่งพิกัดไปยังเซิร์ฟเวอร์อัตโนมัติ 📍 โหมดผู้ติดตาม • เปิดดูผ่านหน้าเว็บ • ระบบจะดึงพิกัดรถทุกคันทุกๆ 10 วินาที • แสดงตำแหน่งรถบนแผนที่แบบเกือบ Real-Time ⸻ 🏢 ระบบนี้เหมาะกับหน่วยงาน เช่น • เทศบาล / องค์การบริหารส่วนตำบล (อบต.) • องค์การบริหารส่วนจังหวัด (อบจ.) • หน่วยงานจัดการขยะและสิ่งแวดล้อม • บริษัทเอกชนที่มีรถเก็บขยะ • หน่วยงานที่ต้องติดตามรถภาคสนาม ช่วยให้ ✅ ตรวจสอบตำแหน่งรถได้ ✅ วางแผนเส้นทางเก็บขยะได้ดีขึ้น ✅ ประชาชนสามารถติดตามรถขยะในพื้นที่ได้ ⸻

ระบบติดตามสถานะเอกสารราชการ (E-Tracking)

ระบบติดตามสถานะเอกสารราชการ (E-Tracking System) ระบบนี้ถูกออกแบบมาเพื่อช่วยให้ประชาชนและหน่วยงานภายในสามารถ ติดตามสถานะหนังสือราชการได้ด้วยตนเองผ่านเว็บไซต์ ลดการโทรสอบถาม ลดภาระเจ้าหน้าที่ และเพิ่มความโปร่งใสในการทำงานอย่างเป็นรูปธรรม ⸻ 🔹 โครงสร้างระบบ (System Architecture) ระบบทำงานบนแพลตฟอร์มของ Google ทั้งหมด (Serverless) ไม่มีค่าใช้จ่ายรายเดือน และมีความเสถียรสูง ประกอบด้วย 3 ส่วนหลัก ✅ Database – Google Sheets ใช้เป็นฐานข้อมูลกลาง เก็บข้อมูลสถานะเอกสาร เช่น เลขที่เอกสาร, วันที่รับเรื่อง, ชื่อเรื่อง, หน่วยงานต้นทาง, หน่วยงานรับผิดชอบ, สถานะปัจจุบัน และ Timeline การดำเนินงาน ✅ Backend – Google Apps Script ทำหน้าที่เชื่อมต่อหน้าเว็บกับ Google Sheets • รับเลขที่เอกสารจากผู้ใช้ • ค้นหาข้อมูลใน Sheet • ส่งผลลัพธ์กลับมาในรูปแบบ JSON ✅ Frontend – HTML / JavaScript หน้าเว็บไซต์สำหรับผู้ใช้งานทั่วไป • ออกแบบด้วย Tailwind CSS สวยงาม ทันสมัย รองรับมือถือ • ค้นหาแบบไม่ต้องรีโหลดหน้าเว็บ • มี Loading Animation และแจ้งเตือนเมื่อไม่พบข้อมูล ⸻ 🔄 การทำงานของระบบ (Workflow) ผู้ใช้กรอกเลขที่เอกสาร → ระบบค้นหาในฐานข้อมูล → ✔ พบข้อมูล: แสดงรายละเอียด สถานะ และ Timeline ❌ ไม่พบข้อมูล: แจ้งเตือนอย่างชัดเจนทันที ⸻ ⭐ จุดเด่นของระบบ • 💸 ประหยัดงบประมาณ ใช้งานฟรี 100% • 🧑‍💼 ดูแลรักษาง่าย เจ้าหน้าที่อัปเดตข้อมูลผ่าน Google Sheets ได้ทันที • 🔍 ใช้งานง่าย รูปแบบคล้าย Google Search • 📱 รองรับทุกอุปกรณ์ ทั้งคอมพิวเตอร์และมือถือ ⸻ ⚙️ สิ่งที่ใช้ในการติดตั้ง • Google Account • Google Sheets ตามโครงสร้างที่กำหนด • Google Apps Script (Code.gs + Index.html) • Deploy เป็น Web App เปิดสิทธิ์ให้ทุกคนเข้าถึงได้ ⸻ 🚀 แนวทางต่อยอดในอนาคต • เพิ่ม QR Code สำหรับตรวจสอบสถานะได้ทันที • ระบบ Login สำหรับเจ้าหน้าที่กรอกข้อมูลผ่านหน้าเว็บ • แจ้งเตือนสถานะเอกสารผ่าน LINE เมื่อมีการเปลี่ยนแปลง ⸻ 📌 ตัวอย่างของการนำเทคโนโลยี Cloud และเครื่องมือฟรีมาใช้พัฒนางานราชการ ลดขั้นตอน เพิ่มความโปร่งใส และตอบโจทย์ประชาชนยุคดิจิทัล ❌ไม่อนุญาตให้จำหน่ายเชิงพาณิชย์

ระบบถวายพระพร

ระบบลงนามถวายพระพรออนไลน์ ๒๘ กรกฎาคม ๒๕๖๘ เนื่องในวันเฉลิมพระชนมพรรษา พระบาทสมเด็จพระวชิรเกล้าเจ้าอยู่หัวฯ ** หากสำเนาแล้วอย่าลืมแก้ไขไฟล์ index.html ให้เป็นชื่อโรงเรียนหรือหน่วยงานของท่านตรง footer และ Script url และเปลี่ยน SHEET_ID ใน App Script

ระบบถวายพระพรวันแม่แห่งชาติ

ระบบลงนามถวายพระพรออนไลน์ 12 สิงหาคม ๒๕๖๘ เนื่องในวันเฉลิมพระชนมพรรษา สมเด็จพระนางเจ้าสิริกิติ์ พระบรมราชินีนาถ พระบรมราชชนนีพันปีหลวง ** หากสำเนาแล้วอย่าลืมแก้ไขไฟล์ index.html ให้เป็นชื่อโรงเรียนหรือหน่วยงานของท่านตรง footer และ Script url บรรทัดที่ 128 และเปลี่ยน SHEET_ID ใน App Script