【Part1】ノーコードツール「ゼロワン」でカフェのオーダーシステム作ってみた！

ZEROONEエバンジェリストの三ツ谷有巨です！


今回は最強ノーコードツール「ゼロワン」を使って飲食店のオーダーシステムを作っていきます。

飲食店であればどんな業態でも同じように作ることが可能なので是非参考にしてみてください！



完成イメージを見てみる

まずは完成イメージから見ていきましょう。
最初に完成イメージを見ることで全体像を把握できるはずです！













１　商品を選び、注文ボタンを押して商品をオーダーする。
２　オーダー画面に行き、注文された商品を確認する。
３　注文された商品を配達して、配達完了ボタンをおす。
４　新しく商品を追加したい時は新メニューを作る。

完成イメージはこんな感じです！
今回はわかりやすように簡単に作ってあります。
それでは開発に入っていきましょう！

ヘッダーを作る

まず最初にフロント画面を作っていきましょう。
ヘッダーを作ります。
白紙のページの上に水平のボックスを置いていきます。
横向きのボックスの中には「MENU」と「ボタン」を配置します。

テキストを左の欄からドラックしボックスの中に入れていきます。
ボタンも左の欄から選択可能です。
しかしこのままではエレメントが左に寄ってしまうので水平ボックスをクリックし
「概観」からレイアウトを選択し真ん中に寄せます。

こうすることによって「MENU」が真ん中に来ます。
次にボタンの配置です。このままではテキスト、ボタンともに中途半端な位置になってしまうのでそういう時には新しく水平boxを活用します、

先ほどと同じように水平ボックスをヘッダーの中に入れその中にボタンを入れます。横幅を変えるとによってうまい具合に調節してください。
もう一つボックスをヘッダーに入れて再調整しヘッダーの完成です。

商品欄を作る

次に商品を見ることができる欄を作っていきましょう。

今回は垂直リピーターををページ状に置いていきます。
「リピーター」とはデーターベース上に入っている情報を画面上に映し出したい時に使う物凄く大切なエレメントです。
今回はデータベースに入っている商品を表示させたいのでリピーターを使います。

リピーターを置いたらその中に垂直ボックスを入れておきましょう。
このボックスを入れる理由はデザインを整えるためになります。

次に今表示したボックスの中に
・商品名用のテキストエレメント
・商品値段用のテキストエレメント
・商品写真を表示せるための画像エレメント
・注文ボタン
上記4点を置いていきましょう。

画像に関してはいい感じに配置できますが、テキストエレメントは
かなりばらつきがあると思います。

こういう時には垂直ボックスを使いましょう。
基本的にエレメントを自由配置することはできないのでそういう時は
垂直ボックスと水平ボックスを上手く使いましょう。

新しい垂直ボックスを商品表示用ボックスの中に入れその中にテキストエレメントをぶちこみます。

テキストまとめボックスと名付け、このボックスの外観からレイアウトを選択して
テキストエレメントがいい感じに来るように揃えましょう。

エフェクトの付け方

最後に商品表示用ボックスを少しおしゃれに
浮いたように影をつけていきましょう。

影の付け方は商品表示用ボックスの外観の一番下の方に「シャドウ」という欄
こちらを押して好きに調整してください。

そうするとこのようになるので商品表示ページのフロント画面としてはこれで完成です。