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

ระบบสร้างภาพข่าวอัตโนมัติ (Auto Poster)

📢 แจกฟรี! สำหรับสายคอนเทนต์ & ครูนักพัฒนา 💻✨ App Script ระบบสร้างภาพข่าวอัตโนมัติ (Auto Poster) ใช้งานง่าย จบครบในที่เดียว! ❌ ไม่อนุญาตให้นำไปจำหน่าย ⸻ 🔥 ใครที่ทำเพจ ทำข่าว ทำประชาสัมพันธ์ หรืออยากสร้างคอนเทนต์แบบมือโปร แต่ไม่อยากเสียเวลานั่งออกแบบภาพทีละรูป ระบบนี้ตอบโจทย์เลย! ✨ แค่กรอกข้อมูล → ได้ภาพข่าวสวย ๆ ทันที ✨ ไม่ต้องใช้ Photoshop ✨ ใช้ได้ทั้งคอมและมือถือ ⸻ 💡 จุดเด่นของระบบ * สร้างภาพอัตโนมัติขนาด 1080x1080 พร้อมโพสต์ได้เลย * พรีวิวภาพแบบ Real-time เห็นผลลัพธ์ทันที * รองรับการตัดคำภาษาไทย จัดข้อความให้พอดีอัตโนมัติ * ดาวน์โหลดภาพ หรือบันทึกเข้าระบบได้ทันที * เก็บข้อมูล + รูปภาพ ลง Google Drive และ Google Sheet อัตโนมัติ ⸻ ⚙️ ภาพรวมการทำงาน (เข้าใจง่าย ๆ) 🟢 1. หน้าบ้าน (Frontend) กรอกข้อมูล + อัปโหลดภาพ → ระบบสร้างภาพด้วย Canvas แบบ Real-time กดดาวน์โหลด หรือบันทึกข้อมูลได้ทันที 🟡 2. หลังบ้าน (Backend - Apps Script) รับข้อมูล → แปลงภาพจาก Base64 → สร้างไฟล์ .png 🔵 3. ระบบจัดเก็บ (Google Workspace) * บันทึกรูปลง Google Drive * เก็บข้อมูลข่าว + ลิงก์รูป ลง Google Sheet ⸻ 🔄 Flow การทำงานสั้น ๆ กรอกข้อมูล ➔ สร้างภาพ ➔ กดบันทึก ➔ สร้างไฟล์ ➔ เก็บ Drive ➔ บันทึก Sheet ✅ ⸻ 🎯 ระบบนี้ตั้งใจทำขึ้นเพื่อ “อำนวยความสะดวกให้ตัวเอง และแบ่งปันให้คนอื่นได้นำไปใช้ต่อ” ใครเอาไปต่อยอดได้เต็มที่เลยค่ะ🙌 แต่งดนำไปจำหน่ายทุกกรณี ⸻

ระบบเช็คชื่อเข้าเรียนด้วยใบหน้า

