insight 
Niet zo heel lang geleden ben ik begonnen aan het bouwen van een mobiele app in xamarin. Je wilt toch dat je app op meerdere platformen kan draaien en niet dat je al je code opnieuw moet gaan schrijven in verschillende talen voor verschillende platformen. Nu was ik daar al een aardig eindje mee op weg en toen kwam ik het Microsoft bot framework tegen. Na me verdiept te hebben in het framework wist ik het, het wordt geen app meer maar een bot!
Hoe werkt het Microsoft bot framework?
Om een chatbot te bouwen zal ik eerst uitleggen hoe het Microsoft bot framework werkt. Een gebruiker gebruikt bijvoorbeeld Facebook messenger om met jouw bot te communiceren. Om nu niet zelf de communicatie tussen facebook messenger en je bot applicatie te hoeven bouwen, heeft Microsoft het bot framework gereleased.rnrnHet botframework ontvangt de berichten van facebook messenger en maakt hier een standaard bericht van wat door wordt gestuurd naar je bot applicatie (dit gebeurt allemaal via rest calls).rnu003cfigure class=u0022clearfixu0022u003eu003cimg src=u0022https://vxcompany.com/wp-content/uploads/Bot-Framework-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het.pngu0022 srcset=u0022u0022 alt=u0022Bot-Framework – Microsoft bot framework wat is het en hoe werkt hetu0022 width=u0022100%u0022 height=u0022autou0022 data-srcset=u0022https://vxcompany.com/wp-content/uploads/Bot-Framework-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het.png 246w, https://vxcompany.com/wp-content/uploads/Bot-Framework-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het@2x.png 492w, https://vxcompany.com/wp-content/uploads/Bot-Framework-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het@4x.png 984wu0022 /u003eu003c/figureu003e
Hoe werkt de bot applicatie?
Een bot is eigenlijk een vooraf gedefinieerde flow waar je je bezoeker doorheen wilt navigeren. Een bot kan bestaan uit dialogs, die je kan vergelijken met pagina’s op een website. Je begeleidt de gebruiker door de flow van de bot applicatie en op basis van de keuzes welke de gebruiker maakt geeft je bot een antwoord. Het antwoord kan bestaan uit standaard text, een formulier, bestanden of een rich content object.rnu003cfigure class=u0022clearfixu0022u003ernu003cfigure class=u0022clearfixu0022u003ernu003cfigure class=u0022clearfixu0022u003ernu003cfigure class=u0022clearfixu0022u003eu003cimg class=u0022aligncenteru0022 src=u0022https://vxcompany.com/wp-content/uploads/rich-content-object-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het.pngu0022 srcset=u0022u0022 alt=u0022rich-content-object – Microsoft bot framework wat is het en hoe werkt hetu0022 width=u0022360u0022 height=u0022autou0022 data-srcset=u0022https://vxcompany.com/wp-content/uploads/rich-content-object-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het.png 90w, https://vxcompany.com/wp-content/uploads/rich-content-object-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het@2x.png 180w, https://vxcompany.com/wp-content/uploads/rich-content-object-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het@4x.png 360wu0022 /u003eu003c/figureu003ernu003c/figureu003ernu003c/figureu003ernu003c/figureu003ernu003cemu003eVoorbeeld van rich content object (titel, subtitel, tekst, grote afbeelding and buttons). Deze kunnen als carousel of als enkel item worden weergegeven.u003c/emu003ernrnEr zijn verschillende uitvoeringen beschikbaar.rnu003cfigure class=u0022clearfixu0022u003eu003cimg src=u0022https://vxcompany.com/wp-content/uploads/Verschillende-uitvoeringen-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het.pngu0022 srcset=u0022u0022 alt=u0022Verschillende uitvoeringen – Microsoft bot framework wat is het en hoe werkt hetu0022 width=u0022100%u0022 height=u0022autou0022 data-srcset=u0022https://vxcompany.com/wp-content/uploads/Verschillende-uitvoeringen-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het.png 247w, https://vxcompany.com/wp-content/uploads/Verschillende-uitvoeringen-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het@2x.png 494w, https://vxcompany.com/wp-content/uploads/Verschillende-uitvoeringen-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het@4x.png 987wu0022 /u003eu003c/figureu003ernu003cemu003eVan u0026lt;u003ca href=u0022https://docs.botframework.com/en-us/csharp/builder/sdkreference/attachments.html#richcardsu0022 target=u0022_blanku0022 rel=u0022noopener noreferreru0022u003ehttps://docs.botframework.com/en-us/csharp/builder/sdkreference/attachments.html#richcardsu003c/au003eu0026gt; u003c/emu003e
Hoe begin je met het maken van een bot?
Ik maak mijn voorbeeld bot in C# het is ook mogelijk om je bot applicatie in node.js te maken.rnrnOm te beginnen heb je het visual studio template nodig. Deze kun je u003ca href=u0022http://aka.ms/bf-bc-vstemplateu0022 target=u0022_blanku0022 rel=u0022noopener noreferreru0022u003ehieru003c/au003e downloaden. Sla deze template op in u0022%USERPROFILE%DocumentsVisual Studio 2015TemplatesProjectTemplatesVisual C#u0022rnrnOm je bot te testen heb je de bot emulator nodig. Dit is een applicatie waarmee je lokaal je bot kunt testen en debuggen. Je kunt hem u003ca href=u0022https://aka.ms/bf-bc-emulatoru0022 target=u0022_blanku0022 rel=u0022noopener noreferreru0022u003ehieru003c/au003e downloaden. Na het downloaden kun je de bot emulator installeren.rnrnStart een nieuw visualstudio project op basis van de bot template.rnu003cfigure class=u0022clearfixu0022u003eu003cimg src=u0022https://vxcompany.com/wp-content/uploads/Start-een-nieuw-visualstudio-project-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het.pngu0022 srcset=u0022u0022 alt=u0022Start-een-nieuw-visualstudio-project – Microsoft bot framework wat is het en hoe werkt hetu0022 width=u0022100%u0022 height=u0022autou0022 data-srcset=u0022https://vxcompany.com/wp-content/uploads/Start-een-nieuw-visualstudio-project-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het.png 295w, https://vxcompany.com/wp-content/uploads/Start-een-nieuw-visualstudio-project-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het@2x.png 591w, https://vxcompany.com/wp-content/uploads/Start-een-nieuw-visualstudio-project-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het@4x.png 1181wu0022 /u003eu003c/figureu003ernJe hebt nu een basis bot applicatie om mee te starten.rnrnAls je nu je applicatie start in visual studio en via de bot emulator verbinding maakt naar de url http://localhost:3979/api/messages en je typt ‘hallo’, dan moet je een bericht terugkrijgen van de bot applicatie zoals hieronder.rnu003cfigure class=u0022clearfixu0022u003eu003cimg src=u0022https://vxcompany.com/wp-content/uploads/Bot-Framework-screenshot-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het.pngu0022 srcset=u0022u0022 alt=u0022Bot-Framework-screenshot – Microsoft bot framework wat is het en hoe werkt hetu0022 width=u0022100%u0022 height=u0022autou0022 data-srcset=u0022https://vxcompany.com/wp-content/uploads/Bot-Framework-screenshot-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het.png 263w, https://vxcompany.com/wp-content/uploads/Bot-Framework-screenshot-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het@2x.png 526w, https://vxcompany.com/wp-content/uploads/Bot-Framework-screenshot-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het@4x.png 1052wu0022 /u003eu003c/figureu003ernAan de rechterkant van de bot emulator zie je welke berichten er over en weer gestuurd worden. Deze berichten zijn erg handig voor het debuggen van je applicatie.rnrnAls je in je project in de map controller kijkt, staat daar een controller genaamd ‘MessagesController’. Dit is een web api controller welke de berichten ontvangt die naar je bot gestuurd worden.rnrnEr zijn verschillende activiteiten waar je op kunt inhaken. Je kunt bijvoorbeeld een welkomstbericht sturen zodra iemand met je bot connect.rnu003cfigure class=u0022clearfixu0022u003eu003cimg src=u0022https://vxcompany.com/wp-content/uploads/Web-api-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het.pngu0022 srcset=u0022u0022 alt=u0022Web-api – Microsoft bot framework wat is het en hoe werkt hetu0022 width=u0022100%u0022 height=u0022autou0022 data-srcset=u0022https://vxcompany.com/wp-content/uploads/Web-api-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het.png 230w, https://vxcompany.com/wp-content/uploads/Web-api-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het@2x.png 461w, https://vxcompany.com/wp-content/uploads/Web-api-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het@4x.png 921wu0022 /u003eu003c/figureu003ernVanuit je RootDialog kun je verschillende dialogs oproepen. Ik heb nu als voorbeeld een dialog welke je voornaam, achternaam en geslacht vraagt en je dan een welkomstbericht stuurt.rnu003cfigure class=u0022clearfixu0022u003eu003cimg src=u0022https://vxcompany.com/wp-content/uploads/Web-api-voorbeeld-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het.pngu0022 srcset=u0022u0022 alt=u0022Web-api-voorbeeld – Microsoft bot framework wat is het en hoe werkt hetu0022 width=u0022100%u0022 height=u0022autou0022 data-srcset=u0022https://vxcompany.com/wp-content/uploads/Web-api-voorbeeld-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het.png 176w, https://vxcompany.com/wp-content/uploads/Web-api-voorbeeld-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het@2x.png 353w, https://vxcompany.com/wp-content/uploads/Web-api-voorbeeld-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het@4x.png 705wu0022 /u003eu003c/figureu003ernIn het dialog PersonalInformation wordt gebruikgemaakt van een formulier om je gegevens op te vragen. Dit kunnen tekstvelden zijn maar ook vooraf opgegeven waardes, bijvoorbeeld of je een vrouw of man bent. Tevens kun je validatie toevoegen zodat je de ingevoerde waardes kunt valideren.rnu003cfigure class=u0022clearfixu0022u003ernu003cfigure class=u0022clearfixu0022u003ernu003cfigure class=u0022clearfixu0022u003eu003cimg src=u0022https://vxcompany.com/wp-content/uploads/Web-api-voorbeeld-2-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het.pngu0022 srcset=u0022u0022 alt=u0022Web-api-voorbeeld 2 – Microsoft bot framework wat is het en hoe werkt hetu0022 width=u0022380u0022 height=u0022autou0022 data-srcset=u0022https://vxcompany.com/wp-content/uploads/Web-api-voorbeeld-2-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het.png 95w, https://vxcompany.com/wp-content/uploads/Web-api-voorbeeld-2-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het@2x.png 190w, https://vxcompany.com/wp-content/uploads/Web-api-voorbeeld-2-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het@4x.png 380wu0022 /u003eu003c/figureu003ernu003c/figureu003ernu003c/figureu003ernZodra je het formulier hebt ingevuld krijg je een bericht terug van de bot.rnrnJe kan natuurlijk in een echte bot applicatie een api oproepen met de ingevoerde gegevens en dit als een rich content object naar de gebruiker sturen (zie boven voor de verschillende opties).
Het publiceren van je bot
Als je helemaal tevreden bent met de werking van je bot, kun je hem registreren om hem daadwerkelijk te testen in verschillende kanalen (skype, facebook messenger, slack etc).rnrnMaak een Azure webapplicatie aan zodat je de URL hebt waar je applicatie op komt te draaien (deze heb je nodig bij het registreren).rnrnLog in op u003ca href=u0022https://dev.botframework.com/u0022 target=u0022_blanku0022 rel=u0022noopener noreferreru0022u003ehttps://dev.botframework.com/u003c/au003ernrnRegistreer je bot en stel het endpoint in, inclusief ‘/api/messages’ en maak een app id en wachtwoord aan.rnu003cfigure class=u0022clearfixu0022u003eu003cimg src=u0022https://vxcompany.com/wp-content/uploads/Bot-profile-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het.pngu0022 srcset=u0022u0022 alt=u0022Bot-profile – Microsoft bot framework wat is het en hoe werkt hetu0022 width=u0022100%u0022 height=u0022autou0022 data-srcset=u0022https://vxcompany.com/wp-content/uploads/Bot-profile-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het.png 182w, https://vxcompany.com/wp-content/uploads/Bot-profile-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het@2x.png 365w, https://vxcompany.com/wp-content/uploads/Bot-profile-Microsoft-bot-framework-wat-is-het-en-hoe-werkt-het@4x.png 729wu0022 /u003eu003c/figureu003ernVoeg het appid en het wachtwoord in de appsettings van je web.config.rnrnPubliceer je bot applicatie naar Microsoft Azure.rnrnAls dit succesvol is gedaan, kun je je bod testen door hem toe te voegen aan skype of aan te melden bij facebook messenger.