.NET: desenvolvendo aplicações web modernas com Blazor

O projeto Blazor - Apresentação

Apresentando o curso de Blazor WebAssembly

Olá! Sejam muito bem-vindos ao curso de Blazor WebAssembly. Já nos perguntamos se é possível criar aplicações web interativas e completas utilizando apenas a linguagem C#, sem a necessidade de JavaScript no front-end. Neste curso, vamos explorar os poderes do Blazor WebAssembly, aprendendo a construir uma aplicação robusta da Screensound.

Meu nome é Marcelo Oliveira, faço parte da Escola de Programação da Alura, e para fins de acessibilidade, vou me autodescrever.

Audiodescrição: Marcelo é um homem branco, com cabelos e barba pretos. Ele usa óculos e está vestido com uma camiseta azul. Ao fundo, há uma parede iluminada com as cores azul e roxo.

Estabelecendo os pré-requisitos do curso

Antes de começarmos, é importante que tenhamos alguns fundamentos. É essencial que já conheçamos HTML e CSS básicos, tenhamos conceitos de Web API e conheçamos os fundamentos da linguagem C# e .NET. Este curso é desenvolvido para pessoas desenvolvedoras que desejam criar aplicações web modernas e interativas, utilizando a linguagem C# no front-end para integrar essa aplicação com a Web API da Screensound.

Explorando a construção da aplicação com Blazor

Neste curso da Alura, vamos explorar juntos a construção de uma aplicação que consumirá a Web API. Aprenderemos a configurar o HttpClient para se comunicar com a API da Screensound e a construir componentes com o Blazor.

Vamos definir um novo componente, aprender a passar parâmetros para esse componente, programar eventos e, ao final, reutilizar esse componente dentro de uma página do Blazor. Vamos criar um cadastro de artista, gerenciando imagens e formulários. Implementaremos um formulário de cadastro e faremos o upload de imagens de artista, integrando essa funcionalidade com a Web API da Screensound.

Criando interatividade e explorando o Blazor WebAssembly

Também aprenderemos a criar uma página de playlist de música, que terá interatividade no front-end para simular o funcionamento de um player de música do mundo real. Além disso, exploraremos como o Blazor WebAssembly é baixado e executado no navegador. Analisaremos os múltiplos componentes que fazem parte do Blazor, como o HTML, o WebAssembly, o .NET rodando no navegador, junto com os componentes do Razor.

Concluindo com a integração e recursos adicionais

Tudo isso será feito de forma integrada, utilizando apenas a linguagem C#, sem JavaScript. Desenvolveremos uma solução prática, na qual veremos o Blazor WebAssembly em ação, interagindo com uma Web API. Aproveitaremos os recursos da plataforma da Alura, que incluem vídeos, atividades práticas e o apoio da comunidade no fórum e no Discord.

Vamos começar?

O projeto Blazor - Apresentando o projeto Web API

Introduzindo o curso de Blazor

Começando nosso curso de Blazor, com a introdução ao Blazor, vamos abordar o contexto que nos levou a desenvolver este curso. Suponha que você é uma pessoa desenvolvedora responsável por criar um website para a empresa ScreenSound. Iniciamos este curso com o código inicial, que você baixou na primeira atividade da primeira aula. Este código é uma solução do Visual Studio, chamada ScreenSound, uma empresa que fornece soluções de música. Através da ScreenSound, podemos gerenciar músicas, artistas e gêneros.

Na solução do Visual Studio, temos três projetos. O primeiro é o ScreenSound.Api, um projeto ASP.NET Core Web API que fornece os controllers com os endpoints necessários para, por exemplo, criar uma música, criar um artista, associar música com artista, gerenciar o artista, obter uma lista de músicas, lista de artistas, entre outras funcionalidades. Este projeto Web API depende de outros dois projetos.

Explorando a estrutura de dados

O segundo projeto é o ScreenSound.Shared.Dados, que contém todas as classes de acesso a dados. Dentro da pasta "banco", temos o arquivo DAO.cs, que contém a classe responsável por fazer o acesso a dados. Vamos explorar essa classe, que é essencial para a interação com o banco de dados.

