⚡

【FlutterFlow×Supabase×AI】高速アプリ開発！（前編）

2023/12/20に公開

Supabase Advent Calendar 2023
20日目の記事です。

SupabaseとFlutterはアプリ開発の相性がとてもよいです。
でもFlutterでUIを書くのは階層が深くなり時間がかかります。
【FlutterFlow×Supabase×AI】の組み合わせにより、UIの構築が爆速になり、素早くアプリを開発することができます。
ここでは３時間でごく簡単なToDoアプリを作る例を解説します。

FlutterFlowとは

2020年にローンチした開発環境です。特徴としてはノーコードでFlutterアプリのUIを構築し、全コードを丸ごと書き出すことができますので、Flutterアプリを高速で構築することができます。
世界で80万人の開発者に使われており、急速に伸びています。
iOS/Androidネイティブアプリだけでなく、Webアプリも作れます。しかもモバイル／デスクトップ／タブレットのいずれにも対応しており、レスポンシブなUIが簡単に作れます。
UI構築はノーコードですが、ロジック部分はノーコードでできることは基本的な部分のみで、ある程度複雑な処理はコーディングが必要です。その分、自由にコードを組み込めるため、拡張性が非常に高いことがポイントです。
バックエンドは自由に組み合わせられますが、標準ではFirebase/Supabaseです。
Firebaseは特に容易にいろいろな設定ができます。
Supabaseは基本的なCRUD、Email認証に対応しています。カスタムコードでSupabase Flutter/Dartクライアントを簡単に呼び出せますので、制限なく拡張することができます。

FlutterFlowのアカウント作成（無料）

まずはFlutterFlowのアカウントを以下より作成します。
Email/PWのほか、Googleアカウント等でも簡単に登録できます。
FlutterFlowアカウント登録ページ

プロジェクトの作成

"+Create New"を押して、新しいプロジェクトを作成します。
Project Nameには"TodoSample"のように入力します。
テンプレートも豊富にありますが、今回は"Create Blank"を押します。

続く画面でパッケージ名やカラーテーマを選択することができます。
Enable Webをオンに、Setup Firebaseはオフにして"Start Building"を押します。
これだけでプロジェクトが作成できます。

アプリ構築画面

最初に以下の画面が表示されます。
左側には各種メニュー／ウィジェット群、右側にはプロパティパネルが表示されます。
中央にはUIがありますので、ここにウィジェット等を配置して構築する流れとなります。

上部のボタンで簡単にモバイル／タブレット／デスクトップを切り替えることができ、右クリックするとデバイスを切り替えることができます。とても便利です。

左のメニューボタンから、Widget Treeを選択するとページ内のツリー構造が表示されます。
ウィジェットツリーの最上部はScaffoldという特殊なウィジェットです。
ページ名の設定や、URLで使われるパスなどの設定ができます。

ウィジェットの追加方法

ウィジェット（UI部品）の追加方法は主に３つです。
試してみて、一番しっくりくるやり方（私は１番目）を使いましょう。
ColumnやRowには複数要素を配置でき、Container等には１つのみ要素を配置できます。

1.Widget Treeから
左側のWidget Treeからウィジェットを追加することができます。なお上部にはページの構造が表示されています。
追加したいウィジェット（親）の右側のボタンを押すとパネルが開き、選択したウィジェット等を子として追加することができます。例えば、Columnの子ウィジェットにContainerを追加できます。

2.ショートカットキー（⌘+shift+F）
画面上でウィジェットを選択し、ショートカットキー ⌘+shift+F を押すとパネルが開き、選んだウィジェット等を子として追加できます。
なおツリーの最上部を選択しているときだけは、別ページの追加画面が開きます。

3.ショートカットキー（⌘+F）
⌘+F を押すとパネルが開き、ウィジェット等をDrag&Dropで配置できます。
このときshiftキーを押しながらドロップすると、どのウィジェットの子として配置するかを選択できます。
ウィジェットツリー上の要素にドロップすることもできます。

