はじめに

まず、XやinstagramなどのSNSで多く見られるフォローフォロワー機能の作り方をまとめました。

使い方

1. まず、以下の公式のアプリをローカルにクローンします。

2. 次に、動画教材にて大まかなロジックを確認します。

3. そして、ドキュメントを見て、細やかなロジックを確認しながら作成します。

4. 最後に、これらの機能を必要なタイミングで引き出せるようにする。
   

公式のアプリ

動画教材

大まかなロジック

1. フォローすると、自分のフォローと相手のフォロワーの数が増えます。逆に、フォローを外すと自分のフォローと相手のフォロワーの数が減ります。

2. フォローしているか否かに合わせて、表示非表示を切り替えます。

これらに必要なDBやComponentを置いていくことが必要になってきます。

詳細なロジック

• DB

  • Users

    • relationship

      • Users

        • Following

          • フォローする人は、複数の人のフォロワーと関係を持つ⭕️

          • フォローされた人は、複数のフォローした人と関係を持つ⭕️

            • 3番目の双方向が複数の相互関係を持つ

        • Followed

          • フォローする人は、複数の人のフォロワーと関係を持つ⭕️

          • フォローされた人は、複数のフォローした人と関係を持つ⭕️

            • 3番目の双方向が複数の相互関係を持つ

• Components

  • button

    • フォローボタン

      • visibility

        • このユーザー(Current User)のフォローされているユーザー(Followers)の中に、自分(Logged In User)が含まれていない時に、表示する

        • “Current User>Followers” does not contain “Logged In User”.

      • click action

        • 数値更新(update)で自分のDB(Logged in User)にこのユーザー(current user)をフォローとして追加する

        • 数値更新(update)でこのユーザー(current user)に自分のDB(Logged in User)をフォロワーとして追加する

    • フォロワーボタン

      • visibility

        • このユーザー(Current User)のフォローされているユーザー(Followers)の中に、自分(Logged In User)が含まれている時に、表示する

        • “Current User>Followers” contain “Logged In User”.

      • click action

        • 数値更新(update)で自分のDB(Logged in User)にこのユーザー(current user)をフォローとして削除する(remove)

        • 数値更新(update)でこのユーザー(current user)に自分のDB(Logged in User)をフォロワーとして削除する(remove)

最後に

ご覧いただきありがとうございます。
初めは、relationshipやDBの設計に対して理解に時間がかかるかも知れませんが、その都度ロジックを書き出すことでより深く早く理解することができると思います。