Cognitive Services QnA Maker – Create Bot Client App

I wrote three articles of this series, and this article is the last one.
[Cognitive Services QnA Maker – Create knowledge base from online FAQ]
[Cognitive Services QnA Maker – Setting Azure Bot Service]
[Cognitive Services QnA Maker – Make embed code for Bot client app]

This article describes how to create a chatbot client app. Already created embed code for Bot client app at the article before, so this article describes create .NET core web app and embedding the embed code that created to the web app.

・Create .NET core web app and run

Create chatbot client app as ASP.NET core web app of ReactJS.NET because super-easy way to create app.

Create app project a folder at any place and launch the PowerShell then put command as web page above.

***> dotnet new -i React.Template
***> dotnet new reactnet-vanilla
***> dotnet run

Wait for the BuildServiceProvider builds the service for the first time.

In case confirm hosting environment can launch, press [Ctrl]+[C] to terminate it.

Launch windows exploere and go to the folder, then open created solution file with Visual Studio and run the app.

Select [ReactDemo] list item of [Start Debugging] box and press it. Then after build project, launch the console as the host and the browser as the client app.

・Embedding the embed code to the web app

Open and modify index.chtml from [tutorial-code] project -[Views]-[Home] of Visual Studio’s solution explorer.

Change [title] tag to ‘Van Halen Interview’ and comment out part of [Html.React] HTML helper, and also put embed code Azure auto genelated to the bottom of the contents.

Run app and confirm getting same response as test feature of Azure web app bot Channels list when put same phrase of it.