.NET: desenvolvendo uma aplicação web com ASP.NET Core Blazor

Web App com Blazor - Apresentação

Olá, tudo bem? Meu nome é André Bessa e sou instrutor na Escola de Programação da Alura. Vou acompanhar vocês neste curso, no qual vamos abordar o Asp.net Blazor.

Audiodescrição: André Bessa é um homem negro de rosto arredondado, com cabelo baixo e barba por fazer. Veste uma camiseta azul-marinho e está em um ambiente com iluminação azul. Ao fundo, há uma estante de ferro com livros e outros objetos.

Durante este curso, vamos criar uma aplicação utilizando o Asp.net Blazor. Também vamos consumir a nossa API de Artistas e Músicas, que foi criada no curso anterior.

Além disso, vamos aprender a criar componentes Razor e incrementar o layout da nossa aplicação utilizando o bibliotecas. Ao final, vamos publicar a nossa API e a nossa aplicação web no Azure.

O projeto deste curso continua sendo o ScreenSound, mas agora vamos entregar, na nossa solução, uma aplicação web. O projeto inicial estará disponível para download já na próxima atividade.

Para quem é este curso?

Este curso é destinado para pessoas que têm conhecimento em aorientação a objetos e que concluíram nossa formação C# e OO, bem como para pessoas que têm conhecimento mínimo de banco de dados, HTML e CSS.

Além de assistir às aulas, vocês também realizarão atividades práticas para colocar a mão na massa, o que ajudará a fixar mais o conteúdo.

Em caso de dúvidas, podem sempre recorrer ao fórum e ao Discord.

Então, vamos começar?

Web App com Blazor - Criando um projeto Blazor

Neste curso, nosso objetivo é criar uma aplicação web que vai consumir nossa API de artistas e músicas. Para ter um suporte visual e saber exatamente o que vamos entregar ao final, temos um rascunho no Figma com o projeto que pretendemos entregar ao final.

Então, teremos uma página que vai permitir cadastrar artistas, exibir os artistas cadastrados, cadastrar músicas, exibir o artista e o gênero. Na parte central, vamos ter alguns cards exibindo a foto do artista e sua biografia, as informações sobre o artista. Ao final do curso devemos entregar algo bem próximo deste template.

Nosso objetivo é adicionar na nossa solução um novo projeto que vai permitir entregar esta interface web para a pessoa usuária.

Então vamos adicionar um novo projeto.

Temos algumas opções de templates de projetos que vão nos permitir entregar interfaces para a pessoa usuária. Temos o aplicativo web ASP.Net Core, aplicativo do web ASP.NET Core ModelViewController, aplicativo web Blazor WebAssembly. São algumas opções de templates de projetos que permitem entregar uma interface web em um projeto.

Vamos optar aqui pelo aplicativo Blazor WebAssembly. O motivo de escolhermos o WebAssembly, do tipo Blazor, é porque ele nos permite entregar para a pessoa usuária uma interface mais rica, com a aplicação SPA (Single Page Application).

O nome desse novo projeto será "ScreenSound.Web". Nas opções vou deixar marcado do jeito que está. Configurar para HTTPS e include sample pages. Podemos clicar em "Criar".

Até o momento, estamos utilizando o C# para entregar projetos mais próximos do que vemos no mercado. Mas para fazer uma aplicação web também é importante você ter conhecimento em HTML, CSS e JavaScript.

Pela adoção do Blazor como nosso tipo de projeto, vamos continuar com o C# na plataforma .NET e precisaremos nos preocupar bem pouco com HTML e CSS.

Dessa maneira, vamos conseguir entregar uma aplicação web rápida para compor o portfólio. Com o projeto criado, vamos executá-lo. No campo superior, vamos selecionar a opção "ScreenSound.Web" e executar o HTTPS.

A aplicação web abriu em outra tela. Então, temos um projeto do tipo Blazor WebAssembly, que vai nos permitir programar C# em uma aplicação web.

Nesse template, temos uma home, um contador e ele mostra uma lista de temperaturas. Vamos trabalhar nesse projeto e editar o que precisamos para entregar uma solução de artistas e músicas.

Recapitulando

