Điều này áp dụng vào ứng dụng của bạn như thế nào
Giờ hãy đặt toàn bộ bức tranh này lên một ứng dụng vibe-coded, vì mỗi phần bạn sẽ xây dựng đều nằm ở một bên của điệu nhảy này:
- là mọi thứ chạy trong trình duyệt — các nút bấm, form, và bố cục mà người dùng nhìn thấy và click vào. Đó là client. Nó chủ yếu gửi request và hiển thị response.
- là mã của bạn chạy trên server — logic quyết định phải làm gì với một request, nói chuyện với cơ sở dữ liệu, và xây dựng response. Đó là server.
Đây là toàn bộ hành trình đăng ký trong một bức tranh — mỗi từ in đậm từ chương này nằm đúng vị trí của nó:
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 │
└────────────────────────┘ └────────────────────────┘
Một tương tác thực tế sẽ ghép tất cả lại với nhau. Người dùng click "Sign up" (frontend). Trình duyệt gửi một request POST qua đến một path như /api/signup, mang theo dữ liệu form. Backend của bạn nhận nó, tạo tài khoản, đặt một cookie để người dùng vẫn đăng nhập, và gửi lại một 200. Frontend thấy sự thành công và hiển thị màn hình chào mừng. Mỗi từ in đậm ở đó là thứ bạn vừa học — và đó là toàn bộ hình dạng của gần như mọi thứ bạn sẽ xây dựng.
Bạn không cần phải giữ tất cả điều này trong đầu cùng một lúc. Nhưng khi một chương sau nói "request đã đến server nhưng trả về 500," hoặc "đặt header này," hoặc "route này xử lý POST," giờ bạn sẽ biết chính xác nó đang chỉ tới phần nào của điệu nhảy. Mô hình tư duy đó là điều kiện tiên quyết thực sự — và bạn đã có nó.