Tarjetas adaptables para desarrolladores de bots

  • Artículo

Las tarjetas adaptables son una excelente elección para los bots. Le permiten crear una tarjeta una vez y representarla perfectamente dentro de varias aplicaciones, como Microsoft Teams, su propio sitio web y mucho más.

Nota

Skype no se admite en la vista previa actual. Consulta la página de estado del asociado para obtener la versión más reciente.

Prueba

Haz clic en el siguiente vínculo y comunícate con nuestro bot de submarinismo. Di I'm looking for scuba y te ayudaremos a reservar el viaje de submarinismo de tus sueños.

Todas las respuestas del bot se crean con tarjetas adaptables.

Captura de pantalla del chat de submarinismo

Obtener el código: el código fuente del bot de submarinismo puede encontrarse en GitHub.

Integración de Bot Framework

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.

Tutorial

Es bastante sencillo agregar una tarjeta adaptable al bot.

Paso 0: Comenzar con un mensaje básico

Este es un estándar de carga de message de Bot Framework que se puede entregar en cualquier canal y mostrar texto al usuario.

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

Paso 1: Agregar una tarjeta adaptable attachment

Para agregar importancia más allá de solo texto, Bot Framework tiene un concepto de attachments.

Vamos a adjuntar una tarjeta adaptable que muestra el texto personalizado.

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 completas

Las tarjetas adaptables ofrecen mucho más que simplemente texto personalizable.

Puede hacer lo siguiente:

  • Agregar Images a la tarjeta
  • Organizar el contenido con Containers y Columns
  • Agregar varios tipos de Actions
  • Recopilar Input de los usuarios
  • Disponer de una tarjeta show another card
  • Consulta el explorador de esquemas completo.

SDK de plataforma

Si el bot se desarrolla con .NET o NodeJS, tenemos bibliotecas para facilitar aún más la compilación de tarjetas adaptables.

Plataforma Instalar Saber más
.NET Install-Package AdaptiveCards -IncludePrerelease Documentos .NET de Bot Framework
NodeJS npm install adaptivecards Documentos NodeJS de Bot Framework

Estado del canal

Bot Framework te permite publicar el bot en varios canales. Estamos trabajando con distintos canales para proporcionar compatibilidad completa para las tarjetas adaptables. Consulta la página de estado del asociado para obtener la versión más reciente.

¡Descúbrelo!

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.