descriptionProject Documentation

Benchmark, AI Log
& Checklist

เอกสารประกอบการนำเสนอโครงงานเว็บไซต์คณะวิทยาศาสตร์การกีฬา มหาวิทยาลัยบูรพา ครอบคลุมการเปรียบเทียบเว็บไซต์ต้นแบบ บันทึกการใช้เครื่องมือ AI และการตรวจสอบข้อกำหนดของโจทย์

  • travel_exploreBenchmark 3 เว็บไซต์
  • smart_toyAI Log
  • task_altChecklist 9 หน้า
  • databaseSupabase
01 · Benchmark

เว็บไซต์ต้นแบบที่ใช้ศึกษา

ศึกษาโครงสร้างเมนู การนำเสนอข่าว และเส้นทางการรับสมัครของเว็บไซต์สถาบันการศึกษาด้านการกีฬา แล้วนำมาปรับใช้กับบริบทของคณะวิทยาศาสตร์การกีฬา มหาวิทยาลัยบูรพา

เว็บไซต์จุดที่ศึกษาสิ่งที่นำมาปรับใช้กับโครงงาน
คณะวิทยาศาสตร์การกีฬา มหาวิทยาลัยบูรพา
fss.buu.ac.th		 โครงสร้างข่าวและประกาศของคณะ การแยกหมวดข่าว ข้อมูลหลักสูตรและคณาจารย์ ตลอดจนช่องทางติดต่อ ใช้เป็นแหล่งอ้างอิงเนื้อหาจริง จัดกลุ่มเมนูใหม่ให้สั้นลง และเพิ่มระบบค้นหา/ปฏิทินที่เว็บต้นทางยังไม่มี
คณะพลศึกษา มหาวิทยาลัยศรีนครินทรวิโรฒ
pe.swu.ac.th		 การนำเสนอหลักสูตรและกิจกรรมนิสิตในหน้าแรก และการจัดลำดับข้อมูลสำหรับผู้สนใจเข้าศึกษา ปรับหน้าแรกให้มีปุ่มลัด (Quick Access) และประกาศด่วน เพื่อให้ผู้ใช้เข้าถึงข้อมูลที่ใช้บ่อยภายใน 3 คลิก
มหาวิทยาลัยการกีฬาแห่งชาติ
tnsu.ac.th		 การสื่อสารภาพลักษณ์องค์กรกีฬา การใช้ภาพขนาดใหญ่ และการเชื่อมโยงข่าวกีฬากับผลงานนักกีฬา พัฒนา Mood board ที่ผสานพลังการกีฬากับความน่าเชื่อถือทางวิชาการ และแยกหมวด “ข่าวกีฬา” ออกจาก “ข่าวสารคณะ” ผ่าน dropdown
เมนูหลักเหลือ 7 รายการ เข้าถึงข้อมูลสำคัญ ≤ 3 คลิก Mobile-first 390px ค้นหาภาษาไทย
02 · AI Log

บันทึกการใช้งานเครื่องมือ AI

ทุกครั้งที่ใช้ AI ช่วยงาน จะบันทึกวัตถุประสงค์ สิ่งที่ได้รับ และวิธีตรวจสอบก่อนนำขึ้นเว็บจริง เพื่อให้ทีมสามารถอธิบายที่มาของเนื้อหาและโค้ดได้

