สัปดาห์ที่ 1

แนะนำรายวิชา & Modern Web Stack (Vite, React, Hono, Supabase)

CLO1
📑 สารบัญ
📖 ทฤษฎี

ภาพรวมการพัฒนาเว็บแอปพลิเคชัน: เดิม vs Modern

การพัฒนาเว็บในอดีตมักพึ่งพารูปแบบ Traditional Server-Side Rendering เช่น PHP + MySQL + Apache ที่ทำงานบนเซิร์ฟเวอร์เดียว ทุก request ต้องผ่าน server กลางที่เดียว ทำให้เกิดปัญหาด้าน latency และการขยายระบบ (scaling) ทำได้ยาก

ในปัจจุบัน แนวทาง Modern Web Stack แยกส่วน Front-end และ Back-end ออกจากกันอย่างชัดเจน Front-end ใช้ React + Vite รันบนเบราว์เซอร์ ส่วน Back-end เป็น API ที่รันบน Cloudflare Workers ซึ่งเป็น Edge Computing ที่กระจายอยู่ทั่วโลก ข้อมูลถูกเก็บใน Supabase ซึ่งเป็น PostgreSQL Database บน cloud 

┌─────────────────────────────────────────────────────────────────────┐
│                    เปรียบเทียบ: เดิม vs Modern                        │
├─────────────────────────┬───────────────────────────────────────────┤
│   Traditional Stack     │          Modern Stack                     │
│  ─────────────────────  │  ───────────────────────────────────────  │
│  PHP + Apache           │  Hono API บน Cloudflare Workers          │
│  MySQL บน VPS          │  Supabase (PostgreSQL + Auth + Storage)   │
│  jQuery / Vanilla JS    │  React + Vite + TanStack                 │
│  HTML template จาก PHP  │  Single Page App (SPA) + REST API        │
│  Deploy บน shared host  │  Deploy ที่ Edge ทั่วโลก                 │
└─────────────────────────┴───────────────────────────────────────────┘

ความแตกต่างที่สำคัญคือ Modern Stack ทำให้แอปพลิเคชันโหลดเร็วขึ้น เนื่องจาก API รันอยู่ที่ Edge Node ที่ใกล้กับผู้ใช้ที่สุด แทนที่จะวิ่งกลับมาที่เซิร์ฟเวอร์กลาง นอกจากนี้ยังง่ายต่อการ Scale และมีค่าใช้จ่ายต่ำกว่าการเช่า VPS

Edge Computing & Cloudflare Workers คืออะไร

Edge Computing คือแนวคิดในการนำการประมวลผลไปไว้ที่ "ขอบ" ของเครือข่าย ซึ่งหมายความว่า code ของเราจะรันอยู่บน server ที่อยู่ใกล้กับผู้ใช้มากที่สุด แทนที่จะวิ่งกลับไปที่ Data Center กลาง

Cloudflare Workers คือบริการ Edge Computing ของ Cloudflare ที่ให้นักพัฒนาเขียน JavaScript และ deploy ขึ้นไปรันบน Edge Network ของ Cloudflare ซึ่งมีกว่า 300 จุดทั่วโลก ทำให้ API ของเราตอบสนองเร็วมากไม่ว่าผู้ใช้จะอยู่ที่ใด

  • V8 Isolates — Cloudflare Workers ใช้ V8 JavaScript engine (เหมือน Chrome) รัน code แต่ละ request ในสภาพแวดล้อมแยกกัน ทำให้ปลอดภัยและเริ่มต้นเร็วมาก (ไม่มี cold start นานๆ)
  • Web Standards API — Workers รองรับ Fetch API, Request/Response, URL, Headers เหมือนกับที่ใช้ในเบราว์เซอร์ ทำให้ code ส่วนใหญ่ใช้ได้ทั้ง browser และ worker
  • ฟรีในระดับที่พอใช้ — Free tier รองรับ 100,000 requests ต่อวัน เพียงพอสำหรับการเรียนและ prototype โปรเจกต์
