← → 翻页 · ESC 索引
生成式 AI 職訓 140hr · 弄一下工作室
D00 / 20 講義 · ENV-SETUP
D00 · Pre-class · 1.5–2 hr

環境設定

把工具裝備一次到位，再開課

Part 5–7 的內容會跑真實程式碼。
這份 Pre-class 簡報帶你完成所有帳號 / 安裝 / 部署，讓 D01 可以直接開練。

Vol.00·Pre-class·D00 / 20·環境準備 · 帳號註冊 · 工具裝備
Duration · 1.5–2 小時 · Pre-class
Contact·sky8697@gmail.com
本場為 140hr 全課程的前置裝備
— D00 / 20 —
The Premise · 為何要 Pre-class
02 / 30 講義 · ENV-SETUP
The Premise · 開場主張
先把工具備齊， 再開始走 140 小時。

開課當天才裝環境，會吃掉你三節課的時間。
這 1.5–2 小時的 Pre-class，是讓後面 138 小時不被技術瑣事卡住的投資。

— D00 核心主張·裝備先於學習
Page 02 · The Premise
— Pre-class —
D00 · Learning Outcomes
03 / 30 講義 · ENV-SETUP
OUTCOMES · 完成 Pre-class 之後

三件事都備齊

不是「聽過」，而是「打開電腦就能開工」。

Outcome 01
三大帳號
ChatGPT / Claude / Anthropic Console 都能登入，第一支 API Key 已收進密碼管理工具。
Outcome 02
本機環境
Node.js / VS Code / 終端機都裝好，跑得起 hello world 與最小後端代理。
Outcome 03
部署管線
GitHub + Vercel 已串接，hello 頁面有公開網址，後面 Part 5–7 直接接續。
Page 03 · 學習目標 · 1.5–2 hr
3 Outcomes · D00
第一幕 · 工具帳號
Act I · 04 / 30
Act I · 35–45 min · 4 個帳號

先把帳號開好

ChatGPT · Claude · Console · Gemini

這四個帳號決定你 140 小時能不能順暢操作。
免費版可以走 Part 1–4，付費或 API Key 才解鎖 Part 5–7。

Act I 開幕
— 工具帳號註冊 —
Two Paths · 兩條路徑
05 / 30 講義 · ENV-SETUP
Path Choice · 你今天要全裝還是半裝

走哪條路，決定要裝多少

Path A · AI 工作應用

Part 1–4 · 約 78 hr

  • Prompt 設計 / 文書 / 資料清理 / 零代碼
  • 只需 ChatGPT 或 Claude 帳號
  • 不裝 Node / Git / Vercel 也能上完
  • 本場後半可以放鬆聽，當作預習
Path B · AI 應用開發

Part 5–7 · 約 62 hr

  • 前端 / API / 部署 / RAG / 專題
  • 需要 Console API Key + Node + Git + Vercel
  • 本場全部要做完才能進 Part 5
  • 建議所有人都當 Path B 來裝
Page 05 · Path Choice
建議裝到 Path B 為止
Tool Comparison · 兩家主流模型
06 / 30 講義 · ENV-SETUP
OpenAI vs Anthropic · 都要有

兩家各有所長

ChatGPT · OpenAI

通用聊天 · 多模態最齊

  • Plus 月費 USD 20 解鎖 GPT-5 / 圖像 / 語音
  • 內建 Canvas、Code Interpreter、GPTs
  • 免費版有限制但夠 Part 1 走完
  • Part 1–2 主要拿來練 Prompt 基礎
Claude · Anthropic

長文 · 程式 · API 主力

  • Pro 月費 USD 20 解鎖 Sonnet 4 / Opus / Projects
  • 200K context 是文件處理首選
  • Part 5–7 的 API Key 一律用 Anthropic
  • 程式輔助生成品質目前最穩
