Full Stack Developer Bootcamp (30 ชั่วโมง)

เป้าหมาย: ผู้เรียนสามารถสร้างเว็บแอปพลิเคชันที่มีระบบสมาชิก, จัดการข้อมูล (CRUD), เชื่อมต่อฐานข้อมูล และนำขึ้นเซิร์ฟเวอร์จริงได้

🛠️ Tech Stack ที่ใช้
Frontend: React.js + Tailwind CSS (เพื่อความไวในการจัดหน้า)

Backend: Node.js + Express

Database: MongoDB (NoSQL ที่เข้าใจง่ายสำหรับมือใหม่)

โมดูลที่ 1: ปูพื้นฐานเว็บสมัยใหม่ (Modern Web Foundation) - 5 ชั่วโมง
ปรับพื้นฐาน HTML/CSS และเน้น JavaScript ยุคใหม่ที่จำเป็นสำหรับ React

Web Structure & Styling (2 ชม.)

HTML5 Tags ที่จำเป็น (div, section, input, form)

แนะนำ Tailwind CSS (Utility-first) แทนการเขียน CSS เอง เพื่อลดเวลาจัดหน้า

Workshop: สร้างหน้า Landing Page สวยๆ 1 หน้าด้วย Tailwind

JavaScript ES6+ for React (3 ชม.)

Let vs Const

Arrow Functions () => {}

Destructuring (การแกะค่าออกจาก Array/Object)

Map & Filter (การวนลูปข้อมูลแบบใหม่)

Async/Await (การทำงานแบบรอข้อมูล)

โมดูลที่ 2: สร้างหน้าบ้านด้วย React (Frontend Mastery) - 8 ชั่วโมง
เปลี่ยนจากเว็บนิ่งๆ ให้เป็นเว็บแอปพลิเคชัน

React Basics (2 ชม.)

Concept ของ Component (มองทุกอย่างเป็นชิ้นส่วน)

JSX Syntax (เขียน HTML ใน JS)

Props (การส่งข้อมูลระหว่าง Component)

State Management (3 ชม.)

useState Hook: หัวใจของ React (เปลี่ยนค่าแล้วหน้าจอเปลี่ยนตาม)

Handling Events (onClick, onChange)

Workshop: ทำระบบ Counter และ To-Do List แบบยังไม่ต่อฐานข้อมูล

React Router & Navigation (3 ชม.)

การทำเว็บหลายหน้า (Single Page Application)

useEffect Hook: การดึงข้อมูลเมื่อเปิดหน้าเว็บ

โมดูลที่ 3: สร้างหลังบ้านและ API (Backend with Node.js) - 6 ชั่วโมง
สร้างเซิร์ฟเวอร์เพื่อคุยกับหน้าบ้านและฐานข้อมูล

Node.js & Express Setup (2 ชม.)

การสร้าง Server ง่ายๆ ด้วย Express

เข้าใจ HTTP Methods (GET, POST, PUT, DELETE)

ทดสอบ API ด้วย Postman หรือ Thunder Client

Building RESTful API (4 ชม.)

การรับค่าจากหน้าบ้าน (Req.body, Req.params)

การส่งค่ากลับไป (Response JSON)

Workshop: สร้าง API สำหรับระบบสินค้า (ดึงสินค้า, เพิ่มสินค้า, ลบสินค้า)

โมดูลที่ 4: ฐานข้อมูลและการเชื่อมต่อ (Database & Integration) - 6 ชั่วโมง
เก็บข้อมูลลงถังจริง และเชื่อมหน้าบ้านเข้ากับหลังบ้าน

MongoDB & Mongoose (2.5 ชม.)

สมัคร MongoDB Atlas (Database บน Cloud ฟรี)

เชื่อมต่อ Node.js กับ MongoDB ด้วย Mongoose

สร้าง Schema (โครงสร้างข้อมูล) และ Model

Full Stack Integration (3.5 ชม.)

ใช้ Axios ใน React เพื่อยิง Request ไปหา Backend ของเรา

แก้ปัญหา CORS (Cross-Origin)

Workshop: นำ To-Do List หรือ ระบบสินค้า มาต่อกับ Database จริง (ปิดคอมเปิดใหม่ข้อมูลไม่หาย)

โมดูลที่ 5: โปรเจกต์จริงและระบบสมาชิก (Real World Project) - 5 ชั่วโมง
ประกอบร่างทุกอย่าง และเพิ่มความปลอดภัย

Workshop: Web Application (3 ชม.)

โจทย์: ระบบจัดการคอร์สเรียนออนไลน์ (Admin เพิ่มคอร์สได้ / User ดูรายชื่อคอร์สได้)

ทำระบบ CRUD (Create, Read, Update, Delete) ให้สมบูรณ์

Authentication Basics (Concept) (2 ชม.)

(แบบย่อ) การทำ Login/Register

การเก็บ Password (Hash) และการใช้ JWT (JSON Web Token) เบื้องต้น

หมายเหตุ: ใน 30 ชม. อาจจะเน้น Concept และใช้ Library ช่วยเพื่อให้ทันเวลา

โมดูลที่ 6: การนำขึ้นใช้งานจริง (Deployment) - (ไม่นับชั่วโมงรวมใน Workshop)
แถมท้าย: ทำเว็บให้คนทั้งโลกเห็น

Deployment

Frontend: ฝากไว้ที่ Vercel (ฟรีและง่ายมาก)

Backend: ฝากไว้ที่ Render.com หรือ Railway.app

Database: อยู่บน MongoDB Atlas แล้ว

การตั้งค่า Environment Variables (.env) เพื่อซ่อนรหัสผ่าน

💡 คำแนะนำสำหรับการสอน Full Stack ใน 30 ชม.
เน้น Data Flow: สิ่งที่ยากที่สุดสำหรับมือใหม่คือ "ข้อมูลไหลไปทางไหน?" (จาก Form -> State -> Axios -> API -> Database). ให้เขียนแผนภาพบนกระดานบ่อยๆ

Copy-Paste บางส่วน: โค้ดส่วนที่เป็น Config (การตั้งค่า Server, การต่อ Database) อาจเตรียม Boilerplate ไว้ให้ผู้เรียน เพื่อประหยัดเวลา แล้วไปเน้น Logic การทำงานแทน

เครื่องมือต้องพร้อม:

VS Code + Extension (ES7 React snippets, Prettier)

Node.js (LTS Version)

Git (สอนคำสั่งพื้นฐาน git add, commit, push ไว้ใช้ตอน Deploy)