今回はFlutterFlowとSupabaseで、Viewを使ってみたいと思います。
FirebaseのFirestoreと異なり、SupabaseだとViewを使ったりSQLを書くことで柔軟な検索ができることが便利な点ですよね。
今回はそんなFlutterFlow x SupabaseでViewの使い方を書いていきたいと思います。
そもそもViewとは？
Viewとは、一般的なデータベース関連で使われる用語です。Supabase公式の記述によると、
What is a View?#
A view is a convenient shortcut to a query. Creating a view does not involve new tables or data. When run, an underlying query is executed, returning its results to the user.
ビューはクエリへの便利なショートカットです。ビューの作成には新しいテーブルやデータは含まれません。実行すると、基礎となるクエリが実行され、その結果がユーザーに返されます。
となっています。複数のテーブルを使って仮想的なテーブルを用意するような仕組みと言えば良いでしょうか。
Supabase側：Viewの作成
まずはSupabase側でSQL Editorを開くとSQLを作っていけます。
以下のようにCreate View〜と書いていきましょう。
SupabaseにはAI機能も搭載済み
以下のように右上に菱形のマークがあり、これをクリックするとAIアシスタントが表示されます。ここから指示をすることでSQLを組みやすくなっています。
FlutterFlow側の設定
まず、まだSupabaseと連携していない場合はこちらをご覧ください。
https://citrusapp.jp/posts/flutterflow-supabase-setup-auth
Supabase側でViewなどを追加したら、以下のGet Schemeをクリックするとすぐ反映されます。
次に、以下のようにUI側でListviewなどのデータベースのところから、Add Query -> Supabase Queryを選びましょう。
すると、以下のように通常のテーブルだけではなくViewも一覧に表示され選択できるようになります。
あとは通常のテーブルと同じように使うだけです。
簡単ですね！
Youtube動画での解説はこちら
FlutterFlowによるSupabaseでViewを使ってみた、の動画は以下にアップしておりますので、動画で見たい方は以下もご覧ください。
アプリ・Webサービスの開発の無料相談はこちら
FlutterFlow、bubble、Adalo、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。