前端進階

-

認識 PostgreSQL 與 Supabase - 基本觀念與使用教學

this.web

PostgreSQL & Supabae 教學文章封面

什麼是 PostgreSQL?

PostgreSQL 是一個免費、開源的資料庫系統,也是現在最熱門的資料庫。

PostgreSQL 強大的地方在於,除了足夠穩定、內建各種豐富的資料類型像是 JSONB、陣列以外,也支援複雜的運算和函數處理。

前端工程師要會 PostgreSQL 嗎?

不一定,但我很推薦你去了解資料庫和 PostgreSQL。我認為有以下好處:

  1. 更好地理解 API 與後端資料流:如果你理解資料庫和資料格式,在串 API 時也會注意到更多細節,跟後端工程師的溝通也會更順暢
  2. 排錯能力更強:當遇到錯誤時,可以更全面的思考可能發生的原因,也許有時候是後端回傳的資料有問題,或是資料庫的運算邏輯出錯。
  3. 做小型專案或個人作品:有時候團隊不見得有後端幫忙,又或者你有什麼 Side Project 想法,這時如果有基本的資料庫技能,就可以快速上手。
  4. 成為更高階的工程師:如果你想繼續往上爬,成為架構決策者或是想了解系統設計,資料庫是很重要的一個環節。

前端工程師如何快速開始練習 PostgreSQL?

最簡單的方式就是直接用 Supabase 開一個免費的專案

Supabase 是一個用 PostgreSQL 服務平台,你可以直接在 Supabase 開一個專案,使用 PostgreSQL,

除此之外,Supabase 也提供其他服務,像是使用者系統(Auth)、檔案儲存(Storage)、RESTful 與 GraphQL API、以及視覺化 dashboard 等功能。讓我們在使用 PostgreSQL 上更輕鬆,不需要自己額外架資料庫。

讓前端開發者不需要後端知識也能打造一個完整的應用。

如何使用 Supabase?

先到 supabase 的官網,可以直接使用 GitHub 登入。

supabase 登入示意

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

Organizations 示意

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

創立 Organizations

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

創立 Projects

打上名稱、密碼選擇地區就可以創建了。密碼要記得,之後連線會需要用到密碼,如果忘記了之後也能在後台重新設定密碼。

創建好後就可以開始使用了,Supabase 好用的地方在於他提供兩種操作方式:

如果你是完全的 SQL 新手,你可以使用視覺化的工具來創建 table。

使用視覺化工具建立表格

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

用 SQL 建立表格

如何連接 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 也能練習到基本的觀念,總之,直接去動手做吧!

你可能會感興趣的文章 👇