カスタムのバーチャルエージェント連携の例

NICE CXoneは、プロキシトンネルのサンプルを開発しました。このカスタム連携の例をセットアップすることで、カスタムAI連携の仕組みについてより深く理解することができます。この例は、CXoneACDチャットを使ったカスタムのテキストバーチャルエージェント連携をシミュレートしています。

この例のサンプルコードは、実際の連携で使用するプロキシトンネルとは異なります。実際の連携では、プロキシトンネルはバーチャルエージェントのエンドポイントと通信するためにセットアップされます。サンプルコードは実際のバーチャルエージェントと通信するものではありません。その代わり、テストしたユーザーからの入力をエコーバックするように構成されています。そのため、テストウィンドウにHello chatbotと入力すると、Hello chatbotと返答されます。

統合例をセットアップするには、サンプルプロキシコードをダウンロードし、お使いの環境にインストールする必要があります。サンプルプロキシトンネルは、複数の異なるプログラミング言語で利用可能です。お客様のチームは、最も使いやすい言語を使用することができます。

カスタムバーチャルエージェント統合のテンプレート技術設計書（TDD）には、この統合例に基づく例が記載されています。TDDテンプレートの例は、カスタムバーチャルエージェント統合をよりよく理解するのに役立ちます。

このページの一部のリンクは、 CXoneのオンラインヘルプ以外のサイトを開きます。

必要条件

連携例をテストするには、以下のものが必要です：

  • お使いのコンピューターにインストールされた Studio。
  • サンプルコードZIPファイルをダウンロードしました。サンプルコードは以下の言語で提供されています：
    • C# .NET
    • Java
    • Node.js
    • PHP
    • Python
  • 使用するサンプルコードの言語のIDEとコンパイラの依存関係：
    • C# .NET：VS Codeなどのコードエディタ。
    • Java：VS Code Community、Jet Brains、Net Beans、Intelli J、Eclipseまたはその他。VS Codeエディタを使用する場合、Visual Studio Marketplaceのウェブサイトから、 Java Extension packをダウンロードし、インストールする必要があります。
    • Node.js：NPM.
    • PHP：VS Codeなどのコードエディタ。
    • Python：VSCodeなどのコードエディタ。
  • お使いのパソコンにインストールされたNgrok。インストールはこのサイトでご覧いただけます： https://ngrok.com/download。

これらの各タスクを指定された順序で実行します。

プロキシトンネルのエンドポイントをセットアップする

このAPIコールをlocalhostのポートで実行します。サービスが実行されるポート番号をコピーしてください。後のステップでこれが必要になります。ドロップダウンをクリックすると、利用可能な各言語のエンドポイント設定の説明が表示されます。

  1. ProxyTunnelExamples.zip のコンテンツを解凍します。

  2. コードエディタで、解凍したファイルの中のC#プロキシトンネルコードが含まれるフォルダーに移動してください。

    cd ProxyTunnel/examples/c#/ProxyTunnel

  3. Program.cs ファイルを開きます。このファイルには、コードが含まれています。

  4. Powershellを開き、以下のコマンドを実行します：

    dotnet run

  5. サービスが実行されているポート番号を覚えておいてください。次の例の画像では、ポート 8080で実行されています。

コードエディタを使って、プロキシトンネルのエンドポイントをセットアップすることができます。Javaコードエディタがない場合は、Javaファイルを実行できるApache Mavenなどのユーティリティを使用することができます。ここでは、両者の方法について説明します。

コードエディタを使う

VS Codeエディタを使用する場合、Visual Studio Marketplaceのウェブサイトから、 Java Extension packをダウンロードし、インストールする必要があります。この拡張パックでは、メイン関数の上に Run | Debugオプションを配置しています。

  1. ProxyTunnelExamples.zipファイルからコンテンツを解凍してください。
  2. コードエディタで、Javaプロキシトンネルのコードを含むフォルダーを開きます。Javaプロキシトンネルコードへのパスは、

    ProxyTunnel\examples\java\src\main\java\com\icx\javaproxytunnel

    です。

  3. メイン関数の最上部に表示される Runボタンを使用して、エンドポイントを実行します。このような感じに見えます。

    VSコードエディターでメイン関数の上に実行｜デバッグのオプションが表示されているJavaプロキシトンネルのコード： public static voice main (String[] args)。

  4. アプリケーションが初期化されます。ターミナルの出力の最上部にあるポートが何であるかに注意してください。以下の画像では、ポートが 8080となっています。

    プロキシトンネルが実行されているポート、8080（http）を表示するJavaのターミナル出力。

