Slides for a talk presented at the 22nd meeting of the WebMontag Kassel Community, Germany

1. Microsoft Bot Framework
Node.js Edition
Jens Siebert (@jens_siebert)
WebMontag Kassel, 29. Januar 2018
https://www.slideshare.net/JensSiebert1

2. Chatbots
A chatbot is an application, often available via messaging platforms and
using some form of intelligence, that interacts with a user via a
conversational user interface (CUI).
(Joe Mayo, Programming the Microsoft Bot Framework)

3. Messaging Platform
Chatbots
Chatbot
Service
Service
Service
AI Service
(z.B. NLP)
Conversational UI
Backend Business Logic User Interface

4. Messaging Plattformen

5. Conversational User Interface
VoiceUserInterface
TextUserInterface
Speech
Speech
Recognition
Text
Text
Natural Language
Processing
Intent
Intent Intent Handling Request
Response Intent Handling Text
Text Speech Synthesis Speech

6. Beispiel: UPS Bot auf Skype

7. Warum sollte ich mich damit beschäftigen?
[…] as messaging apps have grown to dominate both phones and
workplaces, we see conversations with other humans being
supplemented by intelligent chatbots. As these platforms improve, they
will learn to understand the context and intent of conversations,
making interactions more lifelike and therefore more compelling.
The explosion of interest in the marketplace and mainstream media
leads to a corresponding rise in developer interest […]
(ThoughtWorks Technology Radar, Volume 16)

8. Warum sollte ich mich damit beschäftigen?
http://www.businessinsider.de/the-messaging-app-report-2015-11

9. Warum sollte ich mich damit beschäftigen?
https://www.twilio.com/learn/commerce-communications/how-consumers-use-messaging

10. Warum sollte ich mich damit beschäftigen?
https://www.twilio.com/learn/commerce-communications/how-consumers-use-messaging

11. Warum sollte ich mich damit beschäftigen?
https://www.gartner.com/smarterwithgartner/top-trends-in-the-gartner-hype-cycle-for-emerging-technologies-2017/

12. Anwendungsfälle für Chatbots
• E-Commerce
• Information
• Enterprise Productivity
• Intelligent Assistant
• IoT

13. Vorteile und Nachteile
• Konversation: CUIs bieten, durch Nutzung geschriebener oder gesprochener Sprache,
einen natürlicheren Zugang zu Informationen.
• Kontext: Es finden keine Kontextwechsel (z.B. unterschiedliche Bedienparadigmen bei
mobilen Apps) statt.
• Bereitstellung: Die Bereitstellung eines Chatbots ist für den Anwender transparent. Keine
Installation, keine Updates, immer aktuell.
• Geräte-unabhängig: Die Interaktion mit dem Chatbot kann mit allen Geräten erfolgen,
die von einer Messaging-Plattform unterstützt werden.
• Plattform-unabhängig: Die Interaktion mit dem Chatbot kann mit allen Plattformen
erfolgen, die von einer Messaging-Plattform unterstützt werden.
• Notwendigkeit: Es gibt bereits eine erfolgreiche mobile App für einen Service. Welche
Vorteile bringt ein zusätzlicher Chatbot?
• Angemessenheit: Ist ein CUI die angemessene Benutzerschnittstelle für einen Service?
• Kritikalität: Bietet ein Chatbot die richtige Form der Interaktion für einen Service?

14. Bot Builder SDK
Das Microsoft Bot Framework
Bot Builder
.NET
Bot Builder
Node.js
Bot
Connector
Channels
Azure Bot Service
Chatbot
(ASP.NET/Node.js)
Backend
Services
AI Services
(LUIS)

15. Das Microsoft Bot Framework
• Bot Connector Client
• Messages/Activities
• Dialog-Management
• State-Management
• GUI-Elemente
• Anbindung an AI-Services (LUIS)

16. Das Microsoft Bot Framework
Bot
Connector
Channel Chatbot
Backend
Service
AI Service
Activity
Route
Message
Query
Query
Response
Response
Response
Route
Response

17. Quickstart
https://docs.microsoft.com/en-us/bot-framework/nodejs/bot-builder-nodejs-quickstart

18. Quickstart
npm init
npm install botbuilder --save
npm install restify --save

