Übung – Implementieren von Konfigurationseinstellungen in azure App-Konfigurationsinstanz

Abgeschlossen

Eine neue Anforderung an die Anwendung besagt jetzt, dass eine Featurekennzeichnung einen Rabatt für ein Produkt steuern kann. In dieser Übung wird gezeigt, wie Das geht.

• Fügen Sie der Azure App-Konfigurationsinstanz eine Konfigurationseinstellung hinzu.
• Fügen Sie Code hinzu, um die neue Einstellung zum Preisnachlass von Produkten zu verwenden.
• Erstellen und testen Sie die App.

Hinzufügen der Konfigurationseinstellung zum App-Konfigurationsspeicher

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

1. Melden Sie sich auf einer anderen Browser-Registerkarte beim Azure-Portal mit demselben Konto und Verzeichnis an wie bei der Azure CLI.
2. Verwenden Sie das Suchfeld, um die mit eshop-app-features gekennzeichnete App-Konfigurationsressource zu finden und zu öffnen.
3. Wählen Sie im Abschnitt "Vorgänge " den Konfigurations-Explorer aus.
4. Wählen Sie im oberen Menü +Erstellen und dann den Schlüsselwert aus.
5. Geben Sie im Textfeld „Key“eShopLite__Store__DiscountPercent ein.
6. Geben Sie im Textfeld "Wert " 0,8 ein.
7. Wählen Sie Anwenden.

Hinzufügen von Code zur Verwendung der neuen Konfigurationseinstellung

Die Produktseite muss aktualisiert werden, um die neue Konfigurationseinstellung zu verwenden. Führen Sie die folgenden Schritte aus:

1. Öffnen Sie die Datei Store/Components/Pages/Products.razor in Visual Studio Code.

2. Fügen Sie im @code Abschnitt die folgende Variable hinzu, um den Status des Feature-Flags zu speichern:

   private decimal discountPercentage;  
   

3. Fügen Sie in der OnInitializedAsync Methode 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 wie der folgende Code aussehen:

   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 discountPercentage Variablen als Dezimalzahl gespeichert.

Anzeigen der ermäßigten Preise

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

1. Ersetzen Sie <td>@product.Price</td> durch diesen Code:

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

   Der obige Code überprüft, ob der saisonale Verkauf aktiviert ist. Wenn aktiviert, ist der ursprüngliche Preis durchgestrichen, und der ermäßigte Preis wird darunter angezeigt. Wenn der saisonale Verkauf nicht aktiviert ist, wird der ursprüngliche Preis angezeigt.

Erstellen der App

1. Stellen Sie sicher, dass Sie alle Ihre Änderungen gespeichert haben und sich im Verzeichnis "dotnet-feature-flags" befinden. Führen Sie im Terminal den folgenden Befehl aus:

   dotnet publish /p:PublishProfile=DefaultContainer 
   

2. Führen Sie die App mit Docker aus:

   docker compose up
   

Testen der Preisnachlassfunktion

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

1. 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 auf der Homepage.
2. 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:

1. Navigieren Sie im Azure-Portal zu der Azure-App-Konfigurationsressource mit eshop-app-featuresdem Präfix .

2. Wählen Sie im Abschnitt "Vorgänge" den Feature-Manager aus.

3. Wählen Sie den aktivierten Schalter "SeasonalDiscount " aus, um dieses Feature zu deaktivieren.

   

4. Kehren Sie in Ihrem Browser zur Anwendung zurück.

5. Wählen Sie die Startseite und dann die Seite "Produkte " aus.

   

Es kann bis zu 30 Sekunden dauern, bis der Cache gelöscht wird. Wenn das Verkaufsbanner weiterhin angezeigt wird, warten Sie einige Sekunden, und aktualisieren Sie die Seite erneut.