สิ่งนี้เชื่อมโยงกับแอปของคุณอย่างไร

ตอนนี้ลองวางภาพทั้งหมดทับลงบนแอปที่สร้างด้วย vibe coding เพราะทุกชิ้นส่วนที่คุณจะสร้างล้วนอยู่ฝั่งใดฝั่งหนึ่งของการเต้นรำนี้:

• frontend คือทุกอย่างที่ทำงานอยู่ในเบราว์เซอร์ — ปุ่ม ฟอร์ม และเลย์เอาต์ที่ผู้ใช้เห็นและคลิก มันคือ client มันส่ง request และแสดง response เป็นส่วนใหญ่
• backend คือโค้ดของคุณที่ทำงานอยู่บน server — ตรรกะที่ตัดสินใจว่าจะทำอะไรกับ request คุยกับฐานข้อมูล และสร้าง response ขึ้นมา มันคือ server

นี่คือการเดินทางทั้งหมดของการสมัครสมาชิกในภาพเดียว — ทุกคำที่ตัวหนาจากบทนี้อยู่ในตำแหน่งของมัน:

   FRONTEND (browser = client)                BACKEND (server)
   ┌────────────────────────┐                 ┌────────────────────────┐
   │  user clicks "Sign up"  │   POST /signup  │  create the account     │
   │                         │ ──────────────▶ │  set a cookie           │
   │                         │  over  HTTPS    │                         │
   │  show welcome screen ◀──│ ─────────────── │ ◀── send back  200 OK   │
   └────────────────────────┘                 └────────────────────────┘

ปฏิสัมพันธ์จริงเย็บทุกอย่างเข้าด้วยกัน ผู้ใช้คลิก "สมัครสมาชิก" (frontend) เบราว์เซอร์ส่ง request แบบ POST ผ่าน HTTPS ไปยัง path อย่างเช่น /api/signup พร้อมพาข้อมูลฟอร์มไปด้วย backend ของคุณรับมันมา สร้างบัญชี ตั้งค่า cookie เพื่อให้ผู้ใช้ยังคงล็อกอินอยู่ และส่ง 200 กลับไป frontend เห็นความสำเร็จนั้นแล้วแสดงหน้าจอต้อนรับ ทุกคำที่ตัวหนาตรงนั้นคือสิ่งที่คุณเพิ่งเรียนรู้ไป — และนั่นคือรูปร่างทั้งหมดของแทบทุกอย่างที่คุณจะสร้าง

คุณไม่จำเป็นต้องจำทั้งหมดนี้ไว้ในหัวพร้อมกัน แต่เมื่อบทต่อ ๆ ไปบอกว่า "request ไปถึง server แล้วแต่กลับมาเป็น 500" หรือ "ตั้งค่า header นี้" หรือ "route นี้จัดการ POST" ตอนนี้คุณจะรู้แล้วว่ามันกำลังชี้ไปที่ส่วนไหนของการเต้นรำนี้ แบบจำลองความคิดนั้นคือข้อกำหนดเบื้องต้นที่แท้จริง — และตอนนี้คุณมีมันแล้ว