Blazor - Usando Adaptive Cards

Blazor - Usando Adaptive Cards

Hoje veremos como usar um recurso chamado Adpative Cards em um projeto Blazor Server side.

O recurso Adaptive Cards para Blazor é um projeto da comunidade que fornece suporte para placas adaptáveis para seus aplicativos Blazor. Eles são uma maneira de trocar conteúdo de maneira comum e consistente.

Os cartões adaptáveis podem ser integrados em diferentes aplicativos, como Microsoft Teams e Outlook e também podem ser integrados a aplicativos personalizados criados com .NET, iOS e JavaScript. E agora no Blazor, a nova plataforma de aplicativos da Web da Microsoft também suporta este recurso.

Para mais detalhes sobre a documentação acesse o link: https://www.adaptivecardsblazor.com/

Aqui estão alguns dos recursos mais notáveis desta biblioteca:

Suporte a JSON: Crie e exiba Cartões Adaptáveis a partir de um esquema JSON;
Modelo: Combine modelos (objetos) e o schema;
Coleções de cartões: Exiba uma lista de cartões com base no modelo e use o seletor de modelos para personalizar a saída;
Suporte à ação: Manipule as ações Submit e OpenUrl usando C#;
Solução nativa baseada em .NET: Os Blazor Adaptive Cards são baseados no .NET SDK oficial para Adpative Cards;

A biblioteca do Adpative Cards tem como alvo a versão Blazor do lado do servidor, lançada no .NET Core 3.0 e esta disponível como um pacote Nuget : AdaptiveCardsBlazor

Neste artigo eu vou me basear no exemplo da documentação onde vamos criar uma aplicação Blazor do lado do servidor que usa cartões para exibir a previsão do tempo.

Recursos usados:

Criando o projeto Blazor Server no VS Community 2019

bra o VS 2019 Community (versão mínima 16.4) e selecione a opção Create a New Project;

A seguir selecione a opção Blazor app e clique em next;

Informe o nome do projeto : Blazor_ToastNotification1, a localização e clique em Create;

A seguir teremos uma janela com duas opções :

Blazor Server App
Blazor WebAssembly App

Selecione a primeira opção - Blazor Server App. Não vamos usar autenticação e vamos habilitar o https.

Clique no botão Create para criar o projeto.

Podemos executar a aplicação pressionando F5 e veremos a página padrão do template exibida no navegador.

Antes de prosseguir vamos limpar o projeto excluindo os arquivos abaixo e suas referências:

Counter.razor
WeatherForecast.razor
WeatherForecast.cs
WeatherForecastService.cs

Vamos também ajustar o arquivo NavMenu.razor deixando apenas a opção Previsão do Tempo conforme o código a seguir:

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Previsão do Tempo
            </NavLink>
        </li>
    </ul>
</div>

Agora com o projeto criado e os ajustes feitos vamos precisar instalar a biblioteca AdaptiveCardsBlazor.

Podemos usar a janela do Package Manager e digitar os comandos:

Install-Package AdaptiveCardsBlazor -Version 2.0.0

Ou usar a opção Manage Nuget Packages for Solution do menu Tools e na guia Browse selecionar os pacotes acima.

Com a biblioteca instalada podemos prosseguir.

Configurando a aplicação

Agora precisamos registrar o serviço do Adaptive Cards no método ConfigureServices da classe Startup:

 public void ConfigureServices(IServiceCollection services)
 {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            services.AddBlazorAdaptiveCards();
 }

Precisamos também adicionar o arquivo de interoperabilidade JavaScript necessário na seção <head> do arquivo _Host.cshtml da pasta Pages do projeto:

...
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Blazor AdaptiveCards</title>
   <base href="~/" />
   <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
   <link href="css/site.css" rel="stylesheet" />
    <script src="_content/AdaptiveCardsBlazor/adaptiveCardsJsInterop.js"></script>
</head>
...

Para facilitar o uso dos componentes fornecidos pelo Adaptive Cards for Blazor, vamos incluir uma referência a biblioteca no arquivo _Imports.razor:

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using Blazor_AdaptiveCards1
@using Blazor_AdaptiveCards1.Shared
@using AdaptiveCards.Blazor

Agora que já temos tudo preparado, está quase na hora de começar a desenhar algumas cards. Mas antes disso, precisamos de um esquema.

