AI 原生开放教材

外观

Easy-Vibe（Datawhale：从零做出真实产品）课时教程·中英混排原文 ↗原件 ↓仓库 ↗

附錄一：常見計算機術語速查表 ​

這一部分不需要刻意背誦，更重要的是先在腦子裡建立一個印象。

<span id="term-tool-ui">一、和“工具介面”有關的詞</span> ​

1. IDE、編輯器、終端 ​

IDE（整合開發環境）
可以把 IDE 想象成“程式設計師的工作臺”：

  • 一邊是寫字的桌面（編輯器），
  • 一邊有電源插座和按鈕（執行、除錯），
  • 抽屜裡有各種小工具（搜尋、版本管理）。
    VS Code、Trae、Cursor 都屬於 IDE 或基於 IDE 改的工具。

程式碼編輯器（Editor）
更像是“高階記事本”，只負責：

  • 讓你打字寫程式碼；
  • 用顏色區分不同內容（語法高亮）；
  • 給你自動補全。
    IDE 裡那塊寫程式碼的區域，就是程式碼編輯器。

終端 / 命令列（Terminal / 命令列視窗）
一個黑底白字的視窗，你在裡面輸入命令讓電腦幹活：

  • 比如：npm run dev 表示“幫我啟動開發伺服器”；
  • python main.py 表示“執行這個 Python 檔案”。
    可以把它想象成：“你給電腦發一條條簡訊命令，它用文字回覆執行結果”。

2. IDE 中幾個常見區域 ​

活動欄（Activity Bar）
最左邊一排豎著的小圖示，像“功能選項卡”：

  • 點檔案圖示 → 左邊顯示檔案列表；
  • 點放大鏡圖示 → 左邊變成搜尋；
  • 點 Git 圖示 → 左邊顯示版本管理。

側邊欄（Side Bar）
活動欄右邊那一大塊區域，專門顯示當前模式下的內容：

  • 檔案模式：展示專案裡的檔案和資料夾；
  • 搜尋模式：展示搜尋結果列表；
  • 原始碼管理模式：展示有哪些檔案被改動。

編輯區（Editor）
中間最大的區域，就是你開啟檔案後實際看到和修改內容的地方；
上方的標籤頁（Tab）是“當前開啟了哪些檔案”。

底部面板（Panel）
一般在最下方，常見幾種：

  • Terminal（終端）：輸入命令跑專案；
  • Problems（問題）：列出出錯的檔案和行號；
  • Output（輸出）：一些工具列印出來的執行資訊；
  • Debug Console（除錯控制檯）：除錯時的輸出。

狀態列（Status Bar）
最下面那條細細的欄：

  • 顯示當前檔案是什麼語言（JS、HTML、Python 等）；
  • 顯示縮排是“2 個空格”還是“4 個空格”；
  • 顯示有沒有錯誤、當前 Git 分支是什麼。
    可以把它當作“當前編輯環境的一張小體檢單”。

<span id="term-network">二、和“網頁 / 網路 / 服務”有關的詞</span> ​

1. URL、http、埠、本地服務 ​

URL（網址）
就是瀏覽器位址列那一串東西，比如：

  • https://www.trae.cn/
  • http://localhost:3000/
    它就像“網際網路世界裡某個房間的完整地址”。

HTTP / HTTPS
在 URL 開頭看到的 http:// 或 https://：

  • HTTP：普通傳輸方式；
  • HTTPS：多了一層加密，更安全。
    你可以先記成：“寫網頁地址時，通常以 http 或 https 開頭”。

埠（Port）
可以把一臺電腦想象成一棟大樓，埠就是每個房間的門牌號：

  • :3000 表示 3000 號房間；
  • 同一臺電腦上，可以同時開多個服務，各佔一個埠。
    http://localhost:3000 就是“訪問我自己電腦上 3000 號房間裡跑著的那個服務”。

