Adaptive Karten für Bot-Entwickler

  • Artikel

Adaptive Karten eignen sich hervorragend für Bots. Damit kannst du eine Karte einmal erstellen und sie reibungslos in mehreren Apps wie Microsoft Teams, deiner eigenen Website usw. rendern.

Hinweis

Skype wird in der aktuellen Vorschauversion nicht unterstützt. Aktuelle Informationen findest du auf der Seite Partner.

Ausprobieren

Klicke auf den folgenden Link und sprich mit unserem Scuba-Bot. Sage I'm looking for scuba, und er hilft dir dabei, den Tauchurlaub deines Lebens zu buchen.

Alle Antworten des Bots wurden mit adaptiven Karten erstellt.

Screenshot: Scuba-Chat

Code abrufen: Den vollständigen Contoso Scuba Bot-Quellcode findest du auf GitHub.

Bot Framework-Integration

Mit dem Bot Framework kannst du einem einzelnen Bot schreiben, der mit Benutzern über mehrere „Kanäle“ wie Skype, Microsoft Teams, Facebook Messenger usw. chatten kann.

Exemplarische Vorgehensweise

Es ist recht einfach, eine adaptive Karte zu deinem Bot hinzuzufügen.

Schritt 0: Beginne mit einer einfachen Nachricht

Dies ist eine message-Standardnutzlast von Bot Framework, die für jeden Kanal bereitgestellt werden kann und dem Benutzer Text anzeigt.

{
   "type": "message",
   "text": "Plain text is ok, but sometimes I long for more..."
}

Schritt 1: Füge eine adaptive Karte hinzu attachment

Damit nicht nur Text eingefügt wird, verfügt das Bot Framework über das Konzept von attachments.

Im Folgenden fügen wir eine adaptive Karte hinzu, die benutzerdefinierten Text anzeigt.

Grundlegende adaptive Karte

{
  "type": "message",
  "text": "Plain text is ok, but sometimes I long for more...",
  "attachments": [
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "type": "AdaptiveCard",
        "version": "1.0",
        "body": [
          {
            "type": "TextBlock",
            "text": "Hello World!",
            "size": "large"
          },
          {
            "type": "TextBlock",
            "text": "*Sincerely yours,*"
          },
          {
            "type": "TextBlock",
            "text": "Adaptive Cards",
            "separation": "none"
          }
        ],
        "actions": [
          {
            "type": "Action.OpenUrl",
            "url": "http://adaptivecards.io",
            "title": "Learn More"
          }
        ]
      }
    }
  ]
}

Schritt 2: Erstelle noch umfassendere Karten

Adaptive Karten bieten viel mehr als nur anpassbaren Text.

Sie haben folgende Möglichkeiten:

  • Füge Images zu deiner Karte hinzu.
  • Organisiere deine Inhalte mit Containers und Columns.
  • Füge mehrere Typen von Actions hinzu.
  • Erfasse Input von deinen Benutzern.
  • Lass eine Karte eine andere anzeigen (show another card).
  • Sieh dir den vollständigen Schema-Explorer an!

Plattform-SDKs

Wenn dein Bot mit .NET oder NodeJS entwickelt wurde, haben wir Bibliotheken, die das Erstellen adaptiver Karten noch einfacher macht.

Plattform Installieren Erfahren Sie mehr
.NET Install-Package AdaptiveCards -IncludePrerelease Bot Framework-Dokumentation für .NET
NodeJS npm install adaptivecards Bot Framework-Dokumentation für NodeJS

Kanalstatus

Bot Framework ermöglicht es dir, deinen Bot für mehrere Kanäle zu veröffentlichen. Wir arbeiten mit verschiedenen Kanälen, um vollständige Unterstützung für adaptive Karten zu bieten. Aktuelle Informationen findest du auf der Seite Partner.

Jetzt eintauchen

In diesem Tutorial haben wir das Thema nur oberflächlich behandelt. Sieh dir daher die folgenden Links an, um mehr darüber zu erfahren, wie adaptive Karten deinen Bot optimieren können.