Alıştırma - Azure Uygulama Yapılandırması örneğinde yapılandırma ayarlarını uygulama

Tamamlandı

Uygulamaya yönelik yeni bir gereksinim artık bir ürün için indirimi denetlemek için özellik bayrağına izin vermenizi söylüyor. Bu alıştırmada bunu nasıl yapabileceğiniz gösterilir.

  • Azure Uygulama Yapılandırması örneğine bir yapılandırma ayarı ekleyin.
  • Ürün fiyatlarında indirim yapmak için yeni ayarı kullanmak için kod ekleyin.
  • Uygulamayı derleyin ve test edin.

Yapılandırma ayarını Uygulama Yapılandırma deposuna ekleme

Azure Uygulama Yapılandırması'nda şimdi satış indirimi yüzdesini depolamak için yeni bir anahtar-değer çifti oluşturun. Aşağıdaki adımları tamamlayın:

  1. Başka bir tarayıcı sekmesinde, Azure CLI ile aynı hesap ve dizinle Azure portalında oturum açın.
  2. eshop-app-featuresön ekli Uygulama Yapılandırması kaynağını bulmak ve açmak için arama kutusunu kullanın.
  3. İşlemler bölümünde Yapılandırma gezgini'ni seçin.
  4. Üstteki menüde + Oluştur ve Anahtar-değer seçeneklerini seçin.
  5. Anahtar metin kutusuna eShopLite__Store__DiscountPercent girin.
  6. Değer metin kutusuna 0,8 girin.
  7. Uygula'yı seçin.

Yeni yapılandırma ayarını kullanmak için kod ekleme

Yeni yapılandırma ayarını kullanmak için ürün sayfasının güncelleştirilmesi gerekir. Aşağıdaki adımları tamamlayın:

  1. Visual Studio Code'da Store/Components/Pages/Products.razor dosyasını açın.

  2. @code bölümünde, özellik bayrağının durumunu depolamak için aşağıdaki değişkeni ekleyin:

    private decimal discountPercentage;  
    
  3. OnInitializedAsync yönteminde, yapılandırma ayarının değerini almak için aşağıdaki kodu ekleyin:

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

    yöntemi artık aşağıdaki kod gibi görünmelidir:

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

    Yukarıdaki kod yapılandırma ayarının değerini almak için Configuration nesnesini kullanır. Değer, discountPercentage değişkeninde ondalık olarak depolanır.

İndirimli fiyatları görüntüleme

İndirimli fiyatları görüntülemek için ürün sayfasının güncelleştirilmesi gerekir. Aşağıdaki adımları tamamlayın:

  1. <td>@product.Price</td> şu kodla değiştirin:

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

    Yukarıdaki kod, mevsimsel satışın etkinleştirilip etkinleştirilmediğini denetler. Aktifleştirilirse, fiyatın özgün hâli çizgi çekilmiş olarak gösterilir ve indirimli fiyat bunun altında yer alır. Mevsimsel satış etkinleştirilmemişse özgün fiyat görüntülenir.

Uygulamayı oluşturma

  1. Tüm değişikliklerinizi kaydettiğinizden ve dotnet-feature-flags dizininde olduğunuzdan emin olun. Terminalde aşağıdaki komutu çalıştırın:

    dotnet publish /p:PublishProfile=DefaultContainer 
    
  2. Docker kullanarak uygulamayı çalıştırın:

    docker compose up
    

Fiyat indirimi özelliğini test edin

Özellik bayrağının bir kod alanında beklendiği gibi çalıştığını doğrulamak için aşağıdaki adımları tamamlayın:

  1. BAĞLANTI NOKTALARI sekmesine geçin, ardından Ön Uç bağlantı noktasının yerel adresinin sağındaki dünya simgesini seçin. Tarayıcı giriş sayfasında yeni bir sekme açar.
  2. Ürünleriseçin.

Visual Studio Code'ı yerel olarak kullanıyorsanız http://localhost:32000/productsaçın.

İndirimli fiyatları gösteren uygulamanın ekran görüntüsü.

Özellik bayrağının mevsimsel satışı denetleyişini test etmek için aşağıdaki adımları tamamlayın:

  1. Azure portalında, eshop-app-featuresön ekli Azure Uygulama Yapılandırması kaynağına gidin.

  2. İşlemler bölümünde Özellik yöneticisi'ni seçin.

  3. Bu özelliği kapatmak için SeasonalDiscount etkinleştirilmiş anahtarını seçin.

    Uygulama Yapılandırması için Azure portalı sayfasını gösteren ekran görüntüsü. SeasonalDiscount devre dışı bırakıldı.

  4. Tarayıcınızda uygulamaya dönün.

  5. Giriş sayfasını ve ardından Ürünler sayfasını seçin.

    Satış başlığı olmayan eShopLite uygulamasını gösteren ekran görüntüsü.

Önbelleğin temizlenmesi 30 saniye kadar sürebilir. Satış başlığı hala gösteriliyorsa, birkaç saniye bekleyin ve sayfayı yeniden yenileyin.