Supabase 整合

概覽

Supabase 是一個開源後端平台，讓使用者能夠儲存資料並提供類似後端的功能。您可以透過 Supabase 連接，解決您的 Atoms 團隊僅將資料儲存在瀏覽器記憶體中的問題，因為這些資料會在重新整理或關閉時遺失。透過將 Atoms 與 Supabase 整合，您可以將您的網站轉變為具備持久化儲存與進階功能的完整應用程式。

請在此查看更多說明：

主要優勢

除了無需開發經驗之外，它還有另外三項主要優勢：

1. 快速設定： 快速建立您的後端並加速開發流程。
2. 高擴充性： 能因應使用者成長，讓您的專案不受限制地擴展。
3. 具成本效益： 提供適合小型專案與新創團隊的免費方案。

將 Supabase 連接到 Atoms

以下是將 Atoms 與 Supabase 連接的簡短指南。

1. 在 Atoms 中開始 Supabase 整合

   • 開啟 設定。

   • 從左側邊欄選擇 連接器。

   • 找到 Supabase 連接器並點擊 連接。

     

   • Atoms 會顯示連接設定介面，您可依照指示操作。

2. 驗證並設定您的專案

   系統會跳出一個視窗，提示您登入您的 Supabase 帳號。

   • 從下拉選單中選擇您的組織。

   • 點擊 授權 Atoms 以授權您的 Supabase 帳號。 (幾秒內即可完成連線——無需手動設定)

   • 完成授權後，您可以：

     • 從清單中選擇現有的 Supabase 專案，或
     • 點擊 +新增一個 以立即新增新的組織。 (如果您需要引導，Atoms Assistant 可協助您完成將 Supabase 連接到 Atoms 的流程。)

3. 自動設定

   • 選取您的專案後，Atoms 會自動連接到您的 Supabase 專案。它會擷取您的資料庫結構、資料表與安全設定。
   • 當您看到「Supabase 已連接」通知時，代表您的後端已完成設定並可立即使用。

使用者驗證

在 Atoms 中建立您的 app 後，您可能會想要實作使用者驗證。Supabase Auth 可簡化在您的 app 中加入身分驗證與授權的流程。在此過程中，Atoms 將引導您使用兩種方法：(1) 電子郵件與密碼 以及 (2) 社群登入（Google）。

電子郵件與密碼

1. 將 Supabase 與 Atoms 連接

   • 請確認您擁有有效的 Supabase 帳號。
   • 點擊聊天介面右上角的授權按鈕，以授權您的 Supabase 帳號。
   • 選擇您要使用的 Supabase 專案。

2. 告訴智能體您的需求

   • 在聊天中輸入您的需求。例如，您可以直接輸入提示詞：「Add authentication」。
   • 這通常會產生一個已連接到 Supabase 驗證系統的基本登入與註冊頁面。

3. 建立測試用使用者

   • 使用新加入的登入／註冊介面建立測試使用者。
   • 重新整理頁面以確認使用者工作階段會持續保留。
   • 或者，前往您的 Supabase 儀表板，進入 Authentication > Users，手動新增測試使用者。

4. 部署您的 App

社群登入（Google）

1. 在 Supabase 專案中設定 Google OAuth

   • 前往您的 Supabase 儀表板中的 Authentication 頁面。
   • 進入 Sign In/Up 子頁面。
   • 找到 Google 選項並切換開關以啟用。 (如需詳細的 Supabase 設定步驟，請參考在 Supabase 中設定 Google OAuth 或 Supabase Docs。)

2. 告訴智能體您的需求

   • 在聊天中輸入您的需求。例如："Add Google authentication"。
   • 這會在您的登入頁面加入一個 Continue with Google 按鈕。

3. 測試 Google 驗證

   • 前往登入頁面。
   • 點擊 Continue with Google 按鈕。
   • 使用 Google 帳號登入，並確認使用者個人資料已正確更新。
   • 完成 Google OAuth 流程，以確保使用者會重新導回您的 app。