Javaユーティリティを使う

  1. 以下のユーティリティをインストールする：
  2. Javaプログラムをローカルで実行するために必要な環境変数をセットアップします：
    1. お使いのパソコンで、 アドバンスシステム設定または 環境変数を検索します。
    2. システムプロパティウィンドウの詳細タブで、 環境変数をクリックします。
    3. システム変数セクションで、 パス を選択し、 編集をクリックします。

    4. 各ユーティリティがインストールされている場所を参照して、MavenとJavaのbinフォルダーのための2つの新しいパスを作成します。例えば、パスは、

      C:\Program Files APACHE-Maven-3,8,6-bin APACHE-Maven-3.8.6bin

      C:\Program Files JAVA-18.0.2-bin

    になります。

  3. ProxyTunnelExamples.zipファイルからコンテンツを解凍してください。

  4. アプリケーションを初期化します： 

    1. Powershellまたはコマンドプロンプトを開き、ディレクトリをアプリケーションを含むフォルダーに変更します。例：

      cd ProxyTunnel\examples\Java

    2. 以下のコマンドを実行して、アプリケーションをコンパイルし、Mavenパッケージに変換します：

      mvn compile
      mvn package

      これにより、JARファイルが \targetというディレクトリに生成されます。

    3. 生成されたJARファイルを実行します。

      java -jar target/javaproxytunnel-0.0.1-SNAPSHOT.jar

    4. コマンドプロンプトウィンドウの初期化出力から、ポート番号をメモしてください。次の例では、ポートは 8080です。

      および、生成されたJARファイルを実行した結果の例。使用するポート番号が表示されます。

このタスクを完了する前に、ノードとNPMがコンピューターにインストールされていることを確認してください。

  1. ProxyTunnelExamples.zipファイルからコンテンツを解凍してください。

  2. コマンドプロンプトまたはPowerShellを開き、Node.jsのファイルのある場所に移動します。

    cd ProxyTunnel/examples/Nodejs

  3. Nodejsのコードフォルダーから、このコマンドを実行します：

    npm install

  4. エンドポイントを実行します。使用しているオペレーティングシステム用コマンドを使用します。

    Linux：

    export DEBUG='javascriptechoproxy:server'
    npm run start

    Powershellを使ったWindows：

    npm run devstart

  5. コマンドプロンプトウィンドウの初期化出力から、ポート番号をメモしてください。例えば、 8080などです。

このオプションを使用するには、コンピューターにPHPがインストールされている必要があります。PHPがまだインストールされていない場合、インストールするための2つのオプションがあります。

  • ソフトウェア管理ツールであるChocolateyを使用します。これは優先オプションです。ChocolateyでPHPをインストールするには、管理者としてPowershellを開き、以下のコマンドを入力します。

    choco install php

  • Windows PHPのウェブサイトから直接PHPをインストールします。

PHPをインストールした後、以下のステップでプロキシトンネルのexpointをセットアップします。

  1. ProxyTunnel_PHP.zip のファイルからコンテンツを解凍します。

  2. コマンドプロンプトまたはPowerShellを使用して、\PHPフォルダーに移動してください。

    cd ProxyTunnel/examples/php

  3. PHPフォルダーからこのコマンドを実行します：

    php -S localhost:8000

    アプリケーションは初期化され、ポート8000で実行されています。このポート番号を覚えておくと、後でセットアップするときに便利です。

  1. ProxyTunnelExamples.zipファイルからコンテンツを解凍してください。

  2. コードエディタで、proxy tunnel Python フォルダーを開きます。
  3. コードエディタのコンソールを使って、APIファイルを含むフォルダーに移動します。

  4. コードエディタのターミナルペインでまたはコマンドプロンプトを使用して、次のコマンドを使用してシステムにFlaskをインストールします：

    pip install flask

  5. このコマンドを使用して、プロキシトンネルを実行します：

    python echo-proxy-tunnel.py

    ターミナルウィンドウの初期化出力から、ポート番号をメモしてください。このポート番号を覚えておくと、後でセットアップするときに便利です。次の画像例では、ポートは 5000です。

    Pythonでプロキシトンネルを実行したときの出力の例。この例では、ポート番号は5000です。

