Tutorial: Ejecución de experimentos con marcas de características variantes (versión preliminar)

Artículo
05/21/2024

La ejecución de experimentos en la aplicación puede ayudarle a tomar decisiones fundamentadas para mejorar el rendimiento de la aplicación y la experiencia del usuario. En esta guía, aprenderá a configurar y ejecutar experimentaciones en un almacén de App Configuration. Aprenderá a recopilar y medir datos mediante las funcionalidades de App Configuration, Application Insights (versión preliminar) y Área de trabajo de experimentación dividida (versión preliminar).

Al hacerlo, puede tomar decisiones controladas por datos para mejorar la aplicación.

Nota:

Una manera rápida de iniciar el recorrido de experimentación es ejecutar el ejemplo de cita del día AZD. Este repositorio proporciona un ejemplo completo, completo con el aprovisionamiento de recursos de Azure y un primer experimento, sobre cómo integrar Azure App Configuration con las aplicaciones .NET para ejecutar experimentos.

En este tutorial ha:

Creación de una marca de característica variante
Agregue un recurso Application Insights a su almacén
Agregar un área de trabajo de experimentación dividida a la tienda
Configuración de una aplicación para la ejecución de un experimento
Habilitación de la telemetría y creación de un experimento en la marca de característica variante
Creación de métricas para el experimento
Obtención de resultados de experimentación

Requisitos previos

Suscripción a Azure. Si no tiene uno, cree uno de forma gratuita.
Un almacén de App Configuration.
Un recurso área de trabajo de experimentación dividida.
Un recurso de Application Insights basado en el área de trabajo.

Creación de una marca de características variante (versión preliminar)

Cree una marca de característica variante denominada Greeting con dos variantes, Off y On, como se describe en el inicio rápido marca de características.

Conexión de un recurso de Application Insights (versión preliminar) al almacén de configuración

Para ejecutar un experimento, primero debe conectar un recurso de Application Insights basado en el área de trabajo al almacén de App Configuration. Al conectar este recurso al almacén de App Configuration, se establece el almacén de configuración con el origen de telemetría para la experimentación.

En el almacén de App Configuration, seleccione Telemetría > Application Insights (versión preliminar).
Seleccione el recurso de Application Insights que desea usar como proveedor de telemetría para las marcas de características y la aplicación variantes y seleccione Guardar. Si no tiene un recurso de Application Insights, seleccione Crear nuevo. Para obtener más información sobre cómo continuar, vaya a Crear un recurso basado en el área de trabajo. A continuación, vuelva a Application Insights (versión preliminar), recargar la lista de recursos de Application Insights disponibles y seleccione el nuevo recurso de Application Insights.
Una notificación indica que el recurso de Application Insights se actualizó correctamente para el almacén de App Configuration.

Conexión de un área de trabajo de experimentación dividida (versión preliminar) a su almacén

Para ejecutar experimentos en Azure App Configuration, usará el área de trabajo De experimentación dividida. Siga los pasos que se indican a continuación para conectar un área de trabajo de experimentación dividida al almacén.

En el almacén de App Configuration, seleccione Experimentación>área de trabajo de experimentación dividida (versión preliminar) en el menú de la izquierda.
Seleccione una Área de trabajo de experimentación divididay, a continuación, Guardar. Si no tiene un área de trabajo de experimentación dividida, siga el inicio rápido Área de trabajo de experimentación dividida crear una.

Nota:

El origen de datos seleccionado en el área de trabajo De experimentación dividida debe ser el mismo recurso de Application Insights que se seleccionó en el paso anterior.
Una notificación indica que la operación se realizó correctamente.

Configuración de una aplicación para la ejecución de un experimento

Ahora que ha conectado el recurso de Application Insights (versión preliminar) al almacén de App Configuration, configure una aplicación para ejecutar el experimento (versión preliminar).

En este ejemplo, creará una aplicación web de ASP.NET denominada Cita del día. Cuando se carga la aplicación, muestra una cita. Los usuarios pueden presionar el botón de corazón para gustarlo. Para mejorar la interacción del usuario, quiere explorar si un mensaje de saludo personalizado aumentará el número de usuarios que les gusta la cita. Puede crear la marca de características de Greeting en Azure App Configuration con dos variantes, Desactivado y En. Los usuarios que reciben el Desactivado variante verán un título estándar. Los usuarios que reciben el En variante recibirán un mensaje de saludo. Recopile y guarde la telemetría de las interacciones del usuario en Application Insights. Con el área de trabajo de experimentación dividida, puede analizar la eficacia del experimento.

