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

Completado

Ahora se indica un nuevo requisito para la aplicación que permite que una marca de característica controle un descuento para un producto. Este ejercicio muestra cómo hacerlo.

• Agregue un valor de 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. 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.
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.

Agregue código para usar el nuevo valor de configuración

La página del producto debe actualizarse para usar el nuevo valor de configuración. Complete los pasos siguientes:

1. Abra el archivo Store/Components/Pages/Products.razor en Visual Studio Code.

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

   private decimal discountPercentage;  
   

3. En el método OnInitializedAsync, 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 variable discountPercentage como decimal.

Mostrar los precios con descuento

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

1. Reemplace <td>@product.Price</td> por 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.

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
   

Probar la característica de descuento de precio

Para comprobar que la marca de características 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.

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

1. En Azure Portal, vaya 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 botón de alternancia SeasonalDiscount habilitado para desactivar esta característica.

   

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

5. Seleccione la página principal 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.

Continuar