Deep Dive - Web App Bot in Microsoft Teams nutzen

Chatvorlagen mit Web App Bot in Microsoft Teams erstellen

Das neue Microsoft Teams Plug-in soll Vorlagen für Mitarbeiterinnen und Mitarbeiter zur Verfügung stellen, die jederzeit im Chat verschickt werden können. Somit lassen sich auch während eines Anrufs bequem Nachrichten versendet werden. Man suche nur noch nach der richtigen Vorlage, klickt auf die Schaltfläche und verschickt im Handumdrehen sein selbst erstelltes Chat-Template. Wir zeigen, wie das Web App Bot in Microsoft Teams eingesetzt wird.

Web App Bot im Azure Portal erstellen

1. Klick auf die Schaltfläche „Ressource erstellen“, dann „KI + Machine Learning“ und als letztes auf den „Web App Bot“.

2. Den Namen des Web App Bot im Eingabefeld „Bot-Handle“ eintragen (dieser Name ist später editierbar) und bei „App-Name“ den App-Service benennen (Endpunkt-URL).

3. In der Auswahl „Bot-Vorlage“ den Echo Bot (C#) auswählen, dann alle weiteren Pflichtfelder ausfüllen und als letztes auf die Schaltfläche „Erstellen“ klicken.

4. Klick auf die Schaltfläche „Alle Ressourcen“ und suche nach dem erstellten Web App Bot

5. Klick auf die Schaltfläche „Erstellen“ und dann auf „Bot-Quellcode herunterladen“

Grundfunktionen des Bots in C# programmieren

Voraussetzung

Framework: ASP.NET Core 3.1, Microsoft.Bot.Builder.Integration.AspNet.Core 4.8.0
Microsoft.EntityFrameworkCore.Cosmos 5.0.0

Methode für die Auflistung und das Auffinden der Vorlagen

„SearchCards“ ist der Parameter für das Sucheingabefeld in Teams und „newFilter“ ist ein String für den Suchbegriff
„HerocCard“ ist das Format der Vorlagen. Diese werden auf die Parameter „filter“ und „tenant-id“ überprüft (Die TenantId ist die Zugriff-ID der Teams Organisation)
Das Objekt „MessagingExtensionResult“ listet alle HeroCard-Attachments auf, die mit den Parametern übereinstimmen und es wird als MessagingExtensionResponse zurückgegeben.


public class TeamsMessagingExtensionsActionBot : TeamsActivityHandler {
       protected override async Task
       OnTeamsMessagingExtensionQueryAsync
        (ITurnContext turnContext, MessagingExtensionQuery
       query, ancellationToken cancellationToken)
{
var filter = "";
if (query.Parameters != null) {
}
   var newFilter = query.Parameters.FirstOrDefault(p => p.Name == "SearchCards");
   if (newFilter != null) {
      filter = newFilter.Value.ToString(); }
   }
   string tenantId = turnContext.Activity.ChannelData.tenant.id; var functionresult = GetHeroCardAttachments(filter, tenantId); var messageResults = new MessagingExtensionResponse
   {
      ComposeExtension = new MessagingExtensionResult {
          Type = "result",
          AttachmentLayout = "list", Attachments = functionresult.Result
   }
};
return messageResults;

Methode für das Erstellen und Löschen der Vorlage

„createCard“ und „removeCard“ sind die Parameter für die Aktionen in Teams
Die Chatvorlagen werden in diesem Beispiel in einer Azure Cosmos DB gespeichert
Wenn eine Karte gelöscht worden ist, meldet sich der Bot, dass der Vorgang abgeschlossen ist.



protected override async Task
       OnTeamsMessagingExtensionSubmitActionAsync
         (ITurnContext turnContext, MessagingExtensionAction
       action, CancellationToken cancellationToken)
{
   switch (action.CommandId) {
   // These commandIds are defined in the Teams App Manifest.
   case "createCard":
      var createCardData =
          ((JObject)action.Data).ToObject();
          string tenantId = turnContext.Activity.ChannelData.tenant.id;
          createKachelInCosmosDb(tenantId, createCardData.Subject, createCardData.Body);
          return null; 
   case "removeCard":
      var createCardData2 = ((JObject)action.Data).ToObject(); abgeschlossen");
      string tenantId2 = turnContext.Activity.ChannelData.tenant.id; var isremoved = removeKachelInCosmosDb(tenantId2, createCardData2.Subject, createCardData2.Body);
      if (isremoved)
         {
         MessagingExtensionActionResponse response = new MessagingExtensionActionResponse();
         response.ComposeExtension = new MessagingExtensionResult() { Type = "message", Text = "Die Vorlage wurde erfolgreich entfernt" };
         await turnContext.SendActivityAsync("Vorgang
         return response;
    }
    return null;
default:
    throw new NotImplementedException($"Invalid CommandId: {action.CommandId}");
} }

Dies sind die Attribute für die Chatvorlagen als Model



public class ChatVorlage
          {
           [Key]
           public Guid Id { get; set; }
           public string TenantId { get; set; }
           public string ChannelId { get; set; }
           public string Subject { get; set; }
           public string Body { get; set; }
          }

Hier werden die Chatvorlagen aus der Azure Cosmos Datenbank abgerufen und in einer einfachen Liste gespeichert




private List GetCardsFromCosmosDb(string filter, string tenantId)
{
   var cardsList = new List();
   using (var dbContext = new chatVorlagenDbContext()) {
      List cosmosVorlagen;
      if (string.IsNullOrWhiteSpace(filter))
         cosmosVorlagen = dbContext.ChatVorlagen.ToList();// Where(vo => vo.TenantId == tenantId).ToList();
      else
         cosmosVorlagen = dbContext.ChatVorlagen.Where(vo => vo.TenantId == tenantId && vo.Subject != null && vo.Subject.Contains(filter)).ToList();
             foreach (var vorlage in cosmosVorlagen)
             {
                 var heroCard = new ThumbnailCard() {
                 Title = vorlage.Subject, Text = vorlage.Body, };
                 Attachment attachment = new Attachment() {
                    ContentType = ThumbnailCard.ContentType, Content = heroCard };
                    MessagingExtensionAttachment messagingExtensionAttachment =
                               new MessagingExtensionAttachment()
                 {
                 ContentType = HeroCard.ContentType, Content = heroCard, Preview = attachment,};
                 cardsList.Add(messagingExtensionAttachment); }
         }
         return cardsList;

Im folgenden Codefragment wird die Liste der Chatvorlagen in das richtige Ausgabeformat MessagingExtensionAttachments konvertiert



private async Task<List>
          GetHeroCardAttachments(string filter, string tenantId)
          {
var attachments = new List(); var cardsList = GetCardsFromCosmosDb(filter, tenantId);
           foreach (var card in cardsList)
           {
attachments.Add(card); return attachments;
}

Teams Bot im App Studio einrichten und mit Azure verbinden

Klick auf die Schaltfläche „Apps“ in Microsoft Teams, suche nach dem „App Studio“ im Eingabefeld und mache einen Download durch einen Klick auf die Schaltfläche „Herunterladen“

Klick auf die Schaltfläche „App Studio“, dann auf „Manifest editor“ und zum Schluss auf „Create a new app“

Erstelle einen „Namen“ und eine „ID“ für die App. Danach müssen alle weiteren Pflichtfelder ausgefüllt werden.

Klicke auf die Schaltfläche „Bots“ und erstelle einen Bot mit dem Messaging End Point des Azure Web App Bot, den man im Portal in der Übersicht findet