Oefening: configuratie-instellingen implementeren in Azure App Configuration-exemplaar

10 minuten

Een nieuwe vereiste voor de toepassing zegt nu dat een functievlag een korting voor een product kan beheren. In deze oefening ziet u hoe u dit doet.

Voeg een configuratie-instelling toe aan het Azure App Configuration-exemplaar.
Voeg code toe om de nieuwe instelling te gebruiken om de prijzen van producten te verlagen.
Bouw en test de app.

De configuratie-instelling toevoegen aan het App Configuration-archief

Maak in Azure App Configuration nu een nieuw sleutel-waardepaar om het verkoopkortingspercentage op te slaan. Voer de volgende stappen uit:

Meld u op een ander browsertabblad aan bij de Azure Portal met hetzelfde account en dezelfde map als de Azure CLI.
Gebruik het zoekvak om de App Configuration-resource te zoeken en te openen die is voorafgegaan door eshop-app-features.
Selecteer in de sectie OperationsConfiguration Explorer.
Selecteer in het bovenste menu + maken en selecteer sleutelwaarde.
Voer in het tekstvak Key de waarde eShopLite__Store__DiscountPercentin.
Voer in het tekstvak Waarde0,8in.
Selecteer toepassen.

Code toevoegen om de nieuwe configuratie-instelling te gebruiken

De productpagina moet worden bijgewerkt om de nieuwe configuratie-instelling te kunnen gebruiken. Voer de volgende stappen uit:

Open in Visual Studio Code het Store/Components/Pages/Products.razor-bestand.
Voeg in de sectie @code de volgende variabele toe om de status van de functievlag op te slaan:
```
private decimal discountPercentage;  
```

Voeg in de methode OnInitializedAsync de volgende code toe om de waarde van de configuratie-instelling op te halen:

if (saleOn) {
  discountPercentage = Convert.ToDecimal(Configuration.GetSection("eShopLite__Store__DiscountPercent").Value);
}

De methode moet er nu uitzien als de volgende code:

protected override async Task OnInitializedAsync()
{
    saleOn = await FeatureManager.IsEnabledAsync("SeasonalDiscount");

    // Simulate asynchronous loading to demonstrate streaming rendering
    products = await ProductService.GetProducts();

    if (saleOn) {
      discountPercentage = Convert.ToDecimal(Configuration.GetSection("eShopLite__Store__DiscountPercent").Value);
    }
}

In de bovenstaande code wordt het configuratieobject gebruikt om de waarde van de configuratie-instelling op te halen. De waarde wordt opgeslagen in de discountPercentage variabele als een decimaal getal.

De kortingsprijzen weergeven

De productpagina moet worden bijgewerkt om de kortingsprijzen weer te geven. Voer de volgende stappen uit:

Vervang <td>@product.Price</td> door deze code:
```
<td>
  @if (saleOn) {
    <strike>@(product.Price)</strike><br>
    @((product.Price * discountPercentage).ToString("#.##"))
  } else {
    @product.Price
  }
</td>
```
De bovenstaande code controleert of de seizoensgebonden verkoop is ingeschakeld. Als deze optie is ingeschakeld, wordt de oorspronkelijke prijs weergegeven met een doorhaling en wordt de kortingsprijs eronder weergegeven. Als de seizoensgebonden verkoop niet is ingeschakeld, wordt de oorspronkelijke prijs weergegeven.

De app bouwen

Zorg ervoor dat u al uw wijzigingen hebt opgeslagen en zich in de dotnet-feature-flags map bevindt. Voer in de terminal de volgende opdracht uit:
```
dotnet publish /p:PublishProfile=DefaultContainer 
```
Voer de app uit met docker:
```
docker compose up
```

De prijskortingsfunctie testen

Voer de volgende stappen uit om te controleren of de functievlag werkt zoals verwacht in een codespace:

Ga naar het tabblad POORTEN en selecteer vervolgens rechts van het lokale adres voor de front-endpoort poort het wereldbolpictogram. De browser opent een nieuw tabblad op de startpagina.
Selecteer Producten.

Als u Visual Studio Code lokaal gebruikt, opent u http://localhost:32000/products.

Als u wilt testen of de functievlag de seizoensgebonden verkoop beheert, voert u de volgende stappen uit:

Navigeer in Azure Portal naar de Azure App Configuration-resource met het voorvoegsel eshop-app-features.
Selecteer in de sectie Operations de optie Functiebeheer.
Selecteer de schakelaar "SeasonalDiscount ingeschakeld" om deze functie uit te zetten.
Ga in uw browser terug naar de toepassing.
Selecteer de startpagina en vervolgens de Producten pagina.