เว็บความรู้ Active Learning กับระบบแนะนำกิจกรรมการเรียนรู้ ที่ย้ายมาเป็น static site

สมาคมเจออะไรอยู่#

เว็บความรู้ของสมาคมวิชาการด้านการศึกษา รวบรวมวิธีจัดการเรียนรู้เชิงรุก (Active Learning) สำหรับการสอนออนไลน์ไว้ในที่เดียว มีรูปแบบกิจกรรม 17 แบบ วิธีวัดและประเมินผล 14 แบบ และเครื่องมือดิจิทัลที่ใช้สอนออนไลน์อีก 19 ตัว

ทีมเนื้อหาต้องเขียนและแก้บทความได้เองผ่าน WordPress ส่วนผู้สอนที่เข้ามาอ่าน ต้องหากิจกรรมที่เหมาะกับห้องเรียนของตัวเองได้ โดยไม่ต้องไล่อ่านทีละหน้า

สิ่งที่สร้าง#

ทีมเนื้อหาเขียนใน WordPress หน้าเว็บดึงไปแสดงเอง ส่วนผู้สอนอ่านเนื้อหาและใช้ระบบแนะนำบนเว็บเดียวกัน

เว็บความรู้ เนื้อหามาจาก WordPress#

หน้าเว็บทำด้วย Laravel กับ Tailwind CSS แต่เนื้อหาทั้งหมดอยู่ใน WordPress ฝั่ง Laravel ใช้ Corcel อ่านบทความ หมวด และรูปจากฐานข้อมูลของ WordPress ตรง ๆ ทีมเนื้อหาจึงเขียนบทความในหลังบ้าน WordPress แล้วหน้าเว็บก็แสดงตามดีไซน์ของเว็บนี้ โดยไม่ต้องทำธีม WordPress

หน้าแรก: เมนูแยกเป็นการสอนออนไลน์ เครื่องมือดิจิทัล และเกี่ยวกับโครงการ

หน้ากิจกรรมแต่ละแบบ: นิยาม ความสำคัญ และขั้นตอนจัดการเรียนรู้ ทั้งหมดเขียนใน WordPress

ระบบแนะนำกิจกรรมการเรียนรู้#

ผู้สอนตอบคำถาม 7 ข้อ แล้วระบบเลือกกิจกรรมที่เข้ากับคำตอบให้

1. อยากให้ผู้เรียนไปถึงระดับไหนตาม Bloom's Taxonomy ตั้งแต่จำ เข้าใจ ไปจนถึงสร้างสิ่งใหม่
2. ทักษะในศตวรรษที่ 21 ที่อยากฝึก
3. ทำกิจกรรมเดี่ยวหรือกลุ่ม
4. ใช้เวลาในคาบเดียวหรือหลายสัปดาห์
5. ผู้สอนใช้เทคโนโลยีได้ระดับไหน
6. กิจกรรมซับซ้อนแค่ไหน
7. ผู้เรียนที่มีแค่สมาร์ทโฟนต้องร่วมได้ด้วยหรือเปล่า

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

ขั้นที่ 2 จาก 7: เลือกทักษะได้หลายข้อ ข้อที่เลือกแล้วเป็นสีน้ำเงิน

ผลลัพธ์: กิจกรรมที่ตรงกับคำตอบทั้ง 7 ข้อ กดต่อไปอ่านรายละเอียดของแต่ละกิจกรรมได้

หมดสัญญาแล้ว แต่เว็บยังมีคนอ่าน#

ต่อมาสัญญาดูแลเว็บสิ้นสุดลง แต่เว็บยังมีคนค้นเจอจาก Google และเข้ามาอ่านทุกวัน ทีนี้ถ้าจะเปิดต่อในแบบเดิม ก็ต้องมีเซิร์ฟเวอร์ PHP, MySQL และ WordPress ที่ต้องคอยอัปเดตไม่ให้มีช่องโหว่ ขณะที่เนื้อหาไม่ได้เปลี่ยนแล้ว

เราจึงแปลงทั้งเว็บเป็น static site คือเหลือแค่ไฟล์ HTML, CSS, JavaScript และรูป ไม่มี PHP ไม่มีฐานข้อมูล วางบนโฮสต์ไหนก็เปิดได้

ขั้นตอนแปลงเว็บ: ดึงหน้าที่ render แล้วมาเก็บ แล้วแก้เฉพาะส่วนที่ต้องมีเซิร์ฟเวอร์

เราดึงหน้าที่เว็บเดิม render เสร็จแล้วมาใช้ แล้วแก้เฉพาะส่วนที่ยังต้องพึ่งเซิร์ฟเวอร์ จึงไม่ต้องเขียนหน้าเว็บใหม่ทั้งหมด

