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

ระบบสร้างใบงาน/เอกสารประกอบการสอน

📚 แจกฟรี! ระบบสร้างใบงานและเอกสารประกอบการสอนด้วย AI สำหรับคุณครู คุณครูที่กำลังมองหาตัวช่วยในการจัดทำสื่อการสอน ลองใช้ระบบนี้ได้เลยค่ะ 💻 ระบบสร้างใบงานและเอกสารประกอบการสอนด้วย AI ที่ช่วยให้คุณครูสร้างเนื้อหาได้ง่ายขึ้น ลดเวลาในการเตรียมเอกสาร และนำเนื้อหาที่ได้ไปปรับใช้ให้เหมาะสมกับผู้เรียนได้ทันที ✨ ระบบนี้ทำอะไรได้บ้าง? - สร้างใบงานสำหรับนักเรียน - สร้างแบบทดสอบตามหัวข้อที่ต้องการ - สร้างสรุปเนื้อหาประกอบการสอน - กำหนดระดับชั้นและหัวข้อเนื้อหาได้ - ใช้ AI ช่วยสร้างเนื้อหาสำหรับนำไปต่อยอด - คัดลอกเนื้อหาที่สร้างขึ้นไปใช้งานได้สะดวก - บันทึกประวัติเอกสารลง Google Sheets ได้ 🛠️ พัฒนาด้วยเทคโนโลยีอะไร? ระบบทำงานร่วมกับ Google Workspace โดยใช้ Google Apps Script, HTML, Tailwind CSS, Gemini API และ Google Sheets เป็นส่วนสำคัญในการทำงาน จึงสามารถนำไปใช้งานผ่านเว็บแอปได้โดยไม่ต้องเช่าเว็บเซิร์ฟเวอร์เพิ่มเติม คุณครูที่สนใจสามารถนำไปศึกษาวิธีติดตั้งและตั้งค่าเพื่อใช้งานได้ตามขั้นตอนที่กำหนด เงื่อนไขการใช้งาน - แจกฟรีเพื่อการศึกษาและนำไปประยุกต์ใช้งาน - ไม่อนุญาตให้นำไฟล์หรือระบบไปจำหน่ายต่อ ไม่ว่าจะเป็นการขายโดยตรงหรือรวมไปกับชุดโปรแกรมอื่นเพื่อแสวงหากำไร หวังว่าจะเป็นอีกหนึ่งเครื่องมือที่ช่วยให้คุณครูทำงานได้สะดวกขึ้น และมีเวลาออกแบบการเรียนรู้ให้กับนักเรียนมากยิ่งขึ้นนะคะ ❤️ ขั้นตอนการติดตั้งและใช้งาน 1. เตรียม Google Sheets สร้างสเปรดชีตสำหรับจัดเก็บประวัติเอกสาร 2. ตั้งค่า Google Apps Script เปิด Apps Script จาก Google Sheets แล้วนำโค้ด Code.gs และ index.html ไปใส่ให้ครบ 3. ตั้งค่า Gemini API เข้า Google AI Studio เลือก Get API key สร้าง API Key และนำไปตั้งค่าในระบบ โดยเก็บคีย์ไว้เป็นความลับ 4. Deploy เป็น Web App ตั้งค่าการเผยแพร่และสิทธิ์การเข้าถึงให้เหมาะสม 5. อนุญาตสิทธิ์การใช้งาน ยืนยันสิทธิ์ Google ตามที่ระบบร้องขอ 6. เริ่มใช้งาน เปิด URL ของ Web App เพื่อสร้างเอกสารและบันทึกประวัติลง Google Sheets #CodeHub #KruNoomDevTech #AIเพื่อการศึกษา #GeminiAI #GoogleAppsScript #สร้างใบงานด้วยAI #สื่อการสอน #เทคโนโลยีการศึกษา

ระบบบันทึกและติดตามการบ้าน

