Bot Creation in Azure

Log in to your Azure account and create a new service name: Web App Bot (Figure 19-1).

On creating a new Bot service, you must provide some information, such as a bot name, subscription, resource group, location, and so forth. One of the main fields that you have to choose at the start is Bot template. The default option is Basic (C#). In our scenario, we are going to change the default option to Form, which helps us to create a bot application to guide end users.

As you can see in Figure 19-2, the Form option should be selected.

After completing the bot application, the resulting services have three main categories: Bot Management, App Service Setting, and Support and Troubleshooting. First, check the output of the created bot. Go to Bot Management ➤ Test in Web Chat.

To see the default result of Bot Framework, click Test in Web Chat and write Hi. The result will be shown as “Welcome to the simple sandwich order bot!” Then list the sandwich option (Figure 19-3).

Under the Bot management section, the first option is Build, which provides all the source code for creating a bot framework. The first option is Open Online Code Editor. Using this option, developers are able to see code in the online code editor.

As you can see in Figure 19-4, under Online code editor, the code behind the bot is shown.

To see the code, click Open online code editor. The code for the Web App bot framework will be shown (Figure 19-5). As you can see in Figure 19-5, under the Model folder, in the Sandwiches file, the list of the dialog that users may ask is shown.

In addition in Figure 19-5, each of the questions and possibilities has been represented following an enumeration data structure. Each enumeration defines different questions that may occur in a dialog with end users. You can change online the questions and types of offerings in code. For example, you can change the Sandwiches option to Chicken, Ham, Lamb, Pork, or Veggie.

Changes to the file will be saved. You must build and compile them in a .NET application. To build the file, click Open Console and type “build.cmd” (Figure 19-6).

Now we have to test and check the changes in Test in Web Chat. Type “Hi” for the first time, after building the framework. As you can see in Figure 19-7, the first option regarding the sandwich type has been changed.

Now, when you choose the Ham option, the next sandwich option will be shown, which is a question about selecting the sandwich length. It is possible to embed the code in a channel, such as Facebook, Telegram, Skype, and so forth (Figure 19-8).

Click Channels and note the different ways to embed the bot in different channels. One of the ways is embed the bot in a web application is to use Get Bot Embed Codes. If you want to embed the code in an HTML page, you must copy the embed code and replace the secret code with the secret key shown in the windows above (Figure 19-9).

Now you can embed the code in any web site. In the following section I will show how to create a question-and-answer chatbot and embed it in another web site.

Question-and-Answer Chatbot

A question-and-answer (QnA) chatbot can be used for any web site, to guide users. The procedure for creating a chatbot is the same as that followed in the previous section. First, we create a Web App Bot service and choose the Question and Answer bot template (Figure 19-10).

By creating the QnA chatbot, as shown in Figure 19-10, we must test itin Test in Web Chat. By testing the chatbot, you will receive an error message (Figure 19-11) asking you to set up some parameters, such as QnAKnowledgebaseId, QnAAuthKey, and QnAEndpointHostName.

To set up these parameters, we must create a QnA Maker service in Azure. In your Azure account, set up the QnA Maker service (Figure 19-12).

After creating QnA Maker in Azure, you must set up a knowledge database [5]. Using your Azure account, log in to the qnmaker.ai web site (Figure 19-13).

Click the Create a Knowledge Base at the top of the page (Figure 19-13). The first step is to create a QnA service (as = in the last section). The second step is to connect the knowledge service to the QnA component in Azure. The third step is to choose the related Azure Directory ID, Azure Subscription Name, and Azure QnA Service. Then you must choose a name for the knowledge base (Figure 19-14).

Next, we have to upload some knowledge base as a URL or in a file format (.et, .pdf, .doc, .docx, .xlsx). The file contains some frequently asked questions (FAQ). I have created a word file that contains some FAQs for a conference (Figure 19-15).

Now you must upload the file to the web site and create the knowledge base (Figure 19-16).

After creating the knowledge base, you can extend the knowledge base questions, by clicking Add QnA Pair (Figure 19-17). In addition, it is possible to add more questions and more answers.

After uploading and adding the question, you must “Save and train” the knowledge base. After training the model, click Test. Type “Conference,” and the knowledge base returns the result (Figure 19-18).

After testing the knowledge base, we must publish it. After publishing the knowledge base, an HTTP request will build. The created request contains all the required information, such as the knowledge base ID, end point link, and authentication key (Figure 19-19).

These parameters can be viewed in Figure 19-11. In webappqnabook (Figure 19-20), click Application Settings and fill the parameters with HTTP Request parameters (Figure 19-20).

Now we have to test the chatbot. Click Test in Web Chat and type “Conference.” The output will be displayed in the test window (Figure 19-21).

You can embed the questions and answers on any page and channel. In this example, this chatbot has been embedded in the conference web site, to guide users. To embed the chatbot in the web site, we must get the embed code. To get the embed code, follow the same procedure related to Figure 19-9.

Next, copy the code and put it in the web page (Figure 19-22).

<iframe src='https://webchat.botframework.com/embed/webappqnabook?s=YOUR_SECRET_HERE'></iframe>

Test the code, and you will see the chatbot on the web page (Figure 19-23).

Summary

In this chapter, the general procedures for creating a chatbot were explained.

References