Creación de una aplicación y adición de secretos de usuario

Abra un símbolo del sistema y ejecute el código siguiente. Esto crea una nueva aplicación Razor Pages en ASP.NET Core, mediante la autenticación de cuenta individual y la coloca en una carpeta de salida denominada QuoteOfTheDay.
```
dotnet new razor --auth Individual -o QuoteOfTheDay
```
En el símbolo del sistema, vaya a la carpeta QuoteOfTheDay y ejecute el siguiente comando para crear un secreto de usuario para la aplicación. Este secreto contiene la cadena de conexión para App Configuration.
```
dotnet user-secrets set ConnectionStrings:AppConfiguration "<App Configuration Connection string>"
```

Cree otro secreto de usuario que contenga la cadena de conexión para Application Insights.

dotnet user-secrets set ConnectionStrings:AppInsights "<Application Insights Connection string>"

Actualización del código de la aplicación

En QuoteOfTheDay.csproj, agregue las versiones preliminares más recientes de los SDK de Feature Management y App Configuration según sea necesario.

<PackageReference Include="Microsoft.Azure.AppConfiguration.AspNetCore" Version="8.0.0-preview.2" />
<PackageReference Include="Microsoft.FeatureManagement.Telemetry.ApplicationInsights" Version="4.0.0-preview3" />
<PackageReference Include="Microsoft.FeatureManagement.Telemetry.ApplicationInsights.AspNetCore" Version="4.0.0-preview3" />
<PackageReference Include="Microsoft.FeatureManagement.AspNetCore" Version="4.0.0-preview3" />

En Program.cs, en la línea var builder = WebApplication.CreateBuilder(args);, agregue el proveedor de App Configuration, que extrae la configuración de Azure cuando se inicia la aplicación. De manera predeterminada, el método UseFeatureFlags incluye todas las marcas de características sin etiqueta y establece un tiempo de expiración de caché de 30 segundos.
```
builder.Configuration
    .AddAzureAppConfiguration(o =>
    {
        o.Connect(builder.Configuration.GetConnectionString("AppConfiguration"));

        o.UseFeatureFlags();
    });
```

En Program.cs, agregue las siguientes instrucciones usando:

using Microsoft.ApplicationInsights.AspNetCore.Extensions;
using Microsoft.ApplicationInsights.Extensibility;
using Microsoft.FeatureManagement.Telemetry.ApplicationInsights.AspNetCore;

En donde se llama a builder.Configuration.AddAzureAppConfiguration, agregue:
```
// Add Application Insights telemetry.
builder.Services.AddApplicationInsightsTelemetry(
    new ApplicationInsightsServiceOptions
    {
        ConnectionString = builder.Configuration.GetConnectionString("AppInsights"),
        EnableAdaptiveSampling = false
    })
    .AddSingleton<ITelemetryInitializer, TargetingTelemetryInitializer>();
```
Este fragmento de código realiza las siguientes acciones.
- Agregar un cliente de telemetría de Application Insights a la aplicación.
- Agregue un inicializador de telemetría que anexa información de destino a la telemetría saliente.
- Deshabilite el muestreo adaptable. Para obtener más información sobre cómo deshabilitar el muestreo adaptable, vaya a Solución de problemas.

En la carpeta raíz QuoteOfTheDay, cree un nuevo archivo denominado ExampleTargetingContextAccessor.cs. Esto crea una nueva clase denominada ExampleTargetingContextAccessor. Pegue el contenido siguiente en el archivo.

using Microsoft.FeatureManagement.FeatureFilters;

namespace QuoteOfTheDay
{
    public class ExampleTargetingContextAccessor : ITargetingContextAccessor
    {
        private const string TargetingContextLookup = "ExampleTargetingContextAccessor.TargetingContext";
        private readonly IHttpContextAccessor _httpContextAccessor;

        public ExampleTargetingContextAccessor(IHttpContextAccessor httpContextAccessor)
        {
            _httpContextAccessor = httpContextAccessor ?? throw new ArgumentNullException(nameof(httpContextAccessor));
        }

