ThisWeb
資深前端工程師
發佈/更新於
和 2000+ 工程師一起學習軟體、AI 開發技巧，每週一收穫 1 篇技術內容、1 段職涯分享、1 個最新資訊！
PostgreSQL 是一個免費、開源的資料庫系統，也是現在最熱門的資料庫。
PostgreSQL 強大的地方在於，除了足夠穩定、內建各種豐富的資料類型像是 JSONB、陣列以外，也支援各種複雜的運算和函數處理。
更厲害的是他可以設定 Row Level Security (RLS)，功用是讓我們可以妥善的管理每個資料的權限，不必擔心被惡意攻擊。
如果你只是想 Vibe Coding 做一個給自己用的網站，不一定要使用 PostgreSQL，可以選擇用 Notion 或 Google Sheet 當作後台，
但如果你需要更強大的資料庫功能，或是需要更好的效能，就很推薦使用 PostgreSQL！
而以前端工程師來說，我很推薦你去了解資料庫和 PostgreSQL。我認為有以下好處：
綜合來說，我還是很推薦如果有心力，就可以去了解 PostgreSQL 的！
那我們要怎麼練習 PostgreSQL 呢？最簡單的方式就是直接用 Supabase 開一個免費的專案。
Supabase 是一個以 PostgreSQL 為主的服務平台，你可以直接在 Supabase 開一個專案後直接使用 PostgreSQL。
除了 PostgreSQL 以外，Supabase 也提供其他強大的服務，像是使用者系統（Auth）、檔案儲存（Storage）、RESTful 與 GraphQL API、以及視覺化 Dashboard 等功能。
讓我們不管是 Vibe Coding 還是前端工程師在使用 PostgreSQL 上更輕鬆，不需要自己額外架資料庫，不需要後端知識也能打造一個完整的應用。
那我們要如何使用 Supabase 呢？其實很簡單，
先到 supabase 的官網，接著直接使用 GitHub 登入。
登入之後就可以到後台建立 Organization（組織），可以看到我已經建立一個叫做 ThisWeb 的組織。
建立組織的方式也很簡單，打上名稱、類型和服務方案就好，以練習來說，免費的方案已經非常足夠了！
然後它會要我們創建 Project，Project 就是專案，就是你的 PostgreSQL 資料庫了！每個組織可以有多個專案，換句話說，每個組織可以創建多個 PostgreSQL 資料庫。
接著打上名稱、密碼選擇地區就可以創建了。密碼要記得哦！之後連線會需要用到密碼，如果忘記了之後也能在後台重新設定密碼。
創建好後就可以開始使用 Supabase 了，Supabase 好用的地方在於他提供兩種操作方式：
接著就來簡單介紹一下這兩種操作方式：
如果你是完全的 SQL 新手，對於 SQL 的語法還很不熟悉，那你可以使用視覺化的工具來創建 table。比如以下的圖片就是我創建了一個 user 表格。
如果你想練習 SQL，或是你很熟悉 SQL。
可以直接使用 Supabase 提供的 SQL Editor 來操作資料庫，這樣要請 AI 輸入或是自己練習都非常方便，比如下方圖片我就用 SQL 的方式建立了一個 users table：
我們可以使用 supabase.js 這個函式庫
先安裝套件：
接著建立 supabase client，在 Supabase 的專案頁面就可以看到資料庫的 url 和 anon-key，接著就能夠使用啦！
只要設定好 Row Level Security (RLS)，將操作資料的權限保護起來，那這裡的 anon-key 放在前端是沒關係的。
居然這麼多資料庫，為什麼我建議選擇 PostgreSQL 呢？可以簡單分成幾點：
簡單說一句話就是 PostgreSQL 太強大了，Supabase 又整合的非常好，不管是對端工程師，還是新創團隊，都非常容易上手。
如果你現在是前端工程師想練習 Database 又不知道從哪裡開始。
PostgreSQL 和 Supabase 是一個很好的切入點，做個簡單的 Todo list 也能練習到基本的觀念，總之，直接去動手做吧！
npm install @supabase/supabase-jsimport { 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('*');