19. Chatbot-Basis
const restify = require("restify");
const builder = require("botbuilder");
let server = restify.createServer();
server.listen(process.env.port || process.env.PORT || 3979, function () {
console.log("%s listening to %s", server.name, server.url);
});
let connector = new builder.ChatConnector({
appId: process.env.MICROSOFT_APP_ID,
appPassword: process.env.MICROSOFT_APP_PASSWORD
});
server.post("/api/messages", connector.listen());

20. Der Wasserfall
Dialog
<Step>
Enter first
name
<Step>
Enter last
name
<Step>
Enter e-mail
address
<Step>
Enter company
name
input
input
input

21. Dialog-Implementierung
let bot = new builder.UniversalBot(connector, [
function(session) {
session.send("Create a new profile...");
builder.Prompts.text(session, "Please enter your first name.");
},
function(session, result) {
session.dialogData.firstname = result.response;
builder.Prompts.text(session, "Please enter your last name.");
},
[…]
function(session, result) {
session.dialogData.company = result.response;
session.send(`* ${session.dialogData.firstname} ${session.dialogData.lastname}n*
${session.dialogData.email}n* ${session.dialogData.company}`);
builder.Prompts.confirm(session, "Is this correct?");
},
function(session, result) {
if (result.response) {
// Profil speichern
}
}
]);

22. Eingabeaufforderungen
let bot = new builder.UniversalBot(connector, [
function(session) {
session.send("Create a new profile...");
builder.Prompts.text(session, "Please enter your first name.");
},
function(session, result) {
session.dialogData.firstname = result.response;
builder.Prompts.text(session, "Please enter your last name.");
},
[…]
function(session, result) {
session.dialogData.company = result.response;
session.send(`* ${session.dialogData.firstname} ${session.dialogData.lastname}n*
${session.dialogData.email}n* ${session.dialogData.company}`);
builder.Prompts.confirm(session, "Is this correct?");
},
function(session, result) {
if (result.response) {
// Profil speichern
}
}
]);
Prompts.attachment
Prompts.choice
Prompts.confirm
Prompts.number
Prompts.text
Prompts.time

23. Bot Framework Emulator
https://docs.microsoft.com/en-us/bot-framework/bot-service-debug-emulator

24. Bot Framework Emulator

25. SearchDialog
Interaktion mit mehreren Dialogen
MainDialog
<Step>
SearchOptions
<Step>
EventSelection
<Step>
EventDetails
EventRegistrationDialog
ProfileCreationDialog
[…]
[…]
search
register
create

26. Der Dialog-Stack
DialogStack
mainDialog
profileCreation
session.beginDialog
(′profileCreation′);
DialogStack
mainDialog
profileCreation
session.endDialog();
DialogStack
mainDialog
session.beginDialog
(′mainDialog′);

27. Der Dialog-Stack
bot.dialog("mainMenu", [
function(session) {
// Auswahl „Suchen“, „Registrieren“, „Profil erstellen“
},
function(session, result) {
if (result.response.entity.toLowerCase().startsWith("search")) {
session.beginDialog("search");
}
else if (result.response.entity.toLowerCase().startsWith("create")) {
session.beginDialog("create");
}
else {
session.send("Search and Profile Creation are currently the only things that you can do");
session.replaceDialog("mainMenu");
}
},
function(session, result) {
session.replaceDialog("mainMenu");
}
]);
bot.dialog(„create", [
[…]
function(session) {
session.endDialog();
}
]);
Session.beginDialog
Session.cancelDialog
Session.endConversation
Session.endDialog
Session.endDialogWithResult
Session.replaceDialog

28. Dialog-Actions
Enter first name
Enter last name
Enter e-mail
Enter company
name
restart()
cancel()
cancel()
cancel()
cancel()
help()
quit()
status()
?

29. Dialog-Actions
bot.dialog("create", [
function(session, result) {
session.send("Create a new profile...");
builder.Prompts.text(session, "Please enter your first name.");
},
[…]
])
.beginDialogAction("profileCreationHelp", "profileCreationHelp", {
matches: /^help$/i
})
.cancelAction("cancelAction", "Canceled Profile Creation.", {
matches: /^cancel$/i,
confirmPrompt: "This will cancel the Profile Creation. Are you sure?"
})
.reloadAction("reloadAction", "Restarting Profile Creation.", {
matches: /^restart$/i
})
.endConversationAction("endConversation", "Leaving Conversation…", {
matches: /^quit$/i,
confirmPrompt: "This will end the current Conversation. Are you sure?"
});