Page 06 · 不要二選一，兩家都註冊
D00 · Act I
Step 1 · ChatGPT 帳號
07 / 30 講義 · ENV-SETUP
Account Setup · 5–8 分鐘

ChatGPT 四步註冊

用個人 Gmail，不要用公司信箱（避免被資安政策擋掉）。

Four Steps · 順序操作
Step 1
前往 chatgpt.com
點右上「Sign up」，建議直接用「Continue with Google」省去 email 驗證。
Step 2
填姓名 + 生日 + 手機
手機要能收簡訊驗證碼，台灣門號可正常使用。
Step 3
選擇方案
先選 Free 進場試一輪。確定要走 Part 5–7 再升 Plus（USD 20 / 月）。
Step 4
建立第一個對話
輸入「你是誰、能做什麼」確認帳號可用，順手把網頁加到瀏覽器書籤。
Page 07 · ChatGPT
4 Steps · 互動式翻頁
Step 2 · Claude 帳號
08 / 30 講義 · ENV-SETUP
Account Setup · 5 分鐘

Claude 三步開通

Step 1
前往 claude.ai → 點「Sign up」→ 用 Google 帳號登入（同 ChatGPT 帳號即可）
2 min
Step 2
填名字 + 用途（選 Personal）→ 同意條款 → 進入主對話介面
1 min
Step 3
輸入「請用一句話介紹你自己」→ 確認回覆正常 → 加入瀏覽器書籤
2 min
付費判斷：Free 版每天約 30 條訊息上限，會卡住長對話。如果課程有預算，升 Pro（USD 20 / 月）解鎖 Sonnet 4 + Projects 功能；Part 5–7 的程式生成幾乎都靠 Claude 撐起來。
— D00 推薦：兩家都付費，月支出 USD 40
Page 08 · Claude
3 Steps · D00 · Act I
Step 3 · Anthropic Console + API Key
09 / 30 講義 · ENV-SETUP
API Access · Part 5–7 必備

第一支 API Key

Console 是另一個獨立站台（不是 claude.ai）。Key 只會顯示一次，請馬上存進密碼管理器。

Step 1
前往 console.anthropic.com，用同一個 Google 帳號登入
1 min
Step 2
左側「Plans & Billing」→ 加信用卡 → 預存 USD 5（學員額度足夠走完課程）
3 min
Step 3
「API Keys」→「Create Key」→ 命名 gen-ai-140h-local → 複製出現的 sk-ant-api03-...
1 min
Step 4
立刻貼進密碼管理器（1Password / Bitwarden / Apple Keychain）→ 視窗關掉就再也看不到
1 min
金鑰外洩 = 燒錢警報。Key 不要貼到 Discord、LINE、Slack、GitHub。本場後半會教 .env + .gitignore 防護。
→ Part 6 之前都不會直接呼叫 Console
Page 09 · API Key
D00 · Act I
Step 4 · Gemini · NotebookLM · 順手開
10 / 30 講義 · ENV-SETUP
Bonus Accounts · 5 分鐘掃過

另外兩個會用到的帳號

Gemini · Google AI Studio

Deep Research 主力

  • gemini.google.com 用 Google 帳號直接登入
  • Deep Research 可以讀整份 PDF + 連網交叉驗證
  • Part 2 研究整理會用到
  • 免費額度足夠課程使用
NotebookLM

個人知識庫 RAG

  • notebooklm.google.com 同樣 Google 帳號登入
  • 上傳 50 份文件 + 自動生成 Audio Overview
  • Part 6 教 RAG 之前的入門體驗
  • 完全免費
Page 10 · Gemini · NotebookLM
Act I 收束
第二幕 · 環境設定
Act II · 11 / 30
Act II · 45–60 min · 6 個安裝

把電腦變開發機

終端機 · Node · VS Code · 後端代理

接下來六個步驟全部在你的電腦上跑。
Mac / Windows 兩條路徑並陳，請鎖定自己的作業系統往下做。