プロキシトンネルのエンドポイントを公開する

プロキシトンネルのエンドポイントは、 CXoneがグローバルにアクセスできるように公開する必要があります。Ngrokを使用してエンドポイントを公開します。

  1. まだインストールしていない場合は、Ngrokをインストールしてください。

  2. コマンドプロンプトからこのコマンドでNgrokを起動します：

    ngrok http [port number]

    ここで、 [ポート番号]は、エンドポイントをセットアップする際にメモしたポート番号です。

  3. Ngrok が公開するサーバーURLと必要なAPIエンドポイントをコピーします。

    結果として公開されるURLを示している、プロキシトンネルのエンドポイントでNgrokを実行した結果の例。

    画像例では、公開されるURLは https://4db3-5-46-62-207.nrgok.ioです。これはWebhookのベースURLです。URLでどのエンドポイントを使用するかを決定します。後のタスクでtextbot Studioアクションを設定する際に使用するため、URLを保存します。

    言語 エンドポイント詳細
    C#

    サーバーは、 POST proxy/performbotexchange方式でバーチャルエージェントハブ のリクエストを承認します。お客様のWebhookのURLは：

    https://[base URL]/proxy/performbotexchange
    Java

    サーバーは、 POST api/proxy方式でバーチャルエージェントハブ のリクエストを承認します。お客様のWebhookのURLは：

    https://[base URL]/api/proxy
    Node.js

    サーバーは、 POST api/relay方式でバーチャルエージェントハブ のリクエストを承認します。お客様のWebhookのURLは：

    https://[base URL]/api/relay
    Python

    サーバーは、 POST relayExchangeResponse方式でバーチャルエージェントハブ のリクエストを承認します。お客様のWebhookのURLは：

    https://[base URL]/relayExchangeResponse
    PHP

    サーバーは、 POST proxy.php方式でバーチャルエージェントハブ のリクエストを承認します。お客様のWebhookのURLは：

    https://[base URL]/proxy.php

このセクションで説明するエンドポイントを決定するステップは、連携例のみに適用されます。独自のエンドポイントを作成する場合、組織のニーズを満たすものであれば何でもかまいません。

Studioにシンプルチャットのスクリプトをセットアップします

  1. このシンプルチャットのスクリプトをダウンロードします。
  2. TextBotExchangeExample.xml ファイルをお使いのコンピューターに解凍します。
  3. Studioで、 ファイル > ファイルからインポートの順にクリックし、抽出したファイルを選択し、 開くをクリックします。
  4. スクリプトを保存します。スクリプトにつける名前を覚えておきます。スクリプトを開いたままにします。後の作業で戻ることになります。

CXoneでチャットスキルやポイントオブコンタクト(PoC)を作成します

