Road to Full Stack Developer

Section 1: ภาพรวม Full Stack Architecture

• บทบาทของ Client, API, Database และ Infrastructure ในระบบเว็บสมัยใหม่
• เปรียบเทียบ SPA + API แยกส่วน กับ Full Stack Framework อย่าง Next.js และเหตุผลที่หลักสูตรเลือก SPA + API
• การไหลของข้อมูลตั้งแต่ผู้ใช้กดปุ่มจนถึงฐานข้อมูล
• Lab: วาดแผนภาพสถาปัตยกรรมและ Flow การจองของ BookingNest

Section 2: เตรียมเครื่องมือและโครงสร้างโปรเจกต์

• ติดตั้งและจัดการเวอร์ชัน Node.js 24 LTS และ pnpm
• สร้าง Monorepo ด้วย pnpm Workspaces แยก apps และ packages
• ตั้งค่า ESLint, Prettier และ EditorConfig ให้ทีมใช้มาตรฐานเดียวกัน
• Lab: สร้างโครง apps/web, apps/api และ packages/shared ที่ Build ได้ทั้งหมด

Section 3: TypeScript สำหรับ Full Stack Developer

• Type, Interface, Union, Generic และ Utility Types ที่ใช้บ่อย
• ตั้งค่า tsconfig ให้เหมาะกับ Node.js และ Browser
• สิ่งที่เปลี่ยนใน TypeScript 6 และ 7 เช่น การเลิกรองรับ Target ES5 และ Native Compiler ที่ Build เร็วขึ้น
• Type Narrowing และการจัดการค่า null/undefined อย่างปลอดภัย
• Lab: กำหนด Type ของ Resource, Booking และ User แล้วใช้ร่วมกันทั้งสองฝั่ง

Section 4: Zod และ Shared Schema

• นิยาม Schema ครั้งเดียวแล้ว infer เป็น Type ให้ทั้งสองฝั่งใช้
• Validate ข้อมูลที่เข้าระบบและแปลง Error ให้อ่านง่าย
• จัด packages/shared ให้ import ได้จากทั้ง apps/web และ apps/api
• Lab: เขียน Zod Schema ของการจองพร้อมกฎวันเวลาและ Unit Test ด้วย Vitest

Section 5: Workshop Day 1: Git Workflow และ Monorepo ของ BookingNest

• Branching Strategy แบบเรียบง่ายสำหรับทีมเล็ก
• Conventional Commits และการเขียน Pull/Merge Request ที่ดี
• Workshop: รวมเครื่องมือทั้งหมดเข้า Monorepo ของ BookingNest และส่ง Pull Request แรก
• Workshop: ตรวจว่า Schema ใน packages/shared ผ่าน Test และ Lint ก่อน Merge

Section 6: หลักการออกแบบ RESTful API

• ตั้งชื่อ Resource และเลือก HTTP Method และ Status Code ให้ถูกต้อง
• Pagination, Filtering, Sorting และรูปแบบ Error Response มาตรฐาน
• API Versioning และเอกสาร API ด้วย OpenAPI
• Lab: ออกแบบ Endpoint ทั้งหมดของ Resource และ Booking ก่อนเขียนโค้ด

Section 7: Hono บน Node.js

• โครงสร้างแอป Routing, Middleware และ Context
• แยก Layer เป็น Route, Service และ Repository
• ใช้ Zod Validator กับ Request Body, Query และ Params
• Lab: สร้าง API ของ Resource พร้อม Validation จาก Shared Schema

Section 8: PostgreSQL 18 และ Prisma ORM 7

• ออกแบบ Schema ความสัมพันธ์ One-to-Many และ Many-to-Many
• Prisma Schema, Migration และ Seed Data
• สิ่งที่เปลี่ยนใน Prisma 7 ที่ Prisma Client ไม่พึ่ง Rust Query Engine แล้ว
• Lab: รัน PostgreSQL ใน Docker ทำ Migration และ Seed ห้องประชุมและรถส่วนกลาง