本地（Local / localhost）
指的就是你自己的電腦。

  • localhost 可以理解為“這臺機器自己”。
    當你訪問 http://localhost:3000，其實是在跟自己電腦上執行的程式打交道，而不是上網訪問別人家的伺服器。

服務（Service / Server）
“服務”就是一個一直在後臺執行、隨時聽你指令的程式：

  • 網頁服務：瀏覽器訪問一個地址時，它返回網頁內容；
  • 遊戲服務：負責管理對局、存檔、排行榜等。
    在終端裡執行 npm run dev 啟動專案，本質上就是“在本地開了一個網頁服務”。

<span id="term-frontend-backend">三、和“前端 / 後端 / 資料”有關的詞</span> ​

1. 前端、後端 ​

前端（Frontend）
使用者看得見、點得到的部分：

  • 網頁上的按鈕、文字、圖片、動畫；
  • React / Vue 寫出來的頁面。
    負責展示介面和響應使用者操作（點選、輸入、拖拽等）。

後端（Backend）
使用者看不見、在伺服器上跑的那部分：

  • 存和讀資料（使用者資訊、訂單、分數等）；
  • 執行業務規則（登入驗證、許可權判斷）。
    你可以把前端比作“店面和店員”，後端比作“倉庫和賬本系統”。

2. 介面、請求、響應、JSON ​

介面 / API
前端和後端事先約定好的一套“問問題 + 回答案”的規則。

  • 前端說：“我用這個地址、這個格式來問你”；
  • 後端說：“我用這個格式把結果回給你”。

請求（Request）
前端發給後端的一次“提問”：

  • 請求去哪（URL）；
  • 用什麼方式（GET、POST 等）；
  • 帶了什麼引數（比如使用者 ID）。

響應（Response）
後端給前端的“答覆”：

  • 狀態碼（200 成功，404 找不到，500 伺服器出錯）；
  • 實際資料（多半是 JSON）。

JSON
一種用很像 JavaScript 程式碼的寫法來表示資料的格式，比如：

json
{
  "name": "Alice",
  "score": 120
}

可以理解成“機器版的鍵值對記事本”，前後端經常用它來交換資料。

<span id="term-code-basic">四、和“寫程式碼本身”有關的詞</span> ​

1. 變數、識別符號、狀態 ​

變數（Variable）
“給一塊資料貼上的標籤”。

  • 例如把分數這件事記作 score；
  • 以後用 score 這個名字，就能讀寫這塊資料：
js
let score = 0
score = score + 10

識別符號（Identifier）
“你自己起的各種名字”的統稱：

  • 變數名：score
  • 函式名：moveSnake
  • 元件名：SnakeGame
    就像給資料夾起名“照片”“工作”“賬單”，方便在程式碼裡區分不同“東西”。

狀態（State）
程式當前的“關鍵情況記錄”：

  • 遊戲是不是已經結束；
  • 蛇現在在第幾格；
  • 當前分數是多少。
    在 React 裡，一般會這麼理解：狀態一改，介面就要跟著更新。

2. 函式、元件、模組 ​

函式（Function）
把一件“可以反覆做的事”打包起來，起個名字：

js
function sayHello(name) {
  console.log('Hello, ' + name)
}

以後只要寫 sayHello('Bob')，就等於把裡面那幾行再次執行一遍。

元件（Component）
前端裡的“可以重複用的一塊小介面 + 小邏輯”：

  • 一個按鈕可以是元件；
  • 一個頂部導航可以是元件；
  • 整個遊戲區域也可以是一個元件。
    元件之間可以拼裝，就像搭樂高。

模組（Module）
“一組相關程式碼組成的檔案”：

  • snakeLogic.ts 專門放和“蛇怎麼動”相關的程式碼；
  • score.ts 專門放算分數的程式碼。
    模組之間可以互相“匯入 / 匯出”，像不同抽屜裡的工具。

3. 語法、程式語言、框架 ​

