TLDR
这张图其实就在讲两件事。
第一件事，是你怎么去调用别人的能力，也就是左边这一堆 API 相关概念。
第二件事，是你怎么把自己的网站或产品，稳定地交到用户手里，也就是右边这一堆上线、部署、域名、数据库、邮件、存储这些东西。
对小白来说，最大的坑不是不会写代码，而是脑子里没有整体地图。
你一旦把这张地图看懂了，就知道：
你访问一个 AI 能力，本质上是在给别人发请求
你做一个网站上线，本质上是在搭一套稳定交付系统
demo 能跑，不等于产品能卖
会调 API，不等于会做产品
能上线页面，不等于能稳定服务
我先给你一个最白话的总框架。
左边这一坨，你可以理解成
我怎么去饭店点菜
右边这一坨，你可以理解成
我怎么自己开一家餐馆，而且天天营业不翻车
下面我一个一个给你拆开讲。
我会按这个格式来讲：
这个概念是啥
打个比方
新手要掌握到什么程度
熟手要掌握到什么程度
先说左边，API 这一组。
一 API
API 是什么
API 就是两个系统之间约定好的说话方式。
你不用知道别人厨房怎么炒菜，你只要知道怎么下单，它就把结果给你。
打比方
API 就像餐厅服务员。
你跟服务员说，我要一份番茄炒蛋，不要葱。
服务员把你的要求带到后厨。
后厨做好了，再通过服务员把菜端回来。
你不用进厨房。
新手掌握到什么程度
你只需要明白
API 不是一个软件
API 不是页面
API 是接口，是你向另一个系统要东西、让它干活的入口
你能听懂这句话就够了
我发一个请求给 API，它返回一个结果
熟手掌握到什么程度
熟手会进一步关心
这个 API 怎么鉴权
限速是多少
返回格式是什么
失败会怎么报错
能不能批量调用
成本怎么算
延迟高不高
稳定性怎么样
二 API 平台
API 平台是什么
API 平台就是把很多 API 放在一起卖、管、发文档、给密钥的地方。
比如 OpenAI 平台、Stripe 平台、Resend 平台。
打比方
就像一个大型商场。
里面有很多店，但你统一从商场入口进去，办会员卡，充值，找说明，查订单。
新手掌握到什么程度
知道 API 平台通常会提供这些东西
文档
API Key
计费
调用示例
错误说明
控制台
会进去找文档、复制 Key、看价格，这就够了
熟手掌握到什么程度
熟手会看
权限隔离
环境区分 测试环境和正式环境
速率限制
用量监控
异常告警
成本优化
账单和风控
三 API 四要素
API 四要素是什么
不同人说法略有不同，但小白最实用的版本是这四个：
接口地址
请求方法
请求参数
返回结果
打比方
你点外卖，需要四个东西
点哪家店
堂食还是外卖 这像请求方法
你点什么、备注什么 这像参数
最后送来什么 这像返回结果
新手掌握到什么程度
你能看懂文档里的这四样就够了：
去哪发请求
用 GET 还是 POST
要传什么
会回来什么
熟手掌握到什么程度
熟手会继续关心
请求头 headers
状态码
认证方式
幂等性
分页
重试
超时
错误码设计
版本管理
四 ELO Rank
ELO Rank 是什么
ELO 本来是用来给棋手、游戏玩家排强弱的评分系统。
后来很多 AI 排行、模型对战，也会借用这个概念。
谁老赢，分就升；谁老输，分就降。
打比方
就像学校打擂台。
你打赢强者，加分更多。
你打赢弱者，加分少。
你输给弱者，扣分更多。
新手掌握到什么程度
知道 ELO 不是绝对分数，而是相对强弱排名。
它更像江湖地位，不像高考分数。
熟手掌握到什么程度
熟手会知道
ELO 依赖对战样本
会受数据分布影响
不是全能评分
不等于真实业务效果
适合看相对竞争，不适合看绝对能力
五 REST API
REST API 是什么
REST API 是现在最常见的一类 API 风格。
一般是你发一次请求，对方回一次结果。
比如查用户信息、提交表单、创建订单。
打比方
像去柜台办业务。
你排队到窗口，递材料。
工作人员处理完，当场给你结果。
一次一件事。
新手掌握到什么程度
理解成
最常见的接口调用方式
请求一次，返回一次
通常走 HTTP
常配合 GET、POST、PUT、DELETE 这些方法
熟手掌握到什么程度
熟手会关心
资源设计是否规范
URL 设计
状态码是否合理
是否无状态
缓存策略
权限控制
幂等
版本升级方案
六 WebSocket API
WebSocket API 是什么
它是为了建立一条持续连接。
不是你问一次我答一次，而是两边一直连着，可以随时互相发消息。
打比方
REST 像寄快递，一次一单。
WebSocket 像打电话，电话一接通，双方可以一直说。
适合什么
聊天室
实时股价
游戏对战
实时协作
直播互动
新手掌握到什么程度
你只要记住
需要实时、连续更新的时候，常用 WebSocket
它不是每次都重新连
熟手掌握到什么程度
熟手会关心
连接保活
断线重连
心跳机制
消息顺序
并发连接数
横向扩展
权限验证
连接资源消耗
七 Streaming API
图里写的是 Steaming API，大概率想表达的是 Streaming API
Streaming API 是什么
它不是等全部结果做完再一次性给你，
而是边生成边发回来。
打比方
像老师批作文。
不是全部改完才告诉你结果，
而是一边看一边念给你听。
最常见场景
AI 聊天输出
语音转文字实时回传
大模型生成内容逐字显示
新手掌握到什么程度
理解成
结果不是一次性给完
而是像水龙头一样一点点流出来
熟手掌握到什么程度
熟手会关心
流式协议怎么处理
前端如何渲染增量内容
中途断开怎么办
如何统计 tokens
如何处理部分失败
如何在流式里做超时和取消
八 Postman
Postman 是什么
Postman 是一个调 API 的工具。
不用自己写代码，就能手动试接口。
打比方
像一个高级遥控器。
你按几下，就能测试一个设备到底有没有反应。
新手掌握到什么程度
会用 Postman 做这几件事就够了
填 URL
选 GET 或 POST
加请求头
加参数
点发送
看返回
熟手掌握到什么程度
熟手会用它做
接口集合管理
环境变量
自动化测试
鉴权流程
多人协作
接口文档共享
九 Curl
Curl 是什么
curl 是命令行里发 HTTP 请求的工具。
很多 API 文档都会给 curl 示例。
打比方
Postman 像图形界面的遥控器。
curl 像你直接在终端里喊口令。
新手掌握到什么程度
会复制文档里的 curl 命令，贴到终端里跑。
能看懂最基础的参数。
这就够了。
熟手掌握到什么程度
熟手会自己写 curl
加 header
发 JSON
上传文件
调试返回
配合 shell 脚本自动化测试
十 Bear token
图里写的是 Bear token，严格说通常应该是 Bearer token
Bearer token 是什么
它是一种常见的身份凭证。
你带着它去请求 API，对方就知道你是谁，你有没有权限。
打比方
像临时通行证。
门口保安不认识你本人，但只认你手上的通行证。
新手掌握到什么程度
知道它一般会放在请求头里
格式常常像这样
Authorization: Bearer 你的token
然后明白
这个东西不能随便泄露
泄露了别人就能冒充你
熟手掌握到什么程度
熟手会关心
token 过期机制
刷新 token
权限范围
服务端验证
最小权限原则
泄露后的吊销和审计
十一 HTTP GET 和 POST
GET 和 POST 是什么
它们是两种常见的请求方法。
GET 通常用来拿数据
POST 通常用来提交数据、创建东西
打比方
GET 像问店员
今天菜单是什么
POST 像你把订单正式交上去
我要下单，送到这个地址
新手掌握到什么程度
你只要先粗暴记住
GET 多数是查
POST 多数是交
这已经够用很久了
熟手掌握到什么程度
熟手会知道
GET 参数通常在 URL 上
POST 常把数据放请求体 body 里
GET 更适合查询
POST 更适合提交
但真实项目里还要看接口设计
还会区分 PUT PATCH DELETE 等
十二 HTTP Request
HTTP Request 是什么
就是你发出去的请求本身。
里面通常有
地址
方法
请求头
参数
请求体
打比方
像你寄出的一封信。
信封写寄到哪里
里面写你要办什么事
再附上身份证复印件和申请表
新手掌握到什么程度
知道请求是由这些部分拼起来的。
以后看到报错，就知道先检查
地址对不对
方法对不对
参数全不全
token 对不对
熟手掌握到什么程度
熟手会细查
header
cookie
content-type
压缩
签名
超时
重试
代理
trace id
十三 HTTP Response
HTTP Response 是什么
就是对方返回给你的结果。
通常会有
状态码
响应头
响应体
打比方
像对方给你的回信。
回信里可能写
申请通过了
材料不全
服务器忙
这是你的结果数据
新手掌握到什么程度
会看两个东西就很好了
状态码
返回内容
比如
200 一般代表成功
401 常见是没权限
404 常见是地址不对
500 常见是服务端炸了
熟手掌握到什么程度
熟手会进一步判断
错误是前端问题还是后端问题
是鉴权失败还是参数错
是临时失败还是永久失败
能不能自动重试
要不要报警
上面左边你学完，核心就是一句话：
你已经知道怎么跟别人的系统说话了。
但这还只是会点菜，不是会开店。
下面讲右边，正式上线和稳定服务这一组。
十四 Vercel
Vercel 是什么
Vercel 是一个很常见的网站部署平台。
你把代码推上去，它帮你把网站发布到网上。
打比方
像商场给你一个现成铺位。
你把货摆上去，灯、水、电、展示位很多事情它都帮你搞了一部分。
新手掌握到什么程度
知道它是托管平台。
会做这几件事就够了
连接 GitHub
点部署
看日志
改环境变量
绑定域名
熟手掌握到什么程度
熟手会关心
构建流程
预览环境
正式环境
回滚
函数超时
冷启动
地区节点
成本
监控
缓存
十五 域名
域名是什么
域名就是网站的门牌号。
比如 example.com。
打比方
像你家的地址。
别人要找到你，不能靠记经纬度，一般就记门牌号。
新手掌握到什么程度
知道域名是给人记的名字，
背后真正访问的还是服务器 IP。
会买域名，会续费，会绑定网站。
熟手掌握到什么程度
熟手会关心
品牌
SEO
顶级域后缀
多地区策略
证书
子域名规划
DNS 配置
到期风险管理
十六 DNS Server
DNS Server 是什么
DNS 是把域名翻译成服务器地址的系统。
你输入域名，DNS 帮你找到真实服务器在哪。
打比方
像电话簿。
你记得人名，不记得电话号码。
DNS 帮你查号。
新手掌握到什么程度
知道 DNS 是域名能不能找到服务器的关键。
网站打不开的时候，问题未必在网站本身，可能在 DNS。
熟手掌握到什么程度
熟手会懂
A 记录
CNAME
MX
TXT
TTL
DNS 传播
代理模式
故障切换
十七 Captcha 人机验证
Captcha 是什么
就是为了区分
你是真人
还是机器脚本
打比方
像小区门口保安问你一句
你是不是本小区住户
或者让你做个简单动作证明你不是假冒的。
新手掌握到什么程度
知道它的作用是防止
恶意注册
刷接口
薅羊毛
机器人攻击
熟手掌握到什么程度
熟手会平衡
安全和转化率
太严，用户烦
太松，机器人进来
还会考虑
风控分层
无感验证
误杀率
成本
十八 云存储 S3 和 R2
云存储是什么
就是把文件放到云上的仓库。
图片、视频、用户上传附件、备份文件，都可以放里面。
S3 是亚马逊的对象存储服务
R2 是 Cloudflare 的对象存储服务
打比方
像你租了一个超级仓库。
你不用自己买地盖库房，直接把货存在里面。
新手掌握到什么程度
知道
数据库不是拿来放大图片大视频的
大文件通常放云存储
然后数据库里只存文件地址
熟手掌握到什么程度
熟手会关心
权限控制
私有桶公有桶
签名链接
上传速度
下载成本
跨区费用
备份
生命周期管理
CDN 配合
十九 CDN
CDN 是什么
CDN 是内容分发网络。
它会把你的网站内容缓存到离用户更近的节点，让访问更快。
打比方
像你开连锁仓库。
顾客在广州买东西，就从广州仓发。
不用每次都从美国总仓发。
新手掌握到什么程度
知道 CDN 主要解决
访问速度
带宽压力
静态资源分发
熟手掌握到什么程度
熟手会关心
缓存策略
回源
刷新缓存
防盗链
边缘规则
地区优化
安全防护
二十 Email API 和 Resend
Email API 是什么
它是让你的系统自动发邮件的能力。
比如注册验证码、找回密码、订单通知。
Resend 是做这个事情的一个服务商。
打比方
像你雇了一个专业邮差公司。
用户一触发动作，它就自动把信送出去。
新手掌握到什么程度
知道
产品不能靠你手动发邮件
正式产品一般要接入邮件服务
验证码、通知邮件、欢迎邮件都靠它
熟手掌握到什么程度
熟手会关心
送达率
垃圾箱率
域名验证
SPF DKIM DMARC
模板管理
退信处理
发信信誉
成本
二十一 Cron Jobs
Cron Jobs 是什么
定时任务。
就是系统按你设定的时间自动做事。
打比方
像闹钟和保洁阿姨。
每天早上 8 点自动开门
每晚 12 点自动打扫
每小时自动巡检
常见场景
定时抓数据
发日报
清缓存
跑备份
更新统计
新手掌握到什么程度
理解成
不是所有事情都要等用户点按钮
有些事情系统自己按时做
熟手掌握到什么程度
熟手会关心
任务失败重试
幂等
日志
并发
超时
重复执行
分布式调度
告警
二十二 Live Chat Widget
Live Chat Widget 是什么
网站右下角那个在线聊天小窗。
用户可以问问题，留线索，联系客服。
打比方
像店里前台。
顾客刚进门迷茫的时候，有个人马上接待。
新手掌握到什么程度
知道它的价值不只是客服，还是转化工具。
很多用户不会主动发邮件，但会点右下角小窗。
熟手掌握到什么程度
熟手会关心
响应速度
机器人和人工切换
线索收集
FAQ 自动回复
转化率
埋点
和 CRM 的打通
二十三 DrizzleORM
DrizzleORM 是什么
ORM 就是把数据库操作变得更像写代码对象，而不是全手写 SQL。
Drizzle 是一种比较现代的 TypeScript ORM 工具。
打比方
本来你要直接跟仓库管理员用很专业的话沟通。
ORM 像一个翻译官。
你用更顺手的代码方式说，它帮你翻成数据库能听懂的话。
新手掌握到什么程度
你只要先知道
ORM 是帮你更方便地操作数据库的工具
Drizzle 是其中一个工具
不是数据库本身
熟手掌握到什么程度
熟手会懂
模型定义
查询构建
类型安全
性能
事务
索引
何时用 ORM
何时直接写 SQL
二十四 Database Migrations
Database Migrations 是什么
就是数据库结构升级记录。
比如今天表里只有用户名，明天你要加手机号。
不能全靠手动瞎改，要有一套有记录、可回滚、可同步的变更流程。
打比方
像给房子改户型。
今天加一个窗户
明天拆一堵墙
每次装修都得留图纸，不然以后全乱了。
新手掌握到什么程度
知道
数据库表结构不会永远不变
每次改表都应该有记录
不能线上手抖乱改
熟手掌握到什么程度
熟手会关心
版本管理
回滚
多环境同步
数据兼容
零停机迁移
大表变更风险
发布顺序
二十五 Git 和 GitHub
Git 是什么
Git 是代码版本管理工具。
GitHub 是托管 Git 仓库的平台。
打比方
Git 像你的无限撤销和历史录像机。
GitHub 像你的云端代码仓库和协作办公室。
新手掌握到什么程度
先会这几个动作就够了
拉代码
保存修改
提交 commit
推送 push
看历史记录
熟手掌握到什么程度
熟手会懂
分支管理
代码审查
回滚
冲突处理
发布流程
CI/CD
权限管理
协作规范
现在把整张图串起来
你做一个 AI 网站，真实流程往往是这样的。
用户打开你的域名
DNS 把他带到你的服务器或部署平台
Vercel 把页面跑起来
静态资源通过 CDN 加速
用户注册时用 Captcha 防刷
用户上传图片放到 S3 或 R2
你的前端去调某个 AI API
请求里带 Bearer token
你可能用 Postman 或 curl 先测试接口
对方通过 REST API 或 Streaming API 返回结果
数据库通过 ORM 存订单和用户信息
表结构变更靠 migration 管理
邮件系统用 Resend 发验证码和通知
定时任务 Cron Jobs 跑清理、同步、统计
用户有问题就从 Live Chat Widget 进来
整个项目代码用 Git/GitHub 管理
看到没有。
这才是一个产品。
不是一个页面，不是一个 prompt，不是一个 API 调通截图。
而是一整条链路。
新手和熟手的真正分水岭
这个你一定要记住，不然会学偏。
新手通常卡在
这个词是什么意思
这个按钮在哪
这个报错怎么点掉
熟手真正强的不是背概念，而是三件事：
第一，知道整个链路
他知道一个功能上线，从域名到 DNS 到前端到后端到数据库到邮件到监控，是一条完整链
第二，知道哪里最容易出事
他知道 demo 能跑，但正式产品最容易死在
鉴权
数据库
迁移
邮件送达
定时任务
域名解析
文件存储
接口限流
并发
第三，知道怎么排查
他不会一炸就慌
他会顺着链路一段一段查
是前端没发出去
还是 DNS 没解析
还是 token 失效
还是 API 报错
还是数据库写入失败
还是邮件没送达
说白了，熟手不是知道更多名词。
熟手是出了问题知道先掐哪里。
如果你是彻底小白，最应该先学什么
别贪。
先学一层，不要一口吃成胖子。
第一层，你先搞懂互联网产品的最小闭环
域名
Vercel
GitHub
API
HTTP Request
HTTP Response
GET POST
Postman
数据库是什么
邮件是什么
这一层学完，你已经不是纯外行了。
第二层，再学真正能做产品的能力
Bearer token
REST API
Streaming API
S3 或 R2
DNS
CDN
Captcha
Cron Jobs
ORM
Database Migrations
第三层，才去碰复杂一点的
WebSocket
缓存策略
权限体系
监控告警
队列
并发
回滚
多环境部署
顺序很重要。
你现在最怕的不是学不会，而是学杂了、乱了、没主线。
你可以这样理解 demo 和正式产品的差别
demo 是
我厨房里能炒出一道菜
正式产品是
我能开店
有人来
不迷路
不排死队
不刷单
不丢单
不漏发通知
不炸厨房
菜能按时端到桌上
出了事还能补救
所以左边 API 调通，只是证明你会炒菜。
右边这一堆稳定服务，才证明你能开店赚钱。
checking list
你照着这个清单自查。能打勾越多，说明你越接近熟手。
认知层
[ ] 我知道 API 是系统和系统之间说话的接口
[ ] 我知道 REST、WebSocket、Streaming 三者的大区别
[ ] 我知道 GET 多数是查，POST 多数是交
[ ] 我知道 Request 是发出去的内容，Response 是回来的内容
[ ] 我知道 Bearer token 是身份凭证，不能乱泄露
[ ] 我知道 ELO 是相对排名，不是绝对分数
调用别人能力层
[ ] 我会看 API 文档
[ ] 我会用 Postman 测试接口
[ ] 我会复制并运行 curl 命令
[ ] 我能看懂一个接口的地址、方法、参数、返回结果
[ ] 我知道接口报 401、404、500 大概意味着什么
搭自己产品层
[ ] 我知道 Vercel 是部署平台
[ ] 我知道域名是门牌号，DNS 是翻译电话簿
[ ] 我知道 CDN 是加速分发
[ ] 我知道 Captcha 是防机器人
[ ] 我知道云存储是放图片视频文件的，不是全塞数据库
[ ] 我知道 Email API 是发验证码和通知邮件的
[ ] 我知道 Cron Jobs 是定时任务
[ ] 我知道 Live Chat Widget 不只是聊天，也是转化工具
数据和工程层
[ ] 我知道 ORM 是操作数据库的翻译层
[ ] 我知道 migration 是数据库结构变更记录
[ ] 我知道 Git 是版本控制，GitHub 是托管平台
[ ] 我知道正式产品不能靠手动改数据库和手动发邮件活着
真正进入熟手的标志
[ ] 网站炸了，我知道先查 DNS、部署日志、接口日志、数据库、邮件、存储哪一段
[ ] 我知道 demo 能跑不代表正式可用
[ ] 我知道最值钱的不是写页面，而是把整条交付链路跑顺
[ ] 我能把一个功能从 页面 按钮 API 存储 数据库 邮件 通知 串成完整流程
课后作业：做一个
小学生版互联网产品地图
就是把这 25 个概念，画成一张从用户点开网站到收到结果的流程图，你一眼就能彻底通。
