Exercício: implementar um sinalizador de recurso para controlar os recursos do aplicativo ASP.NET Core

12 minutos

Neste exercício, implemente um sinalizador de recurso para alternância de uma faixa de vendas sazonal para seu aplicativo. Os sinalizadores de recursos permitem a alternância da disponibilidade de recursos sem a necessidade de reimplantar seu aplicativo.

Você usará o Gerenciamento de Recursos na biblioteca de sinalizadores de recursos do .NET. Essa biblioteca fornece auxiliares para implementação dos sinalizadores de recursos em seu aplicativo. Ela dá suporte a casos de uso simples, como instruções condicionais, e a cenários mais avançados, como a adição condicional de rotas ou filtros de ação. Além disso, oferece suporte a filtros de recursos, que permitem habilitar recursos com base em parâmetros específicos. Entre os exemplos de tais parâmetros estão um tempo de janela, percentuais ou um subconjunto de usuários.

Nesta unidade, você vai:

Crie uma instância de Configuração de Aplicativos do Azure AD.
Adicionar um sinalizador de recursos ao armazenamento da Configuração de Aplicativos.
Conecte seu aplicativo ao repositório de Configuração de Aplicativos.
Modifique o aplicativo para usar o recurso de sinalização.
Altere a página de produtos para exibir uma faixa de vendas.
Crie e teste o aplicativo.

Abrir o ambiente de desenvolvimento

Você pode optar por usar um codespace do GitHub que hospeda o exercício ou concluí-lo localmente no Visual Studio Code.

Para usar um codespace, crie um GitHub Codespace pré-configurado com este link de criação de Codespace.

O GitHub leva vários minutos para criar e configurar o codespace. Quando concluído, você verá os arquivos de código do exercício. O código que será usado no restante deste módulo está no diretório /dotnet-feature-flags.

Para usar o Visual Studio Code, clone o repositório https://github.com/MicrosoftDocs/mslearn-dotnet-cloudnative em seu computador local. Em seguida:

Instale todos os requisitos do sistema necessários para executar o Contêiner de Desenvolvimento no Visual Studio Code.
Confira se o Docker está em execução.
Em uma nova janela do Visual Studio Code, abra a pasta do repositório que foi clonado
Pressione Ctrl+Shift+P para abrir a paleta de comandos.
Pesquisa: >Contêineres de Desenvolvimento: Recompilar e Reabrir no Contêiner
Escolha eShopLite - dotnet-feature-flags na lista de seleção. O Visual Studio Code cria seu contêiner de desenvolvimento localmente.

Criar uma instância de Configuração de Aplicativos

Conclua as seguintes etapas para criar uma instância da Configuração de Aplicativos em sua assinatura do Azure:

No novo painel do terminal, entre na CLI do Azure.
```
az login --use-device-code
```
Veja a sua assinatura do Azure selecionada.
```
az account show -o table
```
Se a assinatura incorreta estiver selecionada, selecione a correta usando o comando az account set.
Execute o seguinte comando da CLI do Azure para obter uma lista de regiões do Azure e o Nome associado a ela:
```
az account list-locations -o table
```
Localize uma região mais próxima de você e use-a na próxima etapa para substituir [Closest Azure region]
Execute os seguintes comandos da CLI do Azure para criar uma instância de Configuração de Aplicativos:
```
export LOCATION=[Closest Azure region]
export RESOURCE_GROUP=rg-eshop
export CONFIG_NAME=eshop-app-features$SRANDOM    
```
Você precisa alterar a LOCALIZAÇÃO para uma região do Azure próxima a você, por exemplo, eastus. Se desejar um nome diferente para seu grupo de recursos ou configuração de aplicativo, altere os valores acima.
Execute o comando a seguir para criar um Grupo de Recursos do Azure:
```
az group create --name $RESOURCE_GROUP --location $LOCATION
```

Execute o seguinte comando para criar uma instância de Configuração de Aplicativos:

az appconfig create --resource-group $RESOURCE_GROUP --name $CONFIG_NAME --location $LOCATION --sku Free

Uma variação do seguinte resultado é exibida:

