看懂電腦的世界（認知日）

Section 1 | 開場：自我介紹 + 問題診斷 + 打臉 Demo（1hr）

目標：認識彼此、蒐集學員的真實痛點、製造落差感

講師自我介紹（5min）

簡短介紹自己的背景：

• 做過什麼、教過什麼
• 為什麼要開這門課
• 這兩天結束後，你會帶走什麼

學員自我介紹 + 提出 3 個問題（25min）

每位學員用 1 分鐘自我介紹，同時提出：

講師同步做的事：

• 白板上開一個區域，記錄每位學員提出的問題
• 分類歸納：哪些是「資料搬運」、哪些是「客服回覆」、哪些是「報表整理」
• 即時思考這些問題在後面哪個 Section 會被解決

為什麼要在開場做這件事：

1. 學員提出的問題就是這兩天的教學素材——比你準備的案例更有共鳴
2. 讓學員從一開始就投入，不是被動聽課
3. 你可以根據學員的問題分佈，動態調整後面的教學重點

打臉 Demo（15min）

從白板上挑一個最常見的問題類型（通常是「資料搬運」或「客服回覆」）。

如果最多人提的是 LINE 相關的重複操作，就用 LINE OA 案例：

手動做法 demo：

打開 LINE OA 管理後台，展示手動回覆/發通知的流程：

• 開後台 → 找到客戶訊息 → 閱讀、判斷、打字回覆 → 下一則 → 重複

腳本做法 demo：

切到終端機，跑一個腳本——自動讀取、分類（詢價/投訴/預約/閒聊）、套模板回覆。

導入五感框架（10min）

白板畫出五感圖，後續每教一個概念就回來打勾。

開始用 AI 拆解問題（5min）

這個動作會貫穿整個 Day 1——學員一邊聽課、一邊用 Chat 跟 AI 討論自己的問題。

Section 2 | GUI、CLI、DB — 你跟電腦互動的三種方式（1.5hr）

目標：理解人和電腦之間的三種互動方式，以及為什麼 AI 需要 CLI

這三個東西不是上下堆疊的「層」，而是三種不同性質的東西：

• GUI = 人操作電腦的介面（給人看的、用滑鼠點的）
• CLI = 人或程式對電腦下指令的方式（打字下命令）
• DB = 資料靜態儲存的地方（像倉庫，東西放在裡面等你來拿）

GUI — 給人看的操作介面（25min）

開場：打開蝦皮賣家後台，投影給全班看。

拆穿 GUI 的本質：

點開一張蝦皮訂單 → 按 F12 打開 DevTools → 指著原始碼：

帶入蝦皮 API 關閉的痛點：

呼應課程邏輯：

CLI — 用指令跟電腦溝通（25min）

什麼是 CLI：

同一件事的 GUI vs CLI 對比 demo：

投影兩邊畫面：

為什麼學員不需要背指令：

回扣五感：CLI = AI 的手和腳（白板打勾）

DB — 資料住的地方（25min）

從 Excel 切入：

打開一個 Google Sheet，裡面是客戶清單（姓名、電話、LINE ID、最近訂單日期）。

Google Sheet vs 真正的 DB：

切到 Supabase 畫面，同樣一張客戶表：

具體案例：

SELECT * FROM customers WHERE last_order < NOW() - INTERVAL '30 days'

DB 是靜態的，不是程式：

回扣五感：DB = AI 的記憶（白板打勾）

Section 2 小結（15min）

白板畫三個圈，不是堆疊的層：

    ┌──────────┐
    │   GUI    │  ← 人跟電腦互動的介面（看、點、拖）
    └──────────┘

    ┌──────────┐
    │   CLI    │  ← 用指令跟電腦溝通（AI 的手腳）
    └──────────┘

    ┌──────────┐
    │    DB    │  ← 資料儲存的倉庫（AI 的記憶）
    └──────────┘

    GUI 讓你看到結果
    CLI 讓 AI 做事
    DB 把資料存起來

Section 3 | Markdown + Obsidian + Git（1.5hr）

目標：理解 AI 的記憶系統，安裝 Obsidian 並打開 Vault 模板

Markdown — LLM 的母語（20min）

開場：投影 .docx vs .md 的對比截圖

