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

ระบบบันทึกการประชุมออนไลน์

📋 แจกฟรี App Script “ระบบบันทึกการประชุมออนไลน์” ใช้งานผ่าน Google Sheets พร้อมระบบจัดการข้อมูลครบจบในตัว! ระบบนี้ถูกออกแบบให้เป็น Web Application แบบหน้าเดียว (Single Page Application - SPA) ทำงานบน Google Workspace โดยใช้ Google Apps Script (GAS) เชื่อมต่อกับ Google Sheets แบบ Serverless ไม่ต้องเช่า Hosting ไม่ต้องใช้ Firebase หรือ SQL ติดตั้งง่าย ใช้งานได้ทันที 💡 ✨ ฟีเจอร์เด่นภายในระบบ ✅ บันทึกข้อมูลการประชุมออนไลน์ ✅ แก้ไข / ลบ / ดูรายละเอียดข้อมูลย้อนหลัง ✅ Dashboard สรุปสถิติการประชุม ✅ ค้นหาและกรองข้อมูลได้ทันที ✅ รองรับ Action Items และลิงก์เอกสารประกอบ ✅ แจ้งเตือนสถานะการทำงานด้วย Toast Notification ✅ Responsive รองรับมือถือและคอมพิวเตอร์ ✅ ใช้ Tailwind CSS + Phosphor Icons ✅ โหลดข้อมูลแบบ Real-time ไม่ต้อง Refresh หน้าเว็บ 📌 โครงสร้างระบบ 🔹 Frontend - index.html - ใช้ Tailwind CSS ออกแบบ UI - เชื่อม Backend ด้วย google.script.run 🔹 Backend - code.gs (Google Apps Script) - จัดการ CRUD และ Logic ทั้งหมด 🔹 Database - Google Sheets - เก็บข้อมูลการประชุมทั้งหมดแบบตาราง 📊 ฟีเจอร์การจัดการข้อมูล (CRUD) ➕ Create : เพิ่มบันทึกการประชุม 👀 Read : ดูรายละเอียดการประชุม ✏️ Update : แก้ไขข้อมูลเดิม 🗑️ Delete : ลบข้อมูลพร้อมระบบยืนยันก่อนลบ 📌 เหมาะสำหรับ 🏫 โรงเรียน 🏢 หน่วยงานราชการ 🏛️ อบต. / เทศบาล 🎓 มหาวิทยาลัย 👥 องค์กรและทีมงานต่างๆ ⚡ จุดเด่นสำคัญ ใช้ google.script.run เชื่อมต่อ GAS โดยตรง ไม่ต้องตั้งค่า API เพิ่ม ไม่ต้องกังวลเรื่อง CORS ติดตั้งง่าย มือใหม่ก็ใช้งานได้ 🔒 สำหรับใช้งานและศึกษาพัฒนาเพิ่มเติม ❌ ไม่อนุญาตให้นำไปจำหน่ายทุกกรณี

ระบบจองห้องประชุมออนไลน์

