Ćwiczenie — implementowanie ustawień konfiguracji w wystąpieniu usługi aplikacja systemu Azure Configuration

10 min

Nowe wymaganie dla aplikacji mówi teraz, aby umożliwić flagę funkcji kontrolowanie rabatu dla produktu. W tym ćwiczeniu pokazano, jak to zrobić.

Dodaj ustawienie konfiguracji do wystąpienia konfiguracji aplikacja systemu Azure Configuration.
Dodaj kod, aby użyć nowego ustawienia w celu rabatu cen produktów.
Skompiluj i przetestuj aplikację.

Dodawanie ustawienia konfiguracji do magazynu App Configuration

W aplikacja systemu Azure Configuration utwórz teraz nową parę klucz-wartość do przechowywania procentu rabatu sprzedaży. Zakończ poniższe kroki:

Na innej karcie przeglądarki zaloguj się do witryny Azure Portal przy użyciu tego samego konta i katalogu co 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 Operacje wybierz pozycję Eksplorator konfiguracji.
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ź wartość 0.8.
Wybierz Zastosuj.

Dodawanie kodu do używania nowego ustawienia konfiguracji

Aby można było użyć nowego ustawienia konfiguracji, należy zaktualizować stronę produktu. Zakończ poniższe kroki:

W programie Visual Studio Code otwórz Store/Components/Pages/Products.razor plik.
@code W sekcji 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 liczba dziesiętna.

Wyświetlanie obniżonych cen

Strona produktu musi zostać zaktualizowana, aby wyświetlić obniżone ceny. Zakończ poniższe kroki:

Zastąp <td>@product.Price</td> ciąg 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.

Tworzenie 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 frontonu wybierz ikonę globusa. Przeglądarka otwiera nową kartę na stronie głównej.
Wybierz produkty.

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

Aby przetestować flagę funkcji kontrolując sprzedaż sezonową, wykonaj następujące kroki:

W witrynie Azure Portal przejdź do zasobu aplikacja systemu Azure Configuration z prefiksem eshop-app-features.
W sekcji Operacje wybierz pozycję Menedżer funkcji.
Wybierz przełącznik SeasonalDiscount, aby wyłączyć tę funkcję.
W przeglądarce wróć do aplikacji.
Wybierz stronę główną, a następnie stronę Produkty.