bubbleのチュートリアルのメモ(Lesson 1, 2, 3まで)

# bubbleとは
- [bubble](https://bubble.io/)は、コーディング不要でWEBアプリが作成できるSaaSです。

# 初回ログイン時のチュートリアルは閉じて大丈夫
- 初回ログイン時に表示されるチュートリアルは、次回以降ログインした時に、トップページである[Welcomeページ](https://bubble.io/welcome)に表示されるます。そのため、後からゆっくりやる事ができます。
    - 初回ログインからいきなりチュートリアルが始まりますが、閉じて大丈夫です。
    - 一度やったチュートリアルでも再挑戦できるので、自分のアプリを作っていて迷ったら、チュートリアルをやり直すのもアリです。
        - 初回は「START LESSON」、二度目は「HARD MODE」、三度目以降は「TAKE AGAIN」ですが、どこを操作すればいいかガイドが出るので安心です。

<img width="400" alt="ScreenShot 2020-05-02 17.09.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/521a7165-9ccd-676c-02f0-c3245f2c3442.png">



# チュートリアル概要
チュートリアルには全部で12個のレッスンが含まれており、順を追ってbubbleの機能が学べるようになっています。

まだ途中までしかやっていませんが、以下の内容です。

- Saving data
    - 住所を入力して保存ボタンを押すと、地図上にピンで表示するアプリを作ります。
    - Save addresses and display them on a map
    - ~ 4 minutes
    - <img width="320" alt="ScreenShot 2020-04-29 11.01.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/163c43ec-189a-f841-6cdb-c9a2670f3111.png">



- Building a sign-up system
    - 新規登録、ログイン、ログアウトできるアプリを作ります。
    - Build a sign-up and login workflow
    - ~ 4 minutes
    - <img width="721" alt="ScreenShot 2020-05-02 16.45.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/7412e1e2-8262-2025-5f8a-4788b4538e71.png">


- Saving and modifying data
    - 都市名の投票アプリを作り、リアルタイムな表示や、データベースの扱いについて学びます。
    - Build a reddit-like app to vote on city names
    - ~ 6 minutes
    - <img width="422" alt="ScreenShot 2020-05-02 18.25.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/57d758e5-f363-9ac3-470c-1d1d5f0e9d5b.png">




- Building a slideshow
    - Create a beautiful picture slideshow
    - ~ 2 minutes
- Sending data to pages
    - Share data among pages
    - ~ 6 minutes
- Using conditions
    - Use conditions to refine what your app does
    - ~ 3 minutes
- Defining a field as a list of things
    - Attach a list of things to the current user
    - ~ 5 minutes
- Using APIs and sending data to groups
    - Search for Giphy animated GIF
    - ~ 3 minutes
- Using external APIs
    - Search for songs in the iTunes API
    - ~ 3 minutes
- Using the chart element
    - Use the chart element to display dynamic data
    - ~ 5 minutes
- Login with Facebook
    - Allow users to login/sign up with Facebook
    - ~ 3 minutes
- Graduation lesson: a to-do app
    - You've done the basics - now flex your Bubble skills!
    - ~ 7 minutes


---
# 各チュートリアルの備忘録
以下、詰まった時用の備忘録です。

## (1) Lesson "Saving data"

- 住所の入力欄をつくる
    - テキストボックスではなく、検索ボックス（虫眼鏡のマーク）なので注意

- Saveボタンをつくる
    - Buttonを、入力欄の右に配置

- Saveボタンを押した時の動作を設定する
    - データの保存
    - ここで、Locationというtype(=DBのテーブル)を作成

- 地図上にピンを表示
    - 地図エレメントを下の方に配置

- プレビュー画面で確認
    - 住所を入れて、Saveを押すと、下のマップにピンが立つのを確認
    - 2個目の住所を入れてSaveすると、1個目と2個目のピンが表示される。

---
## (2) Lesson "Building a sign-up system"

- 全てのBubbleアプリには、ユーザ登録機能がある

- Email, passwordの入力欄のInputと、Sign up, Log inのボタンを配置
- ボタンを押した時の挙動は、ボタンを選んで、プロパティの「Start/Edit workflow」で行う
    - Sign upは、「Account」ー「Sign the user up」
    - Log inは、「Account」ー「Log the user in」
    - それぞれ、どの欄から入力されるかを選んで、「's value」
- 他にも、左のWorkflowタブのイベント編集画面の「click here to add an event」ー「Elements」ー「an element is clicked」でも追加できる 

- ログインしているユーザのEmailを表示するには、Textを配置して、キャプションに「Insert dynamic data」ー「Current user」ー「's Email」 を選択する

- ログイン済みの場合はEmailアドレス(のグループ)を表示するには、イベントで、「user is logged in」ー「elements」ー「Show」ー「Logout」
- 同様に、ログアウト済みの場合はEmailアドレス(のグループ)を非表示にする。

- 「ログイン時にxxする」という定義は、Workflowの右側の白い四角「Click here to add an event...」から追加する
    - 下に出る「General」ー「User is logged in」を選択
    - その下に出る「Click here to add an action...」をクリックして、「Element actions」ー「Show」で、Elementに「Group logged in」を選ぶ

- 一通りできたら、画面の右上の「Preview」から、プレビューできる


---
## (3) Lesson "Saving and modifying data"
- Bubbleで作るWEBアプリの特徴は、常に最新のデータが表示されることです。
- 送信ボタンを押した時の動作は、Workflowで指定する
    - 送信ボタンを選択した状態で、「Start/Edit workflow」
    - 「Data(Things)」ー「Create a new thing...」
    - <img width="800" alt="ScreenShot 2020-05-02 17.23.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/b72ef1b2-f455-2f62-b15a-f1266d923fc3.png">

- Typeはテーブル名。「City」と、単数形で指定する。
- Fieldがカラム。Field nameに「Name」と入力、Field typeは「text」を選択して「Create」
- 作成したFieldにどの入力枠を対応させるかを指定する。「Name = click」となっているので、クリックして、「Name = Input city」「's value」を選択
- もう一つFieldを追加し、投票数を記録する入れ物を作る。「Set another field」で、nameに「Votes」、Field typeは「Number」
- 作成したFieldには、投票数を入れる。「Votes = click」となっているので、クリックして、「1」を入力（初期値）
    - <img width="376" alt="ScreenShot 2020-05-02 17.38.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/751ed144-6e62-f2b4-f0e6-886af7768bd8.png">
    - 送信ボタンを押したあとは、入力欄をクリアするのを忘れずに。
        - 「Element Action」ー「Reset inputs」
 
### Repeating Groupの全体設定
- 都市一覧を表示するために、「Repeating Group」を使う。(左メニューのContainersの配下にある)
    - 右側にドラッグ＆ドロップで配置。幅とかを調整。
    - 「Type of contents」に「City」を選択
    - 「Data source」に「Do a search for」「City」、「Sort by」に「Votes」、「Descending」に「Yes」
- 配置した都市一覧のRepeating Groupの体裁を整える。
    - パネルの下のほうにある「Border Style - all borders」を「Solid」にする

### Repeating Gruopの中身(セル)の設定

- 都市一覧のRepeating Groupの、各行(セル)の中身を設定する
    - Textエレメントを、一番上の行におく
        - 変な所に置かれてしまったら、Command+クリックで選択しなおして、パネルの下のほうにあるX,Yで位置を調整する
    - 「...edit me...」が選択された状態になり、パネルの横に「Insert dynamic data」という水色の四角が出るので、クリック 
    - 「Curtent cell's City」「's Name」
    - その後ろに投票数を表示する(チュートリアルなので、自動的に「Current cell's City」「's Votes」が入る)
- 既存の都市に投票するボタン(ハートマーク)を追加する。
    - 左メニューの「Icon」で、1番目の行(セル)内にドラッグ＆ドロップで配置。アイコン一覧が出るので、ハートマークを選択。
    - ハートマークを押した時の処理を追加。ハートマークを選択して、「Start/Edit workflow」
    - Workflow画面で、actionに「Data(things)」ー「Make Changes to Things...」
    - 「Things to change」に「Current cell's City」、「Change another field」をクリック
    - <img width="350" alt="ScreenShot 2020-05-02 18.19.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/f507298c-18e5-0651-6755-49dd79771aba.png">
- どのfieldを操作するか選べるので、「Votes」を選択。「=」の後は「Current cell's City」「's Votes」「+」「1」を入力(最後の1は手入力)
    - <img width="350" alt="ScreenShot 2020-05-02 18.23.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/5d7c90e1-eeb1-c263-6e9f-af2cfe86f689.png">

---

長くなってしまったので、続きは後ほど。