แจกฟรี! Google Apps Script ระบบบันทึกและติดตามการบ้าน 📚 ครูนุ่มพัฒนาระบบบันทึกการบ้านแบบง่าย ๆ โดยใช้ Google Apps Script + Google Sheets ช่วยให้ครูและนักเรียนสามารถบันทึก ติดตาม และตรวจสอบรายการการบ้านได้สะดวกมากขึ้น ไม่ต้องติดตั้งโปรแกรมเพิ่มเติม และสามารถนำไปปรับใช้กับห้องเรียนหรือโรงเรียนได้เลย ✨ ความสามารถของระบบ • บันทึกรหัสวิชาและชื่อวิชา • บันทึกหัวข้อการบ้าน • ระบุชื่อครูผู้สอน • กำหนดวันส่งการบ้าน • แนบลิงก์หรือรายละเอียดเพิ่มเติม • แสดงรายการการบ้านในรูปแบบการ์ด • ค้นหาการบ้านได้ • กรองรายการตามรายวิชา • แจ้งเตือนสถานะการบ้านที่เลยกำหนดส่ง • รายการที่เลยกำหนดจะแสดงสถานะเป็นสีแดง • เพิ่มรายการการบ้านผ่านหน้าต่าง Modal • ข้อมูลบันทึกลง Google Sheets แบบอัตโนมัติ • มีการบันทึกวันและเวลาที่เพิ่มข้อมูล • รองรับการใช้งานบนคอมพิวเตอร์และโทรศัพท์มือถือ 🔧 โครงสร้างระบบ ระบบแบ่งการทำงานออกเป็น 2 ส่วนหลัก 1. Frontend — `index.html` เป็นส่วนหน้าบ้านที่ผู้ใช้งานมองเห็น ทำหน้าที่แสดงรายการการบ้าน ค้นหา กรองรายวิชา และเพิ่มข้อมูลการบ้าน 2. Backend / API — `Code.gs` ทำหน้าที่เป็นตัวกลางระหว่างหน้าเว็บกับ Google Sheets เมื่อหน้าเว็บต้องการข้อมูล ระบบจะดึงข้อมูลจาก Google Sheets และจัดเรียงรายการใหม่ล่าสุดก่อน เมื่อมีการเพิ่มการบ้าน ระบบจะรับข้อมูลจากหน้าเว็บและบันทึกลง Google Sheets พร้อมประทับวันและเวลา 📊 Google Sheets ระบบจะใช้ Google Sheets เป็นฐานข้อมูลหลัก โดยสร้างชีตชื่อ `Homework` สำหรับเก็บข้อมูลต่าง ๆ เช่น รหัสวิชา | ชื่อวิชา | หัวข้อ | ครูผู้สอน | กำหนดส่ง | ลิงก์แนบ | วันที่บันทึก ⏰ ระบบติดตามกำหนดส่ง จุดที่น่าสนใจของระบบคือ ระบบสามารถนำวันกำหนดส่งมาเปรียบเทียบกับวันที่ปัจจุบันได้ หากการบ้านเลยกำหนดส่ง ระบบจะแสดงสถานะ “เลยกำหนดส่ง” เป็นสีแดง ทำให้มองเห็นรายการที่ต้องติดตามได้ง่ายขึ้น 🔗 วิธีเชื่อมต่อระบบ หลังจากนำ `Code.gs` ไป Deploy เป็น Google Apps Script Web App แล้ว ให้คัดลอก Web App URL จากนั้นเปิดไฟล์ `index.html` และนำ URL ไปใส่ในตัวแปร `const WEB_APP_URL = 'ใส่_URL_ของ_GOOGLE_APPS_SCRIPT_ที่นี่';` ตัวอย่าง `const WEB_APP_URL = 'https://script.google.com/macros/s/xxxxx/exec';` จากนั้นบันทึกไฟล์ ก็สามารถเชื่อมต่อ Frontend กับ Backend และเริ่มใช้งานระบบได้ทันที 🎁 แจกฟรี! ระบบนี้เหมาะสำหรับครูที่อยากเริ่มต้นทำระบบบันทึกการบ้านด้วย Google Apps Script และสามารถนำโค้ดไปศึกษา ปรับแต่ง และต่อยอดให้เหมาะกับห้องเรียนของตัวเองได้เลยค่ะ ไม่อนุญาตให้จำหน่าย อีกหนึ่งตัวอย่างของการนำ Google Apps Script มาพัฒนา Web App ใช้งานจริง โดยไม่ต้องมี Server หรือ Database แบบเสียค่าใช้จ่ายเพิ่มเติม

