【Bubble】ツイッターのクローンアプリ④〜ツイートとユーザ情報の紐付け〜

こんにちは。UGOK-5tnメンバーのミサです。

この記事は、４回に渡るツイッターのクローンアプリの記事の最終回です。まだ見ていない方は前回の記事から見てもらえるとわかりやすいかと思います。

今回は、「ツイートとユーザ情報の紐付け」についてです。

ツイート情報とユーザ情報を紐付けすることによってどのユーザーが何をツイートしたのかが理解できるようになります。

Dataタブを編集する

TweetテーブルにUserの列を追加します。

App data→All Tweets  User列の中が空欄になっているとユーザー情報は結びついていません。All Users→鉛筆マークからunique idをコピーしAll Tweetsのユーザー列にペーストします。

Userを入力する欄の下にあるChange search fieldをクリックし識別する値をunique idに変更します。

これでツイートが追加された時にユーザーが登録される設定が完了しました。

ここまでは手動で行います。

ワークフローを設定する

先程の投稿ボタンをクリックしツイートが追加されたと同時にユーザーが登録される作業を自動でできるようにします。

Create a new Tweet→Set another field→Current User

さらにプレビュー時、ツイートしたユーザーアイコンと名前を表示できるようにします。

Text, Imageを配置します。

これで全ての設定が完了しました。プレビューし確認します。

最後に現在の開発環境から本番環境へ反映させます。

画面右上 Deployment→Deploy current version to live

これでSNSでのシェアが可能になります。

本番環境はプレビュー画面のURLのversion-test以降を削除すると本番環境のURLになります。

これでツイート情報とユーザ情報の紐付けが完了しました。

以上で４回に渡るツイッターのクローンアプリの作成の記事を終わります。bubbleの参考書やサイトは少なく自力で作成することは難しいと感じました。他の記事を参考にしながらの作成でしたが、少しずつ理解できるようになった気がします。bubbleにあるLESSONや動画などを見るだけでは簡単に感じましたが、実際に手を動かしてみると全てにステップがあり時間がかかりました。今回作成したツイッターのクローンアプリで得た知識から自力で作品を作成したいと考えています。

今後も随時ブログを更新しようと考えています。最後まで読んでくださりありがとうございました！