Definindo o schema JSON

Um cartão adaptativo é apresentando por um esquema JSON.

Para entender melhor o esquema, o site de amostra dos cartões adaptativos contém quase 20 esquemas diferentes para serem executados.

Quando você encontra um esquema interessante, pode copiá-lo e colá-lo no Adaptive Cards Designer. O designer permite editar o esquema e ver as alterações em tempo real.

Vamos usar o schema JSON disponível neste link : https://adaptivecards.io/samples/WeatherCompact.html (você deve copiar o template JSON)

Eu fiz algumas adaptações no arquivo original e abaixo esta o código do arquivo JSON que eu usei no exemplo:

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "Quente",
      "size": "large",
      "isSubtle": true
    },
    {
      "type": "TextBlock",
      "text": "Fevereiro 28, 8:30 AM",
      "spacing": "none"
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "Image",
              "url": "http://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Square.png",
              "size": "small"
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "TextBlock",
              "text": "29",
              "size": "extraLarge",
              "spacing": "none"
            }
          ]
        },
        {
          "type": "Column",
          "width": "stretch",
          "items": [
            {
              "type": "TextBlock",
              "text": "C",
              "weight": "bolder",
              "spacing": "small"
            }
          ]
        },
        {
          "type": "Column",
          "width": "stretch",
          "items": [
            {
              "type": "TextBlock",
              "text": "Maxima: 30",
              "horizontalAlignment": "left"
            },
            {
              "type": "TextBlock",
              "text": "Minima: 21",
              "horizontalAlignment": "left",
              "spacing": "none"
            }
          ]
        }
      ]
    }
  ]
}

O schema dos Adaptive Cards geralmente é usado em seu aplicativo por meio de uma API ou um endpoint.

Como estamos criando apenas um aplicativo cliente neste guia, vamos armazenar o esquema como um arquivo. Este arquivo fará parte do projeto e poderemos ler o arquivo da pasta do projeto, quando necessário.

Para incluir este arquivo no projeto faça o seguinte:

Clique com o botão direito do mouse sobre o projeto e selecione Add -> New Item;
Na janela selecione o item JSON file e informe o nome WeatherSchema.json;

Copie e cole o conteúdo JSON neste arquivo

Pronto, agora já temos o nosso esquema. Para que nosso aplicativo possa ler o arquivo, precisamos garantir que o o mesmo seja copiado no diretório de execução do aplicativo.

Selecione as propriedades do arquivo e verifique se está definido como "Copy if newer":

Criando o Componente para exibir o Cartão

Agora vamos abrir o arquivo Index.razor na pasta Pages e incluir o código abaixo:

@page "/"

<h3>Usando Adaptive Cards para Blazor!</h3>

Cartão para previsão do tempo:

<div class="row">
    <div class="col-6">
        <AdaptiveCard Schema="@schema"></AdaptiveCard>
    </div>
</div>
@code{
    string schema = "";

    protected override void OnInitialized()
    {
        schema = System.IO.File.ReadAllText("WeatherSchema.json");
    }
}

Neste código estamos usando o Adaptive Card e definindo o schema fazendo a leitura do arquivo JSON.

Para dar uma aparência melhor ao cartão usado vamos usar um arquivo CSS que esta disponível neste link: github

Podemos fazer o download do arquivo e adicioná-lo como uma folha de estilo adicional ao nosso aplicativo ou copiar e colar o conteúdo no site.css.

No exemplo deste artigo eu copiei e colei o conteúdo no final do arquivo site.css da pasta www.root/css do projeto.

Agora é só alegria...

Executando o projeto teremos o resultado abaixo:

Em outro artigo veremos como incluir ações aos cartões usados via Adaptive Cards.

Pegue o projeto aqui: Blazor_AdaptiveCards1.zip (sem as referências)

"Portanto, não te envergonhes do testemunho de nosso Senhor, nem de mim, que sou prisioneiro seu; antes participa das aflições do evangelho segundo o poder de Deus,
Que nos salvou, e chamou com uma santa vocação; não segundo as nossas obras, mas segundo o seu próprio propósito e graça que nos foi dada em Cristo Jesus antes dos tempos dos séculos;"
2 Timóteo 1:8,9

Referências:

José Carlos Macoratti