【Bubble】カレンダーに表示したイベントへ応募する機能

2024年1月24日

ノーコードツール「Bubble」のプラグイン「Full Calendar」を使ってカレンダーに表示させたイベントへユーザーがスタッフとして応募する機能の作り方を紹介します。

この記事はシリーズ第２弾なので、まだカレンダー表示を実装していない方は先に下記のシリーズ第１弾をご覧になってからお願いいたします！

実装イメージ

カレンダーに表示しているイベントをクリックすると、該当イベントへ応募するフォームがあるページへ遷移させます。

応募フォームにお名前とメールアドレスを入力してもらい応募ボタンをクリックすると、データベースに該当イベント名と応募者の名前・メールアドレスが登録されて応募完了といった想定です。

かなりシンプルな内容なので、実際アプリを開発する際はもっと複雑な仕様になるかと思います。ただ、Bubbleでカレンダーを使って応募してもらう仕組みを構築する手軽な方法を知っておくとイメージしやすいと思うのでこの粒度で記事化させていただきました。

以下の手順で実装します。

まずは、イベントへ応募する人の情報を格納するデータベースを「Applicant」という名前で作ります。

フィールドに以下を追加します。

カレンダーの各イベントをクリックしたときに遷移させる、イベントへ応募するページを作成します。

ざっくりとした作業内容は以下です。

応募するボタンをクリックしたときのワークフローは以下のように設定します。

単純にCreate a new thingでApplicantタイプをInputに入力された内容＋Current page’s Event titleを各フィールドにセットして、イベントへ応募する人を新規登録するアクションを設定します。

データを新規作成した後は、Step2でInput内容をリセットしてGo to pageで任意のページへ遷移させるなどよしなにしてください。

最後に、カレンダーの各イベントをクリックしたときに先程作成したイベント応募ページへ遷移させるワークフローを設定して完成です。

プラグイン「Calendar」のエレメントを設定しているページではワークフローに下図のようなメニューが追加されます。そちらのA calendar's event is clickedをクリックします。カレンダーに表示されているイベントがクリックされた時、という意味です。

そして次に、Go to pageアクションでイベント応募ページへ遷移させてやります。

Destinationは該当のページをセットし、Data to send（遷移先に送るデータ）はThis Calendar's current eventを設定してあげましょう。こうすることで、クリックされたイベントデータを次のページへ渡すことができます。

今回はイベント応募ページへ遷移させました。イベント応募ページの構成要素も最低限度のものに留めましたが、実際アプリ開発する際は、たとえば「イベント詳細文」「イベントのアイキャッチ画像」「主催者情報」などを表示するイベント詳細ページへ遷移させてあげるのが一般的で親切かなと思います。

今回の記事がみなさんのBubble開発の一助になれば幸いです。最後まで読んでいただきありがとうございました！

よかったらシェアしてね！