【NoCode】bubbleのチュートリアル解説⑦データベースにリストを入れる

bubbleの登録はこちらから。登録するとチュートリアルが選べるようになります。今回は「Defining a field as a list of things」というチュートリアルをやってみます。

★目的：データベースの入れ子構造を理解するためにショッピングカートを作成する

１．Shopping itemというデータベースを作成する

いつもどおりInputとButtonを使って見た目から作っていき保存ボタンの設定からStart/Edit workflowに飛びます。（今回はチュートリアルに逆らい日本語で入力してみました）

いつもどおり「Click here to add an action」→「Data(Things)」→「Create a new thing」からデータベースを作ります。

データベースを作るためには以下の設定が必要です。

①データベース名(Type) = Shopping item

②保存する項目名(Field name) = Name

③保存するデータの型(Field type) = text

④データをどこから受け取るか = Input Item's value

便宜上データベースと書いていますが、エンジニアの方にはリストといったほうがわかりやすいかもしれません。プログラミングチックに書くなら

Shopping list = ['foo', 'bar', 'baz']

となります。

これらを以下の通り、設定していきます。今までのおさらいですね。

またいつもどおり「Element Actions」→「Reset inputs」で入力された値をクリアする処理を追加しておきます。

２．ユーザーデータベースが持つShopping list(項目)にShopping itemが登録されるようにする

いつもと異なるのはここからで、ワークフローの3つ目のステップを作成します。

「Click here to add an action」→「Account」→「Make changes to current user」を選択します。現在のユーザーが持っているデータに対して変更を加えるという作業になります。

Field nameは「Shopping list」、Field typeを「Shopping item」に設定します。

ここで何をやっているかと言うとCurrent user(ログインしているユーザー)が持つShopping listにShopping item(データ型)を登録できるようにしています。

上記で箱を作ったら下記で実際にShopping list にShopping itemを放り込むという記述を行います。直訳すると「Shopping listにステップ１の結果(shopping item)を加える」となります

以上、「保存ボタンが押された時」の３つのステップをおさらいすると、

■１つ目のステップ：「Shopping itemというデータベースにInput欄に入力された商品名を登録する」

■２つ目のステップ：入力欄のテキストをクリアする

■３つ目のステップ：１つ目のステップで登録された商品をユーザーのShopping listに登録する

となります。データの構造は下記のようなイメージです。

３．デザインを整える

ここまでできたらDesignワークスペースに戻って、ContainersからRepeating Groupを選んで任意の場所に配置しましょう。Repeating Groupの設定を開き、表示を反映させたいデータとしてShopping itemを選び、ソース元(Data source)を現在のユーザーのShopping list(Current user's Shopping list)に設定します。

Element Paletteからtextをクリックし、Repeating Group内に配置します。textはDynamic data(動的に内容が変化するデータ)からCurrent cell's Shopping item's Nameを選択します。これによって表示される内容がユーザーが保持するShopping itemのデータによって動的に変化します。

最後にShopping itemをIconクリックで削除できるようにします。Element PaletteのIconをクリックしてRepeating Group内に配置し、設定画面から「削除っぽい」アイコンに変更し、Start/Edit workflowに飛びます。

「Click here to add an action」→「Account」→「Make changes to current user」を選択し、先ほどと反対の処理を行います。

つまりShopping list remove Current cell's Shopping item(Shopping listから現在のセルのアイテムを削除する)と設定します。

これで完成です。previewから動作を確認してみましょう。

↓↓↓次のチュートリアルはこちら↓↓↓