メインコンテンツまでスキップ

Draftbit

このガイドでは、SupabaseのバックエンドとDraftbitのフロントエンドを接続し、簡単なモバイルアプリを構築するために必要なCRUD操作を設定する方法を説明します。

Draftbitは、「プロコード」と呼ばれるローコードのモバイルアプリ構築プラットフォームです。Draftbitは、100%オープンソースの言語とライブラリーで動作するReact Nativeのソースコードをエクスポートします。

Draftbitはバックエンドに依存せず、REST APIを介してSupabaseに接続します。

注意:このガイドのデモンストレーションでは、Supabaseにあらかじめ入力されているデータベースを使用します。Groceries(雑貨)と呼んでいます。お好きなように名前を変えてみてください。

Prepopulated Database

Draftbitのアカウントをお持ちでない方は、こちらでアカウントを作成してください。アカウントを作成したら、「Create a New App」をクリックします。このデモではStart From a Blank Appを選択して、Builderインターフェースに進みます。

ステップ1:RESTfulエンドポイントとProject APIキーを取得

DraftbitアプリでREST APIへ接続するには、以下のフィールドが必要です。

  • REST APIのベースURLは、https://<your-domain>.supabase.co/rest/v1の形式になります。<your-domain>(自身のドメイン)はSupabaseが生成するユニークなドメイン名です。
  • supabase-keyは秘密鍵です。

これらの固有値は、SupabaseアカウントのAPI設定で確認できます。

  • トップメニューバーの「Settings」ボタンをクリックします。
  • 「Settings」でAPIを選択します。
  • Project URLセクションで、URLを選択しコピーします。これは、Supabase REST APIのBase URLです。Draftbitアプリに接続する際必要となります。
  • また、Project API keysで、anonの下にあるAPIキーを選択し、コピーします。これはSupabaseデータベースへのすべてのリクエストに必要です。

Get Supabase connection string

ステップ2:Supabase APIキーをDraftbitのAuthorization Headerとして保存

Supabseを使ってDraftbitアプリを認証するには、Builderインターフェイスで、以下の手順を行います。

  • トップメニューバーからSettingsタブを開きます。
  • Project Settingsで、App Variablesに移動します。
  • API Keyにアクセスするための名前(Authorization_Headerなど)を入力します。次のセクションでサービス接続を行う際に、ヘッダのAuthorizationの値として渡されます。
  • このキーの値には、Bearer <your-api-key>Bearer<your-api-key>の間にはスペースが必要です)形式で始まる認証トークンを入力する必要があります。値を追加したらAddをクリックします。
  • APIキーにアクセスするための別のキー名(Api_Key_Headerなど)を入力します。次のセクションでサービス接続を行う際に、ヘッダーのapiKeyの値として渡されます。
  • このキーの値には、<your-api-key>形式で始まる認証トークンを入力する必要があります。値を追加したらAddをクリックします。
  • Saveをクリックしてこれらのキーを保存し、モーダルを閉じます。

Add header values in Draftbit

ステップ3:DraftbitでSupabase RESTfulエンドポイントを追加

DraftbitのBuilderインターフェイスで次を行います。

  • トップメニューバーからAPI & Cloud Servicesモーダルを開きます。

  • Connect a serviceメニューから、Rest APIをクリックします。

  • Step 1では、REST APIの名前を入力します。次に、Base URL欄にBase URL(最初のセクションのもの)を貼り付けます。

  • Step 2では、Keyの下にAuthorizationapikeyを追加します。次に、Valueの下で、(前のセクションで説明した)グローバル変数を選択します。両方のキーに実際の値を追加します。

  • Saveをクリックします。

Create a API service in Draftbit

SupabaseとDraftbitによるAPIリクエストを作成

全レコードを取得するGETリクエスト

ここでは、SupabaseのデータをFetchコンポーネントに取り込み、Supabaseのデータテーブルから取得したデータをListコンポーネントに表示してみます。

参考までに、この画面のComponentsでの表示は次のようになります。

Components tree

次のステップでは、エンドポイント(Endpoint)を作成します。ここでは、GET HTTPリクエストを使用してすべてのデータを取得します。API & Cloud ServicesモーダルでSupabaseサービスを選択して、次の手順を行います。

  • Add endpointをクリックします。
  • Step 1では、Endpointの名前を入力します。MethodGETが選択されていることを確認します。
  • Step 2では、ベースになるパス、/groceries/select=*を追加します。ここでgroceriesはSupabaseのテーブル名になります。
  • Step 4では、Endpoint入力の横にあるTestボタンをクリックして、Supabaseからのレスポンスを確認します。
  • Saveをクリックします。

