Supabase 連携

概要

Supabase は、ユーザーがデータを保存し、バックエンドのような機能を提供できるオープンソースのバックエンドプラットフォームです。Supabase と連携することで、Atoms チームがブラウザのメモリ内にしか保存されず、更新や終了時に失われる可能性があるという問題を解決できます。Atoms を Supabase と連携すると、永続ストレージと高度な機能を備えた完全に機能するアプリケーションへと Web サイトを変換できます。

詳しい手順はこちらをご覧ください：

主な利点

開発経験が不要なことに加えて、さらに 3 つの主な利点があります：

1. 迅速なセットアップ: バックエンドをすぐに立ち上げ、開発プロセスを加速できます。
2. 高い拡張性: ユーザーの増加に対応し、制限なくプロジェクトを拡張できます。
3. 費用対効果が高い: 小規模プロジェクトやスタートアップに最適な無料枠を提供します。

Supabase を Atoms に接続する

ここでは、Atoms と Supabase を接続するための簡単なガイドを紹介します。

1. Atoms で Supabase 連携を開始する

   • Settings を開きます。

   • 左側のサイドバーから Connectors を選択します。

   • Supabase コネクタを見つけて Connect をクリックします。

     

   • Atoms に接続設定インターフェースが表示されるので、それに従って進めます。

2. 認証してプロジェクトを設定する

   ポップアップが表示され、Supabase アカウントへのサインインを求められます。

   • ドロップダウンメニューから組織を選択します。

   • Authorize Atoms をクリックして Supabase アカウントを認証します。 (接続は数秒で完了し、手動設定は不要です)

   • 認証が完了すると、次のことができます：

     • リストから既存の Supabase プロジェクトを選択する、または
     • +Add New One をクリックして新しい組織をすぐに追加する。 (手順案内が必要な場合は、Atoms Assistant が Supabase を Atoms に接続する手順を案内します。)

3. 自動設定

   • プロジェクトを選択すると、Atoms が自動的に Supabase プロジェクトに接続します。データベース構造、テーブル、セキュリティ設定を取得します。
   • "Supabase Connected" の通知が表示されたら、バックエンドは完全に設定され、使用可能な状態です。

ユーザー認証

Atoms でアプリを作成した後、ユーザー認証を実装したい場合があります。Supabase Auth を使うと、アプリへの認証と認可の追加を簡単に行えます。このプロセスでは、Atoms が 2 つの方法、(1) メールとパスワード、(2) ソーシャルログイン（Google） を案内します。

メールとパスワード

1. Supabase を Atoms と接続する

   • 有効な Supabase アカウントを持っていることを確認します。
   • チャットインターフェース右上の認証ボタンをクリックして、Supabase アカウントを認証します。
   • 使用したい Supabase プロジェクトを選択します。

2. エージェントに要件を伝える

   • チャットに要件を入力します。たとえば、"Add authentication" とプロンプトするだけで構いません。
   • 通常、これにより Supabase の認証システムに接続された基本的なログインページと登録ページが生成されます。

3. テスト用ユーザーを作成する

   • 新しく追加されたログイン/登録インターフェースを使ってテストユーザーを作成します。
   • ページを更新して、ユーザーセッションが維持されていることを確認します。
   • または、Supabase ダッシュボードで Authentication > Users に移動し、テスト用ユーザーを手動で追加することもできます。

4. アプリをデプロイする

ソーシャルログイン（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 フローを完了して、ユーザーがアプリに正しくリダイレクトされることを確認します。

4. アプリを Atoms の App ワールド にデプロイする

Supabase で Google OAuth を設定する

1. Google Cloud プロジェクトを作成する

   • Google Cloud Console にアクセスする

     • Google Cloud Console を開き、Google アカウントにログインします。

   • 新しいプロジェクトを作成する

     • 上部のドロップダウンメニューをクリックし、New Project. を選択します。
     • プロジェクト名を入力し、請求先アカウントを選択して、Create. をクリックします。

2. Google OAuth 認証情報を設定する

   • 同意画面を設定する

     • 検索バーに OAuth と入力し、OAuth 同意画面を開きます。
     • アプリ名、ユーザーサポートメール、その他の必須項目を入力します。
     • 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 ダッシュボードにログインする

     • Supabase Dashboard を開き、プロジェクトにログインします。

   • Google OAuth を有効化する

     • Authentication ページに移動します。
     • Providers セクションで Google オプションを見つけて有効にします。
     • 先ほど生成した Client ID と Client Secret をそれぞれのフィールドに追加します。

   • 設定を保存する

     • Save をクリックして変更を適用します。

データ保存

Web/アプリでユーザー認証を設定した後、ユーザーデータを保存したい場合もあるでしょう。

