前端進階
-認識 PostgreSQL 與 Supabase - 基本觀念與使用教學
this.web

什麼是 PostgreSQL?
PostgreSQL 是一個免費、開源的資料庫系統,也是現在最熱門的資料庫。
PostgreSQL 強大的地方在於,除了足夠穩定、內建各種豐富的資料類型像是 JSONB、陣列以外,也支援複雜的運算和函數處理。
前端工程師要會 PostgreSQL 嗎?
不一定,但我很推薦你去了解資料庫和 PostgreSQL。我認為有以下好處:
- 更好地理解 API 與後端資料流:如果你理解資料庫和資料格式,在串 API 時也會注意到更多細節,跟後端工程師的溝通也會更順暢
- 排錯能力更強:當遇到錯誤時,可以更全面的思考可能發生的原因,也許有時候是後端回傳的資料有問題,或是資料庫的運算邏輯出錯。
- 做小型專案或個人作品:有時候團隊不見得有後端幫忙,又或者你有什麼 Side Project 想法,這時如果有基本的資料庫技能,就可以快速上手。
- 成為更高階的工程師:如果你想繼續往上爬,成為架構決策者或是想了解系統設計,資料庫是很重要的一個環節。
前端工程師如何快速開始練習 PostgreSQL?
最簡單的方式就是直接用 Supabase 開一個免費的專案。
Supabase 是一個用 PostgreSQL 服務平台,你可以直接在 Supabase 開一個專案,使用 PostgreSQL,
除此之外,Supabase 也提供其他服務,像是使用者系統(Auth)、檔案儲存(Storage)、RESTful 與 GraphQL API、以及視覺化 dashboard 等功能。讓我們在使用 PostgreSQL 上更輕鬆,不需要自己額外架資料庫。
讓前端開發者不需要後端知識也能打造一個完整的應用。
如何使用 Supabase?
先到 supabase 的官網,可以直接使用 GitHub 登入。

登入之後就可以到後台建立 Organization,可以看到我已經建立一個叫做 ThisWeb 的組織

建立組織的方式也很簡單,打上名稱、類型和服務方案就好,以練習來說,免費的方案已經非常足夠了!

接著他會要我們創建 Project,Project 就是專案,可以想成你的 PostgreSQl 資料庫,每個組織可以有多個 Project。

打上名稱、密碼選擇地區就可以創建了。密碼要記得,之後連線會需要用到密碼,如果忘記了之後也能在後台重新設定密碼。
創建好後就可以開始使用了,Supabase 好用的地方在於他提供兩種操作方式:
如果你是完全的 SQL 新手,你可以使用視覺化的工具來創建 table。

或是用輸入 SQL 的方式建立 table,這樣要請 AI 輸入或是自己練習都非常方便,比如這邊我建立一個 users table:

如何連接 Supabase
我們可以使用 supabase.js 這個函式庫
先安裝套件:
npm install @supabase/supabase-js
接著建立 supabase client,在專案頁面可以看到 supabase 的 url 和 password,接著就能夠使用啦!
import { createClient } from '@supabase/supabase-js'
// Create a single supabase client for interacting with your database
const supabase = createClient('<https://xyzcompany.supabase.co>', 'publishable-or-anon-key')
const { data, error } = await supabase
.from('users')
.select('*')
為什麼要選擇 PostgreSQL?
這麼多資料庫,為什麼我建議選擇 PostgreSQL 呢?可以簡單分成幾點:
主流趨勢:根據 Stack Overflow 開發者調查,PostgreSQL 已連續成為最受歡迎的資料庫之一,使用率也超越 MySQL,代表社群與生態資源非常充足。
功能完整:內建 JSONB、全文檢索、地理資料 PostGIS 等強大功能,能同時兼顧傳統關聯式與現代非關聯式的應用需求。
高一致性與可靠性:完全遵循 ACID 特性,交易與資料一致性保證比 MySQL 更嚴謹。
可擴充性強:支援自訂函數、資料型別與豐富的外掛,能應付多樣化需求。
與 Supabase 深度整合:Supabase 就是基於 PostgreSQL 打造,前端工程師幾乎零後端經驗就能直接使用和練習,非常方便。
簡單說一句話就是 PostgreSQL 太強大了,Supabase 又整合的非常好,容易上手。
總結
如果你現在是前端工程師想練習 Database 又不知道從哪裡開始。PostgreSQL 和 Supabase 是很好的切入點,做個簡單的 Todo list 也能練習到基本的觀念,總之,直接去動手做吧!