技術記事

micomia株式会社のエンジニア 西村です。

今回は、FlutterFlowで簡単なSNSアプリを作るための、Firestoreでのデータベース設計について解説します。

以下の機能を備えたSNSアプリを実装するためのデータベースを設計していきます。

・ユーザー登録

・投稿(タイトル、詳細、画像2枚、日付)

・投稿への「いいね」

・投稿へのコメント

1.作成するコレクション

機能を実現するために、

・usersコレクション(ユーザーの情報を保存)

・postsコレクション(投稿の情報を保存)

・favorite_postsコレクション(「いいね」の情報を保存)

・commentsコレクション(コメントの情報を保存)

の4つのコレクションを作成します。

2.usersコレクション

FlutterFlowのプロジェクトを開いて、左のメニューからFirestoreをクリックします。

ここから、「Create Collection」、もしくは左上のプラスマークをクリックしましょう。

この画面では、コレクション名を入力して、コレクションを作成します。

まずは、ユーザーの情報を保存するコレクション、「users」を作ります。

usersという名前のコレクションを作ろうとすると、この画面が出てきます。

Flutterflowでは、デフォルトのユーザーコレクションがあり、ここで「Yes」を選択するとそれを自動的に入力してくれます。

これで、usersコレクションが作成できます。

3.postsコレクション

次に、投稿の情報を保存するコレクション、「posts」を作ります。

コレクション作成では、用意されたテンプレートから選んで作成する方法もありますが、今回は自分で入力して作成していくので、「Start from scratch」をクリックします。

この画面から、フィールドの名前とデータ型を決めていきます。Field Nameにフィールド名を入力し、Data Typeからデータの型を選択します。複数のデータを保存したい場合はis Listをオンにしましょう。

入力し終えたら、右端の緑色のチェックマークをクリックして、そのフィールドを追加できます。

postsのフィールドは、画像のように作成しました。

・user_ref — 投稿者のユーザー情報を参照するための情報を保存します。これがあることで、投稿から投稿者の情報が取得できます。

・title — 投稿のタイトルを保存します。

・detail — 投稿の詳細文を保存します。

・images — 画像の保存されたURLを保存します。今回は、画像を2枚投稿できるようにしたいので、Listにしています。

・created_time — データが作成された時間、つまり投稿された時間を保存します。

4.favorite_postsコレクション

次に、投稿の「いいね」情報を保存するコレクション、「favorite_posts」を作ります。

同じように「Start from scratch」で作成していきましょう。

favorite_postsのフィールドは、画像のように作成しました。

・user_ref — いいねしたユーザーのユーザー情報を参照するための情報を保存します。

・post_ref — いいねされた投稿の情報を参照するための情報を保存します。

・created_time — いいねした時間を保存します。

「いいね」をする→favorite_postsのドキュメントを作る、「いいね」を解除する→favorite_postsのドキュメントを削除するという風に使うことで、誰がどの投稿に「いいね」をしているかの管理ができます。

5.commentsコレクション

最後に、投稿へのコメント情報を保存するコレクション、「comments」を作ります。

commentsのフィールドは、画像のように作成しました。

・user_ref — コメントしたユーザーのユーザー情報を参照するための情報を保存します。・post_ref — コメントされた投稿の情報を参照するための情報を保存します。

・content — コメント内容を保存します。

・created_time — コメントした時間を保存します。

これで、必要な4つのコレクションが作成できました。

6.まとめ

今回はFlutterFlowで簡単なSNSアプリを作るための、Firestoreでのデータベース設計について解説しました。

micomia株式会社では他にもFlutterFlowの解説を行なっていますのでぜひ他の記事もご覧ください。