Esercizio - Implementare un flag di funzionalità per controllare le funzionalità delle app ASP.NET Core

12 minuti

In questo esercizio, implementare un flag di funzionalità per attivare o disattivare un banner di vendita stagionale per l'applicazione. I flag di funzionalità consentono di attivare o disattivare la disponibilità delle funzionalità senza ridistribuire l'app.

Si utilizzerà la Gestione delle funzionalità nella libreria di flag delle funzionalità .NET. Questa libreria offre helper per implementare i flag di funzionalità nell'app. La libreria supporta casi d'uso semplici come istruzioni condizionali per scenari più avanzati, ad esempio l'aggiunta condizionale di route o filtri di azione. Supporta inoltre i filtri delle funzionalità, che consentono di abilitare le funzionalità in base a parametri specifici. Esempi di tali parametri includono un intervallo di tempo, percentuali o un subset di utenti.

In questa unità si apprenderà come:

Creare un'istanza di Configurazione app di Azure.
Aggiungere un flag di funzionalità all'archivio di Configurazione app.
Connettere l'app all'archivio di Configurazione app.
Modificare l'applicazione per usare il flag di funzionalità.
Modificare la pagina dei prodotti per visualizzare un banner di vendita.
Compilare e testare l'app.

Aprire l'ambiente di sviluppo

Si può scegliere di ospitare l'esercizio in un codespace GitHub oppure di completarlo in locale in Visual Studio Code.

Per usare uno spazio di codice, creare uno spazio di codice GitHub preconfigurato con questo collegamento alla creazione di Codespace.

GitHub richiede alcuni minuti per creare e configurare lo spazio di codice. Al termine, vengono visualizzati i file di codice per l'esercizio. Il codice usato per il resto di questo modulo si trova nella directory /dotnet-feature-flags .

Per usare Visual Studio Code, clonare il https://github.com/MicrosoftDocs/mslearn-dotnet-cloudnative repository nel computer locale. Quindi:

Installare eventuali riesezioni di sistema per eseguire Dev Container in Visual Studio Code.
Verificare che Docker sia in esecuzione.
In una nuova finestra di Visual Studio Code, aprire la cartella del repository clonato
Premere CTRL+MAIUSC+P per aprire il riquadro comandi.
Ricerca: >Contenitori di sviluppo: Ricompilare e riaprire nel contenitore
Selezionare eShopLite - dotnet-feature-flags dall'elenco a discesa. Visual Studio Code crea il contenitore di sviluppo in locale.

Creare un'istanza di Configurazione app

Completare i passaggi seguenti per creare un'istanza di Configurazione app nella sottoscrizione di Azure:

Nel nuovo riquadro del terminale accedere all'interfaccia della riga di comando di Azure.
```
az login --use-device-code
```
Visualizzare la sottoscrizione di Azure selezionata.
```
az account show -o table
```
Se è selezionata la sottoscrizione errata, selezionare quella corretta usando il comando az account set .
Eseguire il comando seguente dell'interfaccia della riga di comando di Azure per ottenere un elenco di aree di Azure e il nome associato:
```
az account list-locations -o table
```
Individua un'area più vicina a te e usala nel passaggio successivo per sostituire [Closest Azure region]
Eseguire i comandi seguenti dell'interfaccia della riga di comando di Azure per creare un'istanza di Configurazione app:
```
export LOCATION=[Closest Azure region]
export RESOURCE_GROUP=rg-eshop
export CONFIG_NAME=eshop-app-features$SRANDOM    
```
È necessario modificare la LOCATION in una regione di Azure vicina a te, ad esempio eastus. Se si vuole un nome diverso per il gruppo di risorse o la configurazione dell'app, modificare i valori precedenti.
Eseguire il comando seguente per creare il gruppo di risorse di Azure:
```
az group create --name $RESOURCE_GROUP --location $LOCATION
```

Eseguire il comando seguente per creare un'istanza di Configurazione app:

az appconfig create --resource-group $RESOURCE_GROUP --name $CONFIG_NAME --location $LOCATION --sku Free

Compare una variante dell'output seguente:

