ノーコードで有名なBubble。
何から始めていいのか分からない。
登録したけどどうすればいいのか分からない。
まずはレッスンチュートリアルから始めるのがいいです。
ここではレッスンの「Graduation lesson: a to-do app」について書いています。
Graduation lesson: a to-do app
Bubbleのチュートリアル卒業レッスンの「やることアプリ」の作製です。
ここでは、To-Doのアプリを作ります。
所要時間：7 minutes（７分）
a to-do appでは、タイトル入力からスタートして、基本的なデザインを実装していきます。
まず、a to-do appをクリックしてスタートします。
要素パレットからテキストを選択します。
ページ上部の中央にテキストを描きます。かなり大きく描きます。
名前をMy to-Doなどに変更します。
テキストフォントを大きくします。
中央に配置します。
入力フィールドを作ります。
要素パレットから入力をクリックします。
タイトルの少し左に幅の広い入力フィールドを作成します。
Placeholder（入力プレースホルダー）をTo-Doに変更します。
Data/Time Picker（日付/時刻ピッカー）をクリックします。
入力フィールドの右側に作成します。
ボタンをクリックして、フォームを送信するボタンを作成します。
ボタンの文字をCreate（作成）にします。
ワークフローを作成します。
start/Edit workflow（ワークフローの開始/編集）をクリック。
ボタンがクリックされた時のアクションを追加します。
Click here to add an actionのDataのCreate a new thingを選択。
TypeをCreate a new typeにします。Todoと入力。
Set anther fieldをクリック。
Create a new fieldを選択。
新しいフィールドを作成。
フィールド名をTitleと入力。
フィールドタイプをtextを選択。
CREATEをクリックします。
次に、新しいToDoを作成します。
Input Todo（入力Todo）、’s Valueをクリック。
Set another field（別フィールドを設定）します。
もう一度新しいフィールドを作成します。
Create a new field（新しいフィールドを作成）します。
新しいフィールドを作成します。
フィールドネームを、Due date（期日）と入力します。
dateを選択します。
CREATEをクリックします。
DatePicker Due Date（DatePicker期日）をクリックし’s Valueを選択します。
Set another field（別のフィールドを設定）をクリックします。
Create a new fieldを選択します。
また、新しいフィールドを作成します。
フィールド名はFinishedにします。
フィールドタイプはyes/noを選択します。
CREATEをクリックします。
新しいTo Do を作成します。
Finishedをnoにします。
アクションを追加します。
Element Actionsを選択し、Reset inputをクリックします。
次にデザインをクリックします。
Contaonersを選択して、Repeating Groupを選択し大きな枠を描きます。
行を10にします。
Type pf contentをToDoにします。
Data sourceをDo a search for（検索します）を選択します。
TypeをToDoにしてAdd a new constraintを選択します。
Finishedを選択し＝を選択しnoをクリックします。
Sort byをDue dataを選択します。
次にテキストをクリックします。
最初のセルにテキスト要素を追加します。
動的データの挿入をします。
Current cell’s ToDo（現在のセルのToDo）を選択し’s Titleを選択します。
次にテキストを選択します。
同じように要素を追加します。右側に少しスペースを残します。
動的データの挿入をします。
Current cell’s ToDo（現在のセルのToDo）を選択し’s dataを選択し、:formatted as 9/16/20 月/日/年の形式にします。
タスクを完了するボタンを作ります。
テキスト要素の右側に追加します。
ボタンのキャプションをDone（完了）にします。
Start/Edit workflow（ワークフローの編集）をクリックします。
アクションを追加します。
Whenをクリックします。
Clic here to add an actionをクリックします。
dataのMake changes to thingを選択します。
セルの仕事をCurrent cell’s ToDoに変更します。
Change another field（別のフィールドに変更する）をクリックします。
Finishedをクリックしyesを選択します。
デザインをクリックします。
パレットからリンクを選択します。
下に追加します。
最後にプレビューをクリックします。
完成したMy To Doです。
To-Doに入力して、日付を入力しCreateをクリックします。
カレンダーが出てきますので、日付を選択できます。
英語と入力して日付を選択しました。
その後、いくつかのワードを追加してみました。
※ Doneボタンの配置と文字が被ってしまっています。入力時にミスがありました。
Done（完了）ボタンをクリックするとリストが消えます。
このような感じで、To-Doリストが作れます。
その他のBubbleレッスンはこちら
⇒ グラフ要素の使用
コメントを残す