หมายเหตุ

ใน stack นี้เราจะใช้ Hono เป็น framework สำหรับสร้าง API บน Cloudflare Workers Hono เป็น framework ขนาดเล็ก เร็ว และออกแบบมาให้ทำงานกับ Web Standards API โดยตรง จึงเหมาะอย่างมากกับ Edge environment

เทคโนโลยีที่ใช้ในรายวิชา

รายวิชานี้จะใช้เทคโนโลยีที่ทันสมัยและได้รับความนิยมสูงในวงการพัฒนาเว็บปัจจุบัน แบ่งออกเป็น 4 กลุ่มหลักดังนี้: 

┌──────────────────────────────────────────────────────────────────────┐
│                    Modern Web Stack — รายวิชานี้                      │
├──────────────────┬───────────────────────────────────────────────────┤
│  กลุ่ม           │  เทคโนโลยี                                        │
├──────────────────┼───────────────────────────────────────────────────┤
│  Front-end       │  React, Vite, TanStack Router, TanStack Query     │
│  UI              │  Shadcn/ui, Tailwind CSS                          │
│  Back-end API    │  Hono บน Cloudflare Workers                      │
│  Database/Auth   │  Supabase (PostgreSQL + Auth + Storage)          │
│  Dev Tools       │  Node.js, VS Code, Wrangler CLI, Git             │
└──────────────────┴───────────────────────────────────────────────────┘
  • React — Library สำหรับสร้าง UI แบบ Component-based เขียนด้วย JSX (JavaScript + XML) จัดการ state และ re-rendering อย่างมีประสิทธิภาพ
  • Vite — Build tool รุ่นใหม่ที่เร็วกว่า Create React App มาก รองรับ Hot Module Replacement (HMR) ทำให้เห็นการเปลี่ยนแปลงทันทีโดยไม่ต้อง reload
  • TanStack Router — Client-side routing library ที่ type-safe จัดการการนำทางระหว่างหน้าในแอปพลิเคชัน SPA
  • TanStack Query — Library สำหรับจัดการ server state มี caching, background refetch, และ loading/error state อัตโนมัติ
  • Hono — Web framework ขนาดเล็กสำหรับ Cloudflare Workers ออกแบบมาให้เร็วและใช้ Web Standards API
  • Supabase — Backend-as-a-Service ที่รวม PostgreSQL database, Authentication, Storage และ Realtime ไว้ในแพลตฟอร์มเดียว
  • Shadcn/ui + Tailwind CSS — Component library และ utility-first CSS framework สำหรับสร้าง UI ที่สวยงาม responsive และ accessible

สถาปัตยกรรม Browser → Hono API → Supabase

เมื่อผู้ใช้เปิดแอปพลิเคชัน BookEasy ในเบราว์เซอร์ การทำงานจะแบ่งออกเป็น 3 ชั้นหลัก: 

┌─────────────────────┐     fetch/HTTP      ┌──────────────────────┐     Supabase JS     ┌─────────────────────┐
│   Browser (React)   │ ──────────────────► │  Cloudflare Worker   │ ──────────────────► │  Supabase           │
│                     │                     │  (Hono API)          │                     │  (PostgreSQL)       │
│  - แสดง UI          │ ◄────────────────── │                     │ ◄────────────────── │                     │
│  - จัดการ State     │     JSON Response   │  - Routing           │    data / error     │  - services table   │
│  - TanStack Query   │                     │  - Middleware        │                     │  - bookings table   │
│  - TanStack Router  │                     │  - Business Logic    │                     │  - Auth             │
└─────────────────────┘                     └──────────────────────┘                     └─────────────────────┘

ชั้นที่ 1 — Browser (Front-end): React app รันในเบราว์เซอร์ของผู้ใช้ TanStack Query จัดการการดึงข้อมูลจาก API และ caching อัตโนมัติ TanStack Router จัดการการนำทางระหว่างหน้าต่างๆ โดยไม่ต้อง reload หน้า