左邊畫面：用 VS Code 打開一個 .docx 檔的原始碼，裡面全是 XML 標籤和隱藏格式碼。
右邊畫面：同樣內容的 .md 檔，乾乾淨淨的純文字。

投影 AI 回覆的截圖，指著粗體、清單、標題：

即時 demo：在 Obsidian 裡打 Markdown

打開 Obsidian，新建一個空筆記，一邊打一邊讓學員看即時渲染效果：

# 公司簡介              ← 打完 # 立刻變大標題
## 我們的服務            ← 次標題
- 蝦皮代營運             ← 自動變項目符號
- **LINE OA 自動回覆**   ← 即時變粗體
> 這是客戶說的話          ← 變成引用區塊

基本語法速覽（投影片留著，讓學員截圖回去看）：

Obsidian — AI 跟你共用的工作台（45min）

為什麼用 Obsidian，不用 Notion 或 Google Docs？（10min）

投影三個 logo，逐一解釋：

白板畫對比表：

安裝 + 開啟 Vault 模板（10min）

投影片放 QR Code → Google Drive 下載 Vault 模板 + Obsidian 安裝檔。

全班一起操作：

1. 安裝 Obsidian（事前通知但一定有人沒裝）
2. 打開下載的 Vault 模板
3. 走一遍結構，每個資料夾都解釋用途：

我的AI工作站/
├── CLAUDE.md          ← AI 的員工手冊（Day 2 才填）
│                         AI 一打開 Code tab，第一個讀的就是這個檔案
│                         就像新員工報到第一天看的交接文件
│
├── 知識庫/             ← 你的公司知識——產品規格、報價邏輯、客服話術
│                         放「不會過期」的東西，像百科全書
│
├── 流程/               ← SOP——退貨怎麼處理、報價單怎麼開
│                         放「反覆執行」的步驟，像食譜
│
├── AI素材/             ← Day 3-4 做 AI 專案時的素材和產出
│                         放「有生命週期」的東西，像工地
│
└── Inbox/             ← 隨手記——想到什麼先丟這裡
                          放「還沒分類」的東西，像你桌上的收件匣

CLAUDE.md 預告（3min）

打開模板裡的 CLAUDE.md，讓學員看到空白的結構：

學員實作練習（22min）

分成四個小步驟，每步驟做完舉手確認：

Step 1：新建筆記（3min）

Step 2：打 Markdown 語法，看即時渲染（5min）

讓學員照著打：

# 我的公司簡介
## 基本資訊
- 公司名稱：（填你的）
- 主要業務：（填你的）
- 使用的平台：蝦皮 / LINE OA / 其他

## 每天最煩的三件事
1. **第一件**：（想一想填進去）
2. **第二件**：
3. **第三件**：

> 如果 AI 能幫我解決其中一件，我最希望是......

Step 3：建立 wikilink（7min）

讓學員在筆記裡打 [[CLAUDE.md]]，看到自動變成可點擊的連結：

Step 4：確認 AI 能讀到你的筆記（7min）

等學員操作，AI 回覆讀到的內容。

Git — 程式碼的時光機（20min）

不教指令，只教三個概念（投影片）：

• commit = 存檔點（打電動的存檔——打完 Boss 存一次，之後死掉可以回來）
• branch = 平行宇宙（想試新功能？開一個平行宇宙去試，搞砸了回主宇宙，什麼事都沒發生）
• push = 上傳到雲端（跟 Google Drive 同步——你電腦壞了，雲端還有一份）

打開 GitHub 上一個 repo 的 commit history：

補充一句最重要的話：

Section 3 小結（5min）

回扣五感：記憶（Obsidian + Git）= AI 的腦（白板打勾）

Section 4 | Domain / 路由 / API / Webhook / Web UI（2hr）

目標：理解網路怎麼串起來的——用「寄信」比喻系統貫穿所有概念

Domain + URL 拆解（20min）

投影一個 URL，逐段拆解：

https://hourjungle.com/booking/room-a
│       │                │        │
│       │                │        └─ 指定資源（A 會議室）
│       │                └────────── 路由（預訂功能）
│       └─────────────────────────── Domain（門牌地址）
└─────────────────────────────────── 協定（加密信封）

API — 兩個系統之間的通訊規格（35min）

用「郵件/快遞」比喻系統

白板畫出完整流程圖：

