OutSystemsアプリケーションにOutSystems.AI Chatbotコンポーネントを設定して使用する

Last updated
Save as PDF

チャットボットはコミュニケーションの最初の接点となり、顧客にサポートを提供して、効率性と顧客満足度の向上を実現します。OutSystems.AI Chatbotコンポーネントを使用して、Webアプリケーションに独自のコンポーネントを作成できるようになりました。

前提条件:

Azureアカウントを作成します。
Azure PortalでWeb App Botリソースを作成します。
OutSystems.AI Chatbotとその依存関係をForgeからダウンロードし、環境にパブリッシュします。

アプリケーションでChatbotブロックを使用する

アプリケーションでChatbotブロックを使用するには、以下の手順を実行します。

［Manage Dependencies］に移動し、ChatbotWebを選択して依存関係として追加します。
Chatbot Webブロックを追加する画面にドラッグします。
Webブロックの以下の入力フィールドに入力します。
- DirectLineSecret – Azure PortalのWeb App Botリソースの［ボット管理］にある［チャンネル］に移動し、各アイコンからDirect Lineチャネルを追加すると、秘密鍵が2つ表示されます。そのいずれかをこのフィールドに追加します。
- BotName – チャットUIに表示される名前。
- WelcomeMessage – チャットに表示される最初のメッセージ。
- IsInline – 画面内のチャットボットUIの表示方法をブーリアン値で指定します。
- StartsClosed - モーダル内でチャットウィンドウ開始時に開くか閉じるかを定義します。
Chatbot Webブロックのプレースホルダのアイコンをカスタマイズします。
パブリッシュして表示結果をテストします。チャットボットとやりとりすることで、Azureボットと適切にリンクされているかどうかも確認できます。

ボットのレスポンスのロジックを作成する

ボットのレスポンスのロジックを作成するには、以下の手順を実行します。

Service Studioで新しいWebアプリケーションを作成します。Azure Bot Webhookテンプレートを選択して、モジュールを作成します。
モジュールをパブリッシュします。パブリッシュしたモジュールを、チャットボットを追加するアプリケーションに移動するのが理想的です。
Service Centerで、［Factory］タブの［eSpaces］に移動し、AzureBotWebhookテンプレートに基づいて作成したモジhttps://docs.microsoft.com/en-us/azure/cognitive-services/text-analytics/language-support#language-list-and-statusュールを検索します。
［Site Properties］タブに移動し、MicrosoftClientIdおよびMicrosoftClientSecretをWeb App Botリソースの資格情報に設定します。MicrosoftClientIDは、Azure Portalの［設定］タブの［Microsoft App ID］に表示されます。MicrosoftClientSecretは、［Microsoft App ID］の横にある［管理］ボタンをクリックすると表示されます。このページの［値］にあるクライアントシークレットを表示およびコピーするため、新しいキーを生成する必要がある場合があります。
Webhookテンプレートに基づいて作成したモジュールの［Logic］タブに移動し、Integrationsフォルダの下にあるPostMessage RESTサービスを選択して、ロジックフローのコメントに従います。
GetResponseMessageサーバーアクションで、ボットのレスポンスのロジックを追加してカスタマイズします。以下の例は、天気を予測するボットのロジックのカスタマイズ方法を示しています。
［Logic］タブの［Integrations］に移動し、［MessagingWebhook_V1］を右クリックして、［Open Documentation］をクリックします。ブラウザのタブが開き、RESTサービスの詳細が表示されます。
ブラウザのタブからサービスのリクエストURLをコピーします。
Azure Portalに移動し、該当するWeb App Botリソースを選択します。
リソース設定に移動し、コピーしたリクエストURLを［Messaging Endpoint］フィールドに貼り付け、設定を保存します。

アプリケーションでChatbotAdvancedブロックを使用する

ChatbotAdvancedブロックを使用して、ビジネスニーズに応じてカスタマイズされたチャットボットを作成します。独自のUIを作成することができるほか、ChatbotAdvancedブロックで提供したロジックを含む既存のカスタマイズ済みUIを使用することができます。

アプリケーションで［Manage Dependencies］に移動して、ChatbotWebを選択し、依存関係としてChatbotAdvancedブロックとSendMessageサーバーアクションを追加します。
［Manage Dependencies］ウィンドウでAzureBotFrameworkConnectorを検索し、ストラクチャに移動して［Message］を選択します。
ChatbotAdvanced Webブロックを画面にドラッグします。
DirectLineSecret入力フィールドに、Direct Lineチャネル構成から取得した値を入力します。
OnNotifyで、［New Screen Action］を選択して次の2つのローカル変数を画面に追加します。
- Textデータ型のConversationId
- ChannelAccountデータ型のChannelAccount
OnNotify画面アクションで、Run Server Actionを追加して「NotifyGetMessage」に設定します。
JSON Deserializeを追加し、JSON文字列としてNotifyGetMessageからのメッセージ出力を設定し、データ型としてMessageストラクチャを設定します。
Ifを追加し、条件を「JSONDeserializeMessage.Data.Text <> ""」に設定します。IFを右クリックしてコネクタを入れ替えます。
IfのFalseブランチにAssignを追加します。次のように割り当てを追加します。
- ConversationId = JSONDeserializeMessage.Data.Conversation.Id
- ChannelAccount = JSONDeserializeMessage.Data.From
IfのTrueブランチで、ListAppendを追加して受信メッセージをメッセージリストに追加します。
画面に新しい画面アクションを追加し、画面アクションのロジックフローで、Chatbot WebコンポーネントからSendMessageサーバーアクションを追加します。
SendMessageに、次の入力パラメータを入力します。
- ConversationId: 先ほど作成したConversationIdローカル変数
- DirectLineSecret: ブロックで使用したものと同じ値
- From: 先ほど作成したChannelAccountローカル変数
- TextMessage: エンドユーザーがボットに送信したメッセージ