🔥 Template App Script "ระบบเช็คชื่อเข้าเรียนด้วยใบหน้า (Facial Attendance System)" ใครกำลังมองหาระบบเช็คชื่อที่ “ทันสมัย ใช้งานจริงได้ และไม่ต้องเสียค่าเซิร์ฟเวอร์รายเดือน” ตัวนี้ตอบโจทย์ 👇 --- 💡 ระบบนี้คืออะไร? เป็นระบบเช็คชื่อด้วย AI ที่ออกแบบมาแบบ Serverless ไม่ต้องมีเซิร์ฟเวอร์ ไม่ต้องดูแลระบบให้วุ่นวาย ใช้แค่ Google + เว็บธรรมดา ก็ใช้งานได้ทันที --- 🧠 โครงสร้างระบบ (เข้าใจง่าย ใช้งานได้จริง) 🗄️ ฐานข้อมูล: Google Sheets - เก็บข้อมูลนักเรียน (รหัส / ชื่อ / ชั้น) - เก็บ "ข้อมูลใบหน้า" ในรูปแบบตัวเลข (ไม่ใช่รูปภาพ) ปลอดภัยกว่า - บันทึกประวัติการเช็คชื่อรายวัน (มา / ขาด / ลา) ⚙️ หลังบ้าน: Google Apps Script (API) - ดึงข้อมูลนักเรียน - ลงทะเบียนใบหน้า - เช็คชื่ออัตโนมัติ - สรุปผลรายวัน - แก้ไขสถานะได้แบบ Real-time 💻 หน้าบ้าน: Web App (index.html) - ใช้งานผ่านมือถือ / คอมได้เลย - ใช้ AI ตรวจจับใบหน้าบนเครื่อง (ไม่ส่งข้อมูลออกไปข้างนอก) - มีเสียงแจ้งเตือนเมื่อเช็คชื่อสำเร็จ / สแกนซ้ำ --- 🔄 วิธีใช้งานจริง 🚀 เปิดระบบ → โหลด AI + ดึงข้อมูลนักเรียน 📝 ลงทะเบียน → สแกนหน้า 1 ครั้ง บันทึกเข้าระบบ ✅ เช็คชื่อ → เดินผ่านกล้อง ระบบบันทึกอัตโนมัติ 📊 สรุปผล → ดูรายวัน + แก้ไขสถานะได้ทันที --- ✨ จุดเด่นที่ทำให้ระบบนี้คุ้มมาก ✔️ ไม่เสียค่า Server รายเดือน (ใช้ฟรี 100%) ✔️ ไม่เก็บรูปหน้า (แปลงเป็นตัวเลข ปลอดภัยกว่า) ✔️ ใช้งานง่าย ครูใช้ได้จริง ไม่ต้องสายไอที ✔️ มีระบบสรุป + แก้ไขสถานะครบจบในตัวเดียว ✔️ รองรับการใช้งานจริงในโรงเรียน 💬 เหมาะกับใคร? * ครู / โรงเรียน ที่อยากลดงานเช็คชื่อแบบเดิม * คนทำระบบ ที่อยากได้ Template ไปต่อยอด * หน่วยงานที่อยากใช้ AI แต่ไม่อยากลงทุนสูง ⸻ 📌 ใครอยากได้ระบบไปใช้งาน / ต่อยอด ของแบบนี้ “ซื้อครั้งเดียว ใช้ยาว” คุ้มกว่าทำใหม่แน่นอน 😉 ::: ลิงค์ทดสอบ : https://face-checkin.netlify.app/ *หากกดสั่งซื้อเรียบร้อยแล้ว ทางแอดมินต้องใช้อีเมลในการดำเนินการเปิดแชร์ในระบบอีกครั้ง

ระบบสำรวจความคิดเห็นประชาชนแบบ Real-Time