using Microsoft.EntityFrameworkCore;
using ScreenSound.Modelos;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ScreenSound.Banco
{
    public class DAL<T> where T : class
    {
        private readonly ScreenSoundContext context;

        public DAL(ScreenSoundContext context)
        {
            this.context = context;
        }

Aqui, definimos a classe DAL<T>, que é um repositório genérico para manipulação de dados. Ela utiliza o ScreenSoundContext para interagir com o banco de dados. Agora, vamos adicionar os métodos que permitem listar, adicionar, atualizar e deletar registros.

Implementando métodos CRUD

        public IEnumerable<T> Listar(string propertyPath)
        {
            return context.Set<T>()
                .Include(propertyPath)
                .ToList();
        }

        public void Adicionar(T objeto)
        {
            context.Set<T>().Add(objeto);
            context.SaveChanges();
        }

        public void Atualizar(T objeto)
        {
            context.Set<T>().Update(objeto);
            context.SaveChanges();
        }

        public void Deletar(T objeto)
        {
            context.Set<T>().Remove(objeto);
            context.SaveChanges();
        }

        public T? RecuperarPor(Func<T, bool> condicao)
        {
            return context.Set<T>().FirstOrDefault(condicao);
        }
    }
}

Esses métodos são fundamentais para a manipulação de dados, permitindo operações CRUD (Create, Read, Update, Delete) de forma genérica. Agora, vamos ver como o contexto do Entity Framework é configurado.

Configurando o contexto do Entity Framework

using Microsoft.Data.SqlClient;
using Microsoft.EntityFrameworkCore;
using ScreenSound.Modelos;
using ScreenSound.Shared.Modelos.Modelos;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ScreenSound.Banco
{
    public class ScreenSoundContext : DbContext
    {
        public DbSet<Artista> Artistas { get; set; }
        public DbSet<Musica> Musicas { get; set; }
        public DbSet<Genero> Generos { get; set; }

        private string connectionString = "Data Source=(localdb)\\MSSQLLocalDB;In

        public ScreenSoundContext(DbContextOptions options) : base(options)
        {

        }
    }
}

O ScreenSoundContext é a classe que representa o contexto do banco de dados, configurando as entidades Artista, Musica e Genero como conjuntos de dados (DbSet). Agora, vamos explorar os modelos que representam essas entidades.

Definindo os modelos de dados

namespace ScreenSound.Modelos;

public class Artista
{
    public virtual ICollection<Musica> Musicas { get; set; } = new List<Musica>();

    public Artista()
    {

    }

    public Artista(string nome, string bio)
    {
        Nome = nome;
        Bio = bio;
    }

    public string Nome { get; set; }
    public string FotoPerfil { get; set; }
    public string Bio { get; set; }
    public int Id { get; set; }
}

A classe Artista define as propriedades de um artista, incluindo uma coleção de músicas associadas. Vamos ver agora a classe Genero.

using ScreenSound.Shared.Modelos.Modelos;

namespace ScreenSound.Modelos;

public class Genero
{
    public int Id { get; set; }
    public string? Nome { get; set; } = string.Empty;
    public string? Descricao { get; set; } = string.Empty;

    public virtual ICollection<Musica> Musicas { get; set; }

    public override string ToString()
    {
        return $"Nome: {Nome} - Descrição: {Descricao}";
    }
}

A classe Genero representa um gênero musical, com suas propriedades e uma coleção de músicas. Por fim, vamos ver a classe Musica.

using ScreenSound.Shared.Modelos.Modelos;

namespace ScreenSound.Modelos;

public class Musica
{
    public Musica()
    {

    }

    public Musica(string nome)
    {
        Nome = nome;
    }

    public string Nome { get; set; }
    public int Id { get; set; }
    public int? AnoLancamento { get; set; }
    public int? ArtistaId { get; set; }
    public int? GeneroId { get; set; }
}

A classe Musica define as propriedades de uma música, incluindo referências ao artista e gênero. Com essas classes, temos a base para manipular os dados da aplicação.

Descrevendo o projeto de modelos compartilhados

O terceiro projeto é o ScreenSound.Shared.Modelos, também uma dependência da nossa Web API. Este projeto contém modelos. Dentro da pasta de modelos, temos a classe Artista, com as informações principais de um artista, a classe Genero, que contém os atributos do gênero, e um modelo de música, que inclui o artista da música, o gênero da música, ano de lançamento, nome da música, entre outros atributos. Mais adiante, temos objetos de requisição na pasta "requests" e, na pasta "response", os objetos de resposta.

