Oefening: de .NET Aspire eShop gebruiken

  • 10 minuten

We kunnen de nieuwste eShop-referentietoepassing, die de .NET Aspire-stack bevat, gebruiken om een volledige en complexe cloudeigen app te illustreren.

Stel dat u voor een buitenkleding- en apparatuurbedrijf werkt. Uw ontwikkelteam werkt samen met .NET Aspire om een nieuwe eShop-web-app te maken voor de belangrijkste klantgerichte site. U wilt de architectuur van deze app begrijpen en de functionaliteit testen voordat u deze implementeert.

In deze les installeert u .NET Aspire en de bijbehorende vereisten en gebruikt u vervolgens de eShop-app om .NET Aspire te onderzoeken en uit te voeren.

Vereiste onderdelen installeren

De vereisten voor deze .NET Aspire-oefening zijn:

  • .NET 8
  • Visual Studio 2022
  • Docker Desktop
  • .NET Aspire-workload in Visual Studio

Als u deze vereisten al hebt geïnstalleerd, kunt u doorgaan om de eShop-toepassing te verkennen.

.NET 8 installeren

Volg deze .NET 8-koppeling en selecteer het juiste installatieprogramma voor uw besturingssysteem. Als u bijvoorbeeld Windows 11 en een moderne processor gebruikt, selecteert u de x64 .NET 8 SDK voor Windows.

Nadat het downloaden is voltooid, voert u het installatieprogramma uit en volgt u de instructies. Voer in een terminalvenster de volgende opdracht uit om te controleren of de installatie is geslaagd:

dotnet --version

U ziet nu het versienummer van de .NET SDK die u hebt geïnstalleerd. Voorbeeld:

8.0.403

Visual Studio 2022 installeren

Volg deze Visual Studio 2022-koppeling en selecteer Visual Studio downloaden. Nadat het downloaden is voltooid, voert u het installatieprogramma uit en volgt u de instructies.

Docker Desktop installeren

Volg deze Docker Desktop-koppeling en selecteer het juiste installatieprogramma voor uw besturingssysteem. Nadat het downloaden is voltooid, voert u het installatieprogramma uit en volgt u de instructies. Gebruik de WSL 2 back-end voor de beste prestaties en compatibiliteit.

Open de Docker Desktop-toepassing en accepteer de serviceovereenkomst.

De workload .NET Aspire installeren in Visual Studio

Installeer de .NET Aspire-workload met behulp van de .NET CLI:

  1. Open een terminal.

  2. Werk .NET-workloads bij met deze opdracht:

    dotnet workload update

    U ziet nu een bericht dat de workloads zijn bijgewerkt.

    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): .

  3. Installeer de workload .NET Aspire met deze opdracht:

    dotnet workload install aspire

    U ziet nu een bericht dat de .NET Aspire-workload is geïnstalleerd.

    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.

  4. Controleer of de workload .NET Aspire is geïnstalleerd met deze opdracht:

    dotnet workload list

    U zou de details van de Aspire-werkbelasting moeten zien.

    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.

De .NET Aspire eShop-code verkennen

