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

bubbleとは

• bubbleは、コーディング不要でWEBアプリが作成できるSaaSです。

初回ログイン時のチュートリアルは閉じて大丈夫

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

チュートリアル概要

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

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

• Saving data

  • 住所を入力して保存ボタンを押すと、地図上にピンで表示するアプリを作ります。
  • Save addresses and display them on a map
  • ~ 4 minutes
  • 

• Building a sign-up system

  • 新規登録、ログイン、ログアウトできるアプリを作ります。
  • Build a sign-up and login workflow
  • ~ 4 minutes
  • 

• Saving and modifying data

  • 都市名の投票アプリを作り、リアルタイムな表示や、データベースの扱いについて学びます。
  • Build a reddit-like app to vote on city names
  • ~ 6 minutes
  • 

• 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…」
  • 

• 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」を入力（初期値）

  • 
  • 送信ボタンを押したあとは、入力欄をクリアするのを忘れずに。
    • 「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」をクリック
  • 
• どのfieldを操作するか選べるので、「Votes」を選択。「=」の後は「Current cell’s City」「‘s Votes」「+」「1」を入力(最後の1は手入力)
  • 

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