PowerApps + Microsoft Bots = PowerBot

Published: Jul 9, 2020

Overview

Microsoft provides various services using which any user can achieve required functionality with minimal use of codes. In this blog, our Sharepoint developers discuss on few of these services and frameworks. One of these is PowerApps through which any person without having knowledge of app development and coding can create custom business applications. And other one is Bot which provides conversational experience based on its applied knowledge based. With the use of these two, one can create a smart app like PowerBot where any user can have conversation with bot.

Note: The Bold & Italic set must be changed with your keys.

Table of Content

  1. Steps to Create PowerBot
  2. Create Bot Service
  3. Add Knowledge Base
  4. Test Bot Knowledge Base
  5. Test Bot Service with Postman
  6. Create Power App
  7. Save Power App
  8. Open Created PowerBot
  9. Conclusion

Steps to Create PowerBot

There are mainly two steps to create a smart app. They are listed below:

  • Create Bot Service:
    • User can create this QnA bot service in Azure.
    • Once user create this service, they can add/modify its knowledge base which has questions/answers pair.
  • Create Power App:
    • Create an app which have connection to this QnA service and can take input from a user.

Create Bot Service

  • To create a Bot service, first navigate to Azure and login to account.
  • From the left navigation choose All Services. Then find keyword QnA Maker service. QnA Maker
  • New QnA Maker service is required to create. Click on Create button and fill all the fields’ values as shown below.
    • Name: Unique name to identify this QnA Maker service
    • Subscription: Choose subscription under which this service will be created.
    • Pricing tier: Select it as per pricing list for service.
    • Resource group: This resource group will be used for QnA Maker service. It is recommended to create a new one as QnA Maker will create several resources related to it.
    • Resource group location: Select it for service.
    • Search pricing tier: Choose an option for Search pricing tier of the Azure Cognitive Search service. If the free tier option is greyed out or unavailable then it means that you have already deployed it through your subscription.
    • Search location: Select a location from this option for deploying the Azure Cognitive Search indexes.
    • App name: Provide the name to Azure App Service instance.
    • Website location: Choose a location where an App Service is required to deploy.
    • App insights: Enable the App insights if require. When it is enabled, the QnA Maker gathers telemetry on chat logs, traffic and errors.
    • App insights location: Choose the location where App insights resources will be deployed.
  • Then click on Create. Click on create
  • Once your deployment is done, it will show success before all resources.
  • Now select the resource having Cognitive Services type. Your deployment is complete
  • It has your subscription keys that you can find from left navigation menu “Keys and EndPoint”.
    Keys and Endpoint

Add Knowledge Base

  • Once you have successfully created QnA Maker service, it is required to create a knowledge base for that service.
  • This knowledge base contains question-answer pairs which will be used in Bot for conversation.
  • To create a QnA knowledge base, login into https://qnamaker.ai/.
  • Click Create a knowledge base from that QnA Maker portal to create your custom knowledge base.
  • On the Create page, it will ask you to Create a QnA service which we have already done in above steps.
  • In this Azure portal, to create a new Knowledge base use those created Azure Active Directory ID, Subscription, QnA resource name which you have selected while creating the QnA service resources.
  • Fill the details as per those values and requirements as shown in below images. Create a knowledge base In Step4: Add sample document URL https://docs.microsoft.com/azure/cognitive-services/qnamaker/troubleshooting Add sample document URL
  • After filling all the values, click Create your KB.
  • To extract the document and identifying the questions and answers, it will take few minutes.
  • Once it will be created, one success screen will get open. From that screen, you can find host URL and authorization key.
  • Kindly save those values, as they will be used in further steps. Save those values

Test Bot Knowledge Base

  • Once you successfully create knowledge base, you can test it within QnA Maker portal.
  • Click on My knowledge bases menu from the top navigation. It will show you the list of your knowledge base and click on the newly created KB from the listed knowledge bases. My knowledge bases
  • This will redirect you to the questions and answers pair screens. From this screen, you can edit the knowledge base. Knowledge Base
  • From the Right Top corner, select the option “Save and train” and then click on Test.
  • It will popup screen where you can test your KB in conversational manner.
  • To clear the conversation and have it with blank, you can select option “Start over” from Top Right corner. Select opion start over

