Exercício - Use o .NET Aspire eShop

10 minutos

Podemos usar o aplicativo de referência mais recente do eShop, que inclui a pilha .NET Aspire, para ilustrar um aplicativo nativo da nuvem completo e complexo.

Imagine que você trabalha para uma empresa de roupas e equipamentos para atividades ao ar livre. Sua equipe de desenvolvimento tem trabalhado com o .NET Aspire para criar um novo aplicativo da web eShop para o site principal voltado ao cliente. Você deseja entender a arquitetura desse aplicativo e testar sua funcionalidade antes de implantá-lo.

Nessa unidade, você instalará o .NET Aspire e seus pré-requisitos e, em seguida, usará o aplicativo eShop para investigar e executar o .NET Aspire.

Instalar pré-requisitos

Os pré-requisitos para este exercício do .NET Aspire são:

.NET 8
Visualização do Visual Studio 2022
Docker Desktop
Carga de trabalho do .NET Aspire no Visual Studio

Se você já os instalou, pode avançar para explorar o aplicativo eShop.

Instalar o .NET 8

Siga esse link do .NET 8 e selecione o instalador correto para o seu sistema operacional. Por exemplo, se você estiver usando o Windows 11 e um processador moderno, selecione x64 .NET 8 SDK para Windows.

Após a conclusão do download, execute o instalador e siga as instruções. Em uma janela de terminal, execute o seguinte comando para verificar se a instalação foi bem-sucedida:

dotnet --version

Você deverá ver o número da versão do SDK do .NET instalado. Por exemplo:

8.0.300-preview.24203.14

Instale a versão prévia do Visual Studio 2022

Siga esse link Visual Studio 2022 Preview e selecione Baixar versão prévia. Após a conclusão do download, execute o instalador e siga as instruções.

Instalar o Docker Desktop

Siga esse link Docker Desktop e selecione o instalador correto para o seu sistema operacional. Após a conclusão do download, execute o instalador e siga as instruções. Para melhor desempenho e compatibilidade, use o backend WSL 2.

Abra o aplicativo Docker Desktop e aceite o contrato de serviço.

Instale a carga de trabalho do .NET Aspire no Visual Studio

Instale a carga de trabalho do .NET Aspire usando a CLI do .NET:

Abra um terminal.

Atualize as cargas de trabalho do .NET com esse comando:

dotnet workload update

Você deverá ver uma mensagem informando que as cargas de trabalho foram atualizadas com sucesso.

No workloads installed for this feature band. To update workloads installed with earlier SDK versions, include the --from-previous-sdk option.
Updated advertising manifest microsoft.net.sdk.ios.
Updated advertising manifest microsoft.net.workload.mono.toolchain.net6.
Updated advertising manifest microsoft.net.sdk.android.
Updated advertising manifest microsoft.net.workload.emscripten.net7.
Updated advertising manifest microsoft.net.workload.emscripten.net6.
Updated advertising manifest microsoft.net.sdk.macos.
Updated advertising manifest microsoft.net.workload.emscripten.current.
Updated advertising manifest microsoft.net.workload.mono.toolchain.current.
Updated advertising manifest microsoft.net.sdk.maui.
Updated advertising manifest microsoft.net.workload.mono.toolchain.net7.
Updated advertising manifest microsoft.net.sdk.maccatalyst.
Updated advertising manifest microsoft.net.sdk.tvos.
Updated advertising manifest microsoft.net.sdk.aspire.
No workloads installed for this feature band. To update workloads installed with earlier SDK versions, include the --from-previous-sdk option.

Successfully updated workload(s): .

Instale a carga de trabalho do .NET Aspire com esse comando:

dotnet workload install aspire

Você deverá ver uma mensagem informando que a carga de trabalho do .NET Aspire foi instalada.

Installing Aspire.Hosting.Sdk.Msi.x64 ...... Done
Installing Aspire.ProjectTemplates.Msi.x64 ..... Done
Installing Aspire.Hosting.Orchestration.win-x64.Msi.x64 ............. Done
Installing Aspire.Hosting.Msi.x64 ..... Done
Installing Aspire.Dashboard.Sdk.win-x64.Msi.x64 ....... Done

