ノーコード bubble 解説_Twitterのようなアプリ制作_3

「ノーコード bubble 解説_Twitterのようなアプリ制作2」の続き、今回は「ログアウト」とユーザー登録した人が編集出来る「プロフィールページ」作りです。

 

 

Group Focusグループフォーカスを使ったメニュー作り

トップページヘッダー左のアイコンをクリックするとメニューが出てその中に「プロフィール」と「ログアウト」ボタンが入っています。まずはデザインから。

 

 

indexページです。Group Focusで画面をクリックします。左上にピタッとグレーの枠が出来るのでReference elementにアイコンImage header（私の場合こうゆう名前にしておいたので）を選び２つを紐付けます。

 

するとグレーの枠がアイコンの下に来るのでOffset topやOffset leftを調整していい感じの位置にします。デフォルトで250×100だった大きさを180×120に、色も少し濃くして名前をGroupFocus menuにしました。

 

その中にButtonで「プロフィール」と「ログアウト」ボタンを作ります。

 

Elements treeは今こんな構造になっています。

 

アイコンをクリックしたらGroupFocus menuが表示されるワークフローを作ります。

 

Click〜＞Element〜＞Show

 

クリックした時にShowしたいElement、GroupFocus menuを選びます。

 

ログアウト

（プロフィールはこの後やります）ログアウトの設定をします。Start/Edit workflow＞Click〜＞Account＞Log the user out　

次にログアウトしたらログインページへ飛ぶように設定します

つまりログインした人だけがindexページを見れるという事です◎

 

ちなみにこの時点でindexページのワークフローはこんな感じです。ワークフローを作った数だけ四角が出来ています。

 

イベントの追加

今まではボタンが押された時をきっかけに動き出していましたが、今回はログアウト状態ならばと言う条件の設定をします。

ワークフローの１番右の点線の四角をクリック＞General＞User is logged out（ユーザーがログアウトしている時）。すると１番左に四角が出来ます。Click〜＞Navigation＞Go to page　ログアウトしている時に移動するページ、、

 

Destination目的地にloginページを選びます。Previewで確認します。アイコンをクリック、

 

メニューが表示されてログアウトボタンを押したらログアウトと同時にログインページへ移動すれば成功です◎

続いてログアウトボタンの上のプロフィールボタンのリンク先、プロフィールページを作ります。

 

 

プロフィールページの制作

こんな感じでログインユーザーごとに表示が変わります。そして自分のプロフィールはサイト上で変更出来ます。

 

画面左上のindexをクリックしてAdd a new page新しいページを作りますが、今回もloginページをコピーして使います。新しいページ名はprofileとでも。

 

profileページ出来ました。この通り中身はまだ「ログインページ」ですのでデザインやワークフローを直します。

 

１番上タイトルの「ログイン」を「プロフィール」に、「ログインする」ボタンを「保存」ボタンに、「メールアドレス」だった所を「名前」にします。

この「名前」に変更したInputフォームのContent formatをEmailからTextに変更するのを忘れないでください

「パスワード」は１行しか記入出来ないInputで作っていたので削除、

 

代わりに複数行記入できるMultiline Inputを置きます。

 

更にプロフィール画像用に、クリックすると画像アップロードが出来るPicture Uploaderを配置、トップページに戻るためのアイコンIconを左上に配置しました。配置など微調整してデザイン完了です。上の２issueは後で修正します。

続いてデータベースのユーザータイプ（テーブル）にこのプロフィールページを紐付けます。

 

データベースの紐付け

Dataタブでデータベースへ行きます。Data types＞User＞この中に自己紹介のフィールドを追加します。Create a new fieldをクリックします。（もし上の２つ、プロフィール画像用のフィールドimageと名前用のフィールドnameが無かったら以下と同じ操作で追加してください）

 

Field nameはabout（〜について）とし、Field typeをtextにします。

名前は好みで。Field typeはそれぞれ型が決まっているのでこの通りにしてください◎

 

App dataのAll Usersを見ると以前（「ノーコード bubble 解説_Twitterのようなアプリ制作2」の「ユーザー登録ページの制作」）1人作っていたので今作ったname情報を追加してみます。鉛筆マークをクリックします。

 

Nameに好きな名前を＞SAVEで保存します。All Usersに戻るとnameに名前情報が入りました。

 

次はデータベースのフィールド情報とプロフィールページの各エレメントの情報を紐付けます。

プロフィールページのプロパティ（画面全体を囲っている枠の）を開きます。Type of contentをUserにします。これによりこのページは特定のユーザーの情報を持たせる設定になりました。

 

イメージ画像を紐付けます。PictureUploader AのDynamic imageをクリックすると水色のInsert dynamic dataが出るのでクリック、

 

Current Page Userと’s imageを選択します。

 

続いて名前の紐付けです。Initial content＞Insert 〜＞Current Page User + ‘s name

 

最後に自己紹介の紐付け。Initial content＞Insert 〜＞Current Page User + ‘s about

 

 

以上３つの紐付けが終わってこんな感じです。

 

indexページからprofileページにリンクを貼ります。

 

indexへ行きElements treeのGroupFocus menuをクリックして表示させます。「プロフィール」ボタンのワークフローを設定します。

 

Click〜＞Navigation＞Go to page

 

Destination目的地をprofileページとします。

先程profileページには”特定のユーザーの情報を持たせる”設定をしたのでData to sendで何か情報を送る必要があります。ClickをクリックしてCurrent User、自分自身の情報をprofileページに送るとします。

 

profileページに戻って「保存」ボタンを押した時のワークフローを設定します。

