1. โจทย์ คือ อยากได้เว็บใหม่ที่ผู้ใช้ต้องสามารถตรวจสอบคอร์สเรียนได้(คอร์สหลังๆ ผมส่งให้ทางเมล) และต้องทำให้เสร็จภายใน 2 สัปดาห์ เพราะผมติดสอน และต้องเปิดคอร์สใหม่ และต้องย้ายอีเมลของ user จากระบบเดิมกว่า 10,000 อีเมล มาฐานข้อมูลใหม่ และยังมีระบบ API เดิมที่ยังย้ายไม่ได้แต่ต้องใช้ต่อเนื่องด้วย คือย้ายบางส่วนก่อน บางส่วนจะทยอยย้าย
2. เว็บเดิมเขียนด้วย PHP (ใช้ Yii Framework 1.x) ใช้มามากกว่า 10 ปี เดิมใช้ฐานข้อมูล MySQL เวอร์ชัน 5.x เพิ่งอัปเกรดเป็น 8.x เมื่อต้นปี 2025 นี้
3. ส่วนเวอร์ชันของ PHP เว็บเดิม เวอร์ชัน 5.x เพิ่งอัปเกรดมาเป็น 7.4 เมื่อต้นปี 2025 แต่ก็ end of life ไปแล้ว ตอนแรกจะอัปเกรดไป 8.x แต่ก็ไม่ได้ เพราะระบบ API ฟรีที่ใช้สอน ยังเป็น Laravel เวอร์ชันเก่ามาก (5.x)
4. ตัดสินใจเขียนใหม่ดีกว่า โดยเลือกฟีเจอร์ที่จำเป็นก่อน เลือกใช้ Next.js 15.x ล่าสุด เขียนแบบ full-stack และเนื่องจากต้องรองรับ SEO ด้วย ก็ต้องเขียนโค้ดในส่วนของฟังก์ชัน generateMetadata จาก Database และทำ openGraph เพื่อรองรับ Social Media Sharing เช่น facebook ด้วย
5. ในส่วนหน้าตาของเว็บใหม่ ใช้ shadcn ui (Tailwind CSS 4.x) https://ui.shadcn.com/ เพื่อสร้าง React UI Component เพื่อความรวดเร็ว และไม่ต้องตกแต่งอะไรมากนัก
6. ย้ายฐานข้อมูลบางส่วนจาก MySQL จากระบบเดิม (ติดตั้งเอง ไม่ใช้ Docker) มาเป็น Supabase (Postgres) https://supabase.com/ แทน ไม่ต้องติดตั้งเอง ตอนนี้ใช้เวอร์ชันฟรีอยู่
7. ส่วนระบบ Authentication ในเว็บ ใช้ของ Supabase Auth เช่นเดียวกัน ไม่ต้องออกแรงเยอะ แต่ต้องย้ายอีเมลกว่า 10,000 records จาก MySQL มายัง Supabase ใช้วิธีการสร้างตารางผู้ใช้ชั่วคราว (temp table) แล้วเขียน script import ไปยัง Supabase Auth อีกที (ตอนนี้คนที่เคยซื้อคอร์สกับผมไปแล้ว สามารถเข้าไป reset รหัสผ่านได้นะครับ)
8. ในหน้าเพจระบบ Authentication ใช้ https://supabase.com/ui ซึ่งบอกว่าสบายมาก เอามาปรับแต่งนิดหน่อยก็ได้หน้าเพจ Sign In, Sign Up, Forgot Password, Update Profile ที่เขียนไว้ใช้กับ Next.js ได้เลย ไม่ต้องเขียนเอง แค่ปรับแก้เล็กน้อย
9. Icon ที่เป็น brand ดังๆ ที่อยู่ในหน้าแรกใช้ของ https://simpleicons.org
10. ระบบส่งเมลใช้ของ https://resend.com/ ตอนนี้ก็ยังใช้เวอร์ชันฟรีอยู่ ใช้ฟรี 100 เมลต่อวัน และ 3,000 เมลต่อเดือน ส่วน React Component หน้าตาของเมลที่ส่งหาทุกคน ใช้ของ https://react.email/
11. ในส่วนของ Hosting ใช้ของ https://vercel.com/ และก็ฟรีอยู่เช่นเดียวกัน มี https ฟรี เอา domain เก่ามาใช้ได้เลย ผมเก็บโค้ดไว้ที่ GitLab ก็ให้ Vercel ทำ CI/CD ดึง production branch มา Deploy Production ให้เลยครับ (นั่งจิบกาแฟรอ)
สรุป ณ ตอนนี้เว็บใหม่ที่ทุกคนเห็นยังใช้เงิน 0 บาท และมีฟีเจอร์หลักๆ ที่ต้องการแล้ว และตอนนี้กำลังทยอยอัปเดตข้อมูลคอร์สต่างๆ ให้ผู้เรียนได้มองเห็นที่หน้า Dashboard อยู่ครับ
ใครสนใจเยี่ยมชมได้ที่นี่ครับ https://www.codingthailand.com/
หรือมีอะไรสอบถามก็ถามมาได้ครับ
Views: 8