ระบบเช็คอินผู้มาติดต่อราชการ พร้อมถ่ายรูปและบันทึกเวลาเข้า-ออก

แจกฟรี! Google Apps Script ระบบเช็คอินผู้มาติดต่อราชการ 📋📸 ใครกำลังมองหาระบบลงทะเบียนผู้มาติดต่อราชการแบบไม่ต้องใช้สมุดลงชื่อแบบเดิม วันนี้ครูนุ่มนำระบบมาแจกฟรีค่ะ ระบบนี้พัฒนาด้วย Google Apps Script (GAS) ใช้ Google Sheets เป็นฐานข้อมูล และ Google Drive สำหรับจัดเก็บรูปภาพ สามารถนำไปปรับใช้กับโรงเรียน หน่วยงานราชการ หรือสถานศึกษาได้ ✨ ความสามารถของระบบ • ลงทะเบียนผู้มาติดต่อเข้า (Check-In) • ถ่ายรูปผู้มาติดต่อผ่านกล้องมือถือ • บันทึกชื่อ-สกุล • บันทึกเลขบัตรประชาชนหรือเบอร์โทรศัพท์ • ระบุแผนก/หน่วยงานที่ต้องการติดต่อ • ระบุวัตถุประสงค์ในการมาติดต่อ • บันทึกวันและเวลาเข้าอัตโนมัติ • จัดเก็บรูปภาพไว้ใน Google Drive • บันทึกข้อมูลลง Google Sheets • ลงทะเบียนออก (Check-Out) ด้วยเลขบัตรประชาชนหรือเบอร์โทรศัพท์ • บันทึกเวลาออกอัตโนมัติ • เปลี่ยนสถานะจาก IN → OUT • เจ้าหน้าที่สามารถตรวจสอบข้อมูลจาก Google Sheets ได้แบบเรียลไทม์ • รองรับการใช้งานผ่านโทรศัพท์มือถือ 🔄 ภาพรวมการทำงาน ผู้มาติดต่อเดินทางมาถึง ↓ เปิด Web App ↓ เลือก “ลงทะเบียนเข้า” ↓ ถ่ายรูป + กรอกข้อมูล ↓ ระบบบันทึกข้อมูลลง Google Sheets ↓ ระหว่างติดต่อ เจ้าหน้าที่สามารถตรวจสอบข้อมูลได้ ↓ เมื่อเดินทางกลับ เลือก “ลงทะเบียนออก” ↓ กรอกเลขบัตรประชาชน/เบอร์โทรศัพท์ ↓ ระบบบันทึกเวลาออกและเปลี่ยนสถานะเป็น OUT 🛠 เทคโนโลยีที่ใช้ Google Apps Script Google Sheets Google Drive HTML JavaScript Tailwind CSS 🎁 แจกฟรี! เหมาะสำหรับครู บุคลากรทางการศึกษา และหน่วยงานราชการที่ต้องการทดลองเปลี่ยนการลงทะเบียนแบบกระดาษให้เป็นระบบดิจิทัล 📌 วิธีนำไปใช้งาน หลังจากนำโค้ดไปติดตั้งแล้ว ให้ทำการ Deploy เป็น Web App และนำ URL ของ Web App ที่ได้ไปใส่ในไฟล์ `index.html` บรรทัดที่ 155 เพื่อเชื่อมต่อระบบกับ Google Apps Script สามารถนำไปปรับแต่งเพิ่มเติมให้เหมาะกับหน่วยงานของตัวเองได้เลยค่ะ ไม่อนุญาตให้จำหน่าย

ระบบ Google Login (Apps Script)