Act II 開幕
— 環境設定 —
Step 0 · 終端機
12 / 30 講義 · ENV-SETUP
Before You Start · 先認識終端機

後面所有步驟都靠它

Mac

⌘ + 空白 → Terminal

  • Spotlight 搜「Terminal」按 Enter
  • 進階：iterm2.com 下載 iTerm2（免費更好用）
  • 預設 shell 是 zsh
  • 關掉視窗 = 結束 session
Windows

Win + X → Terminal

  • 選「Windows Terminal」或 PowerShell
  • Microsoft Store 可裝 Windows Terminal
  • 本課程一律用 PowerShell 而非 cmd
  • 關掉視窗同樣結束 session
終端機心態：輸入指令 → 看輸出 → 沒有錯誤訊息就代表成功。錯誤訊息整段貼給 AI，是最快的除錯方式。
— D00 第一個觀念
Page 12 · 終端機
Act II · 開頭
Step 1 · Node.js Runtime
13 / 30 講義 · ENV-SETUP
Node.js · LTS 版本

安裝 Node.js

Node.js 讓電腦能跑 JavaScript。它附帶的 npm 是後面所有套件的入口。

Three Steps · 一直按下一步即可
Step 1
下載 LTS 版本
前往 nodejs.org → 點左側「LTS」綠色按鈕（不要點 Current）。版本 18 / 20 / 22 開頭都可以。
Step 2
執行安裝程式
所有選項保持預設，一直 Next 到完成。Mac 會要求輸入系統密碼。
Step 3
驗證安裝
開終端機輸入 node --version 與 npm --version。看到版本號（如 v22.x.x / 10.x.x）就成功。
「找不到命令」怎麼辦：關掉終端機重開一次。Windows 還沒生效就重開機。
→ 90% 的卡關都靠重開解決
Page 13 · Node.js
3 Steps · 互動式翻頁
Step 2 · VS Code Editor
14 / 30 講義 · ENV-SETUP
Editor · 程式碼編輯器

安裝 VS Code 與兩個必裝插件

已經有別的編輯器（Sublime / Atom / Notepad++）也建議裝 VS Code，課程的 AI 插件示範都對照它。

下載
code.visualstudio.com → 抓對應 OS 的安裝檔 → Next 到完成
3 min
插件 1
ESLint（Microsoft 出品）→ 抓 JavaScript 語法錯誤
1 min
插件 2
Prettier - Code formatter（Prettier 出品）→ 自動排版程式碼
1 min
內建終端機
按 Ctrl + `（Mac 是 ⌃+`）開啟，不用切換視窗就能跑指令
設定一次
之後 Part 5 會再加：Live Server、GitHub Copilot Chat 或 Claude Code 插件。今天先把這兩個基本款備好。
— Part 5 開始才需要
Page 14 · VS Code
Act II · Step 2
Step 3 · First Project · Hello World
15 / 30 講義 · ENV-SETUP
First Run · 確認 Node 正常

跑起 Hello World

用最小範例驗證 Node.js + VS Code 串得起來。

Three Steps · 5 分鐘完成
Step 1
建立專案資料夾
終端機輸入 mkdir my-ai-project 再 cd my-ai-project。
Step 2
VS Code 開資料夾 + 建 hello.js
File → Open Folder → 選 my-ai-project。新增 hello.js，內容：console.log('Hello, World!');
Step 3
執行 + 確認輸出
終端機輸入 node hello.js。看到 Hello, World! 就過關。
過關意義：Node.js 安裝沒問題、VS Code 能存檔、終端機能找到 node 命令。三件事一次驗收。
→ 失敗就回 Step 1 檢查 PATH
Page 15 · Hello World
3 Steps · 互動式翻頁
Step 4 · .env · 金鑰守則
16 / 30 講義 · ENV-SETUP
Secrets · API Key 怎麼放

建立 .env 與 .gitignore