Successfully installed workload(s) aspire.

Verifique se a carga de trabalho do .NET Aspire está instalada com esse comando:

dotnet workload list

Você deverá ver os detalhes da carga de trabalho do Aspire.

Installed Workload Id      Manifest Version      Installation Source
---------------------------------------------------------------------------------------------
aspire                     8.0.0/8.0.100         SDK 8.0.300-preview.24203, VS 17.10.34902.84

Use `dotnet workload search` to find additional workloads to install.

Explore o código .NET Aspire eShop

Vamos usar o aplicativo de referência eShop para demonstrar a pilha do .NET Aspire. Clonaremos o código do GitHub e o examinaremos no Visual Studio:

Na linha de comando, navegue até uma pasta de sua escolha onde você possa trabalhar com o código.
Execute o seguinte comando para clonar o aplicativo de amostra do eShop:
```
git clone https://github.com/dotnet/eShop.git
```
Inicie o Visual Studio e selecione Abrir um projeto ou solução.
Navegue até a pasta onde você clonou o eShop, selecione o arquivo eShop.Web.snlf e selecione Abrir.
Examine a estrutura da solução no Gerenciador de Soluções. No nível superior, o código do eShop inclui pastas para testes, ações do GitHub e itens de solução. Expanda a pasta src, que contém o código-fonte dos microsserviços:
Observe que:
- A pasta src inclui os projetos .NET Aspire AppHost e ServiceDefaults.
- O projeto AppHost é definido como o projeto de inicialização da solução.
Expanda o projeto AppHost e selecione o arquivo eShop.AppHost/Program.cs.
No arquivo Program.cs, observe que:
- Os componentes do aplicativo são adicionados a um objeto DistributedApplicationBuilder chamado builder.
- Serviços de apoio, como cache Redis, serviço de mensagens RabbitMQ e banco de dados PostgreSQL, são incluídos no construtor. Cada um será provisionado em um contêiner Docker.
- Cada microsserviço é adicionado ao construtor usando o método builder.AddProject().
- As referências aos serviços de apoio são injetadas em cada microsserviço usando o método .WithReference().

Edite o código no .NET Aspire eShop

Faremos uma alteração simples no código-fonte para testar quando executarmos o aplicativo:

No Gerenciador de Soluções, expanda a pasta src/WebApp/Components/Pages/Catalog e selecione a página Catalog.razor.

Localize esta linha de código:

<SectionContent SectionName="page-header-subtitle">Start the season with the latest in clothing and equipment.</SectionContent>

Substitua a linha por esse texto ou crie seu próprio subtítulo para a página:

<SectionContent SectionName="page-header-subtitle">Bringing you the latest in clothing and equipment.</SectionContent>

Execute o .NET Aspire eShop

Vamos executar o aplicativo e usar o painel do .NET Aspire para examinar uma solicitação:

No Visual Studio, pressione F5 ou no menu Debug selecione Start Debugging. O Visual Studio cria os contêineres para o eShop.
Se a caixa de diálogo Iniciar Docker Desktop aparecer, selecione Sim.
Quando o eShop é construído e implementado no Docker, o painel do .NET Aspire é exibido no navegador padrão.
Para navegar até a página inicial, na linha do projeto webapp, selecione o link https://localhost:<porta>:
A página inicial do eShop é exibida em uma nova guia do navegador. Observe que seu subtitulo é exibido.
Selecione o produto Adventurer GPS Watch:
Mude para a guia do navegador que exibe o painel do .NET Aspire e, no menu esquerdo, selecione Traces.
Role até o final da página e localize um rastreamento com o nome webapp: GET /item/{itemId:int}.
Na coluna Detalhes, selecione Visualizar:
O painel exibe o rastreamento do Adventurer GPS Watch, que inclui uma chamada para o microsserviço de catálogo:
Para interromper a sessão de depuração, no Visual Studio, pressione Shift + F5 ou no menu Debug, selecione Stop Debugging.
Feche o Visual Studio.

Saiba mais

Aplicativo de referência do eShop - "Montanhas do Norte"

Continuar