你（客戶端/前端）
    | 寫一封信（API Request）
信封上寫：
    - 收件地址（URL / endpoint）
    - 你是誰（Token / 身分證明）
    - 要做什麼（GET 查詢 / POST 新增 / PUT 修改 / DELETE 刪除）
    - 信件內容（payload / body）
    |
郵差（HTTP 協定）把信送到
    |
大樓門口警衛（伺服器防火牆/認證）
    → 檢查你的身分證（Token）
    → 確認你有沒有資格進來
    |
收發室小弟（API Gateway / Router）
    → 看你的信要送到哪一層（路由判斷）
    → /orders → 3樓訂單部門
    → /products → 5樓商品部門
    → /customers → 7樓客戶部門
    |
對應部門（後端邏輯）
    → 處理你的請求
    → 去倉庫（DB）拿資料或存資料
    |
回信（API Response）
    → 狀態碼（200 OK / 404 找不到 / 500 系統壞了）
    → 回覆內容（你要的資料，JSON 格式）

逐段拆解，每段都有講師台詞：

信封上的四個欄位：

白板逐一寫出：

警衛和收發室小弟：

回信的格式——狀態碼：

回到蝦皮痛點——Token 就是身分證：

底層邏輯呼應——Cookie、Token、Web UI：

回扣五感：API = AI 的嘴巴和手（能跟其他系統溝通）

Webhook — API 的反過來（25min）

先跟 API 做對比：

白板畫對比圖：

API（Pull 模式）= 你主動去問
┌────────┐        ┌────────┐
│  你    │ ──→    │  對方   │   「有新訂單嗎？」
│        │ ←──    │        │   「沒有。」
│        │ ──→    │        │   「有新訂單嗎？」
│        │ ←──    │        │   「沒有。」
│        │ ──→    │        │   「有新訂單嗎？」
│        │ ←──    │        │   「有！給你。」
└────────┘        └────────┘

Webhook（Push 模式）= 對方主動通知你
┌────────┐        ┌────────┐
│  你    │        │  對方   │   （你在做自己的事）
│        │ ←──    │        │   「有新訂單了！」
│        │        │        │   （你繼續做自己的事）
│        │ ←──    │        │   「又有新訂單了！」
└────────┘        └────────┘

LINE OA Webhook 具體拆解：

客戶在 LINE 發訊息：「XX 產品還有貨嗎？」
    |
LINE 的伺服器收到這則訊息
    |
LINE 看到你設了 Webhook URL → 主動寫一封信（POST request）到你的伺服器
    |
信的內容（payload）：
{
  "events": [{
    "type": "message",
    "replyToken": "abc123...",
    "source": { "userId": "U1234..." },
    "message": { "type": "text", "text": "XX 產品還有貨嗎？" }
  }]
}
    |
你的伺服器收到信 → AI 判斷意圖 → 去 DB 查庫存 → 用 replyToken 回覆客戶

LINE OA Webhook 的坑——一定要講清楚：

回扣五感：Webhook = AI 的耳朵（白板打勾）

Web UI — 萬能解法（20min）

投影一個簡單 Web UI demo（表單 → 填資料 → 送出 → 存進 DB → 顯示清單）：

機器放哪裡：

• 你的電腦（本地）→ 免費但要開著
• GCP / Cloudflare → 月費 $0-5 美金，24 小時都能用

分組練習 — 畫架構圖（20min）

5-6 人一組，每組一張白紙。

提示（投影，讓學員參考）：

客戶發 LINE 訊息
    |
（這裡是什麼？API 還是 Webhook？）
    |
你的伺服器收到訊息
    |
（誰是警衛？誰驗證身分？）
    |
（誰是收發小弟？路由到哪個部門？）
    |
AI 判斷意圖：「這是問庫存」
    |
去哪裡查庫存？（DB？還是要打蝦皮的 API？）
    |
查到結果：「有貨 / 沒貨」
    |
回覆客戶（用什麼方式回？API？）

各組分享 → 講師點評。

Day 1 收尾（10min）

回到白板的五感圖，確認已打勾的：

• 手腳（CLI）
• 記憶（DB + Obsidian）
• 耳朵（Webhook）
• 眼睛（Browser 讀 DOM）
• 嘴巴（明天教怎麼下指令）