1. 串接資料庫 Supabase
1-1章節標題
6. 串接資料庫 Supabase
1-2Supabase 核心功能
Supabase 幫你處理後台的事
你只管做前端畫面，後面的「登入」和「存資料」交給 Supabase
儲存資料
把使用者填的資料存到雲端資料庫
登入 / 註冊
讓使用者建立帳號、登入系統
1-3範例：送出表單，資料存進後台
報名表（前端）
後台資料表（Supabase）
尚無資料，送出報名後這裡會出現記錄
1-4這章要準備的東西
等等我們要做的兩件事：
1.連接程式編輯器與 Supabase
2.在 Supabase 建立專案
1-5supabase-from-site 在做什麼
supabase-from-site 跑起來會做的事
幫你列出目前帳號底下的 Supabase 專案，請告訴我要用哪一個：
| 專案名稱 | ID | 狀態 | 建立時間 |
|---|---|---|---|
| ClassDemo | mlepyq... | ACTIVE | 2024-01-01 |
| CourseSite | a8x32k... | ACTIVE | 2024-03-12 |
| SideProject | q19f0n... | PAUSED | 2024-05-20 |
回覆專案名稱或編號就好。
1-6小結
章節總結
1.Supabase 是雲端後台，幫你處理登入/註冊與資料儲存，前端只管畫面
2.從連上程式編輯器、到在 Supabase 建立專案，是接資料庫的第一道準備工作
3.supabase-from-site 流程分 5 個 Phase：確認專案 → 分析網站找候選 → 設計欄位 → 建表串前端 → 白話收尾
2. 庫存系統與會員驗證
2-1章節標題
7. 庫存系統與會員驗證
2-2範例 2：庫存系統
庫存管理系統
2-3為什麼這次更複雜
supabase-from-site 通常只涉及一種操作
找出一個地方串接 → 建表 → 送出或讀取，就結束了。
但這次的庫存系統，要管理「一直在動」的商品資料，會用到四種操作：
2-4CRUD 四個操作
C — Create（新增）
把一筆新資料寫進資料庫。例：新增一項商品「珍珠奶茶 NT$50」。
R — Read（讀取）
把資料從資料庫拿出來顯示。例：在首頁列出目前所有商品。
U — Update（修改）
改既有資料的內容。例：把珍奶價格從 50 改成 55，或庫存 -1。
D — Delete（刪除）
把資料從資料庫移除。例：下架不再賣的商品。
2-5supabase-init 在做什麼
supabase-init 跑起來會做的事
幫你列出目前帳號底下的 Supabase 專案，請告訴我要用哪一個：
| 專案名稱 | ID | 狀態 | 建立時間 |
|---|---|---|---|
| ClassDemo | mlepyq... | ACTIVE | 2024-01-01 |
| DrinkShop | a8x32k... | ACTIVE | 2024-03-12 |
| SideProject | q19f0n... | PAUSED | 2024-05-20 |
回覆專案名稱或編號就好。
2-6請你自己做
1.新增一個資料夾，命名為 ERP
2.在這個資料夾裡用 supabase-init 建立資料表，並做出完整的 CRUD（新增 / 讀取 / 修改 / 刪除）
2-7登入系統
登入系統
讓使用者登入後才能使用系統，沒有登入就看不到內容
2-8登入系統怎麼運作
登入系統怎麼運作
建好以後，這張 `users` 表看起來會像這樣：
| id | password | |
|---|---|---|
| 001 | alice@mail.com | pa55word |
| 002 | bob@mail.com | qwerty123 |
| 003 | carol@mail.com | sunshine |
裡面每一列就是一位會員。
2-9延伸登入系統
現在請你做：把登入系統做得更完善優化樣式
把登入介面的樣式做得更精緻，讓整個登入流程的體驗更好
權限管理
控制誰可以登入、誰不能登入，區分一般使用者與管理員角色
2-10Magic Link & OTP
如果要對外商用，需要更專業的登入模式：
Magic Link
寄一封含有登入連結的信到使用者信箱，點擊連結即可登入，不需要記密碼
OTP 驗證碼
寄送六位數一次性密碼（One-Time Password），限時 30 秒內輸入，用完即失效，安全性更高
2-11小結
章節總結
1.Supabase 除了存資料，也可以建立會員登入系統
2.在既有 Supabase 專案中用 supabase-init 建立資料表，做出完整的 CRUD（新增 / 讀取 / 修改 / 刪除）
3.進階延伸：權限管理、管理員機制，控制誰能登入與操作
4.對外商用建議採用 Magic Link 或 OTP 等更安全的驗證方式
3. 回顧與啟發
3-1章節標題
3. 回顧與啟發
3-2怎麼把大流程拆小？以人資入職手冊為例
Input
新人報到
→
公司介紹
制度說明
IT 工具教學
文件填寫
任務指派
→
Output
完成入職
整合這幾段 → 做成互動入職網站
「文件填寫」「任務指派」維持原本 SOP，但前面那三段——HR 每次都要重講一輪—— 通通整合進一份互動網站，新人自己點、自己看、自己測，HR 不必每次一對一講解。
3-3案例:互動入職網站
新人入職指南
跟著步驟做，30 分鐘上手 → 不必占用 HR 一對一時間
完成 0 / 4
公司介紹
我們是誰、做什麼、規模多大
創立
成立於 2018 年，總部位於台北內湖。
核心業務
為中小企業提供 AI 工作流自動化解決方案。
團隊規模
目前約 60 人，分為產品、工程、業務、營運四個團隊。
隨堂小測驗
我們公司的核心業務是？
3-4為什麼這值得做？
•不用一次取代整套流程——先把最重複的幾段抽出來整合，做成獨立小工具就好
•即使市面上有現成方案，自己做的版本可以完全貼合你們的制度、用語、流程
•先解決自己的問題，做完一個下一個就會更容易