SPFx in Bot – začetna točka

Tokrat bi vam rad predstavil, kako lahko povežete v delujočo celoto SharePoint in Microsoft Bot Framework.

Kot vse na tem svetu je tudi tu potrebno nekje začeti, zato začetna točka.

Zanima nas torej, kako lahko pričnemo uporabljati Microsoft Bot Framework znotraj SharePoint Frameworka (SPFx) in kreiramo prvi HelloWorld primer v Bot Frameworku.

Pa začnimo.

Kreirajmo Echo Bot v JavaScript

Najprej ustvarimo našega bota z Bot Builder SDK for JavaScript. Na naslednji povezavi si lahko pogledate korake, kako lahko to naredite: http://bit.ly/2AC3PEM

Če ste SharePoint Framework razvijalec, potem že poznate kaj je Node.js, NPM itd. Tako da lahko izpustimo prvih nekaj začetnih korakov in pričnemo z inštalacijo Yeoman generatorja za Bote v JavaScriptu:

npm install -g yo generator-botbuilder

Zatem lahko kreiramo novo mapo in znotraj nje kličemo prej nameščen Yeoman generator poimenovan botbuilder:

yo botbuilder

Nato moramo definirati ime, opis, jezik in predlogo, ki bi jo radi uporabili. Tukaj izberite JavaScript jezik in Echo predlogo.

Ustvarili smo torej enostaven Echo Bot znotraj JavaScript okolja, zato ga lahko enostavno uporabimo / zaženemo z naslednjim ukazom:

npm start

Testiramo ga lahko z Bot Framework Emulatorjem. Dobite ga lahko na naslednji povezavi: http://bit.ly/2slFrmq

Odprite Bot Framework Emulator in kliknite Open Bot ter izberite .bot datoteko locirano v prej ustvarjenem direktoriju projekta.

Kreirajmo SPFx Web Part

Sedaj lahko kreiramo nov SPFx Web Part z Yeoman generatorjem:

yo @microsoft/sharepoint

Poimenujmo ga SpFxBotStarterWebPart.
Zatem moramo namestiti dva dodatna NPM paketa za delo z Bot Frameworkom:

npm install --save botframework-webchat
npm install --save botframework-directlinejs

V svoj web part moramo vključiti context, zato ga dodajmo kot property SPFx React komponente:

import { WebPartContext } from "@microsoft/sp-webpart-base";

export interface ISpFxBotStarterProps {
  description: string;
  context: WebPartContext;
}

Zatem ga lahko posredujemo iz webparta v React komponento na spodnji način:

public render(): void {
    const element: React.ReactElement<ISpFxBotStarterProps> = React.createElement(
      SpFxBotStarter,
      {
        description: this.properties.description,
        context: this.context
      }
    );

    ReactDom.render(element, this.domElement);
  }

Znotraj React komponente moramo importirati naslednje pakete:

import { Chat } from 'botframework-webchat';
import { DirectLine } from 'botframework-directlinejs';
require('../../../../node_modules/botframework-webchat/botchat.css');

Nato kreirajmo spremenljivko znotraj razreda SpFxBotStarter (React komponenta) za direct line secret key, ki ga boste kasneje dobili iz Azura:

private directLine_Secret = "# ENTER AZURE BOT FRAMEWORK DIRECTLINE KEY HERE #";

Dodajmo spodnjo kodo v render() metodo:

public render(): React.ReactElement<ISpFxBotStarterProps> {

    //Registering to Direct Line to communicate with BOT
    var botConnection = new DirectLine({
      secret: this.directLine_Secret
    });

    //Current User information from Context
    var user = { id: this.props.context.pageContext.user.email, name: this.props.context.pageContext.user.displayName };

    //Sending BOT "event" type dialog with user basic information for greeting.
    botConnection.postActivity({ type: "event", name: "sendUserInfo", value: this.props.context.pageContext.user.displayName, from: user }).subscribe(id => console.log("success", id));    

    //Subscribing for activities created by BOT
    var act: any = botConnection.activity$;
    act.subscribe(
      a => {
        if (a.type == "event" && a.name == "search") {
          botConnection
          .postActivity({ type: "message", text: "showresults", value: [], from: user })
          .subscribe(id => { console.log("success", id) });
        }
      }
    );

    return (
      <div className={styles.spFxBotStarter} style={{ height: 700 }}>
        <Chat botConnection={botConnection} adaptiveCardsHostConfig={null} directLine={{ secret: this.directLine_Secret }} bot={{ id: 'botid' }} user={user} />
      </div>
    );
  }

Kot lahko vidimo v zgornji kodi, se moramo registrirati na Direct Line za komunikacijo z Botom. Nato pošiljamo uporabniške podatke. Nato se naročimo na dejavnosti, ki jih izvaja Bot. Na koncu pridejo render predloge za naš Bot SPFx Web Part s Chat komponento.

Registrirajmo Bot Service na Azure Portal

Za tem lahko registriramo nov Bot Service na Azure Portal. Jaz sem ga poimenoval SPFxBotStarter.

Izberemo Bot Channerls Registration

Za tem gremo lahko na novo ustvarjeni Bot Service in znotraj Channels pod Bot Management lahko konfiguriramo Direct Line Channel.

Svoj Secret key kopiramo v SPFx spremenljivko poimenovano directLine_Secret, ki smo jo naredili prej.

Namestimo ngrok in ga uporabimo

Po tem gremo lahko na to stran, da si skopiramo ngrok.exe na svoj računalnik, saj ga bomo morali zaganjati preko CMD.

Odpremo CMD in uporabimo sledeč ukaz:

ngrok http 3978 -host-header="localhost:3978"

Če je vse ok, bomo dobivali forwarding URL-je, kot na primer https://xxxxxxxx.ngrok.io.

Uporabimo https url in ga skopiramo v Bot Service Settings konzolo v Messaging endpoint nastavitev z /api/messages končnico:

Za tem zaženemo Bota z ukazom:

npm start

SPFx Web Part pa zaženemo z ukazom:

gulp serve

Za tem lahko končno dodamo novo ustvarjeni SPFx Web Part na našo SharePoint Workbench stran in jo testiramo (preverite, da je ngrok še vedno pognan).