        public ValueTask<TargetingContext> GetContextAsync()
        {
            HttpContext httpContext = _httpContextAccessor.HttpContext;
            if (httpContext.Items.TryGetValue(TargetingContextLookup, out object value))
            {
                return new ValueTask<TargetingContext>((TargetingContext)value);
            }
            List<string> groups = new List<string>();
            if (httpContext.User.Identity.Name != null)
            {
                groups.Add(httpContext.User.Identity.Name.Split("@", StringSplitOptions.None)[1]);
            }
            TargetingContext targetingContext = new TargetingContext
            {
                UserId = httpContext.User.Identity.Name ?? "guest",
                Groups = groups
            };
            httpContext.Items[TargetingContextLookup] = targetingContext;
            return new ValueTask<TargetingContext>(targetingContext);
        }
    }
}

Esta clase declara cómo el destino de FeatureManagement obtiene el contexto de un usuario. En este caso, lee httpContext.User.Identity.Name para el UserId y trata el dominio de la dirección de correo electrónico como un Group.

Navegue de nuevo a Program.cs y agregue las siguientes instrucciones de uso.

using Microsoft.FeatureManagement.Telemetry;
using Microsoft.FeatureManagement;
using QuoteOfTheDay;

En el lugar en el que se llamó a AddApplicationInsightsTelemetry, agregue servicios para controlar la actualización de App Configuration, configure administración de características, configure el destino de administración de características y habilite Administración de características para publicar eventos de telemetría.
```
builder.Services.AddHttpContextAccessor();

// Add Azure App Configuration and feature management services to the container.
builder.Services.AddAzureAppConfiguration()
    .AddFeatureManagement()
    .WithTargeting<ExampleTargetingContextAccessor>()
    .AddTelemetryPublisher<ApplicationInsightsTelemetryPublisher>();
```
En la línea var app = builder.Build();, agregue un middleware que desencadene la actualización de App Configuration cuando corresponda.
```
// Use Azure App Configuration middleware for dynamic configuration refresh.
app.UseAzureAppConfiguration();
```
En ese caso, agregue el código siguiente para permitir que el TargetingTelemetryInitializer tenga acceso a la información de destino almacenándola en HttpContext.
```
// Add TargetingId to HttpContext for telemetry
app.UseMiddleware<TargetingHttpContextMiddleware>();
```
En QuoteOfTheDay>Pages>Compartido>_Layout.cshtml, en donde se agrega QuoteOfTheDay.styles.css, agregue la siguiente línea para agregar el css para la versión 5.15.3 de font-awesome.
```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
```

Abra QuoteOfTheDay>Páginas>Index.cshtml.cs y sobrescriba el contenido en la aplicación de citas.

using Microsoft.ApplicationInsights;
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, TelemetryClient telemetryClient) : PageModel
{
    private readonly IVariantFeatureManagerSnapshot _featureManager = featureManager;
    private readonly TelemetryClient _telemetryClient = telemetryClient;

    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 bool ShowGreeting { get; set; }

    public async void OnGet()
    {
        Quote = _quotes[new Random().Next(_quotes.Length)];

        Variant variant = await _featureManager.GetVariantAsync("Greeting", HttpContext.RequestAborted);

        ShowGreeting = variant.Configuration.Get<bool>();
    }

    public IActionResult OnPostHeartQuoteAsync()
    {
        string? userId = User.Identity?.Name;

        if (!string.IsNullOrEmpty(userId))
        {
            // Send telemetry to Application Insights
            _telemetryClient.TrackEvent("Like");

            return new JsonResult(new { success = true });
        }
        else
        {
            return new JsonResult(new { success = false, error = "User not authenticated" });
        }
    }
}

Este PageModel elige una comilla aleatoria, usa GetVariantAsync para obtener la variante para el usuario actual y establece una variable denominada "ShowGreeting" en el valor de la variante. El PageModel también controla las solicitudes de publicación, llamando a _telemetryClient.TrackEvent("Like");, que envía un evento a Application Insights con el nombre Like. Este evento está asociado automáticamente al usuario y a la variante, y las métricas pueden realizar el seguimiento.

Abra index.cshtml y sobrescriba el contenido de la aplicación de cita.

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
    ViewData["Username"] = User.Identity.Name;
}

