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

ระบบแบบประเมินความพึงพอใจ

ระบบ "แบบประเมินความพึงพอใจ" ออนไลน์ 🎉 ทำงานด้วย Google Apps Script + Google Sheets ใช้งานง่าย ✨ ✅ ครู / อาจารย์ / หน่วยงาน สามารถนำไปใช้เก็บข้อมูลออนไลน์ได้เลย ✅ เก็บผลลัพธ์ลง Google Sheets อัตโนมัติ ✅ นำไปทำสำเนา (Make a copy) แล้วใช้งานได้ทันที ❌ ไม่อนุญาตให้นำไปขาย หรือใช้ในเชิงพาณิชย์ 📌 ระบบนี้สร้างจากการทดลอง Canva AI + App Script เพื่อช่วยลดเวลาในการทำงาน

ระบบประเมินผลการปฏิบัติงานบุคลากร

ระบบประเมินผลการปฏิบัติงานบุคลากร ❌ ไม่อนุญาตให้นำไปจำหน่ายนะคะ สรุปภาพรวมการทำงานของโค้ดในหน้า Canvas (Index.html) ให้ฟังแบบเข้าใจง่ายค่ะ 👇 💻 ระบบนี้เป็น “หน้าจอผู้ใช้งาน (Frontend/UI)” ของระบบประเมินผล ซึ่งแบ่งการทำงานออกเป็น 3 ส่วนหลัก 🔹 1. ส่วนแสดงผล (UI & Layout) หน้าเว็บถูกออกแบบด้วย HTML และ Tailwind CSS ทำให้หน้าตาสวยงาม รองรับทุกอุปกรณ์ทั้งมือถือและคอมพิวเตอร์ (Responsive) ใช้ฟอนต์ “Sarabun” จาก Google Fonts เพื่อความเป็นทางการ อ่านง่าย ปุ่มให้คะแนน 1-5 มีการใช้ JavaScript ช่วยสร้างแบบอัตโนมัติ ลดโค้ดซ้ำ ทำให้โค้ดดูสะอาดและเป็นระเบียบมากขึ้น 🔹 2. ส่วนฟอร์มรับข้อมูล (Form Inputs) มีช่องกรอกข้อมูลสำคัญ เช่น - ชื่อผู้ประเมิน - ผู้ถูกประเมิน - แบบประเมิน 4 ด้าน (ความรับผิดชอบ / คุณภาพงาน / การทำงานเป็นทีม / ความคิดริเริ่ม) - ช่องข้อเสนอแนะเพิ่มเติม พร้อมปุ่ม “บันทึกผล” ที่มี Loading Spinner ซ่อนไว้ เพื่อแสดงสถานะตอนส่งข้อมูล 🔹 3. ส่วนประมวลผล (JavaScript Logic) เมื่อกด “บันทึก” ระบบจะไม่รีเฟรชหน้า (e.preventDefault()) และแสดง Loading เพื่อให้ผู้ใช้รู้ว่าระบบกำลังทำงาน จากนั้นจะรวบรวมข้อมูลทั้งหมดเป็น Object แล้วส่งไปยังฝั่ง Server (Code.gs) ด้วยคำสั่ง google.script.run เพื่อนำไปบันทึกลง Google Sheet 📌 ผลลัพธ์: ✅ ถ้าสำเร็จ → แจ้งเตือนด้วย SweetAlert2 + ล้างฟอร์ม ❌ ถ้าผิดพลาด → แจ้งเตือน Error ให้ผู้ใช้ทราบทันที 🎯 จุดเด่นของระบบนี้ ✔ ใช้งานง่าย ไม่ต้องมีเซิร์ฟเวอร์ ✔ ทำงานบน Google ทั้งระบบ ✔ เหมาะกับโรงเรียน/องค์กรที่ต้องการระบบประเมินแบบรวดเร็ว

ระบบรับแจ้งปัญหาการใช้งานระบบ

