こんにちは！開発部の米村です。
bubble公式チュートリアルにある投稿可能な掲示板を作っていきます。
完成物はこちらです。
都市名を入力して送信するとリストに都市名と投票数1が表示されます。そしてハートのアイコンクリックで、投票数がカウントアップされ、投票数順に並び替えられるというものです。
前回の記事をまだご覧になっていなければ、ぜひご覧ください。
bubbleチュートリアルやってみた: 新規登録とログインを作ってみよう-2
それではやっていきます。
目次
都市名の入力フォームと送信ボタンを作る
1. 左側の Input forms から Input を選択し、右側の余白の好きな箇所にフォームを作ります。
2. Placeholderに「Type a city name」と入力し、都市名を入力する説明書きを加えます。
3. 左側の Visual elements から Button を選択し、右側の余白の好きな箇所に送信ボタンを作ります。
4. Appearanceに「Submit」と入力し、ボタンに Submit と表示させます。
入力した都市名とデフォルトの都市の投票数をデータベースに保存する
5. 4のButton Submitで Start/Edit workflow を選択し、Workflow画面に移ります。Click here to add an action から Data（Things）を選択し、Create a new thing… をクリックします。
6. Type欄に 「City」と入力します。
7. Set another filed をクリックして、Create a new field を選択し、Field nameに「name」、Field typeに「text」と入力し、CREATEをクリックします。
8. nameには「Input City’s value」と入力します。
9. nameには「Input City’s value」と入力します。
10. Votesには「1」と入力します。
11. 送信した後のアクションとして入力内容をリセットしたいので、Click here to add an action..からElement ActionsのReset inputsをクリックします。
データベースに保存された都市の都市名と投票数をリストに表示させる
12. Designに戻り、ContainersのRepeating Groupをクリックします。これは、複数の要素をリストで表示したいときに使用するものです。右側のフォームの下に配置します。
13. Type of contentに「City」、Data sourceに「Search for Citys」と入力し、作成したCityのデータベースからデータを取得するように設定します。
14. Search for CitysのTypeを「City」と入力します。
15. Vote数の多い順に都市を表示するため、並び替えのSort byに「Votes」、降順のDescending に「Yes」と入力します。
16. リストに枠線を設けたいので、AppearanceのBorder styleを「Solid」と設定します。
17. 続いて都市名をリストに表示します。リストの一つ目の枠をクリックし、Appearanceに「Current cell’s City’s name」「Current cell’s City’s Votes」と入力します。
投票数をカウントアップするアイコンを追加する
18. 続いてVotesを1, 2, 3とカウントアップするために、クリックしたらカウントアップするハートのアイコンを用意します。Visual elementsのIconを選択し、AppearanceのIconから「Choose an icon ♡」を選択します。
19. 18で追加したIconの Start/Edit workflowをクリックし、カウントアップの機能を追加していきます。Click here to add an action..からData(Things)のMake changes to thing…をクリックします。
20. Make changes to City..を選択し、Votes に「Current cell’s City’s Votes + 1」と入力します。これで、アイコンをクリックする度に、CityのVoteがプラス1されるという処理になります。
プレビューで動作を確認する
21. 一通り完成したので、プレビューで動作確認します。
22. 好きな都市名を入力し、Submitをクリックすると、都市名がデータベースに登録され、リストに登録された都市名とデフォルトの投票数1が表示されます。そして、ハートのアイコンをクリックすることで、投票数がカウントアップし、投票数が多い順に並び替えされることが確認できました。
以上です！おつかれさまでした。