Latihan - Menerapkan pengaturan konfigurasi di instans Azure App Configuration

Selesai

Persyaratan baru untuk aplikasi sekarang mensyaratkan penggunaan flag fitur untuk mengontrol diskon produk. Latihan ini menunjukkan kepada Anda cara melakukannya.

• Tambahkan pengaturan konfigurasi ke instans Azure App Configuration.
• Tambahkan kode untuk menggunakan pengaturan baru untuk diskon harga produk.
• Buat dan uji aplikasi.

Tambahkan setelan konfigurasi ke penyimpanan App Configuration

Di Azure App Configuration, sekarang buat pasangan kunci-nilai baru untuk menyimpan persentase diskon penjualan. Selesaikan langkah-langkah berikut:

1. Di tab browser lain, masuk ke portal Microsoft Azure dengan akun dan direktori yang sama dengan Azure CLI.
2. Gunakan kotak pencarian untuk menemukan dan membuka sumber daya App Configuration yang diawali dengan eshop-app-features.
3. Di bagian Operasi, pilih Penjelajah konfigurasi.
4. Di menu atas, pilih + Buat dan pilih Nilai kunci.
5. Masukkan eShopLite__Store__DiscountPercentke dalam kotak teks Kunci .
6. Dalam kotak teks Nilai , masukkan 0,8.
7. Pilih Terapkan.

Menambahkan kode untuk menggunakan pengaturan konfigurasi baru

Halaman produk perlu diperbarui untuk menggunakan pengaturan konfigurasi baru. Selesaikan langkah-langkah berikut:

1. Di Visual Studio Code, buka file Store/Components/Pages/Products.razor.

2. Di bagian @code, tambahkan variabel berikut untuk menyimpan status bendera fitur:

   private decimal discountPercentage;  
   

3. Dalam metode OnInitializedAsync, tambahkan kode berikut untuk mengambil nilai pengaturan konfigurasi:

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

   Metode ini sekarang akan terlihat seperti kode berikut:

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

   Kode di atas menggunakan objek Konfigurasi untuk mengambil nilai pengaturan konfigurasi. Nilai disimpan dalam variabel discountPercentage sebagai desimal.

Menampilkan harga diskon

Halaman produk perlu diperbarui untuk menampilkan harga diskon. Selesaikan langkah-langkah berikut:

1. Ganti <td>@product.Price</td> dengan kode ini:

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

   Kode di atas memeriksa apakah penjualan musiman diaktifkan. Jika diaktifkan, harga awal ditampilkan dengan coretan dan harga diskon ditampilkan di bawahnya. Jika penjualan musiman tidak diaktifkan, harga asli ditampilkan.

Membangun aplikasi

1. Pastikan Anda telah menyimpan semua perubahan, dan berada di direktori dotnet-feature-flags. Di terminal, jalankan perintah berikut:

   dotnet publish /p:PublishProfile=DefaultContainer 
   

2. Jalankan aplikasi menggunakan docker:

   docker compose up
   

Menguji fitur diskon harga

Untuk memverifikasi bendera fitur berfungsi seperti yang diharapkan di codespace, selesaikan langkah-langkah berikut:

1. Beralih ke tab PORT, lalu di sebelah kanan alamat lokal untuk port Front End , pilih ikon bola dunia. Browser membuka tab baru di beranda.
2. Pilih Produk.

Jika Anda menggunakan Visual Studio Code secara lokal, buka http://localhost:32000/products.

Untuk menguji bendera fitur yang mengontrol penjualan musiman, selesaikan langkah-langkah berikut:

1. Di portal Microsoft Azure, navigasikan ke sumber daya Azure App Configuration yang diawali dengan eshop-app-features.

2. Di bagian Operasi, pilih Pengelola fitur.

3. Pilih saklar SeasonalDiscount untuk menonaktifkan fitur ini.

   

4. Di browser Anda, kembali ke aplikasi.

5. Pilih halaman Beranda , lalu halaman Produk .

   

Dibutuhkan waktu hingga 30 detik agar cache dibersihkan. Jika banner penjualan masih ditampilkan, tunggu beberapa detik dan refresh halaman lagi.