【React+Rails】位置情報から飲食店を検索するLINE BOTを作成しました

2022/10/30に公開約2,300字

はじめに

Rails + LINE Messaging API で LINE 位置情報やテキストメッセージから飲食店を検索する LINE BOT と React で飲食店をフィルター&ソートできる Web アプリを作成しました。

はじめは LINE BOT を作成していましたが LINE メッセージのみでは検索結果として表示される件数や絞り込みができずこれでは不便だなと思ったので、詳細検索が可能であり LINE リッチメニューから起動できるような Web アプリを作成しました。

今回は、作成したアプリケーションの機能を構成を解説いきたいと思います。

友達追加はこちらの QR コードからできますので、是非お試しください。
LINEBotQRCode

デモ

LINE BOT
LINEBOTLocation

Web アプリ
LINEBOTstartWeb

構成

アプリケーションの構成はこんな感じです。
LINEBOTdiagram

バックエンド処理は Heroku にデプロイした Rails API で行っており、
LINE または Web アプリからの要求に応じてホットペッパー API を叩いて飲食店のデータを取得&返却します。
さらに、LINE BOT からの要求の場合は LINE カルーセルを作成してメッセージとして返却します。

Web アプリのフロントエンド処理は Vercel にデプロイした React で構成しています。
検索条件をバックエンド側への要求時にパラメータとして渡し、バックエンドから返却された飲食店情報を表示します。

機能

ここからは機能について解説していきます。

LINE BOT で検索

LINE メッセージを送信すると
メッセージの検索結果 10 件がカルーセルメッセージとして表示されます。
LINEBOTLocationResult

LINE リッチメニューから位置情報を送信すると
位置から近い飲食店を 10 件がカルーセルメッセージとして表示されます。
LINEBOTextResult

Web アプリで検索

飲食店をクリックすると詳細情報画面が表示されます。
LINEBOWebDetail

上部の検索ボックスからキーワードを入力すると、キーワードに応じた飲食店が 50 件表示されます
LINEBOWebTextResult

右上のボタンで詳細検索ウインドウが表示されます。
ここでは「ジャンル」「エリア」「予算」からフィルター可能でおすすめ順等のソートも指定可能です。
適用ボタンを押すと条件に応じた飲食店が 50 件表示されます。
LINEBOWebFilterSort

さらに最下までスクロールすると次の 50 件が表示されます
LINEBOWebLoadmore

ソースコード

ソースコードは GitHub に公開しています。

バックエンド(Rails)

https://github.com/Takuty-a11y/SearchRestaurantLINEBot-Backend

  • Ruby@3.1.2
  • Ruby on Rails@7.0.4
  • Postsql@1.1
  • puma@5.0
  • rack-cors
  • line-bot-api
  • httpclient

フロントエンド(React)

https://github.com/Takuty-a11y/SearchRestaurantLINEBot-Frontend

  • 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 からログインできてユーザーごとのデータを持たせるようなこともできたらと考えています。

GitHubで編集を提案

Discussion

ログインするとコメントできます