料理注文システム(モバイルオーダーアプリ)

料理注文ページ画像

料理注文用ページURL(スマホ用)

料理編集ページ画像

料理編集用ページURL(PC用)

スマホを使って料理を注文し、会計までできるアプリケーションです。

現在は注文をすべてまとめてしまっているので、今後はテーブルごとに注文を管理し、会計できるようにすることが目標です。

また、現在開発した機能はメニューを選択して注文する機能とメニュー追加・編集機能のみで、管理用の機能は開発できていないので、注文管理をできる画面を作りたいと思っています。 そして今後は売上管理などもできるようなシステムにしていきたいです。

機能

料理注文用画面(スマホ用)

• 料理の個数を選択し、注文リストに追加する機能
• 注文リストにある料理を注文する(注文履歴に入れる)機能

お会計ボタンで注文履歴を売上管理用のテーブルに移す機能は未完成。現在はお会計ボタンを押すと注文履歴のテーブルデータを削除するのみ。

料理編集用画面(PC用)

• 料理を新規で追加する機能(料理名、写真、金額を入れると追加できる)
• すでにある料理の情報を編集する機能
• カテゴリを追加する機能(削除する機能は未完成)
• 料理を削除する機能(一括で削除する機能は未完成。現在は各料理詳細ページから削除する機能のみ。)

制作背景

web技術を用いて様々なことができると思いますが、その中で正確で迅速な情報伝達が大きな特徴だと思っています。最近飲食店で導入が進んでいるモバイルオーダーシステムは、人によるオーダーに比べ「労働力」、「正確な情報伝達」という点でとても優れていると感じており、web技術による恩恵を大きく受けられるところだと感じています。そのような、web技術による恩恵が大きいことに加え技術的にもそう難しくないことから、制作してみようと思いました。

現在、すでに多くのモバイルオーダーシステムが出ているため、いろんなユーザーに広く使ってもらうことは個人の開発ではなかなか難しいと思いますが、まだまだ個人経営のお店などでは導入することで恩恵を得られるところがあると思います。今後は、実際にユーザーに使ってもらえる機能を揃えて、まずは文化祭で自分で出店してみて試すなどして、実用化するにあたってどのような問題があるのかも今後体験していきたいと思っています。

技術・設計

使用言語・フレームワーク

フロントエンド：React

バックエンド：Laravel

その他の技術

AWS(Cloud9、S3)、heroku

ワイヤーフレーム

ワイヤーフレーム画像

FigmaのURL

ER図

ER図画像

こだわった点・工夫した点

• Reactを初めて使ってみたので手探りではありましたが、Reactの特性をなるべく生かすことを意識して開発してみました。(SPAにする、再利用性を考慮してコンポーネントを作るなど)
• アップロードした画像が保持されるように、AWSのS3を使用しました。
• メニュー編集では、各メニューの初期値を入力した状態にしました。特にカテゴリの初期値が複数の時に、stateの更新やプルタグの数を変えたりすることが思いのほか難しかったので、使いやすいように工夫しました。現在、カテゴリの数を減らす機能を追加できていないので、今後よりメニューを編集しやすいようにしたいと思っています。

開発を通じて学んだこと

• これまでにチームで担当の機能を作成することはありましたが、すべて自分で開発することは初めてだったので、開発の全体像の解像度があがりました。
• 開発環境と本番環境で違う部分(画像をアップロードするにはローカルに保存していた時とは異なり、クラウドに保存などをする必要がある、など)について少し理解することができました
• AWSのS3を使ってみて、今回はURLから画像を直接参照できるようにしましたが、セキュリティを意識した開発ではユーザーやバケットのアクセス付与を考える必要があるなど、セキュリティを考慮した開発について少し学ぶことができました。

今後の課題・目標

開発を通じて、自分の技術が向上したことを感じられましたが、実装してみたい機能全てを実装できるようになるためにはまだまだ実力が足りないと感じたので、より知識や経験を増やしていきたいと思っています。また、セキュリティをしっかりと考えた開発ができるように勉強していく必要があると感じました。今後はさらに開発の経験を増やし、様々な領域や技術に挑戦していきたいと思います。また、自分しかわからないようなコードになってしまっている部分が多くあるので、チーム開発においてどのようなことを意識する必要があるかについても理解を深めていきたいと思っています。