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

Concluído

Um novo requisito para a aplicação agora diz para permitir que uma flag de funcionalidade controle o desconto de um produto. Este exercício mostra-lhe como fazer isso.

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

Adicionar a definição de configuração à App Configuration Store

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

1. Em outra guia do navegador, inicie sessão 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 Configuração do Aplicativo prefixado com eshop-app-features.
3. Na seção Operações, selecione Explorador de Configuração.
4. No menu superior, selecione + Criar e selecione Chave-valor.
5. Na caixa de texto Key, digite eShopLite__Store__DiscountPercent.
6. Na caixa de texto Valor, digite 0,8.
7. Selecione Aplicar.

Adicionar código para usar a nova definição de 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. No método OnInitializedAsync, adicione o seguinte código para recuperar o valor da definição de configuração:

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

   O método agora deve assemelhar-se ao 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 definição de configuração. O valor é armazenado na variável discountPercentage como 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á ativada. Se estiver ativado, o preço original é apresentado com um risco e o preço com desconto é apresentado abaixo dele. Se a venda sazonal não estiver ativada, o preço original será exibido.

Crie o aplicativo

1. Certifique-se de ter salvo todas as alterações e de estar 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
   

Teste o recurso de desconto de preço

Para verificar se o sinalizador de recurso funciona como esperado em um espaço de código, conclua as seguintes etapas:

1. Alterne para a guia PORTAS e, em seguida, à direita do endereço local da porta Front End, selecione o ícone de globo. O navegador abre um novo separador na página inicial.
2. Selecione Produtos.

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

Para testar a funcionalidade de controle da venda sazonal, siga os passos seguintes:

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

2. Na seção Operações, selecione Gestor de funcionalidades.

3. Selecione o botão SeasonalDiscount ativado para desativar esse recurso.

   

4. Volte à aplicação no seu browser.

5. Selecione a página Início e, em seguida, a página Produtos.

   

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.