Supabase（AIでテーブル作成）

さてここで、Supabase側の構築です。
任意のプロジェクト内にtodosテーブルを作成します。
SupabaseのSQL Editorで、AIにcreate todo tableと依頼するだけ基礎的な構造を作ってくれます。Accept changeを押します。
ここではそのままRunを押します。
以下のSQLを貼り付けても同じテーブルが作成できます。
Table Editorを見ると、todoテーブルが作成されていることが確認できます。

create table
  public.todo (
    id bigint primary key generated always as identity,
    created_at timestamp with time zone default now(),
    updated_at timestamp with time zone default now(),
    creator uuid default auth.uid (),
    title text not null,
    description text null,
    is_completed boolean not null default false
  ) tablespace pg_default;

Supabase（AIでRLS作成）

このままではRLS（Row Level Security）が設定されていません。
セキュリティが無防備なため、RLSを有効化し、適切なポリシーを設定します。
ローンチウィークXで導入された新機能により、AIアシスタントがRLSのポリシー作成を手伝ってくれます。

オレンジのEnable Row Level Security を押します。

Enable RLS を押し、RLSを有効化します。

Create a new policy を押します。

Open Assistant を押します。

下部の入力エリアに、依頼を書いて送信します。AIがRLSの例を作ってくれます。

todoテーブルをログインユーザー本人のみ読み書きできるようにして

マウスオーバーすると現れるApply changesボタンを押します。

コードが左側のエリアにコピーされるので、Acceptを押します。

Save policyを押します。
AIも間違えることが分かります笑

Supabase先生に直してもらいます。
Supabase先生

CREATE POLICY user_todo_policy ON public.todo FOR SELECT
USING (auth.uid() = creator);

CREATE POLICY user_todo_policy_insert ON public.todo FOR INSERT
WITH CHECK (auth.uid() = creator);

CREATE POLICY user_todo_policy_update ON public.todo FOR UPDATE
USING (auth.uid() = creator);

直してもらったコードを貼り付けて、再度Save policyを押すと、
RLSが設定されました。
RLSの設定は１から書くと手間なので、こうしてAIがSQL文を作ってくれるのは時短できて便利です。

Supabase（AIでサンプルデータ作成）

サンプルデータもAIに作ってもらいましょう。
SQL Editorで依頼します。

todoテーブルにサンプルデータを100個追加して

、、、これだと同じデータが100個できてしまいます笑

Discardを押して、依頼を変えます。

todoテーブルにランダムなサンプルデータを100個追加して

まあ、良しとしましょう。Accept changeを押し、Runを押します。
Table Editorで見てみるとちょっと違和感があるので、全削除して作り直します。

サンプルデータの作成が一番手間取るかもしれません笑

Table Editorでデータが作成されていることを確認します。

roleをpostgres（全権管理者）からanon（未ログイン）に切り替えることで、RLSにより認証なしでデータが参照できないことを確認できます。これもローンチウィークXで導入された新機能です。

FlutterFlowとSupabaseの接続

では、FlutterFlowとSupabaseを接続します。

SupabaseのProject Settings / API より、URLとanonキーをコピーします。
service_roleキーは通常は使いません。

FlutterFlowのSettings / Supabase にて、Enable Supabase をオンにします。
SupabaseからコピーしたURLとanonキーを貼り付けます。

Get Schemaを押すと、テーブル一覧が取得できます。ビューも含まれます。

これだけで連携ができます。

FlutterFlowでToDo表示

FlutterFlowのUI構築画面に戻り、Page TitleのテキストをToDoと変更します。
最初に配置されているColumnの中に、ListViewを追加します。
ListViewを選択し、右側のパネルからBackend Queryに切り替えます。
Add Queryを押します。

Query TypeからSupabase Queryを選ぶと、todoテーブルを選択できます。
フィルタ条件の設定や並べかえができます。
ここでは並べ替えをcreated_at、Decreasing（降順）のみ設定してConfirmを押します。