ชั้นที่ 2 — Cloudflare Workers (Back-end API): Hono routes รับ HTTP request ตรวจสอบ authentication header เรียก Supabase เพื่อดึงหรือบันทึกข้อมูล และส่ง JSON กลับไปให้ Front-end

ชั้นที่ 3 — Supabase (Database & Auth): เก็บข้อมูลทั้งหมดใน PostgreSQL จัดการ user authentication ด้วย JWT tokens และเก็บไฟล์รูปภาพใน Storage

เครื่องมือที่ต้องติดตั้ง

ก่อนเริ่มพัฒนา คุณต้องเตรียมเครื่องมือดังนี้:

  • Node.js v20+ — JavaScript runtime สำหรับรัน npm และ build tools ดาวน์โหลดจาก nodejs.org เลือก LTS version (v20.x) Node.js จะติดตั้ง npm มาให้โดยอัตโนมัติ
  • VS Code (Visual Studio Code) — Text Editor ที่ได้รับความนิยมสูงสุด ดาวน์โหลดฟรีจาก code.visualstudio.com Extensions ที่แนะนำ: ESLint, Prettier, Tailwind CSS IntelliSense
  • Wrangler CLI — CLI tool ของ Cloudflare สำหรับพัฒนาและ deploy Workers ติดตั้งผ่าน npm: npm install -g wrangler หรือใช้ npx ทุกครั้ง: npx wrangler
  • บัญชี Supabase — สมัครฟรีที่ supabase.com Free tier มี 2 โปรเจกต์ฟรี เพียงพอสำหรับรายวิชา จะใช้ตั้งแต่สัปดาห์ที่ 6 เป็นต้นไป
  • บัญชี Cloudflare — สมัครฟรีที่ cloudflare.com Free tier รองรับ 100,000 Worker requests ต่อวัน จะใช้ตั้งแต่สัปดาห์ที่ 5 เป็นต้นไป
หมายเหตุ — เตรียมพร้อมก่อนสัปดาห์ที่ 2

นักศึกษาควรติดตั้ง Node.js v20+, VS Code, และสมัครบัญชี Supabase + Cloudflare ก่อนสัปดาห์ที่ 2 เพื่อให้พร้อมเริ่ม Lab ตั้งแต่สัปดาห์ที่ 2 เป็นต้นไป

หมายเหตุ — เกี่ยวกับ Lab

สัปดาห์นี้ยังไม่มีปฏิบัติการ Lab เนื่องจากเป็นการปูพื้นฐานทฤษฎีและเตรียมความพร้อม ตั้งแต่สัปดาห์ที่ 2 เป็นต้นไป ทุกสัปดาห์จะมี Lab ให้ฝึกปฏิบัติหลังจากเรียนทฤษฎี

💻 โค้ดตัวอย่าง
terminal Bash 
# ตรวจสอบ Node.js และ npm
node --version   # v20.x.x
npm --version    # 10.x.x
npx wrangler --version   # wrangler x.x.x
terminal Bash 
# สร้าง Vite project ครั้งแรก (preview เท่านั้น สัปดาห์ 3 จะทำจริง)
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev
# เปิดเบราว์เซอร์ที่ http://localhost:5173
terminal Bash 
# สร้าง Hono Worker ครั้งแรก (preview เท่านั้น สัปดาห์ 5 จะทำจริง)
npm create hono@latest my-api -- --template cloudflare-workers
cd my-api
npm install
npx wrangler dev
# เปิดเบราว์เซอร์ที่ http://localhost:8787
← สัปดาห์ก่อน
ไม่มีสัปดาห์ก่อนหน้า
สัปดาห์ถัดไป →
ทบทวน HTML, CSS, JavaScript & ES2022 (Arrow Fn, Async/Await, Modules)