こんにちは、今回はFlutterFlow(フラッター・フロー)で管理画面を作る方法について書いていきたいと思います。
管理画面もアプリを作る時と同様、比較的簡単に作れます。ただ、アプリをユーザー側と管理側で別のアプリとして作る場合、同一firebaseにする必要があるので、その辺について書いていきたいと思います。
↓そもそもFlutterFlowについてもっと知りたい方はこちら
ネイティブアプリを10倍速で作れるノーコードツールFlutterFlowとは?Adaloとの違いも合わせて解説
では解説していきますね。細かいことは最後の方で紹介している動画で解説するとして、ここではポイントをかいつまんで解説します。
まずはユーザー側のアプリを普通に作る
まずは普通にユーザーアプリを作ります。
(そもそもアプリの作り方を知りたい方はhttps://citrusapp.jp/posts/flutterflow-snsapp1 もご覧ください。)
通常のfirebaseの設定を行ったのち、
その後、私の場合は以下のように一覧画面を作りました。

データベースは以下のようにusersとcontentsというコレクションを作ってます。

管理者側のアプリを作る
では管理者側のアプリを作りましょう。
最初のFirebaseの設定の際に、以下のFirebase Project IDを、元のアプリ側の時に作ったIDと同じものにします。
そしてConfigFileをGenerateしましょう。

これでOKです。接続できました。
ただし一つ問題があります。
注意点:Firebaseを接続してもCollectionは反映されない...?
Firebaseのデータベースのところにいくと、以下のように何も表示されません。

そう、接続されてもCollectionは表示されないようです、、、汗
なので手打ちでCollectionとフィールドを作成しなければならないです。名前が違うと動かないので完全に同じコレクション名・フィールド名で作成します。(元アプリのCollectionのコピー&ペイストは可能なようです。)
ここまでできればあとは普通に管理画面を作成するだけです。管理画面から投入した内容はFirebase側に連携され、アプリでも反映されてることを確認できます。

ぜひやってみてください。
FlutterFlowでの管理画面作成をYoutube動画で見たい方はこちら
アプリと管理画面の連携について、動画の方で詳しく解説していますので、気になる方はこちらもどうぞ。
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、FlutterFlow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか?
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ/Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。
