帳號 · 登入 · 授權
新手不卡關指南

讀後面內容之前，先把這幾個字弄白話。不用背、知道大概意思就好——AI 跟你討論時、彈窗跟你要授權時，你看得懂在說什麼，就贏了一半。

① OAuth：你按下「使用 Google 登入」時發生了什麼？

OAuth 是「不用把密碼給對方，也能讓對方幫你做事」的協議。中文叫「授權」最貼切。

所以你看到「Continue with GitHub」、「Sign in with Google」這種按鈕，後面跑的全部是 OAuth 流程。授權頁列出來的權限（例：「Read your repositories」），就是那張鑰匙能開哪些抽屜——看清楚再點允許。

② API：程式之間的「點菜窗口」

API（Application Programming Interface）＝程式跟程式講話用的菜單。

③ API Key、Token、Secret —— 三胞胎差在哪？

都是「一串長長的亂碼」，但用途略有不同：

④ 環境變數 與 .env 檔

「不寫進程式碼、但程式跑起來可以讀到」的設定值。專門用來放 API Key、資料庫密碼這種敏感資料。

# .env （這個檔案要加進 .gitignore，不能 push 上 GitHub）
ANTHROPIC_API_KEY=sk-ant-api03-xxxxxxxxxxxx
DATABASE_URL=postgres://user:pass@host/db

程式碼裡只寫 process.env.ANTHROPIC_API_KEY。原始 Key 永遠不出現在 Git 歷史裡。部署到 Vercel / Cloudflare 時，這些變數要在它們後台「Environment Variables」設一次。

⑤ CLI / Terminal / Shell：那個黑色畫面是什麼

CLI ＝ Command Line Interface＝「用打字下指令操作電腦」。Terminal 是裝它的窗口、Shell 是裡面跑的解譯器（bash / zsh / PowerShell）。三個常被混用，意思差不多。

