📘 Booklab — Website Design and Development
หลักสูตร Workshop 6 คาบ × 2 ชั่วโมง สำหรับสร้างเว็บแค็ตตาล็อกหนังสือ (Booklab) ด้วย Angular + NestJS + PostgreSQL + Prisma ตั้งแต่ศูนย์ พร้อมโค้ดตัวอย่างสำหรับดูและคัดลอกได้ทุกขั้นตอน
Node.js 24 LTS
Angular 22
NestJS 11
Prisma 6
PostgreSQL
Tailwind CSS 4
เลือกคาบที่ต้องการ
1
Day 1 — ตั้งค่าเครื่องมือ + สร้าง API ตัวแรก
เปิด http://localhost:3000/api/books แล้วเห็นข้อมูลหนังสือ
⏱ 120 นาที
2
Day 2 — PostgreSQL + Prisma — ให้ API ดึงข้อมูลจากฐานข้อมูลจริง
http://localhost:3000/api/books คืนข้อมูลจากฐานข้อมูลจริง ไม่ใช่ array ในโค้ด และค้นหาได้
⏱ 120 นาที
3
Day 3 — Angular พื้นฐาน — สร้างหน้าเว็บชิ้นแรก
หน้าเว็บที่แสดงการ์ดหนังสือเป็นรายการสวยงาม (ยังใช้ข้อมูลจำลอง ยังไม่ต่อ API)
⏱ 120 นาที
4
Day 4 — เชื่อมหน้าบ้านเข้ากับ API จริง
หน้าเว็บดึงข้อมูลจากฐานข้อมูลจริงผ่าน API พร้อมช่องค้นหา และจัดการสถานะกำลังโหลด / ผิดพลาด / ไม่พบข้อมูล ครบ
⏱ 120 นาที
5
Day 5 — หน้ารายละเอียด + เพิ่ม แก้ไข ลบ
ระบบที่จัดการข้อมูลได้ครบวงจร — ดู เพิ่ม แก้ ลบ
⏱ 120 นาที
6
Day 6 — ความปลอดภัย + ทบทวนภาพรวม
เข้าใจช่องโหว่พื้นฐานที่ระบบนี้ป้องกันให้อัตโนมัติ และทบทวนภาพรวมทั้งหลักสูตรผ่านแบบฝึกหัดเพิ่มเติม
⏱ 120 นาที
วิธีใช้เว็บนี้
- แต่ละหน้าคือใบงานหนึ่งคาบ อ่านเรียงจากบนลงล่างตามลำดับ ✅ คือสิ่งที่ต้องเห็นหลังทำเสร็จแต่ละขั้น
- กดปุ่ม Copy มุมขวาบนของกล่องโค้ดเพื่อคัดลอกไปวางได้ทันที
- กล่อง 💡 คือคำอธิบายเพิ่มเติม กล่อง ⚠️ คือจุดที่พลาดกันบ่อย อย่าข้าม