twilio contact center
1.0.0
モダンなコンタクトセンターのエッセンスは、複数のチャネル（音声、ウェブチャット、ビデオ、電子メール、ソーシャルメディアなど）で顧客にサービスを提供し、チャネルをシームレスに移動できるようにし、最も重要なことに会話のコンテキストを維持できるようにすることです。
Twilioコンタクトセンターデモは、近代的なコンタクトセンターを構築するための参照アーキテクチャです。デモの焦点は、Twilioプラットフォームベースのコンタクトセンターと必要なさまざまなバックエンドコンポーネントを構築する方法を示すことです。
注： UXの観点から基本的な作業を行っており、多くの機会がそれを改善するために残っています。デモ目的で設計されており、セキュリティチェックを個別にチェックしていません。
このアプリケーションは、そのまま提供されます。 Twilioは公式にサポートしていません。
顧客はオンラインコールリクエストを記入します - >サーバーに送信されたフォーム - > [TaskRouterで作成されたタスク] - > [利用可能なエージェントとマッチングエージェント]を見つけます - >エージェントは予約を受け入れ、顧客をダイヤル（PSTN） - > [顧客をエージェントに接続（webrtc）に接続します
カスタマーコールTwilio電話番号 - > Twilio要求Webhook->サーバーはIVRのTwiMLを生成します - >発信者はIVRオプションを選択します - > TaskRouterのタスクは作成されました - >利用可能なエージェントを見つけます - >エージェントは予約を受け入れます - >顧客をエージェントに接続（webrtc）（webrtc）
顧客はオンラインのWebチャットリクエストフォームに記入します - >サーバーに送信されたフォーム - > [タスクルーターのタスク]が作成されました - >利用可能なエージェントとマッチングエージェントを見つける - >エージェントは予約を受け入れます - >顧客とエージェントの間のチャットを開始します
顧客はビデオ通話リクエストフォームに記入します - >サーバーに送信されたフォーム - >タスクルーターとビデオルームのタスク作成 - >利用可能なエージェントとマッチングエージェントを見つける - >エージェントは予約を受け入れます - >エージェントがビデオルームに参加します
運用上のコンタクトセンターメトリックのリアルタイムディスプレイ（例：平均コールハンドル時間、エージェントの生産性、コールメトリック、タスクルーターの統計など）。 https：//github.com/ameerbadri/twilio-taskrouter-realtime-dashboardをご覧ください
以前にTwilioを使用したことがない場合は、ようこそ！ Twilioアカウントにサインアップする必要があります。
Twilio内で個別のプロジェクトを作成し、そのプロジェクトを使用してこのアプリをインストールすることをお勧めします。
注：このデモを完全に体験するために、アップグレードされたTwilioアカウントを持っていることをお勧めします。
インストールを開始する前に、Twilioアカウントポータルから次の変数を収集する必要があります。
TWILIO_ACCOUNT_SIDTWILIO_AUTH_TOKENTWILIO_WORKSPACE_SIDアカウントSIDおよびAUTHトークンについては、ここをクリックしてください：https：//www.twilio.com/console
電話番号を購入するか、既存の電話番号を使用します（アプリケーションは後で番号を構成します）
新しいTwilio TaskRouterワークスペースを作成し、カスタムテンプレートを選択します。
Twilio APIキーSIDおよびTwilio APIキーシークレットについては、ここをクリックしてください：https：//www.twilio.com/console/dev-tools/api-keys
TWILIO_API_KEY_SIDTWILIO_API_KEY_SECRETWebチャットの場合、Twilioプログラム可能なチャット環境変数を設定する必要があります。
TWILIO_CHAT_SERVICE_SIDエージェントUIは複数のタスクの取り扱いを同時にサポートしていないため、すべてのタスクは同じタスクチャネルで1つの同時タスクの容量を持つルーティングされます。詳細については、TaskRouterマルチタスクを確認してください
このプロジェクトは、コードソフトウェアツールとしてオープンソースインフラストラクチャであるTerraformを使用して、Herokuのすべてのdepencendiesを使用して展開できます。
HerokuのAPIキーを作成し、Heroku Platform APIガイドを確認してください。
Heroku APIキーとメールアドレスをterraform.tfvarsに追加します。
Terraform構成ファイルを初期化して実行します
terraform init
Terraformをインストールしていない場合は、Terraformを開始します。
セクション構成変数にリストされているtwilio変数をterraform.tfvars変数ファイルに追加します。
インフラストラクチャの説明ファイルterraform_heroku.tfにHerokuアプリケーション名を設定します
実行計画を作成します
terraform plan
実行して、Herokuにプロジェクトをインストールします
terraform apply
インストールが完了したら、 https://<your-application-name>.herokuapp.com/setupとアプリケーションを設定して構成してください。デモの概要はhttps://<your-application-name>.herokuapp.comでアクセスできます。
これにより、アプリケーションとすべての依存関係がHeroku（ログインが必要）にインストールされます。インストールの一環として、Herokuアプリは環境変数の構成を説明します。次のボタンをクリックして、アプリケーションを展開してください。
インストールが完了したら、 https://<your-application-name>.herokuapp.com/setupとアプリケーションを設定して構成してください。デモの概要はhttps://<your-application-name>.herokuapp.comでアクセスできます。
Google Cloud SDKをダウンロードしてインストールします。
新しいプロジェクトを作成します
gcloud projects create <your-project-id> --set-as-default
プロジェクトでアプリエンジンアプリを初期化し、その地域を選択します。
gcloud app create --project=<your-project-id>
app.yaml変数ファイルにセクション構成変数にリストされているtwilio変数を追加します。
次のコマンドを実行して、アプリエンジンにアプリを展開します。
gcloud app deploy
アプリケーションを表示するには
gcloud app browse
インストールが完了したら、 https://<your-project-id>.appspot.com/setupを開き、アプリケーションを設定してください。デモの概要はhttps://<your-project-id>.appspot.comでアクセスできます。
リポジトリをフォークしてクローンします。次に、依存関係をインストールします
npm install
ファイルから環境変数をロードする場合は、DotenVパッケージをインストールして、ローカル環境変数を処理します。
npm install dotenv
ルートディレクトリで「.env」というファイルを作成し、次をapp.jsの上部に追加します
require('dotenv').config()
デモを実行するには、環境変数リストを構成変数に設定する必要があります]（＃Configuration-Variables）
アプリケーションを開始します
npm start
デモを使用する前に、 http://<your-application-name>/setupを開き、アプリケーションを構成してください。デモの概要はhttp://<your-application-name>でアクセスできます。 Process.env.portが設定されていない場合、アプリケーションはポート5000で実行されていません。
デモをローカルに実行している場合は、TwilioにはWebhooksに公開されたアドレスが必要であり、セットアッププロセスがTwilioでこれらを登録する必要があることを覚えておいてください。そのため、http：// localhost：5000/を押すだけでなく、ngrokのようなものを実行する必要があります。 Ngrokから新しいアドレスを取得すると、更新されたアドレスをTwilioに登録するためにセットアッププロセスを再実行する必要があります。
ngrokセットアップ
システムワイドインストール
ngrokからダウンロードしてインストールします
npm npm install ngrok -g
ngrokを実行します（それに応じて.env更新でポートが定義されている場合）
./ngrok http 5000
プロジェクトのみインストールします
ngrokパッケージをインストールします
npm install ngrok --dev
app.jsの上部に以下を追加します
const ngrok = require('ngrok')
const ngrokUrl = async function () {
const url = await ngrok.connect((process.env.PORT || 5000))
console.log('ngrok url ->', url)
}
app.jsでapp.listenのngrokurlに電話して、サーバーのスピンアップでngrok URLをログに記録します
ngrokUrl()
注： Google Chromeでは、WeBRTCを介して電話をかけるために安全なHTTPS接続が必要です。 NgrokなどのHTTPSをサポートするトンネルを使用して、トラフィックをWebサーバーに転送できます。
貢献は歓迎され、一般的に受け入れられています。些細な修正ではない場合は、PRの前に提案された変更を説明する問題を提出することをお勧めします。これにより、メンテナーはガイダンスを提供し、重複した作業を行うことを避けることができます。
変更は、一般的なプロジェクトコードスタイルを順守する必要があります。
# please run this before "git commit"
npm run lint
# try automatic fix
./node_modules/.bin/eslint controllers --fix
./node_modules/.bin/eslint public --fix
他の貢献者やレビュアーの生活を楽にするために、同じPRであなたのコミットを再ゼロにしてください
git rebase -i HEAD^^^^^^
# then squash or fixup your shards
# and force push into your fork
git push origin [YOUR BRANCH] -f
Twitter -@mdamm_deで私をフォローできます
mit
