Exercice - Implémenter des paramètres de configuration dans l’instance Azure App Configuration

Effectué

Une nouvelle exigence pour l’application indique maintenant d’autoriser un indicateur de fonctionnalité à contrôler une remise sur un produit. Cet exercice vous montre comment procéder.

• Ajoutez un paramètre de configuration à l’instance Azure App Configuration.
• Ajoutez du code pour utiliser le nouveau paramètre pour réduire les prix des produits.
• Générez et testez l’application.

Ajouter le paramètre de configuration au magasin App Configuration

Dans Azure App Configuration, créez maintenant une paire clé-valeur pour stocker le pourcentage de remise des ventes. Terminez la procédure suivante :

1. 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.
2. Utilisez la zone de recherche pour trouver et ouvrir la ressource App Configuration précédée de eshop-app-features.
3. Dans la section Opérations , sélectionnez Explorateur de configuration.
4. Dans le menu supérieur, sélectionnez + Créer et sélectionner Clé-valeur.
5. Dans la zone de texte Clé , entrez eShopLite__Store__DiscountPercent.
6. Dans la zone de texte Valeur , entrez 0.8.
7. Sélectionnez Appliquer.

Ajouter du code pour utiliser le nouveau paramètre de configuration

La page produit doit être mise à jour pour utiliser le nouveau paramètre de configuration. Terminez la procédure suivante :

1. Dans Visual Studio Code, ouvrez le Store/Components/Pages/Products.razor fichier.

2. Dans la @code section, ajoutez la variable suivante pour stocker l’état de l’indicateur de fonctionnalité :

   private decimal discountPercentage;  
   

3. Dans la OnInitializedAsync méthode, ajoutez le code suivant pour récupérer la valeur du paramètre de configuration :

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

   La méthode doit maintenant 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();
   
       if (saleOn) {
         discountPercentage = Convert.ToDecimal(Configuration.GetSection("eShopLite__Store__DiscountPercent").Value);
       }
   }
   

   Le code ci-dessus utilise l’objet Configuration pour récupérer la valeur du paramètre de configuration. La valeur est stockée dans la discountPercentage variable sous forme de décimale.

Afficher les prix réduits

La page produit doit être mise à jour pour afficher les prix réduits. Terminez la procédure suivante :

1. Remplacez par <td>@product.Price</td> ce code :

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

   Le code ci-dessus vérifie si la vente saisonnière est activée. S'il est activé, le prix d'origine est affiché avec une barre et le prix réduit est affiché en dessous. Si la vente saisonnière n’est pas activée, le prix d’origine est affiché.

Générer l’application

1. 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 
   

2. Exécutez l’application à l’aide de Docker :

   docker compose up
   

Tester la fonctionnalité de remise de prix

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

1. 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.
2. Sélectionnez Produits.

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

Pour tester que le drapeau de fonctionnalité contrôle la vente saisonnière, suivez les étapes suivantes :

1. Dans le portail Azure, accédez à la ressource Azure App Configuration dont le préfixe est eshop-app-features.

2. Dans la section Opérations , sélectionnez Gestionnaire de fonctionnalités.

3. Sélectionnez le commutateur SeasonalDiscount activé pour désactiver cette fonction.

   

4. Dans votre navigateur, revenez à l’application.

5. Sélectionnez la page d’accueil , puis la page Produits .

   

L’effacement du cache peut prendre jusqu’à 30 secondes. Si la bannière de vente est toujours affichée, attendez quelques secondes et actualisez à nouveau la page.