ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明しています。

Bubble で calendly クローンを作ってみる!(初級者向け)

f:id:yksmt:20210325144445p:plain

みなさん、こんにちは!

今回は、Bubble の初級者向けコンテンツの新シリーズで、スケジュール調整で有名なWebサービス calendly のクローンを作成していきたいと思います。

calendly は、会議などの時間を調整できるサービスで無料プランもあり、本家サービスは以下になります。

calendly.com

calendly は 2021年1月末に 3億5千万ドルの資金調達をして話題にもなりました。

jp.techcrunch.com

今回はこちらのサービスの一部機能を再現していきます。Repeating Group を使用したカレンダーの実装などもしていきますので、予約などのサービス作成を検討中の方は、是非参考にしてみてください。 本シリーズも、長丁場になると思いますが、最後までお付き合いいただければ幸いです!

前提条件

(※)本シリーズでは、データベースのマスタデータ登録に Parabola を使用します。Bubble の新しい Free プランでは利用できなくなっている為、試す方は Hobbyプラン(旧無料プラン)もしくは、Personal プラン以上の環境を推奨しています。マスタデータ登録を自身で行う場合は、Free プランでも問題ありません。

Bubble を初めて触るという方は入門者向けの次のコンテンツを先にみることをオススメします。

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp

目的

  • Bubble の操作方法を一通り覚えた人が実際にアプリを作成できるようになるための考え方や機能などを紹介する
  • データベースの構成についての考える際のアイデアやテクニックについて紹介する

作成方針

  • レスポンシブ対応はイベントカレンダーのみで、最低横幅は320px。また管理者画面はレスポンシブ非対応とする。
  • 簡単な Bubble の操作方法は省略する。
  • デザインについても簡単なところは省略。難しそうなところだけピックアップして解説する。
  • DB 設計、ワークフローについては細かく解説する。
  • セキュリティに関しては最低限。
  • 再現する機能は一部で、細かい仕様などは簡略化。

機能概要

  • サインアップしたユーザーがイベントを作成することができる
  • プロフィールの編集ができる
  • イベントへの予約は、非サインアップユーザーでもできる
  • 管理者はイベントを複数作成することができる
  • 1対1、1対多のイベント、1回限りの会議を作成することができる
  • 管理者は登録されたイベントに対する予約を確認することができる

作成予定

本シリーズの構成は、以下を予定しています。

1:作成するページの役割とデータベースの構成について

2:ログイン周りとアカウントページの作成

3:ダッシュボードとイベントカレンダー一覧ページの作成

4:イベントの新規作成ページの作成

5:イベントの編集ページの作成とイベントの削除機能

6:Repeating group カレンダーの作成方法とイベントカレンダーページの作成

7:予約機能の考え方とデータベースへの登録

8:予約一覧ページの作成(前半)

9:予約一覧ページの作成(後半)

※予定では全9回ですが、内容のボリュームによって増減する可能性があります。

コンテンツ

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp

※記事公開により、順次追加されていきます。