Creating a GET request endpoint

Builderの、アプリ画面で次を行います。

  • ComponentsでFetchコンポーネントを選択し、プロパティパネルからデータタブに移動します。
  • ServiceにSupabaseのサービス名を選択します。ここでは「Groceries (REST)」を選択します。
  • Endpointで、データを取得するエンドポイントを選択します。
  • ComponentsでListコンポーネントを選択し、プロパティパネルからデータタブに移動します。Dataでは、ドロップダウンメニューからTop-Level Responseを選択します。
  • 次に、ComponentsでTextコンポーネントを選択し、プロパティパネルからデータタブを開きます。
  • Supabaseのカラムフィールドを表す{{varName}}値(中括弧の中)を追加します。例えば、Supabaseからの列名を表すために{{title}}を追加します。
  • Variablesの下に、前のステップで定義した変数名が表示されます。ドロップダウンメニューから、データフィールドを表す適切なフィールドを選択します。

Fetching data on app screen

単一の行を取得するGETリクエスト

トップメニューからAPI & Cloud servicesモーダルを開き、Supabaseサービスを選択します。

  • Add endpointをクリックします。
  • Step 1では、エンドポイントの名前を入力します。
  • Step 2では、/groceries/column-name=eq.{{column-name}}変数を追加します。{{column-name}}変数を追加します。次に、{{column-name}}のテスト用の値を追加します。例えば、titleidなどを入力します。
  • Step 4では、Endpoint入力の横にあるTestボタンをクリックして、Supabaseからのレスポンスを確認します。
  • Saveをクリックします。

Creating endpoint to fetch a single row

アプリの画面で次を行います。

  • Componentsで、Fetchコンポーネントを選択し、プロパティパネルのデータタブに移動します。
  • ServiceにはSupabaseサービス名を選択します。
  • Endpointには、データを取得するエンドポイントを選択します。
  • Configuration → URL StructureセクションからNavigation → idに移動して、idの値を設定します。
  • Compoenntsで、Listコンポーネントを選択し、プロパティパネルからデータタブを開きます。Dataで、ドロップダウンメニューからTop-Level Responseを選択します。
  • 次に、Compoentsで、Textコンポーネントを選択し、プロパティパネルからデータタブを開きます。
  • Supabaseのカラムフィールドを表す{{varName}}値(中括弧の中)を追加します。例えば、Supabaseのデータテーブルからフィールドと値を表すために{{title}}を追加します。
  • Variablesの下に、前のステップで定義した変数名が表示されます。ドロップダウンメニューから、データフィールドを表す適切なフィールドを選択します。

Displaying data from single row

新しい行を送信するPOSTリクエスト

DraftbitアプリからSupabaseのREST APIに新しいデータをサブミットするには、HTTPのPOSTメソッドを使ってリクエストを送信する必要があります。

このセクションでは、Supabase REST APIを使用してデータをPOSTします。ユーザーの入力を受け付け、Field Name属性を持つコンポーネントを1つ以上使用する必要があります。

Draftbitでは、以下のコンポーネントのいずれかを使用できます。

  • テキスト入力(Text Input)
  • テキストエリア/テキストフィールド(Text Area/Text Field)
  • チェックボックス(Checkbox)
  • スライダー(Slider)
  • ラジオボタングループ(Radio Button Group)
  • ラジオボタン(Radio Button)

さらに、POSTアクションをアタッチするために、ButtonなどのTouchableコンポーネントが必要です。これらのコンポーネントを作成した後、POSTエンドポイントを作成します。

  • Add endpointをクリックします。
  • Step 1では、Endpointの名前を入力し、MethodにPOSTを選択します。
  • Step 2では、ベースになるパスを入力します。/groceriesと入力します。
  • Step 3では、POSTリクエストを送信するための有効な造を追加します。テスト値として1つまたは複数の{{variable}}を追加します。Body Previewをクリックして、リクエスト内のボディーの構造を確認します。この例では、{{inputValue}}という変数を作成してみます。
  • Step 4では、Supabaseデータテーブルに追加された新しい行をJSONレスポンスとしてBuilder内で確認します。Preferという新しいヘッダーに、return=representationを値として一緒に渡す必要があります。
  • Step 5では、Endpoint入力の横にあるTestボタンをクリックして、Supabaseからのレスポンスを確認し、Saveをクリックします。

Make a POST request to add new data to Supabase database

