見出し画像

【Part5】ノーコードツール「ZEROONE」でカフェのオーダーシステムを作ってみた!

こんにちは!「ゼロワン」エバンジェリストの三ツ谷有巨です。
今回は前回の続きでワークフロー設定を行なっていきます。



作成する順番

作成する順番は
1 商品表示ページで注文ボタンを押した時に注文が入るワークフロー【part4】
2 注文が入った時オーダ確認ページで注文内容が見えるワークフロー【今回】
3 オーダー確認ページで配達完了した時のワークフロー【今回】
4 新しくメニューを追加する際のワークフロー【part6】
上記の順番で行います。


注文が入った時オーダ確認ページで注文内容
が見えるワークフロー

オーダー確認ページに移動します。
こちらのページでは注文テーブルに入ってる商品を表示させるだけなので
まずはワークフローは触りません。

では、データベースに入ってる情報を表示できるように
各エレメントの設定をプロパティから変えていきます。

スクリーンショット 2021-12-10 18.17.45

水平リピーターを押してプロパティ画面にてコンテンツを動的にします。
そこから「検索する」を選択してください。
そうすると「何のテーブルにしますか」と出てくるので注文を選択してください。
こうする事によって注文テーブルに入っている情報を参照する事ができます。
「リミットとは何列表示しますか?」という問いになっております。
今回は100列まで表示できるように100にしときましょう。

スクリーンショット 2021-12-10 18.16.44

そしてそのままフィルターとリレーションを設定します。
フィルターとは注文テーブルからデータを参照するときの条件になります。
今回は配達が終わっていない注文データのみ表示させたいのでこのように設定します。この意味は「配達状況がnoの注文のみを表示させる」となってます。

次にリレーションの設定になります。
写真上の一番下の欄のリレーションデータとありますが、
こちらは一度データベース上に入れた情報を他のテーブルに引き継いで使うときに
こちらを使います。今回の流れとしては、
商品テーブルに入っている商品→画面上で表示 リーレーション無し
商品テーブルに入っている商品→注文テーブルに入れる→注文テーブルに入った商品を画面上で表示  リーレーション有り

なのでこちらのリレーション設定をする事でしっかりと反映されることになります。

これでリピーターの設定は終了なので、次に配置してあるテキストの設定に移ります。

スクリーンショット 2021-12-10 18.26.07

テキストをクリックしてプロパティに移りコンテンツを動的に変更させます。
この動的とはリピーターを使いデータベースからデータを引っ張ってくると時には
必ず動的にします。静的のままだとデータベースからデータを引っ張ってこれません。

スクリーンショット 2021-12-10 18.29.48

コンテンツを動的にしたら適正な値を入れていきます。
今回はこのように設定しております。
「セル」とはデータベース上に記録されてるデータのことになります。
「menu from 商品s 商品名」こちらは注文テーブルに入れたmenu商品を参照っするのでこちらを選択し、ここのテキストでは商品名を表示させたいので
最後を商品名にします。

下のテキストでは値段を表示させてたいので最後を値段にしておきます。

スクリーンショット 2021-12-10 18.28.49

画像の参照に関しては少し変わりましてこのように入力します。
最初にto signed urlを入れてからその後の値を入れてください。

プレビューを押してこのように表示されていたらデータベース連携が上手くいってる証拠です。

では最後に配達が完了した時にボタンを押すとセルから商品が消えて配達完了
ボックスに入るように設定しましょう。

スクリーンショット 2021-12-10 18.50.56

ワークフローページに移動してワークフローを設定するページを
order pageに設定しましょう。

スクリーンショット 2021-12-10 18.52.39

その後新しくワークフローを設定します。
今回は名前を配達済みにしておきます。

スクリーンショット 2021-12-10 18.53.57

その後先程と同じようにトリガーをボタンをクリックした時と設定します。

スクリーンショット 2021-12-10 18.56.14

トリガーの設定が終わったのでアクションの設定になります。
データベース欄からドキュメントを更新するを配置します。
右のタブでテーブルを選択し値に(配達状況 テキストを選択しその欄にyesと入力します)
このままでは何がなんでも配達が完了してしまうので
条件(フィルターを設定しておきます。)

スクリーンショット 2021-12-10 19.01.57

今回のフィルターに関してはidとはセルに入っているアイテムのidに設定しておきます。こうすることによって配達完了ボタンを押したときにセルに入っている商品のidを辿って配達完了に変更してくれます。

テストとして何か注文をして、データベースを確認し配達状況がNoになっていたらオーダー確認画面に戻り配達完了を押してください。
オーダー確認画面から商品が消えて、データベース上の配達状況はyesになっていたら完璧です。

また、システム的に
配達状況がnoだけどオーダー確認画面から商品が消える、
配達状況がyesだけどオーダー確認画面から商品が消えない

などがあると、どこかしらが間違っているので遡って確認してみてください。