Test Bot Service with Postman

  • To test the QnA maker service with postman, use the details which are given on Knowledge base creation.
    1. POST /knowledgebases/<Knowledge base ID>/generateAnswer
    2. Host: https://mynewqnamakerservice.azurewebsites.net/qnamaker
    3. Authorization: EndpointKey<EndpointKey>
    4. Content-Type: application/json
    5. {“question”:”<your question>”}
  • Open the Postman and from the left top corner, create new request to test the service.
  • Click on “New” → “Request” Create new request Request
  • Give the details for request name, description and collection. For the request, create a new collection and save it. Create a new collection
  • To test the URL, create a URL based on knowledge base “Post” and “Host” url.
    • Host URL + Post URL Example: https://mynewqnamakerservice.azurewebsites.net/qnamaker/ knowledgebases/ <Knowledge base ID> /generateAnswer
  • Then add URL in request URL control and set the “POST” value.
  • In the body section of URL, select the row and add question in below given format.
    • {“question”: “tell me about knowledge base”} tell me about knowledgebase
  • In the header section, add the value of authentication and content type as below:
    • Authorization: EndpointKey <EndPoint Key>
    • Content-Type: application/json
    • To add the value, select on Headers and then from the right top of text area, click on bulk edit and add the above-mentioned value. Click on bulk edit
  • Now after applying these changes, you can hit on URL by clicking on Send button next to URL. clicking on send button
  • It will show the result as below. If the given URL works desirably then it shows status “200 OK”. status 200 ok

Create Power App

  • To create an app, first navigate to https://in.create.powerapps.com/studio/and login to account.
  • From the screen, select option Blank App → Phone Layout.
    phone layout
  • It will open a screen with blank layout screen.
  • From the left pane, rename the screen name of “Screen1” to other. Here, we it is set as “Bot”.
    set as a bot
  • Once it is set then select the “Bot” and set below code on “OnStart” of app.
    ClearCollect(chat{id:0,name:"Bot",text:"Welcome"&amp;Left(User().FullName,
    Find(" ",User().FullName))&amp;"! How can I help you?.",chattime:Now()})
    > This will create a new collection named “chat”. > That collection holds a conversation between login user and bot with their ids. > Here id = 0, represents “Bot”. This is the name that we give to our Bot chat. > Along with that, given text will be displayed with login user name when an app will be opened.
  • To add the questions answers, it is required to add DataSource of the created knowledge base.
  • To add that, select View option of top ribbon menu and under that select an option DataSources.
  • It will open DataSource pane in left with three different sections.
    • In your app: In this, all the collections and connection will be displayed which are attached to this app.
      • You can see collection “chat” in the list that we have created in previous step.
    • Entities: This will display list of entities of current environment.
    • Connectors: In this, it will show list of available connectors.
      • From that list, find the QnA Maker connector and click on “+Add a Connection”.
        click on add a connection
  • It will open pane in right with textbox for API Key and Site URL.
    • API Key: Add EndPoint key of Knowledge base.
    • Site URL: Add Host URL of Knowledge base.
      Connect to data
    • After filling the data click on the Connect button.
  • Once applying this steps, app connection and bot collection are ready. Now you are just left with chat screen part of App.
  • For that add below controls from Insert menu of ribbon
    • Label: To set the top header of app.
    • Gallery (Vertical): To manage the chat conversation.
    • Once you add that Gallery in your app, set “chat” collection as its data source.
      Click on the image icon of Gallery and set the below code for that Image.
      If(id=0,SampleImage,User().Image)
      This will set SampleImage for Bot and Login user’s image will be his/her display picture.
    • Textbox: With this textbox, user will ask the questions to the Bot.
    • Button: On the click of this button user’s question will be requested to bot and response will be given.
      Collect(chat,{id:1,name:User().FullName,text:txtQuestion.Text});
      Collect(chat{id:0,name:"Bot",text:First(QnAMaker.GenerateAnswer("&lt; Knowledge base id &gt;"," &lt; Host URL &gt;","&lt; <em><u>Endpoint Key<u></u></u></em> &gt;",txtQuestion.Text).answers).answer});
      Reset(txtQuestion)
      Where,
      txtQuestion: is the id of textbox control.
      chat: is the collection that holds conversation.
      GenerateAnswer Method: will fetch answer from knowledge base
      Id = 0: Bot
      Id = 1: Login user
      After adding all these controls, app screen will look like this.
      app screen will look like this
  • To test the app, select the ▶ icon from top right corner. It will open new screen from where you can test the bot.

Save Power App

  • You can save an app in computer and cloud.
  • Here, we will save the app on cloud so that we can find our app from App Studio.
  • It will display two options on left on Save screen. From that, choose “The Cloud” and provide a name for app. choose the cloud

Open Created PowerBot

  • After saving an app navigate to https://make.powerapps.com and click on Apps from left navigation.
  • This will open list of apps, from that click on the app which you have saved.
  • Once app is open in new tab from where you can interact with your bot service. you can interact with bot

Conclusion

With the use of Bot service and PowerApps, one can easily make their own PowerBot without writing code for it and use it in organization. As in organization, if you have an idea that some repeatedly pair of questions will be asked by group of members, so that you can make a PowerBot for that which also requires less efforts in creation if you have list of question answer pairs. Thus, PowerBot is a powerful tool to use in the organization for having a clear communication on certain topics.

Comments

Related Articles

An Introduction to key aspects of Internet of Things (IoT)

Oct 21, 2020

TransactionScope in C#

Oct 9, 2020

Financial Information Exchange Protocol

Oct 6, 2020