【NoCode】bubbleのチュートリアル解説①保存した住所を地図上で表示させてみる

bubbleの登録はこちらから。登録するとチュートリアルが選べるようになります。今回は一番最初の「Saving data」というチュートリアルをやってみます。

★目的：入力された住所をデータベースに保存して地図に表示する。

★このチュートリアルで学べるbubbleの機能：

①「Input」と「Button」の連携方法

②データベースの作り方

③「Input」に入力された情報をデータベースに保存する方法

１．inputフォームと送信ボタンの見た目を作る

左側に縦に並んだElement PaletteからSearch Boxを選択し任意の場所に配置すると「Input Address」というポップアップウィンドウが現れます。この「Input Address」は後で機能を追加する際にも出てくるので名前だけ頭の片隅に置いておきます。

Appearance(見た目)作成タブのPlaceholderに「Type an address」と入力、Choices Styleに「Geographical Places」を選択。

ちなみにtypeというのはデータ型です。ここらへんはエンジニアではない初心者の方にはしっくりこない概念かもしれませんが、データ型を揃えることで、データを扱いやすくなります。

【初心者向け】データ型とは何か？

上と同じように左側のElement PaletteからButtonを選択し任意の場所に配置

Appearance(見た目)作成タブの一番上の項目に「Save」と入力。

すると見た目がこんな感じになります。

２．inputフォームと送信ボタンの機能を作る

次に機能を追加していきます。

Saveボタンを選択した状態で出てくるポップアップウィンドウの「Start/Edit workflow」を選択。

ボタンを押した時にどのような処理を行うかというワークフローを追加します。

下の「Click here to add an action」をクリックすると様々なアクションを選択できます。今回はDatabaseに住所を保存するのでDatabaseから「create a new thing」を選びます。

Create a new typeから「Location」というデータベースを作成します。この「Location」は後で地図を操作する時にも使用します。

Set another fieldをクリックしてField nameに「Address」を、Field typeに「geographic address」を選択しデータベースをCreateします。

ここで冒頭でButtonと一緒に作成した「Input Address」という入力欄に入力された値を受け取るという処理を作ります。ここ重要ですね。黄色で表示されたInput Address's valueという部分です。

ここで「Save Buttonが押された時に、Inputフォーム(Type an address)に入力された値を、Locationというデータベースに保存する」という動的な処理が記述できたことになります。

続いて２つ目のイベントに「Save Buttonがクリックされた時にInputフォームに入力された文字をクリアする」という処理を登録。

同じように「Click here to add an action」をクリックして「Element Actions」から「Reset Inputs」を選択。

ひとまずinputフォームと送信ボタンについてはこれで完了

３．地図を表示させる

左側のDesignタブをクリックしてElement PaletteからMapを選択して任意の場所に配置。

AppearanceタブのNumber of markers から「List」、Type of markersから「Location」、Data Sourceに先程作成したデータベース「Location」を選択。最後に地図のスタイルを「Apple Map Style」を選択して完成！

Previewを覗いてみましょう。

ちゃんと入力された場所をList化して複数表示できるようになっています。

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