確認画面が出ますので、そのままConfirmを押します。

ListViewの右側パネルでExpansionをExpanded（白い四角）に切り替えて、上下に広げます。

ListViewにRowを追加し、その中にTextを２つ追加します。

１つ目のTextの右側パネルで、オレンジのボタンを押すとデータを選択できます。
todo Rowを選択し、titleを設定します。
２つ目のTextにはdescriptionを設定します。
なお編集時はDefaultを要求されるため、"-"など適当な文字を入れておきます。

Rowの先頭にConditionalBuilderを追加します。
条件はtodo Row / is_completedを選択します。
iconを２つ配置し、それぞれcheckboxで出てくるチェック済みと未チェックの形にします。

ここまでできたら、右上の稲妻マークを押してTest Modeを立ち上げます。
数分待ちます。
なお一度テストモードが立ち上がると、変更点のリロードは10秒程度で行えます。

RLSが効いているため、何もリストに表示されないことが確認できます。

一旦RLSをオフにするため、SupabaseのTable Editorから、緑色のactive RLS policies部分を押し、Disable RLS > confirmを押します。RLSが無効な状態になります。

FlutterFlowのTest ModeでInstant Reloadを押します。

ToDoが表示されることが確認できます。

SupabaseでEnable RLSを押して、RLSを有効に戻しておきます。

Supabaseでユーザー認証の設定

Supabase側で以下の設定をおこないます。
Authentication / Providers / EmailをEnableに
"Confirm email"を一旦オフに
メールアドレスの存在確認を行うにはいくつか設定が必要なため、ここでは省略します。

FlutterFlowでユーザー認証

ユーザー登録／認証ページをテンプレートから作成します。
Auth 2を使い、Loginというページ名で作成します。

アカウント作成時のパスワード確認欄がないので、複製します。
アカウント作成とログインで入力欄の名前が同じ場合、設定時に見分けられないため、識別しやすいようアカウント作成画面ではpassword1、password2と名前を変えておきます。Email欄もemail1と名前を変えます。
Googleサインイン等は今回使わないため削除します。

ここで、認証機能を有効にするため、Setting / Authenticationで、Enable Authenticationをオンにします。
Supabaseを選択します。
Entry Page（未ログイン時）、Logged In Page（ログイン後）のページを選択します。

Authページの編集に戻ります。
アカウント新規登録ボタンのActionを設定します。

ログインボタンのActionを設定します。

ここまで素早くできればTest modeをリロードできます。
有効時間が切れている場合は、再度Test Modeを立ち上げます。

Emailを入力しましたが、文字が見えません笑

これはテンプレートで、文字色の設定が間違っているためです。
こういうところは荒削りな感じを受けますね。（直すよう頼んでおきます）

Loginページで新規登録のemail1、password1、password2フィールドをshiftキーを押しながら選択すると、一度にプロパティを変更できます。Text Field PropertiesのTheme Test StyleをBody Largeに変更します。これでテキストフィールドの文字色が変わります。

テストモードをリロードすると、文字色が正しく反映されていることが確認できます。

ユーザー登録してみると、SupabaseのAuthentication / Usersに登録されていることを確認できます。

前編おわりに

前編はここまでです！

【FlutterFlow×Supabase×AI】で、１からのコーディングと比べて素早くアプリが作れることがお分かりいただけると思います。アプリのUIを構築したり、Supabaseと基本的な連携をおこなう部分は、１行もコードを書かずにできます。
しかも、出来上がるコードはコーディングと遜色ありません。
このような手軽さで、モバイル向けも、デスクトップ向けも一度に作れるのは大きな魅力ですね。

ご感想をいただけるととてもうれしいです。
こちらへどうぞ

後編は執筆中です！笑
公開時には、X(Twitter)でお知らせしますので、フォローしてお待ちください。
Hide@アイデアガレージ