シェア:
){kind=small}
マイケル・クランプはVonageのデベロッパーエクスペリエンスチームに所属し、コーダー、YouTuber、そして様々な.NETやクラウド/通信開発トピックについて頻繁に講演を行っています。彼は、開発者がそれぞれの利点を分かりやすく理解できるようにすることに情熱を注いでいます。
AI Studioを使ったWebhooksによるデータの送信とリクエスト
所要時間：2 分
ボンテージAIスタジオはローコード/ノーコードの会話型AIプラットフォームで、企業がVoiceやテキストを通じて複雑な顧客とのやり取りを処理できるよう支援します。AI Studioでバーチャルエージェントを作成すると、Webhookのようなサードパーティのソースからデータを取得する必要が出てきます。このブログポストでは、次のことを学びます：
AI StudioでRESTエンドポイントからWebhookのデータを取得する方法
データをパラメータとして保存する方法（後で使用するため）
データに対して操作を実行するための条件文の例
AI StudioでWebhookとどのようにやり取りするかを理解するために、銀行がWebhookから取得した番号とピン番号を照合することで顧客の身元を確認するシナリオを使用します。
以下は、サンプルのペイロードで返されるデータのスニペットです：
[
...
{
"id": 4,
"email": "michael.crump@vonage.com",
"phone": "14259999999",
"name": "Michael Crump",
"cc_balance": "76.31",
"pin": "1234"
}
]顧客が当行の電話番号にダイヤルすると、当行はその電話番号を使用する。 電話番号の正しい値を調べます。 ピンこのWebhookを通じて
この時点で、あなたはすでにAI Studioプロジェクトを作成しています。 インバウンドコールを使用するAI Studioプロジェクトを作成済みです。まだ必要な場合は、次のガイドに従ってください。 ガイド.から下にスクロールして ノードメニューから 統合までスクロールし ウェブフックを選択し、それをキャンバスにドラッグ・アンド・ドロップします。
integrations.png
新しく作成したWebhookイベントをクリックし、エンドポイントURLを入力します。
電話番号に基づいてクエリーするので、以下のハードコードされたURL（特定の電話番号を指す）を使用します： https://my-json-server.typicode.com/mbcrump/ai-studio-api/customers?phone=14259999999.これを追加したら テストリクエストを押してください。
チャットボット・テスターについてもっと知りたい方は をクリックしてください。.
test-webhook-1.png
ステータスが200であれば、リクエストは正常に返されたことになります。 レスポンスに、このユーザーの電話番号（ハードコードされたもの）に基づいて返された情報を見ることができます。
このデータはクエリURLにハードコードされていますが、AI Studioは呼び出された番号に基づいてどのようにこの情報を渡すのでしょうか。ここで、定義済みの システムパラメータと呼ばれる caller_phone_number、を使用します。
system_parameters.png
このダイアログは $を押し、使用したいシステム・パラメータを選択することでこのダイアログを呼び出すことができます。これでURLは https://my-json-server.typicode.com/mbcrump/ai-studio-api/customers?phone=$CALLER_PHONE_NUMBER.
完了したら 保存して終了.
webhook-with-phone-number.png
今WebHookをテストしようとすると、200のステータスコードが返ってきますが、レスポンスの中にはデータはありません。
no-data-returned.png
この問題は 設定アイコンをクリックして 発信者電話番号を指定します。
setting-system-parameters.png
ここで リクエストを再送するを押すと、以下のように適切なレスポンスが返ってくる。
successful-response.png
AI StudioからWebHookを呼び出してデータを返すことができるようになったので、次のように使用します。 パラメータを使用して、ユーザーの入力から特定の情報を抽出して利用します。例えば、ユーザーの情報（暗証番号やAccount残高など）を収集するには、後でアクセスできるように情報を保存するパラメータを定義する必要があります。
作成 作成するにはをクリックします。 プロパティ次に パラメータ.
parameters-selection.png
の最初の行をクリックしてパラメータを追加します。 カスタムパラメータテーブルの最初の行をクリックしてパラメータを追加します。
ここに4つのパラメータを追加して、顧客に属するPIN、顧客が入力したPIN、顧客の名前、PIN番号の入力に成功した場合のAccount残高を保存する必要がある。
| Name | Entity Type |
|---|---|
| pin_number | @ sys.number |
| input_number | @ sys.number |
| name | @ sys.any |
| balance | @ sys.number |
完了すると、画面は以下のようになるはずです：
parameters.png
プレス 閉じるを押してください。
をクリックしてください。 ウェブフック1をクリックし レスポンスマッピング.ここで、最初の オブジェクトパスを [0][name]を入力し パラメータという名前で作成した 名前.
response-mapping.png
残金を回収する 差額そして 暗証番号を集めます。
追加後、画面は以下のようになるはずだ：
response-mapping-1.png
完了したら 保存して終了.
を使用します。 入力を収集するノードを使用します。このノードを 会話メニューからノードをドラッグ＆ドロップします。
collect-input.png
については パラメーターには input_numberを使う。プロンプト プロンプトには、"Enter your four-digit pin number to access your account." などと入力する。
parameter-input-number.png
次に ウェブフック1を Collect Input 1ノードに接続します。
connect-webhook-collect-input.png
をドラッグ＆ドロップする。 条件ノードを 会話メニューから条件ノードをドラッグ＆ドロップする。ノートの中の "Default "をクリックして 条件を作成.
以下に示すように、以下の条件を作成します。 入力番号が PINと一致するかどうかをチェックする条件を作成します。
condition-req.png
完了したら 保存して終了.
ドラッグ＆ドロップであと2つ 会話会話ノードをキャンバスにドロップします。その際 スピーク2ノードにメッセージを入力します、 Verification Successful Welcome $name. Your balance is $balance.ここで $nameは先ほど定義したパラメータです。
speak-2-node.png
について スピーク3というメッセージを入力します。 $nameは先ほど定義したパラメータです。入力が完了したら、Enterキーを押し、忘れずに 保存して終了.
最後に 終了コールノードを追加する。
を接続する必要があります。 コンディション1(新しい条件）を スピーク2と 条件1(デフォルト）を スピーク3.次に スピーク2と スピーク3を 通話終了1ノードに接続する。
final-result.png
を押す テスターボタンを押し、次に インバウンドコールを選択し、次に チャットを開始.初期パラメータを設定する必要があります。 の初期パラメータを設定する必要があります。に設定する必要があります。 14259999999.
set-initial-parameters.png
テスターツールを再実行する場合、4桁の数字（1234など）を入力すると、バーチャルエージェントはあなたの 名前と 口座残高を返します。 db.jsonファイルから見つかった口座残高が返されます。
tester-chat-completed.png
すごい！Webhookの実装に成功し、返されたデータを使ってロジックを作成しました。
次はあなたの番です。アプリケーションを拡張する方法はいくつかある：
PINが見つからない場合のインスタンスのロジック
認証トークンなどのセキュリティ目的のためのWebhook認証。
失敗した場合の最大再試行回数
何を待っている？AIスタジオ AI Studioにアクセスしてください。
ご質問やフィードバックがありましたら Vonage開発者向けSlackに参加するか ツイッターをお送りください。また次回もお楽しみに！