📊✨ แจกฟรี! App Script “ระบบสำรวจความคิดเห็นประชาชนแบบ Real-Time” ใครที่กำลังมองหาระบบโหวต / แบบสอบถามออนไลน์ สำหรับหน่วยงาน เอาไปใช้ได้จริง ใช้งานง่าย และไม่ต้องมีเซิร์ฟเวอร์เอง… ตัวนี้ตอบโจทย์เลยค่ะ 🚫 ไม่อนุญาตให้นำไปจำหน่าย ⸻ 💡 จุดเด่นของระบบ * โหวตได้ทันที ไม่ต้องรีโหลดหน้า * กราฟอัปเดตอัตโนมัติทุก 3 วินาที (Real-Time) * ใช้งานผ่านเว็บได้เลย รองรับมือถือ * ใช้เครื่องมือฟรี 100% จาก Google ⸻ 🧩 โครงสร้างระบบ 🔹 1. ส่วนแสดงผล (Frontend - Index.html) * หน้าตา UI แบบสอบถาม ใช้งานง่าย โทนฟ้า-ขาว ใช้ฟอนต์ Sarabun * มีปุ่มโหวต 4 ระดับความเห็น * แสดงผลด้วยกราฟแท่ง (Chart.js) * ใช้ google.script.run ส่งข้อมูลไปหลังบ้านแบบไม่ต้องโหลดหน้าใหม่ * มีระบบอัปเดตผลแบบ Real-Time ด้วย setInterval ทุก 3 วินาที 🔹 2. ส่วนประมวลผล (Backend - Code.gs) * รับค่าการโหวตจากหน้าเว็บ * บันทึกข้อมูลลง Google Sheet ทันที (Append Row) * เก็บ Timestamp ทุกครั้งที่มีการโหวต * ประมวลผลนับคะแนนแต่ละตัวเลือก * ส่งผลลัพธ์กลับไปแสดงที่หน้าเว็บ 🔹 3. ฐานข้อมูล (Google Sheet) * ใช้แทน Database * เก็บข้อมูลการโหวต (เวลา + ความเห็น) * เรียงข้อมูลตามลำดับเวลา ⸻ 🔁 สรุปการทำงาน ผู้ใช้กดโหวต → ข้อมูลถูกบันทึกลง Sheet → ระบบดึงข้อมูลใหม่ → กราฟอัปเดตอัตโนมัติทุก 3 วินาที 🎯 ได้ระบบสำรวจความคิดเห็นแบบ Real-Time โดยไม่ต้องมีเซิร์ฟเวอร์ภายนอก! ⸻ เหมาะมากสำหรับ: 🏛️ หน่วยงานราชการ / อบต / เทศบาล 🏫 โรงเรียน / กิจกรรมภายใน 📢 งานประชาสัมพันธ์ / สำรวจความพึงพอใจ ⸻

ระบบปฏิทินกิจกรรมหน่วยงาน

📢 แจกฟรี! App Script ระบบปฏิทินกิจกรรมหน่วยงาน (Public Calendar) วันนี้ขอมาแชร์ระบบ “ปฏิทินกิจกรรมหน่วยงาน” ที่พัฒนาเป็น Web Application ใช้งานได้จริง และที่สำคัญคือใช้เครื่องมือฟรีจาก Google ทั้งระบบ! 💡 เหมาะสำหรับ: หน่วยงาน / โรงเรียน / องค์กร ที่ต้องการจัดการตารางกิจกรรมให้ดูง่าย ทันสมัย และเข้าถึงได้ทุกอุปกรณ์ ⸻ 🔧 โครงสร้างระบบ (System Architecture) 1️⃣ ฐานข้อมูล (Database) – Google Sheet ใช้เก็บข้อมูลกิจกรรมทั้งหมด เช่น • ชื่อกิจกรรม • วันเริ่ม / วันสิ้นสุด • รายละเอียด • สีของกิจกรรม 👉 แก้ไขง่าย เพิ่ม/ลบ/ปรับข้อมูลได้เหมือนพิมพ์งานทั่วไป ⸻ 2️⃣ ระบบประมวลผล (Backend) – Google Apps Script ทำหน้าที่เป็น API เชื่อมระหว่างหน้าเว็บกับฐานข้อมูล • doGet() → โหลดหน้าเว็บให้ผู้ใช้งาน • getEvents() → ดึงข้อมูลกิจกรรมจาก Sheet • addEvent() → บันทึกกิจกรรมใหม่ลงระบบ ⸻ 3️⃣ ส่วนแสดงผล (Frontend) – HTML / CSS / JavaScript • ใช้ Bootstrap 5 → รองรับมือถือ (Responsive) • ใช้ FullCalendar.js → แสดงปฏิทินแบบสวยงาม • ใช้ google.script.run → เชื่อมข้อมูลแบบไม่ต้องรีเฟรชหน้า ⸻ 🔄 การทำงานของระบบ (Data Flow) 📌 กรณีดูปฏิทิน • ผู้ใช้เปิดลิงก์ • ระบบโหลดหน้าเว็บ • ดึงข้อมูลจาก Google Sheet • แสดงผลบนปฏิทินทันที 📌 กรณีเพิ่มกิจกรรม • กรอกข้อมูลผ่านฟอร์ม • ระบบส่งข้อมูลไปบันทึกใน Sheet • แสดงผลบนปฏิทินทันที (ไม่ต้องรีเฟรช) ⸻ ✨ จุดเด่นของระบบนี้ ✅ ใช้งานฟรี 100% (Serverless) ✅ ไม่ต้องเช่าโฮสติ้ง ✅ อัปเดตข้อมูลแบบ Real-time ✅ โครงสร้างเข้าใจง่าย แยก Frontend / Backend ชัดเจน ✅ พร้อมนำไปใช้งานจริง หรือพัฒนาต่อยอดได้ทันที ⸻ 💬 ใครที่กำลังมองหาระบบปฏิทินใช้งานในหน่วยงาน หรืออยากศึกษาแนวทางการทำ Web App ด้วย Google Apps Script ตัวนี้ตอบโจทย์มากค่ะ ⸻