เคยไหมคะ? ผู้ใช้แจ้งปัญหาผ่านไลน์บ้าง โทรบ้าง ทักแชตบ้าง สุดท้ายข้อมูลกระจัดกระจาย ตามงานยาก 😵‍💫 ระบบนี้ถูกออกแบบมาเพื่อแก้ปัญหานั้นโดยตรงค่ะ 👇 ⸻ 💡 ระบบนี้ทำอะไรได้บ้าง? 📌 เป็น เว็บฟอร์มรับแจ้งปัญหาออนไลน์ ผู้ใช้กรอกข้อมูล → กดส่ง → ระบบบันทึกให้อัตโนมัติ ไม่ต้องลงโปรแกรม ไม่ต้องมีเซิร์ฟเวอร์ 📌 ใช้งานบน Google ทั้งระบบ • เปิดผ่านเว็บได้เลย • ข้อมูลเก็บใน Google Sheets • ดูย้อนหลัง แก้ไข และต่อยอดได้ง่ายมาก ⸻ 🖥️ การทำงานแบบเข้าใจง่าย 👤 ฝั่งผู้ใช้งาน • เปิดหน้าเว็บ • กรอกปัญหาที่พบ • กดส่งข้อมูล • ระบบแสดงแจ้งเตือนว่ารับเรื่องเรียบร้อย ✅ 🧑‍💻 ฝั่งผู้ดูแล • ข้อมูลถูกบันทึกลง Google Sheets ทันที • แต่ละรายการมี เลข Ticket สำหรับอ้างอิง • เปิดดู แยกงาน และจัดการต่อได้สะดวก ⸻ ✨ จุดเด่นของระบบ • หน้าตาสวย ใช้งานง่าย รองรับมือถือ 📱 • ไม่ต้องรีโหลดหน้าเว็บ • มีสถานะกำลังโหลด ไม่งงว่าระบบค้างหรือไม่ • แจ้งเตือนสวยงาม ดูเป็นมืออาชีพ • ฟอนต์ภาษาไทย อ่านง่าย ⸻ 🚀 สามารถพัฒนาต่อยอดอะไรได้อีก? • แจ้งเตือนอีเมล หรือ LINE เมื่อมีคนแจ้งปัญหา • แนบรูปภาพปัญหา เช่น หน้าจอ Error • ตรวจสอบสถานะงานจากเลข Ticket • ทำหน้า Admin สำหรับเจ้าหน้าที่ • ผูกกับอีเมลผู้ใช้ในองค์กรอัตโนมัติ ⸻ 🎯 เหมาะกับใคร? ✅ โรงเรียน ✅ หน่วยงานราชการ ✅ องค์กรขนาดเล็ก ✅ ครู / นักพัฒนา / คนดูแลระบบ ✅ คนที่อยากเริ่มทำระบบ Helpdesk แบบจริงจัง

ระบบรายงานการเรียนต่อของนักเรียนชั้น ม.6

