先用一句話理解
從七層架構看懂 UI、前端、API、後端、資料、部署與 DevOps，理解 Language、Library、Framework、Runtime 與 Platform 的差異。
不要只記縮寫。要能回答：這個技術是什麼類型、負責什麼、與哪些工具相依、出問題時要查哪一層。
基礎全貌：基礎名詞與具體例子
| 名詞 | 白話解釋 | 使用情境 |
|---|---|---|
| UI / UX | UI 是介面外觀及操作元件；UX 是從開始到完成任務的整體體驗。 | 結帳按鈕是 UI；能否順利結帳是 UX。 |
| Frontend / Backend | 前端處理使用者介面與瀏覽器邏輯；後端處理伺服器端規則及流程。 | 購物車畫面在前端；訂單與付款驗證在後端。 |
| API | 系統對外提供功能或資料的介面，常透過 HTTP 溝通。 | 網站呼叫庫存 API 取得最新數量。 |
| Database | 依資料模型保存及查詢持久資料的系統。 | 訂單與會員存於 PostgreSQL。 |
| Language | 定義程式如何表達指令的語言。 | Python、JavaScript、TypeScript。 |
| Library | 讓程式主動呼叫可重用功能的程式庫。 | React 提供建立 UI 的能力。 |
| Framework | 提供較完整的應用結構與慣例。 | Next.js、Django、FastAPI。 |
| Runtime | 程式實際執行所依賴的環境。 | Node.js 執行伺服器端 JavaScript。 |
| Platform | 提供一組代管或整合能力的服務。 | Supabase 整合資料庫、Auth、Storage。 |
常見混淆：它們究竟差在哪？
Python vs FastAPI
Python 是語言，FastAPI 是使用 Python 的 Web 框架。
React vs Next.js
React 是 UI 函式庫；Next.js 是基於 React 的框架。
Git vs GitHub
Git 是版本控制工具；GitHub 是託管與協作平台。
實作時的三個檢查點
- 先說明使用者要完成的任務，再畫出前端、API、後端與資料庫。
- 列出程式語言、框架、執行環境與平台，避免同類與跨類比較。
- 要求 AI 產出資料流與權限流，不要只交付可點擊的漂亮畫面。
常見問題 FAQ
完全不會寫程式也能 Vibe Coding 嗎？
可以先做原型，但正式上線前仍須理解資料、權限、錯誤處理與部署，並驗證實際運作。
軟體工程只有七層嗎？
不是。七層是教學用的職責地圖；實際系統中的框架與平台可能跨層提供功能。