DigiHouse
English

TECH ARTICLE · 7 MIN READ

Blog / DigiHouse

W6|技術架構圖與競品分析矩陣

W6 小組實作:把 AI 技術翻成使用者看得懂的服務流程,以 Mermaid 架構圖與同條件競品矩陣支持 BP。

本週完成成果

你會把「我們用了先進 AI」拆成資料從哪裡來、在哪裡處理、誰確認、最後回到哪個使用者;也會用相同條件比較替代方案,而不是只寫自己最好。

完成標準|Mermaid 架構圖能渲染;競品矩陣有一致比較條件與來源;proposal_v2.md 說明技術優勢、限制和產品技術模組;JSON 練習可執行。

課前準備

步驟 1|小組:帶著 W5 proposal_v1.md,圈出每一個「可能需要技術」的動詞,例如辨識、整理、提醒、推薦。

預期結果|每個技術動詞都能連回一個使用者問題。

步驟 2|Repo:從 main 建立 feat-architecture 分支。

bash
git switch main
git pull --ff-only
git switch -c feat-architecture

預期結果|目前分支為 feat-architecture。

步驟 3|小組:選三個替代方案,至少包含「使用者現在的人工做法」,不要只挑看起來較弱的競品。

預期結果|比較對象是真正可能被使用者選擇的方案。

第二、三小時|課堂教材與個人技術實作

故事開始|有人介紹智慧冰箱時只說「用了 AI、雲端、大數據」。同學聽完仍不知道:食材照片去哪裡?誰判斷過期?網路斷掉還能不能提醒?架構圖就是把看不見的旅程畫成地圖。

老師先問|競品分析是不是找出別人的缺點?不是。公平的分析要用同一把尺,也要承認別人在哪些情境更適合。

生活比喻|技術架構像餐廳出餐路線:客人點單、廚房處理、店員確認、餐點送回。競品矩陣則像用價格、距離、等待時間同時比較三家店。

先看全程地圖|先看懂資料與決策怎麼移動,再開始操作。圖中的箭頭代表下一步,不代表可以跳過人工確認。

text
┌──────────┐ → ┌──────────┐ → ┌──────────┐
│ 使用者輸入 │   │ 程式/模型 │   │ 人工確認  │
└──────────┘   └──────────┘   └────┬─────┘
                                    ↓
┌──────────┐ ← ┌──────────┐ ← ┌──────────┐
│ 改善下一版│   │ 記錄結果  │   │ 回到使用者│
└──────────┘   └──────────┘   └──────────┘

步驟 4|個人:讀取一小段 JSON,確認程式知道每個欄位的型別與缺漏情況。

python
import json

raw = '{"service": "study-helper", "users": 30, "human_review": true}'
data = json.loads(raw)
print(data['service'], data['users'], data['human_review'])

預期結果|week06_json_parser.py 顯示服務名稱、30 與 True。

步驟 5|小組:在 proposal_v2.md 加入 Mermaid 圖,節點用一般人看得懂的名詞。

markdown
```mermaid
flowchart LR
  A[學生輸入公開課程資訊] --> B[程式整理欄位]
  B --> C[AI 產生候選建議]
  C --> D[學生人工確認]
  D --> E[顯示讀書計畫]
```

預期結果|GitHub 預覽能畫出五個節點,且圖中有人工確認。

步驟 6|小組:建立競品矩陣,條件固定為目標使用者、費用、資料隱私、需要的操作與人工確認。

markdown
| 方案 | 適合誰 | 費用假設 | 資料去向 | 人工確認 | 來源日期 |
|---|---|---:|---|---|---|
| 現行人工方式 |  |  |  |  |  |
| 替代方案 A |  |  |  |  |  |
| 本組方案 |  |  |  |  |  |

預期結果|三個方案都使用同一欄位;不知道的資料寫待查,不猜測。

步驟 7|交叉 Review:另一組沿著架構圖說一次資料旅程,並找出一個缺少的錯誤處理或人工決策點。

預期結果|proposal_v2.md 至少新增一項限制或失敗處理。

課堂收束|請用一句話回答「資料最敏感的一站在哪裡?如果那一站失敗,誰決定下一步?」能回答,才算理解架構,不只是會畫方塊。

指定閱讀與課後作業

指定閱讀|依課綱完成 W3Schools Python JSON;Python 官方 json 文件用來查核 loads/dumps 等實際介面。

課後作業方向|個人完成 JSON parser;小組補齊 proposal_v2.md 的技術模組、競品來源與限制。所有價格、功能與方案狀態都要標查閱日期。

步驟 8|個人:讓 week06_json_parser.py 對缺少 human_review 欄位時給出清楚預設或錯誤。

預期結果|故意刪掉欄位後,程式不會出現難以理解的崩潰。

步驟 9|小組:完成 proposal_v2.md 並建立 PR,Review 者逐一檢查圖、矩陣與引用。

bash
git add week06_json_parser.py business/proposal_v2.md
git commit -m 'W6: map architecture and compare alternatives'
git push -u origin HEAD

預期結果|PR Files changed 只包含本週範圍,來源連結可開啟。

驗收方式

bash
python week06_json_parser.py
rg -n "mermaid|人工確認|來源日期|限制" business/proposal_v2.md
git diff --check

通過條件|JSON 程式可執行;Mermaid 可渲染;矩陣條件一致並附來源日期;架構圖包含人工確認與失敗考量。

應提交的 Repo 檔案

必交|week06_json_parser.py、business/proposal_v2.md。只提交課綱指定成果與重現所需說明;不得提交 API key、個資、私人對話、未授權資料或大型模型檔。

常見問題與排除

問題 1|Mermaid 不顯示:確認 code fence 語言是 mermaid,節點括號與特殊字元先簡化。

問題 2|競品資料找不到:標記待查與查詢日期,不以 AI 回答代替來源。

問題 3|圖太複雜:先保留輸入、處理、人工確認、輸出四個主節點,再加必要細節。

引用資料

國立中央大學授課課綱/劉書銘老師,《劉書銘老師課程大綱_基礎模型與生成式人工智慧-更新版.pdf》;教師提供附件。用途:W1–W16 時段、實作主題、評量與交付物。

Mermaid,《Flowcharts Syntax》;https://mermaid.js.org/syntax/flowchart.html;查閱日期:2026-08-04。用途:W6、W14 以文字維護技術架構與整合流程圖。

Python Software Foundation,《JSON encoder and decoder》;https://docs.python.org/3/library/json.html;查閱日期:2026-08-04。用途:W6 JSON 讀取、解析與輸出。

W3Schools(課綱指定閱讀),《Python JSON》;https://www.w3schools.com/python/python_json.asp;查閱日期:2026-08-04。用途:W6 課後 Python JSON 指定閱讀。

W6|技術架構圖與競品分析矩陣 | DigiHouse