ノーコード(Bubble)によるWebアプリ開発７(9/13)

TwitterのようなSNSアプリを作ってみよう(プローフィール画面の作成)＜その７＞

Add a new pageをクリックしプロフィール画面を作成する。
Page nameを「profile」、Clone fromを「login」に設定し、CREATEをクリックする。

「ログイン」と書かれたテキストを「プロフィール」に、「ログインする」ボタンの名前を「保存する」に書き換える。
「email」と書かれたinputを「名前」にし、プロパティ内のContent formatを「Text」に変更する。
「password」のinputは自己紹介に変更するのだが、現在のinputでは１行しか書き込めない。
そのため、Multikine Inputに変更し、Placeholderを「自己紹介」とし、下記画像のように配置する。

左側の空いたスペースに画像を差し込めるスペースを作る。
右のタブのInput forms内にあるPicture Uploaderを配置する。

プロフィール画面の左上に矢印ボタンを配置し、戻るボタンを作成する。
Visual elementsのiconを配置し、プロパティ内のiconで「left」と検索し下記画像の矢印を選択する。
大きさを縦、横４０に設定し左上に配置する。これでプロフィールのデザインは完了！

次にデータベースタブとプロフィール画面の連結を行う。
Dataタブをクリックし、Userをクリック。
Creat a new fieldから「プロフィール画像」、「名前」、「自己紹介」という列を追加する。

まずプロフィール画像を作成する。
Field nameを「image」、Field typeを「image」に設定し CREATEボタンで実行する。

次に、名前のフィールドも同様に作成していく。
Field nameは「Name」、Field typeは「text」とする。

最後の自己紹介も同様に作成する。
Field nameは「Memo」、Field typeは「text」に設定する。

次に、以前製作したユーザーの情報を変更する。
Data内のApp　dataを選択し、All Usersを選択する。
ここの以前登録したユーザーにNameを追加するため、Run asの隣にあるペンマークをクリックする。

画面が切り替わると、Nameと書かれた欄があるのでここに名前を追加する。（今回はryugalabと設定する）

「Saveを」クリックすると編集が完了したという画面が出るので、「GOT IT」というボタンもクリックする。
すると先ほどの画面に戻り、Nameの欄に「ryugalab」という名前が反映される。 次回は、今回作成した列とプロフィール画面の機能をつなげる。