語法（Syntax）
某門程式語言的“語法規則”和“標點習慣”：

  • 字串要加引號；
  • 每條語句末尾要不要寫分號；
  • 程式碼塊要用 \{\} 包起來。
    寫錯語法，編譯器 / 直譯器會直接報“語法錯誤”。

程式語言（Programming Language）
和計算機溝通的一整套規則和詞彙，比如：

  • JavaScript、Python、Java、C++、Go……
    不同語言適合做的事情、寫法和工具生態不同。

框架（Framework）
別人幫你“先搭好骨架”的一大套程式碼和套路：

  • 前端：React、Vue（幫你處理介面更新、狀態管理等）；
  • 後端：Django、Spring Boot 等。
    你等於是在“現成的骨架上填內容”，比從頭造輪子輕鬆很多。

<span id="term-debug">五、和“除錯 / 查錯”有關的詞</span> ​

1. Bug、報錯、日誌 / console.log ​

Bug
程式表現和你想的不一樣，就是 bug：

  • 本來應該出現按鈕，結果沒有；
  • 本來應該加 10 分，結果多加了一堆；
  • 頁面一開啟就白屏。

報錯資訊（Error Message）
程式崩了之後，螢幕上 / 終端裡那段“看起來很嚇人”的英文。
雖然難看，但通常會告訴你：

  • 大致是哪裡錯了；
  • 哪個檔案、第幾行附近需要檢查。
    你可以直接複製它，丟給 AI 讓它翻譯和分析。

日誌（Log）
程式在執行過程中自己“說的話”。
最常見的就是前端裡的：

js
console.log('當前分數', score)

你可以把它理解成：在關鍵步驟主動報個數，方便你確認程式是不是按你想的在走。

console.log 是什麼？

  • console 可以理解為“除錯用的小黑板”；
  • .log 是“在小黑板上寫一行字”；
  • 瀏覽器按 F12 開啟開發者工具裡的 Console 面板，就能看到這些輸出。

2. 除錯、斷點、單步執行、快照 ​

除錯（Debug / 除錯程式）
當程式出問題時，不是上來就亂改，而是：

  • 讓程式在某一行停一下（斷點）；
  • 看一看當前每個變數的值；
  • 一步一步往下走，觀察“從哪裡開始不對勁”。

斷點（Breakpoint）
可以把斷點想成“在這行插了一個暫停按鈕”：

  • 程式平時是一路往下跑；
  • 跑到你插斷點的那一行，會暫時停住，等你檢查。

單步執行（Step）
從斷點停下來之後，你可以選擇：

  • 一行一行往下執行（step over）；
  • 進入某個函式內部詳細看（step into）。
    就像看一段舞蹈分解動作一樣，而不是直接看快放影片。

快照（Snapshot）——簡化理解
這裡的“快照”可以理解為：

在某個時間點，把“當前狀態”拍一張照片，方便以後對比。
在實際工具裡，“快照”可能指：

  • 一次提交時刻專案的完整狀態；
  • 除錯時某個時間點記憶體 / 變數的整體情況。
    你先記住這個比喻就夠用：快照 ≈ 某一刻狀態的留影。

<span id="term-project">六、和“專案管理”有關的詞</span> ​

1. 專案、工作區、資料夾 ​

專案（Project）
為實現一個應用而放在同一個資料夾裡的：

  • 原始碼檔案
  • 配置檔案
  • 素材（圖片、音訊等）

工作區（Workspace）
VS Code / Trae 用來描述“當前這一次開啟了一組什麼東西”的概念：

  • 開啟一個資料夾 → 一個簡單工作區；
  • 有時也會把多個資料夾合併成一個多專案工作區。

2. Git、倉庫、提交（Commit） ​

Git（版本控制工具）
可以理解成專案的“時光機”：

  • 每次改完一批內容，可以“拍一張版本合照”；
  • 以後需要時，可以回到某個歷史狀態。

