【Bubble】ツイッターのクローンアプリ③〜プロフィール画面〜

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

今回は、一つ前の記事の「ユーザー登録とログアウト処理画面」の続きです。まだ見ていない方は前回の記事から見てもらえるとわかりやすいかと思います。

今回は、「プロフィール画面」についてです。

完成形は以下の写真のようにプロフィール画面から名前、自己紹介、ユーザーアイコンが設定できるようになっています。

新規ページを作成

ログインページ（login）を元に新規ページ（profile）を作成します。

デザインする

Multiline Input（自己紹介）を配置します。

Multiline Inputは複数行入力することができます。

Picture Uploader（プロフィール画像）を配置します。

Picture Uploaderは既に設定されている画像を表示し、クリックすると画像が更新できます。

Icon（戻るボタン）を配置します。

今回はGoogle Material Iconの左を指すものを使用しました。

データタブを編集する

デザインで配置したものをプロフィール画面と連結します。

Dataタブ→Userテーブル→Image（プロフィール画像）、Name（名前）、Memo（自己紹介）を作成します。

事前に登録したユーザー情報を編集します。

Dataタブ→App data→All Users→鉛筆マーク

ここでプロフィールの情報を編集することができます。

プロフィール画面に特定のユーザーの情報を持たせる設定を行います。

profileのType of content→Userに変更します。

このままでは毎回プロフィール情報を登録しなければなりません。そこで既に登録しているものを表示するという設定を行います。

PictureUploader→Dynamic image→Current User’s image

同様に名前と自己紹介の部分も変更します。

Current UserとCurrent Page Userの違いを説明します。

Current Userは自分自身を指します。一方、Current Page Userは自分の画面であれば自分を指し、他人の画面であればその人の画面を指します。

ワークフローを設定する

Index画面で設置したプロフィールボタンからプロフィール画面へ遷移できるようにします。

Navigation→Go to page

プロフィール画面で保存するボタンを押した時、内容に応じてデータを変更します。

Data→Make change to thing

戻るボタンを機能させます。

Navigation→Go to previous page

これでプロフィール画面の設定が完了しました。

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

ここまで読んでくださりありがとうございました。