ノーコード bubble 解説_Twitterのようなアプリ制作_2
「ノーコード bubble 解説_Twitterのようなアプリ制作1」の続きです。
「つぶやく」ボタンを押したらポップアップ画面が出て記入した内容を「投稿」出来る画面と仕組み作りから始めます◎その次に「ユーザー登録ページ」「ログインページ」も作ります。
ポップアップPopup画面の制作
画面左、UI BuilderのPopupを配置します。周りはこんな感じで暗くなります。暗い所をクリックすると消えますがElements treeの１番下にあるのでクリックすれば表示され編集出来ます。Popup Postと名前を変更しました。
Popupの中にInputで入力欄を作ります。適当に440×100とし左右センターに配置します。こちらも名前をInput postに変更。「Type here…」を
「ここで、つぶやこう」など分かり易く書き換えました。
同じくPopupの中に「投稿する」Buttonも作ります。前回「制作１」でオリジナルで作ったE Buttonのスタイルを適応しデザインを統一します。（このスタイルはこの先も多用します）
ツイート投稿画面の見た目は出来ました。暗い所をクリックして一旦Popupを消しヘッダーの右「つぶやく」ボタンにワークフローを設定し、今作ったPopupを表示させる仕組みを作ります。Start/Edit workflowをクリックします。
Button header tweetがクリックされた時どうしたいかを決めます。
さっき作ったポップアップ画面を表示させたい、だよね
その通り。
Click here〜＞Element Actions＞Show 表示させたいエレメント、
Popup Postです。Previewで表示を見てみます。
「つぶやく」をクリックしてポップアップが表示されれば成功です。
次はこのポップアップの「投稿する」ボタンを押したら入力した内容がデータベースに反映されて画面にも表示されるようにワークフローを設定します。
投稿内容をデータベースに反映させる
デザイン画面へ行ってPopup PostのButtonをクリックし、Start/Edit workflowをクリックします。
データの登録
まずクリックした時にデータベースに情報を登録させたいので、Click〜＞Data＞Create a new thing＞
Typeはtweetでその中のどのfieldの情報を加えるか、+Set another field＞Click、
ええっと、Typeとかfieldって何だったっけ？
Bubbleのデータ（ベース）で使う用語だよ。この大きな枠がTypeで中の１つ１つの項目がfieldだったね。今はTweetとUser２つのTypeがあるうちtweetを選んでいて次の説明ではその中のPostと言うfieldを選ぶよ
Postを選びます。Postに登録するのはInput Post「ここで、つぶやこう」に入力した値、‘s Value（〜の値）です。これで登録できるようになりました。
データベースに登録後このPostに入力した内容はリセットで中身を空にしたいのでその設定をします。
何度も使うもんね
step1 の隣、Click here〜＞Element〜＞Reset inputs
更にポップアップ画面を閉じる（隠す）ようにします。step2の隣、Click here〜＞Element〜＞Hide
HideしたいElementはPopup Postです。Previewで動作を確認します。
１「つぶやく」ボタンを押す＞２（ポップアップ画面が現れる）何か書き込む＞３「投稿する」ボタンを押す。
ポップアップ画面が消えて投稿内容が１番上に表示されれば成功です◎
データベース（Data>App data>All tweets）にも同じ情報が入ったのが確認できます
ユーザー登録ページの制作
今まではトップページ（index）でしたが次はこんな感じのユーザー登録ページ（signup)を作ります。
左上indexになっている所をクリック＞Add a new pageでsignupページを作ります。
signupページが出来ました。ヘッダーデザインはindexと同じものを使おうと思いますのでindexページに戻って
Group Headerを選択、右クリック（Macの場合）でCopy
signupページに戻ってペーストします。右上にあった「つぶやく」ボタンはこの画面には不要なので削除します。（左の画像を中央に寄せて調整しました）
Groupで適当な大きさの枠を作って背景を白にしました。
その中にTextで「ユーザー登録」とInputでメールアドレスを記入するインプットスペースを作ります。Placeholderの所を”メールアドレス”など書き換えます。
メールアドレスのインプットスペーをcommandを押しながら複製して「パスワード」インプットスペースにしても。
こんな感じです。そしてButtonで「登録する」を作ったら見た目は完成です。
Elements treeはこのような構造になっています。
「登録する」ボタンにワークフローを付けます。
Start/Edit workflow＞Click here〜＞Account＞Sign the user up
で、登録に必要な項目Emailに先ほど作ったInputメールアドレスを選択、
その横をクリックして‘s value（〜の値）を選びます。続けて下のPasswordにはInputパスワード、‘s valueを選びます。
今作った２つの情報を元にユーザー登録をすると言う処理が行われます
次にユーザー登録をしたらインプットフォームの中身をリセットします。step1の横のClick〜＞Element〜＞Reset inputs
リセットしたらindexページへ飛ぶと言う設定をします。Navigation＞Go to page、でDestination目的地はindexです。Previewで動きを確認します。
適当にメールアドレスとパスワードを入力します。
が、この後ログインテストで使いますので覚えておいてください◎
「登録する」ボタンを押します。Google Chromeですとパスワードが短くて危ない旨の注意が出ますがここはOKで。
ユーザー登録画面が消えてindexページに飛べば成功です。
データベースも確認してみましょう
App dataタブの中のAll Usersにメールアドレス情報などが入りました◎
失敗ケース、ここをチェック
実はユーザー登録でメールを入力したら「メールが違っています」と表示が出ました。メールアドレスのContent formatにメールはEmail、パスワードはPasswordにしないと「型（メールなら「〇〇@〇〇」）が正しくない」と言う理由ではじかれます。（commandを押しながら複製した時に逆に並べてしまったのがミスの原因でした）
ログインページの制作
やることがいっぱいだね
「ログインページ」は上で作った「ユーザー登録ページ」をコピーしてちょっと直すだけだから簡単だよ◎
左上をクリックしてAdd a new pageを選択します。
ページの名前はloginとしてClone fromで先程作ったsignupページを選択します。
loginページが出来ました。「ユーザー登録」を「ログイン」に「登録する」ボタンを「ログインする」ボタンにデザイン変更します。それからワークフローもsignupのままなのでlogin用に変更します。「ログインする」ボタンのStart/Edit workflowをクリックします。
step1はSign the user upなのでdeleteで削除します。
上でStep2だった物が左に押し出されてStep1になりました。Step1の左側辺りでクリックするとお馴染みのClick here〜が出てくるのでこれをクリック＞Account＞Log the user inを選択します。
Log the user inのEmailに「ユーザー登録」の時と同じようにInputメールアドレス’s Value
PasswordにInputパスワード’s Valueを入れます。（今作った物がstep1になりました）Previewで動きを確認します。
ユーザー登録の時に使ったメールアドレスとパスワードを記入し「ログインする」ボタンでトップページに入れれば成功です。
次回３では「ログアウト」とユーザー登録した人が編集出来る「プロフィールページ」を作ります。どうぞお付き合いください◎