倉庫（Repository / Repo）
開啟 Git 之後，那個帶“版本記錄”的專案資料夾，就叫“倉庫”。

提交（Commit）
每次你覺得“這波改動算一個階段性成果”，就可以：

  • 寫一條說明（比如：Add score panel）；
  • 把當前全部修改打包成一個版本；
  • Git 會把這一刻的狀態存下來。
    這一次動作就叫“做了一次 commit”。

<span id="term-ai-tool">七、和“AI 開發工具”有關的詞</span> ​

1. AI IDE、Agent、SOLO 模式 ​

AI IDE
在普通 IDE 的基礎上，多了一層“能聽懂人話、能自己動手”的 AI：

  • 你說“做個貪喫蛇”，它能幫你搭專案、寫程式碼；
  • 你把報錯截圖給它，它能先解釋再嘗試修復；
  • 它能跨多個檔案一起改，而不僅僅是一行一行補全。

Agent（智慧體）
可以把 Agent 想象成一個長期待命的 AI 小工程師：

  • 會讀你的專案結構；
  • 會拆解任務（先裝依賴、再生成程式碼、再跑專案）；
  • 跑出錯之後，會根據錯誤資訊自己調整方案。

SOLO 模式（以 Trae 為例）
表示：

你只需要把“終點”說清楚，
它自己規劃“路線”，
在本地一步步執行，
中途纔在關鍵節點問你要不要繼續。

2. 模型、金鑰（API Key） ​

模型（Model，這裡特指大語言模型）
這個詞可以簡單理解為“背後那一大坨 AI 大腦”：

  • 比如 GPT、Claude、Kimi、GLM 等；
  • 不同模型在“理解中文”“寫程式碼”“推理”上水平不一樣；
  • AI IDE 裡通常可以在下拉選單裡換不同模型使用。

金鑰 / API Key
你可以把 API Key 理解為一個很長的“高階密碼 + 身份證號”，
它的作用只有一個：

告訴別人的伺服器：“我是哪個使用者，請允許我使用你們的 AI 服務，並幫我記賬。”

幾個要點：

  • 這串東西通常是一長串隨機字母數字；
  • 不能發到公開的地方（倉庫、截圖、羣聊），別人拿到就可以冒用你的賬號；
  • 在工具裡填 API Key，就等於“把鑰匙插進鎖裡”，之後工具就能幫你呼叫對應的 AI 服務。

<span id="term-browser">八、和“瀏覽器 / 開發者工具”有關的詞</span> ​

Chrome（谷歌瀏覽器）
現在前端開發最常用的瀏覽器之一：

  • 開啟網頁快；
  • 自帶比較強的“開發者工具”，方便查問題。

重新整理（Refresh / Reload）
重新載入當前網頁：

  • 修改前端程式碼後，如果沒有自動重新整理工具，手動按重新整理才能看到效果。

開發者工具（DevTools）
瀏覽器裡專門給開發者用的一組工具面板：

  • 檢視網頁結構（Elements）；
  • 檢視樣式（Styles）；
  • 查錯誤和日誌（Console）；
  • 查網路請求（Network）。
    在 Chrome 裡通常按 F12 或 Ctrl+Shift+I 開啟。

Console（控制檯）
開發者工具裡的一個標籤頁，專門展示：

  • 你寫的 console.log(...) 輸出；
  • 執行過程中發生的錯誤（紅字）。
    你可以當它是“程式的聊天框”：
  • 程式有話要說，就寫在這裡；
  • 你除錯時最常看的就是這一塊。

如果後面你在學習過程中又遇到新的詞，也可以按這個風格讓 AI 協助你補充全部內容：

  • 先寫一句“它是幹嘛的”；
  • 再寫一句“可以把它想象成什麼”；
  • 最後給一個特別簡單的小例子。
    這樣你的“個人術語表”會越長越實用，逐漸能夠更好的與計算機進行溝通。