Kurz: Použití příznaků funkcí variant v aplikaci ASP.NET Core

Článek
12/19/2024

V tomto kurzu použijete příznak variantní funkce ke správě prostředí pro různé uživatelské segmenty v ukázkové aplikaci Citát dne. Použijete příznak varianty vytvořený v příznaku Použít variantní funkce. Než budete pokračovat, ujistěte se, že vytvoříte příznak funkce varianty s názvem Greeting (Pozdrav) v obchodě App Configuration Store.

Požadavky

Ujistěte se, že je na vašem počítači nainstalované rozhraní příkazového řádku .NET.
Postupujte podle kurzu Použití příznaků funkcí varianty a vytvořte příznak funkce variant s názvem Greeting.

Vytvoření webové aplikace ASP.NET Core

V příkazovém řádku spusťte následující kód. Tento příkaz vytvoří novou aplikaci Razor Pages v ASP.NET Core pomocí ověřování jednotlivých účtů a umístí ji do výstupní složky s názvem QuoteOfTheDay.
```
dotnet new razor --auth Individual -o QuoteOfTheDay
```
Přejděte do adresáře QuoteOfTheDay a vytvořte pro aplikaci tajný kód uživatele spuštěním následujících příkazů. <your-App-Configuration-endpoint> Zástupný symbol nahraďte koncovým bodem vašeho App Configuration Storu. Koncový bod najdete v okně Přehled obchodu App Configuration Store na webu Azure Portal.
```
dotnet user-secrets init
dotnet user-secrets set Endpoints:AppConfiguration "<your-App-Configuration-endpoint>"
```

Přidejte nejnovější verze požadovaných balíčků.

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

Připojení ke službě App Configuration pro správu funkcí

Otevřete Program.cs a přidejte následující příkazy using.

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

Přidejte následující kód pro připojení ke službě App Configuration Store a volání UseFeatureFlags pro stažení všech příznaků funkcí bez popisku.

Použijete DefaultAzureCredential k ověření ve službě App Configuration Store. Postupujte podle pokynů a přiřaďte své přihlašovací údaje roli Čtenář dat konfigurace aplikace. Před spuštěním aplikace nezapomeňte povolit dostatek času, než se oprávnění rozšíří.

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

Přidejte Aplikace Azure služby konfigurace a správy funkcí a povolte cílení na správu funkcí.

// Add Azure App Configuration and feature management services to the container.
builder.Services.AddAzureAppConfiguration()
    .AddFeatureManagement()
    .WithTargeting();

Pod řádek var app = builder.Build();přidejte Aplikace Azure Middleware konfigurace pro dynamickou aktualizaci konfigurace.
```
// Use Azure App Configuration middleware for dynamic configuration refresh.
app.UseAzureAppConfiguration();
```

Použití příznaku funkce varianty

Otevřete QuoteOfTheDay>Pages>Index.cshtml.cs a nahraďte obsah následujícím kódem.

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

Zavoláte GetVariantAsync načtení varianty příznaku funkce Greeting pro aktuálního uživatele a přiřadíte jeho hodnotu GreetingMessage vlastnosti modelu stránky.

V QuoteOfTheDay>Pages>Shared>_Layout.cshtml, pod kde QuoteOfTheDay.styles.css je přidán, přidejte následující odkaz na font-awesome CSS library.
```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
```

Otevřete soubor index.cshtml a nahraďte jeho obsah následujícím kódem.

@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>

Tento kód zobrazí uživatelské rozhraní aplikace Citace dne a zobrazí GreetingMessage z modelu stránky. Obslužná rutina heartClicked JavaScriptu se aktivuje po kliknutí na tlačítko srdce.

Sestavte a spusťte aplikaci.

Sestavte a spusťte aplikaci.
```
dotnet build
dotnet run
```
Po načtení aplikace vyberte Zaregistrovat v pravém horním rohu a zaregistrujte nového uživatele.
Zaregistrujte nového uživatele s názvem usera@contoso.com.
Po zadání informací o uživateli kliknutím sem ověříte e-mail.
Opakujte stejný postup pro registraci druhého uživatele s názvem userb@contoso.com.

Poznámka:

Pro účely tohoto kurzu je důležité používat tyto názvy přesně. Pokud je funkce nakonfigurovaná podle očekávání, měli by dva uživatelé vidět různé varianty.
V pravém horním rohu vyberte Přihlásit se jako usera@contoso.com.
Po přihlášení se zobrazí dlouhá zpráva s pozdravem pro usera@contoso.com
Klikněte na Odhlásit se a přihlásit se jako userb@contoso.com, zobrazí se jednoduchá zpráva s pozdravem.