{
  "createMode": null,
  "creationDate": "2023-10-31T15:40:10+00:00",
  "disableLocalAuth": false,
  "enablePurgeProtection": false,
  "encryption": {
    "keyVaultProperties": null
  },
  "endpoint": "https://eshop-app-features1168054702.azconfig.io",
  "id": "/subscriptions/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e/resourceGroups/rg-eshop/providers/Microsoft.AppConfiguration/configurationStores/eshop-app-features1168054702",
  "identity": null,

Eseguire questo comando per recuperare la stringa di connessione per l'istanza di Configurazione app:
```
az appconfig credential list --resource-group $RESOURCE_GROUP --name $CONFIG_NAME --query [0].connectionString --output tsv
```
Questa stringa con prefisso Endpoint= rappresenta la stringa di connessione dell'archivio di Configurazione app.
Copiare la stringa di connessione. Lo userai in un attimo.

Archiviare la stringa di connessione di Configurazione app

Si aggiungerà ora la stringa di connessione di Configurazione app all'applicazione. Completare i passaggi seguenti:

Aprire il file /dotnet-feature-flags/docker-compose.yml.

Aggiungere una nuova variabile di ambiente alla riga 13.

- ConnectionStrings:AppConfig=[PASTE CONNECTION STRING HERE]

Sarà docker-compose.yml simile al codice YAML seguente:

environment: 
  - ProductEndpoint=http://backend:8080
  - ConnectionStrings:AppConfig=Endpoint=https://eshop-app-features1168054702.azconfig.io;Id=<ID>;Secret=<Secret value>

La riga precedente rappresenta una coppia chiave-valore, in cui ConnectionStrings:AppConfig è un nome di variabile di ambiente. Store Nel progetto il provider di configurazione delle variabili di ambiente legge il relativo valore.

Suggerimento

La stringa di connessione di Configurazione app di Azure contiene un segreto in testo normale. Nelle applicazioni reali, prendere in considerazione l'integrazione di Configurazione delle applicazioni con Azure Key Vault per l'archiviazione sicura dei segreti. Key Vault non rientra nell'ambito di questo modulo, ma le indicazioni sono disponibili in Esercitazione: Usare i riferimenti a Key Vault in un'app ASP.NET Core.

Aggiungere il flag di funzionalità all'archivio di Configurazione app

In Configurazione app di Azure, crea e abilita una coppia chiave-valore da utilizzare come flag di funzionalità. Completare i passaggi seguenti:

In un'altra scheda del browser, accedi al portale di Azure con lo stesso account e la stessa directory di Azure CLI.
Usare la casella di ricerca per trovare e aprire la risorsa configurazione app preceduta da eshop-app-features.
Nella sezione Operazioni selezionare Gestione funzionalità.
Nel menu in alto selezionare + Crea.
Selezionare la casella di controllo Abilitare flag di funzionalità.
Nella casella di testo Nome del flag di funzionalità, immettere SeasonalDiscount.
Selezionare Applica.

Ora che il feature flag è presente nello store di configurazione dell'app, il progetto Store richiede alcune modifiche per leggerlo.

Esaminare il codice

Esaminare le directory nel riquadro di esplorazione nell'IDE. Si noti che sono presenti tre progetti DataEntities, Productse Store. Il progetto Store è l'app Blazor. Il Products progetto è una libreria .NET Standard che contiene il servizio prodotto. Il DataEntities progetto è una libreria .NET Standard che contiene il modello di prodotto.

Connettere l'app all'archivio di Configurazione app

Per accedere ai valori dallo store di configurazione dell'app in un'app ASP.NET Core, è necessario il provider di configurazione di App Configuration.

Applicare le modifiche seguenti al Store progetto:

Nella finestra del terminale passare alla cartella Store:
```
cd dotnet-feature-flags/Store
```

Eseguire il comando seguente per installare un pacchetto NuGet contenente il provider di configurazione .NET per il servizio Configurazione app:

dotnet add package Microsoft.Azure.AppConfiguration.AspNetCore
dotnet add package Microsoft.FeatureManagement.AspNetCore
dotnet add package Microsoft.Extensions.Configuration.AzureAppConfiguration

Aprire il file Store/Program.cs.

Aggiungere i nuovi riferimenti al pacchetto nella parte superiore del file:

using Microsoft.FeatureManagement;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Configuration.AzureAppConfiguration;

Aggiungere questo codice sotto il commento // Aggiungi il codice AddAzureAppConfiguration.
```
// Retrieve the connection string
var connectionString = builder.Configuration.GetConnectionString("AppConfig");

// Load configuration from Azure App Configuration
builder.Configuration.AddAzureAppConfiguration(options => {
  options.Connect(connectionString)
    .UseFeatureFlags();
});

// Register the Feature Management library's services
builder.Services.AddFeatureManagement();
builder.Services.AddAzureAppConfiguration();
```
Nel frammento di codice precedente:
- Il metodo Connect esegue l'autenticazione nell'archivio di Configurazione app. Tenere presente che la stringa di connessione viene passata come variabile di ambiente ConnectionStrings:AppConfig.
- Il metodo UseFeatureFlags consente alla libreria della gestione delle funzionalità di leggere i flag di funzionalità dall'archivio di Configurazione app.
- Le due chiamate builder.Services registrano i servizi della libreria della gestione delle funzionalità con il contenitore di inserimento delle dipendenze tra app.
Nella parte inferiore del file, sotto Aggiungi il middleware di App Configuration, aggiungere questo codice:
```
app.UseAzureAppConfiguration();
```
Il codice precedente aggiunge il middleware di configurazione dell'app alla pipeline di richiesta. Il middleware attiva un'operazione di aggiornamento per i parametri di Gestione funzionalità per ogni richiesta in ingresso. Spetta quindi al provider AzureAppConfiguration decidere, in base alle impostazioni di aggiornamento, quando connettersi effettivamente all'archivio per ottenere i valori.

L'app può ora leggere il flag di funzionalità, ma la pagina dei prodotti deve essere aggiornata per indicare che è in corso una vendita. Completare i passaggi seguenti:

Aprire il file Store/Components/Pages/Products.razor.
Nella parte superiore del file aggiungere il codice seguente:
```
@using Microsoft.FeatureManagement
@inject IFeatureManager FeatureManager
```
Il codice precedente importa gli spazi dei nomi della libreria Gestione delle funzionalità e inserisce l'interfaccia IFeatureManager nel componente.
@code Nella sezione aggiungere la variabile seguente per archiviare lo stato del flag di funzionalità:
```
private bool saleOn = false;  
```

OnInitializedAsync Nel metodo aggiungere il codice seguente:

saleOn = await FeatureManager.IsEnabledAsync("SeasonalDiscount");

Il metodo dovrebbe 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();
}

Alla riga 26, sotto il  commento, aggiungere il codice seguente:
```

@if (saleOn)
{
<div class="alert alert-success" role="alert">
  Our sale is now on.
</div>
}
```
Il codice precedente visualizza un avviso di vendita se il flag di funzionalità è abilitato.

Compilare l'app

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 
```
Eseguire l'app usando Docker:
```
docker compose up
```

Testare il flag di funzionalità

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.
Selezionare Prodotti.

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

Nel portale di Azure è possibile abilitare e disabilitare il flag di funzionalità e aggiornare la pagina dei prodotti per visualizzare il flag in azione.

Commenti e suggerimenti

Questa pagina è stata utile?