目次
概要
Bubble公式ホームページでは「How to Buidシリーズ」と称して、有名アプリのクローンを作成する方法が公開されています。
本記事では民泊事業の最大手であり、その創業エピソードでも有名な「Airbnb」のクローンを作成します。
全て日本語で解説しますので、初心者の方も安心して下さい。
はじめに
Bubbleのアカウントをお持ちでない場合は、以下のリンクからユーザー登録して下さい。本記事で紹介する機能はすべて無料プランで作成できます。（料金の詳細はこちらをご覧ください：Bubbleの料金は？）
- Bubble（https://bubble.io）
本記事はパート２です。データベースの設計やエレメントの設置はパート１をご覧ください。
方法
４．お部屋の登録
ユーザーがBubblebnbのホストになるために、部屋の追加機能を作成します。
これで入力された情報をもとにお部屋が新規作成されます。 続いてBubblebnbに登録された部屋を一覧で表示する機能を作成します。 一覧表示を実現するために、”Repeating Group”を使用します。Repeating Groupはデータベースにアクセスして、保存されたデータから自動的にリストを生成します。 Data source”に”Search for お部屋”を指定することで、データベース内のデータタイプ「お部屋」に自動でアクセスし、リストの生成が可能になります。 これで各エレメントにデータベース内の「お部屋」のデータが自動で割り振られ、Bubblebnb上のお部屋一覧が生成されます。 リピーティンググループでは、各エレメントにワークフローを設定することができます。 これを利用して、Home pageに表示された各部屋の画像をクリックすると、その部屋の詳細が見れるページに遷移する機能を作成します。 “Current cell’s お部屋”が赤く表示されるのは、送信データのデータタイプ「お部屋」と、送信先のRoom detailページ自体のデータタイプが一致しないからです。 これで画像がクリックされると、Room detailページにクリックしたお部屋の情報を送り、かつRoom detailページに遷移することができます。 これでクリックされた部屋の詳細情報が表示できるようになりました。 Bubblebnbの主要機能のひとつ、部屋の予約機能を作成します。 “Current Page お部屋”が赤く表示されますので、先ほどと同様にCheckoutページの“Type of content”を「お部屋」に変更します。 Dropdownで宿泊数を選択できるようにします。 合計の宿泊料金は「一泊当たりの料金」にDropdownで選択された宿泊数をかけ算して、算出します。”*”はかけ算(×)を意味します。 Stripeを使用すればBubbleに支払い機能を組み込むことができます。 以下の記事をご参考下さい。 ユーザーレビュー機能や、絞り替え・並び替え検索など、まだまだ機能面の不足はあると思いますが、Nocodebnbの作成を通して、Bubbleの使い方が分かってきたのではないでしょうか。 NoCode DBでは、本記事以外にもBubbleでのクローン作成の記事を公開してますので、まだまだBubbleに慣れないという方はぜひチェックしてみて下さい。
５．民泊部屋の一覧表示
６．部屋の詳細表示
７．部屋の予約
まとめ
