Creating a Web Chat App

The course is part of this learning path

Contents

keyboard_tab
Creating a Chatbot on Azure
3
QnA Maker4m 44s
7
play-arrow
Start course
Overview
DifficultyIntermediate
Duration24m
Students231

Description

Overview

The ‘Building a Chatbot on Azure’ course will allow team members to learn how to automate basic support tasks by using chatbots to answer typical questions about their products and/or services.

In this course, you will learn to create a chatbot to answer support questions about specific products and services. Along with this, you will learn how to combine the Azure Bot Service and Azure QnA Maker and to add speech input and output capabilities to help customers on mobile devices and those with impaired sight.

This course is made up of 5 lectures that will require some previous knowledge of Azure and coding.

Learning Objectives

  • Create and configure an Azure QnA Maker knowledge base
  • Create an Azure Bot Service chatbot that answers questions
  • Enable speech recognition and synthesis on an Azure chatbot

Intended Audience

  • Those interested in artificial intelligence services on Azure, especially chatbots

Prerequisites

  • Previous experience using Azure
  • Previous experience with writing code

Resources

The GitHub repository for this course is at https://github.com/cloudacademy/azure-recommendation-engine.

Transcript

The Web Chat that we used to test the bot isn’t something that other users can access, so we need to create our own.

 

Go back to your bot in the Azure portal. Then click “Channels”. This is where you configure the communication channels for your bot. You can configure channels so users can interact with the bot using apps like Skype, Facebook Messenger, or even email.

 

You’ll see that it has already created a “Web Chat” channel for you, which makes your job a little easier. Click “Edit”. You’ll see that it has a couple of secret keys and then some code that you can embed in a web page. When you add this code to a web page, you need to put one of the secret keys here so it can authenticate with the chatbot.

 

Now we just have to find a place to put this code. One option would be to start up a web server on your desktop or local server and add a page there, but let’s take advantage of Azure App Service instead. We could create a new web app, but since we already have one running for our QnA service, let’s just piggyback on that one. This probably wouldn’t be a good idea if you were creating a real customer-facing web chat, but it’ll be fine for demo purposes.

 

Open up your QnA service. I’m going to bring up the portal in another tab so I’ll still have the bot configuration open too. I called it “qnaforbot”, so I’ll click on that. Make sure you click on the one that says “App Service” next to it rather than “Cognitive Services”.

 

Now, to add a web page to this app service, scroll down to the “Developer Tools” section of the menu and open the “App Service Editor”. Click “Go”.

 

The list of files is on the left. There’s only one right now called “hostingstart.html”. This is what comes up by default when you go to this website. I’ll show you what it looks like. If you go back to the previous tab and go to the overview, you’ll see the URL for its website. Click on it to bring it up. This is the hostingstart.html page. It’s the generic page that comes up until you put in your own index.html.

 

OK, so let’s go back to the editor and create a new page. Right-click and select “New File”. I’m going to call it test.html because this is just going to be a simple test. Now go back to the bot channels and copy the embed code. Paste it in the test.html file. Then click “Show” for the first secret key, highlight it, copy it, and paste it here.

 

Alright, you’re probably thinking that this isn’t a proper HTML page. That’s true, but it’ll still work in most browsers, and I’d rather not bore you with typing the other tags, so let’s just leave it at that for our test.

 

The editor automatically saved the changes, so now go back to the website and add “/test.html”. Great! That one line of code actually brought up a little chat box. It’s a bit small, of course, but it’ll still let us test our connection to the bot. Type “languages”. You’ll have to scroll up to see the answer. Yes, it was able to talk to the bot.

 

We could make this chat box look nicer, but we’ll take care of that in the next lesson when I show you how to get your bot to support speech. So if you’re ready, then go to the next video.

About the Author

Students14155
Courses41
Learning paths22

Guy launched his first training website in 1995 and he's been helping people learn IT technologies ever since. He has been a sysadmin, instructor, sales engineer, IT manager, and entrepreneur. In his most recent venture, he founded and led a cloud-based training infrastructure company that provided virtual labs for some of the largest software vendors in the world. Guy’s passion is making complex technology easy to understand. His activities outside of work have included riding an elephant and skydiving (although not at the same time).