FlutterFlow x Supabaseで検索機能を実装

前回のブログに続き、今回はキーワード検索を実装していきたいと思います。このブログではまずはシンプルに一つのキーワードに対しての検索機能を実装します。

次のブログで複数のキーワードでの検索機能の実装方法を解説していきます。

FlutterFlowとSupabaseのつなぎ方、データの取得方法は以下のブログを見てください。今回はその続きになります。

FlutterFlowでsupabaseを使おう - ノーコードｘAIで実現する最強DX

FlutterFlowでSupabaseからデータを簡単に取得する方法を解説。ステップバイステップで分かりやすく説明します。

insights.spovisor.com

前提

• 既にFlutterFlowとSupabaseは連携済み
• Supabaseには以下のテーブルを作成済み
  テーブル名：Product
  データにname, descriptionを設定

• FlutterFlowの画面にはSupabaseから取得したProductのname, descriptionの一覧が表示されている

キーワード検索の実装手順

検索ボックスの配置

• キーワード検索用にTextFieldを画面上部に配置

APIの作成

• Create API CallからSupabaseの検索機能を使うAPIを作ります。

• 設定する値はSupabaseのページにて確認します。
• SupabaseのページでAPI Docsをクリック。その後、Tables and viewsで対象のテーブル（ここではProduct)をクリック
• 検索はFilteringの箇所（下の方にあります）を参照してください。Javascriptではなく、Bashを選択しておいてください。
• Supabaseは素晴らしいことに画面の右上の”hide➔anon”の部分をクリックするとSUPABASE_KEYを表示したコマンドを表示してくれるのでそれをFlutterFlowにコピペで設定できます。

• API URLは以下のようにしてください。[searchString]は後で設定しますが、検索する際のキーワードになります。

https://xxxxxxx.supabase.co/rest/v1/Product?description=ilike.%[searchString]%&select=*

• API URL, Headersを設定すると以下のようになります。

• VariablesへAPIに渡す変数になります。searchStringという変数を渡します。

• Response & Testで”Test API Call”を実施してください。すると、以下のようにTest Responseが返ってきます。

検索結果を格納するApp Stateを準備

• 検索結果のJSONを格納するApp Stateを準備します。

検索結果をApp Stateに格納

• キーワード検索のActionsを設定します。
• Backend/Database➔API Callを選択

• 以下の様な形でAPIコールを設定します。Call Nameは先ほど作成したAPI、Variablesには検索キーワードを設定しますが、画面上に検索キーワードを入力するボックスを設置しているのでそこから値を取得するようにしてください。

• 結果取得が成功した場合のアクションを追加します。成功時には返ってきた結果のJSONをApp Stateに格納します。

検索結果を画面上に表示

• ListViewの中身を先ほどのApp Stateに設定します。

• リストの中にnameとdescription用のTextを配置します。
• nameの場合はJSONからname部分を取得するのにJSON Pathで$[“name”]のように設定します。

• descriptionも同様に設定してください。

テスト

• 以下のようにキーワードを入力するとその結果（nameとdescription)が表示されます。
• いまはデフォルトは何も表示されない設定になっているので検索キーワードを入力した場合に結果として表示されます。（左：検索前、右：検索後）

まとめ

FlutterFlowとSupabaseとを連携させたキーワード検索の実装方法を解説しました。
ここでは一つのキーワードに対して検索結果を取得するようにしています。次は複数キーワードの場合の検索方法を解説したいと思います。