• Windows：開「PowerShell」或「Windows Terminal」（推薦後者）
• Mac：開「終端機 / Terminal」
• VS Code / Antigravity 內建：Ctrl + `（鍵盤左上那個反引號）就跳出來

⑥ localhost 與 port：3000、5173、8080 都是什麼？

AI 跑你的網站時，常會跟你說「打開 http://localhost:3000」。

• localhost = 你自己的電腦。網址只在你電腦看得到，別人看不到。
• :3000 = port（埠號）。一台電腦可以同時跑很多服務，用 port 來分——3000 是 Next.js 慣用、5173 是 Vite、8080 是常見後端。

⑦ JSON：AI 跟程式都愛用的格式

JSON 是「用大括號和方括號寫的資料格式」。長這樣：

{
  "name": "小明",
  "age": 18,
  "hobbies": ["vibe coding", "睡覺"],
  "isStudent": true
}

API 回傳的、設定檔（package.json、tsconfig.json）、AI 跟你討論資料時——幾乎都是 JSON。看到大括號別怕，照念就行：「name 是小明、age 是 18」。

⑧ HTTP 狀態碼：那些 200、404、500 的意思

瀏覽器跟伺服器要東西，伺服器會回三位數的「狀態碼」。看開頭數字就知道大方向：

⑨ Bonus：還有這些詞你會遇到

• repo：repository 縮寫。一個專案資料夾。
• commit：存檔點。每次寫一段就 commit 一次。
• push / pull：把本機 commit 推上 GitHub / 把雲端拉下來。
• branch：分支。同一個 repo 開不同版本平行做事。
• merge：把分支合併回主線。
• PR（Pull Request）：「我這個分支寫好了，請審核合併」的請求書。
• localhost vs production：本機開發 vs 正式上線。
• frontend / backend：使用者看得到的（瀏覽器內）/ 看不到的（伺服器上）。
• deploy：把寫好的東西放到網路上讓別人用。
• build：把原始碼變成瀏覽器看得懂的最終版本（壓縮、打包）。
• npm / pnpm / yarn：JavaScript 的套件管理工具。npm install = 把專案需要的零件下載齊。
• node_modules / venv：被下載的零件放在這裡。都很大、都不用 push 上 GitHub。

GitHub 是「給程式碼用的 Google Drive」——但比 Drive 多了三件事：版本紀錄、跟別人協作、跟一鍵部署。AI 寫好的東西要放到網路上讓人看到，多半都會經過 GitHub。

用了它你就有的三個能力

• 版本回溯：今天改壞了？昨天的版本還在，一鍵還原。
• 多裝置同步：家裡電腦寫一半，公司電腦接著寫。
• 一鍵上線：Vercel、Cloudflare Pages、GitHub Pages 都直接讀 GitHub。push 一次，網站自己更新。

整個流程約 3 分鐘。免費版就夠你做很多事，學生還能加碼領 Student Pack（後面講）。

Repository（簡稱 repo）＝一個專案。每個作品一個 repo，互相獨立。

除了存程式碼，新手最該知道的有這幾個：

有 index.html 的靜態網站？最快、最免費的部署方式：GitHub Pages。主站、Antigravity 教材這頁，就是這樣發佈的。

Apps Script 是 Google 內建的 JavaScript 平台，跑在 Google 的伺服器上，不用安裝、不用買主機。它最強的地方是：跟 Google 全家桶（Sheets / Gmail / Calendar / Drive / Forms）原生整合，幾行 code 就能做出別人要付費才能做的小工具。

新手最常拿來做這些

• 表單自動回信：Google 表單收到回覆 → 自動寄客製 email
• Google Sheet 自訂函數：寫一個 =MYTRANSLATE(A1) 在試算表裡用
• 排程任務：每天早上 8 點抓股價 / 匯率寫進 Sheet
• 把 Sheet 變成 API / Web App：手機 App 也能拿資料
• Gmail 批次處理：自動分類信件、抓附件存 Drive

不用申請帳號、不用裝軟體。有 Gmail 就有 Apps Script。

// 範例：把今天的日期寫進新建的 Sheet
function myFunction() {
  const ss = SpreadsheetApp.create('今日日期 - 由 Apps Script 建立');
  const sheet = ss.getActiveSheet();
  sheet.getRange('A1').setValue('今天是');
  sheet.getRange('B1').setValue(new Date());
  Logger.log('Sheet 網址： ' + ss.getUrl());
}

方案 A · 每天自動跑（觸發條件 / Triggers）

在 Apps Script 編輯器左側時鐘 ⏰ 圖示「觸發條件」→ 新增觸發條件。選你的函式、來源「時間驅動」、頻率「每天 / 每小時」。完。

方案 B · 變成可訪問的網址（Web App）

跑 Antigravity 或 Claude Code 的時候，瀏覽器常常自動彈出一個又一個要登入、要授權的頁面。不是病毒，是這些工具要代你去操作各種服務，第一次都得拿到你的同意。下面這張表是你會遇到的全部。

「寫好的網站怎麼讓別人用？」就靠這幾家。三家都有免費方案，註冊都用 GitHub OAuth 一鍵搞定。

當 AI 寫的程式裡有「呼叫 ChatGPT / Claude / Gemini」這種功能時，程式本身需要 API Key 才能跟 AI 說話——這跟你登入 IDE 是兩回事。下面是三大家的 Key 在哪裡拿。

單純展示型網站不用資料庫；要存使用者、訂單、留言就需要。新手最常碰到的兩家：

下面這幾份是 2026 年中文圈裡最值得看的入門資源，從零基礎到進階都有。讀順序：頭兩個免費、講得最白；其他按興趣選讀。

• 分清楚兩種登入：「登入 IDE 用 AI」 vs 「拿 API Key 給程式用」。前者是你跟 IDE 的事，後者是程式碼跟 AI 服務的事。
• 每註冊一個服務，截圖存雲端。三個月後你會忘記哪個 email 註冊的、哪個方案、用哪張卡。
• 所有後台都開 2FA：GitHub、Vercel、Anthropic、OpenAI——尤其是綁卡的。
• 免費版額度要會看：不是「免費＝無限」。爆量時不是收錢，是直接停服。
• 學一次，用一輩子：GitHub / OAuth / API Key 這套基礎，不管你之後玩 Antigravity、Cursor、Claude Code，邏輯都一樣。今天裝起來，未來省下無數小時。