8

Chương tám

Nói ngôn ngữ
xây dựng

Từ vựng của việc xây dựng —
không phải code, chỉ là danh từ và động từ.

Bạn sắp ngồi xuống với một coding agent và xây thứ gì đó. Nó sẽ dùng những từ như "deploy," "endpoint," "component," và "schema." Nếu những từ đó mờ mịt với bạn, bạn sẽ cảm thấy lạc lõng — không phải vì bạn không thể xây, mà vì bạn không thể chỉ đạo. Chương này cho bạn chiếc nhẫn giải mã. Không phải học code. Mà là nói ngôn ngữ của việc xây dựng.

Nghĩ như lái xe vậy. Bạn không cần hiểu động cơ đốt trong, tỉ số truyền, hay áp suất dầu phanh. Bạn cần biết: chân ga, phanh, vô-lăng, gương. Từ vựng của việc điều khiển, không phải cách vận hành.

Stack: Chiếc nhẫn giải mã

Mọi app — từ Instagram đến một to-do list đơn giản — đều được xây từ bốn lớp. Developer gọi đây là "the stack." Đây là toàn bộ, giải mã hết:

Frontend

Thứ người dùng thấy và chạm vào. Nút bấm, chữ, hình ảnh, animation. Phòng ăn của nhà hàng.

Backend

Logic phía sau hậu trường. Xử lý request, kiểm tra mật khẩu, gửi email. Nhà bếp.

Database

Nơi app nhớ mọi thứ. Tài khoản người dùng, bài đăng, cài đặt. Kho thực phẩm và sổ công thức.

Deployment

Cách nó lên internet. Hosting, tên miền, đưa lên sóng. Mở cửa nhà hàng.

Chỉ vậy thôi. Mọi app bạn từng dùng đều là tổ hợp nào đó của bốn lớp này. Khi coding agent nói "tôi sẽ set up backend," nghĩa là "tôi sẽ viết logic hậu trường." Khi nó nói "deploy thôi," nghĩa là "đưa cái này lên internet." Bạn không cần biết các lớp này hoạt động như thế nào. Bạn cần biết rằng chúng tồn tại và dùng để làm gì.

Agent là gia sư của bạn

Đây là điều không ai nói cho bạn: coding agent cũng là giáo viên của bạn. Không biết "npm" là gì? Hỏi. Không hiểu error message? Paste vào và nói "giải thích cái này như mình không phải developer." Muốn biết tại sao agent chọn React thay vì thứ khác? Hỏi. Nó sẽ giải thích bằng ngôn ngữ đơn giản, từng bước một, bao nhiêu lần bạn cần cũng được.

Năm phút đầu tiên

Mở công cụ coding. Mô tả dự án bằng ngôn ngữ bình thường: "Mình muốn xây một workout tracker, log bài tập và xem tiến trình theo thời gian." Agent sẽ hỏi câu hỏi làm rõ, đề xuất stack, và bắt đầu xây. Việc đầu tiên của bạn là trả lời câu hỏi của nóxem nó tạo ra cái gì.

Khám phá bốn lớp của web app. Click để học từ vựng — rồi tự test mình.

The Stack Decoder

Click a layer to explore its vocabulary

The frontend is everything a user interacts with — buttons, text, images, forms, animations. It runs in the browser on the user's device.

Think of a restaurant. The frontend is the dining room — the menu, the tables, the decor. It's what customers experience.

Nouns (the things)
Component

A reusable piece of the interface, like a button or a card.

ReactVueSvelte
Page

A single screen or view in your app.

Home pageSettings pageProfile page
Style

How things look — colors, fonts, spacing, layout.

CSSTailwindSass
State

Data that can change — like whether a menu is open or a form field is filled.

Dark mode on/offItem count in cartCurrent tab
Verbs (the actions)
RenderDisplay something on screen. When a page renders, it becomes visible.
NavigateMove from one page to another.
Handle eventsReact to user actions like clicks, typing, or scrolling.

The backend is the server-side code that processes requests, applies business logic, and communicates with the database. Users never see it directly.

The backend is the kitchen. Orders come in, the kitchen prepares them, and sends out the finished dish. Customers don't see the kitchen, but nothing works without it.

Nouns (the things)
Server

A computer that listens for requests and sends back responses.

Node.jsPython/FlaskGo
API

A set of rules for how the frontend talks to the backend. Like a waiter taking orders.

REST APIGraphQLtRPC
Endpoint

A specific URL the frontend can call to get or send data.

/api/users/api/login/api/posts
Authentication

Verifying who a user is — login systems, passwords, sessions.

JWT tokensOAuthCookies
Verbs (the actions)
FetchRequest data from the backend. "The app fetches your profile from the server."
ProcessApply logic to data — calculate, validate, transform.
AuthorizeCheck if a user has permission to do something.

The database stores all the persistent data — user accounts, posts, settings, anything that needs to survive a page refresh or server restart.

The database is the pantry and the recipe book. It stores all the ingredients (data) and keeps them organized so the kitchen (backend) can find them fast.

Nouns (the things)
Table

A structured collection of data, like a spreadsheet. Each row is a record.

Users tablePosts tableOrders table
Schema

The blueprint for your data — what fields exist and what type of data each holds.

name: textage: numbercreated_at: date
Query

A request to find, add, update, or delete data in the database.

SELECT * FROM usersINSERT INTO postsDELETE FROM comments
Migration

A change to your database structure — like adding a new column to a table.

Add email fieldCreate orders tableRemove old column
Verbs (the actions)
StoreSave data so it persists. "Store the user's preferences in the database."
QueryAsk the database for specific data. "Query all users who signed up today."
MigrateUpdate the database structure without losing existing data.

Deployment is the process of taking your app from your computer and putting it on the internet where anyone can use it. It includes hosting, domains, and keeping things running.

Deployment is opening the restaurant. You've built the dining room, hired the kitchen staff, stocked the pantry — now you unlock the front door and put up a sign.

Nouns (the things)
Hosting

A service that runs your app on the internet 24/7.

VercelNetlifyRailwayFly.io
Domain

Your app's address on the internet — the URL people type to find you.

myapp.comcool-project.vercel.app
Environment Variables

Secret settings (like API keys) stored outside your code so they stay private.

API_KEY=abc123DATABASE_URL=...
Build

The process of converting your source code into optimized files ready to serve.

npm run buildProduction buildStatic export
Verbs (the actions)
DeployPush your app to the internet. "Deploy to Vercel" means put it live.
BuildPrepare your code for production — optimize, bundle, compress.
MonitorWatch your app for errors, slowdowns, or crashes after it's live.
Share this course
Bạn không cần biết động cơ hoạt động thế nào. Bạn cần biết cách lái.

Bạn biết các từ rồi. Bạn có ý tưởng. Giờ là lúc ngồi xuống với coding agent và thực sự xây. Tiếp theo: nghệ thuật của build loop — lặp lại, đánh giá, và làm gì khi mọi thứ hỏng.

Complexity Score

New tool unlocked!