Supabase：Firebase 的超強開源替代品

上一章我們了解了 PostgreSQL (Postgres) 的強大威力與 SQL 語法。但如果你是一個前端開發者，或者是剛踏入 Vibe Coding 的新手，要你在電腦裡架設一台 Linux 伺服器、安裝 Postgres、還要處理防火牆設定，那簡直是一場噩夢。

為了解決這個痛點，軟體界誕生了所謂的「BaaS (Backend as a Service，後端即服務)」。在過去幾年，Google 推出的 Firebase 佔據了主導地位；但在近兩年，一個名為 Supabase 的平台橫空出世，以狂風掃落葉之姿席捲了整個開源圈。

Supabase 號稱是「Firebase 的開源替代品」，但它比 Firebase 更強大的地方在於：它的底層就是一顆貨真價實的 PostgreSQL 資料庫！ 這意味著你不需要學習什麼奇怪的 NoSQL 語法，你可以直接使用最標準的 SQL，享受關聯式資料庫帶來的所有嚴謹性與效能。

步驟一：註冊與建立你的第一個專案 (Project)

讓我們馬上動手，在雲端建立一顆免費的 Postgres 資料庫吧！

  1. 打開瀏覽器，前往 Supabase 官網 (supabase.com)。
  2. 點擊右上角的 Start your project，並使用你的 GitHub 帳號登入。
  3. 登入後，點擊畫面上大大的綠色按鈕 New Project。
  4. Supabase 會要求你先建立一個 Organization (組織)，隨便取個名字即可。
  5. 接著進入建立專案的畫面：
    • Name：為你的專案取個名字（例如 my-vibe-store-db）。
    • Database Password：這非常重要！請點擊右邊的 Generate a password 按鈕，然後立刻把這串密碼複製下來，存到你的記事本裡！ (如果忘記了會非常麻煩)。
    • Region：選擇離你最近的伺服器節點。通常選擇 Tokyo (東京) 或 Singapore (新加坡) 速度會最快。
  6. 點擊 Create new project。

這時候 Supabase 會開始在雲端幫你配置伺服器，大約需要等待 2 到 3 分鐘。這段時間你可以去泡杯咖啡。當畫面上的轉圈圈消失，進入了漂亮的儀表板 (Dashboard) 時，恭喜你，你已經擁有了一台每個月價值數十美金的企業級資料庫了！

步驟二：取得與專案連線的「神聖鑰匙」

就像我們在 Line Bot 課程中學到的一樣，任何外部的程式要控制雲端服務，都需要「鑰匙」。

請在 Supabase 的左側選單欄中，找到一個齒輪圖示的 Project Settings (專案設定)，然後點擊裡面的 API 選項。 在這裡，你會看到兩行極度重要的資訊：

  1. Project URL：這是你的資料庫的網址。
  2. Project API Keys (anon / public)：這是你的公鑰。

🚨 請注意： 在接下來使用 Vibe Coding 時，我們絕對不能把這些鑰匙直接寫死在程式碼裡 (例如 index.js 或 page.tsx)。如果被駭客看到，他們就能直接把你的資料庫刪光。 正確的做法是：在你的專案資料夾裡建立一個名為 .env.local 的檔案，把這兩個資訊貼進去：

NEXT_PUBLIC_SUPABASE_URL=你的_Project_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=你的_anon_key

AI 看到這些環境變數，就會知道要用它們來安全地連線到 Supabase。

步驟三：用 SQL 魔法建立「表格 (Table)」

現在我們要來建立裝資料的容器了。在 Supabase 中，你可以用滑鼠點擊 UI 介面來建表，但身為 Vibe Coder，我們有更高級、更霸氣的做法：直接貼 SQL 咒語。

請點擊 Supabase 左側選單欄中的 SQL Editor，然後點擊 New query。你會看到一個巨大的黑色文字框。 這就是你對資料庫下達最高指令的控制台。

我們來試著建立一個「會員訂單系統」的基礎結構。請毫不猶豫地將以下 AI 寫好的 SQL 貼進去，然後按下右下角的 Run (執行)：