Laten we de eShop-referentietoepassing gebruiken om de .NET Aspire-stack te demonstreren. Kloon de code van GitHub en bekijk deze in Visual Studio:

  1. Blader in de opdrachtregel naar een map van uw keuze waar u met code kunt werken.

  2. Voer de volgende opdracht uit om de eShop-voorbeeldtoepassing te klonen:

    git clone https://github.com/dotnet/eShop.git

  3. Ga naar de eShop-adreslijst:

    cd eShop

  4. De eShop-referentie-app wordt regelmatig bijgewerkt. Als u ervoor wilt zorgen dat u de juiste versie voor deze oefening gebruikt, schakelt u over naar de dotnet8 tag:

    git checkout dotnet8

  5. Start Visual Studio en selecteer vervolgens Een project of oplossing openen.

  6. Blader naar de map waarin u eShop hebt gekloond, selecteer het eShop.Web.snlf-bestand en selecteer vervolgens Openen.

    Belangrijk

    Zorg ervoor dat u het bestand eShop.Web.snlf opent, niet het eShop.sln bestand.

  7. Bekijk de oplossingsstructuur in Solution Explorer. Op het hoogste niveau bevat de eShop-code mappen voor tests, GitHub-acties en oplossingsitems. Vouw de src-map uit, die broncode voor de microservices bevat:

    Schermopname van de structuur van de eShop-oplossing in Visual Studio Solution Explorer.

  8. U ziet dat:

    • De map src bevat de projecten .NET Aspire AppHost en ServiceDefaults .
    • Het AppHost-project wordt ingesteld als het opstartproject voor de oplossing.

  9. Vouw het AppHost-project uit en selecteer vervolgens het bestand eShop.AppHost/Program.cs .

  10. In het bestand Program.cs ziet u dat:

    • Integraties van de toepassing worden toegevoegd aan een DistributedApplicationBuilder object met de naam builder.
    • Backing-services, zoals een Redis-cache, een RabbitMQ-berichtenservice en een PostgreSQL-database, worden toegevoegd aan de opbouwfunctie. Elke service wordt ingericht in een Docker-container.
    • Elke microservice wordt aan de opbouwfunctie toegevoegd met behulp van de builder.AddProject() methode.
    • Verwijzingen naar de backing-services worden met behulp van de .WithReference() methode in elke microservice geïnjecteerd.

Code bewerken in de .NET Aspire eShop

Laten we een kleine wijziging aanbrengen in de broncode, die we kunnen testen wanneer we de app uitvoeren:

  1. Vouw in Solution Explorer de map src/WebApp/Components/Pages/Catalog uit en selecteer vervolgens de catalog.razor-pagina .

  2. Zoek deze regel code op:

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

  3. Vervang de regel door deze tekst of maak uw eigen ondertitel voor de pagina:

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

Voer de .NET Aspire eShop uit

We gaan de app uitvoeren en het .NET Aspire-dashboard gebruiken om een aanvraag te onderzoeken:

  1. Druk in Visual Studio op F5 of selecteer start foutopsporing in het menu Foutopsporing. Visual Studio bouwt de containers voor de eShop.

  2. Als het dialoogvenster Docker Desktop starten wordt weergegeven, selecteert u Ja.

  3. Wanneer de eShop is gebouwd en geïmplementeerd in Docker, wordt het .NET Aspire-dashboard weergegeven in de standaardbrowser.

  4. Als u naar de startpagina wilt bladeren, selecteert u in de rij voor het webapp-project de https://localhost:<poortkoppeling> :

    Schermopname van het .NET Aspire-dashboard voor de eShop-oplossing

  5. De startpagina van eShop wordt weergegeven op een nieuw browsertabblad. U ziet dat de ondertitel wordt weergegeven.

  6. Selecteer het Product Adventurer GPS Watch :

    Schermopname van de startpagina voor de eShop-web-app.

  7. Ga naar het browsertabblad waarin het .NET Aspire-dashboard wordt weergegeven en selecteer vervolgens Traceringen in het linkermenu.

  8. Schuif naar de onderkant van de pagina en zoek een tracering met de naam web-app: GET /item/{itemId:int}.

  9. Selecteer Weergave in de kolom Details:

    Schermopname van de pagina Traces in het .NET Aspire-dashboard.

  10. Het dashboard geeft de tracering weer voor de Adventurer GPS Watch, die een aanroep naar de catalogusmicroservice bevat:

    Schermopname van een tracering in het .NET Aspire-dashboard.

  11. Als u de foutopsporingssessie wilt stoppen, drukt u in Visual Studio op Shift+F5 of selecteert u Foutopsporing stoppen in het menu Foutopsporing.

  12. Visual Studio sluiten.

Meer informatie