上記の手順を実行すると、スキーマに入力したJSONとして正確に新しいレコードを含む200番のOKレスポンスが得られるはずです。

リクエストのボディーの例は次のようになります。

{
"title": {{inputValue}}
}

titleはSupabaseデータベースのテーブルのカラム名になります。

Draftbitでは、TouchableやButtonコンポーネントを使って、API Requestというアクションを起こし、エンドポイントにデータを送信できます。

これで、DraftbitにPOSTリクエストができました。そのレスポンスをDraftbitの画面上のコンポーネントにマッピングします。

まず、各入力コンポーネントについて、フィールド名(Configsタブの左から2番目)がユニークな値に設定されていることを確認します。例えば、下の画面では、TextInputフィールドコンポーネントが1つあり、Field Name属性の値がtextInputValueになっています。

Field Name prop on a TextInput component

次に、Buttonコンポーネントで、右端にあるプロパティパネルのインタラクションタブを開きます。API requestというActionを選択します。

APIリクエストのアクションで次を行います。

  • Serviceで、Supabase APIのサービス名を選択します。
  • Endpointでは、エンドポイントの名前を選択します。
  • 次に、{{inputValue}}の値を選択して、送信するクエストの設定を追加します。

Setting up the API Request to send a POST request

以上の手順で、Supabaseデータベースに新しいデータを送信するためのAPIリクエストを動作できます。

新しいレコードを更新するPATCHリクエスト

DraftbitアプリからSupabaseのREST APIに既存のレコードを更新するには、HTTPのPATCHメソッドを使ってリクエストを送信する必要があります。

DraftbitのBuilderで画面コンポーネントを作成した後、Supabaseサービスを開き、PATCHエンドポイントを作成します。

  • Add endpointをクリックします。
  • Step 1では、Endpointの名前を入力し、MethodにはPATCHを選択します。
  • Step 2では、ベース名をパスとして入力します。/groceries?id=eq.{{id}}と入力します。ここで、idはデータベース内の既存レコードの値です。
  • Step 3では、PATCHリクエストを送信するための有効なボディー構造を追加します。アプリの構造に応じて、テスト値用に1つまたは複数の{{variable}}を追加します。Body Previewをクリックして、リクエスト内のボディーの構造を検証します。この例では、{{inputValue}}という変数を作成しています。
  • ステップ5では、Endpoint入力の横にあるTestボタンをクリックして、Supabaseから来るレスポンスを確認し、Saveをクリックします。

Creating an endpoint for PATCH request

次に、Buttonコンポーネントで、右端にあるプロパティパネルのインタラクションタブに移動します。API requestというアクションを選択します。

APIリクエストのアクションで次を行います。

  • Serviceで、Supabase APIサービス名を選択します。
  • Endpointでは、エンドポイントの名前を選択します。
  • 次に、クエリパラメーターの設定と、{{inputValue}}の値を選択して送信するクエストを追加します。

Setting up the API Request to send a PATCH request

以上の手順で、Supabaseデータベースの既存データを更新するためのAPIリクエストを実行できます。

既存のレコードを削除するDELETEリクエスト

DELETEリクエストは、Supabaseのテーブルから特定のレコードを削除するために、項目のcolumn-nameを指定してSupabaseに送信します。Supabaseが提供しているフィルターを使用して、特定のcolumn-nameの値をフィルターできます。

DraftbitのBuilder画面でコンポーネントを作成した後、Supabaseサービスを開き、DELETEエンドポイントを作成します。

  • Add endpointをクリックします。
  • Step 1では、エンドポイントの名前を入力し、MethodにDELETEを選択します。
  • Step 2では、/groceries/columnName=eq.{{columnName}}を追加します。次に、{{columnName}}にテスト用の値を追加します。例えば、ここでの{{columnName}}はレコードのidとできます。
  • ステップ4では、Endpoint入力の横にあるTestボタンをクリックして、Supabaseからのレスポンスを確認します。
  • Saveをクリックします。

Creating an endpoint for DELETE request

次に、Buttonコンポーネントで、右端にあるプロパティパネルのインタラクションタブに移動します。API requestというアクションを選択します。

APIリクエストのアクションで次を行います。

  • Serviceで、Supabase API Serviceという名前を選択します。
  • Endpointでは、エンドポイントの名前を選択します。
  • 次に、値を選択して、送信するクエリリクエストの設定を追加します。例えば、ここではNavigationパラメーターから得られるレコードのidを指定します。

Setting up the API Request to send a DELETE request

リソース