Ejercicio: Implementación de opciones de configuración en la instancia de Azure App Configuration

Completado

Ahora, un nuevo requisito para la aplicación establece que se debe permitir una bandera de funcionalidades para controlar un descuento en un producto. En este ejercicio se muestra cómo hacerlo.

• Agregue una configuración a la instancia de Azure App Configuration.
• Agregue código para usar la nueva configuración para descontar los precios del producto.
• Compile y pruebe la aplicación.

Agregue el valor de configuración al almacén de App Configuration

En Azure App Configuration, cree ahora un nuevo par clave-valor para almacenar el porcentaje de descuento de ventas. Lleve a cabo los pasos siguientes:

1. En otra pestaña del explorador, inicie sesión en Azure Portal con la misma cuenta y directorio que la CLI de Azure.
2. Utiliza el cuadro de búsqueda para encontrar y abrir el recurso de App Configuration con el prefijo eshop-app-features.
3. En la sección Operaciones , seleccione Explorador de configuración.
4. En el menú superior, seleccione + Crear y seleccione Clave-valor.
5. En el cuadro de texto Clave, escriba eShopLite__Store__DiscountPercent.
6. En el cuadro de texto Valor , escriba 0,8.
7. Seleccione Aplicar.

Agregar código para usar la nueva configuración

La página del producto debe actualizarse para usar la nueva configuración. Lleve a cabo los pasos siguientes:

1. En Visual Studio Code, abra el Store/Components/Pages/Products.razor archivo.

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

   private decimal discountPercentage;  
   

3. En el OnInitializedAsync método , agregue el código siguiente para recuperar el valor de la configuración:

   if (saleOn) {
     discountPercentage = Convert.ToDecimal(Configuration.GetSection("eShopLite__Store__DiscountPercent").Value);
   }
   

   El método debería tener ahora 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();
   
       if (saleOn) {
         discountPercentage = Convert.ToDecimal(Configuration.GetSection("eShopLite__Store__DiscountPercent").Value);
       }
   }
   

   El código anterior usa el objeto Configuration para recuperar el valor de la configuración. El valor se almacena en la discountPercentage variable como decimal.

Mostrar los precios con descuento

La página del producto debe actualizarse para mostrar los precios con descuento. Lleve a cabo los pasos siguientes:

1. Reemplace por <td>@product.Price</td> este código:

   <td>
     @if (saleOn) {
       <strike>@(product.Price)</strike><br>
       @((product.Price * discountPercentage).ToString("#.##"))
     } else {
       @product.Price
     }
   </td>
   

   El código anterior comprueba si la venta estacional está habilitada. Si está habilitada, el precio original se muestra tachado y el precio con descuento se muestra debajo de él. Si la venta estacional no está habilitada, se muestra el precio original.

Compilación de 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 siguiente comando:

   dotnet publish /p:PublishProfile=DefaultContainer 
   

2. Ejecute la aplicación mediante Docker:

   docker compose up
   

Prueba de la característica de descuento de precio

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

1. 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.
2. Seleccione Productos.

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

Para probar que la bandera de características está controlando la venta estacional, complete los siguientes pasos:

1. En el portal de Azure, navegue al recurso de Azure App Configuration con el prefijo eshop-app-features.

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

3. Seleccione el conmutador DescuentoEstacional habilitado para desactivarlo.

   

4. En el explorador, vuelva a la aplicación.

5. Seleccione la página Inicio y, a continuación, la página Productos .

   

La memoria caché puede tardar hasta 30 segundos en borrarse. Si se sigue mostrando el banner de ventas, espere unos segundos y vuelva a actualizar la página.