Supabase に接続したら、保存したいデータをデータベースに Atoms に伝えるだけです。エージェントがデータベーステーブルを自動的に設定し、UI に直接連携します。

1. 要件を定義する

   • チャットに要件を入力します。たとえば："Please ensure that new trip records are saved to the database"。
   • 保存したいデータをできるだけ明確に説明します。
   • Atoms は、入力内容に基づいて必要なデータベース構造を自動的に設定します。

2. Atoms で機能をテストする

   • UI を通じていくつかの "trip records" を追加するなど、アプリ内でサンプルデータを作成します。
   • データを保存してページを更新します。データは Supabase データベースに同期されます。
   • Supabase にログインし、新しく追加したデータがデータベース内に存在するか確認します。

3. Atoms と Supabase 間のデータ同期を検証する

   • Supabase ダッシュボードを開き、Table Editor に移動します。
   • 既存データを変更するか、新しいデータを作成します。
   • Supabase で行った変更は、Atoms アプリにリアルタイムで同期されます。
   • Atoms に戻り、変更または新規作成したデータが正しく表示されるか確認します。
   • データが正常に同期されれば、設定は完了です。

4. アプリをデプロイする

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 を自動で呼び出して文法チェックやインテリジェントな書き換えを行い、最適化された結果をユーザーに返します。
• オンライン決済を処理する：ユーザーが EC サイトやサービスプラットフォームで決済を開始した際、Stripe などのゲートウェイと連携して安全に取引を処理し、注文詳細を含む明確な成功/失敗ページを表示します。

キーの保存と管理

多くのアプリケーションでは、サードパーティサービス（例：Stripe、OpenAI）に接続するために、キーや API 認証情報が必要です。Supabase が接続されると、Atoms はこれらのシークレットを安全に管理・利用する方法を提供します。Atoms の Supabase 連携を通じて、関数がシークレットを必要とするたびに、Atoms が自動的にそれを検出し、必要な値の入力を求めます。Agent の "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 の 2 つのボタンが表示されます。

• Add API Key をクリックします。

• API キーを入力して Send をクリックします。

• View in Edge Function をクリックします。

• Supabase Edge Function ページにリダイレクトされます。

  セキュリティに関する注意：すべてのキーは暗号化されて Supabase に保存され、Atoms はそれらにアクセスできません。

よくある質問

How do I add Supabase backend features to my application?

Supabase をアプリケーションに連携するには、次の 3 つの簡単な手順で行えます。

• チャットインターフェース右上の認証ボタンをクリックして、Supabase アカウントを認証します。
• 使用したい Supabase プロジェクトを選択してリンクします。
• チャットで要件を共有すると、エージェントが接続済みの Supabase プロジェクトに基づいて機能を開発します。

Does Supabase support social logins?

Supabase は次を含むさまざまな認証方法をサポートしています。

• メールとパスワード。
• パスワードレス認証：ワンタイムパスワード（OTP）やマジックリンクなどのオプション。
• ソーシャルログイン：Google、Twitter、GitHub などのサードパーティプロバイダーをサポート。
• 電話認証。
• シングルサインオン（SSO）：SAML SSO をサポート。
• 匿名ログイン：ユーザーが匿名でログインできるようにします。

Do I need to create a separate Supabase project for my app?

既存の Supabase プロジェクトを選択することも、新しく作成することもできます。各チャットは一度に 1 つのプロジェクトにのみ接続できます。

After connecting to Supabase, will the connection remain if I remix my project?

リミックス後は接続が解除され、再接続が必要になります。さらに、他のユーザーが共有した App ワールド 内のアプリが Supabase に接続されている場合、他のユーザーはそれをリミックスできません。

Can I use one Supabase database for multiple Atoms projects?

はい、1 つの Supabase データベースを複数の Atoms プロジェクトで使用できます。ただし、接続と設定は慎重に管理する必要があります。

Why isn't my project showing up under Supabase organizations?

Supabase のフリープランでは、7 日間連続でアクティビティがないプロジェクトは自動的に一時停止されます。Atoms Organizations リストで Inactive フィルターに切り替えると、一時停止されたプロジェクトを表示できます。

Why do I see

Supabase では、各組織と Atoms アカウントの間に 1 対 1 の OAuth バインディングが適用されます。たとえば “Test” 組織がすでに別の Atoms ユーザーによって認証されている場合、別のアカウントでそれをバインドしようとすると、このエラーで拒否されます。これを解決するには、Supabase Dashboard のサイドバーで Settings → API → OAuth Apps を開き、その組織に対する既存の Atoms OAuth grant を削除してから、Atoms に戻って自分のアカウントで再接続してください。