このガイドでは、OutSystemsアプリにチャットボットUIブロックを追加する手順について説明します。機能的なチャットボットにするには、レスポンスを処理するロジックも必要です。「アプリのFAQチャットボットを作成する」では、FAQボットの場合の手順について詳細に説明しています。高度なユースケースを実装する場合は、「高度なロジックを作成してカードで応答する」をご覧ください。

チャットボットUIブロックをアプリに追加するには、以下の手順を実行します。

1. 新しいリアクティブWebアプリを作成し、同じタイプのモジュールを追加します。既存のリアクティブWebアプリを使用することもできます。

2. ［Manage Dependencies］ダイアログを開きます（Ctrl+Qを押します）。「Chatbot」を検索します。プロデューサペインで［Chatbot］を選択し、要素ペインで要素をすべて選択します。［Apply］をクリックします。

   

   これにより、UIを作成してチャットボットを構成するための要素がChatbotコンポーネントから追加されます。

3. モジュールに画面を追加します。既存のアプリを使用する場合は画面を開きます。

4. チャットボットブロックを画面に追加します。［Interface］の（アプリ） > UI Flows > Chatbot > Componentsに移動します。Chatbotブロックを画面にドラッグします。画面にチャットボットのプレビューが表示されます。

   

5. Chatbotコンポーネントブロックを選択します。プロパティで、DirectLineSecretを確認します。Azureから取得したDirect Lineの鍵を引用符で囲んで貼り付けます。

   

   Direct Lineシークレットの値は、Azure Bot Serviceから取得します。この手順に至るまでの状況に応じて、以下のいずれかを実行する必要があります。

   • チャットボットサービスや関連するリソースをすでに作成している場合は、AzureからDirect Lineシークレットを取得する方法をご覧ください。
   • チャットボットサービスや関連するリソースをまだ作成していない場合は、「はじめに: アプリのFAQチャットボットを作成する」の手順をご覧ください。

6. アプリをパブリッシュし、チャットボットをテストします。チャットウィンドウにメッセージを入力します。チャットボットからの応答があった場合、チャットボットは正常に動作しています。

   

   これで、さらに複雑なチャットボットの開発を開始できるようになりました。

   ようこそメッセージなどのその他のパラメータを構成する方法の詳細については、チャットボットのリファレンスをご覧ください。