<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">
        @if (Model.ShowGreeting)
        {
            <h3 class="greeting-content">Hi <b>@User.Identity.Name</b>, hope this makes your day!</h3>
        }
        else
        {
            <h3 class="greeting-content">Quote of the day</h3>
        }
        <br />
        <p class="quote">“@Model.Quote.Message”</p>
        <p>- <b>@Model.Quote.Author</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>

    <form action="/" method="post">
        @Html.AntiForgeryToken()
    </form>
</div>

<script>
    function heartClicked(button) {
        var icon = button.querySelector('i');
        icon.classList.toggle('far');
        icon.classList.toggle('fas');

        // If the quote is hearted
        if (icon.classList.contains('fas')) {
            // Send a request to the server to save the vote
            fetch('/Index?handler=HeartQuote', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
                }
            });
        }
    }
</script>

Este código corresponde a la interfaz de usuario para mostrar QuoteOfTheDay y controlar mediante la acción del corazón en una cita. Usa el valor de Model.ShowGreeting mencionado anteriormente para mostrar diferentes cosas a distintos usuarios, en función de su variante.

Compilar y ejecutar la aplicación

En el símbolo del sistema, en la carpeta QuoteOfTheDay, ejecute: dotnet build.
Ejecute dotnet run --launch-profile https.
Busque un mensaje en el formato Now listening on: https://localhost:{port} en la salida de la aplicación. Vaya al vínculo incluido en el explorador.
Una vez que vea la aplicación en ejecución, seleccione Registrar en la parte superior derecha para registrar un nuevo usuario.
Registre un nuevo usuario denominado user@contoso.com. La contraseña debe tener al menos seis caracteres y contener un número y un carácter especial.
Seleccione el vínculo Haga clic aquí para validar el correo electrónico después de escribir la información del usuario.
Registre un segundo usuario denominado userb@contoso.com, escriba otra contraseña y valide este segundo correo electrónico.

Nota:

Es importante que este tutorial use estos nombres exactamente. Siempre que la característica se haya configurado según lo previsto, los dos usuarios deben ver variantes diferentes.
Seleccione Inicio de sesión en la parte superior derecha para iniciar sesión como usuariob (userb@contoso.com).
Una vez que haya iniciado sesión, debería ver que userb@contoso.com ve un mensaje especial al ver la aplicación.

userb@contoso.com es el único usuario que ve el mensaje especial.

Habilitación de la telemetría y creación de un experimento en la marca de característica variante

Habilite la telemetría y cree un experimento en la marca de característica variante siguiendo estos pasos:

En el almacén de App Configuration, vaya a Operaciones>Administrador de características.
Seleccione la ... menú contextual hasta la derecha de la marca de característica variante "Greeting" y seleccione Editar.
Vaya a la pestaña Telemetría y active la casilla Habilitar telemetría.
Vaya a la pestaña Experimento, active la casilla Crear experimentoy asigne un nombre al experimento.
Seleccione Revisar y actualizary, a continuación, Actualizar.
Una notificación indica que la operación se realizó correctamente. En Administrador de características, la marca de característica variante debe tener la palabra Activo en Experimento.

Creación de métricas para el experimento

Una métrica en el área de trabajo de experimentación dividida es una medida cuantitativa de un evento enviado a Application Insights. Esta métrica ayuda a evaluar el impacto de una marca de característica en el comportamiento y los resultados del usuario.

Al actualizar la aplicación anteriormente, agregó _telemetryClient.TrackEvent("Like") al código de la aplicación. Like es un evento de telemetría que representa una acción del usuario, en este caso la selección del botón Corazón. Este evento se envía al recurso de Application Insights, que se conectará a la métrica que va a crear. La aplicación que creamos solo especifica un evento, pero puede tener varios eventos y, posteriormente, varias métricas. Varias métricas también se pueden basar en un único evento de Application Insight.

Vaya al recurso Área de trabajo de experimentación dividida. En Configuración>Métricas de experimentación, seleccione Crear.

Seleccione o escriba la siguiente información en Crear una métrica de experimentación y guarde con Crear.

Captura de pantalla de Azure Portal, que crea una nueva métrica de experimentación.

