ノーコードで有名なBubble。
何から始めていいのか分からない。
登録したけどどうすればいいのか分からない。
まずはレッスンチュートリアルから始めるのがいいです。
ここではレッスンの「Defining a field as a list of things」について書いています。
Defining a field as a list of things
「Defining a field as a list of things」は、ユーザーが購入するアイテムを作成できるアプリです。
「Defining a field as a list of things」を選択しスタートレッスンをクリックします。
所要時間は5分になっています（この時間で終わったことは一度もありません^^;）
エディタ画面
日本語に訳してみました。リストをデータベースに格納し、ユーザーが購入するアイテムを作成できるアプリです。
スタート、コンテニューをクリックして進めていきます。
まずは、Inputをクリックし、ページ領域をクリックして、入力要素を作ります。
横にボタンを作ります。
ボタンの文字ををsaveに変更します。
次にワークフローを作成します。ワークフローの開始/編集をクリック
ショッピングアイテムを保存します。
Click here to add an actionをクリック
次に、Date（データ）のCreate a new thing（新しいものの作成）をクリック。
ショッピングアイテムを保存します。
タイプのドロップダウンを開きショッピングアイテムを作成します。
Shopping itemと入力します。
次はアイテムの名前を保存します。
「Set another field」（別のフィールド）を設定します。
矢印の所をクリックして、Create a new field（新しいフィールド）の作成を選択。
Field name（フィールド名）をつけます ⇒ Ｎame（名前）
Field type（フィールドタイプ） ⇒ text（テキスト）を選択
入力したら、CREATE（作成をする）をクリックします。
次にショッピングアイテムを保存します。
入力アイテムの値を入力するので、入力項目をクリックします。
Inpit item （入力アイテム）’s value（の値）をクリック。
ショッピングアイテムを保存します。
次に、ユーザーが保存を押したあとに入力をリセットするアクションを追加します。
Click here to add an action（ここをクリックしてアクション）をクリック。
Element Actions（要素アクション） Reset inputsを選択。
これでアイテムの保存が完了。
次にこのアイテムを現在のユーザーに保存されている購入するもののリストに追加します。
おなじような流れで、Click here to add an action（ここをクリックしてアクション）をクリックして始めます。
Make chenges to current user（現在のユーザーに変更を加える）を選択。
Change another field（別のフィールドを変更する）をクリック。
クリックボタンを押してCreate a new field（新しいフィールドの作成）を選択。
Field name（フィールド名）をつけます ⇒ Shopping list（ショッピングリスト）
Field type（フィールドタイプ） ⇒ text（ショッピングアイテム）を選択
this field a list （このフィールドはリストです）にチェックをいれます。
CREATE（作成する）をクリック。
次にアイテムのリストを保存します。
新しく作成したアイテムをショッピングリストに追加していきます。
Shopping listをクリックします。新しく作成したアイテムをショッピングリストに追加するためにadd（追加）を選択。
そのあとResult step 1（ステップ1の結果）を選択します。
新しいショッピングアイテムを作成するたびに、購入のアイテムリストに追加します。
次に、買物リストの表示です。
左側のデザインをクリックします。
Containers（コンテナ）セクションのRepeating Group（繰り返しグループ）をクリック。
枠を書きます。
Type of content （コンテンツのタイプ）をshopping item（ショッピングアイテム）を選択。
Date source（情報源）にCurrent User（現在の使用者）を選択し’s shopping list（買物リスト）を選択
買物リストを表示するために、最初のセル内にテキストを書きます。
テキストがセル内にある場合はセルの境界線が赤に変わります。
次に、テキストをクリックしてページに書きます。
アイテムの名前を表示させます。テキスト名を編集します。
Current cell’s Shopping item（現在のセルのショッピングアイテム）、s’Nameを選択します。
次に、ユーザーがショッピングリストからアイテムを削除できるようにします。
繰り返しのグループに削除アイコンを追加します。
左側のアイコンをクリック。
アイコンを追加します。
アイコンを選択します。ここで選択するのは○の中に×が書かれたアイコンです。
アイコンをクリックしたときにどうなるかを決めるため、start/Edit workflow（ワークフローの開始/編集）をクリック。
Click here to add an actionをクリックしアクションを追加します。
Make changes to current user（現在のユーザーに変更を加える）を選択。
chenge another field（別のフィールドを変更する）をクリック。
変更するフィールドでShopping list（ショッピングリスト）を選択。
リストからエントリーを削除するために、remove（削除）を選択。
削除したいアイテムは、セルのショッピングなので、Current cell’s Shopping item（現在のセルのショッピングアイテム）を選択。
最後にプレビューをクリックします。
上部の枠に入力してsaveすると下にリストとして表示されます。
×ボタンをクリックすると削除できます。
レッスン「Defining a field as a list of things」では、このような買物リストが作成できます。
動画解説
Bubbleのその他のレッスンはこちら
コメントを残す