Exercício – Implementar configurações na instância de Configuração de Aplicativo do Azure

Concluído

Um novo requisito para o aplicativo agora diz para permitir que um sinalizador de recurso controle um desconto para um produto. Este exercício mostra como fazer isso.

• Adicione uma configuração à instância de Configuração de Aplicativo do Azure.
• Adicione código para usar a nova configuração para descontar os preços dos produtos.
• Compile e teste o aplicativo.

Adicionar a configuração ao repositório de Configuração de Aplicativos

Na Configuração de Aplicativos do Azure, agora crie um novo par chave-valor para armazenar o percentual de desconto de vendas. Conclua as seguintes etapas:

1. Em outra guia do navegador, entre no portal do Azure com a mesma conta e diretório da CLI do Azure.
2. Use a caixa de pesquisa para localizar e abrir o recurso de Configuração de Aplicativo prefixado com eshop-app-features.
3. Na seção Operações , selecione o Gerenciador de Configurações.
4. No menu superior, selecione + Criar e selecione Chave-valor.
5. Na caixa de texto Chave, digite eShopLite__Store__DiscountPercent.
6. Na caixa de texto Valor , insira 0,8.
7. Selecione Aplicar.

Adicionar código para usar a nova configuração

A página do produto precisa ser atualizada para usar a nova configuração. Conclua as seguintes etapas:

1. No Visual Studio Code, abra o arquivo Store/Components/Pages/Products.razor.

2. Na seção @code, adicione a seguinte variável para armazenar o estado do sinalizador de recurso:

   private decimal discountPercentage;  
   

3. OnInitializedAsync No método, adicione o seguinte código para recuperar o valor da configuração:

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

   O método agora deve se parecer com o seguinte código:

   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);
       }
   }
   

   O código acima usa o objeto Configuration para recuperar o valor da configuração. O valor é armazenado na discountPercentage variável como uma decimal.

Exibir os preços com desconto

A página do produto precisa ser atualizada para exibir os preços com desconto. Conclua as seguintes etapas:

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

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

   O código acima verifica se a venda sazonal está habilitada. Se estiver habilitado, o preço original será exibido tachado e o preço com desconto será exibido abaixo dele. Se a venda sazonal não estiver habilitada, o preço original será exibido.

Compilar o aplicativo

1. Verifique se você salvou todas as suas alterações e está no diretório dotnet-feature-flags . No terminal, execute o seguinte comando:

   dotnet publish /p:PublishProfile=DefaultContainer 
   

2. Execute o aplicativo usando o Docker:

   docker compose up
   

Testar o recurso de desconto de preço

Para verificar se o sinalizador de recurso funciona conforme o esperado em um codespace, conclua as seguintes etapas:

1. Mude para a aba PORTS e, à direita do endereço local da porta Front End, selecione o ícone de globo. O navegador abre uma nova aba na página inicial.
2. Selecione Produtos.

Se você estiver usando o Visual Studio Code localmente, abra http://localhost:32000/products.

Para verificar se o sinalizador de funcionalidade está controlando a venda sazonal, conclua as seguintes etapas:

1. No portal do Azure, navegue até o recurso de Configuração de Aplicativo do Azure prefixado com eshop-app-features.

2. Na seção Operações , selecione Gerenciador de Recursos.

3. Selecione o alternador SazonalDiscount ativado para desativar esse recurso.

   

4. No navegador, retorne ao aplicativo.

5. Selecione a página Inicial, depois a página Produtos.

   Uma captura de tela mostrando o aplicativo eShopLite sem um banner de vendas.

Pode levar até 30 segundos para que o cache seja limpo. Se o banner de vendas ainda estiver sendo exibido, aguarde alguns segundos e atualize a página novamente.