🎁 แจกฟรี! เทมเพลตระบบ Google Login ด้วย Google Apps Script ใครกำลังพัฒนา Web App ด้วย Google Apps Script และอยากเพิ่มระบบ “Login with Google” ให้กับเว็บไซต์ ครูนุ่มมีเทมเพลตมาแจกฟรีค่ะ ระบบนี้ใช้ Google Identity Services (GIS) ทำงานร่วมกับ Google Apps Script (GAS) โดยออกแบบให้มีการตรวจสอบ ID Token ที่ฝั่ง Backend ก่อนนำข้อมูลผู้ใช้งานไปใช้งานต่อ 🔄 ภาพรวมการทำงาน ผู้ใช้เปิด Web App ↓ 🔐 แสดงปุ่ม Sign in with Google ↓ 👤 ผู้ใช้เลือกบัญชี Google ↓ 🎫 Google ส่ง ID Token กลับมา ↓ 📤 ส่ง Token ไปตรวจสอบที่ Backend ↓ 🛡️ code.gs ตรวจสอบ Token กับ Google ↓ ✅ ผ่านการตรวจสอบ ↓ 📋 ส่งข้อมูลชื่อ อีเมล และรูปโปรไฟล์กลับมา ↓ 🚀 นำข้อมูลไปใช้งานต่อในระบบ 🛡️ จุดสำคัญของระบบ เราไม่ควรรับข้อมูลจากหน้าเว็บแล้วเชื่อทันที แต่ควรส่ง ID Token ไปตรวจสอบที่ฝั่ง Backend ก่อน เพื่อให้ Google เป็นผู้ยืนยันว่า • Token นี้ถูกต้องหรือไม่ • Token หมดอายุแล้วหรือยัง • Token ถูกสร้างมาสำหรับ Client ID ของระบบเราหรือไม่ เมื่อผ่านการตรวจสอบแล้ว จึงค่อยนำข้อมูลผู้ใช้งานไปใช้ในระบบ 💡 และที่สำคัญคือ สามารถนำแนวคิดนี้ไปต่อยอดได้อีกเยอะมาก เช่น 🔹 ตรวจสอบอีเมลกับ Google Sheets 🔹 จำกัดเฉพาะสมาชิกในองค์กร 🔹 กำหนดสิทธิ์ Admin / User 🔹 สร้างระบบสมาชิก 🔹 เชื่อมต่อฐานข้อมูลหรือ Google Sheets 🔹 นำไปใช้กับ Web App อื่น ๆ ที่ต้องมีระบบ Login 📦 เหมาะสำหรับ ครูที่กำลังสร้างระบบด้วย Google Apps Script นักพัฒนา Web App ผู้ที่ต้องการเรียนรู้การทำ Google Login หรือคนที่อยากมี Template สำหรับนำไปต่อยอดระบบของตัวเอง 📥 ดาวน์โหลดฟรีได้ที่ระบบ CodeHub นำไปศึกษา ปรับแต่ง และพัฒนาต่อได้เลยค่ะ ⚠️ ไม่อนุญาตให้นำเทมเพลตไปจำหน่าย ใครกำลังทำ Web App ด้วย Google Apps Script ลองนำไปต่อยอดกันได้เลยค่ะ

ระบบจองคิวพบครูแนะแนว/ครูที่ปรึกษาออนไลน์

📌 แจกฟรี! ระบบจองคิวพบครูแนะแนว / ครูที่ปรึกษา อีกหนึ่งระบบเล็ก ๆ ที่ช่วยจัดการ “การนัดหมายระหว่างนักเรียนกับครู” ให้เป็นระบบมากขึ้น โดยใช้ Google Apps Script + Google Sheets ทำงานร่วมกัน 💻 ระบบออกแบบเป็น Web App ใช้งานง่าย รองรับทั้งฝั่งนักเรียนและครู/เจ้าหน้าที่ 👨‍🎓 ฝั่งนักเรียน • กรอกข้อมูลผู้จอง • เลือกครูที่ต้องการพบ • เลือกวันที่และเวลา • ระบุหัวข้อที่ต้องการปรึกษา • ป้องกันการจองซ้ำในช่วงเวลาเดียวกัน • แสดงผลสรุปการจองหลังทำรายการ 👩‍🏫 ฝั่งครู / เจ้าหน้าที่ • Login ด้วย PIN • Dashboard สรุปจำนวนการจอง • ตรวจสอบรายการนัดหมาย • ดูรายละเอียดนักเรียนและเรื่องที่ต้องการปรึกษา • เปลี่ยนสถานะ ยืนยัน / ยกเลิก / เสร็จสิ้น • ดึงข้อมูลล่าสุดจาก Google Sheets ⚙️ เบื้องหลังระบบ HTML + Tailwind CSS + JavaScript เชื่อมต่อ Google Apps Script ใช้ Google Sheets เป็นฐานข้อมูล จุดเด่นคือไม่ต้องเช่า Hosting หรือสร้าง Database Server ให้ยุ่งยาก เหมาะสำหรับโรงเรียนที่ต้องการนำไปปรับใช้กับระบบนัดหมายครูแนะแนว ครูที่ปรึกษา หรือการให้คำปรึกษานักเรียน 🎁 แจกฟรีสำหรับนำไปศึกษาและพัฒนาต่อยอด ดาวน์โหลดได้ที่ CodeHub 👉 codehub.krudevtech.com ⚠️ เงื่อนไขการใช้งาน ระบบนี้จัดทำขึ้นเพื่อแบ่งปันและการศึกษา ❌ ไม่อนุญาตให้นำไปจำหน่าย ❌ ไม่อนุญาตให้นำไปขายต่อในรูปแบบใด ๆ ✅ สามารถนำไปศึกษา ปรับแต่ง และพัฒนาต่อยอดเพื่อใช้งานในสถานศึกษาได้ หวังว่าจะเป็นอีกหนึ่งระบบที่ช่วยให้คุณครูทำงานง่ายขึ้น และเป็นตัวอย่างสำหรับคนที่กำลังเรียนรู้การพัฒนา Web App ด้วย Google Apps Script ค่ะ ❤️ #GoogleAppsScript #GoogleSheets #WebApp #ระบบจองคิว #ระบบโรงเรียน #ครูแนะแนว #ครูที่ปรึกษา #แจกฟรี #CodeHub #KruDevTech