วันที่งานสิ่งที่ขอให้ AI ช่วยการตรวจสอบ / ปรับแก้โดยทีม
20 ต.ค. 2569 วิเคราะห์โจทย์ สรุปข้อกำหนดจากไฟล์โจทย์โปรเจกต์เป็นรายการหน้า ฟีเจอร์ และ Admin เทียบกับไฟล์ต้นฉบับทีละหัวข้อ และทำ checklist 9 หน้า
21 ต.ค. 2569 โครงสร้างเนื้อหา จัดกลุ่มเมนูใหม่จาก 9 เหลือ 7 รายการ และเสนอโครงหน้าแรก ตรวจกับผลสำรวจความสำคัญของเมนู ปรับชื่อเมนูให้สั้นและเข้าใจง่าย
21–22 ต.ค. 2569 เนื้อหาและภาพ เรียบเรียงข่าว หลักสูตร คณาจารย์ และทุนจากเอกสาร/ประกาศจริง ตรวจชื่อ ตำแหน่ง และลิงก์ต้นทางทุกครั้ง ไม่เพิ่มตัวเลขหรือกำหนดการที่ไม่มีในประกาศ
22 ต.ค. 2569 พัฒนา UI สร้าง Design system, responsive layout และองค์ประกอบหน้าเว็บ ทดสอบที่ 390 / 768 / 1024 / 1440px และแก้ปัญหา horizontal overflow
23 ต.ค. 2569 ระบบ Admin ออกแบบ CRUD ข่าว กิจกรรม คณาจารย์ ทุน คลังภาพ และหน้าข้อความ ทดสอบเพิ่ม/แก้/ลบ สถานะฉบับร่าง และการอัปโหลดรูปจริง
24 ต.ค. 2569 ฐานข้อมูล เชื่อม Supabase (ตาราง site_content, messages, Storage, Auth) ทดสอบสิทธิ์ RLS: anon อ่านเนื้อหา/ส่งข้อความได้ แต่เขียนเนื้อหาและอัปโหลดรูปไม่ได้
25 ต.ค. 2569 ทดสอบและแก้บั๊ก ตรวจ Console, Lighthouse และปัญหาตัวอักษรทับไอคอนในหน้า login แก้ specificity ของ CSS, วัดระยะไอคอนกับข้อความจริง และทดสอบซ้ำหลัง hard refresh
25 ต.ค. 2569 ปรับตามโจทย์รอบสุดท้าย เพิ่มประกาศด่วน ฟอร์มสมัครกิจกรรม กำหนดปิดรับ/ไฟล์แนบของทุน และประวัติอาจารย์ ทดสอบฟอร์มจริง บันทึกลงฐานข้อมูล และตรวจว่าผู้ดูแลเห็นใน Admin
25 ต.ค. 2569 ขึ้นออนไลน์ เขียนสคริปต์ deploy Cloudflare Pages ผ่าน API (เครื่องไม่มี Node/wrangler) ทดสอบ dry-run ก่อน แล้วตรวจทุกหน้าบน URL จริงว่า HTTP 200 และไม่มี asset หาย
25 ต.ค. 2569 ปรับความเร็ว (PageSpeed) วิเคราะห์ว่า FCP 22 วินาทีเกิดจากฟอนต์ไอคอน 3.8 MB และ CLS 0.35 เกิดจากส่วนหัว/ประกาศด่วนที่ JS ฉีดทีหลัง subset ไอคอนเหลือ 40 KB, self-host ฟอนต์, เปลี่ยนภาพ hero เป็น WebP, จองพื้นที่ล่วงหน้า แล้ววัดซ้ำจน CLS = 0
info
AI ใช้เป็นผู้ช่วยร่างและตรวจทานเท่านั้น เนื้อหาที่เผยแพร่ทุกชิ้นผ่านการตรวจสอบกับประกาศหรือเอกสารทางการของคณะฯ และมหาวิทยาลัยบูรพา
03 · Checklist

ตรวจสอบข้อกำหนดของโจทย์

สรุปว่าข้อกำหนดแต่ละข้อถูกทำให้อยู่หน้าใดหรือฟังก์ชันใด เพื่อใช้ตรวจก่อนนำเสนอ

check_circleหน้าบังคับ 9 หน้า

check_circleฟีเจอร์บังคับ 4 รายการ

  • checkค้นหาภาษาไทย — ข่าว ทุน หลักสูตร อาจารย์ และหน้าเว็บ
  • checkปฏิทินรายเดือน — คลิกวันเพื่อดูรายละเอียดและเพิ่มลง Google Calendar
  • checkฟอร์มติดต่อ/สมัครกิจกรรม — บันทึกฐานข้อมูลและแสดงใน Admin
  • checkโซเชียล — Facebook, YouTube, TikTok, LINE

check_circleฟีเจอร์เสริม (≥ 2)

  • checkสองภาษา — ไทย/อังกฤษ ทั้งหน้าแรก หลักสูตร และติดต่อ
  • checkแชทบอท FAQ — ชุดคำถาม–คำตอบ 14 ข้อ
  • checkแจ้งเตือนกิจกรรม — เพิ่มลง Google Calendar
  • checkระบบสมาชิก/ผู้ดูแล — ล็อกอิน Supabase Auth แยกสิทธิ์

check_circleระบบผู้ดูแล (Admin)

  • checkล็อกอินก่อนเข้าเสมอ — Supabase Auth (อีเมล/รหัสผ่าน)
  • checkCRUD + อัปโหลดรูป — ข่าว กิจกรรม คณาจารย์ ทุน คลังภาพ
  • checkฉบับร่าง/เผยแพร่ — พร้อมวันที่อัปเดตทุกครั้ง
  • checkข้อความ/ผู้สมัคร — กรองผู้สนใจสมัครและผู้สมัครกิจกรรม
  • checkแดชบอร์ด — สรุปจำนวนเนื้อหา ข้อความ และผู้สมัคร
  • checkคู่มือ Admin — 5 หัวข้อใน admin-guide.html

check_circleด้านเทคนิคและการเผยแพร่

  • checkฐานข้อมูลจริง — Supabase (Postgres + Storage + Auth) แก้แล้วผู้ชมเห็นทันที
  • checkURL ออนไลน์จริง — fss-buu.pages.dev (Cloudflare Pages)
  • checkโค้ดบน GitHub — สมาชิกทุกคนมี commit ของตนเอง
  • checkPageSpeed มือถือ — Performance 82 · CLS 0 · Accessibility/Best Practices/SEO 100 (เป้า ≥ 70)
  • checkAI Log — บันทึกทุกครั้งที่ใช้ AI ช่วยงาน
paletteMood Board & Style Guide menu_bookคู่มือผู้ดูแลระบบ homeกลับหน้าแรก