大家好，很高興又見面了，我是"進階前端‬進階‬"，由我帶着大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發！

什麼是 Supabase

A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.

Supabase 是開源工具的組合，其使用企業級開源産品建構 Firebase 的功能。如果存在具有 MIT、Apache 2 或同等開放許可證的工具和社群，其将使用和支援該工具。如果不存在該工具，Supabase 将自行建構和開源。

值得注意的是，Supabase 不是 Firebase 的 1:1 映射，其目标是使用開源工具為開發人員提供類似 Firebase 的開發體驗。

同時，Supabase 也是一個托管平台，開發者可以注冊并開始使用 Supabase，無需安裝任何東西，也可以自行托管并在本地開發。Firebase 的核心功能包括：

托管 Postgres 資料庫，支援身份驗證和授權
支援 REST、GraphQL
支援實時訂閱、函數、資料庫函數、Edge 函數
支援檔案存儲、AI + Vector/Embeddings 工具包、儀表闆

目前 Supabase 在 Github 通過 MIT 協定開源，有超過 68k 的 star、6.4k 的 fork、代碼貢獻者 1200+、妥妥的前端優質開源項目。

如何使用 Supabase

下面示例用于了解如何建立 Supabase 項目、向資料庫添加一些示例資料以及從 React 應用程式查詢資料。

第一步使用示例資料設定 Supabase 項目，在 Supabase 儀表闆中建立一個新項目。項目準備就緒後，使用儀表闆中的 SQL 編輯器在 Supabase 資料庫中建立一個表。使用以下 SQL 語句建立一個包含一些示例資料的國家 / 地區：

-- 建立表格
 CREATE TABLE countries (
   id SERIAL PRIMARY KEY,
   name VARCHAR(255) NOT NULL
 );
 -- 插入表格資料
 INSERT INTO countries (name) VALUES ('United States');
 INSERT INTO countries (name) VALUES ('Canada');
 INSERT INTO countries (name) VALUES ('Mexico');

接着使用 Vite 模闆建立 React 應用程式：

npm create vite@latest my-app -- --template react
cd my-app && npm install @supabase/supabase-js
// 安裝依賴 upabase-js 用戶端庫，其提供了一個友善的界面，可以從 React 應用程式中使用 Supabase

在 App.jsx 中，開發者可以使用項目 URL 和公共 API（匿名）密鑰建立 Supabase 用戶端：

import {useEffect, useState} from "react";
  import {createClient} from "@supabase/supabase-js";
  const supabase = createClient("https://<project>.supabase.co", "<your-anon-key>");
  // 建立 Client
  function App() {
    const [countries, setCountries] = useState([]);
    useEffect(() => {
      getCountries();
    }, []);
    // 調用 supabase 方法擷取資料
    async function getCountries() {
      const {data} = await supabase.from("countries").select();
      setCountries(data);
    }
    return (
      <ul>
        {countries.map((country) => (
          <li key={country.name}>{country.name}</li>
        ))}
      </ul>
    );
  }
  export default App;

啟動應用程式，在浏覽器中通路 http://localhost:5173，然後打開浏覽器控制台，開發者應該會看到國家 / 地區清單。

npm run dev
// 啟動服務

除了 React 外，Supabase 還支援和以下前端架構無縫內建：

Next.js
Vue 3
Nuxt 3
Angular
RedwoodJS
SolidJS
Svelte
SvelteKit
refine

當然也包括很多手機端的架構，例如：

Flutter
Expo React Native
Android Kotlin
Ionic React
Ionic Vue
Ionic Angular
Swift

Supabase 為開發者提供了即時 API 來完成繁重的工作，開發者可以檢查資料庫以立即提供 API，進而停止建構重複的 CRUD 端點并專注于産品：

import { createClient } from '@supabase/supabase-js'
// 執行個體化 
const supabaseUrl = 'https://chat-room.supabase.co'
const supabaseKey = 'public-anon-key'
const supabase = createClient(supabaseUrl, supabaseKey)
// 建立一個使用者
const { user, error } = await supabase.auth.signUp({
  email: '[email protected]',
  password: 'example-password',
})

Supabase 還支援邊緣函數，比如：下面示例通過Deno提供了邊緣渲染的 Hello World 方法：

Deno.serve(async (req) => {
  const { name } = await req.json()
  const data = {
    message: `Hello ${name}!`,
  }
  // 直接傳回資料
  return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } })
})

關于更多用例和示例可以參考文末資料，本文不再過多展開。

參考資料

https://github.com/supabase/supabase

https://supabase.com/

https://supabase.com/docs/guides/getting-started/quickstarts/reactjs

https://supabase.com/blog/supabase-studio-3-0

還在用 Firebase？Supabase 也是天花闆級存在！

什麼是 Supabase

如何使用 Supabase

參考資料