【React+Rails】位置情報から飲食店を検索するLINE BOTを作成しました
はじめに
Rails ＋ LINE Messaging API で LINE 位置情報やテキストメッセージから飲食店を検索する LINE BOT と React で飲食店をフィルター＆ソートできる Web アプリを作成しました。
はじめは LINE BOT を作成していましたが LINE メッセージのみでは検索結果として表示される件数や絞り込みができずこれでは不便だなと思ったので、詳細検索が可能であり LINE リッチメニューから起動できるような Web アプリを作成しました。
今回は、作成したアプリケーションの機能を構成を解説いきたいと思います。
友達追加はこちらの QR コードからできますので、是非お試しください。
デモ
LINE BOT
Web アプリ
構成
アプリケーションの構成はこんな感じです。
バックエンド処理は Heroku にデプロイした Rails API で行っており、
LINE または Web アプリからの要求に応じてホットペッパー API を叩いて飲食店のデータを取得＆返却します。
さらに、LINE BOT からの要求の場合は LINE カルーセルを作成してメッセージとして返却します。
Web アプリのフロントエンド処理は Vercel にデプロイした React で構成しています。
検索条件をバックエンド側への要求時にパラメータとして渡し、バックエンドから返却された飲食店情報を表示します。
機能
ここからは機能について解説していきます。
LINE BOT で検索
LINE メッセージを送信すると
メッセージの検索結果 10 件がカルーセルメッセージとして表示されます。
LINE リッチメニューから位置情報を送信すると
位置から近い飲食店を 10 件がカルーセルメッセージとして表示されます。
Web アプリで検索
飲食店をクリックすると詳細情報画面が表示されます。
上部の検索ボックスからキーワードを入力すると、キーワードに応じた飲食店が 50 件表示されます
右上のボタンで詳細検索ウインドウが表示されます。
ここでは「ジャンル」「エリア」「予算」からフィルター可能でおすすめ順等のソートも指定可能です。
適用ボタンを押すと条件に応じた飲食店が 50 件表示されます。
さらに最下までスクロールすると次の 50 件が表示されます
ソースコード
ソースコードは GitHub に公開しています。
バックエンド(Rails)
- Ruby@3.1.2
- Ruby on Rails@7.0.4
- Postsql@1.1
- puma@5.0
- rack-cors
- line-bot-api
- httpclient
フロントエンド(React)
- react@18.2.0
- typescript@4.7.4
- react-router-dom@6.3.0
- axios@0.27.2
- react-infinite-scroller@1.2.6
- chakra-ui@2.2.1
まとめ
Web アプリから検索する処理やバックエンド側から LINE,ホットペッパー API,フロントエンドへの通信部分は直ぐに上手くいかず時間が掛かってしまいました。
ですがポートフォリオの 1 つにしたいと思っていたので、なんとか思うような機能が実装できたので良かったです。
今後はセキュリティ面を高めたり、Web アプリに LINEID からログインできてユーザーごとのデータを持たせるようなこともできたらと考えています。
Discussion