創第一個Supabase專案

鼻爾蓋茲

更新於 2023/12/11發佈於 2023/07/27閱讀時間約 4 分鐘

創第一個supabase專案封面圖片

嗨歡迎閱讀我的文章！這是關於Supabase的系列文章，內容包含介紹Supabase是什麼、基本功能應用，深入了解Supabase的進階功能應用。

Supabase將為前端開發帶來創新、便利和效率。

什麼是Supabase？

Supabase官網

Supabase官網截圖

Supabase是一個開源的後端服務平台，提供完全可擴展的PostgreSQL資料庫和RESTful API。它結合了實時的WebSocket功能和角色認證，讓開發者能夠快速建立應用程式。Supabase簡化了應用程式開發和數據管理，是現代Web應用開發的理想選擇。

簡單來說Supabase是一個整合後端程式、資料庫、用戶授權、訪問權限等後端即服務(Baas)的平台，功能強大而且在有限的額度內免費使用，提供所有正在使用Firebase的人或是準備使用Firebase的人一個全新替代方案。

資料庫與API快速聯動

Supabase是一個採用PostgreSQL作為資料庫的開發平台，先進入後台為你的專案設定好資料庫內的表格格式後，包含新增、刪除、修改等API即自動生成，而且可以無限制的請求。

const { data, error } = await supabase.from('dogs').select(`*`)

實時更新的資料庫

Supabase功能強大的地方在於資料庫的實時更新也能及時收到通知，可以用短短幾行程式就可做到接收資料庫通知的功能，讓資料庫中的所有變更都可以即時接收並且反應在前端頁面。

// Get notified of all new chat messages 
const realtime = supabase.from('messages')
  .on('INSERT', message => {
    console.log('New message!', message)
  })
  .subscribe()

完整開源的用戶管理系統

面對每個高速成長的app，管理用戶資料是不可或缺的功能。
Supabase提供每個專案完整的用戶管理系統，簡單幾步驟就可以完成email註冊登入，同時也提供多種第三方登入可用，省去花費心力去撰寫用戶註冊登入以及密碼判斷等重工處，讓人可以直接全心全力進入專案開發。

// Create a new user
const { user, error } = await supabase.auth.signUpWithPassword({
  email: 'example@email.com',
  password: 'example-password',
})

官方JS套件支援

supabase/supabase-js: An isomorphic Javascript client for Supabase. (github.com)

官方提供一套完整的Javascript Client Library，包裝好所有Supabase串接會用上的功能，同時也提供大部分前端框架的範例，讓前端在串接上的舒適度大幅提升。

Supabase如何計費？

Supabase的費用0元起

每個帳號可以免費創2個專案，每個專案可以有500MB的容量、每月約50000名活躍用戶的限制，其餘詳細內容可以自行去Supabase頁面上查看，對於專案開發初期使用算是相當足夠，如果之後用量有超過時，就該考慮是否要轉移平台或選擇付費繼續使用Supabase系統，又或者是考慮本地端使用Supabase。