【adalo】Favoriteボタンを５分で実装する

最初に

SNSでは必須ともいうべき「Favoriteボタン」をadaloで実装してみます。
簡単と言われるNoCodeサービスでどれくらい簡単に実装できるのか調べる目的で試して見たのですが、なんと実装時間「５分」で出来てしまいました・・・。

以下、その手順を記載します。

環境

MacOS Catalina 10.15.6

使用するToggleコンポーネントについて

Favoriteボタンの実装には「Toggle」を使用します。
adaloの「Toggle」は選択したタイミングでデータベースを即時更新します。
更新には以下の２種類があります。

・該当レコードのTrue/Falseプロパティを更新する。
関連づけられた項目を即時更新します。
例えば「ListsコレクションのStatusプロパティ」をToggleと紐付けた場合、ToggleのOn/Offに応じて該当プロパティの値を即時更新します。

・2レコード間の「relationship」を更新する
関連づけられた「リレーション」を即時更新します。
例えば「Listsコレクション」を作成し複数の「Users」コレクションとリレーションが貼られている場合、該当のToggleをクリックすることでUserがListのメンバか否かを更新します。

Favoriteボタンは後者の方法を使って実装します。

実装方法

1）Favoriteボタンを配置するコレクションを作成する
2）Usersテーブルとのリレーションを設定する
3）CustomListを設置しToggleボタンを配置し2)で設定した「リレーション」を割り当てる
4）体裁を整える

の手順で実装します。

1）Favoriteボタンを配置するコレクションを作成する

画面左のメニューから「DataBase」を選択し、Name、Imageという項目を持つ「Listsコレクション」を作成します。

2）Usersテーブルとのリレーションを設定する

「Usersコレクション」に「Listsコレクション」との「N対N」リレーションを追加します。

3）CustomListを設置しToggleボタンを配置し2)で設定した「リレーション」を割り当てる

画面に「CustomListコンポーネント」を配置します。「CustomListコンポーネント」は「Listsコレクション」と紐付けます。次に「Toggleコンポーネント」を先ほど追加した「CustomListコンポーネント」の上に配置します。この「Toggleコンポーネント」は「Current List > Users > Includes Logged In User」と紐付けます。

4）体裁を整える

「CustomListコンポーネント」にListコレクションの値を表示させるため、項目を紐付けます。

せっかくなのでToggleをFavoriteボタンっぽく、ハートに変更してみます。

また複数のユーザー間でFavoriteボタンをクリックされた数の合計も出力してみます。

実装を確認する

実装結果を確認するために以下のデータを登録しました。

【Usersコレクション】

【Listsコレクション】

まず、ユーザー「[e-mail]」でログインし、List02のFavoriteボタンをクリックしてみます。

クリックしたFavoriteボタンのカウントが０→1に変わりました。

次に「[e-mail]」のユーザーでログインします。

ログインするとユーザー「[e-mail]」によりList02のカウントされているため、List02のカウントが「１」になっています。ここで、List01、List02ともクリックしてカウントを上げておきます。

うまく行きました！
これで実装完了です。