今日主題：

我已經做出了很多功能：AI、後端 CRUD、前端抓資料、登入。
接下來要把系統放到網路上用（這叫「部署」）。

元件是什麼？（用運動會來想像）

• 元件就像運動會的一個「隊伍」。
• 它是系統裡最小、可以被安排上場的單位（最小的「可以被部署」的東西）。

範例故事：

• 編譯＝先排好隊、穿好隊服、準備完成。
• 部署＝上場比賽，真正跑起來。

有些隊伍只能自己排隊（準備好），但需要跟別隊一起上場才有比賽。
也有些隊伍自己排隊完，就能自己上場完成一個比賽項目（像接力賽）。

在寫程式時，我們希望一個「元件」：

1. 能自己準備好（獨立編譯）
2. 能自己上場跑（獨立部署）

在實際的程式專案中可以以單一一個檔案為單位。

在 JavaScript/TypeScript 世界裡：
編譯 = 把程式轉成能跑的樣子（TS 轉 JS、壓縮、打包）。
部署 = 把結果放到網路上（像丟到 Vercel、Netlify、或用 Docker 跑）。

在程式中的應用是什麼？

前端 UI 元件，像是 .vue 檔

<template>
  <form @submit.prevent="onSubmit" class="p-4">
    ...
  </form>
</template>

<script setup lang="ts">
...
</script>

<style scoped>
...
</style>

後端元件，像是 Provider，.ts 檔

// backend/src/usecases/providers/RuleBasedProvider.ts
import { AiProvider } from './AiProvider'

export class RuleBasedProvider implements AiProvider {
  async format(content: string, prompt = ''): Promise<string> {
   ...
  }
}

小結與一個思考問題：

所以，「獨立編譯」是自己準備好，「獨立部署」是自己上場跑。
一個好元件，最好兩者都能做到。

我現在的專案中，有哪些部分「只能準備，不能單獨上場」？
如果把「檔案系統儲存」換成「S3 儲存」，哪些檔案需要改？（理想答案：只有 Provider 那層）

上線後還要多想什麼？

• 權限與資料安全（誰能看、誰能改）
• 錯誤處理與紀錄（出事找得到原因）
• 監控與警報（比賽中受傷要有人舉手）

好的元件通常具備以下特質嗎？（後面會繼續看到）
高內聚：相關的程式碼放在一起，不會東一塊西一塊。
低耦合：對外只透過介面互動，不直接依賴內部細節。
可替換：例如把「檔案系統儲存元件」換成「S3 儲存元件」，其他程式不需要大改。
可測試：可以在沒有依賴完整系統的情況下進行單元測試。