O que fizemos até agora? Adicionamos um novo projeto na solução, do tipo Blazor WebAssembly, que vai permitir entregar uma interface mais rica para a pessoa usuária e vai nos permitir continuar usando o C# como linguagem de programação para essa aplicação web.

Web App com Blazor - Estrutura do projeto Blazor

Nosso objetivo é criar uma aplicação web para consumir nossa API de artistas e músicas.

Para isso, definimos um projeto tipo Blazor WebAssembly na nossa solução.

Do lado direito da tela, no Solution Explorer, temos o projeto ScreenSound.Web aberto. Vamos dar uma olhada na estrutura desse projeto.

Temos o program.cs, que é o ponto de partida da nossa aplicação .NET C#. Observem o arquivo App.razor, que é o componente central, ou seja, o local onde a nossa aplicação web será executada no Blazor. Também temos o arquivo de importação Imports.razor e a pasta chamada "Pages", que contém as páginas da aplicação. Essas páginas possuem a extensão .razor.

Razor é uma engine (motor) que vai renderizar nossas páginas. Essa engine tem uma estrutura bastante peculiar, na qual conseguimos definir HTML e uma seção de código C#. Inclusive, conseguimos acessar os elementos da seção de código dentro do HTML.

Temos também o arquivo MainLayout.razor. Essa é a estrutura básica do nosso projeto Blazor WebAssembly.

Criando a página de artistas

Nosso objetivo agora é criar uma nova página, a página de artistas.

Para isso, clicamos com o botão direito do mouse sobre a pasta "Pages" e adicionamos um componente Razor.

Vale ressaltar que o Razor trabalha com a ideia de componentes. Essa é uma ideia que também encontramos em frameworks como Angular e React. Vamos adicionar um componente que pode ser uma página, ou um componente que pode renderizar algum componente HTML, como select, botão ou uma tabela.

Vamos adicionar um componente Razor que nomearemos como Artistas.razor. Nesse arquivo, teremos uma seção que permite o HTML e também uma seção de código.

<h3>Artistas</h3>

@code {

}

Para testar, vamos definir uma propriedade do tipo string chamada Mensagem e atribuir um valor padrão para essa propriedade: "Olá, Mundo!".

<h3>Artistas</h3>

@code {
    public string? Mensagem { get; set; } = "Olá mundo!";
}

Queremos acessar essa propriedade no HTML da página Artistas.razor. Vamos adicionamos um h4. Para acessar funções, propriedades e variáveis, usamos um arroba seguido do nome da propriedade (@Mensagem).

<h3>Artistas</h3>
<h4>@Mensagem</h4>

@code {
    public string Mensagem { get; set; } = "Olá mundo!";
}

Ao salvar e executar o projeto, como podemos acessamos a página Artistas? Será que basta inserir no fim do endereço da URL uma barra seguida do nome da página (/Artistas)? Recebemos a mensagem de "Endereço não encontrado".

Para exibir esse componente como uma página, precisamos definir uma rota.

Faremos isso adicionando a diretiva @page seguida da rota (/Artistas). Agora, no navegador, conseguimos acessar a rota de artistas.

@page "/Artistas"
<h3>Artistas</h3>
<h4>@Mensagem</h4>

@code {
    public string Mensagem { get; set; } = "Olá mundo!";
}

Para acessar a rota, basta acessarmos a seguinte URL:

https://localhost:7042/Artistas

Conseguimos criar uma seção de código e uma seção de HTML e integrar as duas!

O que fizemos até agora?

Criamos a estrutura de um projeto Blazor WebAssembly, definimos um componente que vai representar uma página HTML e, para isso, precisamos definir uma rota com a diretiva @page.

Na sequência, vamos continuar evoluindo essa aplicação e fazer uma consulta de artistas para exibir na nossa página no componente Artistas.razor.

Sobre o curso .NET: desenvolvendo uma aplicação web com ASP.NET Core Blazor

O curso .NET: desenvolvendo uma aplicação web com ASP.NET Core Blazor possui 144 minutos de vídeos, em um total de 53 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:

• Web App com Blazor
• CRUD de artista
• Upload de imagens
• Trabalhando a música
• Deploy no Azure