電子チケットの販売代行WebアプリをBubbleで作る~4~

今回は、所有チケットに関する振る舞いについて書いていきます。

コンセプトは

･電子チケットのみの取り扱い

･リセールや譲渡機能の充実（コミュニティサービスの要素を取り込む）

の2点です。

所持チケット一覧ページ

まずはチケット管理をする一覧ページの作成。

取りあえず「チケットテーブル」と「ユーザーとチケットの主従関係を格納するテーブル」を作成。ダミーデータをひとつ追加し、ユーザーにチケットを1つ持たせました。

あとは、以前も参考にさせていただいたコードラボさんの記事「簡単なSNSの作成」にある、tweetの表示と同じ要領でチケットを表示させて完成です。

チケット詳細ページ

そして、チケット一覧から目的のチケットをクリックした時に飛ぶ、チケット詳細のページを作成します。

表示する項目は、

･チケット券面

･チケットをリセールに出すアイコン

･チケットを譲渡するアイコン

･連番チケットの連番者を募集するアイコン

の4つです。

チケット券面はよくあるチケット券面をイメージしています。

イベント名や開催日時などはチケットテーブルに紐づくイベントテーブルから持ってきます。

リセール、譲渡、連番の募集はボタンで実装します。

譲渡機能の実装

譲渡ボタンをクリックすると、フォローしているユーザーの中から譲渡したい相手を選べる。

というシンプルな機能です。

まず、譲渡ボタンをクリックすることでポップアップを表示させます。

このポップアップのタイプは「Relation_Users」つまりユーザーのフォロー関係のデータを格納したテーブルです。

そしてポップアップの上にRadio Buttonを置きます。

このRadio Buttonは「Choice type」を「Dynamic choices」に変え、データソースを「Relation_Users」のフォローユーザーにします。

これで、アクティブユーザーのフォローユーザーが選択肢となるRadio Buttonの出来上がりです。

続いてはユーザーを選択した後、OKボタンをクリックしたときのワークフローを設定していきます。

行うのは2Step。大事なのはStep1のみです。

　Step1.チケット所有権の移動

「Date」の「Make changes to」を選択し、「Thing to change」を「Relation_Tickets」つまりチケットとユーザーの所有関係を格納するテーブルにします。

そして変更する項目を「チケット所有者情報」変更に用いる値を「Radio Buttonの値」にします。

これでチケットの所有権は移りました。

　Step2.ページの移動

チケット所有権を移動したとして、それはデータベースでの話です。

ページにはチケットの情報が載ったままですし、なんならポップアップも出たままです。

このままでは気持ち悪いので、所有チケット一覧ページに戻るワークフローも追加します。

戻ったらさっき譲渡したチケットはなくなっています。

リセール、連番者募集に出す処理はワークフローが多くなってしまったので次回に持ち越します。

ここまで読んでくださりありがとうございました。