如何使用PolarDB Supabase快速搭建Web應用 - PolarDB

PolarDB Supabase是PolarDB PostgreSQL版推出全託管的Supabase服務，以PolarDB PostgreSQL版為核心，整合了Realtime即時資料庫、RESTful API、GoTrue身份認證、檔案儲存體、日誌採集等關鍵功能，並在此基礎上進行了最佳化與增強，為您省去Supabase複雜的參數管理和應用營運等操作，並提供了兼具靈活性與高效能的後端解決方案。您可以基於PolarDB Supabase快速搭建Web、SaaS平台、AI整合應用等現代化應用。

接下來，將為您展示如何使用PolarDB Supabase快速搭建一個會議筆記系統。

核心功能

功能	說明
完整資料庫功能	Supabase基於PolarDB PostgreSQL版資料庫構建，提供完整的資料庫功能：關係型資料庫: 支援複雜的表關係、外鍵約束、交易處理。 JSONB支援: 儲存半結構化資料，如筆記內容、活動資料。全文檢索搜尋: 內建全文檢索搜尋功能。擴充支援: 支援PostgreSQL擴充，如UUID產生、時間戳記處理。 `-- 樣本：使用JSONB儲存複雜資料 CREATE TABLE notes ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, content JSONB DEFAULT '{}', -- 儲存富常值內容 activity_data JSONB DEFAULT '{}' -- 儲存活動中繼資料 );`
即時訂閱（Realtime）	基於PostgreSQL的邏輯複製，實現即時資料同步：資料庫變更監聽: 監聽INSERT、UPDATE、DELETE事件。頻道管理: 支援多個獨立頻道，按需訂閱。事件過濾: 通過條件過濾減少不必要的事件。自動重連: 網路斷開時自動重連。 `// 即時訂閱樣本 const channel = supabase .channel('meeting-updates') .on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'notes', filter: 'meeting_id=eq.123' }, (payload) => { console.log('筆記已更新:', payload.new) }) .subscribe()`
身份認證（Auth）	內建完善的身份認證和授權系統：多種登入方式: 郵箱密碼、社交登入、魔法連結。會話管理: 自動處理token重新整理、會話持久化。使用者管理: 使用者註冊、密碼重設、郵箱驗證。匿名使用者: 支援臨時使用者訪問。 `// 認證樣本 const { data: { user }, error } = await supabase.auth.signInWithPassword({ email: 'user@example.com', password: 'password' })`
行級安全（RLS）	基於PostgreSQL的行級安全性原則：細粒度許可權控制: 基於使用者、角色、資料條件控制訪問。策略定義: 使用SQL定義訪問規則。自動應用: 所有查詢自動應用安全性原則。效能最佳化: 在資料庫層面過濾資料。 `-- RLS策略樣本 CREATE POLICY "Users can only see their own meetings" ON meetings FOR SELECT USING (auth.uid() = created_by); CREATE POLICY "Users can update their own meetings" ON meetings FOR UPDATE USING (auth.uid() = created_by);`
儲存服務	基於PolarDB檔案系統進行檔案儲存體與管理：檔案上傳: 支援大檔案上傳、斷點續傳。存取控制: 基於RLS的檔案存取權限。檔案管理: 檔案夾組織、中繼資料管理。 `// 檔案上傳樣本 const { data, error } = await supabase.storage .from('meeting-files') .upload('document.pdf', file, { cacheControl: '3600', upsert: false })`
邊緣函數（Edge Functions）	基於Deno的伺服器端函數： TypeScript支援: 原生TypeScript支援。資料庫訪問: 直接存取Supabase資料庫。第三方整合: 調用外部API、處理webhook。 `// 邊緣函數樣本 import { serve } from "https://deno.land/std@0.168.0/http/server.ts" import { createClient } from 'https://esm.sh/@supabase/supabase-js@2' serve(async (req) => { const supabase = createClient( Deno.env.get('SUPABASE_URL') ?? '', Deno.env.get('SUPABASE_ANON_KEY') ?? '' ) const { data } = await supabase.from('meetings').select('*') return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } }) })`
API（REST & GraphQL）	自動產生的API介面： REST API: 自動產生CRUD介面。 GraphQL: 支援GraphQL查詢（企業版）。即時API: 支援即時查詢和訂閱。型別安全: TypeScript類型。 `// REST API樣本 const { data, error } = await supabase .from('meetings') .select(', notes()') .eq('id', meetingId) .single()`

搭建會議筆記系統

在會議筆記系統中，將主要應用以下功能：

