Cvičení – implementace nastavení konfigurace v instanci Azure App Configuration

Dokončeno

Nový požadavek aplikace nyní uvádí, že pomocí příznaku funkce je možné řídit slevu na produkt. V tomto cvičení se dozvíte, jak to udělat.

• Přidejte nastavení konfigurace do instance Azure App Configuration.
• Přidejte kód pro použití nového nastavení pro slevové ceny produktů.
• Sestavte a otestujte aplikaci.

Přidání nastavení konfigurace do App Configuration Storu

V Azure App Configuration nyní vytvořte nový pár klíč-hodnota pro uložení procentuální slevy z prodeje. Proveďte následující kroky:

1. Na jiné kartě prohlížeče se přihlaste k webu Azure Portal se stejným účtem a adresářem jako Azure CLI.
2. Pomocí vyhledávacího pole vyhledejte a otevřete prostředek konfigurace aplikace s předponou eshop-app-features.
3. V části Operations vyberte Konfigurační prohlížeč.
4. V horní nabídce vyberte + Vytvořit a vyberte Klíč-Hodnota.
5. Do textového pole Klíč zadejte eShopLite__Store__DiscountPercent.
6. Do textového pole Hodnota zadejte 0,8.
7. Vyberte Použít.

Přidání kódu pro použití nového nastavení konfigurace

Stránku produktu je potřeba aktualizovat, aby používala nové nastavení konfigurace. Proveďte následující kroky:

1. V editoru Visual Studio Code otevřete soubor Store/Components/Pages/Products.razor.

2. V části @code přidejte následující proměnnou pro uložení stavu příznaku funkce:

   private decimal discountPercentage;  
   

3. Do metody OnInitializedAsync přidejte následující kód, který načte hodnotu nastavení konfigurace:

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

   Metoda by teď měla vypadat jako následující kód:

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

   Výše uvedený kód používá objekt Configuration k načtení hodnoty nastavení konfigurace. Hodnota je uložena v proměnné discountPercentage jako desetinné číslo.

Zobrazení zvýhodněných cen

Stránku produktu je potřeba aktualizovat, aby se zobrazily snížené ceny. Proveďte následující kroky:

1. Nahraďte <td>@product.Price</td> tímto kódem:

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

   Výše uvedený kód zkontroluje, jestli je povolený sezónní prodej. Pokud je povolená, zobrazí se původní cena s přeškrtnutím a pod ní se zobrazí zlevněná cena. Pokud sezónní prodej není povolený, zobrazí se původní cena.

Sestavení aplikace

1. Ujistěte se, že jste uložili všechny změny a nacházíte se v dotnet-feature-flags adresáři. V terminálu spusťte následující příkaz:

   dotnet publish /p:PublishProfile=DefaultContainer 
   

2. Spusťte aplikaci pomocí Dockeru:

   docker compose up
   

Otestovat funkci cenové slevy

Pokud chcete ověřit, že příznak funkce funguje podle očekávání v codespace, proveďte následující kroky:

1. Přepněte na kartu PORTY a napravo od místní adresy portu Front End vyberte ikonu zeměkoule. Prohlížeč otevře novou kartu na domovské stránce.
2. Vyberte Produkty.

Pokud používáte Visual Studio Code místně, otevřete http://localhost:32000/products.

Aby bylo možné otestovat konfigurační přepínač, který ovládá sezónní prodej, postupujte podle těchto kroků:

1. Na portálu Azure přejděte na prostředek Azure App Configuration s předponou eshop-app-features.

2. V části Operations vyberte správce funkcí.

3. Pro vypnutí této funkce vyberte přepínač SeasonalDiscount zapnuto.

   

4. V prohlížeči se vraťte do aplikace.

5. Vyberte domovskou stránku a potom stránku Produkty.

   

Vymazání mezipaměti může trvat až 30 sekund. Pokud se stále zobrazuje banner prodeje, počkejte několik sekund a aktualizujte stránku znovu.