トレタ開発者ブログ

飲食店向け予約／顧客台帳サービス「トレタ」、モバイルオーダー「トレタO/X」などを運営するトレタの開発メンバーによるブログです。

AmazonConnectのリアルタイムダッシュボードを作る話

本記事はトレタアドベントカレンダー2020、21日目の記事です。

こんにちは、フロントエンドエンジニアの北川です。 去年の記事を振り返ってみるとリングフィットアドベンチャーを始めた時期でしたが、 一年越しでクリアして今はFitBoxing2へ移行しました。

はじめに

自分は主にトレタCCという飲食店の電話代行を行うコールセンターのシステムを普段作っているのですが、 今年はコロナの影響もうけていろいろありました。。 途中で方針変更をしたり、リリースを早めたりなど一年を振り返るとあるのですが、 今回はちょっと新しめの技術を取り入れてコールセンターのリアルタイムダッシュボードを作ったことを紹介します。 ただし、諸事情によりまだ完成してないのでほぼ作った話です。。

コールセンターにおけるダッシュボード

トレタCCではオペレーターが電話対応するフロアがあり、フロアには当日のコール数の推移などを表示するモニターがあります。 全スタッフが見れる状態にあることで、現状のコールの状況やスタッフの過不足などを共有するのに役立てています。 そこでダッシュボードをよりリアルタイム性をあげるために、新しいダッシュボードを作ることになりました。

ダッシュボードに表示させたい内容は、

  • リアルタイムな待呼数(電話をかけて待っている人数)
  • リアルタイムな応答可能オペレーターの人数
  • 当日のコール数

などです。

ポイントとしてはリアルタイムであることで、待呼数に関しては電話がかかってきてから最低でも1~2秒以内のタイムラグで画面に反映させる必要があります。

システム構成

コールセンターの電話にはAmazonConnectを利用しています。 なので、AmazonConnectの各種イベント、データを使い、それらをダッシュボードへ連携するように設計を行いました。

設計のポイントとしては、

  • システム間を疎結合に保つために、Amazon EventBridgeを利用しイベントを介してシステム間の連携を行っています
  • クライアント側にリアルタイムでデータを表示させるために、AWS AppSyncを利用しGraphQLのSubscrptionによるクライアントへのデータのプッシュを行っています。

f:id:mkitagawa-312:20201216224311p:plain

1. データの取得

AmazonConnectからデータを取得するには主に3つの方法があります。

  • AmazonConnectの問い合わせフローにLambda呼び出しを設定することで、着信時に電話番号、通話のIDなどが取得できます
  • AmazonConnectAPIのGetCurrentMetricDataから、現在の通話(キュー)の状態、オペレーターの状態が取得できます。今回はこれを1秒おきにポーリングして取得し、一度データベースにおいて差分の確認を行っています。
  • AmazonConnectにAmazonKinesisを設定することで、通話終了時に通話内容の詳細がKinesisの方に送られ、Transform用のLambdaを設定しておけばデータを抜き出すことができます

2. イベントの送信

取得したデータとイベントのタイプを設定してAmazon EventBridgeへイベントを送ります。 他システムはEventBridgeのイベントを購読する構成にすることで、システム間での密な連携を避けられます。また、連携するシステムが増えても購読側が増えるだけなので、配信側への変更は不要となります。

3. ダッシュボードシステムでの表示

  1. EventBridgeでイベントが送られると、購読しているLambdaが発火します。
  2. Lambdaの方で集計を行い、集計数をDynamoDBに更新します。
  3. DynamoDBにAppSyncが設定してあるため、DynamoDBの変更を検知し、GraphQLのエンドポイントに変更が送られます。
  4. クライアント側のReactアプリケーションがGraphQLのAPIを購読しているので、変更があれえばReactのコンポーネント側に変更がかかり画面に反映されます。

この部分の仕組みは一見実装が大変そうに見えますが、AWS Ampliftyを使うことで非常に簡単に構築することが可能です。

AWS Amplifyとは

AWS Amplify は、モバイルとウェブのフロントエンドデベロッパーが、安全でスケーラブルなフルスタックアプリケーションを構築しデプロイできるようにする、AWS による製品およびツールのセットです。Amplify を使用すれば、アプリケーションのバックエンドを数分で設定し、わずか数行のコードでそれをアプリケーションに接続できます。そして、3 ステップで静的なウェブアプリケーションをデプロイできます。AWS Amplify で迅速な市場投入を実現しましょう。

こちらがAWS Amplifyの説明ですが、一言でゆうとFirebaseのAWS版です。

  • CLIのコマンドからサーバーアプリケーションの雛形がつくれる
  • テーブルのスキーマを設定すればDBも作ってくれる
  • GraphQLサーバーも作れるし、クエリも作ってくれる
  • クライアントアプリケーション(Reactなど)の雛形も作ってくれる
  • デプロイコマンドを実行すればAWS環境に一発でデプロイまでやってくれる

ということで今回はAWS Amplifyを使うことでダッシュボード側のシステムはさっと作ることが出来ました。 プロトタイプを作る、小さいアプリケーションをシュッと作りたい時にはAWS Amplifyは良い手段だと感じたので今後も使っていこうと思います。

おわりに

トレタではエンジニアを積極的に募集しています！

自分が担当しているトレタCC事業でもエンジニアを募集していますので、気になった方はまずは気軽に遊びにきてください！

© Toreta, Inc.

Powered by Hatena Blog