【NoCode】Bubbleのチュートリアルを初心者向けに解説！ ③ 投票アプリを作成する

皆様こんにちは、taku（@takuNoCode1）です！
平素より格別のご高配を賜り厚く御礼申し上げます。

今回は、NoCodeツールBubbleのチュートリアル Lesson 3 を初心者向けに解説していきます！

    この記事で学ぶこと
・複数の Field を作成する方法
・保存したデータを繰り返し表示する方法
・表示するデータを降順で並び替える方法

チュートリアルの概要につきましては、次の記事で解説しましたので、まずはこちらをご覧ください。

1. 実装するサンプル

フォームに入力した都市名をデータベースに保存し、それぞれに投票数 1 をデフォルトで設定します。ハートボタンをクリックすると、投票数を +1 する処理を追加し、投票数の多い順に都市名を並び替えて表示する、投票アプリを作成していきます。

今回学習する、データの繰り返し表示及び並び替えは、Webアプリ開発において非常に重要なので、気合を入れて頑張っていきましょう！

2. 入力フォーム及び保存ボタン作成

「Input」を配置し、「Placeholder」を「Type a city name （都市名を入力）」に変更します。

前回までのチュートリアルの復習になりますが、この「Input」には、「Input City」という名前が設定されていますので、こちらをデータの紐づけに使用します。

「Button」を配置し、「Submit」に変更します。
次章で、この「Submit」ボタンに「Workflow」を作成していきます。

3. 都市名及び投票数をデータベースに保存

新規データをデータベースに保存する方法については、第1回目のチュートリアルで学習しました。復習のために以下に実装の流れをまとめます。

・「Type」を作成する
・「Field」を作成し、データ型を設定する
・「Field」と入力フォームの値を紐づける

「Type」及び「Field」につきましては、次の記事で詳しく解説しましたので、まずはこちらをご覧ください。

今回のチュートリアルでは、「City」という「Type」を作成し、「Name」「Votes（投票）」という、2種の「Field」を作成していきます。

上記の流れに沿って、まず最初に「Type」を作成していきます。

「Click here to add an action」をクリックし、「Data（Things）」から「Create a new thing」を選択します。

「Type」のドロップダウンリストから「Create a new type」を選択し、「New type」に「City」と入力します。

続いて「Field」を作成していきます。「Set another field」をクリックし、「Create a new field」を選択します。

「Field name」に「Name」と入力し、「Field type」に「text」を選択した後に「CREATE」ボタンをクリックします。

「Name」= 「Input City's value」となるように順に選択します。

「Input City」は入力フォーム作成時に確認した名前で、「's value」は「値」という意味です。

これにより、「Name」と入力フォームの値の紐づけが完了しました。

上記と同じ手順で、もう1つ「Field」を作成していきます。

「Field name」に「Votes （投票）」と入力し、「Field type」に「number」を選択した後に「CREATE」ボタンをクリックします。

保存するデータは数字なので、「number」をデータ型に設定している点に注意してください。

「Votes」に「1」を入力し、エンターキーを押します。

このように、「Field」に対して、定数を指定することによって、デフォルト値（初期値）を設定することが可能です。

これまでの実装で、「City」という「Type」を作成し、「Name」及び「Votes」という、2種の「Field」を作成することで、フォームに入力された都市名を保存し、さらに、投票数に「1」をデフォルト値として保存できるようになりました。

保存終了後に、入力フォームの値をクリアするために、さらに「Workflow」を追加します。

「Click here to add an action」をクリックし、「Element Actions」から 「Reset inputs」を選択します。

4. 保存した都市名を投票数の降順で表示

「Repeating Group」を入力フォームの下に配置します。

点線で区切られたブロックの1つずつを「Cell」と呼びます。
この「Repeating Group」を設定することによって、データベースに保存したデータを、「Cell」1つずつに順番に表示していくことが可能になります。

「Type of content」に「City」を選択します。

「Data source」の「Do a search for」を選択し、新しく出現したポップアップの「Type」に「City」を選択します。

これらの設定により、それぞれの「Cell」ごとに「City」のデータを順番に読み込んでいくことが可能になりました。

次に、「Sort by」に「Votes」を選択し、「Descending」に「"yes"」を選択します。「Sort by」は「並び替え」、「Descending」は「降順」という意味です。

これらの設定によって、「City」から読み込むデータを「Votes」の数が多い順に並び替えることができるようになりました。

「Border style -all borders」に「Solid （実線）」を選択することで、外枠に線をつけることができます。

見た目のスタイルはいろいろ設定できるので、自分でカスタマイズしてみてください。

「Text」を「Repeating Group」の1番上の「Cell」にドラッグアンドドロップして配置します。その他の「Cell」にも自動的に「Text」が配置されます。

「Insert dynamic data」をクリックし、「Current cell's City's Name」と「Current cell's City's Votes」になるように、順に選択します。

これにより、それぞれの「Cell」ごとに読み込まれている「City」の「Name」及び「Votes」のデータを表示できるようになりました。

5. 投票機能の実装

「Icon」を「Repeating Group」の1番上の「Cell」にドラッグアンドドロップして配置します。その他の「Cell」にも自動的に「Icon」が配置されます。

「Icon」にハートを選択します。「Icon color」で自由に色を変更できます。「Start/Edit workflow」をクリックし、ハートアイコンに「Workflow」を作成します。

「Click here to add an action」をクリックし、「Data （Things）」から、 「Make changes to thing」を選択します。

「Thing to change」に「Current cell's City」を選択します。

「Change another field」をクリックし、「Votes」=「Current cell's City's Votes +」となるように順に選択し、最後に「1」を入力してエンターキーを押します。

これにより、ハートアイコンをクリックした「Cell」で読み込まれている「City」の「Votes」のデータを「 +1」して保存することができるようになりました。

以上で、今回の実装は完了です。「Preview」ボタンをクリックし、テストを行ってください。

6. まとめ

最後に、今回のチュートリアルの流れをまとめます。

①  入力フォーム及びボタンを配置する
②「City」という「Type」を作成する
③「Name」及び「Votes」2種の「Field」を作成する
④「Name」に入力フォームの値を紐づける
⑤「Votes」にデフォルト値で「1」を設定する
⑥「Repeating Group」に「City」を紐づける
⑦「Votes」の降順で「Name」及び「Votes」を表示する
⑧  ハートをクリック後「Votes」を +1 する処理を追加する

今回学習した「Repeating Group」は、Webアプリ開発において非常に頻出の項目です。

「Repeating Group」を使って、ツイートや画像を繰り返し表示することによって「Twitter」や「Instagram」のようなSNSも作ることができます。

引き続きBubbleの理解を深めていきましょう！
次のチュートリアルはこちらです！