Unser Bot, der MetalBot erf\u00fcllt nur eine einzige Aufgabe, n\u00e4mlich den User nach einem Bild seines Lieblingsgetr\u00e4nks zu fragen und basierend auf einem hochgeladenen Bild eines Getr\u00e4nks eine Empfehlung auszusprechen, welche Band der User als n\u00e4chstes h\u00f6ren sollte.<\/p>\n
F\u00fcr Eilige: wenn ihr die Session gesehen habt oder nicht an den Erkl\u00e4rungen interessiert seid sondern nur zum Quellcode m\u00f6chtet, dann begebt euch bitte hier<\/a> direkt zum Quellcode des Bots.<\/p>\n Sehen wir uns zun\u00e4chst einige grundlegende Konzepte des Bot Frameworks an. Grunds\u00e4tzlich kommunizieren Clients nicht direkt mit eurem Bot sondern mit einem Bot Service Framework, dieses Service Framework „spricht “ wiederum \u00fcber REST Calls mit eurem Bot. Das hei\u00dft einerseits m\u00fcsst ihr f\u00fcr euren Bot nicht Konnektoren zu verschiedenen Kan\u00e4len implementieren, da das Microsoft bereits f\u00fcr euch \u00fcbernommen hat, andererseits habt ihr klar definierte Schnittstellen \u00fcber die euer Bot kommuniziert.<\/p>\n Im Bot Framework gibt es nun einen ganzen Stack, der die Nachrichten verarbeitet, bevor sie euren Bot erreichen. Der Stack zur Kommunikation wird in der Dokumentation von Microsoft<\/a> erkl\u00e4rt.<\/p>\n Es gibt zahlreiche M\u00f6glichkeiten, in einzelne Schritte dieses Prozesses einzugreifen. Diese sind in der Dokumentation des Bot Frameworks zu finden. Sie erm\u00f6glichen es beispielsweise mittels dependency injection in der Middleware den Kontext anzureichern und so weitere Informationen an die Nachrichten anzuh\u00e4ngen.<\/p>\n Im Bot selber greifen folgende Konzepte:<\/p>\n Die Connector Library im Bot SDK erm\u00f6glicht den Zugriff auf den Connector im Bot Framework Service, der die Nachrichten vom Kanal zum Bot und vom Bot zum Kanal weiterreicht.<\/p>\n Das Activity-Objekt ist das zentrale Objekt der Kommunikation und wird vom Connector verwendet, um Informationen vom und zum User an die Middleware und den Bot weiterzureichen. Die meisten Activity-Objekte sind Nachrichten, es kann aber auch andere Aktivit\u00e4ten geben.<\/p>\n Dialoge sind die Objekte, die den Ablauf einer Konversation steuern. Es k\u00f6nnen (und werden normalerweise) mehrere Dialoge implementiert werden, die sich auch gegenseitig aufrufen k\u00f6nnen. Dialoge sind die zentralen Objekte, die ihr in Bot-Projekten \u00fcblicherweise anpasst und erzeugt.<\/p>\n Form Flow kann in Bots verwendet werden, um die Informationserhebung zu steuern. Form Flow ist hilfreich, wenn es darum geht, dass \u2013 \u00e4hnlich einem Formular \u2013 mehrere Informationen erfasst werden m\u00fcssen, um eine Eingabe abzuschlie\u00dfen.<\/p>\n Im Bot Builder Framework kann der Status einer Konversation \u00fcber ein State-Objekt organisiert werden. Im State-Objekt sind beispielsweise vorherige Interaktion mit dem User gespeichert oder auch der Benutzer-Name, wenn ihr User pers\u00f6nlich begr\u00fc\u00dfen m\u00f6chtet.<\/p>\n Um einige dieser Konzepte in Aktion zu erleben, sehen wir uns nun an, wie unser Metal-Bot implementiert ist.<\/p>\n Unser Metal-Bot ist ziemlich einfach gestrickt, er erf\u00fcllt nur eine einzige Aufgabe und wir haben auch das Error-Handling und den Kommunikations-Ablauf auf ein Minimum reduziert.<\/p>\n Deshalb gibt es auch nur drei Klassen, die bei der Implementierung von Interesse sind (also f\u00fcr die Funktionalit\u00e4t genau genommen sogar nur 2 Klassen, die dritte Klasse, den MessagesController, fassen wir nur f\u00fcr ein kleines Gimmick an).<\/p>\n Die Klassen, in denen f\u00fcr den ersten Bot Code geschrieben werden muss sind die RootDialog Klasse enthalten in RootDialog.cs\u00a0 und eine Hilfsklasse namens MessageUtil in der entsprechenden .cs-Datei.<\/p>\n Zus\u00e4tzlich haben wir noch im MessagesController eine kleine \u00c4nderung vorgenommen, um die Konversation mit dem Bot etwas „menschlicher“ zu gestalten.<\/p>\n Wir verwenden in unserer Applikation nur einen Dialog, dieser ist standardm\u00e4\u00dfig der RootDialog. Wie der Konversations-Fluss f\u00fcr unseren „Bandempfehlungs“-Prozess aussehen sollte, haben wir in Abbildung 3 aufgezeichnet.<\/p>\n <\/p>\n Um uns zu merken, wo wir uns gerade in diesem Ablauf befinden (eine Empfehlung k\u00f6nnen wir schlie\u00dflich nicht abgeben ohne vorher das Bild bekommen und analysiert zu haben), haben wir in MessageUtil.cs ein Enum eingef\u00fchrt, das verschiedene Zust\u00e4nde unserer Konversation abbildet:<\/p>\n Die Zust\u00e4nde sind:<\/p>\n Den Status initialisieren wir in der Root Dialog Klasse nat\u00fcrlich als „Initiated“.<\/p>\n Doch bevor wir mit dem User interagieren m\u00f6chten wir ihn begr\u00fc\u00dfen. Das k\u00f6nnen wir entweder in der normalen Routine machen, wenn wir eine Nachricht empfangen oder wir k\u00f6nnen daf\u00fcr den „StartAsync“-Task verwenden, der beim Starten des Dialogs ausgef\u00fchrt wird.<\/p>\n Letztere Variante sieht dann wie folgt aus:<\/p>\n Die hier aufgerufene Methode aus der MessageUtil-Klsse, GetGreeting(), ist nur ein kleines Gimmick und w\u00e4hlt aus einer Auswahl an Begr\u00fc\u00dfungen zuf\u00e4llig eine aus:<\/p>\n Sehen wir uns MessageReceivedAsync an, die Methode, die die Middleware im OnTurn Handler aufruft. Dort m\u00fcssen wir unterschiedlich reagieren, je nachdem in welchem Stadium des Dialogs wir uns befinden. Deshalb haben wir dort eine if-Abfrage \u00fcber den Status des Dialogs:<\/p>\n Alle diese Bl\u00f6cke m\u00fcssen wir sicher nicht im Detail durchgehen, da hier nur verschiedene Fragen gestellt und verschiedene Status gesetzt werden. Spannend wird es dabei an der Stelle, wo wir dem User nicht einfach nur eine Frage stellen, sondern eine Klickbare Auswahl an Antworten zur Verf\u00fcgung stellen. Das geschieht \u00fcber die PromtDialog.Choice-Methode des Bot Frameworks. Wenn man dieser Methode eine Liste von strings \u00fcbergibt, zeigt sie (wenn der Client des Users das unterst\u00fctzt, was bei Skype beispielsweise nicht der Fall ist) eine Klickbare Auswahl an Optionen an. Diese Methode bekommt eine Callback-Funktion \u00fcbergeben, an die die Antwort weitergereicht wird, eine Liste von Strings und einen Nachrichtentext. Wir kapseln sie in einer eigenen Methode:<\/p>\n Die 3 ist dabei die Anzahl der erlaubten Fehlversuche bevor die Eingabe abgebrochen wird und der zweite String die Nachricht, die der User bei einer ung\u00fcltigen Eingabe erh\u00e4lt.<\/p>\n Sehen wir uns nun die MessageUtil-Klasse an. Sie beinhaltet neben einigen Enums und String-Arrays und Methoden, die diese aufeinander mappen auch unsere „Logik“ beispielsweise um eine Band bei vorgegebenem Genre auszuw\u00e4hlen:<\/p>\n Nahezu die gesamte Logik verl\u00e4uft nach diesem Schema. Sehen wir uns nun im n\u00e4chsten Schritt die Stelle an, die den Bot „intelligent“ macht.<\/p>\n Um zu erkennen, was f\u00fcr ein Getr\u00e4nk der User fotografiert hat, wollen wir im hochgeladenen Bild nach Text suchen, diesen erkennen und den erkannten Text einem Getr\u00e4nk zuordnen. Zum Gl\u00fcck f\u00fcr uns gibt es fertige Bibliotheken, die Text aus Bildern extrahieren. Noch gr\u00f6\u00dferes Gl\u00fcck ist es, dass Microsoft mit den Cognitive Services eine solche Bibliothek nicht nur als Bibliothek zur Verf\u00fcgung stellt sondern sogar als Service, der uns nach Upload eines Bildes an eine REST-Schnittstelle den Text im Bild zur\u00fcckliefert.<\/p>\n Um die Cognitive Services zu nutzen, legen wir uns im Azure Portal eine Ressource vom Typ „Computer Vision“ an.<\/p>\n In dieser Ressource m\u00fcssen wir uns den Endpunkt f\u00fcr die Kommunikation mit der Ressource notieren (1 in Abbildung 5) sowie die Keys (findet Ihr unter 2 in Abbildung 5).<\/p>\n Den Text in einem Bild zu detektieren ist nun ein relativ einfacher Aufruf dieser Ressource.<\/p>\n Zun\u00e4chst m\u00fcsst ihr einen HttpClient (im Namespace System.Net.Http) erzeugen, dem ihr euren Key als Default-Header hinzuf\u00fcgt:<\/p>\n Nun generiert ihr die URL, die f\u00fcr die Bilderkennung aufgerufen werden muss, diese bekommt neben dem Endpunkt eurer Computer Vision Ressource noch die Sprache (in unserem Fall „unknown“) und einen Parameter der besagt, dass der Algorithmus das Bild drehen darf, um den Text zu erkennen \u00fcbergeben:<\/p>\n Nun \u00fcbertragt ihr per POST request das Byte-Array des Bildes an die URL. Da die Bilder im Bot Framework nicht als Rohdaten an den Bot \u00fcbergeben werden sondern als Link in einem OneDrive-Ordner, laden wir es zun\u00e4chst mit dem WebClient herunter:<\/p>\n Dann \u00fcbergeben wir den Byte-Array an den Computer Vision Dienst und holen uns die Antwort:<\/p>\n Damit haben wir alle Bestandteile zusammen, um Text im Bild zu detektieren. Zur\u00fcckgegeben wird ein JSON Objekt, das wir nun serialisieren k\u00f6nnten, um uns ein Objekt zu erzeugen, das den Inhalt des Bildes widerspiegelt, in unserem sehr einfachen Fall durchlaufen wir aber nur ein Dictionary das als Key das Getr\u00e4nk und als Value eine Liste mit Keywords enth\u00e4lt und suchen, welche Keywords im JSON-String den die Vision API zur\u00fcckgibt enthalten sind:<\/p>\n Dieses Vorgehen ist nat\u00fcrlich sehr oberfl\u00e4chlich und alles andere als elegant, f\u00fcr unseren einfachen Proof of Concept funktioniert es aber gut genug.<\/p>\n F\u00fcr die Demos, die wir am SQL Saturday in M\u00fcnchen gezeigt haben, gen\u00fcgt eine Computer Vision API im Free Tier vollkommen, das hei\u00dft, die gesamte Entwicklung wie wir sie hier vorstellen, l\u00e4sst sich komplett kostenlos aufsetzen und testen.<\/p>\n Was nutzt uns das sch\u00f6nste Bot Framework und die sch\u00f6nste Idee f\u00fcr einen Bot, wenn wir beim Entwickeln nicht schnell testen und debuggen k\u00f6nnen? Nat\u00fcrlich besteht die M\u00f6glichkeit, Eure Bots auch lokal zu testen und die Entwicklung auch ohne teure Cloud-Ressourcen voran zu bringen. Daf\u00fcr ben\u00f6tigt ihr den Bot Framework Emulator von Microsoft (link, https:\/\/github.com\/Microsoft\/BotFramework-Emulator\/releases<\/a>). Wenn ihr den Emulator startet, habt ihr die M\u00f6glichkeit, einen neuen Bot zu erstellen oder euch mit einer vorhandenen Konfiguration zu verbinden. Beim ersten Start m\u00fcsst ihr nat\u00fcrlich ersteres tun. Auf dem folgenden Screen m\u00fcsst ihr nur einen URL Endpunkt f\u00fcr euren Bot angeben. Euren lokalen Endpunkt k\u00f6nnt ihr herausfinden, indem ihr euer Bot-Projekt im Visual. Studio (entweder \u00fcber Dr\u00fccken von F5 oder \u00fcber den „Debug-Button“ startet. Es \u00f6ffnet sich dann ein Browser-Fenster, in dem ihr den Port f\u00fcr euren Bot auf localhost in der Addresszeile finden k\u00f6nnt). Tragt also als URL f\u00fcr euren Bot http:\/\/localhost<\/a> gefolgt von einem Doppelpunkt und eurem Port gefolgt von „\/api\/messages“ ein, in meinem Fall beispielsweise http:\/\/localhost:3978\/api\/messages<\/a><\/p>\n Im Chat-Fenster dass sich nun \u00f6ffnet, k\u00f6nnt ihr mit eurem Bot kommunizieren (mit 1 in Abbildung 7 markiert). Auf der Rechten Seite des Fensters seht ihr ein Log (2 in Abbildung 7), das den Verlauf der Konversation zusammen mit den HTML Status Codes der einzelnen Nachrichten zeigt. Wenn ihr eine Nachricht hier oder im Chat-Fenster ausw\u00e4hlt, seht ihr im oberen rechten Teil des Fensters (3 in Abbildung 7) ein Transkript der Nachrichten, die \u00fcbermittelt wurden, im Beispiel habe ich die Nachricht mit dem Bild-Upload markiert, ihr seht den content-Type, der \u00fcbermittelt wurde (image\/jpeg) und den Link zum Bild (contenturl).<\/p>\n Das Microsoft Bot SDK ist ein m\u00e4chtiges Werkzeug um sehr einfach und sehr schnell einen eigenen Bot an den Start zu bekommen. Wenn ihr daran interessiert seid, k\u00f6nnt ihr hoffentlich mit dieser Anleitung in wenigen Stunden einen eigenen Bot beginnend von einem leeren Projekt programmieren. Wenn ihr euch mit der Technologie besch\u00e4ftigt, bin ich ziemlich sicher, dass euch viele Einsatzm\u00f6glichkeiten f\u00fcr Bots einfallen, ich freue mich \u00fcber Diskussionen mit euch \u2013 entweder hier im Kommentar-Bereich oder per Mail oder Twitter. Wir antworten auch pers\u00f6nlich, ohne Bot. Versprochen.<\/p>\n Happy Bot-ting.<\/p>\n","protected":false},"excerpt":{"rendered":" Bots sind eine spannende Erg\u00e4nzung zur Arbeit mit Daten in Unternehmen und er\u00f6ffnen den Mitarbeitern neue Wege, um mit Daten zu interagieren und sich Informationen zu beschaffen. Nachdem ich mich in den letzten Monaten einige Male mit dem Microsoft Bot SDK (link) besch\u00e4ftigen durfte, habe ich mich auf der Bahnfahrt zum SQL Saturday in M\u00fcnchen […]<\/p>\n","protected":false},"author":3,"featured_media":153,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":""},"categories":[10,18,20,19],"tags":[25,28,29,24,21],"jetpack_featured_media_url":"https:\/\/www.continuous-intelligence.de\/wp-content\/uploads\/2018\/10\/bot.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/pakiO5-2a","_links":{"self":[{"href":"https:\/\/www.continuous-intelligence.de\/wp-json\/wp\/v2\/posts\/134"}],"collection":[{"href":"https:\/\/www.continuous-intelligence.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.continuous-intelligence.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.continuous-intelligence.de\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.continuous-intelligence.de\/wp-json\/wp\/v2\/comments?post=134"}],"version-history":[{"count":14,"href":"https:\/\/www.continuous-intelligence.de\/wp-json\/wp\/v2\/posts\/134\/revisions"}],"predecessor-version":[{"id":155,"href":"https:\/\/www.continuous-intelligence.de\/wp-json\/wp\/v2\/posts\/134\/revisions\/155"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.continuous-intelligence.de\/wp-json\/wp\/v2\/media\/153"}],"wp:attachment":[{"href":"https:\/\/www.continuous-intelligence.de\/wp-json\/wp\/v2\/media?parent=134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.continuous-intelligence.de\/wp-json\/wp\/v2\/categories?post=134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.continuous-intelligence.de\/wp-json\/wp\/v2\/tags?post=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Gundelegende Konzepte im BOT SDK<\/h2>\n
Was macht das Framework mit Nachrichten?<\/h3>\n
![\"\"](\"https:\/\/www.continuous-intelligence.de\/wp-content\/uploads\/2018\/10\/Bot-Framework.png\")
<\/a>\n
Connector<\/h3>\n
Activity<\/h3>\n
Dialog<\/h3>\n
Form Flow<\/h3>\n
State<\/h3>\n
Implementierungsdetails<\/h2>\n
![\"\"](\"https:\/\/www.continuous-intelligence.de\/wp-content\/uploads\/2018\/10\/bot-solution-258x300.png\")
<\/a>Der Root Dialog<\/h3>\n
![\"\"](\"https:\/\/www.continuous-intelligence.de\/wp-content\/uploads\/2018\/10\/Conversation_flow.png\")
<\/a>\r\npublic enum State { \r\n INITIATED, \r\n IMAGE_TRIGGERED, \r\n AWAITING_IMAGE, \r\n GIVING_RECOMMENDATION, \r\n FINDING_BANDS }\r\n<\/pre>\n\n
\r\nState myState = State.INITIATED;\r\n<\/pre>\n
\r\npublic async Task StartAsync(IDialogContext context)\r\n{\r\n var activity = context.Activity;\r\n if (activity.From.Name != null)\r\n {\r\n userName = activity.From.Name.Split(' ')[0];\r\n }\r\n await context.PostAsync($"{MessageUtil.GetGreeting()}, {userName}. ");\r\n context.Wait(MessageReceivedAsync);\r\n await Task.CompletedTask;\r\n}\r\n<\/pre>\n\r\npublic static string GetGreeting()\r\n{\r\n int idx = new Random(Guid.NewGuid().GetHashCode()).Next(-0, Greetings.Count());\r\n return Greetings[idx];\r\n}\r\n<\/pre>\n\r\nif (myState == State.FINDING_BANDS) {\u2026}\r\nelse if (myState == State.GIVING_RECOMMENDATION) {\u2026}\r\nelse if (myState == State.AWAITING_IMAGE) {\u2026}\r\nelse if (myState == State.IMAGE_TRIGGERED)\r\nelse {\u2026}\r\n<\/pre>\n\r\nprivate void ShowOptions(\r\n IDialogContext context,\r\n string messagetext,\r\n List<string> Options)\r\n{\r\n PromptDialog.Choice(\r\n context, \r\n this.MessageReceivedAsync, \r\n Options, \r\n messagetext, \r\n "Was soll ich denn DAMIT anfangen?", \r\n 3);\r\n}\r\n<\/pre>\n\r\npublic static string GetBandForStyle(Style s)\r\n{\r\n Random r = new Random(Guid.NewGuid().GetHashCode());\r\n int idx = 0;\r\n switch (s)\r\n {\r\n case Style.BLACK_METAL:\r\n idx = r.Next(-0, BlackMetalBands.Count());\r\n return BlackMetalBands[idx];\r\n \u2026\r\n }\r\n}\r\n<\/pre>\nDie Bilderkennung<\/h2>\n
![\"\"](\"https:\/\/www.continuous-intelligence.de\/wp-content\/uploads\/2018\/10\/computer_vision_ressource-1024x284.png\")
<\/a>![\"\"](\"https:\/\/www.continuous-intelligence.de\/wp-content\/uploads\/2018\/10\/computer_vision_ressource_details-1024x517.png\")
<\/a>\r\nHttpClient client = new HttpClient();\r\nclient.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", subscriptionKey);\r\n<\/pre>\n\r\nstring requestParameters = "language=unk&detectOrientation=true";\r\nstring uri = uriBase + "?" + requestParameters;\r\n<\/pre>\n
\r\nHttpResponseMessage response;\r\nbyte[] imageBytes;\r\nusing (var webClient = new WebClient())\r\n{\r\n imageBytes = webClient.DownloadData(contentURL);\r\n}\r\n<\/pre>\n\r\nusing (ByteArrayContent content = new ByteArrayContent(imageBytes))\r\n{\r\n content.Headers.ContentType =\r\n new MediaTypeHeaderValue("application\/octet-stream");\r\n response = await client.PostAsync(uri, content);\r\n}\r\nstring contentString = await response.Content.ReadAsStringAsync();\r\n<\/pre>\n\r\nforeach (KeyValuePair<Drink, string[]> kvp in KeywordMappings)\r\n{\r\n foreach (string keyword in kvp.Value)\r\n {\r\n if (LabelText.ToLower().Contains(keyword.ToLower()))\r\n {\r\n if (results.ContainsKey(kvp.Key))\r\n {\r\n results[kvp.Key] += 1;\r\n }\r\n else\r\n {\r\n results[kvp.Key] = 1;\r\n }\r\n }\r\n }\r\n}\r\n<\/pre>\nTesten<\/h2>\n
![\"\"](\"https:\/\/www.continuous-intelligence.de\/wp-content\/uploads\/2018\/10\/bot_framework_emulator_test-1024x981.png\")
<\/a>Fazit<\/h2>\n