美味しい店レコメンドアプリをLaravel × Vue.js のSPAで作った
始めに
2020年1月から受託開発会社に異業種から転職してから1年半が経ち、ある程度の経験をつけてきたもののECのデモアプリは作ったことがありますが、自分でオリジナルアプリを作ってこなかったので今回、個人で運用することも視野にアプリを作ることにしました。
アプリの概要
なぜこのアプリを作ろうと思ったか
自分自身、インスタグラムやRetty,食べログなどから美味しい店を探すことが多く、探すこと自体に苦を感じることはないですが、一方探すことに時間がかかりすぎ、結局目当ての店が見つからない、もしくは多すぎてなかなか決められないということがありました。自分で探すよりも勝手にピックアップされた店に行ってみる機会があってもいいのではと感じるようになり、ランダムにレコメンドするアプリを作成することにしました。また、今回はInstagram APIとの連携は行っていませんが、インスタグラムと連携して投稿されているデータを取得し、画像やMAPなどの表示、検索を行えるようにしたいと考えています。
使用技術
フロント
JavaScript,Vue.js,Vue Router, Vuex
バックエンド
PHP,Laravel
インフラ
Docker,Heroku
CI
Github Actions
料理選択画面
ランダムに３つの料理をレコメンドし、ユーザーに店を選ぶのに迷わずアプリに選んでもらうという選択肢を作ります。
エリア、カテゴリーをキーに検索することができる予定です。（検索機能に関してはまだ途中）
料理詳細画面
料理名、料理の詳細について表示されており、星の部分をクリックするとお気に入り登録されお気に入り画面に表示されます。「Go」ボタンをクリックすると料理にリレーションした店舗テーブルに格納されている地図URLから地図が表示される想定。(これもこれから実装予定）
お気に入り画面
お気に入り登録された料理が一覧表示される。
API構成図
Vue Routerで各コンポーネントへのルーティングを行う。現状、４つの画面に一つのコンポーネント＋お気に入りボタンコンポーネントを作成しており、それに対してAPIでデータベースのデータを返却する処理を行う。
ER図
users、dishesテーブルがあり、その間に中間テーブルとしてuser-favoritesテーブルを作成し、このテーブルにお気に入りのレコードを追加するようにしている。
工夫した点
お気に入り機能を実装する際、お気に入りボタンをコンポーネント化することにより汎用的に利用できるようにした。
ER図のようにDBの構成を料理テーブルとユーザーテーブル、料理テーブルと店舗テーブルをリレーションするようにして、データを関連させて処理を行えるようにした。
苦労した点
今回デプロイ先としてherokuへデプロイを行いましたが、以下ブログで書いたようにlaravel×vueでのSPAをデプロイするのにかなり詰まってしまいました。デプロイできたものの500エラーとなり、nodeのバージョンの問題であったりと様々問題がありましたが、config/app.phpでdebugをtrueにすることで何がエラーになっているかがprodution環境で見ることができ対応することができました。
今後追加したい機能
- Instagram APIでのデータの取得
- Hashtagで検索できるようにする
- Mapを表示できるようにする
- 検索機能
- 検索のいいねが多いものを優先的に表示する
- フォロワーの多い人の投稿を優先的に表示する
- AWSへのデプロイ
- Github Actionsの活用
検索機能に関して、ランダムで選択された料理がどれぐらい精度が高く美味しい料理をピックアップしてこれるかが、このアプリの最も重要な機能だと考えており、今後は検索機能をよりブラッシュアップしていきたいと考えています。まだまだ、未完成な部分が多いですが、今後もより良くできるように改善を続けたいと思います。
Discussion