ระบบขอใช้รถราชการออนไลน์

🚗💼 “ระบบขอใช้รถราชการออนไลน์” ฉบับใช้งานจริง! ระบบนี้ถูกออกแบบมาให้ “เล็ก เบา ใช้งานง่าย” แต่ฟีเจอร์ครบ ตอบโจทย์หน่วยงานที่ต้องการจัดการรถราชการแบบเป็นระบบ ลดความซ้ำซ้อน และป้องกันข้อผิดพลาดได้อย่างมีประสิทธิภาพ 🔹 โครงสร้างผู้ใช้งาน (User Roles) 👤 ผู้ใช้งานทั่วไป (ผู้ขอใช้รถ) • ไม่ต้องล็อกอิน เข้าใช้งานได้ทันที • กรอกฟอร์มจองครบในหน้าเดียว (ชื่อ, รถ, วันเวลา, จุดหมาย, วัตถุประสงค์) • ดูตารางปฏิทินการใช้งานรถแบบเรียลไทม์ • แสดงสถานะชัดเจน (เขียว=อนุมัติ / เหลือง=รอตรวจสอบ) • คลิกดูรายละเอียดผ่าน Popup สวยงาม แยกข้อมูลชัดเจน ไม่สับสน 🛡️ ผู้ดูแลระบบ (Admin) • เข้าใช้งานผ่านระบบล็อกอินเท่านั้น • Dashboard แสดงรายการ “รอตรวจสอบ” พร้อมปุ่ม อนุมัติ / ปฏิเสธ • จัดการข้อมูลรถได้เอง (เพิ่ม / แก้ไข / ลบ / เปลี่ยนสถานะรถ) 🔹 ฟีเจอร์เด่น (Key Features) ✅ ป้องกันการจองซ้ำ (Overlap Protection) ระบบจะตรวจสอบทันที หากมีการจองรถคันเดียวกันในช่วงเวลาทับซ้อน → ไม่สามารถบันทึกได้ ✅ แจ้งเตือนสวยงาม (SweetAlert2) แทน Alert แบบเดิม ด้วย Popup ที่ดูดี ใช้งานลื่น ไม่มีบัคแจ้งเตือนซ้ำ ✅ รองรับทุกอุปกรณ์ (Responsive Design) • มือถือ → เรียงแนวตั้ง ใช้งานง่าย • คอม → แบ่ง 2 ฝั่ง ฟอร์ม + ปฏิทิน ดูเป็นระเบียบ 🔹 โครงสร้างฐานข้อมูล ใช้ MySQL เพียง 2 ตารางหลัก: • vehicles → ข้อมูลรถ (ทะเบียน, รุ่น, ที่นั่ง, สถานะ) • reservations → ข้อมูลการจอง (ผู้จอง, รถ, เวลา, สถานะ) เชื่อมกันด้วย Foreign Key ทำให้ข้อมูลสัมพันธ์กันอย่างถูกต้อง 🔹 เทคโนโลยีที่ใช้ Backend: PHP 8+ (PDO ปลอดภัย ป้องกัน SQL Injection) Frontend: HTML5, CSS3, JavaScript Libraries: • Bootstrap 5 • Bootstrap Icons • FullCalendar • SweetAlert2 🔹 Workflow การทำงาน ดูปฏิทิน → กรอกฟอร์ม → เช็คเวลาซ้ำ → บันทึกรออนุมัติ → แอดมินตรวจสอบ → อนุมัติ → แสดงผลในปฏิทิน (สีเขียว) ✨ จุดเด่นสำคัญ โครงสร้างไฟล์ถูกจัดระเบียบ (แยก Header / Footer) ทำให้ง่ายต่อการพัฒนาต่อยอดในอนาคต เช่น เพิ่มระบบแจ้งเตือน Line หรือฟีเจอร์อื่น ๆ ได้ทันที ⸻ 📌 ระบบนี้เหมาะกับ: โรงเรียน / อบต / เทศบาล / หน่วยงานราชการ ที่ต้องการระบบจองรถแบบง่าย แต่ใช้งานได้จริง #ระบบจองรถ #ระบบราชการดิจิทัล #PHP #WebApp #พัฒนาองค์กร วิดีโอแนะนำระบบ : https://www.youtube.com/watch?v=_q0IRbgZMEo&t=46s