-- 1. 建立「會員表 (users)」
CREATE TABLE users (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  email TEXT UNIQUE NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 2. 建立「商品表 (products)」
CREATE TABLE products (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  price DECIMAL(10, 2) NOT NULL,
  stock_quantity INTEGER DEFAULT 0
);

-- 3. 建立「訂單表 (orders)」 (這個表會關聯到會員與商品)
CREATE TABLE orders (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
  product_id INTEGER REFERENCES products(id),
  quantity INTEGER NOT NULL,
  total_price DECIMAL(10, 2) NOT NULL,
  order_date TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 4. 塞入幾筆測試用的假資料！
INSERT INTO users (name, email) VALUES 
('王大明', 'ming@vibetutor.com'),
('陳小美', 'mei@vibetutor.com');

INSERT INTO products (title, price, stock_quantity) VALUES 
('Vibe 頂級機械鍵盤', 3500.00, 50),
('人體工學 AI 座椅', 12000.00, 10);

只要一秒鐘，畫面下方顯示 Success，你的資料庫架構就瞬間搭建完成了！這比你用滑鼠在 UI 介面上慢慢按「新增欄位、設定型態」快了不知幾百倍！這就是文字介面 (CLI/SQL) 永遠不會被淘汰的原因。

步驟四：Vibe Prompt 實戰！用 AI 寫出資料讀取程式碼

資料庫建好、假資料也塞好之後，最後一塊拼圖，就是讓我們的網頁 (例如 Next.js / React) 能夠去 Supabase 把這些資料「抓出來並顯示在畫面上」。

Supabase 官方提供了一個非常強大的 JavaScript SDK。同樣的，我們不需要去背誦 supabase.from('users').select('*') 這些語法。我們只要對著 Cursor 詠唱出對的咒語：

【請複製以下神級連線 Prompt】 我正在開發一個 Next.js (App Router) 的專案。 我已經建立好 Supabase 資料庫，並且在 .env.local 裡設定好了 NEXT_PUBLIC_SUPABASE_URL 與 NEXT_PUBLIC_SUPABASE_ANON_KEY。

請幫我完成以下任務：

  1. 首先，幫我建立一個 Supabase 的連線客戶端檔案 (例如 lib/supabase.ts)，使用 @supabase/supabase-js 套件。
  2. 接著，幫我寫一個前端頁面 app/products/page.tsx。
  3. 在這個頁面中，請使用 Client Component 與 useEffect，在畫面載入時去 Supabase 查詢 products 這個表格中的所有資料。
  4. 查詢期間，請顯示「載入中...」的動畫。
  5. 查詢成功後，請用 Tailwind CSS 畫出一個精美的網格 (Grid) 卡片佈局，把商品的 title 與 price 漂漂亮亮地展示出來。卡片要有 hover 發光特效 (hover:shadow-lg)。
  6. 如果查詢失敗，請在畫面上顯示紅色的錯誤訊息。

當 Cursor 收到這段指令後，它會自動幫你建立兩個檔案。一個處理隱密連線，一個處理畫面渲染。 當你在瀏覽器中打開 localhost:3000/products 時，你就會看到你剛剛在 SQL Editor 裡面輸入的「Vibe 頂級機械鍵盤」與「人體工學 AI 座椅」，完美地呈現在你的網頁上了！

這就是所謂的全端開發 (Full-Stack Development)！ 你打通了前端的畫面、串接了後端的 API、存取了雲端的資料庫。 過去這需要學習三年的資訊工程系課程，現在，你只需要學會這套 Vibe Coding 的流程，一個週末就能全部搞定！

🚨 Troubleshooting：Supabase 常見報錯與除錯指南

在串接 Supabase 時，新手最常遇到以下幾種挫折：

1. RLS (Row Level Security) 權限阻擋

這是 Supabase 新手遇到的第一大地雷！ 有時候你用 AI 寫好了插入資料 (INSERT) 的程式，執行時卻報錯： new row violates row-level security policy for table "users" 這是因為 Supabase 預設為了保護你的資料庫，開啟了 RLS 防火牆，拒絕任何來自外部（匿名用戶）的寫入操作。

👉 解決方式咒語：

「我在 Supabase 寫入資料時遇到了 RLS 報錯：new row violates...。這只是一個測試專案，我不需要安全防護。請給我一段可以在 SQL Editor 中執行的 SQL 指令，幫我把 users 和 orders 表格的 RLS 功能暫時關閉，或是設定為完全公開允許所有操作 (Allow all)。」 AI 會立刻給你一段 ALTER TABLE users DISABLE ROW LEVEL SECURITY; 的語法，貼進去執行就解決了。

2. 環境變數找不到 (process.env.NEXT_PUBLIC...)

如果終端機報錯 supabaseUrl is required。 這 100% 是因為你忘記建立 .env.local 檔案，或者是你把檔案命名錯了 (例如命名成了 .env.txt)，或者是你剛設定好環境變數，但是「忘記重新啟動開發伺服器」。 請在終端機按下 Ctrl + C 終止伺服器，然後重新輸入 npm run dev，通常一切就會奇蹟般地恢復正常了。