Condividi tramite


Esercitazione: Usare flag di funzionalità varianti in un'applicazione ASP.NET Core

In questa esercitazione si usa un flag di funzionalità variante per gestire le esperienze per segmenti utente diversi in un'applicazione di esempio, Offerta del giorno. Usare il flag di funzionalità variant creato in Usa flag di funzionalità varianti. Prima di procedere, assicurarsi di creare il flag di funzionalità variante denominato Greeting nell'archivio Configurazione app.

Prerequisiti

  • Verificare che l'interfaccia della riga di comando di .NET sia installata nel computer.
  • Seguire l'esercitazione Usare flag di funzionalità varianti e creare il flag di funzionalità variant denominato Greeting.

Creare un'app Web ASP.NET Core

  1. Eseguire il codice seguente in un prompt dei comandi. Questo comando crea una nuova applicazione Razor Pages in ASP.NET Core, usando l'autenticazione dell'account singolo e la inserisce in una cartella di output denominata QuoteOfTheDay.

    dotnet new razor --auth Individual -o QuoteOfTheDay
    
  2. Passare alla directory QuoteOfTheDay e creare un segreto utente per l'applicazione eseguendo i comandi seguenti. Sostituire il segnaposto con l'endpoint <your-App-Configuration-endpoint> dell'archivio Configurazione app. È possibile trovare l'endpoint nel pannello Panoramica dell'archivio Configurazione app nel portale di Azure.

    dotnet user-secrets init
    dotnet user-secrets set Endpoints:AppConfiguration "<your-App-Configuration-endpoint>"
    
  3. Aggiungere le versioni più recenti dei pacchetti necessari.

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

Connettersi a Configurazione app per la gestione delle funzionalità

  1. Aprire Program.cs e aggiungere le istruzioni using seguenti.

    using Azure.Identity;
    using Microsoft.Extensions.Configuration.AzureAppConfiguration;
    using Microsoft.FeatureManagement;
    
  2. Aggiungere il codice seguente per connettersi all'archivio Configurazione app e chiamare UseFeatureFlags per eseguire il pull di tutti i flag di funzionalità senza etichetta.

    Usare per eseguire l'autenticazione DefaultAzureCredential nell'archivio Configurazione app. Seguire le istruzioni per assegnare le credenziali al ruolo lettore dati Configurazione app. Assicurarsi di consentire tempo sufficiente per la propagazione dell'autorizzazione prima di eseguire l'applicazione.

    var builder = WebApplication.CreateBuilder(args); 
    
    // Retrieve the endpoint
    string endpoint = builder.Configuration.GetValue<string>("Endpoints:AppConfiguration")
        ?? throw new InvalidOperationException("The setting `Endpoints:AppConfiguration` was not found.");
    
    // Load configuration and feature flags from Azure App Configuration
    builder.Configuration
        .AddAzureAppConfiguration(options =>
        {
            options.Connect(new Uri(endpoint), new DefaultAzureCredential())
                   .UseFeatureFlags();
        });
    
  3. Aggiungere app Azure Servizi di configurazione e gestione delle funzionalità e abilitare la destinazione per la gestione delle funzionalità.

    // Add Azure App Configuration and feature management services to the container.
    builder.Services.AddAzureAppConfiguration()
        .AddFeatureManagement()
        .WithTargeting();
    
  4. Nella riga var app = builder.Build();aggiungere app Azure middleware di configurazione per l'aggiornamento della configurazione dinamica.

    // Use Azure App Configuration middleware for dynamic configuration refresh.
    app.UseAzureAppConfiguration();
    

