今回は人気（グローバルでは）のローコードツールbubbleにチャレンジする４回めです。前回はチュートリアルシステムの動きに翻弄されてチョット時間がかかってしまいましたが、なんとかログイン画面を完成させ、なんとなくコツを掴んだので次のレッスン「都市名に投票する reddit のようなアプリを作成する」というのに挑戦したいと思います。

さっそくLessonsページに移動

今回もさっそくLessonsのページに移動します。すでに２つのレッスンが終了しています。

今日行うのはSaving and modifying dataです。ボタンを押して進みます。
この開発コンソールからのスタートです

日本語での説明を読みます。ユーザーが入力して投票した都市名をカウントして集計結果を表示する画面だそうです。

入力フォームの作成

まずは入力画面を作成します。
最初は都市名の入力欄を設定します。要素メニューから「Input」を選択して、画面に配置します。

項目名（Placefolder）には「Type a city name」（都市名を入力してください）を入力します。

次に投票ボタンを配置します。左側の要素メニューから「button」を選択し、City nameの下に配置し、「send」（送信）という名前にします。

ワークフローの設定

次にボタンをトリガーとしたワークフローを作成します。
「send」ボタンのプロパティから「Start/Edit workflow」をクリックします。
ワークフローの画面に切り替わります。

「Click here to add an action」をクリックします。

「data(things)」の「create a new thing」を選択します。

右側にプロパティが表示されるので、プルダウンメニューから「Create a new type」を選択します。

新しいタイプの名称の入力を求められるので「City」と入力します。

次に「Set another field」をクリックします。
同じように「Create a new field」を選択するとフィールド追加の画面が表示されます。
Field nameには「name」を入力しfield type には「text」を選択します。
CREATEボタンが青くなるのでクリックして登録します。

次に入力された都市名の値を入力させます。右側に新しく表示されたプロパティ欄のname = に「Input city」「's value」を選択します。

おなじように投票数フィールドを設定します。「set another field」をクリックします。出てきた欄をクリックして「Create a new field」を選択します。

再びフィールドの設定画面が表示されるのでfield nameに「Votes」（投票数）と入力し、field typeに「number」（数値）を選択し、CREATEボタンをクリックします。
再びフロー画面が表示されます。

次は数値の内容を設定します。Votes = の欄をクリックし、初期値の「1」を入力してENTERを押します。

次は「send」ボタンを押した後に入力をリセットするアクションを設定します。「click here to add an action」をクリックしてアクションを追加します。

メニューが表示されるので「Element Actions」「Reset inputs」（要素の設定の入力値をリセット）を選択します。

投票された都市のリストの画面を作成

都市名を投票する画面と処理が完成したので、次はその集計結果を表示する画面を作成します。

まずはDesignタブに戻ります。

「Conteiners」から「Repeating Group」（繰り返しのある領域）を選択して配置します。

表形式のようなエリアが表示されます。
右のプロパティ欄のtype of content ではプルダウンメニューから「City」（都市名）を選択します。

次にデータソースを指定します。data source欄に「Do a search for」を選択して表示される　Search for City's の項目typeに「City」Sort byはVotes（数字順）Descending（降順）をyesにします。投票順に都市名を表示する設定です。

次にRepeatingGroup Cityのプロパティの下の方まで移動し、Border Styleを「solid」にします。

Groupの中の表示項目を設定

次にGroup（表形式のもの）の中に項目を配置していきます。
まずは都市名を配置します。左の要素メニューから「Text」を選択して表の中に配置します。右に表示されるプロパティ欄のedit meをクリックして右に表示される「insert dynamic data」をクリックしてプルダウンから「Current cell's City」「's name」を選択します。

次に表に出た都市名に賛成するためのアイコンを配置します。
左側の要素メニューから「icon」を選択して表の中に配置し、アイコンを選択します。

次はアイコンをクリックしたときに数字を加算するワークフローをせってします。プロパティのところにある「Start/Edit workflow」をクリックしてワークフロータブに切り替えます。

「click here to add an action」をクリックしてフローを追加します。

表示されるメニューから「data(things)」「Make change to thing」を選択します。これで数値を変化させます。

右に表示されるプロパティの欄のThing to changeに「Current Cell City's」を選択します。数字に変更を加える処理を追加します。

次に「Change another field」をクリックします。

Votes(投票数)を選択し「Current cell's city」「's votes」「＋」を順に選択して、最後に１を入力します。
これでアイコンをクリックすると投票数に１が加算されるようになります。

これでこのレッスンの作業は終了です。

最後にPreviewでテスト

出来上がったアプリを右上のPreviewをクリックしてテストしてみます。

作ったアプリ画面が表示されます

早速、都市名を入力してみます。

次に表のアイコンをクリックしてみます。ちゃんと数字がカウントアップされて、順位が変わることが確認できました。

コツを掴んだせいか、わりと早くクリアできました。
次は「Building a slideshow」スライドショーを作るです。
少し変わった感じのテーマなので楽しみです。