【初心者向け】Airbnbのクローン作成 Part2|ノーコード開発ナレッジ【Bubble】

概要

Bubble公式ホームページでは「How to Buidシリーズ」と称して、有名アプリのクローンを作成する方法が公開されています。

本記事では民泊事業の最大手であり、その創業エピソードでも有名な「Airbnb」のクローンを作成します。

全て日本語で解説しますので、初心者の方も安心して下さい。

はじめに

Bubbleのアカウントをお持ちでない場合は、以下のリンクからユーザー登録して下さい。本記事で紹介する機能はすべて無料プランで作成できます。(料金の詳細はこちらをご覧ください:Bubbleの料金は?

本記事はパート2です。データベースの設計やエレメントの設置はパート1をご覧ください。

【初心者向け】Airbnbのクローン作成 Part1|ノーコード開発ナレッジ【Bubble】

方法

4.お部屋の登録

ユーザーがBubblebnbのホストになるために、部屋の追加機能を作成します。

STEP.1
"Create room"の「お部屋を登録」ボタンをクリックした時のワークフローを設定します。

STEP.2
"Create a new thing ..."アクションを追加します。

STEP.3
データタイプ「お部屋」を新規作成し、各項目の入力値を指定します。

これで入力された情報をもとにお部屋が新規作成されます。

5.民泊部屋の一覧表示

続いてBubblebnbに登録された部屋を一覧で表示する機能を作成します。

一覧表示を実現するために、”Repeating Group”を使用します。Repeating Groupはデータベースにアクセスして、保存されたデータから自動的にリストを生成します。

STEP.1
"Home page"に設置したRepeating Groupは以下の通りに設定します。

  • Type of content: お部屋
  • Data source: Search for お部屋

Data source”に”Search for お部屋”を指定することで、データベース内のデータタイプ「お部屋」に自動でアクセスし、リストの生成が可能になります。

STEP.2
Repeating Group内に設置した各エレメントは以下の通りに設定します。

これで各エレメントにデータベース内の「お部屋」のデータが自動で割り振られ、Bubblebnb上のお部屋一覧が生成されます。

6.部屋の詳細表示

リピーティンググループでは、各エレメントにワークフローを設定することができます。

これを利用して、Home pageに表示された各部屋の画像をクリックすると、その部屋の詳細が見れるページに遷移する機能を作成します。

STEP.1
"Home page"のお部屋画像をクリックした時のワークフローを設定します。

STEP.2
"Go to page..."アクションを追加します。

STEP.3

“Current cell’s お部屋”が赤く表示されるのは、送信データのデータタイプ「お部屋」と、送信先のRoom detailページ自体のデータタイプが一致しないからです。

STEP.4
"Room detail"ページの"Type of content"を「お部屋」に変更します。

STEP.5

これで画像がクリックされると、Room detailページにクリックしたお部屋の情報を送り、かつRoom detailページに遷移することができます。

STEP.6
"Room detail"ページの設定をします。

これでクリックされた部屋の詳細情報が表示できるようになりました。

7.部屋の予約

Bubblebnbの主要機能のひとつ、部屋の予約機能を作成します。

STEP.1
"Room detail"ページの「予約する」ボタンをクリックした時のワークフローを設定します。

STEP.2
"Go to page..."アクションを追加します。

STEP.3
"Destination"に"Checkout"ページを指定し、"Data to send"に"Current Page お部屋"を指定します。

“Current Page お部屋”が赤く表示されますので、先ほどと同様にCheckoutページの“Type of content”を「お部屋」に変更します。

STEP.4
"Checkout"ページの設定をします。

Dropdownで宿泊数を選択できるようにします。

合計の宿泊料金は「一泊当たりの料金」にDropdownで選択された宿泊数をかけ算して、算出します。”*”はかけ算(×)を意味します。

STEP.5
「予約を確定する」ボタンには支払いのワークフローを設定します。

Stripeを使用すればBubbleに支払い機能を組み込むことができます。

以下の記事をご参考下さい。

まとめ

ユーザーレビュー機能や、絞り替え・並び替え検索など、まだまだ機能面の不足はあると思いますが、Nocodebnbの作成を通して、Bubbleの使い方が分かってきたのではないでしょうか。

NoCode DBでは、本記事以外にもBubbleでのクローン作成の記事を公開してますので、まだまだBubbleに慣れないという方はぜひチェックしてみて下さい。

【初心者向け】Googleカレンダーのクローン作成・前編|ノーコード開発ナレッジ【Bubble】

【初心者向け】Product Huntのクローン作成1|ノーコード開発ナレッジ【Bubble】