創第一個Supabase專案

更新於 發佈於 閱讀時間約 5 分鐘
創第一個supabase專案封面圖片

創第一個supabase專案封面圖片

嗨歡迎閱讀我的文章!這是關於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元起

Supabase的費用0元起

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

創第一個Supabase專案

說那麼多馬上來創一個Supabase專案來玩玩。

創立第一個supabase的帳號

創立第一個supabase的帳號

Supabase創帳號頁面

建議就直接用Github帳號註冊即可,帳號創好以後會直接引導創立一個專案,專案區域就選一個最近的地點即可,方案選擇free方案。

恭喜已經創好第一個Supae專案囉。

有興趣的內容

留言
avatar-img
留言分享你的想法!
鼻爾蓋茲-avatar-img
發文者
2023/09/08
Supabase的資料庫和表格提及了這篇文章,趕快過去看看吧!
avatar-img
技術叢林
6會員
23內容數
沙龍新手
技術叢林的其他內容
2023/10/05
前面文章有說明過訂閱資料庫的更新事件,讓前端畫面能夠收到更新資訊即時反應在用戶面前,那接下來要介紹Supabase的Webhooks則是能讓其他server端收到資料庫事件的通知。 這裡簡單說明一下Webhooks,一般來說是由前端主動呼叫後端API,取回資料,Webhooks則是由後端伺服器觸發某
Thumbnail
2023/10/05
前面文章有說明過訂閱資料庫的更新事件,讓前端畫面能夠收到更新資訊即時反應在用戶面前,那接下來要介紹Supabase的Webhooks則是能讓其他server端收到資料庫事件的通知。 這裡簡單說明一下Webhooks,一般來說是由前端主動呼叫後端API,取回資料,Webhooks則是由後端伺服器觸發某
Thumbnail
2023/09/28
本篇文章又要介紹Supabase好用的實時更新功能,叫做Presence。Presence是 Supabase 提供的一項實時更新功能,讓開發者能夠輕鬆實現用戶之間的實 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supa
Thumbnail
2023/09/28
本篇文章又要介紹Supabase好用的實時更新功能,叫做Presence。Presence是 Supabase 提供的一項實時更新功能,讓開發者能夠輕鬆實現用戶之間的實 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supa
Thumbnail
2023/09/15
Supabase是使用PostgreSQL作為資料庫,所以當然也具有Storage的功能,能夠儲存用戶的圖片或是檔案,一樣可以設定讀取權限相當方便,一起瞭解如何操作。 從後台的大頁籤就可以進去Storage頁面,頁面和資料庫表格有點類似,如果有新增任何buckets就會顯示在All buckets的
Thumbnail
2023/09/15
Supabase是使用PostgreSQL作為資料庫,所以當然也具有Storage的功能,能夠儲存用戶的圖片或是檔案,一樣可以設定讀取權限相當方便,一起瞭解如何操作。 從後台的大頁籤就可以進去Storage頁面,頁面和資料庫表格有點類似,如果有新增任何buckets就會顯示在All buckets的
Thumbnail
看更多
你可能也想看
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
前面文章有說明過訂閱資料庫的更新事件,讓前端畫面能夠收到更新資訊即時反應在用戶面前,那接下來要介紹Supabase的Webhooks則是能讓其他server端收到資料庫事件的通知。 這裡簡單說明一下Webhooks,一般來說是由前端主動呼叫後端API,取回資料,Webhooks則是由後端伺服器觸發某
Thumbnail
前面文章有說明過訂閱資料庫的更新事件,讓前端畫面能夠收到更新資訊即時反應在用戶面前,那接下來要介紹Supabase的Webhooks則是能讓其他server端收到資料庫事件的通知。 這裡簡單說明一下Webhooks,一般來說是由前端主動呼叫後端API,取回資料,Webhooks則是由後端伺服器觸發某
Thumbnail
Supabase是使用PostgreSQL作為資料庫,所以當然也具有Storage的功能,能夠儲存用戶的圖片或是檔案,一樣可以設定讀取權限相當方便,一起瞭解如何操作。 從後台的大頁籤就可以進去Storage頁面,頁面和資料庫表格有點類似,如果有新增任何buckets就會顯示在All buckets的
Thumbnail
Supabase是使用PostgreSQL作為資料庫,所以當然也具有Storage的功能,能夠儲存用戶的圖片或是檔案,一樣可以設定讀取權限相當方便,一起瞭解如何操作。 從後台的大頁籤就可以進去Storage頁面,頁面和資料庫表格有點類似,如果有新增任何buckets就會顯示在All buckets的
Thumbnail
本篇文章主要介紹Supabase裡的Trigger的功能,詳細說明什麼是Trigger和使用時機,以及如何在後台瀏覽和設定Trigger,此外,文章中會提供一個常用的Trigger功能範例。 善用觸發器(Trigger)的話,能夠幫助開發者減少重複執行的工作,提高資料庫效能和安全性,可以說是一個強大
Thumbnail
本篇文章主要介紹Supabase裡的Trigger的功能,詳細說明什麼是Trigger和使用時機,以及如何在後台瀏覽和設定Trigger,此外,文章中會提供一個常用的Trigger功能範例。 善用觸發器(Trigger)的話,能夠幫助開發者減少重複執行的工作,提高資料庫效能和安全性,可以說是一個強大
Thumbnail
這篇要介紹的是Supabase裡的Functions,我不知道有沒有官方的中文譯名,我都直接稱呼為函式或程式。Functions就是和任何程式語言裡面所認識的函式一樣,只差在這個Functions是在PostgreSQL裡面執行,沒有聽錯是在資料庫裡面執行的函式,文章會介紹新增的方式和做一個範例。
Thumbnail
這篇要介紹的是Supabase裡的Functions,我不知道有沒有官方的中文譯名,我都直接稱呼為函式或程式。Functions就是和任何程式語言裡面所認識的函式一樣,只差在這個Functions是在PostgreSQL裡面執行,沒有聽錯是在資料庫裡面執行的函式,文章會介紹新增的方式和做一個範例。
Thumbnail
在supabase裡可以直接從客戶端讀取資料庫中的資料,在設定好RLS的前提之下,更可以對資料庫直接進行新增、修改、刪除等操作。 先進到後台選擇SQL Editor,可以來到SQL編輯器的頁面,如果是本身會寫資料庫相關的SQL內容可以直接點擊上方的New query按鈕,可以開啟一個空白頁面開始編輯
Thumbnail
在supabase裡可以直接從客戶端讀取資料庫中的資料,在設定好RLS的前提之下,更可以對資料庫直接進行新增、修改、刪除等操作。 先進到後台選擇SQL Editor,可以來到SQL編輯器的頁面,如果是本身會寫資料庫相關的SQL內容可以直接點擊上方的New query按鈕,可以開啟一個空白頁面開始編輯
Thumbnail
在上篇文章中Supabase的JavaScript Client Library串接實作我們實際安裝並且使用了supabase-js連接我們的supabase資料庫,並且已經測試成功。本篇文章就來導覽一下supabase-js的文件,還有在頁面裡面示範會員管理系統的登入和登出,以及在客戶端的操作。嗨
Thumbnail
在上篇文章中Supabase的JavaScript Client Library串接實作我們實際安裝並且使用了supabase-js連接我們的supabase資料庫,並且已經測試成功。本篇文章就來導覽一下supabase-js的文件,還有在頁面裡面示範會員管理系統的登入和登出,以及在客戶端的操作。嗨
Thumbnail
Supabase的串接方式很多元,其中在網頁前端中使用起來最簡單也最推薦的方式就是使用官方提供的supabase-js套件,該套件已經把所有REST和REALTIME的API功能包好,可以方便的在網頁中提取使用。嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什
Thumbnail
Supabase的串接方式很多元,其中在網頁前端中使用起來最簡單也最推薦的方式就是使用官方提供的supabase-js套件,該套件已經把所有REST和REALTIME的API功能包好,可以方便的在網頁中提取使用。嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什
Thumbnail
Supabase裡的每個專案都自帶一組開箱即用的會員系統和身份認證系統,只需要使用Supabase提供的SDK,不管是身份認證、登入、登出、會員管理,處理TOKEN等功能都包在裡面處理到好,相當實用。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功
Thumbnail
Supabase裡的每個專案都自帶一組開箱即用的會員系統和身份認證系統,只需要使用Supabase提供的SDK,不管是身份認證、登入、登出、會員管理,處理TOKEN等功能都包在裡面處理到好,相當實用。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功
Thumbnail
是時候討論資料庫安全性的時候!還記得上一篇Supabase的資料庫和表格文章中,建立一個新的表格時有把一個RLS的按鈕打開,這篇文章就是簡單的說明一下RLS是什麼,以及RLS如何設定等等範例。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,
Thumbnail
是時候討論資料庫安全性的時候!還記得上一篇Supabase的資料庫和表格文章中,建立一個新的表格時有把一個RLS的按鈕打開,這篇文章就是簡單的說明一下RLS是什麼,以及RLS如何設定等等範例。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,
Thumbnail
嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。 Supabase的資料庫基底是PostgreSQL,在PostgreSQL中又是有著各種表格,以及各種欄位所構成,接下來搭配介面介紹。如果想要對Post
Thumbnail
嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。 Supabase的資料庫基底是PostgreSQL,在PostgreSQL中又是有著各種表格,以及各種欄位所構成,接下來搭配介面介紹。如果想要對Post
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News