Ejercicio: Implementación de una marca de característica para controlar las características de la aplicación ASP.NET Core

  • 12 minutos

En este ejercicio, implemente una marca de característica para alternar un banner de ventas de temporada para la aplicación. Las marcas de características permiten alternar la disponibilidad de características sin volver a implementar la aplicación.

Usará la administración de características en la biblioteca de marcas de características de .NET. Esta biblioteca proporciona aplicaciones auxiliares para implementar marcas de características en la aplicación. La biblioteca admite desde casos de uso sencillos, como instrucciones condicionales, a escenarios más avanzados, como agregar condicionalmente filtros de acción o rutas. Además, admite filtros de características, que permiten habilitar características basadas en parámetros específicos. Algunos ejemplos de estos parámetros son tiempos de ventana, porcentajes o un subconjunto de usuarios.

En esta unidad, aprenderá a:

  • Creación de una instancia de Azure App Configuration.
  • Agregar una marca de característica al almacén de App Configuration.
  • Conexión de la aplicación al almacén de App Configuration.
  • Modifique la aplicación para usar la marca de características.
  • Cambie la página de productos para mostrar un banner de ventas.
  • Compile y pruebe la aplicación.

Abrir el entorno de desarrollo

Puede optar por usar un codespace de GitHub que hospede el ejercicio, o bien hacer el ejercicio localmente en Visual Studio Code.

Para usar un codespace, cree un codespace de GitHub preconfigurado con este vínculo de creación de codespaces.

GitHub tarda unos minutos en crear y configurar el codespace. Cuando termine, verá los archivos de código del ejercicio. El código que se usa para el resto de este módulo está en el directorio /dotnet-feature-flags.

Para usar Visual Studio Code, clone el repositorio https://github.com/MicrosoftDocs/mslearn-dotnet-cloudnative en la máquina local. Después:

  1. Instale cualquier requisito del sistema para ejecutar Dev Container en Visual Studio Code.
  2. Asegúrese de que Docker se está ejecutando.
  3. En una ventana nueva de Visual Studio Code, abra la carpeta del repositorio clonado
  4. Presione Ctrl+Mayús+P para abrir la paleta de comandos.
  5. Buscar: >Contenedores de desarrollo: Recompilar y volver a abrir en contenedor
  6. Seleccione eShopLite - dotnet-feature-flags en la lista desplegable. Visual Studio Code crea el contenedor de desarrollo localmente.

Creación de una instancia de App Configuration

Complete los pasos siguientes para crear una instancia de App Configuration en la suscripción de Azure:

  1. En el nuevo panel de terminal, inicie sesión en la CLI de Azure.

    az login --use-device-code

  2. Vea la suscripción de Azure seleccionada.

    az account show -o table

    Si se ha seleccionado una suscripción incorrecta, seleccione la correcta mediante el comando az account set.

  3. Ejecute el siguiente comando de la CLI de Azure para obtener una lista de las regiones de Azure y el nombre asociado a ella:

    az account list-locations -o table

    Busque una región más cercana y úsela en el paso siguiente para reemplazar [Closest Azure region]

  4. Ejecute los siguientes comandos de la CLI de Azure para crear una instancia de App Configuration:

    export LOCATION=[Closest Azure region]