.env 是「環境變數」檔案，用來放 API Key。
.gitignore 告訴 Git 不要把 .env 推上 GitHub。兩個一起做，缺一不可。

.env 內容
ANTHROPIC_API_KEY=sk-ant-api03-你的金鑰（等號兩邊不要有空格）
1 行
.gitignore 內容
.env 換行 node_modules/（兩行）
2 行
檔名注意
兩個檔案都以點開頭，沒有副檔名。VS Code 會把它們收在資料夾最上方
易踩雷
外洩警報：Key 一旦被推上 GitHub 公開 repo，會在分鐘級被爬蟲撈走。撈到後別人會用你的帳號狂呼叫，月底帳單可能直接 USD 數百起跳。絕對先做 .gitignore，再貼金鑰。
— D00 最重要的安全規則
Page 16 · 金鑰守則
Act II · Step 4
Step 5 · 第一個後端
17 / 30 講義 · ENV-SETUP
Backend · Express + Claude SDK

跑起第一個後端代理

Pre-class 的最關鍵一步：本機跑得起 API 代理服務，後面 Part 6 才接得上。

Three Steps · 安裝 → 寫 → 跑
Step 1
安裝 4 個套件
在專案目錄執行 npm init -y，再 npm install express @anthropic-ai/sdk dotenv cors。
Step 2
建立 server.js
複製講義裡的最小代理代碼（require dotenv → express → Anthropic → POST /api/chat → listen 3000）。約 25 行。
Step 3
啟動 + 確認 port
執行 node server.js → 看到 Server running at http://localhost:3000 → 瀏覽器打開該網址。
停止後端：終端機按 Ctrl + C（Mac 也是 Ctrl，不是 ⌘）。每次重新開發前要記得重新跑 node server.js。
→ Part 6 開始整堂課都會跑著它
Page 17 · 後端代理
3 Steps · 互動式翻頁
Cheat Sheet · 安裝指令速查
18 / 30 講義 · ENV-SETUP
Cheat Sheet · 全部抄一遍

本場用過的所有指令

node --version
驗證 Node.js 安裝成功，回 v18+ / v20+ / v22+
確認
npm --version
驗證 npm 套件管理器，回 10.x.x
確認
mkdir my-ai-project
建立專案資料夾（名稱自取）
建立
cd my-ai-project
切換到專案資料夾
移動
npm init -y
建立 package.json，所有問題接受預設
初始化
npm install express @anthropic-ai/sdk dotenv cors
一次裝 4 個套件，會生 node_modules/ 資料夾
安裝
node server.js
啟動後端代理，跑在 port 3000
執行
Ctrl + C
停止後端（Mac 也是 Ctrl，不是 ⌘）
停止
Page 18 · Cheat Sheet
Act II · 整理
Checklist · 環境驗收 6 項
19 / 30 講義 · ENV-SETUP
Checklist · 全部打勾才放行

環境驗收清單

六項全綠才算 Act II 結束。任何一項紅燈，回對應頁重做。

★ 1
node --version 與 npm --version 都顯示版本號
P.13
★ 2
VS Code 能開啟資料夾、ESLint + Prettier 兩插件已裝
P.14
★ 3
node hello.js 看到 Hello, World!
P.15
★ 4
專案目錄有 .env / .gitignore / server.js / package.json 四個檔
P.16
★ 5
node server.js 顯示 Server running at http://localhost:3000
P.17
★ 6
.gitignore 裡確認有 .env 與 node_modules/
P.16
Page 19 · Checklist
Act II 收束
第三幕 · Git 與 Vercel
Act III · 20 / 30
Act III · 25–35 min · 兩個帳號 + 一次部署

把作品送上線

GitHub · Vercel · 第一個公開網址

Part 5 的所有專案都會推 GitHub、部署 Vercel。
今天把帳號開好、把流程跑一輪，後面就是肌肉記憶。

