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 casos de uso simples como instrucciones condicionales para escenarios más avanzados, como agregar rutas condicionalmente o filtros de acción. Además, admite filtros de características, que permiten habilitar características basadas en parámetros específicos. Algunos ejemplos de estos parámetros incluyen una ventana de tiempo, porcentajes o un subconjunto de usuarios.

En esta unidad, aprenderás a:

Cree una instancia de Azure App Configuration.
Agregar una marca de característica al almacén de App Configuration.
Conecte su aplicación al almacén de configuración de aplicaciones.
Modifique la aplicación para usar la bandera 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 Codespace.

GitHub tarda varios minutos en crear y configurar el espacio de código. Una vez que esté terminado, verá los archivos de código del ejercicio. El código que se usa para el resto de este módulo se encuentra 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. A continuación:

Instale cualquier requisito del sistema para ejecutar Dev Container en Visual Studio Code.
Asegúrese de que Docker se está ejecutando.
En una ventana nueva de Visual Studio Code, abra la carpeta del repositorio clonado
Presione Ctrl+Mayús+P para abrir la paleta de comandos.
Buscar: >Contenedores de desarrollo: Recompilar y volver a abrir en contenedor
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:

En el nuevo panel de terminal, inicie sesión en la CLI de Azure.
```
az login --use-device-code
```
Vea la suscripción de Azure seleccionada.
```
az account show -o table
```
Si se selecciona la suscripción incorrecta, seleccione la correcta con el comando az account set .
Ejecute el siguiente comando de la CLI de Azure para obtener una lista de regiones de Azure y el nombre asociado a él:
```
az account list-locations -o table
```
Busque una región más cercana y úsela en el paso siguiente para reemplazarla. [Closest Azure region]
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 eastus. Si desea un nombre diferente para el grupo de recursos o la configuración de la aplicación, cambie los valores anteriores.
Ejecute el comando siguiente para crear el grupo de recursos de Azure:
```
az group create --name $RESOURCE_GROUP --location $LOCATION
```

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,

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.
Copie la cadena de conexión. Lo usarás en un momento.

Almacena la cadena de conexión de App Configuration

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

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

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

- ConnectionStrings:AppConfig=[PASTE CONNECTION STRING HERE]

docker-compose.yml Será similar al siguiente CÓDIGO YAML:

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 variable de entorno. En el Store proyecto, el proveedor de configuración de variables de entorno lee su valor.

Sugerencia

La cadena de conexión de Azure App Configuration contiene un secreto de texto sin formato. En las aplicaciones del mundo real, considere la posibilidad de integrar App Configuration con Azure Key Vault para proteger el almacenamiento de secretos. Key Vault está fuera del ámbito de este módulo, pero puede encontrar instrucciones en Tutorial: Uso de referencias de Key Vault en una aplicación 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 para que se trate como una marca de característica. Lleve a cabo los pasos siguientes:

En otra pestaña del explorador, inicie sesión en Azure Portal con la misma cuenta y directorio que la CLI de Azure.
Utiliza el cuadro de búsqueda para encontrar y abrir el recurso de App Configuration con el prefijo eshop-app-features.
En la sección Operaciones , seleccione Administrador de características.
En el menú superior, seleccione + Crear.
Seleccione la casilla Habilitar bandera de características.
En el cuadro de texto Nombre del indicador de función, escriba SeasonalDiscount.
Selecciona Aplicar.

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

Revisión del código

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

Conecta tu aplicación al almacén de App Configuration

Para acceder a los valores del almacén de App Configuration en una aplicación ASP.NET Core, se necesita el proveedor de configuración para App Configuration.

Aplique los cambios siguientes al Store proyecto:

En la ventana del terminal, vaya a la carpeta Store:
```
cd dotnet-feature-flags/Store
```

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

Abra el archivo Store/Program.cs.

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

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

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.
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 solicitudes. El middleware desencadena una operación de actualización para los parámetros de Administración de características para cada solicitud entrante. 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.

La aplicación ahora puede leer la bandera de función, pero la página de productos debe actualizarse para mostrar que una venta está en curso. Lleve a cabo los pasos siguientes:

Abra el archivo Store/Components/Pages/Products.razor.
En la parte superior del archivo, agregue el código siguiente:
```
@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.
En la @code sección , agregue la siguiente variable para almacenar el estado de la marca de característica:
```
private bool saleOn = false;  
```

En el OnInitializedAsync método , agregue el código siguiente:

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

El método debe tener un aspecto 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();
}

En la línea 26, en el  comentario, agregue el código siguiente:
```

@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 bandera de característica está habilitada.

Compilación de la aplicación

Asegúrese de que ha guardado todos los cambios y se encuentra en el directorio dotnet-feature-flags . En el terminal, ejecute el siguiente comando:
```
dotnet publish /p:PublishProfile=DefaultContainer 
```
Ejecute la aplicación mediante Docker:
```
docker compose up
```

Prueba la bandera de características

Para comprobar que la marca de características funciona según lo previsto en un espacio de código, complete los pasos siguientes:

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

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

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.

Comentarios

¿Le ha resultado útil esta página?