目次
概要
Bubble公式ホームページでは「How to Buidシリーズ」と称して、有名アプリのクローンを作成する方法が公開されています。
本記事では民泊事業の最大手であり、その創業エピソードでも有名な「Airbnb」のクローンを作成します。
全て日本語で解説しますので、初心者の方も安心して下さい。
はじめに
Bubbleのアカウントをお持ちでない場合は、以下のリンクからユーザー登録して下さい。本記事で紹介する機能はすべて無料プランで作成できます。（料金の詳細はこちらをご覧ください：Bubbleの料金は？）
- Bubble（https://bubble.io）
方法
１．エレメントの設置
まず、本記事で作成する「Bubblebnb」に必要なページを考えます。
Bubbleの利点の１つに、データをページに送る機能が挙げられます。１つのページをデザインすることで、テキストや画像などの各要素は、データベースに保存されたデータから自動的に入力されます。そのため、１つの汎用的なページを作れば、部屋ごとに異なるページを作る必要はありません。
民泊レンタルマーケットプレイスのMVPを構築するため、以下のページを作成します。
- Login page: ユーザーがアプリにログインまたは新規登録するための画面
- Home page: プラットフォームに掲載されている全ての部屋の情報を表示
- Create room: ユーザーがホストとなる部屋を登録するためのページ
- Room detail: ユーザーレビューを含む部屋の詳細情報を表示
- Checkout: ユーザーが部屋の予約を決済するためのページ
各ページのデザインはつくりたいサービスに応じて変更してください。
ユーザーの情報を入力するInputと、ユーザー画像をアップロードするためのPicture Uploader、アクションを始動させるためのButtonを設置します。 ＊赤字のテキストはエレメントの種類の説明ですので、実際には不要です。 部屋の情報を入力するInput、複数行の説明を入力するMultilineInput、部屋の画像をアップロードするためのPicture Uploader、そしてアクションを始動させるためのButtonを設置します。 ＊一泊当たりの料金を入力するInputは、”Content format”を”Integer”に変更して下さい。 データベースにアクセスするためのRepeating Group、画像を表示するImage、名称および一泊の料金を表示するTextを設置します。 各エレメントの設定は後ほど説明します。 画像を表示するImage、名称・詳細・一泊の料金を表示するText、部屋を予約するためのButtonを設置します。 各エレメントの設定は後ほど説明します。 各エレメントの設定は後ほど説明します。 Bubbleにはデータ型（テキスト、画像、数字、etc）があらかじめ組み込まれているため、固有のデータ型を持つさまざまなデータ構造を簡単に設計できます。 Bubblebnbを構築するため、次のデータタイプとデータフィールドを作成します。 Data type: お部屋 Fields: Data type: User Fields: ワークフローの設定では、「ある動作が起きたら、特定の動作を行う」というロジックを指定します。 例えば、新規登録ボタンが押されたら、入力された情報をもとにデータベースに新しいユーザーを登録する。という感じです。 Bubbleでは「ある動作」をイベント(event)、「特定の動作」をアクション(action)と呼びます。 まずは、ユーザー登録のフローを設定します。 これで入力された情報をもとにユーザーが新規登録されます。 パート１では、エレメントの設置、データベースの設計を中心に説明しました。パート２ではワークフローを中心に機能を作成します。
２．データベースの設計
３．ユーザーの新規登録
まとめ