Act III 開幕
— Git · Vercel —
Why Git · 為什麼要學版本控制
21 / 30 講義 · ENV-SETUP
The Problem

沒 Git 的命名地獄：
「最終版_v3_真的最後.html」

AI 生程式碼的速度極快，一天可以改 30 次，沒版控就是災難。

Git 替你解決三件事：
・每次改動都能回溯
・一份程式碼能在多台電腦同步
・部署到 Vercel / Netlify 都依賴它
— Part 5 開始全程使用
Therefore · 三件事就夠

本課程不教複雜的 Git 工作流，只練三組指令：

  • git add . / commit -m：存檔點
  • git push：推上 GitHub
  • git clone / pull：拉回來

三組命令 = 90% 的日常使用。

Page 21 · Why Git
Act III · 開頭
Step 1 · GitHub 帳號 + Git 安裝
22 / 30 講義 · ENV-SETUP
GitHub · 全球最大程式碼託管

申請 GitHub + 裝 Git

Step 1
前往 github.com → Sign up → 用 Gmail 註冊 → 收信驗證
3 min
Step 2
設 username（會變成 URL 一部分，如 github.com/你的名字，慎選）
2 min
Step 3
Mac：終端機輸入 git --version 通常已內建。Windows：去 git-scm.com 下載安裝
5 min
Step 4
設 Git 身份：git config --global user.name "你的名字" + user.email
1 min
Step 5
第一次 push 時 GitHub 會要 Personal Access Token（不是登入密碼）→ Settings → Developer Settings → Generate
5 min
SSH vs HTTPS：本課程一律走 HTTPS + Personal Access Token。SSH 設定成本高，等做完課程再轉。
— D00 推薦的最低門檻路徑
Page 22 · GitHub
Act III · Step 1
Cheat Sheet · Git 命令對照
23 / 30 講義 · ENV-SETUP
Cheat Sheet · 三組命令打天下

Git 日常 8 條

git init
把目前資料夾變成 Git repo（一次性）
建立
git status
看哪些檔案改了 / 哪些還沒加入追蹤
查看
git add .
把所有改動加入下一次 commit
暫存
git commit -m "訊息"
建立一個存檔點，訊息描述這次改了什麼
存檔
git remote add origin URL
把本機 repo 連到 GitHub 上的 repo（一次性）
連線
git push -u origin main
第一次推上 GitHub，之後只要 git push
推送
git pull
把 GitHub 上的最新版本拉回本機
拉取
git clone URL
把別人或你自己的 GitHub repo 整份抓下來
複製
Page 23 · Git Cheat
Act III · 整理
Step 2 · Vercel 帳號
24 / 30 講義 · ENV-SETUP
Vercel · 一鍵部署平台

串接 Vercel 與 GitHub

Vercel 是「把 GitHub repo 變成公開網址」的平台。免費額度個人使用綽綽有餘。

Step 1
前往 vercel.com → Sign up → 點「Continue with GitHub」直接綁定
2 min
Step 2
授權 Vercel 讀取 GitHub repo（建議選 All repositories，省日後設定）
1 min
Step 3
填團隊名（個人就用自己 username）→ 選 Hobby 方案（免費）→ 進入 Dashboard
2 min
Step 4
右上「Add New」→「Project」→ 看到自己的 GitHub repo 列表 = 串接成功
確認
替代方案：GitHub Pages 也免費（純靜態），Netlify 與 Vercel 體驗類似。本課程用 Vercel，因為 Part 6 有 serverless function 需求。
— Part 4–5 開始正式使用
Page 24 · Vercel
Act III · Step 2
Step 3 · 部署第一個 hello 頁
25 / 30 講義 · ENV-SETUP
First Deploy · 拿到第一個公開網址

把 hello.html 推上線

用最簡單的 HTML 跑完一次「本機 → GitHub → Vercel」全流程。

