02 / 07

SYSTEM FOUNDATIONS · LESSON 02

Frontend

The interface people can see

理解瀏覽器裡的畫面、元件與互動,如何把資料變成可使用的體驗。

LESSON 2 / 7
01

這是什麼?

Frontend 是使用者在瀏覽器中看到與操作的介面,也包含讓互動發生的 client-side 程式。

02

為什麼需要它?

介面不是資料本身;知道它的責任,才能避免把秘密、規則或未驗證數字放錯地方。

03

它在整個系統的位置

Internet → Frontend ↔ Backend / API

這是學習用的概念位置,實際產品會依需求有不同分工與部署方式。

04

用生活情境理解

ANALOGY

像餐廳前台:負責接待、呈現菜單與收下訂單,但不等於廚房的全部流程。

05

E.X 真實案例

E.X CASE

Market Radar 的卡片、行政區圖表與 Detail Drawer 是前端把已驗證資料呈現成閱讀路徑。

06

AI 可以幫你做什麼?

AI CAN ASSIST

協助拆解元件、整理狀態與產生介面草稿,但不能替使用者決定資料是否可信。

07

哪些東西你自己一定要懂?

HUMAN JUDGMENT

瀏覽器中的程式與文字都可能被看見;API Key、權限判斷與來源真實性不能只靠前端保護。

08

Knowledge Check

Frontend 最主要負責什麼?

查看提示與答案

把資訊與互動呈現給使用者,並與其他系統依契約交換需要的資料。

09

Practice

拆一張畫面卡片

  1. 找出標題、數字、狀態與操作。
  2. 標記哪些是事實、哪些是介面文案。
  3. 寫下這張卡片需要哪一個資料來源。
10

Ask AI TA