Esercizio - Implementare le impostazioni di configurazione nell'istanza di Configurazione app di Azure

  • 10 minuti

Un nuovo requisito per l'applicazione indica ora di consentire a un flag di funzionalità di controllare uno sconto per un prodotto. Questo esercizio illustra come eseguire questa operazione.

  • Aggiungere un'impostazione di configurazione all'istanza di Configurazione app di Azure.
  • Aggiungere il codice per usare la nuova impostazione per sconto sui prezzi dei prodotti.
  • Compilare e testare l'app.

Aggiungere le impostazioni di configurazione all'archivio di Configurazione App

In Azure App Configuration, adesso creare una nuova coppia chiave-valore per archiviare la percentuale di sconto sulle vendite. Completare i passaggi seguenti:

  1. Nella scheda di un altro browser, accedi al portale di Azure utilizzando lo stesso account e la stessa directory dell'Azure CLI.
  2. Usare la casella di ricerca per trovare e aprire la risorsa configurazione app preceduta da eshop-app-features.
  3. Nella sezione Operazioni selezionare Esplora configurazione.
  4. Nel menu in alto selezionare + Crea e selezionare Chiave-valore.
  5. Nella casella di testo Chiave immettere eShopLite__Store__DiscountPercent.
  6. Nella casella di testo Valore immettere 0,8.
  7. Selezionare Applica.

Aggiungere codice per usare la nuova impostazione di configurazione

La pagina del prodotto deve essere aggiornata per usare la nuova impostazione di configurazione. Completare i passaggi seguenti:

  1. In Visual Studio Code aprire il Store/Components/Pages/Products.razor file.

  2. @code Nella sezione aggiungere la variabile seguente per archiviare lo stato del flag di funzionalità:

    private decimal discountPercentage;

  3. OnInitializedAsync Nel metodo aggiungere il codice seguente per recuperare il valore dell'impostazione di configurazione:

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

    Il metodo dovrebbe ora essere simile al codice seguente:

    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);
    }
}

    Il codice precedente usa l'oggetto Configuration per recuperare il valore dell'impostazione di configurazione. Il valore viene archiviato nella discountPercentage variabile come decimale.

Visualizzare i prezzi scontati

La pagina del prodotto deve essere aggiornata per visualizzare i prezzi scontati. Completare i passaggi seguenti:

  1. Sostituire <td>@product.Price</td> con questo codice:

    <td>
  @if (saleOn) {
    <strike>@(product.Price)</strike><br>
    @((product.Price * discountPercentage).ToString("#.##"))
  } else {
    @product.Price
  }
</td>

    Il codice precedente controlla se la vendita stagionale è abilitata. Se è abilitato, il prezzo originale viene visualizzato con una crocetta e il prezzo scontato viene visualizzato sotto di esso. Se la vendita stagionale non è abilitata, viene visualizzato il prezzo originale.

Compilare l'app

  1. Assicurarsi di aver salvato tutte le modifiche e che si trovino nella directory dotnet-feature-flags . Nel terminale eseguire il comando seguente:

    dotnet publish /p:PublishProfile=DefaultContainer

  2. Eseguire l'app usando Docker:

    docker compose up

Testare la funzionalità di sconto sui prezzi

Per verificare che il flag di funzionalità funzioni come previsto in uno spazio di codice, completare i passaggi seguenti:

  1. Passare alla scheda PORTE , quindi a destra dell'indirizzo locale per la porta Front End , selezionare l'icona del globo. Il browser apre una nuova scheda nella home page.
  2. Seleziona i prodotti.

Se si usa Visual Studio Code in locale, aprire http://localhost:32000/products.

Screenshot dell'applicazione che mostra i prezzi scontati.

Per testare il flag di funzionalità, controllare la vendita stagionale, completare i passaggi seguenti:

  1. Nel portale di Azure passare alla risorsa di Configurazione app di Azure preceduta da eshop-app-features.

  2. Nella sezione Operazioni selezionare Gestione funzionalità.

  3. Selezionare l'interruttore SeasonalDiscount abilitato per disattivare questa funzionalità.

    Screenshot che mostra la pagina del portale di Azure per la configurazione dell'app. SeasonalDiscount è disattivato.

  4. Nel browser tornare all'applicazione.

  5. Selezionare la home page e quindi la pagina Prodotti .

    Screenshot che mostra l'app eShopLite senza un banner di vendita.

La cancellazione della cache può richiedere fino a 30 secondi. Se il banner di vendita è ancora visualizzato, attendere alcuni secondi e aggiornare di nuovo la pagina.