Exercício – Criar e executar um aplicativo Web do Blazor

8 minutos

Vamos configurar nosso ambiente de desenvolvimento do .NET e criar nosso primeiro aplicativo Web do Blazor.

Este módulo oferece a opção de usar a CLI do .NET, o Visual Studio Code ou o Visual Studio 2022 para desenvolvimento local. Se você estiver desenvolvendo com o Visual Studio Code, instale a extensão do Kit de Desenvolvimento em C#, que usamos neste módulo.

Este módulo usa o SDK do .NET 8.0. Verifique se você tem o .NET 8.0 instalado executando o seguinte comando em seu terminal de comando preferencial:

dotnet --list-sdks

Uma saída semelhante ao seguinte exemplo aparece:

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

Verifique se uma versão que começa com 8 está listada. Se nenhum estiver listado ou o comando não for encontrado, instale o SDK do .NET 8.0 mais recente.

Criar um novo aplicativo Web do Blazor com o Kit de Desenvolvimento em C#

Para criar um novo projeto de aplicativo Web do Blazor no Visual Studio Code com o Kit de Desenvolvimento em C#:

Abra a paleta de comandos usando Ctrl+Shift+P e digite ".NET".
Localize e selecione o .NET: Comando Novo projeto.
Selecione Aplicativo Web Blazor na lista suspensa.
Selecione a pasta na qual você deseja criar o novo projeto.
Nomeie o projeto BlazorApp e pressione Enter para confirmar.
Exiba seu novo projeto de aplicativo Blazor no Gerenciador de Soluções.

Opcional: Criar um novo aplicativo Blazor com o C# Dev Kit

Para criar um projeto de aplicativo Web do Blazor usando o SDK do .NET na linha de comando, use o seguinte comando:

dotnet new blazor

Se você criou o aplicativo Blazor com o Visual Studio Code ou a CLI do .NET, o projeto gerado contém os seguintes arquivos e páginas:

Program.cs é o ponto de entrada do aplicativo que inicia o servidor e onde você configura os serviços de aplicativo e o middleware.
App.razor é o componente raiz do aplicativo.
Routes.razor configura o roteador do Blazor.
O diretório Componentes/Páginas contém algumas páginas da Web de exemplo para o aplicativo.
BlazorApp.csproj define o projeto de aplicativo e suas dependências e pode ser exibido clicando duas vezes no nó do projeto no Gerenciador de Soluções.
O arquivo launchSettings.json dentro do diretório Propriedades define diferentes configurações de perfil para o ambiente de desenvolvimento local. Um número de porta é atribuído automaticamente na criação do projeto e salvo neste arquivo.

Executar o aplicativo com o depurador integrado

No Visual Studio Code, selecione Executar no menu.
Selecione Iniciar Depuração.
Selecione C# na lista suspensa Selecionar depurador.
Selecione C#: BlazorApp [Configuração Padrão]

Isso cria e inicia o aplicativo com a depuração habilitada. O aplicativo deve ser aberto automaticamente no navegador padrão. Seu navegador pode avisar que o site não é seguro. É seguro continuar.

Opcional: Executar o aplicativo com a CLI do .NET

Na janela do terminal, copie e cole o seguinte comando para executar o aplicativo e observe as alterações de arquivo:
```
dotnet watch
```
Esse comando cria e inicia o aplicativo e aplica todas as alterações de código ao aplicativo em execução. O aplicativo deve ser aberto automaticamente no navegador padrão. Seu navegador pode avisá-lo de que o site ainda não tem um certificado válido; É seguro continuar.

Você executou com êxito o seu primeiro aplicativo Blazor!

Criar um aplicativo Blazor

O Visual Studio é um IDE totalmente em destaque para desenvolvimento do .NET que facilita a criação de aplicativos do Blazor.

Para usar o Visual Studio para criar e trabalhar com aplicativos Web do Blazor, instale a carga de trabalho "ASP.NET e desenvolvimento na Web" usando o instalador do Visual Studio.

Carga de trabalho de desenvolvimento ASP.NET e para a Web no instalador do Visual Studio.

Para criar um novo aplicativo Web do Blazor usando o Visual Studio:

Inicie o Visual Studio e selecione Criar um projeto.
Na janela Criar um projeto, digite Blazor na caixa de pesquisa e pressione Enter.
Selecione o modelo de Aplicativo Web do Blazor e selecione Avançar.
Na janela Configurar o seu novo projeto, insira BlazorApp como o nome do projeto e selecione Avançar:
Na janela Informações adicionais, selecione .NET 8.0 (Suporte a longo prazo) na lista suspensa do Framework se ainda não estiver selecionado e clique no botão Criar.

Ao criar um aplicativo Web do Blazor, você pode selecionar entre várias opções, como se deseja habilitar a autenticação, quais modos de renderização interativos habilitar e quanto do aplicativo você deseja que seja interativo. Para este aplicativo, certifique-se de que os padrões estejam selecionados da seguinte maneira:
- Tipo de autenticação: Nenhum
- Modo de renderização interativo: Servidor
- Local de interatividade: Por página/componente

Seu projeto é criado e carregado no Visual Studio. Dê uma olhada no conteúdo do seu projeto usando o Gerenciador de Soluções.

Captura de tela do Gerenciador de Soluções do Visual Studio 2022 com uma lista dos arquivos em um projeto do Blazor.

Vários arquivos foram criados para fornecer um aplicativo Blazor simples e pronto para ser executado:

Program.cs é o ponto de entrada do aplicativo que inicia o servidor e onde você configura os serviços de aplicativo e o middleware.
App.razor é o componente raiz do aplicativo.
Routes.razor configura o roteador do Blazor.
O diretório Componentes/Páginas contém algumas páginas da Web de exemplo para o aplicativo.
BlazorApp.csproj define o projeto de aplicativo e suas dependências e pode ser exibido clicando duas vezes no nó do projeto no Gerenciador de Soluções.
O arquivo launchSettings.json dentro do diretório Propriedades define diferentes configurações de perfil para o ambiente de desenvolvimento local. Um número de porta é atribuído automaticamente na criação do projeto e salvo neste arquivo.

Executar o aplicativo

Clique no botão Iniciar depuração (seta verde) na barra de ferramentas de depuração no Visual Studio para executar o seu aplicativo.

Depois que o aplicativo estiver em execução, você poderá aplicar alterações de código ao aplicativo em execução clicando no botão Recarga Dinâmica.

Captura de tela da Barra de Ferramentas de Depuração no Visual Studio com o botão Recarga Dinâmica realçado.

Você pode parar o aplicativo a qualquer momento clicando no botão Parar na barra de ferramentas superior.

Captura de tela da Barra de Ferramentas de Depuração no Visual Studio com o botão Parar Depuração realçado.

Na primeira vez que você executar um aplicativo Web no Visual Studio, ele configurará um certificado de desenvolvimento para hospedar o aplicativo por HTTPS e solicitará que você confie no certificado. É recomendável concordar em confiar no certificado. O certificado é usado apenas para desenvolvimento local e, sem ele, a maioria dos navegadores reclama da segurança do site.

Aguarde até que o aplicativo seja iniciado no navegador. Depois de chegar à página a seguir, você terá executado com êxito o seu primeiro aplicativo Blazor!

Captura de tela mostrando o aplicativo do Blazor em execução em um navegador.

Usaremos esse aplicativo Blazor nos próximos exercícios.