Bagaimana ini terkait dengan aplikasimu
Sekarang mari letakkan seluruh gambaran ini di atas sebuah aplikasi hasil vibe coding, karena setiap bagian yang akan kamu bangun berada di salah satu sisi tarian ini:
- adalah segala sesuatu yang berjalan di browser — tombol, form, dan tata letak yang dilihat dan diklik pengguna. Ia adalah client. Ia kebanyakan mengirim request dan menampilkan response.
- adalah kodemu yang berjalan di sebuah server — logika yang memutuskan apa yang harus dilakukan terhadap sebuah request, berbicara dengan , dan membangun response-nya. Ia adalah server.
Inilah seluruh perjalanan pendaftaran akun dalam satu gambar — setiap kata tebal dari bab ini berada tepat di tempatnya:
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 │
└────────────────────────┘ └────────────────────────┘
Sebuah interaksi sungguhan merangkai semuanya jadi satu. Seorang pengguna mengklik "Sign up" (frontend). Browser mengirim sebuah request POST lewat ke sebuah path seperti /api/signup, membawa data dari form-nya. Backend-mu menerimanya, membuat akunnya, mengatur sebuah cookie agar pengguna tetap login, dan mengirim balik sebuah 200. Frontend melihat keberhasilan itu dan menampilkan layar selamat datang. Setiap kata yang dicetak tebal di sana adalah sesuatu yang baru saja kamu pelajari — dan itulah keseluruhan bentuk dari hampir semua yang akan kamu bangun.
Kamu tidak perlu menyimpan semua ini di kepalamu sekaligus. Tapi ketika sebuah bab nanti berkata "request-nya sampai ke server tapi kembali dengan 500," atau "atur header ini," atau "route ini menangani POST," kamu sekarang akan tahu persis bagian tarian mana yang sedang dibicarakan. Model mental itulah prasyarat sesungguhnya — dan kamu sudah memilikinya.