รายละเอียดระบบ

🎁 แจกฟรีสำหรับสมาชิก 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 เท่านั้น

⚠️ ไม่อนุญาตให้นำไปจำหน่าย ดัดแปลงเพื่อขาย หรือแจกต่อเชิงพาณิชย์ทุกกรณี
:::