Os objetos de request (requisição) e response (resposta) são utilizados pela nossa Web API para fornecer as respostas sempre que um usuário fizer um acesso. Para testarmos essa solução, que atualmente contém apenas um executável, que é o projeto Web API, devemos pressionar a tecla F5. Ao pressionar F5, o navegador será aberto e a solução será iniciada, carregando apenas o projeto ASP.NET Core Web API. Por definição, esse tipo de projeto não possui uma interface gráfica, pois é uma Web API e não tem uma página. No entanto, o que visualizamos na tela é uma página fornecida pela biblioteca Swagger.

Utilizando o Swagger para testar a API

O Swagger expõe os endpoints da Web API como elementos em uma página, permitindo que façamos requisições de forma muito simples. Por exemplo, se quisermos fazer uma requisição para o endpoint que retorna uma lista de artistas, podemos acessar o objeto Artistas, clicar no botão Get, referente ao endpoint Artistas, e ele realizará uma requisição HTTP Get nessa rota de artistas. Ao clicar no botão, a seção será expandida, e podemos clicar no botão Try It Out, à direita, para experimentar essa execução. Mais abaixo, haverá um botão Executar, que, ao ser clicado, fará uma requisição para a nossa Web API da ScreenSound. Abaixo, será exibida uma resposta HTTP 200, que significa OK, e no meio da tela, o corpo da resposta dessa requisição, onde encontraremos uma lista de artistas, como Foo Fighters, Queen, Led Zeppelin, Michael Jackson, Madonna, Caetano Veloso, entre outros.

Além desse endpoint, há vários outros responsáveis por gerenciar não apenas artistas, mas também músicas e gêneros. O que precisamos fazer agora é atender à necessidade da ScreenSound, que requer que nós, como pessoas desenvolvedoras, criemos um website que se conecte com essa Web API, que ficará no back-end. Portanto, desenvolveremos o front-end, a aplicação que aparecerá no navegador, para que o cliente tenha uma interface amigável e consiga gerenciar essa Web API que está rodando no back-end.

O projeto Blazor - Criando projeto Blazor WebAssembly

Apresentando a solução inicial da Screensound

A Screensound já possui uma solução inicial composta por três projetos em ASP.NET Core. À direita, temos o projeto ASP.NET Core Web API, que já foi apresentado. No centro, na parte verde, estão dois projetos compartilhados: o projeto de dados e o projeto de modelos. À esquerda, ficará o novo projeto que vamos desenvolver.

A Screensound, com o objetivo de oferecer aos seus clientes uma interface moderna, responsiva, interativa e que possa rodar inteiramente no navegador dos usuários, solicita o desenvolvimento de uma aplicação desse tipo. Vamos criar uma aplicação do tipo Blazor WebAssembly App. Este curso acompanhará passo a passo a criação dessa nova aplicação cliente e ensinará a comunicar o projeto Blazor que vamos criar com a API existente, utilizando, claro, os projetos compartilhados de modelo e dados.

Criando um novo projeto Blazor no Visual Studio

Voltando à nossa solução no Visual Studio, vamos criar um novo projeto utilizando o template do Blazor. Para isso, clicaremos com o botão direito sobre a solution no Visual Studio, selecionaremos o menu "Adicionar" e, em seguida, "Novo Projeto". O Visual Studio fornecerá uma lista de opções de templates. Para facilitar a visualização, colocaremos "Blazor" no filtro. Isso mostrará uma lista com todos os templates relativos ao desenvolvimento com Blazor, apresentando cinco tipos diferentes de templates.

Vamos explorar a diferença entre eles. Começaremos com a segunda opção da lista, o Blazor Server App. Como o nome sugere, o Blazor Server App é para rodar uma aplicação no servidor. A aplicação roda no servidor, e a página do usuário é alterada dinamicamente através de uma comunicação entre o navegador e o servidor, mas toda a lógica da aplicação roda no servidor.

Escolhendo o tipo de aplicação Blazor