export RESOURCE_GROUP=rg-eshop
export CONFIG_NAME=eshop-app-features$SRANDOM

    Debe cambiar la UBICACIÓN a una región de Azure cercana, por ejemplo, Este de EE. UU. Si desea un nombre diferente para el grupo de recursos o la configuración de la aplicación, cambie los valores anteriores.

  5. Ejecute el comando siguiente para crear el grupo de recursos de Azure:

    az group create --name $RESOURCE_GROUP --location $LOCATION

  6. Ejecute el comando siguiente para crear una instancia de App Configuration:

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

    Aparece una variación del resultado siguiente:

    {
  "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,

  7. Ejecute este comando para recuperar la cadena de conexión de la instancia de App Configuration:

    az appconfig credential list --resource-group $RESOURCE_GROUP --name $CONFIG_NAME --query [0].connectionString --output tsv

    Esta cadena con prefijo Endpoint= representa la cadena de conexión del almacén de App Configuration.

  8. Copie la cadena de conexión. La usará en un momento.

Almacenamiento de la cadena de conexión de App Configuration

Ahora agregará la cadena de conexión de App Configuration a la aplicación. Complete los pasos siguientes:

  1. Abra el archivo /dotnet-feature-flags/docker-compose.yml.

  2. Agregue una nueva variable de entorno en la línea 13.

    - ConnectionStrings:AppConfig=[PASTE CONNECTION STRING HERE]

    docker-compose.yml será similar al archivo YAML siguiente:

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

La línea anterior representa un par clave-valor, en el que ConnectionStrings:AppConfig es un nombre de la variable de entorno. En el proyecto Store, el proveedor de configuración de variables de entorno leerá su valor.

Sugerencia

La cadena de conexión de Azure App Configuration contiene un secreto de texto sin formato. En las aplicaciones reales, considere la posibilidad de integrar App Configuration con Azure Key Vault para un almacenamiento de secretos seguro. Key Vault está fuera de ámbito para este módulo, pero encontrará instrucciones en Tutorial: Uso de referencias de Key Vault en una aplicación de ASP.NET Core.

Incorporación de una marca de característica al almacén de App Configuration

En Azure App Configuration, cree y habilite un par clave-valor que se trate como marca de característica. Siga los pasos siguientes:

  1. En otra pestaña del explorador, inicie sesión en Azure Portal con la misma cuenta y el mismo directorio que la CLI de Azure.

  2. Use el cuadro de búsqueda para buscar y abrir el recurso de App Configuration con el prefijo eshop-app-features.

    Captura de pantalla de los resultados de la búsqueda de Azure Portal en la que se muestra que el recurso de App Configuration tiene el prefijo

  3. En la sección Operaciones, seleccione Administrador de características.

  4. En el menú superior, seleccione + Crear.

  5. Active la casilla Habilitar marca de característica.

  6. En el cuadro de texto Nombre de la marca de característica, escriba SeasonalDiscount.

  7. Seleccione Aplicar.

    Captura de pantalla de la marca de nueva característica agregada.

    Ahora que la marca de característica existe en el almacén de App Configuration, el proyecto Store requiere algunos cambios para leerlo.

Revisión del código

Revise los directorios en el panel del explorador en el entorno de desarrollo integrado (IDE). Tenga en cuenta que hay tres proyectos DataEntities, Products y Store. El proyecto Store es la aplicación Blazor. El proyecto Products es una biblioteca de .NET Standard que contiene el servicio de producto. El proyecto DataEntities es una biblioteca de .NET Standard que contiene el modelo de producto.

Conexión de la aplicación al almacén de App Configuration

Para obtener acceso a los valores del almacén de App Configuration en una aplicación de ASP.NET Core, es necesario el proveedor de configuración de App Configuration.

Aplique los siguientes cambios al proyecto Store:

  1. En la ventana del terminal, vaya a la carpeta Almacenar:

    cd dotnet-feature-flags/Store

  2. Ejecute el siguiente comando para instalar un paquete NuGet que contenga el proveedor de configuración de .NET para el servicio App Configuration:

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

  3. Abra el archivo Store/Program.cs .

  4. Agregue las nuevas referencias de paquete en la parte superior del archivo:

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

  5. Agregue este código debajo de // Agregue el comentario de código 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();

    En el fragmento de código anterior:

    • El método Connect se autentica en el almacén de App Configuration. Recuerde que la cadena de conexión se pasa como una variable de entorno ConnectionStrings:AppConfig.
    • El método UseFeatureFlags permite que la biblioteca de Administración de características lea las marcas de características del almacén de App Configuration.
    • Las dos llamadas builder.Services registran los servicios de la biblioteca de Administración de características con el contenedor de inserción de dependencias de la aplicación.

  6. En la parte inferior del archivo, debajo de // Agregar el middleware de App Configuration, agregue este código:

    app.UseAzureAppConfiguration();

    El código anterior agrega el middleware de App Configuration a la canalización de la solicitud. El middleware desencadena una operación de actualización para los parámetros de administración de características para todas las solicitudes entrantes. A continuación, depende del proveedor de AzureAppConfiguration decidir, en función de la configuración de actualización, cuándo conectarse realmente al almacén para obtener los valores.

Habilitación de un banner de ventas

La aplicación ahora puede leer la marca de característica, pero la página de productos debe actualizarse para mostrar que una venta está activada. Complete los pasos siguientes:

  1. Abra el archivo Store/Components/Pages/Products.razor.

  2. Agregue el código siguiente en la parte superior del archivo:

    @using Microsoft.FeatureManagement
@inject IFeatureManager FeatureManager

    El código anterior importa los espacios de nombres de la biblioteca de Administración de características e inserta la interfaz IFeatureManager en el componente.

  3. En la sección @code, agregue la siguiente variable para almacenar el estado de la marca de característica:

    private bool saleOn = false;

  4. Agregue el siguiente código al método OnInitializedAsync:

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

    El método debe ser similar al código siguiente:

    protected override async Task OnInitializedAsync()
{
    saleOn = await FeatureManager.IsEnabledAsync("SeasonalDiscount");

    // Simulate asynchronous loading to demonstrate streaming rendering
    products = await ProductService.GetProducts();
}

  5. En la línea 26, debajo del comentario <!-- Add a sales alert for customers -->, agregue el código siguiente:

    <!-- Add a sales alert for customers -->
@if (saleOn)
{
<div class="alert alert-success" role="alert">
  Our sale is now on.
</div>
}

    El código anterior muestra una alerta de ventas si la marca de característica está habilitada.

Compilar la aplicación

  1. Asegúrese de que ha guardado todos los cambios y se encuentra en el directorio dotnet-feature-flags. En el terminal, ejecute el comando siguiente:

    dotnet publish /p:PublishProfile=DefaultContainer

  2. Ejecute la aplicación mediante Docker:

    docker compose up

Prueba de la marca de característica

Para comprobar que la marca de característica funciona según lo previsto en un codespace, complete los pasos siguientes:

  1. Cambie a la pestaña PUERTOS y, después, a la derecha de la dirección local del puerto Front-end, seleccione el icono del globo. El explorador abre una nueva pestaña en la página principal.
  2. Seleccione Productos.

Si usa Visual Studio Code localmente, abra http://localhost:32000/products.

Captura de pantalla en la que se muestra la alerta de venta en la página de productos.

En Azure Portal, puede habilitar y deshabilitar la marca de características y actualizar la página de productos para ver la marca en acción.