Exercice : Implémenter un indicateur de fonctionnalité pour contrôler des fonctionnalités d’application ASP.NET Core

12 minutes

Dans cet exercice, implémentez un indicateur de fonctionnalité pour activer une bannière de ventes saisonnières pour votre application. Les indicateurs de fonctionnalité vous permettent de désactiver la disponibilité des fonctionnalités sans redéployer votre application.

Vous allez utiliser la gestion des fonctionnalités dans la bibliothèque d’indicateurs de fonctionnalité .NET. Cette bibliothèque fournit des assistances pour implémenter des indicateurs de fonctionnalité dans votre application. La bibliothèque prend en charge des cas d’usage simples tels que des instructions conditionnelles dans des scénarios plus avancés, comme l’ajout conditionnel d’itinéraires ou de filtres d’action. En outre, il prend en charge les filtres de fonctionnalités, qui vous permettent d’activer les fonctionnalités en fonction de paramètres spécifiques. Par exemple, ces paramètres incluent un temps de fenêtre, des pourcentages ou un sous-ensemble d’utilisateurs.

Dans cette unité, vous allez :

Créez une instance Azure App Configuration.
Ajoutez un indicateur de fonctionnalité au magasin App Configuration.
Connectez votre application au magasin App Configuration.
Modifiez l’application pour utiliser l’indicateur de fonctionnalité.
Modifiez la page des produits pour afficher une bannière de vente.
Générez et testez l’application.

Ouvrez l’environnement de développement

Vous pouvez choisir d’utiliser un codespace GitHub qui héberge l’exercice ou effectuer l’exercice localement dans Visual Studio Code.

Pour utiliser un codespace, créez un codespace GitHub préconfiguré avec ce lien de création de codespace.

GitHub prend plusieurs minutes pour créer et configurer l’espace de code. Une fois l’exercice terminé, vous voyez les fichiers de code de l’exercice. Le code utilisé pour le reste de ce module se trouve dans le répertoire /dotnet-feature-flags .

Pour utiliser Visual Studio Code, clonez le référentiel https://github.com/MicrosoftDocs/mslearn-dotnet-cloudnative sur votre ordinateur local. Ensuite :

Installez les éléments système requis pour exécuter Dev Container dans Visual Studio Code.
Vérifiez que Docker est en cours d’exécution.
Dans une nouvelle fenêtre Visual Studio Code, ouvrez le dossier du référentiel cloné.
Appuyez sur Ctrl+Maj+P pour ouvrir la palette de commandes.
Recherche : >Dev Containers : Reconstruire et rouvrir dans un conteneur
Sélectionnez eShopLite - dotnet-feature-flags dans la liste déroulante. Visual Studio Code crée votre conteneur de développement localement.

Créer une instance App Configuration

Effectuez les étapes suivantes pour créer une instance App Configuration dans votre abonnement Azure :

Dans le nouveau volet de terminal, connectez-vous à Azure CLI.
```
az login --use-device-code
```
Affichez votre abonnement Azure sélectionné.
```
az account show -o table
```
Si l’abonnement incorrect est sélectionné, sélectionnez le bon abonnement à l’aide de la commande az account set .
Exécutez la commande Azure CLI suivante pour obtenir la liste des régions Azure et le nom associé :
```
az account list-locations -o table
```
Recherchez une région la plus proche de vous et utilisez-la à l’étape suivante pour remplacer [Closest Azure region]
Exécutez les commandes Azure CLI suivantes pour créer une instance App Configuration :
```
export LOCATION=[Closest Azure region]
export RESOURCE_GROUP=rg-eshop
export CONFIG_NAME=eshop-app-features$SRANDOM    
```
Vous devez changer l’emplacement d’une région Azure proche de vous, par exemple eastus. Si vous souhaitez un autre nom pour votre groupe de ressources ou votre configuration d’application, modifiez les valeurs ci-dessus.
Exécutez la commande suivante pour créer le groupe de ressources Azure :
```
az group create --name $RESOURCE_GROUP --location $LOCATION
```

Exécutez la commande suivante pour créer une instance App Configuration :

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

Une variante de la sortie suivante apparaît :

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

Exécutez cette commande pour récupérer la chaîne de connexion de l’instance App Configuration :
```
az appconfig credential list --resource-group $RESOURCE_GROUP --name $CONFIG_NAME --query [0].connectionString --output tsv
```
La chaîne précédée de Endpoint= représente la chaîne de connexion du magasin App Configuration.
Copiez la chaîne de connexion. Vous l’utiliserez en un instant.

Stocker la chaîne de connexion de la configuration de l'application

Vous allez maintenant ajouter la chaîne de connexion App Configuration à l’application. Terminez la procédure suivante :

Ouvrez le fichier /dotnet-feature-flags/docker-compose.yml .

Ajoutez une nouvelle variable d’environnement à la ligne 13.

- ConnectionStrings:AppConfig=[PASTE CONNECTION STRING HERE]

Le docker-compose.yml ressemblera au YAML suivant :

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

La ligne précédente représente une paire clé-valeur, dans laquelle ConnectionStrings:AppConfig est un nom de variable d’environnement. Dans le Store projet, le fournisseur de configuration des variables d’environnement lit sa valeur.

Conseil / Astuce