Usare il flag di funzionalità variant

  1. Aprire QuoteOfTheDay>Pages>Index.cshtml.cs e sostituire il contenuto con il codice seguente.

    using Microsoft.AspNetCore.Mvc;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    using Microsoft.FeatureManagement;
    
    namespace QuoteOfTheDay.Pages;
    
    public class Quote
    {
        public string Message { get; set; }
    
        public string Author { get; set; }
    }
    
    public class IndexModel(IVariantFeatureManagerSnapshot featureManager) : PageModel
    {
        private readonly IVariantFeatureManagerSnapshot _featureManager = featureManager;
    
        private Quote[] _quotes = [
            new Quote()
            {
                Message = "You cannot change what you are, only what you do.",
                Author = "Philip Pullman"
            }];
    
        public Quote? Quote { get; set; }
    
        public string GreetingMessage { get; set; }
    
        public async void OnGet()
        {
            Quote = _quotes[new Random().Next(_quotes.Length)];
    
            Variant variant = await _featureManager.GetVariantAsync("Greeting", HttpContext.RequestAborted);
    
            if (variant != null)
            {
                GreetingMessage = variant.Configuration?.Get<string>() ?? "";
            }
            else
            {
                _logger.LogWarning("No variant given. Either the feature flag named 'Greeting' is not defined or the variants are not defined properly.");
            }
        }
    }
    

    Si chiama GetVariantAsync per recuperare la variante del flag di funzionalità Greeting per l'utente corrente e assegnarne il GreetingMessage valore alla proprietà del modello di pagina.

  2. In QuoteOfTheDay>Pages>Shared>_Layout.cshtml, in dove QuoteOfTheDay.styles.css viene aggiunto, aggiungere il riferimento seguente alla libreria CSS di tipo font-awesome.

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    
  3. Aprire index.cshtml e sostituirlo con il codice seguente.

    @page
    @model IndexModel
    @{
        ViewData["Title"] = "Home page";
        ViewData["Username"] = User.Identity?.Name ?? string.Empty;
    }
    
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
        }
    
        .quote-container {
            background-color: #fff;
            margin: 2em auto;
            padding: 2em;
            border-radius: 8px;
            max-width: 750px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            display: flex;
            justify-content: space-between;
            align-items: start;
            position: relative;
        }
    
        .vote-container {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            gap: 0em;
        }
    
        .vote-container .btn {
            background-color: #ffffff; /* White background */
            border-color: #ffffff; /* Light blue border */
            color: #333
        }
    
        .vote-container .btn:focus {
            outline: none;
            box-shadow: none;
        }
    
        .vote-container .btn:hover {
            background-color: #F0F0F0; /* Light gray background */
        }
    
        .greeting-content {
            font-family: 'Georgia', serif; /* More artistic font */
        }
    
        .quote-content p.quote {
            font-size: 2em; /* Bigger font size */
            font-family: 'Georgia', serif; /* More artistic font */
            font-style: italic; /* Italic font */
            color: #4EC2F7; /* Medium-light blue color */
        }
    </style>
    
    <div class="quote-container">
        <div class="quote-content">
            <h3 class="greeting-content">@(Model.GreetingMessage)</h3>
            <br />
            <p class="quote">“@(Model.Quote?.Message ?? "< Quote not found >")”</p>
            <p>- <b>@(Model.Quote?.Author ?? "Unknown")</b></p>
        </div>
    
        <div class="vote-container">
            <button class="btn btn-primary" onclick="heartClicked(this)">
                <i class="far fa-heart"></i> <!-- Heart icon -->
            </button>
        </div>
    </div>
    
    <script>
        function heartClicked(button) {
            var icon = button.querySelector('i');
            icon.classList.toggle('far');
            icon.classList.toggle('fas');
        }
    </script>
    

    Questo codice visualizza l'interfaccia utente dell'applicazione Quote of the Day e mostra dal GreetingMessage modello di pagina. Il gestore heartClicked JavaScript viene attivato quando si fa clic sul pulsante a cuore.

Compilare ed eseguire l'app

  1. Compilare ed eseguire l'applicazione.

    dotnet build
    dotnet run
    
  2. Dopo aver caricato l'applicazione, selezionare Registra in alto a destra per registrare un nuovo utente.

    Screenshot dell'app Citazione del giorno, che mostra Registra.

  3. Registrare un nuovo utente denominato usera@contoso.com.

  4. Selezionare il collegamento Clicca qui per convalidare l’indirizzo e-mail dopo aver immesso le informazioni utente.

    Screenshot dell'app Offerta del giorno, che mostra il clic per confermare.

  5. Ripetere gli stessi passaggi per registrare un secondo utente denominato userb@contoso.com.

    Nota

    Ai fini di questa esercitazione è importante usare esattamente questi nomi. Se la funzionalità è stata configurata come previsto, i due utenti dovrebbero visualizzare varianti diverse.

  6. Selezionare Login (Accedi ) in alto a destra per accedere come usera@contoso.com.

    Screenshot dell'app Citazione del giorno, che mostra **Accedi**.

  7. Dopo aver eseguito l'accesso, viene visualizzato un messaggio di saluto lungo per usera@contoso.com

    Screenshot dell'app Offerta del giorno, che mostra un messaggio lungo per l'utente.

  8. Fare clic su Disconnetti e accedere come userb@contoso.com, viene visualizzato il messaggio di saluto semplice.

    Screenshot dell'app Offerta del giorno, che mostra un semplice messaggio per l'utente.

Passaggi successivi

Per il rundown completo delle funzionalità della libreria di gestione delle funzionalità .NET, vedere il documento seguente.