FlutterFlow×Supabaseの基礎学習｜ネットショップの商品テーブルを作ってみよう

まえがき

この記事では、FluuterFlowでSupabaseを扱う基本的な操作について解説していきます。Fireabaseとは異なった特徴があるので、自分の使いたいアプリに合わせてデータベースを選択してください。

前提

FlutterFlowでProjectの作成が済んでいる前提で解説していきます。

本記事では、ネットショップの商品テーブルの作成を通して、FlutterFlowとSupabaseの基礎的な使い方を学んでいきます。

Supabaseの設定

Supabaseは、無料プランがあります。
ただし1週間アクセスがない場合は停止することがあるので、本番利用する場合は有料プランの加入が必要です。その点は注意しておきましょう!

アカウントの作成

まずは、以下のリンクからSupabaseのページへ移動しアカウントを作成していきます。

https://supabase.com/

Supabaseの構造は、「organization」の中に、それぞれの「Project」が入ります。まずは、organizationを作成していきます。

必要な情報を入力し、「Create organization」をクリックします。すると、Projectを作成するページに移動するので、このページでも同様に情報を入力します。

Regionは、Tokyoを選択しておきましょう。入力し「Create new Project」をクリックするとProjectの完成です。

テーブルの作成

今回は、ネットショップの商品テーブル作っていこうと思います。サイドバーの「Table Editor」を選択し、「Create new Table」をクリックします。 nameを設定し、「Enable Row Level Security」をクリックし、「Confirm」とします。 ※本番で行う場合は、セキュリティールールを適切に設定してください!

以下の画像のように、設定し「save」をクリックします。
※後から「edit」で編集可能です

データ型の補足

SupabaseではFirebaseと比べ沢山のデータ型が選択できます。今回使用した型は、基本的な型になります。事前に扱う数値などが決まっている場合は、それに応じて適切なデータ型を設定するようにしましょう!

API keyの取得・接続

次にSupabaseとFlutterFlowを接続していきます。

まず、Supabaseのサイドバー「Project Settings」→「API」と進み、最上部にある「Project URL」をコピーします。

FlutterFlowに移動し、サイドバーから「Settings」を開き、「Supabase」を選択します。「Enable Supabase」チェックをいれ、先程コピーしたURLを貼り付けます。
同じくSupabaseから「Anon key」も同画面から取得し、「Anon Key」内に貼り付けてください。

これで、FlutterFlowでSubaseが使用できるようになりました!

データの書き込み

ではFlutterFlowで実際にSupabaseのデータを扱えるように、要素とアクションを追加していきましょう。まずは商品データの入力です。

エレメントの追加

まずは新しいページとして「Registration」というページを作成します。以下の画像のようにエレメントを追加してください。

各Text Fieldの「Label properties」のLabel Textを、「name」「description」「Price」と変更しておきます。

アクションの追加

「button」を選択し、「Open」→「+ Add Action」と進みます。

Supabaseの「Action Type」から「Insert Row」を選択し、Tableを「Products」「Add Field」→「name」→「Widget State」→「TextField1(name)」「Add Field」→「description」→「Widget State」→「TextField2(description)」「Add Field」→「price」→「Widget State」→「TextField3(price)」

と設定します。