Section 9: การ Query อย่างมีประสิทธิภาพ

• Select เฉพาะ Field ที่ใช้, Include ความสัมพันธ์ และการหลีกเลี่ยง N+1 Query
• Transaction สำหรับงานที่ต้องสำเร็จพร้อมกัน
• สร้าง Index ให้ตรงกับรูปแบบการค้นหา
• Lab: วัดจำนวน Query ก่อนและหลังแก้ปัญหา N+1 ในหน้ารายการจอง

Section 10: Workshop Day 2: Error Handling, Logging และ API ของ BookingNest

• Global Error Handler และการแยก Error ฝั่งผู้ใช้กับฝั่งระบบ
• Structured Logging และ Request ID
• Workshop: พัฒนา API จัดการ Resource และ Booking ครบ CRUD ค้นหา และกรองตามวันที่
• Workshop: ทดสอบทุก Endpoint ด้วย HTTP Client และเปิดเอกสาร OpenAPI ให้ทีม Frontend

Section 11: แนวคิด Authentication สมัยใหม่

• เปรียบเทียบ Session, JWT และ Access/Refresh Token
• เก็บ Token ใน httpOnly Cookie เทียบกับ Local Storage และผลด้านความปลอดภัย
• Hash รหัสผ่านด้วย Argon2
• Lab: เลือกวิธียืนยันตัวตนของ BookingNest พร้อมเหตุผลด้านความปลอดภัย

Section 12: พัฒนา Login Flow แบบครบวงจร

• Register, Login, Refresh Token และ Logout
• Token Rotation และการเพิกถอน Refresh Token
• ตั้งค่า CORS และ Cookie (SameSite, Secure) ให้ Frontend เรียกใช้ได้อย่างปลอดภัย
• Lab: สร้าง Endpoint สมัครสมาชิกและเข้าสู่ระบบพร้อม Refresh Token แบบ Rotation

Section 13: Authorization แบบ Role-Based

• ออกแบบ Role และ Permission: User, Approver และ Admin
• Middleware ตรวจสิทธิ์ตาม Role
• ตรวจสิทธิ์ระดับข้อมูล เช่น แก้ไขได้เฉพาะการจองของตนเอง
• Lab: เพิ่ม API อนุมัติและปฏิเสธการจองสำหรับ Approver

Section 14: ความปลอดภัยของ API

• ความเสี่ยงตาม OWASP ที่เกี่ยวกับ API: Broken Access Control, Injection และ Security Misconfiguration
• Rate Limiting และ Security Headers
• จัดการ Secret ผ่าน Environment Variables
• Lab: ลองเจาะสิทธิ์ข้ามผู้ใช้แล้วปิดช่องโหว่ที่พบ

Section 15: Workshop Day 3: Testing สำหรับ API

• Unit Test ของ Service ด้วย Vitest
• Integration Test ของ Route โดยเรียกแอป Hono โดยตรงร่วมกับฐานข้อมูลทดสอบแยก
• วัด Code Coverage และเลือกว่าควรทดสอบอะไรก่อน
• Workshop: เขียนชุด Test ครอบคลุม Flow การจอง การอนุมัติ และสิทธิ์ทั้ง 3 ระดับ

Section 16: React 19 ที่นักพัฒนาต้องรู้

• Component, Props, State และการแยก Component ให้ดูแลง่าย
• Hook ที่ใช้บ่อย รวมถึง useActionState, useOptimistic และ useEffectEvent
• จัดโครงสร้างโฟลเดอร์แบบ Feature-based
• Lab: สร้าง Component รายการทรัพยากรและการ์ดการจอง

Section 17: Vite 8 และ Tailwind CSS v4

• โปรเจกต์ Vite 8 ที่ใช้ Rolldown เป็น Bundler และการตั้งค่า Proxy ไปยัง API
• Tailwind CSS v4 แนวคิด CSS-first Configuration และ Design Token ของโปรเจกต์
• สร้าง UI Component ที่ใช้ซ้ำได้และรองรับหน้าจอทุกขนาด
• Lab: วาง Layout หลักและ Design Token ของ BookingNest

