こんにちは。今日は、FlutterFlowとCloud Functionsを組み合わせたアプリ開発について書いてみます。
簡単なサンプルとして、FlutterFlowからCloud Functionsを呼び出します。CloudFunction側ではAIのAPIを呼び出してロゴを生成する「AIロゴメーカー」を作ってみたいと思います。
例えば、「コーヒーショップのロゴを作成して」というリクエストに対して、AIが適切なデザインを提案し、その結果をアプリ上で簡単に表示させることができます。
こちらのFlutterFlow公式のドキュメントを見て作ってみました。
https://docs.flutterflow.io/customizing-your-app/cloud-functions#3.-create-and-deploy-cloud-function
それではみていきたいと思います。
※最後の方にYoutube動画で解説もしているのでそちらも合わせてどうぞ。
アプリ完成イメージ：AIロゴメーカー
完成イメージはこんな感じです。めちゃくちゃシンプルですが、「create a simple restaurant logo（シンプルなレストランのロゴ作って）」とプロンプトを入れるとAIによってロゴが生成される、って感じですね。
FirebaseのプロジェクトがBlazeプランであることを確認
まず、Blazeプラン出ないとCloudFunctionが使えないのでこれを事前に確認しましょう。
FlutterFlowのCloudFunctionsから追加
次にFlutterFlowの左メニューのCloudFunctionsから入りAddボタンから新規ファンクションを追加しましょう。
左メニューのCloud Function Settingsの設定をする
メモリーAllocationやリージョン、Returnとパラメータを設定します。これらが適切でないとデプロイできないことがあります。特にリージョンは自分のfirebaseのリージョンと合わせる必要があります。
また、リージョンは以下のAdvanced Settingsのリージョンも同じリージョンに合わせる必要があります。これ忘れがちなので要注意ですね。
それができたら右上の緑のボタンからBoilerplate Cloud Function CodeをCopy to Editorします。
コードを書く
あとは「// write your code below」のところに自由にコードを書きます。
今回は以下URLの下の方にあるサンプルコードを参考に作りました。
https://docs.flutterflow.io/customizing-your-app/cloud-functions#3.-create-and-deploy-cloud-function
デプロイ
最後にデプロイしたら完了です。
デプロイエラーで困ったら？
私は最初なんどもデプロイエラーになりかなりハマりました・・・
こちらのコミュニティのエラー改善方法を書いてるサイトがあるのでこちらを参考に頑張ってみてください...！
UI作成
あとはUI側ですね。
シンプルに以下のようにUIを作り、local page stateにlogoImageという変数を用意しました。
画像にはpage stateのlogoImageに入ってるimagePathを設定するようにします。CloudFunctionからちゃんと値が返ってくるとここに画像が表示される、という感じです。
ボタンアクションからCloud Functionを呼び出し
以下のようにCloud Functionを呼び出します。パラメータのpromptにはユーザーがテキストボックスに入力した値を入れます。
あとは、CloudFunctionの返却値をpage stateにつっこんで完了です。
簡単ですね！
Youtube動画での解説はこちら
動画でも解説しております。細かい解説に興味がある方はこちらもどうぞ。
FlutterFlowでCloudFunctionを使ってAIロゴメーカーアプリ：まとめ
FlutterFlowからCloudFunctionを呼ぶのは特に難しくなくすぐできることがわかりました。CloudFunction側のコードを書く必要はもちろんありますが、今はChatGPTなどのAIがあるのでプログラミングのハードルも下がってきています。
ノーコードで一通り作って、一部をローコードでAIを使って書いて素早くコーディングし開発していく。という流れはこれからいよいよ加速していくイメージがありますね。