📢 แจกฟรี App Script “ระบบจองห้องประชุมออนไลน์” ดาวน์โหลดได้ในระบบ CodeHub เท่านั้น ❌ ไม่อนุญาตให้นำไปจำหน่ายต่อ ระบบนี้ถูกออกแบบให้เป็น “เว็บแอปพลิเคชันหน้าเดียว (SPA)” ใช้งานง่าย รองรับการจองห้องประชุมแบบออนไลน์ เชื่อมต่อกับ Google Sheets โดยตรง ไม่ต้องมี Hosting เพิ่ม ใช้งานผ่าน Google Apps Script ได้ทันที ✨ จุดเด่นของระบบ ✅ จองห้องประชุมผ่านหน้าเว็บ ✅ แสดงผลแบบปฏิทินด้วย FullCalendar ✅ ป้องกันเวลาจองซ้ำอัตโนมัติ ✅ แจ้งเตือนเมื่อเวลาทับซ้อน ✅ รีเฟรชข้อมูลทันทีแบบไม่ต้องโหลดหน้าใหม่ ✅ ใช้งานร่วมกับ Google Sheets ได้ทันที ✅ ดู แก้ไข หรือลบข้อมูลผ่าน Sheets ได้สะดวก 🗂 โครงสร้างการทำงานของระบบ 1️⃣ Database : Google Sheets ใช้เก็บข้อมูลการจองทั้งหมด พร้อมสร้างชีตอัตโนมัติเมื่อเริ่มใช้งานครั้งแรก 2️⃣ Backend : Google Apps Script (Code.gs) ทำหน้าที่เป็นสมองของระบบ รับ-ส่งข้อมูล ตรวจสอบเวลาจองซ้ำ และบันทึกข้อมูลลง Sheets 3️⃣ Frontend : index.html ออกแบบด้วย HTML + Tailwind CSS + FullCalendar ใช้งานง่าย สวยงาม รองรับการดูตารางจองแบบปฏิทิน 📌 ความสามารถสำคัญ 🔹 เช็คเวลาทับซ้อนก่อนบันทึก 🔹 แยกสีห้องประชุมแต่ละห้อง 🔹 คลิกดูรายละเอียดการจองได้ 🔹 แจ้งเตือนการบันทึกสำเร็จแบบ Toast Notification 🔹 รองรับการทำงานแบบ Real-time UX 🏢 เหมาะสำหรับหน่วยงาน ✅ โรงเรียน / สถานศึกษา ✅ อบต. / เทศบาล / อบจ. ✅ หน่วยงานราชการ ✅ มหาวิทยาลัย ✅ โรงพยาบาล / สาธารณสุข ✅ บริษัทเอกชน ✅ องค์กรที่มีการใช้ห้องประชุมหลายห้อง 💡 แจกเพื่อการศึกษาและใช้งานภายในองค์กร ❌ ไม่อนุญาตให้นำไปจำหน่ายต่อทุกกรณี

ระบบส่งงานออนไลน์