Section 18: Routing และ Server State

• React Router สำหรับหน้า Public, หน้าที่ต้อง Login และหน้าตาม Role
• TanStack Query: Query, Mutation, Cache Invalidation และ Loading/Error State
• Optimistic Update เมื่อผู้ใช้สร้างหรือยกเลิกการจอง
• Lab: ดึงรายการทรัพยากรและการจองจาก API ด้วย TanStack Query

Section 19: Form และ Authentication ฝั่ง Client

• React Hook Form ร่วมกับ Zod Schema จาก packages/shared
• จัดการสถานะ Login และ Refresh Token อัตโนมัติ
• Redirect เมื่อ Session หมดอายุหรือไม่มีสิทธิ์
• Lab: สร้างฟอร์มจองที่ใช้กฎ Validation ชุดเดียวกับ API

Section 20: Workshop Day 4: หน้าจอ BookingNest และ E2E Test ด้วย Playwright

• เขียน Test จำลองผู้ใช้จริงตั้งแต่ Login จนจองสำเร็จ
• เตรียมข้อมูลทดสอบและรัน E2E แบบ Headless
• Workshop: พัฒนาหน้า Login, ค้นหาทรัพยากร, ปฏิทินการจอง, การจองของฉัน และหน้าอนุมัติ
• Workshop: เขียน E2E Test ของ Flow การจองและการอนุมัติ

Section 21: Docker สำหรับ Full Stack Application

• Dockerfile แบบ Multi-stage สำหรับ API (Node.js) และ Web (Static Build ผ่าน Nginx)
• Docker Compose สำหรับ Web, API และ PostgreSQL พร้อม Health Check
• จัดการ Environment Variables และ Secret แยกตามสภาพแวดล้อม
• Lab: รัน BookingNest ทั้งระบบด้วยคำสั่งเดียว

Section 22: เตรียมระบบสำหรับ Production

• รัน Migration อย่างปลอดภัยตอน Deploy
• Logging, Health Endpoint และ Graceful Shutdown
• Checklist ความปลอดภัยก่อนขึ้นระบบจริง
• Lab: ตรวจระบบตาม Checklist และแก้จุดที่ยังไม่ผ่าน

Section 23: CI/CD Pipeline เบื้องต้น

• Pipeline ขั้นตอน Lint, Test, Build และสร้าง Container Image
• Deploy ขึ้น Server หรือ Cloud ที่องค์กรใช้
• แนวทาง Rollback เมื่อ Deploy แล้วมีปัญหา
• Lab: ตั้ง Pipeline บน GitHub Actions หรือ GitLab CI ให้ Build และ Test อัตโนมัติ

Section 24: ออกแบบฟีเจอร์ใหม่ตั้งแต่ Database ถึง UI

• วิเคราะห์ Requirement ของฟีเจอร์ตรวจสอบการจองซ้อนเวลาและแจ้งเตือนผู้อนุมัติ
• ออกแบบ Constraint ในฐานข้อมูล การเปลี่ยนแปลง API และหน้าจอที่เกี่ยวข้อง
• วางแผน Test ที่ต้องเพิ่มในแต่ละชั้น
• Lab: เขียนแผนงานและแบ่งงานเป็น Pull Request ย่อย

Section 25: Master Workshop: BookingNest ครบทุกชั้น

• พัฒนาฟีเจอร์ตรวจสอบการจองซ้อนเวลาตั้งแต่ Constraint ในฐานข้อมูล, API จนถึง UI
• เพิ่ม Unit, API และ E2E Test ของฟีเจอร์ใหม่
• ส่งผ่าน Pipeline และ Deploy ระบบด้วย Docker Compose
• นำเสนอผลงานและทบทวนโค้ดร่วมกัน (Code Review)