Ćwiczenie — wdrożenie ustawień konfiguracji w instancji Azure App Configuration

10 min

Nowe wymaganie w aplikacji dotyczy wprowadzenia flagi funkcji do kontrolowania rabatu na produkt. W tym ćwiczeniu pokazano, jak to zrobić.

Dodaj ustawienie konfiguracji w instancji usługi Azure App Configuration.
Dodaj kod, aby użyć nowego ustawienia w celu rabatu cen produktów.
Skompiluj i przetestuj aplikację.

Dodaj ustawienie konfiguracji do sklepu App Configuration

Teraz w usłudze Azure App Configuration utwórz nową parę klucz-wartość, aby przechowywać procentowy rabat. Wykonaj następujące kroki:

Na innej karcie przeglądarki zaloguj się do portalu Azure przy użyciu takiego samego konta i katalogu jak interfejs wiersza polecenia platformy Azure.
Użyj pola wyszukiwania, aby znaleźć i otworzyć zasób usługi App Configuration poprzedzony prefiksem eshop-app-features.
W sekcji Operations wybierz Configuration explorer.
W górnym menu wybierz pozycję + Utwórz i wybierz pozycję Klucz-wartość.
W polu tekstowym klucz wprowadź eShopLite__Store__DiscountPercent.
W polu tekstowym Wartość wprowadź 0,8.
Wybierz pozycję Zastosuj.

Dodawanie kodu do używania nowego ustawienia konfiguracji

Aby można było użyć nowego ustawienia konfiguracji, należy zaktualizować stronę produktu. Wykonaj następujące kroki:

W programie Visual Studio Code otwórz plik Store/Components/Pages/Products.razor.
W sekcji @code dodaj następującą zmienną, aby przechowywać stan flagi funkcji:
```
private decimal discountPercentage;  
```

W metodzie OnInitializedAsync dodaj następujący kod, aby pobrać wartość ustawienia konfiguracji:

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

Metoda powinna teraz wyglądać podobnie do następującego kodu:

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

Powyższy kod używa obiektu Configuration w celu pobrania wartości ustawienia konfiguracji. Wartość jest przechowywana w zmiennej discountPercentage jako dziesiętna.

Wyświetlanie obniżonych cen

Strona produktu musi zostać zaktualizowana, aby wyświetlić obniżone ceny. Wykonaj następujące kroki:

Zastąp <td>@product.Price</td> następującym kodem:
```
<td>
  @if (saleOn) {
    <strike>@(product.Price)</strike><br>
    @((product.Price * discountPercentage).ToString("#.##"))
  } else {
    @product.Price
  }
</td>
```
Powyższy kod sprawdza, czy sprzedaż sezonowa jest włączona. Jeśli ta opcja jest włączona, oryginalna cena jest wyświetlana za pomocą przekreślenia, a cena obniżona jest wyświetlana poniżej. Jeśli sprzedaż sezonowa nie jest włączona, zostanie wyświetlona oryginalna cena.

Kompilowanie aplikacji

Upewnij się, że wszystkie zmiany zostały zapisane i znajdują się w katalogu dotnet-feature-flags . W terminalu uruchom następujące polecenie:
```
dotnet publish /p:PublishProfile=DefaultContainer 
```
Uruchom aplikację przy użyciu platformy Docker:
```
docker compose up
```

Testowanie funkcji rabatu cenowego

Aby sprawdzić, czy flaga funkcji działa zgodnie z oczekiwaniami w przestrzeni kodu, wykonaj następujące kroki:

Przejdź do karty PORTY, a następnie po prawej stronie adresu lokalnego dla portu Front End wybierz ikonę globusa. Przeglądarka otwiera nową kartę na stronie głównej.
Wybierz pozycję Produkty.

Jeśli używasz programu Visual Studio Code lokalnie, otwórz http://localhost:32000/products.

Aby przetestować flagę funkcji, która kontroluje sprzedaż sezonową, wykonaj następujące kroki:

W witrynie Azure Portal przejdź do zasobu usługi Azure App Configuration z prefiksem eshop-app-features.
W sekcji Operations wybierz pozycję Feature Manager.
Wybierz przełącznik SeasonalDiscount włączony, aby wyłączyć tę funkcję.
W przeglądarce wróć do aplikacji.
Wybierz stronę home, a następnie stronę Products.

Wyczyszczenie pamięci podręcznej może potrwać do 30 sekund. Jeśli baner sprzedaży jest nadal wyświetlany, zaczekaj kilka sekund i odśwież stronę ponownie.