🎁 แจกฟรีสำหรับสมาชิก VIP ในระบบ Code Hub 🎉 ไม่อนุญาตให้นำไปจำหน่ายทุกกรณี 📚 ระบบส่งงานออนไลน์ พร้อมโค้ดครบทั้ง Frontend + Backend ใช้งานได้จริง รองรับการส่งงานผ่าน Google Drive และ Google Sheets 🚀 📊 ภาพรวมและคู่มือการใช้งานระบบส่งงาน ระบบส่งงานออนไลน์นี้ถูกออกแบบมาในสถาปัตยกรรมแบบ API (Client-Server) โดยแยกส่วนหน้าบ้านและหลังบ้านออกจากกันอย่างชัดเจน เพื่อให้มีความยืดหยุ่นในการนำไปใช้งานและรองรับผู้ใช้งานจำนวนมากได้ดีขึ้น 🏗️ 1. โครงสร้างและการทำงานของระบบ (System Architecture) ระบบประกอบด้วย 2 ส่วนหลักที่ทำงานประสานกัน: 🌐 1.1 ฝั่งหน้าบ้าน (Frontend - index.html) เป็นหน้าเว็บไซต์ที่นักเรียนและครูใช้โต้ตอบ (User Interface) รูปแบบ: Single Page Application (SPA) สลับหน้าได้โดยไม่ต้องโหลดเว็บใหม่ เทคโนโลยี: HTML, CSS, JavaScript (รองรับมือถือด้วย Bootstrap 5) การเชื่อมต่อ: ใช้ Fetch API ส่งข้อมูลรูปแบบ JSON ไปยัง Backend ฟีเจอร์: ✅ ส่งงาน: แปลงไฟล์ที่อัปโหลดเป็น Base64 และส่งไปพร้อมกับข้อมูลฟอร์ม ✅ เช็คสถานะ: ส่งคำค้นหาไปถาม Backend และนำผลลัพธ์มาแสดงผลแบบ Card ✅ แดชบอร์ด: ดึงข้อมูลสถิติมาวาดเป็นกราฟด้วย Chart.js ⚙️ 1.2 ฝั่งหลังบ้าน (Backend - Code.gs) ทำหน้าที่เป็น REST API คอยรับคำสั่ง จัดการไฟล์ และบันทึกข้อมูล เทคโนโลยี: Google Apps Script (GAS) 📂 ระบบจัดการไฟล์ (Google Drive) • เมื่อมีไฟล์ส่งเข้ามา ระบบจะสร้างโฟลเดอร์แยกตาม “ห้องเรียน” อัตโนมัติ • ภายในโฟลเดอร์ห้องเรียน จะสร้างซับโฟลเดอร์แยกตาม “ชื่อชิ้นงาน” ให้อีกชั้น • ตั้งชื่อไฟล์ใหม่ให้อ่านง่าย: รหัสนักเรียน_ชื่อ_ชิ้นงาน.นามสกุล 📑 ระบบฐานข้อมูล (Google Sheets) ทำงานแบบ Dual Save (บันทึก 2 ที่) • บันทึกลงชีตหลัก SubmissionLogs • บันทึกลงชีตชื่อชิ้นงานแยกอัตโนมัติ เพื่อให้ครูตรวจงานง่ายขึ้น 🚀 2. ขั้นตอนการติดตั้งและนำไปใช้งาน (Deployment Guide) 📌 ขั้นตอนที่ 1: เตรียมพื้นที่จัดเก็บ (Drive & Sheets) • สร้างโฟลเดอร์หลักใน Google Drive • คัดลอก Folder ID • สร้าง Google Sheets สำหรับฐานข้อมูล • คัดลอก Spreadsheet ID 📌 ขั้นตอนที่ 2: ตั้งค่าฝั่ง Backend (Google Apps Script) • เปิด Extensions > Apps Script • วางโค้ดไฟล์ Code.gs • ใส่ Folder ID และ Spreadsheet ID • กดบันทึก 📌 ขั้นตอนที่ 3: Deploy ระบบ Backend • Deploy > New Deployment • เลือก Web App • ตั้งค่า Anyone • กด Deploy และอนุญาตสิทธิ์ • คัดลอก Web App URL 📌 ขั้นตอนที่ 4: ตั้งค่าฝั่ง Frontend • เปิดไฟล์ index.html • ใส่ WEB_APP_URL • บันทึกไฟล์และนำไปใช้งานได้ทันที 🌐 รองรับการนำขึ้นใช้งานผ่าน GitHub Pages / Netlify / Google Sites 💡 3. คำแนะนำเพิ่มเติมสำหรับการดูแลระบบ ✅ เพิ่มชิ้นงานใหม่ได้ง่าย เพียงเพิ่ม ใน index.html ระบบจะสร้างโฟลเดอร์และชีทให้อัตโนมัติ ✅ ครูสามารถตรวจงานและอัปเดตคะแนนผ่าน Google Sheets ได้ทันที นักเรียนตรวจสอบสถานะล่าสุดได้แบบ Real-time 📥 ดาวน์โหลดได้เฉพาะในระบบ Code Hub สำหรับสมาชิก VIP เท่านั้น ⚠️ ไม่อนุญาตให้นำไปจำหน่าย ดัดแปลงเพื่อขาย หรือแจกต่อเชิงพาณิชย์ทุกกรณี :::

ระบบกรอกพิกัดการเยี่ยมบ้านนักเรียน

