Adaptive Cards: Um Guia Detalhado

Introdução

Adaptive Cards são snippets de UI (Interface de Usuário) independentes de plataforma, criados em JSON, que aplicativos e serviços podem trocar abertamente. Quando entregues a um aplicativo específico, o JSON é transformado em uma UI nativa que se adapta automaticamente ao seu ambiente. Isso facilita o design e a integração de interfaces leves para todas as principais plataformas e frameworks ¹.

Linha do Tempo dos Adaptive Cards

2017:
- Lançamento Inicial: Introdução dos Adaptive Cards pela Microsoft como uma forma de padronizar a apresentação de cartões em várias plataformas.
2018:
- Integração com Microsoft Teams e Outlook: Expansão do suporte para incluir Microsoft Teams e Outlook, permitindo a criação de mensagens acionáveis diretamente nesses aplicativos ¹.
2019:
- Suporte a Windows Timeline: Integração com a linha do tempo do Windows 10, permitindo que os usuários retomem atividades em qualquer dispositivo ³.
2020:
- Atualização do Syntax de Template: Introdução de mudanças significativas na linguagem de template, incluindo a nova sintaxe de binding ⁴.
2021:
- Expansão do Ecossistema: Adoção crescente por várias plataformas e frameworks, aumentando a versatilidade e o alcance dos Adaptive Cards ¹.

Tecnologias e Linguagens Envolvidas

JSON:
- Descrição: Os Adaptive Cards são definidos usando JSON, um formato leve de troca de dados. O JSON descreve a estrutura e o conteúdo do cartão, que é então renderizado nativamente pelo aplicativo host ¹.
SDKs de Renderização:
- Descrição: Existem SDKs disponíveis para várias plataformas, incluindo .NET, JavaScript, iOS e Android, que permitem a renderização nativa dos Adaptive Cards ¹.
Linguagem de Template:
- Descrição: A linguagem de template permite a separação dos dados do layout no Adaptive Card. Isso facilita a criação de um cartão uma vez e a sua reutilização com diferentes conjuntos de dados ⁴.
Binding de Dados:
- Descrição: O binding de dados é feito usando expressões dentro do JSON, permitindo que os dados dinâmicos sejam inseridos no cartão no momento da renderização ⁴.

Exemplos Detalhados de Aplicação

Microsoft Teams:
- Exemplo: Um bot no Microsoft Teams pode usar Adaptive Cards para coletar feedback dos usuários. O cartão pode incluir campos de entrada para texto, botões de ação e imagens, proporcionando uma experiência interativa e envolvente.
{ "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "text": "Por favor, forneça seu feedback", "weight": "bolder", "size": "medium" }, { "type": "Input.Text", "id": "feedback", "placeholder": "Digite seu feedback aqui..." } ], "actions": [ { "type": "Action.Submit", "title": "Enviar" } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.3" }
Outlook Actionable Messages:
- Exemplo: Um e-mail pode incluir um Adaptive Card que permite ao destinatário aprovar ou rejeitar uma solicitação diretamente na mensagem. Isso aumenta a eficiência e reduz a necessidade de abrir aplicativos adicionais.
{ "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "text": "Aprovar solicitação de viagem?", "weight": "bolder", "size": "medium" }, { "type": "TextBlock", "text": "Solicitante: João Silva" }, { "type": "TextBlock", "text": "Destino: São Paulo" } ], "actions": [ { "type": "Action.Submit", "title": "Aprovar", "data": { "action": "approve" } }, { "type": "Action.Submit", "title": "Rejeitar", "data": { "action": "reject" } } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.3" }
Windows Timeline:
- Exemplo: Um aplicativo UWP pode usar Adaptive Cards para mostrar atividades recentes na linha do tempo do Windows 10, permitindo que os usuários retomem tarefas de onde pararam.
{ "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "text": "Atividade Recente", "weight": "bolder", "size": "medium" }, { "type": "TextBlock", "text": "Você editou um documento em 23/08/2024" } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.3" }