loginページをコピーしたのでワークフローにもその情報が入ってしまっています。Step1をdeleteで削除します。

だから上に「２issues」が出ていたんだね、気になっていたんだ

 

代わりにstep1の左横でクリックして保存内容によってデータを変更するアクションを追加します。Click〜＞Data＞Make changes to thing　

 

Thing to changeのClickをクリックしてCurrent Page Userにして”このプロフィール画面ユーザーの情報を書き換える”とします。更に+Change another fieldをクリックしてどの項目を書き替えるか追加します。

「イメージ画像」「名前」「自己紹介」の３項目を今から追加します

 

imageを選択してPictureUploader A　更に’s value。

 

また+Change〜をクリック、name、Input 名前、’s value

 

+Change〜、about、MultilineInput 自己紹介、’s value

 

3項目追加できました。

これで「保存」ボタンを押したら「step1:情報更新」→「step2:インプットの中身が空になる」→「step3:indexページへ飛ぶ」と言う処理が実行されるようになりました。

 

戻るボタンのワークフローもつけます。

 

Click〜＞Navigation＞Go to previous page１つ前のページに戻る、です。

 

 

プロフィールページのデザインもワークフローも完成したのでPreviewで動作を確認します。

ただログインした状態で始めないといけないので、もしセッションが切れていたら　ログインページ＞メールアドレスとパスワード記入＞「ログインする」でindexページの「プロフィール」ボタンで行ってください。

 

以前入れた名前が入っています。

 

イメージ画像を入れて自己紹介を書いて「保存」します。indexページへ移行すれば成功です◎

indexページからもう一度プロフィールに入るとこの状態が保たれているのが確認できると思います。左上”１つ戻る”ボタンの動作も確認してください。

 

Dataを見ると画像と自己紹介文の情報がちゃんと入っていました。

 

ツイート情報とユーザー情報の紐付け

これまでの解説で既にTweetタイプ（Type）とUserタイプは作りました。この２つは今は別々に独立していますのでTweetタイプにユーザーのフィールド（列）を追加して誰がツイートしたのか分かるようにします。

Data typesタブのTweetタイプを選びCreate a new fieldをクリックします。

 

Field nameはUserとします。Field typeもUserです。CREATEで保存するとTweetタイプにUserと言うフィールドが追加されました。

 

App dateタブのAll tweetsを見ると当然の事ながらこれまでツイートしたデータのUser列には何も入っていません。（もしまだUserの列が出来ていなかったら下のRefresh dataをクリックしたり再読み込みしたりしてください）

なのでその分は手作業で入力してみましょう。ユーザー情報を入れます

 

All Usersには”ボーイ”しかいないので彼がつぶやいた事にします。鉛筆マークをクリックします。

 

Unique idをコピーします。

ユニークidはユーザー1人1人に違った番号が与えられます

 

All tweetsのUserに入れます。鉛筆マークをクリック、

 

Userの枠の下にChange search fieldの値を変更したいのでクリック、

 

Userがemailになっているのでunique idを選択しSAVEします。

 

変更が済んだので先程コピーしたunique idをペーストします。他にもつぶやきがあったら同様に入れておいてください◎

これからもいちいち入れるの？

いえ、今後は自動で入るように今からワークフローを設定するので安心してください

 

Workflowページへ行って「投稿する」ボタンを選択します。

 

Step1をクリック＞＋Set another fieldでユーザー登録します。

 

ClickしてUserを選び値をCurrent Userにします。Current Userログインしている自分自身が、つぶやいたユーザーとなります。

ツイート処理が出来ました。

 

ログインユーザーが表示されるようにする

Previewでここまでのトップページを見てみますと

画像と名前のはまだ「仮」のままでした。データベースの処理が済んだのでここにツイートした人の画像と名前が入るようにします。

 

indexを開きます。仮に入れていた２つです。まず画像から。

 

Dynamic imageに画像のURLがあるのでそれを削除します。カーソルを置いていると＞Insert dynamic dataが出るのでクリック

 

Parent group’s tweet、’s User、 ‘s image　と選択します。

 

次に名前部分も同様に＞Insert dynamic data＞Parent group’s tweet、’s User、 ‘s name　とします。設定完了、Previewを見てみます。

 

Dataデータベースの方に入っている情報が表示されるようになりました。

 

新しいユーザーで新規登録、つぶやいてみます。

signupページのPrevieｗから「ユーザー登録」＞新しいメールアドレスとパスワードで「登録」します。

 

新規登録者、ワニとします。

 

つぶやくとプロフィールで入れた情報が反映されました。

ちなみにワニ画像はpng（ピング）形式で背景を透明にしています。

ボーイのように背景に色があると丸くくり抜いたのがよく分かるね

サイトのロゴを綺麗に表示

 

データベースのAll Usersにも新規ユーザーワニの情報が入りました。

 

All tweetsのUser欄にもボーイとは違うUnique idが割り振られました。

今後僕がつぶやいた時は毎回このid:1656224〜が付くよ

 

最後に、今のままだと誰がログインしているのか分かりづらいのでトップページの画像の下にログインした人の名前が表示されるようにしてみます◎

Textで画像の下辺りをクリック（ヘッダーの中から外れないように気をつけてください）、小さめ12pxにしました。…edit me…をクリック＞insert dynamic data

 

Current User、 ‘s nameとします。Previewで確認します。

 

ガールでログインすると「ガール」、ワニでログインすると「ワニ」と表示が変われば成功です。

 

これでTwitterのようなアプリの制作は終わりです、お疲れ様でした。

次回は作った物をサイトに公開する方法を書きます。