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 l'impostazione di configurazione all'archivio di Configurazione app

In Configurazione app di Azure creare una nuova coppia chiave-valore per archiviare la percentuale di sconto sulle vendite. Effettuare i passaggi seguenti:

In un'altra scheda del browser accedere al portale di Azure con lo stesso account e la stessa directory dell'interfaccia della riga di comando di Azure.
Usare la casella di ricerca per trovare e aprire la risorsa Configurazione app con il prefisso eshop-app-features.
Nella sezione Operazioni selezionare Esplora configurazione.
Nel menu in alto selezionare + Crea e selezionare Valore chiave.
Nella casella di testo Chiave immettere eShopLite__Store__DiscountPercent.
Nella casella di testo Valore immettere 0.8.
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. Effettuare i passaggi seguenti:

In Visual Studio Code aprire il file Store/Components/Pages/Products.razor.
Aggiungere la seguente variabile nella sezione @code per archiviare lo stato del flag di funzionalità:
```
private decimal discountPercentage;  
```

Aggiungere il codice seguente nel metodo OnInitializedAsync per recuperare il valore dell'impostazione di configurazione:

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

Il metodo deve 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 Configurazione per recuperare il valore dell'impostazione di configurazione. Il valore viene archiviato nella variabile discountPercentage come decimale.

Visualizzare i prezzi scontati

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

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.

Creare l'app

Assicurarsi di aver salvato tutte le modifiche e che si trovino nella directory dotnet-feature-flags. Eseguire il comando seguente nel terminale:
```
dotnet publish /p:PublishProfile=DefaultContainer 
```
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:

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.
Seleziona i prodotti.

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

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

Nel portale di Azure passare alla risorsa Configurazione app di Azure preceduta da eshop-app-features.
Nella sezione Operazioni, selezionare Gestione delle funzionalità.
Selezionare l'interruttore SeasonalDiscount abilitato per disattivare questa funzionalità.
Nel browser tornare all'applicazione.
Selezionare la pagina Home e quindi la pagina Prodotti.

La cancellazione della cache può richiedere fino a 30 secondi. Se il banner di vendita viene ancora visualizzato, attendere qualche secondo e aggiornare nuovamente la pagina.

Continua