📍 แจกฟรี Template App Script “ระบบกรอกพิกัดการเยี่ยมบ้านนักเรียน” พร้อมระบบแผนที่ + Dashboard + เชื่อม Google Sheets ❌ ไม่อนุญาตให้นำไปจำหน่ายต่อ เปิดเทอมนี้…โรงเรียนมี “ระบบเก็บพิกัดบ้านนักเรียน” กันหรือยัง? 🏡✨ Template นี้ออกแบบมาเพื่อช่วยให้ครูสามารถบันทึกข้อมูลการเยี่ยมบ้านนักเรียนได้สะดวก รวดเร็ว และดูข้อมูลได้แบบเรียลไทม์ ผ่าน Web Application ใช้งานได้ทั้งมือถือและคอมพิวเตอร์ 🔹 ฟีเจอร์เด่นภายในระบบ ✅ ฟอร์มบันทึกข้อมูลนักเรียนครบถ้วน - รหัสนักเรียน - ชื่อ-สกุล - ระดับชั้น / ห้องเรียน - เบอร์โทร (ตรวจสอบเลข 10 หลักอัตโนมัติ) - ข้อมูลที่อยู่พื้นฐาน 🗺️ ระบบแผนที่ปักหมุดบ้านนักเรียน (Leaflet Map) - ดึง GPS ตำแหน่งปัจจุบันอัตโนมัติ - ลากหมุดปักตำแหน่งบ้านได้เอง (Drag & Drop) 💾 บันทึกข้อมูลลง Google Sheets ผ่าน Google Apps Script ทำงานแบบ Background ไม่ต้องรีเฟรชหน้าเว็บ 📊 ระบบแสดงผลข้อมูลและแผนที่รวม - Filter ตามระดับชั้น / ห้องเรียน - แสดงหมุดนักเรียนบนแผนที่แบบ Real-time - Auto Zoom ครอบคลุมทุกพิกัดในห้องเรียน 📋 ตารางข้อมูลแบบมืออาชีพด้วย DataTables - ค้นหาได้ - เรียงข้อมูลได้ - แบ่งหน้าอัตโนมัติ 🔍 ระบบดูรายละเอียดนักเรียน พร้อมปุ่ม “นำทางด้วย Google Maps” ไปยังบ้านนักเรียนทันที 🚗 📈 Dashboard สรุปข้อมูลอัตโนมัติด้วย Chart.js - กราฟจำนวนนักเรียนแต่ละระดับชั้น - กราฟสัดส่วนนักเรียนตามตำบล ⚙️ รองรับการทำงานทั้งแบบเชื่อมฐานข้อมูลจริง และ Mock Data แม้ยังไม่ได้เชื่อม Google Apps Script ก็สามารถทดลองใช้งาน UI ได้ทันที 💡 เหมาะสำหรับ - ระบบเยี่ยมบ้านนักเรียน - งานดูแลช่วยเหลือนักเรียน - งานฝ่ายปกครอง - งานแนะแนวและติดตามนักเรียน การนำไปใช้งาน * เมื่อ Deploy เรียบร้อยแล้วให้นำลิงค์เว็บแอป มาใส่ในไฟล์ index.html บรรทัดที่ 392 const SCRIPT_URL ='xxx'

ระบบจัดเก็บข้อมูล Tablet โครงการ Anywhere Anytime

📱✨ แจกฟรี App Script “ระบบจัดการ Tablet โครงการ Anywhere Anytime” ไม่อนุญาตให้จำหน่าย ดาวน์โหลดได้ในระบบ CodeHub เปิดเทอมนี้ โรงเรียนไหนกำลังจัดการแท็บเล็ตนักเรียนอยู่ ระบบนี้ช่วยได้ 💻📚 จัดเก็บข้อมูลแท็บเล็ตนักเรียนได้อย่างเป็นระบบ ใช้งานผ่านเว็บได้ทั้งมือถือและคอมพิวเตอร์ ✅ บันทึกข้อมูลนักเรียนและแท็บเล็ต ✅ จัดการสถานะการใช้งาน/ซ่อม/คืนเครื่อง ✅ แสดงข้อมูลแบบเรียลไทม์ผ่าน Google Sheets ✅ เพิ่ม ลบ ดูข้อมูลได้ทันที ✅ ใช้งานง่าย รองรับทั้งครูและแอดมิน ✅ ฟรี! ทำงานบน Google Apps Script ไม่ต้องมีเซิร์ฟเวอร์ 🔄 ระบบทำงานในรูปแบบ Web App เชื่อมต่อ Google Sheets โดยแบ่งการทำงานเป็น 3 ส่วนหลัก 📌 Frontend (index.html) ฟอร์มกรอกข้อมูล + ตารางแสดงผล ออกแบบด้วย Tailwind CSS รองรับทุกอุปกรณ์ แจ้งเตือนสวยงามด้วย SweetAlert2 📌 Backend (Code.gs) จัดการบันทึก ดึงข้อมูล และลบข้อมูลผ่าน Google Apps Script ทำงานแบบไม่ต้องรีเฟรชหน้าเว็บ 📌 Database (Google Sheets) เก็บข้อมูลแบบออนไลน์ ดูข้อมูลต่อยอดหรือสรุปรายงานได้ทันที 🚀 จุดเด่นของระบบ • ใช้งานฟรีบนโครงสร้างพื้นฐานของ Google • เปิดใช้งานได้ทุกที่ผ่าน Browser • ข้อมูลอัปเดตแบบ Real-time • เหมาะสำหรับโรงเรียนในโครงการ Anywhere Anytime