ระบบบันทึกการใช้งานห้องพยาบาล

แจกฟรี! ระบบบันทึกการใช้งานห้องพยาบาล สำหรับโรงเรียน 🏥💻 เบื้องหลังการพัฒนาระบบครั้งนี้ เริ่มต้นจากการใช้ AiPASS กับโมเดล Claude Sonnet เพื่อช่วยคิดโครงสร้างและพัฒนาระบบ แต่สุดท้ายก็ยังต้องกลับมาจบงานด้วย Claude Sonnet Pro ส่วนตัว เพื่อไล่ตรวจ แก้ไข ปรับ Logic และเก็บรายละเอียดของระบบให้พร้อมใช้งานมากขึ้น อีกหนึ่งระบบที่พัฒนาขึ้นมาเพื่อช่วยโรงเรียนจัดเก็บข้อมูลการใช้งานห้องพยาบาลให้เป็นระบบมากขึ้น ระบบนี้ใช้ Google Apps Script + Google Sheets เป็น Backend และฐานข้อมูล สามารถนำไปปรับใช้กับบริบทของแต่ละโรงเรียนได้ ภายในระบบมีแนวคิดสำหรับการจัดการข้อมูล เช่น • บันทึกการเข้ารับบริการห้องพยาบาล • ข้อมูลนักเรียน • อาการและการปฐมพยาบาล • การให้ยาและจัดการ Stock ยา • การพักห้องพยาบาล • การติดต่อผู้ปกครอง • ประวัติการใช้บริการ • Dashboard และสถิติ • รายงานข้อมูล • ระบบกำหนดสิทธิ์ผู้ใช้งาน • Audit Log สำหรับตรวจสอบการทำงาน สิ่งที่อยากแชร์คือ AI ช่วยให้การสร้างระบบเร็วขึ้นมาก แต่การทำให้ “ระบบใช้งานได้จริง” ยังต้องอาศัยคนพัฒนาในการวางโครงสร้าง ตรวจสอบ และแก้ปัญหาที่เกิดขึ้นระหว่างทาง 📥 ดาวน์โหลดฟรีในระบบ CodeHub ระบบนี้แจกฟรีเพื่อการศึกษาและพัฒนางานในสถานศึกษา ❌ ไม่อนุญาตให้นำระบบไปจำหน่าย ❌ ไม่อนุญาตให้นำไปขายต่อหรือเรียกเก็บค่าดาวน์โหลด ✅ สามารถนำไปศึกษา ปรับแต่ง และพัฒนาต่อยอดให้เหมาะกับโรงเรียนของตนเองได้ ถ้าระบบนี้มีประโยชน์ ฝากแชร์ต่อให้ครูและโรงเรียนที่กำลังมองหาระบบจัดการห้องพยาบาลด้วยนะคะ