ระบบรายงานการเรียนต่อ นักเรียนชั้น ม.6 🎓 ทำสำเนาใต้คอมเมนต์ (ไม่อนุญาตให้นำไปจำหน่าย) ใครกำลังมองหาระบบสรุปข้อมูลการเรียนต่อของนักเรียนแบบมืออาชีพ ใช้งานง่าย และดูสถิติได้ทันที บอกเลยว่าตัวนี้ตอบโจทย์มากค่ะ ✅ ระบบนี้ถูกออกแบบเป็น Single Page Application (SPA) ทำงานจบในหน้าเดียว ไม่ต้องรีเฟรชหน้าจอ พัฒนาด้วย Google Apps Script (GAS) + Google Sheets เป็นฐานข้อมูลหลังบ้าน ⸻ 🔹 1. ส่วนฟอร์มสำหรับนักเรียน (form-view) 📝 กรอกข้อมูลสำคัญ เช่น • รหัสนักเรียน • ชื่อ-สกุล • ห้อง • แผนการเรียน ⚙️ ฟิลด์แบบไดนามิก (Dynamic Fields) ถ้าเลือก “ศึกษาต่อมหาวิทยาลัย” หรือ “วิทยาลัย/อาชีวศึกษา” ระบบจะแสดงช่องกรอก ชื่อสถาบัน / คณะ / จังหวัด อัตโนมัติ แต่ถ้าเลือก “ทำงาน” หรือ “อื่นๆ” ช่องเหล่านี้จะซ่อนทันที 🚀 บันทึกข้อมูลแบบไม่ต้องรีโหลดหน้า ใช้ google.script.run เชื่อมต่อหลังบ้านโดยตรง บันทึกเสร็จมีหน้าต่างขอบคุณ พร้อมป้องกันการกดซ้ำด้วย Loading Spinner ⸻ 🔹 2. Dashboard สำหรับแอดมิน (admin-view) 👨‍💼 กดสลับโหมดเพื่อเข้าสู่หน้าแอดมิน ระบบจะดึงข้อมูลล่าสุดจาก Google Sheets อัตโนมัติ 📊 สรุปสถิติแบบเรียลไทม์ • จำนวนผู้กรอกข้อมูลทั้งหมด • สัดส่วนเรียนต่อ vs ทำงาน • 5 อันดับมหาวิทยาลัยยอดนิยม 📈 แสดงกราฟด้วย Chart.js • กราฟโดนัท แสดงสถานะการเรียนต่อ • กราฟแท่ง แสดงจำนวนนักเรียนแยกตามห้อง 🔍 ตารางข้อมูล + ค้นหาแบบ Real-time พิมพ์ปุ๊บ กรองข้อมูลทันที (รหัส / ชื่อ / มหาวิทยาลัย) ⸻ 🔹 3. เทคโนโลยีที่ใช้ (UI & UX) 🎨 ออกแบบ Responsive 100% ด้วย Tailwind CSS ใช้งานได้ทั้งมือถือและคอมพิวเตอร์ ✨ ไอคอนสวย ๆ จาก Lucide 📊 กราฟสถิติสวยงาม เข้าใจง่าย 🔄 Loading State ป้องกันการส่งข้อมูลซ้ำ ⸻ 💡 สรุปจุดเด่นของระบบนี้ ✅ ฟรี ใช้ Google Account ก็ทำได้ ✅ ไม่ต้องมีเซิร์ฟเวอร์ ✅ จัดการข้อมูลผ่าน Google Sheets ✅ ดูสถิติภาพรวมได้ทันที ✅ ปรับแต่งต่อยอดได้เอง เหมาะสำหรับ 🏫 โรงเรียนมัธยมศึกษา 👩‍🏫 งานวิชาการ / งานแนะแนว 📊 ผู้บริหารที่ต้องการข้อมูลภาพรวมทันที

ระบบลงทะเบียนฉีดวัคซีนสัตว์เลี้ยง

