第二章：Supabase 資料庫與 SQL Schema 生成

一個強大的官網不能只有靜態畫面，我們需要資料庫來儲存會員資料、預約紀錄以及聯絡表單。我們將使用 Supabase，這是一個開源的 Firebase 替代方案，背後是非常強大的 PostgreSQL 資料庫！

🎯 本章目標

註冊並建立 Supabase 專案。
學習如何用 Vibe Coding 讓 AI 幫我們設計 Database Schema (資料表結構)。
在 Supabase 執行 AI 生成的 SQL 語法。
取得 API 金鑰並設定環境變數 (.env)。

🛠️ 第一步：建立 Supabase 專案

前往 Supabase 官網註冊並登入。
點擊 New Project。
填寫 Project Name (例如：not_far_web_db)。
設定 Database Password (請務必記住，或是讓瀏覽器密碼管理員記住)。
Region 選擇最靠近台灣的區域 (例如：Tokyo 或 Singapore)。
點擊 Create new project。

(這個過程可能需要幾分鐘讓 Supabase 初始化資料庫)

![建立 Supabase 專案]([SCREENSHOT_PLACEHOLDER: Supabase New Project 填寫表單的畫面截圖])

🧠 第二步：用 Vibe Coding 生成 SQL Schema

這是 Vibe Coding 發揮強大威力的時候！我們不需要自己手刻冗長的 SQL 語法。

[!TIP] Vibe Prompt (請複製並發送給 AI)： 我正在開發一個名為「不遠露營山莊」的網站，後端使用 Supabase (PostgreSQL)。 請幫我設計資料庫的 Schema，我需要三個資料表： 1. users (使用者表，會與 supabase auth 整合，請包含 id, email, created_at, full_name, phone_number) 2. bookings (預約表，紀錄客人預約露營位，包含 id, user_id(關聯到 users), check_in_date, check_out_date, status, total_price, created_at) 3. contact_messages (聯絡表單表，紀錄網站上客人的留言，包含 id, name, email, message, is_read, created_at) 請直接給我在 Supabase SQL Editor 執行的完整 SQL 語法，包含 PRIMARY KEY, FOREIGN KEY, 並且開啟 RLS (Row Level Security)，並加上基本的 Policies 註解。

AI 會產生類似下方的精美 SQL 語法：

-- 建立使用者擴充資料表 (對應 Supabase Auth)
CREATE TABLE public.users (
  id UUID REFERENCES auth.users(id) ON DELETE CASCADE PRIMARY KEY,
  email TEXT UNIQUE NOT NULL,
  full_name TEXT,
  phone_number TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- 建立預約表
CREATE TABLE public.bookings (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES public.users(id) ON DELETE CASCADE NOT NULL,
  check_in_date DATE NOT NULL,
  check_out_date DATE NOT NULL,
  status TEXT DEFAULT 'pending',
  total_price DECIMAL(10,2) NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- 建立聯絡表單表
CREATE TABLE public.contact_messages (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  email TEXT NOT NULL,
  message TEXT NOT NULL,
  is_read BOOLEAN DEFAULT false,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- 開啟 RLS (安全性防護)
ALTER TABLE public.users ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.bookings ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.contact_messages ENABLE ROW LEVEL SECURITY;

![AI 生成 SQL]([SCREENSHOT_PLACEHOLDER: 在 Cursor 或 ChatGPT 中送出上述 Prompt 並得到 SQL 的截圖])

⚡ 第三步：執行 SQL 語法

回到 Supabase 控制台。
在左側選單點擊 SQL Editor。
點擊 New query。
把 AI 剛剛給你的 SQL 語法貼上去。
點擊右下角的 Run！

看到 Success 就代表你的資料庫已經完全建置完畢了，是不是超級快？

![執行 SQL]([SCREENSHOT_PLACEHOLDER: Supabase SQL Editor 貼上語法並點擊 Run 的截圖]) ![Table Viewer]([SCREENSHOT_PLACEHOLDER: Supabase Table Editor 左側出現 users, bookings, contact_messages 三個資料表的截圖])

🔑 第四步：設定專案的環境變數 (.env)

為了讓我們的 Astro 網站可以連上這個資料庫，我們需要取得 API 金鑰。

在 Supabase 控制台左側底部的 Project Settings (齒輪圖示)。
選擇 API。
你會看到 Project URL 和 Project API keys (anon, public)。

回到你的 VSCode / Cursor 專案根目錄，建立一個名為 .env 的檔案。

[!TIP] Vibe Prompt (請複製並發送給 AI)： 我拿到了 Supabase 的 URL 和 Anon Key。在 Astro 專案中，我的 .env 檔應該怎麼寫？這兩個變數的命名習慣是什麼（例如使用 PUBLIC 前綴）？

你會在 .env 中填入：

PUBLIC_SUPABASE_URL=你的_Project_URL_貼在這裡
PUBLIC_SUPABASE_ANON_KEY=你的_Anon_Key_貼在這裡

![取得 API Key]([SCREENSHOT_PLACEHOLDER: Supabase Project Settings > API 畫面的截圖，圈出 URL 與 Anon Key]) ![建立 env 檔]([SCREENSHOT_PLACEHOLDER: VSCode 內 .env 檔案的截圖])

✅ 本章小結

你學會了如何把設計資料庫這件困難的事情丟給 AI！只要邏輯講得清楚，AI 就能瞬間產生完美的 SQL Schema。下一章，我們將回到前端，使用 React 與 Tailwind CSS 打造一個具備動態漸層效果的超美首頁 (Hero Section)！