Cartes adaptatives pour développeurs de botsAdaptive Cards for Bot Developers

Les cartes adaptatives conviennent parfaitement aux bots.Adaptive Cards are a great fit for Bots. Vous pouvez créer une carte une bonne fois pour toutes et la présenter dans différentes applications, comme Microsoft Teams, votre site web, etc.They let you author a card once and have it render beautifully inside multiple apps, like Microsoft Teams, your own website, and more.

Notes

Skype n'est pas pris en charge dans la préversion actuelle.Skype is not supported in the current preview. Consultez la page Statut partenaire pour accéder aux dernières informations.See the Partner Status page for the latest.

Essayer MSIXTry it out

Cliquez sur le lien suivant et parlez à notre Scuba Bot.Click the following link and talk to our Scuba Bot. Dites I'm looking for scuba et il vous aidera à réserver le voyage de plongée de vos rêves.Say I'm looking for scuba and it'll help you book the scuba trip of your dreams.

Toutes les réponses du bot sont créées à l'aide de cartes adaptatives.All of the bot's responses are created with Adaptive Cards.

Capture d'écran de la conversation de plongéeScuba chat screenshot

Obtenez le code : le code source complet de Contoso Scuba Bot est disponible sur GitHub.Get the code: the full Contoso Scuba Bot source code can be found on GitHub.

Intégration de Bot FrameworkBot Framework Integration

Bot Framework vous permet de créer un bot capable de converser avec des utilisateurs sur plusieurs « canaux », comme Skype, Microsoft Teams, Facebook Messenger, etc.With the Bot Framework you can write a single bot that is able to chat with users across multiple "channels", like Skype, Microsoft Teams, Facebook Messenger, etc.

DémonstrationWalkthrough

L'ajout d'une carte adaptative à votre bot est très simple.It's pretty straight forward to add an Adaptive Card to your bot.

Étape 0 : commencez avec un message de baseStep 0: Start with a basic message

Voici une charge utile message d'un Bot Framework standard qui peut être transmise à n'importe quel canal et afficher du texte à l'utilisateur.Here's a standard Bot Framework message payload that can be delivered to any channel and display text to the user.

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

Étape 1 : ajoutez une carte adaptative attachmentStep 1: Add an Adaptive Card attachment

Pour enrichir le contenu en plus du texte, le Bot Framework utilise le concept de attachments.To add some richness beyond just text, the Bot Framework has a concept of attachments.

Joignons une carte adaptative affichant du texte personnalisé.Let's attach an Adaptive Card that displays custom text.

Carte adaptative de base

{
  "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"
          }
        ]
      }
    }
  ]
}

Étape 2 : créez des cartes encore plus richesStep 2: Build even richer cards

Les cartes adaptatives offrent bien plus que du texte personnalisable.Adaptive Cards offer much more than just customizable text.

Vous pouvez :You can:

  • Ajouter des Images à votre carteAdd Images to your card
  • Organiser votre contenu avec des Containers et des ColumnsOrganize your content with Containers and Columns
  • Ajouter différents types d'ActionsAdd multiple types of Actions
  • Recueillir des Input auprès de vos utilisateursCollect Input from your users
  • Faire en sorte qu'une carte affiche une autre carte : show another cardHave one card show another card
  • Accédez à l'Explorateur de schémas complet !Check out the full schema explorer!

Kits de développement logiciels (SDK) pour plateformesPlatform SDKs

Si vous développez votre bot via .NET ou NodeJS, nous disposons de bibliothèques pour faciliter la création de cartes adaptatives.If your bot is developed using .NET or NodeJS we have libraries to make building Adaptive Cards even easier.

Plate-formePlatform InstallerInstall Pour en savoir plusLearn more
.NET.NET Install-Package AdaptiveCards -IncludePrerelease Documentation Bot Framework .NETBot Framework .NET Docs
NodeJSNodeJS npm install adaptivecards Documentation Bot Framework NodeJSBot Framework NodeJS Docs

État du canalChannel status

Bot Framework vous permet de publier votre bot sur différents canaux.The Bot Framework lets you publish your bot to multiple channels. Nous utilisons différents canaux pour fournir un support complet aux cartes adaptatives.We're working with various channels to provide full support for Adaptive Cards. Consultez la page Statut partenaire pour accéder aux dernières informations.See the Partner Status page for the latest.

Lancez-vous !Dive in!

Ce didacticiel ne fait qu'effleurer le sujet. Nous vous invitons donc à utiliser les liens ci-dessous pour en savoir plus sur l'amélioration de votre bot à l'aide de cartes adaptatives.We've just scratched the surface in this tutorial, so please take a look at the links below to explore more ways that Adaptive Cards can enhance your bot.