功能	說明
PolarDB PostgreSQL版叢集	資料存放區，主要記錄會議、筆記、任務、使用者狀態等表資訊。
即時訂閱（Realtime）	協作功能，用於即時同步筆記編輯、使用者線上狀態。
行級安全（RLS）	資料安全，用於控制使用者存取權限。
儲存服務	檔案管理，用於會議資料上傳和下載。
身份認證（Auth）	使用者管理，用於系統管理使用者登入和會話管理。

應用技術棧

前端：Next.js 15 + React 18 + TypeScript。
後端：PolarDB Supabase (PostgreSQL + 鑒權 + 即時訂閱 + 儲存)。
UI：Tailwind CSS + Radix UI。
狀態管理：React Hooks + 本地狀態。

資料庫設計

為會議筆記系統的核心功能設計會議表、筆記表、使用者線上狀態表、標籤表及任務表等系統資料表，並通過外鍵約束以確保資料的一致性。

SQL樣本

-- 建立會議表
CREATE TABLE IF NOT EXISTS meetings (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  description TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 建立筆記表
CREATE TABLE IF NOT EXISTS notes (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  meeting_id UUID REFERENCES meetings(id) ON DELETE CASCADE,
  content JSONB DEFAULT '{}',
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 建立使用者線上狀態表
CREATE TABLE IF NOT EXISTS user_presence (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  meeting_id UUID REFERENCES meetings(id) ON DELETE CASCADE,
  user_name VARCHAR(100) NOT NULL,
  user_color VARCHAR(7) DEFAULT '#1890ff',
  is_typing BOOLEAN DEFAULT FALSE,
  last_seen TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  UNIQUE(meeting_id, user_name)
);

-- 建立標籤表
CREATE TABLE IF NOT EXISTS tags (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  meeting_id UUID REFERENCES meetings(id) ON DELETE CASCADE,
  name VARCHAR(50) NOT NULL,
  color VARCHAR(7) DEFAULT '#1890ff',
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 建立任務表
CREATE TABLE IF NOT EXISTS tasks (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  meeting_id UUID REFERENCES meetings(id) ON DELETE CASCADE,
  title VARCHAR(255) NOT NULL,
  description TEXT,
  assignee VARCHAR(100),
  status VARCHAR(20) DEFAULT 'pending',
  due_date TIMESTAMP WITH TIME ZONE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 建立會議活動紀錄表
CREATE TABLE IF NOT EXISTS meeting_activities (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  meeting_id UUID REFERENCES meetings(id) ON DELETE CASCADE,
  user_name VARCHAR(100) NOT NULL,
  activity_type VARCHAR(50) NOT NULL, -- 'join', 'leave', 'edit', 'add_tag', 'add_task', etc.
  activity_data JSONB DEFAULT '{}',
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 會議資料表：meeting_files
CREATE TABLE IF NOT EXISTS meeting_files (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  meeting_id UUID REFERENCES meetings(id) ON DELETE CASCADE,
  file_name VARCHAR(255) NOT NULL,
  file_url TEXT NOT NULL,
  uploader VARCHAR(100),
  uploaded_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  file_size BIGINT,
  mime_type VARCHAR(100)
);

-- 為會議ID加索引
CREATE INDEX IF NOT EXISTS idx_meeting_files_meeting_id ON meeting_files(meeting_id);

即時訂閱配置

啟用即時功能

-- 啟用即時訂閱功能
ALTER PUBLICATION supabase_realtime ADD TABLE meetings;
ALTER PUBLICATION supabase_realtime ADD TABLE notes;
ALTER PUBLICATION supabase_realtime ADD TABLE user_presence;
ALTER PUBLICATION supabase_realtime ADD TABLE tags;
ALTER PUBLICATION supabase_realtime ADD TABLE tasks;
ALTER PUBLICATION supabase_realtime ADD TABLE meeting_activities;
ALTER PUBLICATION supabase_realtime ADD TABLE meeting_files;

用戶端即時訂閱

// 建立自訂Hook管理即時訂閱
export function useRealtime(meetingId: string, callbacks: RealtimeCallbacks) {

  const channelsRef = useRef<any[ ]>([ ])


  const cleanup = useCallback(() => {
    channelsRef.current.forEach((channel) => {
      supabase.removeChannel(channel)
    })
    channelsRef.current = []
  }, [])


  useEffect(() => {
    if (!meetingId) return

    // 清理之前的串連
    cleanup()

    // 建立多個專用頻道
    const presenceChannel = supabase
      .channel(`presence:${meetingId}`)
      .on(
        "postgres_changes",
        {
          event: "*",
          schema: "public",
          table: "user_presence",
          filter: `meeting_id=eq.${meetingId}`,
        },
        (payload) => {
          console.log("User presence change:", payload)
          if (callbacks.onUserPresenceChange) {
            loadOnlineUsers()
          }
        },
      )
      .subscribe()

    // 儲存頻道引用用於清理
    channelsRef.current = [presenceChannel, /* 其他頻道 */]
  }, [meetingId, callbacks])

  return { cleanup }
}

即時訂閱設計指南

功能隔離：按業務情境劃分獨立頻道（如線上狀態、文檔協作、任務通知），避免邏輯耦合。
事件過濾：通過filter參數限定事件範圍（如指定會議ID），減少冗餘資料轉送。
資源回收：在組件卸載或頁面跳轉時，主動調用removeChannel清理所有頻道串連，釋放資源。
錯誤處理：監聽訂閱通道的狀態，對斷連、逾時等異常進行重試或降級處理。

安全性

行級安全（RLS）

-- 啟用RLS
ALTER TABLE meetings ENABLE ROW LEVEL SECURITY;

-- 建立安全性原則
CREATE POLICY "Users can view all meetings" ON meetings
  FOR SELECT USING (true);

CREATE POLICY "Users can create meetings" ON meetings
  FOR INSERT WITH CHECK (true);

CREATE POLICY "Users can update their own meetings" ON meetings
  FOR UPDATE USING (auth.uid() = created_by);

使用者認證

  const login = useCallback(async (email: string, password: string) => {
    try {
      const { data, error } = await supabase.auth.signInWithPassword({ email, password })
      if (error) throw error
      if (data.user) {
        const userData = transformSupabaseUser(data.user)
        setUser(userData)
        localStorage.setItem("meeting_user", JSON.stringify(userData))
        return { success: true, user: userData }
      }
      return { success: false, error: '登入失敗' }
    } catch (error: any) {
      return { success: false, error: error.message || '登入失敗' }
    }
  }, [])

  const transformSupabaseUser = (supabaseUser: SupabaseUser): User => ({
    id: supabaseUser.id,
    email: supabaseUser.email || null,
    name: supabaseUser.user_metadata?.name || supabaseUser.email?.split('@')[0] || '使用者',
    avatar_url: supabaseUser.user_metadata?.avatar_url || null,
    created_at: supabaseUser.created_at,
    is_anonymous: supabaseUser.user_metadata?.is_anonymous || false,
  })

用戶端整合

用戶端配置

// lib/supabase.ts
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

// 類型定義
export interface Meeting {
  id: string
  created_at: string
  title: string
  description: string | null
}

環境變數管理

# 生產環境變數
NEXT_PUBLIC_SUPABASE_URL=<YOUR_SUPABASE_PUBLIC_URL>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<YOUR_SUPABASE_ANON_KEY>

快速搭建

下載專案範例程式碼：PolarDB-Supabase-App-Demo。
準備運行環境：專案範例程式碼需要在您的本地環境中安裝Node.js和pnpm。
說明
- Node.js：請前往Node.js官方網站進行下載和安裝。
- pnpm：在安裝Node.js後，可通過npm進行全域安裝，命令為npm install -g pnpm。
環境配置：在專案根目錄建立.env.local檔案，並將以下值替換為您PolarDB Supabase的配置。
說明
您可在叢集的AI能力 > AI應用列表頁面，單擊您的應用ID進入應用詳情頁，在拓撲圖與配置頁簽中查看相關配置資訊。
- <YOUR_SUPABASE_PUBLIC_URL>為應用的公網地址。
- <YOUR_SUPABASE_ANON_KEY>為應用參數secret.jwt.anonKey的值。
```
# 生產環境變數
NEXT_PUBLIC_SUPABASE_URL=<YOUR_SUPABASE_PUBLIC_URL>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<YOUR_SUPABASE_ANON_KEY>
```
資料庫初始化：在專案根目錄的scripts檔案夾下找到01-create-tables.sql檔案，並在Supabase Dashboard上面的右側導覽列SQL Editor中執行SQL。
運行專案：請在專案根目錄下執行以下命令以安裝依賴並啟動專案。啟動後，預設的本地訪問地址為http://localhost:3000，您可以直接在瀏覽器中訪問該系統。
```
pnpm install
pnpm dev
```

經驗總結

基於上述會議筆記系統專案的實戰經驗，PolarDB Supabase最佳實務包括：

資料庫設計：合理的表結構、索引和約束。
即時訂閱配置：分離關注點、資源管理和錯誤處理。
安全性：RLS策略、資料驗證和使用者認證。
部署維護：環境配置與遷移。

遵循這些最佳實務可以構建穩定、安全、高效能的PolarDB Supabase應用。