Votre chaîne de connexion Azure App Configuration contient un secret en texte brut. Dans les applications réelles, envisagez d’intégrer App Configuration à Azure Key Vault pour sécuriser le stockage des secrets. Key Vault est hors de portée pour ce module, mais vous trouverez des conseils dans le tutoriel : Utilisez les références Key Vault dans une application ASP.NET Core.

Ajouter l’indicateur de fonctionnalité au magasin App Configuration

Dans Azure App Configuration, créez et activez une paire clé-valeur à traiter comme un indicateur de fonctionnalité. Terminez la procédure suivante :

Dans un autre onglet de navigateur, connectez-vous au portail Azure avec le même compte et le même répertoire que l’interface de ligne de commande Azure.
Utilisez la zone de recherche pour trouver et ouvrir la ressource App Configuration précédée de eshop-app-features.
Dans la section Opérations , sélectionnez Gestionnaire de fonctionnalités.
Dans le menu supérieur, sélectionnez + Créer.
Cochez la case Activer l’indicateur de fonctionnalité .
Dans la zone de texte Nom de l’indicateur de fonctionnalité , entrez SeasonalDiscount.
Sélectionnez Appliquer.

Maintenant que l’indicateur de fonctionnalité existe dans le magasin App Configuration, le Store projet nécessite des modifications pour le lire.

Passer en revue le code

Passez en revue les répertoires dans le volet Explorateur de l’IDE. Notez qu’il y a trois projets DataEntities, Productset Store. Le projet Store est l’application Blazor. Le Products projet est une bibliothèque .NET Standard qui contient le service de produit. Le DataEntities projet est une bibliothèque .NET Standard qui contient le modèle de produit.

Connecter votre application au magasin App Configuration

Pour accéder aux valeurs du magasin App Configuration dans une application ASP.NET Core, le fournisseur de configuration pour App Configuration est nécessaire.

Appliquez les modifications suivantes à votre Store projet :

Dans la fenêtre de terminal, accédez au dossier Store :
```
cd dotnet-feature-flags/Store
```

Exécutez la commande suivante pour installer un package NuGet contenant le fournisseur de configuration .NET pour le service App Configuration :

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

Ouvrez le fichier Store/Program.cs .

Ajoutez les nouvelles références de package en haut du fichier :

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

Ajoutez ce code sous le commentaire // Add the AddAzureAppConfiguration code.
```
// 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();
```
Dans l’extrait de code précédent :
- La Connect méthode s’authentifie auprès du magasin App Configuration. Rappelez-vous que la chaîne de connexion est passée en tant que variable d’environnement ConnectionStrings:AppConfig.
- La UseFeatureFlags méthode permet à la bibliothèque de gestion des fonctionnalités de lire les indicateurs de fonctionnalité à partir du magasin "App Configuration".
- Les deux appels builder.Services inscrivent les services de la bibliothèque Gestion des fonctionnalités avec le conteneur d’injection de dépendances de l’application.
En bas du fichier, sous Ajouter l’intergiciel App Configuration, ajoutez ce code :
```
app.UseAzureAppConfiguration();
```
Le code précédent ajoute l’intergiciel App Configuration au pipeline de requête. L’intergiciel déclenche une opération d’actualisation pour les paramètres de gestion des fonctionnalités pour chaque requête entrante. Ensuite, il appartient au AzureAppConfiguration fournisseur de décider, en fonction des paramètres d’actualisation, quand se connecter réellement au magasin pour obtenir les valeurs.

Votre application peut maintenant lire l’indicateur de fonctionnalité, mais la page des produits doit être mise à jour pour montrer qu’une vente est activée. Terminez la procédure suivante :

Ouvrez le fichier Store/Components/Pages/Products.razor .
En haut du fichier, ajoutez le code suivant :
```
@using Microsoft.FeatureManagement
@inject IFeatureManager FeatureManager
```
Le code précédent importe les espaces de noms de la bibliothèque Feature Management et injecte l’interface IFeatureManager dans le composant.
Dans la @code section, ajoutez la variable suivante pour stocker l’état de l’indicateur de fonctionnalité :
```
private bool saleOn = false;  
```

Dans la OnInitializedAsync méthode, ajoutez le code suivant :

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

La méthode doit ressembler au code suivant :

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

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

À la ligne 26, sous le  commentaire, ajoutez le code suivant :
```

@if (saleOn)
{
<div class="alert alert-success" role="alert">
  Our sale is now on.
</div>
}
```
Le code précédent affiche une alerte de vente si l’indicateur de fonctionnalité est activé.

Générer l’application

Vérifiez que vous avez enregistré toutes vos modifications et que vous êtes dans le répertoire dotnet-feature-flags . Dans le terminal, exécutez la commande suivante :
```
dotnet publish /p:PublishProfile=DefaultContainer 
```
Exécutez l’application à l’aide de Docker :
```
docker compose up
```

Tester l’indicateur de fonctionnalité

Pour vérifier que l’indicateur de fonctionnalité fonctionne comme prévu dans un espace de code, procédez comme suit :

Basculez vers l’onglet PORTS, puis à droite de l’adresse locale du port Front-End, sélectionnez l’icône globe. Le navigateur ouvre un nouvel onglet dans la page d’accueil.
Sélectionnez Produits.

Si vous utilisez Visual Studio Code localement, ouvrez http://localhost:32000/products.

Dans le portail Azure, vous pouvez activer et désactiver l’indicateur de fonctionnalité et actualiser la page produits pour afficher l’indicateur en action.

Rétroaction

Cette page vous a-t-elle été utile ?