---
# System prepended metadata

title: 我的第一個全端專案：為什麼選擇Supabase讓新手開發變得不再可怕

---

# 我的第一個全端專案：為什麼選擇Supabase讓新手開發變得不再可怕

![新手開發者面對複雜程式碼的困惑](https://hackmd.io/_uploads/SJO5tCZ_xe.jpg)
還記得三個月前，我坐在電腦前盯著螢幕上密密麻麻的程式碼，心裡只有一個想法：「為什麼做個網站這麼複雜？」


我想做一個簡單的待辦事項應用，可以讓使用者註冊、登入、新增任務，就這樣。聽起來很簡單對吧？但現實是，我需要學會設定資料庫、寫API、處理身份驗證、部署伺服器...光是想到這些就讓我頭痛。

直到我遇見了Supabase，一切都變得不一樣了。

## 後端到底是什麼鬼東西？

剛開始學程式的時候，大家都會跟你說「前端負責使用者看到的部分，後端負責資料處理」。聽起來很有道理，但當你真的要動手做的時候，就會發現事情沒那麼簡單。

讓我用一個比喻來解釋。想像一下你去餐廳吃飯：

![餐廳前後場比喻圖](https://hackmd.io/_uploads/HklyqAZuxx.jpg)

- **前端**就像餐廳的用餐區，漂亮的裝潢、舒適的座位、精美的菜單
- **後端**就像廚房，有食材儲存、料理製作、品質控制
- **API**就像服務生，負責把你的點餐需求傳到廚房，再把做好的菜端出來

聽起來很合理對吧？但問題是，如果你要自己開餐廳，你得：
- 設計廚房配置（資料庫設計）
- 招聘廚師（後端程式設計）
- 訓練服務生（API開發）
- 制定食安標準（安全性設定）
- 建立訂餐系統（身份驗證）

對新手來說，這根本是不可能的任務。

## 意外遇見的救星

就在我快要放棄做全端開發的時候，我在YouTube上看到一個教學影片，講者隨手就做出了一個有登入功能的應用。我以為是魔術，後來才發現他用的是Supabase。

「這什麼東西？」我心想，「聽都沒聽過。」

好奇心驅使下，我點開了Supabase的官網。第一眼看到的標語讓我眼睛一亮：「開源的Firebase替代方案」。

等等，我知道Firebase！那個Google的後端服務，聽說很強大但學起來也不簡單。如果Supabase是它的開源版本，會不會更親民一些？

抱著死馬當活馬醫的心態，我註冊了Supabase的免費帳號。接下來發生的事情，徹底改變了我對後端開發的看法。

## 原來後端可以這麼簡單

![Supabase服務架構圖](https://hackmd.io/_uploads/H12kqAbOge.jpg)

建立專案後，我被Supabase的管理介面驚豔到了。不是因為它有多華麗，而是因為它把複雜的東西變得好理解。

### 資料庫不再是黑盒子

以前聽到「PostgreSQL」我就頭痛，總覺得那是資深工程師才會的東西。但在Supabase裡，建立資料表就像用Excel一樣直覺。

我想要一個users表格嗎？點一下「New table」，輸入欄位名稱，選擇資料類型，完成。想要一個tasks表格？一樣簡單。

最棒的是，Supabase會自動幫你產生API。我不用寫任何後端程式碼，就可以透過API對資料庫進行增刪改查。這簡直就是魔法。

### 身份驗證變成一行程式碼

記得我之前為了實作登入功能，研究了密碼加密、JWT Token、Session管理...光是看文件就看得眼花撩亂。

但在Supabase裡：

```javascript
// 使用者註冊
await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'password'
})

// 使用者登入
await supabase.auth.signIn({
  email: 'user@example.com', 
  password: 'password'
})
```

就這樣。沒錯，就是這麼簡單。Supabase幫你處理所有複雜的安全性問題，你只要專注在應用邏輯就好。

### 即時功能讓我的APP活起來

我的待辦事項應用有一個小問題：如果我在手機上新增了任務，電腦版的畫面不會立刻更新。我得重新整理頁面才能看到新的任務。

在傳統的做法中，要實作即時更新需要WebSocket、Server-Sent Events等技術。對新手來說又是一座高山。

但Supabase的即時功能讓這變得超簡單：

```javascript
// 監聽資料庫變化
supabase
  .from('tasks')
  .on('INSERT', payload => {
    console.log('新增了任務:', payload.new)
    // 更新畫面
  })
  .subscribe()
```

當我第一次看到新增的任務立刻出現在所有裝置上時，那種興奮感真的難以言喻。我的應用突然間就像那些專業的產品一樣，有了「活生生」的感覺。

## 我的第一個專案誕生記

有了Supabase的加持，我終於有勇氣開始做我的第一個全端專案：一個團隊用的待辦事項管理應用。

### 第一週：建立基礎架構

我花了大約一週的時間設計資料庫結構。感謝Supabase的視覺化編輯器，我可以很直觀地看到各個表格之間的關係。

- users表：存放使用者資料
- teams表：存放團隊資訊  
- tasks表：存放任務資料
- team_members表：處理多對多關係

以前我對「外鍵」、「關聯式資料庫」這些概念一知半解，但透過Supabase的介面，我終於真正理解了它們的運作原理。

### 第二週：實作核心功能

有了資料結構，接下來就是實作功能。我用React寫前端，搭配Supabase的JavaScript SDK。

最讓我印象深刻的是Row Level Security (RLS)的設定。這個功能讓我可以確保使用者只能看到自己團隊的任務，而不會誤看到其他團隊的資料。

雖然一開始設定RLS讓我有點困惑（這也是我在Reddit上看到其他新手抱怨的問題），但當我理解了原理之後，就覺得這個設計真的很貼心。安全性不是事後想到的東西，而是內建在系統核心裡。

### 第三週：部署與優化

部署是我最擔心的部分。以前聽說部署很複雜，要設定伺服器、網域、SSL憑證...

但Supabase讓這一切變得簡單。我的資料庫本來就在雲端上，前端我用Vercel部署，整個過程不到一個小時就完成了。

看著我的應用在網路上正常運作，那種成就感真的無法用言語形容。

![成功開發專案的開心場景](https://hackmd.io/_uploads/H1slqAWulg.jpg)

## Supabase適合你嗎？

經過三個月的使用，我覺得Supabase特別適合這些情況：

### 如果你是新手，而且...

- **想要快速看到成果**：不用花幾個月學後端，幾天就能做出有模有樣的應用
- **預算有限**：免費額度很慷慨，足夠你做好幾個個人專案
- **不想被大公司綁架**：開源意味著你隨時可以把資料搬走
- **希望學到真正有用的技術**：PostgreSQL是業界標準，學會了到哪都用得到

### 但是，如果你...

- **只是想做簡單的靜態網站**：那可能用不到Supabase
- **團隊已經深度使用Google服務**：Firebase可能更適合
- **完全不想碰SQL**：那可能要考慮其他NoSQL方案

### 常見的新手陷阱

根據我自己的經驗和網路上其他人的分享，新手使用Supabase最常遇到的問題：

1. **過度複雜化RLS設定**：開始時先把安全性政策設簡單，等熟悉後再優化
2. **搞混API Key的用途**：記住anon key是給前端用的，service key千萬不要暴露
3. **忽視本地開發環境**：用Supabase CLI建立本地環境，避免直接在線上測試

## 給新手的實際建議

如果你也想嘗試Supabase，我建議你這樣開始：

### 第一步：從Todo應用開始
不要想太複雜，就做一個簡單的待辦事項應用：
- 使用者註冊/登入
- 新增/編輯/刪除任務
- 即時同步

這個專案可以讓你體驗到Supabase的核心功能，而且網路上有很多教學資源。

### 第二步：找到好的學習資源
我推薦幾個對新手友善的資源：
- Supabase官方文檔的Getting Started
- PedroTech的YouTube完整課程（1.5小時就能入門）
- 官方的各種框架整合教學

### 第三步：加入社群
Supabase的Discord社群很活躍，遇到問題可以在那裡求助。Reddit的r/Supabase也是不錯的地方，很多人會分享實際經驗。

### 第四步：逐步進階
當你熟悉基本功能後，可以嘗試：
- Edge Functions（無伺服器函數）
- Vector資料庫（AI應用的基礎）
- 更複雜的RLS政策

## 三個月後的感想

回頭看這三個月的學習歷程，我最大的感觸是：技術的門檻其實沒有想像中那麼高，關鍵是找到對的工具和對的入門方式。

Supabase讓我從一個只會寫靜態網頁的人，變成可以做出有模有樣的全端應用的開發者。更重要的是，它讓我理解了後端開發的核心概念，為我後續學習更進階的技術奠定了基礎。

如果你也是個想要嘗試全端開發的新手，別被那些複雜的技術名詞嚇到了。選對工具，用對方法，你會發現原來自己也能做出很酷的東西。

而Supabase，很可能就是你需要的那個起點。

---

**延伸閱讀：**
- [Supabase官方入門指南](https://supabase.com/docs/guides/getting-started)
- [為什麼選擇PostgreSQL而不是NoSQL？](https://supabase.com/database)
- [新手常見問題與解決方案](https://supabase.com/docs/guides/troubleshooting)

**想要開始你的第一個Supabase專案嗎？**
1. 前往 [supabase.com](https://supabase.com) 註冊免費帳號
2. 跟著官方的To-Do教學做一遍


記住，每個高手都曾經是新手。重點不是一開始就做得完美，而是勇敢地開始第一步。