{
  "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,

Execute esse comando para recuperar a cadeia de conexão da instância de Configuração de Aplicativos:
```
az appconfig credential list --resource-group $RESOURCE_GROUP --name $CONFIG_NAME --query [0].connectionString --output tsv
```
Essa cadeia de caracteres prefixada com Endpoint= representa a cadeia de conexão do repositório de Configuração de Aplicativos.
Copie a cadeia de conexão. Ela será usada daqui a pouco.

Armazenar a cadeia de conexão da Configuração de Aplicativos

Agora você adicionará a cadeia de conexão da Configuração de Aplicativos ao aplicativo. Conclua as seguintes etapas:

Abra o arquivo /dotnet-feature-flags/docker-compose.yml .

Adicione uma nova variável de ambiente na linha 13.

- ConnectionStrings:AppConfig=[PASTE CONNECTION STRING HERE]

O docker-compose.yml se assemelhará ao seguinte YAML:

environment: 
  - ProductEndpoint=http://backend:8080
  - ConnectionStrings:AppConfig=Endpoint=https://eshop-app-features1168054702.azconfig.io;Id=<ID>;Secret=<Secret value>

A linha anterior representa um par chave-valor, no qual ConnectionStrings:AppConfig é um nome de variável de ambiente. No projeto Store, o provedor de configuração de variáveis de ambiente lê seu valor.

Dica

Sua cadeia de conexão da Configuração de Aplicativos do Azure contém um segredo em texto sem formatação. Em aplicativos reais, considere integrar a Configuração de Aplicativos com o Azure Key Vault para o armazenamento seguro de segredos. O Key Vault está fora do escopo deste módulo, mas é possível encontrar diretrizes no Tutorial: usar referências do Key Vault em um aplicativo ASP.NET Core.

Adicionar o sinalizador de recursos ao armazenamento da Configuração de Aplicativos

Na Configuração de Aplicativos do Azure, crie e habilite um par chave-valor a ser tratado como um sinalizador de recursos. Conclua as seguintes etapas:

Em outra guia do navegador, entre no portal do Azure com a mesma conta e diretório que a CLI do Azure.
Use a caixa de pesquisa para localizar e abrir o recurso de Configuração de Aplicativos prefixado com eshop-app-features.
Na seção Operações, selecione Gerenciador de recursos.
No menu superior, selecione + Criar.
Selecione a caixa de seleção Habilitar sinalizador de recursos.
Na caixa de texto Nome do sinalizador de recurso, insira SeasonalDiscount.
Escolha Aplicar.

Agora que o sinalizador de recursos existe no armazenamento da Configuração de Aplicativos, o projeto do Store requer algumas alterações para ser lido.

Examinar o código

Examine os diretórios no painel do explorador no IDE. Observe que existem três projetos DataEntities, Products e Store. O projeto Store é o aplicativo Blazor. O projeto Products é uma biblioteca .NET Standard que contém o serviço do produto. O projeto DataEntities é uma biblioteca .NET Standard que contém o modelo do produto.

Conectar o aplicativo ao armazenamento da Configuração de Aplicativos

Para acessar os valores do armazenamento da Configuração de Aplicativos do Azure em um aplicativo ASP.NET Core, será necessário o provedor de configuração para a Configuração de Aplicativos.

Aplique as seguintes alterações a seu projeto do Store:

Na janela do terminal, navegue até a pasta Store:
```
cd dotnet-feature-flags/Store
```

Execute o seguinte comando para instalar um pacote NuGet que contém o provedor de configuração do .NET para o serviço de Configuração de Aplicativos:

dotnet add package Microsoft.Azure.AppConfiguration.AspNetCore
dotnet add package Microsoft.FeatureManagement.AspNetCore
dotnet add package Microsoft.Extensions.Configuration.AzureAppConfiguration

Abra o arquivo Store/Program.cs .

Adicione as referências do novo pacote na parte superior do arquivo:

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

Adicione este código abaixo do comentário // Adicionar o 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();
```
No snippet de código anterior:
- O método Connect autentica para o armazenamento da Configuração de Aplicativos. Lembre-se de que a cadeia de conexão está sendo passada como uma variável de ambiente ConnectionStrings:AppConfig.
- O método UseFeatureFlags permite que a biblioteca Gerenciamento de Recursos leia os sinalizadores de recursos do armazenamento de Configuração de Aplicativos.
- As duas chamadas builder.Services registram os serviços da biblioteca Gerenciamento de Recursos no contêiner de injeção de dependência do aplicativo.
Na parte inferior do arquivo, abaixo de // Adicionar o middleware da Configuração de Aplicativos, adicione este código:
```
app.UseAzureAppConfiguration();
```
O código anterior adiciona o middleware da Configuração de Aplicativos ao pipeline de solicitação. O middleware dispara uma operação de atualização para os parâmetros de Gerenciamento de Recursos em cada solicitação de entrada. Em seguida, cabe ao provedor AzureAppConfiguration decidir, com base nas configurações de atualização, quando realmente se conectar ao repositório para obter os valores.

Seu aplicativo agora pode ler o sinalizador de recurso, mas a página de produtos precisa ser atualizada para mostrar que uma venda foi ativada. Conclua as seguintes etapas:

Abra o arquivo Store/Components/Pages/Products.razor .
Na parte superior do arquivo, adicione o seguinte código:
```
@using Microsoft.FeatureManagement
@inject IFeatureManager FeatureManager
```
O código anterior importa os namespaces da biblioteca Gerenciador de recursos e injeta a interface IFeatureManager no componente.
Na seção @code, adicione a seguinte variável para armazenar o estado do sinalizador de recurso:
```
private bool saleOn = false;  
```

No método OnInitializedAsync, adicione o seguinte código:

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

O método deve se parecer com o código a seguir:

protected override async Task OnInitializedAsync()
{
    saleOn = await FeatureManager.IsEnabledAsync("SeasonalDiscount");

    // Simulate asynchronous loading to demonstrate streaming rendering
    products = await ProductService.GetProducts();
}

Na linha 26, sob o comentário , adicione o código a seguir:
```

@if (saleOn)
{
<div class="alert alert-success" role="alert">
  Our sale is now on.
</div>
}
```
O código anterior exibe um alerta de vendas se o sinalizador de recursos estiver habilitado.

Criar o aplicativo

Certifique-se de ter salvo todas as suas alterações e de estar no diretório dotnet-feature-flags. Execute o seguinte comando no terminal:
```
dotnet publish /p:PublishProfile=DefaultContainer 
```
Execute o aplicativo usando o Docker:
```
docker compose up
```

Testar o sinalizador de recursos

Para verificar se o sinalizador de recurso funciona conforme o esperado em um codespace, execute as etapas a seguir:

Alterne para a guia PORTAS e, à direita do endereço local da porta doFront-End, selecione o ícone de globo. O navegador abrirá uma nova guia na página inicial.
Selecione Produtos.

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

No portal do Microsoft Azure, você pode habilitar e desabilitar o sinalizador de recurso e atualizar a página de produtos para ver o sinalizador em ação.