Configuración	Valor de ejemplo	Descripción
Nombre	Voto de corazón	Nombre de la métrica de experimentación.
Descripción	Número de personas que seleccionan el botón de corazón cuando ven un mensaje especial, frente a cuando no lo hacen.	Descripción opcional de la métrica.
Nombre de evento de Application Insights	Like	Nombre del evento de Application Insights. Este nombre distingue mayúsculas de minúsculas y es el nombre especificado en el código con `_telemetryClient.TrackEvent("<Event-Name>")`.
Medir como	Recuento	Están disponibles las siguientes opciones: Count: cuenta el número de veces que los usuarios desencadenan el evento. Promedio: promedio del valor del evento para los usuarios. Suma: agrega los valores del evento para los usuarios. Muestra el valor de suma promedio. Porcentaje: calcula el porcentaje de usuarios que desencadenó el evento.
Impacto deseado	Aumentar	Esta configuración representa el objetivo o propósito final detrás de la medición de la métrica creada.

En este tutorial, nuestra hipótesis es que más usuarios hacen clic en el botón similar al corazón cuando hay un mensaje especial junto a la cita del día. El código de la aplicación realiza un seguimiento de este clic como un evento denominado Like. La aplicación envía el evento Like como telemetría a Application Insights y el impacto deseado para este experimento es ver un Aumentar en el número de clics de usuario (medidos como Recuento) en el Heart Vote, para poder validar la hipótesis dada. Si hay una disminución en el número de clics en el botón a pesar de que el mensaje especial se muestra a la audiencia asignada, la hipótesis se invalida para este experimento.

Una vez creada, la nueva métrica se muestra en el portal. Puede editarlo o eliminarlo seleccionando el menú contextual (...) situado en el lado derecho de la pantalla.

Obtención de resultados de experimentación

Para poner el experimento de configuración recién configurado en la prueba y generar resultados para que pueda analizar, simula cierto tráfico a la aplicación y espera un tiempo de 10 a 15 minutos.

Para ver los resultados del experimento, vaya a Administrador de características y, en la lista de marcas de características variantes, haga clic en ...>Experimento o seleccione el vínculo Activo en la columna Experimento. Esta columna no se muestra de forma predeterminada. Para mostrarlo, en Administrador de características, seleccione Administrar vista>Editar columnas>Agregar columna>Experimento y Aplicar.

En la página de resultados, una Versión del Experimento, un Línea base de para comparar los resultados y una variante de Comparación se seleccionan de forma predeterminada. Si es necesario, cambie los valores predeterminados según su gusto y seleccione Aplicar para ver el resultado del experimento.

En la captura de pantalla anterior se muestra que el experimento tenía el resultado deseado, con la variante On para la Heart Vote lo que da como resultado un 560,62 % más votos de Corazón que la variante Off .

Cualquier edición de una marca de característica variante genera una nueva versión de la experimentación, que puede seleccionar para ver sus resultados.

Nota:

Para obtener resultados de experimentación, necesita al menos 30 eventos por variante, pero se recomienda tener más que el tamaño mínimo de muestreo para asegurarse de que la experimentación genere resultados confiables.

Nota:

El muestreo de Application Insights está habilitado de forma predeterminada y puede afectar a los resultados de experimentación. En este tutorial, se recomienda desactivar el muestreo en Application Insights. Obtenga más información sobre el muestreo en Application Insights.

Paso siguiente

Para más información sobre los conceptos de experimentación, consulte el siguiente documento.

Experimentación

En l siguiente documento encontrará la lista completa de características de la biblioteca de administración de características de .NET.

Administración de características de .NET

Compartir a través de

Tutorial: Ejecución de experimentos con marcas de características variantes (versión preliminar)

Requisitos previos

Creación de una marca de características variante (versión preliminar)

Conexión de un recurso de Application Insights (versión preliminar) al almacén de configuración

Conexión de un área de trabajo de experimentación dividida (versión preliminar) a su almacén

Configuración de una aplicación para la ejecución de un experimento

Creación de una aplicación y adición de secretos de usuario

Actualización del código de la aplicación

Compilar y ejecutar la aplicación

Habilitación de la telemetría y creación de un experimento en la marca de característica variante

Creación de métricas para el experimento

Obtención de resultados de experimentación

Paso siguiente

Comentarios

Recursos adicionales