Por outro lado, temos a forma inversa, onde a lógica roda no cliente, diretamente no navegador, que é a quarta opção: Blazor WebAssembly Standalone App. Isso significa que é uma aplicação Standalone, ou seja, uma aplicação que roda sozinha no navegador, ao contrário de rodar no servidor. Mesmo rodando inteiramente no navegador, ela pode se comunicar com o servidor, mas não precisa de um componente do Blazor rodando no servidor. Ela pode se comunicar diretamente com uma WebAPI, e é exatamente isso que faremos neste curso.

Há também uma terceira opção interessante, que não usaremos, mas que pode ser implementada facilmente com os conceitos deste curso: a primeira opção, Blazor WebApp. Ela permite combinar os benefícios de rodar uma aplicação no servidor com a parte dinâmica, ágil e responsiva, além de todas as vantagens de ter uma aplicação no servidor.

Configurando o projeto Blazor WebAssembly

Ao desenvolver uma aplicação Blazor, escolhemos a quarta opção, que é a Blazor WebAssembly Standalone App. Selecionamos essa opção e clicamos no botão "Next". Em seguida, nomeamos o projeto como Screensound.WebAssembly, com "S" maiúsculo em "Screensound" e "W" e "A" maiúsculos em "WebAssembly". Após isso, clicamos novamente em "Next", onde são apresentadas mais opções para criar um projeto WebAssembly com o Blazor.

Optamos pelo Framework .NET 9, que é o padrão, e escolhemos não incluir autenticação, embora seja uma funcionalidade interessante no Blazor. Mantemos as demais configurações como estão e clicamos em "Create" para criar o projeto Screensound.WebAssembly, que é nosso projeto Blazor.

Executando o projeto Blazor junto com a Web API

Com o novo projeto criado, vamos executá-lo em conjunto com nossa Web API, rodando ambos simultaneamente. Para isso, abrimos as opções da solução, clicando com o botão direito e escolhendo "Configurar projetos de inicialização" ou "Configure Startup Projects" em inglês. Inicialmente, apenas o projeto Screensound.API está configurado para iniciar, o que faz com que a página do Swagger seja exibida, mostrando os Endpoints da API.

Queremos iniciar também o projeto Blazor que acabamos de criar, o Screensound.WebAssembly. Na coluna "Action", inicialmente, ele está configurado como "None":

Multiple startup projects:

Project                       Action
ScreenSound.API               Start
ScreenSound.Shared.Modelos    None
ScreenSound.Shared.Dados      None
ScreenSound.WebAssembly       None

Ajustando as configurações de inicialização

Vamos alterar a configuração para que o projeto Screensound.WebAssembly também seja iniciado. Para isso, mudamos a ação para "Start":

Multiple startup projects:

Project                       Action
...
ScreenSound.WebAssembly       Start

Além disso, precisamos definir o alvo de depuração como HTTPS para o projeto Screensound.WebAssembly:

Multiple startup projects:

Project                       Action      Debug Target
...
ScreenSound.WebAssembly       Start       https

Aplicamos as alterações e clicamos em "OK".

Explorando a aplicação Blazor WebAssembly

Com os dois projetos configurados, executamos novamente com a tecla F5. Nossa Web API é iniciada, e, ao mesmo tempo, a aplicação Blazor também é carregada no navegador. Esta é a primeira aplicação Blazor WebAssembly que criamos no Visual Studio, chamada Screensound.WebAssembly. O projeto contém um template padrão que oferece uma visão inicial do que é uma aplicação WebAssembly com Blazor.

A aplicação possui uma página inicial com uma mensagem de boas-vindas, uma página "Counter" que exibe um contador de cliques, e uma terceira página com uma lista de previsão do tempo, mostrando datas, temperaturas em Celsius e Fahrenheit, e o tipo de clima, como frio ou quente. Embora esses elementos não estejam diretamente relacionados ao contador, eles oferecem uma ideia do que uma aplicação Blazor WebAssembly pode realizar.

O interessante é que tudo está sendo executado inteiramente no navegador, sem nada rodando no servidor. Isso caracteriza uma aplicação Blazor WebAssembly Standalone, ou seja, uma aplicação que roda de forma independente no navegador.

Sobre o curso .NET: desenvolvendo aplicações web modernas com Blazor

O curso .NET: desenvolvendo aplicações web modernas com Blazor possui 378 minutos de vídeos, em um total de 68 atividades. Gostou? Conheça nossos outros cursos de .NET em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• capitulo