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

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

📢 แจกฟรี! 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 ตัวนี้ตอบโจทย์มากค่ะ ⸻

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

📸 แจกฟรี! 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 → แปลงลิงก์ → แสดงรูป → คลิกดูภาพใหญ่ได้ทันที ⸻

ระบบรับข้อร้องเรียน

ระบบรับข้อร้องเรียน (Complaint System) ด้วย App Script ใช้งานได้จริง 💬📩 ใครกำลังมองหาระบบรับเรื่องร้องเรียนแบบง่ายๆ แต่ครบจบในตัวเดียว ห้ามพลาดเลยค่ะ 👇 🔥 จุดเด่นของระบบนี้ ✅ ใช้งานผ่านหน้าเว็บ (รองรับมือถือ/คอม) ✅ บันทึกข้อมูลลง Google Sheets อัตโนมัติ ✅ แจ้งเตือนเข้า Telegram ทันที ✅ ไม่ต้องรีเฟรชหน้าเว็บ (UX ลื่นมาก) ✅ พร้อมใช้งาน + แก้ไขต่อยอดได้ ❌ ไม่อนุญาตให้นำไปจำหน่าย ❌ ⸻ 💡 ภาพรวมการทำงานของระบบ (เข้าใจง่ายใน 3 ส่วน) 🖥️ 1. Frontend (หน้าเว็บ) • ฟอร์มกรอกข้อมูล: ชื่อผู้แจ้ง, ช่องทางติดต่อ, หัวข้อ, รายละเอียด • ออกแบบด้วย Tailwind CSS (Responsive ใช้ได้ทุกอุปกรณ์) • กดส่งแล้วไม่ต้องรีเฟรชหน้า (ใช้ google.script.run) • มี Loading + ป้องกันการกดซ้ำ ⚙️ 2. Backend (App Script) • ใช้ doGet() แสดงหน้าเว็บ • ฟังก์ชัน submitComplaint() 👉 บันทึกข้อมูลลง Google Sheets 👉 สร้างหัวตารางอัตโนมัติ 👉 เก็บ Timestamp เวลาไทย • หลังบันทึกเสร็จ → ส่งแจ้งเตือนทันที 📲 3. ระบบแจ้งเตือน (Telegram Bot) • ส่งข้อมูลผ่าน Telegram Bot API • จัดรูปแบบข้อความให้อ่านง่าย (มีไอคอน/ตัวหนา) • ผู้ดูแลได้รับแจ้งเตือนแบบ Real-time ⸻ 🔄 Workflow การทำงาน ผู้ใช้กรอกฟอร์ม → กดส่ง ➡️ ระบบบันทึกลง Google Sheets ➡️ แจ้งเตือนเข้า Telegram ➡️ ผู้ใช้เห็น Pop-up แจ้งว่าส่งสำเร็จ ⸻ 🎯 เหมาะสำหรับ • โรงเรียน / หน่วยงานราชการ • อบต. / เทศบาล • องค์กรที่ต้องการรับ Feedback / ร้องเรียน • คนที่อยากเริ่มต้นทำระบบด้วย App Script ⸻ 💬 ใครนำไปใช้แล้ว มารีวิวให้ฟังได้นะคะ 😊

เก็บคะแนนแบบทดสอบ

ระบบนี้สร้างจาก Canva AI ในการอบรม "สร้างสื่อการสอนอัจฉริยะด้วย Canva แบบไม่ต้องเขียนโค้ด" สามารถนำไปปรับใช้กับการทำแบบทดสอบออนไลน์ของครูได้เลย ใช้งานง่าย เก็บคะแนนอัตโนมัติ เหมาะกับการทำข้อสอบ/กิจกรรมออนไลน์| เงื่อนไขการใช้งาน แจกเพื่อการเรียนการสอนเท่านั้น ❌ ห้ามนำไปทำขายหรือใช้ในเชิงพาณิชย์เด็ดขาด จะทำวิดีโอสอนการทำไปใช้งานให้ภายหลัง วิธีการทำสำเนาและนำไปใช้งาน 1. แก้ไขไฟล์ index.html บรรทัดที่ 440 2. แก้ไขแบบทดสอบ

DQ Challenge Game ม.6 (Interactive Quiz)

DQ Challenge Game ม.6 (Interactive Quiz) 🎉 ปีการศึกษานี้ถ้าจะทำเกมตอบคำถามแบบเล่นเป็นทีมในห้องเรียน — ครูนุ่มมี App Script ให้ใช้ฟรี ทุกคนสามารถดาวน์โหลดไปแก้ไขต่อได้เลย 💡 ฟีเจอร์สำคัญ เก็บข้อมูลผู้เล่น: คำนำหน้า / ชื่อ / นามสกุล / เลขที่ / ชั้น (ม.6/1–ม.6/11) — ใส่ได้ทีมละไม่เกิน 4 คน จับเวลา/โหมดเล่นเป็นทีม (10 ข้อ สถานการณ์ DQ) คำตอบเป็น 8 หมวด DQ: Digital Identity, Digital Use, Digital Safety, Digital Security, Digital Emotional Intelligence, Digital Communication, Digital Literacy, Digital Rights ให้คะแนนอัตโนมัติ (ถูกคำตอบ = 1 คะแนน) รวมสูงสุด 10 คะแนน และสรุปผลคะแนนทีมท้ายเกม ส่งออกผลลัพธ์เป็น Google Sheet เพื่อจัดเกรด/สถิติได้ทันที ไฟล์สคริปต์สามารถแก้ไขโค้ด เพิ่มคำถาม หรือเปลี่ยนเวลาได้เต็มที่ — ใช้งานต่อได้ทั้งในห้องเรียนและกิจกรรมแข่งขัน 🎨 เหมาะสำหรับ คุณครูผู้สอน ม.6 ต้องการทำกิจกรรมในคาบเรียน อาจารย์แนะแนว หรือ ทีมกิจกรรมโรงเรียน ใครอยากทดลองออกแบบเกม DQ แบบกลุ่ม 🔓 สิทธิการใช้งาน แจกฟรี ใช้เพื่อการศึกษา ไม่อนุญาตให้ทำขายทุกกรณี ปรับแต่ง-แจกต่อได้ตามสะดวก (กรุณาให้เครดิตเล็กๆ ถ้านำไปแชร์ต่อจะดีมากค่า)

กระดานข้อความสด (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 แล้วแชร์ลิงก์ให้ทุกคนเข้ามาพิมพ์ข้อความบนบอร์ดได้เลย 🎨✨