Skip to main content

 

OutSystems 11オンラインヘルプ

 

 

OutSystems

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

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

前提条件:

  1. Azureアカウントを作成します。
  2. Azure PortalでWeb App Botリソースを作成します。

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

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

  1. アプリケーションで[Manage Dependencies]に移動し、ChatbotWebを選択して依存関係として追加します。

  2. Chatbot Webブロックを追加する画面にドラッグします。

  3. Webブロックの以下の入力フィールドに入力します。

    • DirectLineSecret – Azure PortalのWeb App BotリソースのDirect Lineチャネル構成ページから取得

    • BotName – チャットUIに表示される名前

    • WelcomeMessage – チャットに表示される最初のメッセージ

    • IsInline – 画面内のチャットボットUIの表示方法を指定するブーリアン値

  4. Chatbot Webブロックのプレースホルダのアイコンをカスタマイズします。

  5. パブリッシュして表示結果をテストします。チャットボットとやりとりすることで、Azureボットと適切にリンクされているかどうかも確認できます。

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

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

  1. Service Studioで新しいWebアプリケーションを作成します。Azure Bot Webhookテンプレートを選択して、モジュールを作成します。

  2. モジュールをパブリッシュします。パブリッシュしたモジュールを、チャットボットを追加するアプリケーションに移動するのが理想的です。

  3. Service Centerで、[Factory]タブの[Modules]に移動し、AzureBotWebhookテンプレートに基づいて作成したモジュールを検索します。

  4. [Site Properties]タブに移動し、MicrosoftClientIdおよびMicrosoftClientSecretをWeb App Botリソースの資格情報に設定します。

  5. Webhookテンプレートに基づいて作成したモジュールの[Logic]タブに移動し、Integrationsフォルダの下にあるPostMessage RESTサービスを選択して、ロジックフローのコメントに従います。

  6. GetResponseMessageサーバーアクションで、ボットのレスポンスのロジックを追加してカスタマイズします。以下の例は、天気を予測するボットのロジックのカスタマイズ方法を示しています。

  7. [Logic]タブの[Integrations]に移動し、[MessagingWebhook_V1]を右クリックして、[Open Documentation]をクリックします。ブラウザのタブが開き、RESTサービスの詳細が表示されます。

  8. ブラウザのタブからサービスのリクエストURLをコピーします。

  9. Azure Portalに移動し、該当するWeb App Botリソースを選択します。

  10. リソース設定に移動し、コピーしたリクエストURLを[Messaging Endpoint]フィールドに貼り付け、設定を保存します。

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

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

  1. アプリケーションで[Manage Dependencies]に移動して、ChatbotWebを選択し、依存関係としてChatbotAdvancedブロックとSendMessageサーバーアクションを追加します。

  2. ChatbotAdvanced Webブロックを画面にドラッグします。

  3. DirectLineSecret入力フィールドに、Direct Lineチャネル構成から取得した値を入力します。

  4. イベント処理のため、新しい画面アクションを2つ作成します。1つはInitializeを、もう1つはMessageReceiveを処理するためのものです。

  5. 次の2つのローカル変数を画面に追加します。

    • DLConversationデータ型のDLConversation
    • ChannelAccountデータ型のChannelAccount

  6. Initializeを処理する画面アクションに、Assignを追加します。各入力パラメータにローカル変数を割り当てます。

  7. MessageReceiveを処理する画面アクションで、ListAppendを使用し、受信メッセージを入力としてメッセージリストに追加します。

  8. 画面に新しい画面アクションを追加し、画面アクションのロジックフローで、Chatbot WebコンポーネントからSendMessageサーバーアクションを追加します。

  9. SendMessageに、次の入力パラメータを入力します。

    • ConversationId: 先ほど作成したDLConversationローカル変数
    • DirectLineSecret: ブロックで使用したものと同じ値
    • From: 先ほど作成したChannelAccountローカル変数
    • TextMessage: エンドユーザーがボットに送信したメッセージ

  • Was this article helpful?