• ดึงทุกหน้า: wget --mirror ไล่ตามลิงก์ของเว็บเอง เก็บแต่ละหน้าเป็นไฟล์ .html หน้าที่ไม่มีลิงก์ไปถึงเราใส่รายชื่อเพิ่มเอง ได้มาทั้งหมด 57 หน้า
• เก็บรูปไว้กับเว็บ: รูปและไฟล์ 528 ไฟล์ที่เคยโหลดจากเซิร์ฟเวอร์ WordPress ดาวน์โหลดมาเก็บไว้ในเว็บ แล้วเปลี่ยนลิงก์เป็น path แบบ relative เว็บจึงเปิดได้จากโฟลเดอร์ไหนก็ได้ รวมถึงเปิดดูในเครื่อง
• ระบบแนะนำ: ของเดิมเป็น Livewire ซึ่งต้องคุยกับเซิร์ฟเวอร์ทุกครั้งที่กด เราย้ายตารางกำกับกับเงื่อนไขกรองมาเป็น JavaScript แบบบรรทัดต่อบรรทัด แล้วผูกหน้าจอด้วย Alpine.js คำตอบยังเก็บใน URL เหมือนเดิม กดย้อนกลับหรือส่งลิงก์ผลลัพธ์ต่อได้เหมือนเว็บเดิม
• CSS และ JavaScript: build ใหม่ด้วย Vite กับ Tailwind ให้เหลือเฉพาะ class ที่หน้าเว็บใช้จริง และเอา script ของ Livewire กับตัวเก็บ error ออก

ส่วนที่ยังโหลดจากข้างนอกมีแค่ YouTube, ช่องคอมเมนต์ Facebook และฟอนต์จาก Google Fonts

ฝากเว็บบน Cloudflare Pages#

พอเป็นไฟล์ล้วน จะวางบน shared hosting ที่มี cPanel หรือ DirectAdmin ก็ได้ ส่วนเราเลือก Cloudflare Pages เพราะไม่มีเซิร์ฟเวอร์ให้ดูแล และแพ็กเกจฟรีรับได้ถึง 20,000 ไฟล์ต่อเว็บ ไฟล์ละไม่เกิน 25 MiB เว็บนี้ใช้ไม่ถึงพันไฟล์ ขนาดรวมประมาณ 80 MB

npx wrangler pages deploy site --project-name active-learning --branch main

โดเมนยังเป็นของลูกค้าเหมือนเดิม แต่เราไม่ให้ลูกค้าชี้ไปที่ Cloudflare Pages ตรง ๆ ลูกค้าตั้ง CNAME มาที่ชื่อของเรา (active-learning.origin.phattarachai.dev) ครั้งเดียว แล้วชื่อนั้นค่อยชี้ต่อไปที่ Pages เราจึงเป็นคนเลือกว่าชื่อนั้นจะไปที่ไหน วันหนึ่งถ้าเราต้องย้ายเว็บไปที่อื่น ก็แก้แค่ record ของเรา ลูกค้าไม่ต้องแก้ DNS อีก

ตอนตั้งค่ามีสามเรื่องที่ไม่ทำตามนี้แล้วเว็บจะเปิดไม่ขึ้นหรือทำงานเพี้ยน

• record ฝั่งเราต้องเป็น DNS only (เมฆสีเทา): ถ้าเปิด proxy ไว้ โดเมนที่ไม่ได้อยู่บน Cloudflare จะได้ Error 1001
• เพิ่มโดเมนของลูกค้าใน Pages ก่อน แล้วค่อยให้ลูกค้าเปลี่ยน DNS ไม่อย่างนั้นช่วงแรกจะได้ Error 522
• ใส่ 404.html ไว้ด้วย: ถ้าไม่มี Pages จะถือว่าเป็นเว็บแบบ SPA แล้วส่งหน้าแรกกลับไปพร้อมสถานะ 200 ทุก URL ที่ไม่มีอยู่จริง ส่วน URL เก่าที่ย้ายที่ใส่ไว้ใน _redirects

ส่งมอบให้ลูกค้าดูแลเองได้#

นอกจากเตรียม Pages ไว้แล้ว เรายังทำไฟล์ทั้งเว็บเป็น zip ให้ลูกค้า พร้อมคู่มือภาษาไทย ในนั้นมีสองทาง

1. ตั้ง CNAME มาที่ชื่อของเรา แล้วให้เราดูแลต่อ
2. อัปโหลดขึ้นโฮสต์ของลูกค้าเอง ในชุดไฟล์มี .htaccess ที่บังคับ HTTPS ทำให้ URL ไม่ต้องมี .html และตั้ง cache ให้ไฟล์ไว้แล้ว

ลูกค้าจะเลือกทางไหนก็ได้ และย้ายออกเมื่อไหร่ก็ได้ โดยไม่ต้องพึ่งเรา

ผลลัพธ์#

• 2564 เปิดเว็บความรู้พร้อมระบบแนะนำกิจกรรม ทีมเนื้อหาเขียนบทความใน WordPress
• 2569 แปลงเป็น static site ทุกหน้า ทุกรูป และระบบแนะนำทำงานได้ครบโดยไม่มี PHP หรือฐานข้อมูล URL เดิมที่ Google เก็บไว้ยังเปิดได้ เราปิดเซิร์ฟเวอร์ WordPress แล้ว และเตรียมชุดไฟล์กับคู่มือส่งมอบไว้ให้ลูกค้าแล้ว

ตอนเริ่ม เว็บเขียนด้วย Laravel ใช้ Corcel อ่านเนื้อหาจาก WordPress ทำระบบแนะนำด้วย Livewire และจัดหน้าด้วย Tailwind CSS ฉบับ static ใช้ Alpine.js กับ Vite แทนส่วนที่ต้องมีเซิร์ฟเวอร์ และฝากไว้บน Cloudflare Pages