Blazor - Web API e HttpClientFactory - I

Neste tutorial veremos como criar uma aplicação Blazor Server que interage com uma WEb API externa usando o HttpClientFactory.

Vamos iniciar criando uma Web API e a seguir mostrar como acessar essa API usando uma aplicação do tipo Blazor Server.

Vamos criar um projeto Blazor Server padrão que possui os seguintes recursos:

  1. Blazor Server :  Nesse modelo de hospedagem, o aplicativo é executado no servidor a partir de um aplicativo ASP.NET Core. Atualizações da interface do usuário, manipulação de eventos e chamadas JavaScript são tratadas em uma conexão SignalR. Esse modal de execução está disponível na versão estável atual do .Net Core (3.1) e o modelo de projeto para criar o aplicativo Blazor Server é lançado com o Visual Studio 2019 16.4.

Mas o que vem a ser o HttpClientFactory ?

O HttpClientFactory foi projetado para:

Vamos iniciar criando a biblioteca compartilhada da nossa solução.

Recursos usados:

Criando a biblioteca Compartilhada no VS Community 2019

Vamos iniciar criando uma biblioteca compartilhada .NET Standard que conterá os modelos a serem usados na solução. Os modelos contidos na biblioteca compartilhada serão referenciados pela API e pelo front-end do aplicativo Blazor.

Uma biblioteca de classes .NET Standard pode ser adicionada como referência a todos os aplicativos Web .NET Core (MVC, Razor Pages e Blazor) e também pode ser incluída como referência em um projeto Xamarin se você decidir criar um dispositivo móvel.

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

A seguir selecione a opção Class Library(.NET Standard) e clique em next;

Informe o nome do projeto :  Blazor_Contatos.Shared e o nome da solução como Blazor_Contatos e clique em Create;

Abaixo temos na janela Solution Explorer a solução e o projeto criado:

Podemos remover o arquivo Class1.cs criado.

A seguir vamos criar uma pasta chamada Models no projeto Blazor_Contatos.Shared e nesta pasta criar a classe Contato :

Agora vamos instalar dois pacotes em nosso projeto :

  1. Install-Package System.ComponentModel.Annotations


  2. Install-Package System.Text.Json.Serialization;

   

O primeiro será usado para realizar a validação de dados no banco de dados e na aplicação Blazor, e, podemos usar os seus recursos para definir campos obrigatórios, restrições de comprimento, caracteres válidos, etc.

O segundo é usado como uma biblioteca de serialização JSON onde podemos garantir que as propriedades públicas em nosso modelo estarão vinculadaas às propriedades JSON corretas geradas pela API.

Com isso podemos definir as validações e a serialização em nossa classe Contato :

O atributo [Key] pode ser usado ao anexar o modelo a um banco de dados.(Na verdade, nesse caso ele não é necessário, porque uma propriedade com o nome Id será automaticamente usada como a chave em uma entrada do banco de dados), e, o atributo [Required] indica um campo obrigatório.

Criando a nossa Web API
Vamos criar a  nossa Web API que será usada para incluir, excluir e buscar informações dos contatos.

Vamos incluir um novo projeto do tipo ASP .NET Core Web API com o nome Blazor_Contatos.API.

No menu File selecione Add-> New Project e selecione o template ASP .NET Core Web Application:

Clique em Next e informe o nome do projeto : Blazor_Contatos.API

Clique no botão Create e a seguir selecione API e marque apenas para configurar o HTTPS.

Ao final clique em Create:



Agora nossa solução contém dois projetos, o projeto Shared e a nossa Web API :

No projeto Web API podemos remover a classe WeatherForecast.cs e o controlador da pasta Controllers.

Vamos incluir uma referência ao projeto Shared no projeto da Web API.

Clique com o botão direito do mouse no projeto Blazor_Contatos.API e selecione Add-> Reference; a seguir marque o projeto Blazor_Contatos.Shared e clique em OK:

Criando o controlador ContatosController

Vamos criar o nosso controlador que representa a nossa API.

Clique com o botão direito do mouse no diretório Controllers do projeto API e selecione Add->Controller.

Selecione a opção API Controller - Empty e clique em Add.

Informe o nome do controlador como ContatosController e clique em Add:

Agora já podemos criar o código em nosso controlador.

Neste exemplo não vamos usar um banco de dados, ao invés, vamos trabalhar com dados dos contatos na memória  e para isso vamos definir um método para gerar contatos de forma dinâmica em nosso controlador:

Criaremos o método GeraContatos() que vai gerar os dados para o nosso projeto:

A seguir podemos criar os métodos HTTP Get, Post, Put e Delete para realizar as operações de acesso e persistência dos dados dos contatos.

using Blazor_Contatos.Shared.Models;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Linq;
namespace Blazor_Contatos.API.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ContatosController : ControllerBase
    {
        private static readonly List<Contato> contatos = GeraContatos(10);
        private static List<Contato> GeraContatos(int numero)
        {
            return Enumerable.Range(1, numero).Select(index => new Contato
            {
                Id = index,
                Nome = $"Nome{index} Sobrenome{index}",
                Email = $"email{index}@teste.com",
                Telefone = $"+11 555 987{index}",
            }).ToList();
        }    
        [HttpGet]
        public ActionResult<List<Contato>> GetContatos()
        {
            return contatos;
        }
        // GET: api/contatos/5
        [HttpGet("{id}")]
        [ProducesResponseType(StatusCodes.Status404NotFound)]
        public ActionResult<Contato> GetContatoPorId(int id)
        {
            var contato = contatos.FirstOrDefault((p) => p.Id == id);
            if (contato == null)
                return NotFound();
            return contato;
        }
        // POST: api/contatos
        [HttpPost]
        public void AdicionaContato([FromBody] Contato contato)
        {
            contatos.Add(contato);
        }
        // PUT: api/contatos/5
        [HttpPut("{id}")]
        public void EditaContato(int id, [FromBody] Contato contato)
        {
            int index = contatos.FindIndex((p) => p.Id == id);
            if (index != -1)
                contatos[index] = contato;
        }
        // DELETE: api/contatos/5
        [HttpDelete("{id}")]
        public void Delete(int id)
        {
            int index = contatos.FindIndex((p) => p.Id == id);
            if (index != -1)
                contatos.RemoveAt(index);
        }
    }
}

Neste código destacamos o seguinte:

A rota definida para o controlador :  [Route("api/[controller]")]

Especifica que o acesso será feito acessando: api/contatos

O atributo [ApiController] permite decorar os controladores habilitando novos recursos como :

A classe ControllerBase fornece acesso a várias propriedades e métodos sendo mais adequada para Web APIs.

Temos dois métodos GET, um para buscar todos os contatos e outro para obter contatos individuais por ID.

A seguir temos um método POST para adicionar um novo contato. O método PUT usado para atualizar um contato existente e o método DELETE excluirá um contato por ID.

Para concluir vamos alterar as configurações de inicialização da aplicação no arquivo launchsettings.json:

Neste momento podemos definir o projeto WEb API para iniciar (Set as Startup Project) e executar o projeto. Assim iremos obter o resultado abaixo:

Vemos nossa Web API exibindo os dados dos contatos conforme esperado.

Na segunda parte do artigo vamos criar a aplicação Blazor Server.

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

"Portanto, agora nenhuma condenação há para os que estão em Cristo Jesus, que não andam segundo a carne, mas segundo o Espírito."
Romanos 8:1

Referências:

José Carlos Macoratti