Echo Dot (3rd Gen) - Smart speaker with Alexa - Charcoal

Use your voice to play a song, artist, or genre through Amazon Music, Apple Music, Spotify, Pandora, and others. With compatible Echo devices in different rooms, you can fill your whole home with music.

Buy Now

Wireless Rechargeable Battery Powered WiFi Camera.

Wireless Rechargeable Battery Powered WiFi Camera is home security camera system lets you listen in and talk back through the built in speaker and microphone that work directly through your iPhone or Android Mic.

Buy Now

Building a ChatBot with SharePoint SPFx and Microsoft Bot Framework v4

0
114


This story will show you the step by step instruction that you can take to build your first chatbot and incorporate it as a web part in SharePoint using SPFx.

1. Create an echo bot and start echo bot

You can follow the official Microsoft guide on creating a chatbot with Microsoft Bot Framework v4 here

mkdir TutorialBot
cd TutorialBot
npm install -g npm
npm install -g yo generator-botbuilder
yo botbuilder
  • Enter a description. (Demonstrate the core capabilities of the Microsoft Bot Framework)
  • Choose the language for your bot. (JavaScript)
  • Choose the template to use. (Echo Bot — https://aka.ms/generator-botbuilder-templates)
cd tutorial-chat-bot
npm start

2. Test your bot on Bot Framework Emulator

  1. Start the Bot Framework Emulator. You can download them here: Bot Framework Emulator for Mac or Bot Framework Emulator for Windows
  2. Click on Create a new bot configuration, enter Tutorial Bot and http://localhost:3978/api/messages for Bot name and Endpoint URL respectively.
  3. Click on Save and connect
  4. Send a message to your bot and it will echo back the same message.

3. Upload Bot to Azure App Service

Connect to Azure and set your subscription using the command below:

az login
az account set --subscription "<azure-subscription>"
az ad app create --display-name "<botname>" --password "<16characterpassword>" --available-to-other-tenants
az deployment create --template-file "<path-to-template-with-new-rg.json" --location <region-location-name> --parameters appId="<app-id-from-previous-step>" appSecret="<password-from-previous-step>" botId="<id or bot-app-service-name>" botSku=F0 newAppServicePlanName="<new-service-plan-name>" newWebAppName="<bot-app-service-name>" groupName="<new-group-name>" groupLocation="<region-location-name>" newAppServicePlanLocation="<region-location-name>" --name "<bot-app-service-name>"
az bot prepare-deploy --code-dir "." --lang Javascript
az webapp deployment source config-zip --resource-group "<resource-group-name>" --name "<app-service-name>" --src "code.zip"

4. Create Direct Line connection for the Bot Channels Registration

Click on Channels and then click on the Direct Line icon to create a Direct Line channel for your bot.

5. Create SPFx Custom Web Part and Modify the Code

You can follow the official Microsoft guide on creating a SPFx web part here. You may also need to look at this guide to set up your environment for SPFx if you have not already done so.

yo @microsoft/sharepoint
  • Select SharePoint Online only (latest), and select Enter.
  • Select Use the current folder for where to place the files.
  • Select N to allow the solution to be deployed to all sites immediately.
  • Select N on the question if the solution contains unique permissions.
  • Select WebPart as the client-side component type to be created.
  • Type in your preferred description as your web part description, and then select Enter.
  • Select React as the framework you would like to use, and then select Enter.
npm install --save botframework-webchat
npm install --save botframework-directlinejs
import { IWebPartContext } from '@microsoft/sp-webpart-base';export interface ITutorialWebPartProps {
description: string;
context: IWebPartContext;
}
export default class TutorialWebPartWebPart extends BaseClientSideWebPart <ITutorialWebPartWebPartProps> {  public render(): void {
const element: React.ReactElement<ITutorialWebPartProps> = React.createElement(
TutorialWebPart,
{
description: this.properties.description,
context: this.context
}
);
ReactDom.render(element, this.domElement);
}
import * as React from 'react';
import styles from './TutorialWebPart.module.scss';
import { ITutorialWebPartProps } from './ITutorialWebPartProps';
import ReactWebChat from 'botframework-webchat';
import { DirectLine } from 'botframework-directlinejs';
export interface IBotFrameworkChatv4State {
directLine: any;
}
export default class TutorialWebPart extends React.Component<ITutorialWebPartProps, IBotFrameworkChatv4State> {
constructor(props) {
super(props);
this.state = {
directLine: new DirectLine({
secret: "<DIRECT LINE SECRET>"
}),
};
}
public render(): React.ReactElement<ITutorialWebPartProps> {
return (
<div style={{ height: 700 }}>
<ReactWebChat directLine={this.state.directLine} />
</div>
);
}
}

6. Test on SharePoint WorkBench

Run gulp serve and you should be able to test your chatbot as a web part. The expected behavior should be the same as that of the Bot Framework Emulator earlier.

Follow the official documentation from Microsoft to deploy your chatbot web part to your SharePoint site.

This is a very basic echo bot, but we can add in more functionality and make it more intelligent and Azure has this QnA Maker feature in its Cognitive Services offering that we can make use of. Hope this post helped!



Read More

LEAVE A REPLY

Please enter your comment!
Please enter your name here