8

第八章

说构建的
语言

构建的词汇 —
不是代码,只是名词和动词。

你即将坐下来和编程智能体一起做东西。它会用到"deploy"、"endpoint"、"component"、"schema"这些词。如果这些词对你来说像天书,你会感到迷失——不是因为你做不了,而是因为你没法指挥。这一章给你一枚解码戒指。不是教你写代码,而是教你说构建的语言

把它想成开车。你不需要懂内燃机、变速比或刹车油压。你只需要知道:油门、刹车、方向盘、后视镜。这是操控的词汇,不是实现的词汇。

技术栈:一枚解码戒指

每个应用——从 Instagram 到一个简单的待办清单——都由四层构成。开发者管这个叫"技术栈"。来,全部给你揭开:

前端 (Frontend)

人们看到和触碰的部分。按钮、文字、图片、动画。餐厅的用餐区。

后端 (Backend)

幕后的逻辑。处理请求、验证密码、发送邮件。厨房。

数据库 (Database)

应用记住东西的地方。用户账号、帖子、设置。储藏室和食谱本。

部署 (Deployment)

它是怎么上线的。托管、域名、正式发布。打开餐厅的大门。

就这些。你用过的每一个应用,都是这四层的某种组合。当你的编程智能体说"我来搭后端",意思是"我来写幕后逻辑"。当它说"来部署吧",意思是"把它放到互联网上"。你不需要知道这些层怎么工作。你需要知道它们存在,以及它们各自负责什么。

智能体也是你的老师

没人告诉你的是:编程智能体也是你的老师。不知道"npm"是什么?问它。看不懂错误信息?粘贴进去然后说"用非开发者能听懂的话解释一下。"想知道智能体为什么选了 React 而不是别的?问它。它会用大白话一步步解释,你需要多少遍都行。

你的头五分钟

打开你的编程工具。用大白话描述你的项目:"我想做一个健身追踪器,记录我的训练并查看我的进步。"智能体会问你澄清问题,建议一个技术栈,然后开始搭建。你的第一个任务就是回答它的问题看着它创建的东西

探索网页应用的四个层次。点击学习词汇——然后测试自己。

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
你不需要知道引擎怎么工作。你需要知道怎么开车。

你学会了词汇。你有了想法。现在该坐下来和你的编程智能体一起动手了。下一章:构建循环的艺术——迭代、评估,以及出问题时怎么办。

Complexity Score

New tool unlocked!