Tarjetas adaptables para desarrolladores de botsAdaptive Cards for Bot Developers

Las tarjetas adaptables son una excelente elección para los bots.Adaptive Cards are a great fit for Bots. Te permiten crear una tarjeta una vez y representarla perfectamente dentro de varias aplicaciones, como Microsoft Teams, su propio sitio web y mucho más.They let you author a card once and have it render beautifully inside multiple apps, like Microsoft Teams, your own website, and more.

Nota

Skype no se admite en la vista previa actual.Skype is not supported in the current preview. Consulta la página de estado del asociado para obtener la versión más reciente.See the Partner Status page for the latest.

PruébaloTry it out

Haz clic en el siguiente vínculo y comunícate con nuestro bot de submarinismo.Click the following link and talk to our Scuba Bot. Di I'm looking for scuba y te ayudaremos a reservar el viaje de submarinismo de tus sueños.Say I'm looking for scuba and it'll help you book the scuba trip of your dreams.

Todas las respuestas del bot se crean con tarjetas adaptables.All of the bot's responses are created with Adaptive Cards.

Captura de pantalla del chat de submarinismoScuba chat screenshot

Obtener el código: el código fuente del bot de submarinismo puede encontrarse en GitHub.Get the code: the full Contoso Scuba Bot source code can be found on GitHub.

Integración de Bot FrameworkBot Framework Integration

Con Bot Framework puedes escribir un bot único que es capaz de chatear con los usuarios a través de varios "canales", como 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.

tutorialWalkthrough

Es bastante sencillo agregar una tarjeta adaptable al bot.It's pretty straight forward to add an Adaptive Card to your bot.

Paso 0: Comenzar con un mensaje básicoStep 0: Start with a basic message

Este es un estándar de carga de message de Bot Framework que se puede entregar en cualquier canal y mostrar texto al usuario.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..."
}

Paso 1: Agregar un attachment de tarjeta adaptableStep 1: Add an Adaptive Card attachment

Para agregar importancia más allá de solo texto, Bot Framework tiene un concepto de attachments.To add some richness beyond just text, the Bot Framework has a concept of attachments.

Vamos a adjuntar una tarjeta adaptable que muestra el texto personalizado.Let's attach an Adaptive Card that displays custom text.

Tarjeta adaptable básica

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

Paso 2: Compilar tarjetas incluso más completasStep 2: Build even richer cards

Las tarjetas adaptables ofrecen mucho más que simplemente texto personalizable.Adaptive Cards offer much more than just customizable text.

Se puede hacer lo siguiente:You can:

  • Agregar Images a la tarjetaAdd Images to your card
  • Organizar el contenido con Containers y ColumnsOrganize your content with Containers and Columns
  • Agregar varios tipos de ActionsAdd multiple types of Actions
  • Recopilar Input de los usuariosCollect Input from your users
  • Disponer de una tarjeta show another cardHave one card show another card
  • Consulta el explorador de esquemas completo.Check out the full schema explorer!

SDK de la plataformaPlatform SDKs

Si el bot se desarrolla con .NET o NodeJS, tenemos bibliotecas para facilitar aún más la compilación de tarjetas adaptables.If your bot is developed using .NET or NodeJS we have libraries to make building Adaptive Cards even easier.

PlataformaPlatform InstalarInstall Más informaciónLearn more
.NET.NET Install-Package AdaptiveCards -IncludePrerelease Documentos .NET de Bot FrameworkBot Framework .NET Docs
NodeJSNodeJS npm install adaptivecards Documentos NodeJS de Bot FrameworkBot Framework NodeJS Docs

Estado del canalChannel status

Bot Framework te permite publicar el bot en varios canales.The Bot Framework lets you publish your bot to multiple channels. Estamos trabajando con distintos canales para proporcionar compatibilidad completa para las tarjetas adaptables.We're working with various channels to provide full support for Adaptive Cards. Consulta la página de estado del asociado para obtener la versión más reciente.See the Partner Status page for the latest.

¡Descúbrelo!Dive in!

Hemos examinado este tutorial superficialmente, por que puedes echar un vistazo a los siguientes vínculos para explorar más formas en que las tarjetas adaptables pueden mejorar el bot.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.