今回から、ノーコードツールであるbubbleのチュートリアルを現役エンジニアが日本語で解説していきます。

公式のbubbleチュートリアルは英語で解説しているので、この記事をみれば英語が苦手な方でもbubbleを勉強できますよ！

では早速Lesson1の「Saving data」を学んでいきましょう。

この記事で学ぶこと

・Type 及び Fieldの作成方法
・保存した住所を地図上に表示する方法

フォーム作成と住所を保存して地図上に表示する。こちらが5分ほどで出来ちゃいます。

1. 入力フォーム及び保存ボタン作成

この章の用語解説
Placeholder:文字入力内の薄地
Choices style:検索フォームに文字を入力すると、候補を予測する内容

今回は住所に関することなので下記のように設定します。

2. 入力された住所をデータベースに保存

今回は、「Location」という「Type」を作成し、その中に、住所を保存していきます。データベースは少し非エンジニアには敷居が高かったりしますが慣れるしか無いです。私は箱の中にモノを入れる際に世界中の誰が見ても分かるようにモノ（データ）が何か分かるように整理しながら入れていくと認識しました。

この章の用語解説
「Type」は、データベースに保存するデータの種類ごとのまとまりです。様々なデータを保存するときに、種類ごとに場所を分けることで管理しやすくなります。
「Field」は、データの項目です。
「Field name」は、「Field」の名前です。「Field」は、1つの「Type」につき複数作成することが可能です。
「Field」は、1つの「Type」につき複数作成することが可能です。
「Field type」は、データ型を表します。

今回は、「Location」という「Type」に、「Address」という名前の「Field」を作成し、データ型を「geographic address （地理的な住所）」に設定します。

これにより、存在しない住所や関係の無い情報がデータとして保存されないようにします。

しかし、このままでは保存処理が終わった後も、フォームに入力された住所はクリアされずに残ったままになってしまいます。

この問題を解決するために、さらに「Workflow」を追加します。「Click here to add an action」をクリックし、「Element Actions」から「Reset inputs」を選択します。

3. 保存した住所を地図上に表示

下記のように設定し、DBに保存した住所を地図上に保存します。

まとめ

10分も掛からず、データを保存してマップへピンを表示することが出来ました！
データの概念を学べるチュートリアルとなっていますので、非常に有益な内容でした。

実際にbubbleを使ってアプリを作った様子を記事にしているので、合わせてご覧ください。

関連記事：
Bubbleで開発－前略プロフィール再現①要件定義とデザイン
Bubbleで開発－前略プロフィール再現②プロフィール作成機能の実装