Bubble で作るシンプルなマッチングサイト（初級者向け）８：【ワーカー】応募ページと応募管理ページの作成

この記事は【 Bubble で作るシンプルなマッチングサイト（初級者向け）】の第８回です。本シリーズが初めての方は、以下の記事でコンテンツの説明をしていますので、ご確認いただければと思います。

blog.nocodelab.jp

デザインの細かい部分については割愛しています。不明な部分があれば、こちらのエディタで確認してみてください。

今回作成する画面は、ワーカー側の応募ページ（entry）と、応募・契約した仕事一覧を表示する応募管理ページ（proposals）の作成です。

1. 応募ページ（entry）の作成
2. 応募管理（proposals）ページの作成
次回
コンテンツ

1. 応募ページ（entry）の作成

1.1. entry ページの Design

まずは、応募ページから作成していきます。応募ページは、前回作成した仕事紹介（jobs）ページから、「応募画面へ」ボタンをクリックした際に遷移するページです。出来上がりは、下図ようなイメージになります。

既存で作成したページを利用して entry ページを作成します。ここでは、job-create をコピーして作成しました。

Page の Type of content を「Job」にして、タイトルと見出しを Page Title の Option sets を使って設定しておきます。

仕事情報の詳細部分は「Job Detail」Reusable element を使います。Data source には、entry ページの Type of content で設定している「Current Page Job」としておきましょう。Layout は Group でラップして整えておきます。

次に「応募メッセージ」とした Text と、メッセージを入力する Multiline Input 、「この仕事に応募する！」Button を配置して入力フォームを作成します。Layout は先程と同様に Group でラップして整えておきましょう。

1.2. entry ページの Workflow

次に「この仕事に応募する！」がクリックされた場合のワークフローを作成していきますが、その前に登録する Data type についてざっくりと整理しておきたいと思います。

まず、応募時に登録される Data type は「Contact」になります。このテーブルは「応募・契約情報」のテーブルで、Member field に関係するクライアントとワーカーの User type を保存し、やり取りした Message type のデータを List で持っています。

「Message 」は、単純にクライアントとワーカー同士でやり取りするメッセージを保存しています。

応募があったことをクライアントに伝えるために通知用の「Notice」にもデータを登録します。

また「Job」や「User」にも、応募と紐づけるためのデータを登録していきます。

では、実際にワークフローを作成していきます。

Step1 では、Create a new thing... で Contact に新規登録していきます。Member add Current User で応募ワーカーを、Member add Current Page Job's Client でクライアントを登録します。Progress は「応募」にしておきます。

Step2 では、Job type に Step1 で作成した Contact を add しておき、どの仕事の応募・契約データか？ということを紐づけておきます。Entry Worker add Current User として応募ワーカーについても追加しておき、応募人数をカウントしている、_Count Entry も +1 しておきましょう。

Step3 では、入力されたメッセージを登録しておきます。Body には MultilineInput の値を、_From には Current User（つまりは応募しているワーカー）、_To には Client を登録します。

Step4 では、Step1 で作成した Contact に、Step3 で作成した Message を add して紐づけておきます。

Step5 では、Create a new thing... で Notice を新規作成します。Job、Contact、Message、Progress、_To、Title フィールドに、適切な値を設定していきます。

Step6 では、Step5 で作成した Notice を、仕事を募集しているクライアントの User type の Notice フィールドに add します。また、_Entry Worker に、ワーカーの User type を add しておくようにします。これは、クライアントの _Entry Worker に User を登録しておくことで、もしクライアントが情報を非公開にしたとしても、既に応募や契約したワーカーはクライアントについての情報を確認することができるようにしておくためです。

Step7 では、逆にワーカーの _my Client にもクライアントの User type を追加することで、ワーカーの情報を確認できるようにしておきます。

Step8 では、Contact ページに遷移するように設定しますが、こちらは Contact ページを作成したら設定します。

1.3. entry ページへの遷移設定

entry ページができたので、job ページの「応募画面へ」Button の Destination を設定します。Data to send は、Current Page Job としておきます。

2. 応募管理（proposals）ページの作成

2.1. proposals ページの Design

次に、応募・契約した仕事一覧を表示する proposals ページを作成していきます。このページでは、ワーカーが応募中の仕事一覧と、契約が成立した仕事一覧を表示します。また、一覧はタブで「応募」か「契約成立」かの表示切替ができます。

まずは、いつもと同じ要領で既存のページをコピーして枠組みとなるページを作成します。

タブでの表示切替を管理する、Custom state を作成しておきます。ここでは、「tab」という名前の number 型の Custom state を作成し、Default value を「1」にしています。意味としては「1 = 応募」「2 = 契約成立」とすることにします。

次に、Container layout を「Row」とした Group をひとつ配置して、タブの部分を作成します。タブの Button は、Conditional で Custom state の値を参照して、Style を調整するようにしておきます。 Button のテキストは、Option sets の「Progress」を使用して「応募」と「契約成立」が表示されるように設定します。