Übung – Implementieren von Konfigurationseinstellungen in einer Azure App Configuration-Instanz

10 Minuten

Eine neue Anforderung an die Anwendung besagt jetzt, dass ein Featureflag zur Steuerung eines Rabatts für ein Produkt zulässig ist. Diese Übung zeigt Ihnen, wie es geht.

Fügen Sie der Azure App Configuration-Instanz eine Konfigurationseinstellung hinzu.
Fügen Sie Code hinzu, um die neue Einstellung für ermäßigte Produktpreise zu verwenden.
Erstellen und testen Sie die App.

Hinzufügen der Konfigurationseinstellung zum App Configuration-Speicher

Erstellen Sie nun in Azure App Configuration ein neues Schlüssel-Wert-Paar, um den Rabattprozentsatz zu speichern. Führen Sie die folgenden Schritte aus:

Melden Sie sich auf einer anderen Browser-Registerkarte beim Azure-Portal mit demselben Konto und Verzeichnis an wie bei der Azure CLI.
Suchen und öffnen Sie über das Suchfeld die App Configuration-Ressource mit dem Präfix eshop-app-features.
Wählen Sie im Abschnitt Vorgänge die Option Konfigurations-Explorer aus.
Wählen Sie im obersten Menü + Erstellen und dann den Schlüsselwert aus.
Geben Sie im Textfeld Schlüssel den Schlüssel eShopLite__Store__DiscountPercent ein.
Geben Sie im Textfeld Wert den Wert 0,8 ein.
Wählen Sie Übernehmen.

Hinzufügen von Code zur Verwendung der neuen Konfigurationseinstellung

Die Produktseite muss aktualisiert werden, damit die neue Konfigurationseinstellung verwendet wird. Führen Sie die folgenden Schritte aus:

Öffnen Sie die Datei Store/Components/Pages/Products.razor in Visual Studio Code.
Fügen Sie im Abschnitt @code die folgende Variable hinzu, um den Status des Featureflags zu speichern:
```
private decimal discountPercentage;  
```

Fügen Sie in der Methode OnInitializedAsync den folgenden Code hinzu, um den Wert der Konfigurationseinstellung abzurufen:

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

Die Methode sollte nun folgendem Code ähneln:

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

Der obige Code verwendet das Configuration-Objekt, um den Wert der Konfigurationseinstellung abzurufen. Der Wert wird in der Variablen discountPercentage als Dezimalzahl gespeichert.

Anzeigen der ermäßigten Preise

Die Produktseite muss aktualisiert werden, damit die ermäßigten Preise angezeigt werden. Führen Sie die folgenden Schritte aus:

Ersetzen Sie <td>@product.Price</td> durch den folgenden Code:
```
<td>
  @if (saleOn) {
    <strike>@(product.Price)</strike><br>
    @((product.Price * discountPercentage).ToString("#.##"))
  } else {
    @product.Price
  }
</td>
```
Der obige Code überprüft, ob die saisonale Verkaufsaktion aktiviert ist. Wenn aktiviert, ist der ursprüngliche Preis durchgestrichen, und der ermäßigte Preis wird darunter angezeigt. Wenn die saisonale Verkaufsaktion nicht aktiviert ist, wird der ursprüngliche Preis angezeigt.

Erstellen der App

Stellen Sie sicher, dass Sie alle Ihre Änderungen gespeichert haben und sich im Verzeichnis dotnet-feature-flags befinden. Führen Sie folgenden Befehl im Terminal aus:
```
dotnet publish /p:PublishProfile=DefaultContainer 
```
Führen Sie die App mit Docker aus:
```
docker compose up
```

Testen der Rabattpreisfunktion

Führen Sie die folgenden Schritte aus, um zu überprüfen, ob das Featureflag in einem Codespace wie erwartet funktioniert:

Wechseln Sie zur Registerkarte PORTS, und wählen Sie dann rechts neben der lokalen Adresse für den Front-End-Port das Globussymbol aus. Der Browser öffnet eine neue Registerkarte mit der Homepage.
Wählen Sie Produkte aus.

Wenn Sie Visual Studio Code lokal verwenden, öffnen Sie http://localhost:32000/products.

Führen Sie die folgenden Schritte aus, um zu testen, ob das Featureflag die saisonale Verkaufsaktion steuert:

Navigieren Sie im Azure-Portal zu der Azure App Configuration-Ressource mit dem Präfix eshop-app-features.
Wählen Sie im Abschnitt Vorgänge die Option Feature-Manager aus.
Wählen Sie die aktiviere Umschaltfläche SeasonalDiscount aus, um dieses Feature zu deaktivieren.
Kehren Sie in Ihrem Browser zur Anwendung zurück.
Wählen Sie dieHomepageund dann die Seite Produkte aus.