ระบบลงทะเบียนฉีดวัคซีนสัตว์เลี้ยง (Web App) พร้อมเชื่อม Google Sheets วันนี้ขอแบ่งปันตัวอย่าง โค้ดระบบรับข้อมูลออนไลน์ ที่พัฒนาด้วย Google Apps Script + HTML + Tailwind CSS สามารถนำไปประยุกต์ใช้ทำระบบต่างๆ ได้ เช่น ระบบลงทะเบียน ระบบบันทึกข้อมูล หรือแบบฟอร์มออนไลน์ของหน่วยงานครับ 🔎 ภาพรวมการทำงานของโค้ด (Frontend) โค้ดส่วนนี้เป็น หน้าบ้าน (Frontend) ทำหน้าที่รับข้อมูลจากผู้ใช้งานและส่งต่อไปบันทึก โดยแบ่งการทำงานหลัก ๆ ออกเป็น 3 ส่วน 🧩 1. ส่วนหน้าตาฟอร์ม (UI Design) • ใช้ HTML สร้างโครงสร้างฟอร์มรับข้อมูล เช่น • ชื่อสัตว์เลี้ยง • ประเภทสัตว์ • สายพันธุ์ • ข้อมูลเจ้าของ • ข้อมูลการนัดหมาย • ใช้ Tailwind CSS ช่วยตกแต่งหน้าตาให้สวยงามและรองรับมือถือ (Responsive) • ใช้ฟอนต์ Kanit เพื่อให้อ่านง่าย เหมาะกับผู้ใช้งานภาษาไทย ⚙️ 2. ส่วนควบคุมการทำงานเมื่อกดส่งข้อมูล (JavaScript Logic) เมื่อผู้ใช้กดปุ่ม “ยืนยันการลงทะเบียน” ระบบจะ • หยุดการรีเฟรชหน้าเว็บด้วย e.preventDefault() • ล็อคปุ่มกดชั่วคราว เพื่อป้องกันการส่งข้อมูลซ้ำ • เปลี่ยนข้อความเป็น “กำลังบันทึก…” พร้อมไอคอน Loading • รวบรวมข้อมูลจากฟอร์มทั้งหมดมาเก็บไว้ในตัวแปร data 🔗 3. ส่วนเชื่อมต่อและแจ้งเตือนผลลัพธ์ (API & Feedback) ระบบจะใช้คำสั่ง google.script.run เพื่อส่งข้อมูล data ไปยังฟังก์ชัน processForm() ที่อยู่ในฝั่งหลังบ้าน (Google Apps Script / Code.gs) เพื่อบันทึกลง Google Sheets ✅ กรณีบันทึกสำเร็จ • แสดงข้อความสีเขียวแจ้งว่า บันทึกข้อมูลเรียบร้อย • ล้างข้อมูลในฟอร์ม (Reset Form) • ปลดล็อคปุ่มให้ใช้งานได้ตามปกติ ❌ กรณีเกิดข้อผิดพลาด • แสดงข้อความแจ้งเตือนสีแดง • ปลดล็อคปุ่มให้ผู้ใช้สามารถกดส่งข้อมูลใหม่ได้ ⏱️ ข้อความแจ้งเตือนทั้งหมดจะค่อยๆ ซ่อนหายไปเองภายใน 5 วินาที 💡 โค้ดนี้สามารถนำไปต่อยอดทำเป็น • ระบบลงทะเบียนกิจกรรม • ระบบบันทึกข้อมูลประชาชน • ระบบลงทะเบียนสัตว์เลี้ยง • ระบบแบบฟอร์มออนไลน์ของหน่วยงาน

ระบบลงเวลาปฏิบัติงานด้วย GPS