ระบบปฏิทินข่าวประชาสัมพันธ์ (PR Content Planner)

📢 แจกฟรี App Script ระบบปฏิทินข่าวประชาสัมพันธ์ (PR Content Planner) จัดการแผนคอนเทนต์ได้ครบ จบในระบบเดียว ✨ 📌 ไม่อนุญาตให้จำหน่าย หมดปัญหาวางแผนโพสต์กระจัดกระจาย ลืมโพสต์ หรือทีมงานสื่อสารไม่ตรงกัน เพราะระบบนี้ออกแบบมาเพื่อช่วยวางแผนและบริหารคอนเทนต์ประชาสัมพันธ์แบบมืออาชีพ ผ่านหน้าเว็บเดียว เชื่อมต่อ Google Calendar อัตโนมัติด้วย Google Apps Script (GAS) 🔹 ฟีเจอร์หลักของระบบ ✅ สร้างแผนโพสต์ข่าวประชาสัมพันธ์ได้ง่าย ✅ ดูตารางคอนเทนต์ทั้งหมดในหน้าเดียว ✅ แก้ไข / ลบ แผนงานได้ทันที ✅ ซิงค์ข้อมูลกับ Google Calendar อัตโนมัติ ✅ แจ้งเตือนก่อนถึงเวลาลงโพสต์ ✅ จัดเก็บข้อมูลเป็นระบบผ่าน Google Sheets ⚙️ การทำงานของระบบ 🖥 Frontend (หน้าเว็บ) ใช้สำหรับกรอกข้อมูลโพสต์ เช่น วันที่ เวลา แพลตฟอร์ม และหัวข้อข่าว พร้อมแสดงตารางสรุปแผนงานทั้งหมด 🧠 Backend (Google Apps Script) ทำหน้าที่รับคำสั่งจากหน้าเว็บ ประมวลผลข้อมูล และเชื่อมต่อบริการต่าง ๆ ของ Google 📊 Database & Notification ข้อมูลทั้งหมดถูกเก็บใน Google Sheets และสร้าง Event ใน Google Calendar พร้อมแจ้งเตือนอัตโนมัติ 🚀 Workflow การทำงาน 📌 เปิดหน้าเว็บ → โหลดข้อมูลจาก Google Sheets มาแสดงทันที 📌 สร้างแผนใหม่ → ระบบสร้าง Event ใน Google Calendar พร้อมตั้งแจ้งเตือน 📌 แก้ไขข้อมูล → อัปเดตทั้ง Sheet และ Calendar อัตโนมัติ 📌 ลบรายการ → ลบทั้งฐานข้อมูลและปฏิทินพร้อมกัน 🔔 ระบบแจ้งเตือนอัจฉริยะ ⏰ Popup แจ้งเตือนล่วงหน้า 30 นาที 📧 Email แจ้งเตือนล่วงหน้า 1 วัน ✨ จุดเด่นของระบบ ✔ Google Sheet เป็นฐานข้อมูลกลาง ดูง่าย จัดการสะดวก ✔ ทุกการเปลี่ยนแปลง Sync กับ Calendar ทันที ✔ ลดความผิดพลาดจากการลืมโพสต์ ✔ เหมาะสำหรับโรงเรียน องค์กร หน่วยงาน หรือทีมประชาสัมพันธ์ เปิดเทอมนี้ หรือช่วงกิจกรรมแน่น ๆ มีระบบช่วยวางแผนคอนเทนต์กันหรือยัง 😊