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 個概念，畫成一張從用戶點開網站到收到結果的流程圖，你一眼就能徹底通。