チャットスキル閉じた エージェントのスキル、能力、知識に基づいてインタラクションの配信を自動化するために使用されますとポイントオブコンタクト(PoC)閉じた 着信連絡先が電話番号やEメールアドレスなどの対話を開始するために使用するエントリポイント。を作成する必要があります。ポイントオブコンタクト(PoC)では、インポートしたスクリプトを呼び出します。これは、 CXoneがいかに、コンタクトをバーチャルエージェントにルーティングするかです。

  1. CXoneで、アプリセレクターをクリックして、選択します ACD 。
  2. コンタクト設定 > ACDスキルの順にクリックし、 チャットスキルを作成します。スキルには名前をつけ、 キャンペーンに割り当てる必要があります。サンプル統合に使用するキャンペーンを作成 しておくとよいでしょう。他のすべてのスキルオプションのデフォルトを承認することができます。

  3. コンタクト設定 > ポイントオブコンタクト(PoC)の順にクリックし、以下の設定でポイントオブコンタクト(PoC)を作成します。

    • メディアタイプ: チャットを選択します。
    • スクリプト:連携例で使用するためにインポートしたスクリプトの名前を選択します。
    • スキル:このタスクで作成したスキルの名称を選択します。

  4. ポイントオブコンタクト(PoC)を作成したら、詳細タブに表示されているポイントオブコンタクト(PoC)のURLをコピーしてください。ブラウザのタブに貼り付けます。このURLは、後のタスクでスクリプトをテストするために使用します。

    サンプルのプロキシトンネルをテストするために作成された連絡先の詳細タブ。スクリプトを呼び出すURLを表示するポイントオブコンタクト(PoC)フィールド。

TextbotExchangeアクションを設定する

このステップでは、CXoneサンプルのプロキシトンネルのエンドポイントと通信するように設定します。

  1. Studioで、スクリプトがまだ開かれていなければ、インポートしたサンプルを開きます。

  2. Textbot Exchangeアクションの1つをダブルクリックするとバーチャルエージェントハブが開きます。

    Textbot Exchangeアクションのアイコン。中にロボットの目が入っていて、上にアンテナがあり、その下にABCという文字がある、チャットバブルです。
  3. ボットの追加をクリックします。
  4. バーチャルエージェント(ボット)名を入力し、 カスタムExchangeエンドポイント を ボットプロバイダーとして選択します。
  5. 次へをクリックします。
  6. WebhookのURLを入力します。これは、プロキシトンネルのエンドポイントを公開した後に保存したURLです。
  7. 次へをクリックします。
  8. 音声ページの音声連携オプションで、テキストのみを選択し、次いで次へをクリックします。
  9. 「テスト+追加」ページで、歓迎のインテントで開始するをクリックします。必要に応じて、カスタムペイロードの送信など他のオプションをテストします。エラーがなければ、次のタスクに進みます。テストの結果がエラーになった場合は、これまでのタスクを精査し、プロキシトンネルのエンドポイントのセットアップと公開および バーチャルエージェントハブでの設定を検証してください。

チャットウィンドウからスクリプトをテストする

Textbot Exchangeアクションの構成をテストしている間に発生したエラーを解決したら、前のタスクでコピーした連絡先閉じた 着信連絡先が電話番号やEメールアドレスなどの対話を開始するために使用するエントリポイント。URLを使用してスクリプトをテストできます。

  1. Studioで、インポートしたサンプルスクリプトを開いてください。
  2. デバッグ > スクリプトのキャプチャ > 次のインスタンスのみ。
  3. 連絡先URLを貼り付けたブラウザのタブで、テキストを入力フィールドにメッセージを入力し、送信をクリックします。

  4. Studioで、トレース出力ウィンドウが開きます。メッセージを送信してスクリプトが応答すると、その進捗状況を表示します。

    Trace Output ウィンドウのメインペインで、アクションをクリックします。

    • 変数タブには、選択したアクションが完了したときにスクリプト内に存在するすべての変数が表示されます。また、スクリプトのその時点で各変数が持っている値も表示されます。
    • プロパティタブには、選択したアクションのプロパティが表示されます。アクションの現在の設定を確認するために使用することができます。
    Studioのトレース出力ウィンドウに、サンプルのチャットバーチャルエージェントスクリプトの冒頭からのトレース結果が表示されます。
  5. スクリプトに戻り、必要であれば変更します。
  6. アクションのオンラインヘルプにアクセスするには、キャンバス上でそのアクションを選択し、キーボードでF1を押してください。各アクションのオンラインヘルプページでは、スクリプトでアクションを使用する際のプロパティやその他の情報について説明しています。
  7. やり直す場合は、チャットの終了をクリックし、ブラウザウィンドウを更新してから、ステップ2からこの作業を繰り返してください。