4. 將您的 App 部署到 Atoms 的 App 世界

在 Supabase 中設定 Google OAuth

1. 建立 Google Cloud 專案

   • 進入 Google Cloud Console

     • 開啟 Google Cloud Console 並登入您的 Google 帳號。

   • 建立新專案

     • 點擊頂部的下拉選單並選擇 New Project.
     • 輸入專案名稱、選擇帳單帳戶，然後點擊 Create.

2. 設定 Google OAuth 憑證

   • 設定同意畫面

     • 在搜尋列中輸入 OAuth，並開啟 OAuth 同意畫面。
     • 填寫您的 app 名稱、使用者支援電子郵件及其他必要欄位。
     • 選擇 External 或 Internal，然後點擊 Create。

   • 建立 OAuth Client ID

     • 點擊 Create OAuth Client，然後選擇 OAuth Client ID。
     • 在 Application Type 中，選擇 Web application。
     • 在 Authorized redirect URIs 中，加入來自 Supabase 儀表板的回呼 URL。
     • 點擊 Create，並記下產生的 Client ID 與 Client Secret。

3. 在 Supabase 中設定 Google OAuth

   • 登入 Supabase Dashboard

     • 開啟 Supabase Dashboard 並登入您的專案。

   • 啟用 Google OAuth

     • 前往 Authentication 頁面。
     • 在 Providers 區段中，找到 Google 選項並啟用它。
     • 將先前產生的 Client ID 與 Client Secret 加入對應欄位。

   • 儲存設定

     • 點擊 Save 以套用變更。

資料儲存

在為您的 web/app 設定好使用者驗證後，您可能也會想要儲存使用者資料。

一旦連接到 Supabase，您只需告訴 Atoms 您想將哪些資料儲存到資料庫中。智能體會自動設定資料庫資料表，並將其直接整合到您的 UI 中。

1. 定義您的需求

   • 在聊天中輸入您的需求。例如："Please ensure that new trip records are saved to the database"。
   • 請盡可能清楚描述您想儲存的資料。
   • Atoms 會根據您的輸入自動設定所需的資料庫結構。

2. 在 Atoms 中測試功能

   • 在您的 app 中建立範例資料，例如透過 UI 新增幾筆「trip records」。
   • 儲存資料並重新整理頁面。資料將同步到 Supabase 資料庫。
   • 登入 Supabase，並確認新加入的資料是否存在於資料庫中。

3. 驗證 Atoms 與 Supabase 之間的資料同步

   • 開啟 Supabase 儀表板並前往 Table Editor。
   • 修改現有資料或建立新資料。
   • 在 Supabase 中所做的變更會即時同步到您的 Atoms app。
   • 返回 Atoms，並確認修改後或新建立的資料是否正確顯示。
   • 若資料成功同步，則表示您的設定已完成。

4. 部署您的 App

Edge Functions

Supabase Edge Functions 是部署在靠近使用者之伺服器節點上的無伺服器後端程式。它們免除了建置與維護傳統伺服器的需求，讓您能以更低的網路延遲和更快的回應速度執行任何自訂邏輯。在多數 web 應用程式中，前端（按鈕、表單、UI）負責處理基本互動，但某些關鍵操作必須在後端執行，例如：

• 使用者註冊後自動寄送歡迎電子郵件；
• 在表單提交時呼叫 AI API 來分析或評分內容；
• 在結帳過程中整合第三方支付閘道並記錄訂單詳情。

所有這些操作都是透過 Edge Functions 實作的。

使用情境

在 Atoms 中使用 Supabase Edge Functions，您可以：

• 寄送歡迎電子郵件：在新使用者註冊後，自動寄送包含下一步引導的歡迎訊息，以提升互動與新手引導體驗。
• 處理使用者表單提交：在提交回饋、註冊或留言後，自動產生並發送確認通知（例如：「We've received your feedback and will review it shortly」），讓使用者知道操作已成功。
• 排程提醒：透過電子郵件或推播設定每日或每週通知（會議、任務或活動），協助使用者管理時間並維持生產力。
• 善用 AI 服務：在使用者輸入文字後，自動呼叫 OpenAI 等 AI API 進行文法檢查或智慧改寫，並將最佳化結果回傳給使用者。
• 處理線上付款：當使用者在您的電商或服務平台發起付款時，整合 Stripe 等閘道以安全處理交易，並顯示含有訂單詳情的清楚成功或失敗頁面。