ระบบคลังรูปภาพกิจกรรมหน่วยงาน

📸 แจกฟรี! App Script ระบบคลังรูปภาพกิจกรรมหน่วยงาน 🎉 ใช้งานได้จริง พร้อมโค้ดครบ! เหมาะสำหรับโรงเรียน หน่วยงานราชการ องค์กรต่างๆ ❗ระบบนี้แจกให้ใช้ฟรีเพื่อการใช้งานเท่านั้น ไม่อนุญาตให้นำไปจำหน่ายทุกกรณี ⸻ 💡 มาดูภาพรวมการทำงานแบบเข้าใจง่าย: ระบบนี้เป็น Web Application ที่ใช้ * Google Sheets เป็นฐานข้อมูล * Google Apps Script เป็น Backend * และโค้ดใน Canvas คือหน้าบ้าน (Frontend) สำหรับแสดงผล ⸻ 🔹 ขั้นตอนการทำงานของระบบ 1️⃣ เริ่มโหลดหน้าเว็บ เมื่อเปิดลิงก์ ระบบจะแสดงหน้าเว็บ พร้อมไอคอนโหลด ขึ้นข้อความ “กำลังดึงข้อมูลกิจกรรม…” 2️⃣ ดึงข้อมูลจากหลังบ้าน หน้าเว็บจะเรียกคำสั่ง google.script.run.getGalleryData() เพื่อไปดึงข้อมูลจาก Google Sheets (แท็บ Gallery) 3️⃣ จัดการข้อมูลก่อนแสดงผล * แปลงลิงก์ Google Drive ให้แสดงรูปได้ทันที * ป้องกันอักขระพิเศษ * ตรวจสอบว่ามีข้อมูลหรือไม่ 4️⃣ แสดงผลเป็นหน้า Gallery สวยๆ * แสดงเป็นการ์ดรูปภาพ (Image Card) * มีชื่อกิจกรรม วันที่ หมวดหมู่ รายละเอียด * เรียงเป็น Grid รองรับมือถือ (Responsive) 5️⃣ คลิกดูรูปใหญ่ (Lightbox) * คลิกภาพเพื่อดูแบบเต็มจอ * ปิดได้ด้วยปุ่ม X / คลิกพื้นหลัง / กด ESC ⸻ 📌 สรุปสั้นๆ: เปิดเว็บ → ดึงข้อมูลจาก Sheet → แปลงลิงก์ → แสดงรูป → คลิกดูภาพใหญ่ได้ทันที ⸻