Three Steps · 第一個公開網址
Step 1
建立 hello.html + 推 GitHub
在新資料夾放一個 hello.html（任意內容） → git init / add / commit / push 到新 repo。
Step 2
Vercel 匯入
Vercel Dashboard → Add New Project → 選剛剛的 repo → Framework Preset 選 Other → Deploy。
Step 3
拿到 .vercel.app 網址
約 30 秒部署完成 → 點「Visit」看到 hello.html 內容 = 成功。網址形如 your-project.vercel.app。
之後只要 git push，Vercel 會自動重新部署。這個自動化是 Part 5 後段所有專案的部署模式。
→ 按 → 鍵或滾輪逐步點亮
Page 25 · First Deploy
3 Steps · Act III 收束
第四幕 · 收束
Act IV · 26 / 30
Closing · 還有三件事帶走

離開前還要做

Pre-test · Portfolio · Progress

工具備齊只是身體上的準備，
接下來三個工具是課程旅程的地圖與帆布。

Act IV 開幕
— 收束 —
Pre-test · 課前測 5 題
27 / 30 講義 · pre-test
Pre-test · 3 分鐘 · D01 前完成

離開前先做課前測

5 題決定你 D01–D03 要不要快進。
只有 5 分滿分才能跳過 Part 1 前兩章；其他人從頭走完整路徑會更穩。

什麼測
5 題選擇
Prompt 基礎、AI 工具選擇、自動化思維、API 概念、部署直覺。
怎麼用
即時計分
交卷後立刻給分數 + 建議路徑。資料只存在你的瀏覽器。
何時做
D01 之前
本場結束後當天做完。D01 開場會問每個人的成績作為分組依據。
Page 27 · Pre-test
Act IV · 帶走任務 1
Tools · my-portfolio · my-progress
28 / 30 講義 · my-portfolio
Two Tools · 整門課的旅程紀錄

兩個個人工具先認識

my-portfolio.html

作品累積帆布

  • 140h 中所有作品 / 反思 / 證據
  • 資料只存瀏覽器（localStorage）
  • 可一鍵匯出 .json / Markdown
  • D19 畢業 showcase 直接拿這個用
my-progress.html

56 單元進度儀表

  • 56 單元已讀 / 未讀總覽
  • 留下反思 / 作品 / 同儕 = 自動算已讀
  • 含 Part 進度條與單元矩陣
  • 每週上課前花 1 分鐘看一眼
Page 28 · 兩個個人工具
Act IV · 帶走任務 2
The Map · D00 在 20 deck 體系裡的位置
29 / 30 講義 · 課程總覽
The Map · D00 之後的旅程

D00 的裝備，會這樣回來

D01 · Kickoff
CH1-1 + 課程地圖 + my-portfolio / my-progress 開機 → 用 ChatGPT / Claude 帳號
3 hr
D02–D03 · Part 1
Prompt 公式 / 除錯 / System Prompt → 全程 Claude 或 ChatGPT 操作
18 hr
D04–D09 · Part 2–4
文書 / 資料 / 自動化 / 工具生成 → 加上 Gemini Deep Research + NotebookLM
60 hr
D10–D12 · Part 5
前端 / Git / Vercel 全面登場 → 今天 Act II + Act III 的成果直接接續
24 hr
D13–D16 · Part 6
API / Function Calling / RAG → API Key 與 server.js 上場
22 hr
D17–D19 · Part 7
專題開發 + 畢業 showcase → my-portfolio 累積的 56 單元成果一次呈現
20 hr
Page 29 · The Map
下一站 · D01 Kickoff
D00 · End
30 / 30
To Be Continued

這只是開機。

D01 · Kickoff · 3 小時
把 D00 備好的工具，正式接入 140 小時的學習。

弄一下工作室·生成式 AI 職訓 140hr·2026
Contact·sky8697@gmail.com
D00 · Pre-class 完整收束
— Next · D01 Kickoff —