ระบบลงเวลาปฏิบัติงานด้วย GPS ด้วย Google Apps Script เหมาะสำหรับหน่วยงานที่ต้องการระบบลงเวลาออนไลน์ ใช้งานง่าย ไม่ต้องติดตั้งแอป รองรับมือถือทันที ❗ แจกฟรีสำหรับการใช้งานเท่านั้น ไม่อนุญาตให้นำไปจำหน่ายหรือดัดแปลงเพื่อขาย 📥 สำเนาโค้ดอยู่ใต้คอมเมนต์ ⸻ ⏰ ระบบลงเวลาปฏิบัติงานด้วย GPS (Google Apps Script) ระบบนี้ถูกพัฒนาในรูปแบบ Web Application สามารถเปิดใช้งานผ่านมือถือหรือคอมพิวเตอร์ได้ทันที โดยมีโครงสร้างการทำงานหลัก 3 ส่วนสำคัญ ดังนี้ 🛠️ องค์ประกอบหลักของระบบ 1️⃣ ส่วนหน้าบ้าน (Front-end / UI) ไฟล์ index.html ทำหน้าที่เป็นหน้าเว็บสำหรับให้พนักงานลงเวลา • ออกแบบให้ใช้งานบนมือถือได้ดี • ใช้ Tailwind CSS เพื่อให้หน้าตาสวยงาม • ใช้ SweetAlert2 สำหรับระบบแจ้งเตือนแบบ Pop-up ผู้ใช้งานสามารถกรอกข้อมูลและกดบันทึกเวลาได้อย่างสะดวก ⸻ 2️⃣ ส่วนหลังบ้าน (Back-end / Server) ไฟล์ Code.gs ซึ่งเป็น Google Apps Script ทำหน้าที่ • รับข้อมูลจากหน้าเว็บ • ประมวลผลข้อมูล • สร้างลิงก์แผนที่จากพิกัด GPS • บันทึกข้อมูลลงฐานข้อมูล ⸻ 3️⃣ ส่วนฐานข้อมูล (Database) ใช้ Google Sheets เป็นฐานข้อมูลหลัก • เก็บข้อมูลการลงเวลาทั้งหมด • สามารถนำข้อมูลไปวิเคราะห์หรือสรุปรายงานได้ทันที ⸻ 🔄 ขั้นตอนการทำงานของระบบ 1️⃣ ผู้ใช้เปิดระบบ พนักงานเปิดลิงก์ Web App ผ่านมือถือหรือคอมพิวเตอร์ 2️⃣ กรอกข้อมูลการลงเวลา • รหัสพนักงาน • ชื่อ-นามสกุล • ประเภทการลงเวลา (เข้างาน / ออกงาน) 3️⃣ ระบบดึงพิกัด GPS เมื่อกดปุ่ม บันทึกเวลาและพิกัด GPS ระบบจะขออนุญาตเข้าถึงตำแหน่งของอุปกรณ์ และดึงค่า • Latitude • Longitude 4️⃣ ส่งข้อมูลไปยังหลังบ้าน หน้าเว็บจะส่งข้อมูลทั้งหมดไปยัง Apps Script 5️⃣ บันทึกลง Google Sheets ระบบจะ • สร้าง Timestamp วันและเวลา • สร้างลิงก์ Google Maps จากพิกัด • บันทึกข้อมูลลงเป็นแถวใหม่ใน Sheets 6️⃣ แจ้งผลการบันทึก เมื่อบันทึกสำเร็จ ระบบจะแสดง Pop-up แจ้งว่า ✅ บันทึกข้อมูลเวลาเรียบร้อยแล้ว ⸻ ✨ จุดเด่นของระบบ ✅ ไม่ต้องติดตั้งแอป ใช้งานผ่าน Browser ได้เลย ✅ ตรวจสอบพิกัดจริงจาก GPS ✅ ดูตำแหน่ง Check-in ผ่าน Google Maps ได้ทันที ✅ ใช้เครื่องมือฟรีของ Google ทั้งระบบ ✅ Deploy ครั้งเดียวใช้งานได้ทันที ⸻ 🚀 แนวทางการพัฒนาต่อยอด ท่านสามารถนำระบบนี้ไปพัฒนาต่อยอดได้ เช่น 🔹 เพิ่ม ระบบ Login ด้วยบัญชี Google / รหัสพนักงาน 🔹 เพิ่ม การจำกัดพื้นที่ลงเวลา (Geofence) 🔹 เพิ่ม ระบบถ่ายรูปตอน Check-in 🔹 เพิ่ม Dashboard สรุปเวลาการทำงาน 🔹 เชื่อมต่อ Looker Studio ทำรายงาน HR อัตโนมัติ 🔹 เพิ่ม ระบบแจ้งเตือน LINE เมื่อพนักงานลงเวลา ⸻ 📌 เหมาะสำหรับ • โรงเรียน • องค์กรราชการ • บริษัทเอกชน • อบต. / เทศบาล • หน่วยงานที่มีพนักงานลงพื้นที่