30. Der Dialog-Stack
DialogStack
mainDialog
profileCreation
session.beginDialog
(′profileCreation′);
DialogStack
mainDialog
profileCreation
session.beginDialogAction
(′profileCreationHelp′);
profileCreationHelp
DialogStack
mainDialog
profileCreation
session.endDialog();
profileCreationHelp

31. Dialoge erweitern mit UI-Elementen

32. Message Attachments & Rich Cards
• Animation Card
• Audio Card
• Video Card
• Hero Card
• Thumbnail Card
• Receipt Card
• SignIn Card
• Adaptive Card
Message
Attachment
Rich Card
Media
Entity
Speech

33. Adaptive Cards
let message = new builder.Message(session).addAttachment({
contentType: "application/vnd.microsoft.card.adaptive",
content: {
type: "AdaptiveCard",
body: [{
type: "TextBlock",
text: `### ${json.Name}`
},
{
type: "TextBlock",
text: `${turndownService.turndown(json.ShortDescription)}`
},
{
type: "Image",
url:`https://dev.virtualearth.net/REST/v1/Imagery/Map/...`,
size: "strech"
},
{
type: "TextBlock",
text: `${json.Location.Name}, ${json.Location.Street}, ${json.Location.PLZ} […]`
}]
}
});
npm install adaptivecards --save

34. Natural Language Processing (NLP)
bot.dialog("search", [
function(session, result) {
const options = [
"All Events",
"Upcoming Events",
"Past Events"
];
builder.Prompts.choice(
session,
"Which Events would you like too see?",
options,
{
retryPrompt: "Please select a valid option!",
listStyle: builder.ListStyle.button
}
);
},
[…]
if (result.response.entity.toLowerCase().startsWith("upcoming")) {
[…]
}
else if (result.response.entity.toLowerCase().startsWith("past")) {
[…]
}
else {
[…]
}
[…]
- „Kommando-artig“
- Keine natürliche Sprache

35. Language Understanding Intelligent Service
https://www.luis.ai
Utterances
„Show me a list of upcoming events“
Intents
„Search“
Entities
SearchOption.All
SearchOption.Upcoming
SearchOption.Past

36. Modellierung

37. Training & Publishing

38. LUIS Modell im Code einbinden
const LuisHost = "westus.api.cognitive.microsoft.com";
const ModelId = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
const KeyId = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
const LuisModelUrl = `https://${LuisHost}/luis/v2.0/apps/${ModelId}?subscription-key=${KeyId}`;
let recognizer = new builder.LuisRecognizer(LuisModelUrl);
bot.dialog("search", new builder.IntentDialog({ recognizers: [recognizer] })
.onBegin(function(session) {
session.send("Welcome to LUIS event search. Here are some examples that I can recognize: "Show all events"…");
})
.matches("Search", [
function(session, result) {
let entity = builder.EntityRecognizer.findEntity(result.entities, "SearchOption");
if (!entity) {
session.endDialog("Sorry, I did not understand...");
}
else {
let searchOption = entity.resolution.values[0];
[…]
}
},
[…]
]);

39. Azure Bot Service erstellen
https://portal.azure.com

40. Deployment mit azure-cli
Azure CLI Download: https://docs.microsoft.com/de-de/cli/azure/install-azure-cli
Anleitung: https://docs.microsoft.com/de-de/azure/app-service/app-service-web-get-started-nodejs
az webapp deployment source config-zip
--resource-group <resource_group>
--name <app_name>
--src appfiles.zip

41. Testen in Web Chat

42. Kanäle konfigurieren

43. Beispiel: DNUGPBBot in Skype

44. Weitere Themen
• State Data Management
• Advanced Message Handling
• Channel-specific Functionality
• Localization
• Hand-off to Human
• Cortana Skills

45. Literatur (Leider nur für .NET/C#)
Ausgaben 6/2017-8/2017

46. Vielen Dank!
https://dev.botframework.com
https://docs.microsoft.com/bot-framework
Slides: https://www.slideshare.net/JensSiebert1
Code: https://bitbucket.org/jenssiebert/dnugpbchatbot
Demo-Bot (WebChat): http://dnugpbbot.azurewebsites.net
Twitter: @jens_siebert