金鑰儲存與管理

許多應用程式需要金鑰或 API 憑證來連接第三方服務（例如 Stripe、OpenAI）。當 Supabase 已連接時，Atoms 會提供安全的方式來管理與使用這些機密資訊。透過 Atoms 與 Supabase 的整合，每當某個函式需要機密資訊時，Atoms 都會自動偵測並提示您輸入所需值。您只需點擊智能體的「Add API Key」按鈕並輸入您的金鑰；接著 Atoms 會將其加密後儲存在 Supabase 的 Edge Functions Secrets Manager 中。執行期間，這些金鑰會被安全地注入函式中，避免憑證以明文形式儲存。

新增並部署後端函式

連接到 Supabase 後，請告訴智能體您需要什麼：

• 在聊天中輸入您的請求。例如：「Generate a webpage that calls the Gemini API to estimate food calories and returns the result when I upload a food photo.」

• 當智能體產生程式碼後，會出現兩個按鈕：Add API Key 和 View in Edge Function。

• 點擊 Add API Key。

• 輸入您的 API key，然後點擊 Send。

• 點擊 View in Edge Function。

• 您將被重新導向至 Supabase Edge Function 頁面。

  安全性注意事項：所有金鑰都會加密並儲存在 Supabase 中；Atoms 無法存取它們。

常見問題

如何將 Supabase 後端功能新增到我的應用程式？

只需三個簡單步驟，即可將 Supabase 整合到您的應用程式中：

• 點擊聊天介面右上角的授權按鈕，以授權您的 Supabase 帳號。
• 選擇並連結您要使用的 Supabase 專案。
• 在聊天中分享您的需求，智能體會根據您已連接的 Supabase 專案開發功能。

Supabase 支援社群登入嗎？

Supabase 支援多種驗證方式，包括：

• 電子郵件與密碼。
• 無密碼驗證：例如一次性密碼（OTP）或 magic links 等選項。
• 社群登入：支援 Google、Twitter 和 GitHub 等第三方提供者。
• 手機驗證。
• 單一登入（SSO）：支援 SAML SSO。
• 匿名登入：允許使用者匿名登入。

我的 app 需要建立獨立的 Supabase 專案嗎？

您可以選擇現有的 Supabase 專案，也可以建立新的專案。每個聊天一次只能連接一個專案。

連接到 Supabase 後，如果我克隆專案，連接還會保留嗎？

克隆後連接會中斷，需要重新建立。此外，如果 App 世界中由其他使用者分享的 app 已連接到 Supabase，其他使用者將無法克隆它。

我可以讓多個 Atoms 專案共用同一個 Supabase 資料庫嗎？

可以，您可以讓多個 Atoms 專案使用同一個 Supabase 資料庫。不過，您需要謹慎管理連接與設定。

為什麼我的專案沒有顯示在 Supabase 組織下？

在 Supabase 免費方案中，任何連續七天沒有活動的專案都會自動暫停。在 Atoms Organizations 清單中，切換到 Inactive 篩選條件，即可查看任何已被暫停的專案。

為什麼我在嘗試連接到 Supabase 時會看到 \

Supabase 對每個組織與 Atoms 帳號之間實施一對一的 OAuth 綁定。如果「Test」組織已由另一位 Atoms 使用者授權，之後任何使用不同帳號進行綁定的嘗試都會因這個錯誤而遭到拒絕。若要修正此問題，請在 Supabase Dashboard 側邊欄中前往 Settings → API → OAuth Apps，刪除該組織現有的 Atoms OAuth 授權，然後返回 Atoms 並使用您自己的帳號重新連接。