練習 - 在 Azure 應用程式組態執行個體中實作組態設定

10 分鐘

現在對應用程式的新需求是允許功能旗標控制產品的折扣。本練習示範如何執行這項操作。

將組態設定新增至 Azure 應用程式組態執行個體。
新增程式碼以使用新的設定來折扣產品價格。
建置並測試應用程式。

將組態設定新增至應用程式組態存放區

在 Azure 應用程式組態中，現在建立新的索引鍵/值組來儲存銷售折扣百分比。完成下列步驟：

在另一個瀏覽器索引標籤中，使用與 Azure CLI 相同的帳戶和目錄登入 Azure 入口網站。
使用搜尋方塊來尋找並開啟具有 eshop-app-features 前置詞的應用程式組態資源。
在 [作業] 區段中，選取 [組態總管]。
在頂端功能表中，選取 [+ 建立]，然後選取 [機碼值]。
在 [索引鍵] 文字方塊中，輸入 eShopLite__Store__DiscountPercent。
在[值] 文字方塊中，輸入 0.8。
選取套用。

新增程式碼以使用新的組態設定

必須更新產品頁面，才能使用新的組態設定。完成下列步驟：

在 Visual Studio Code 中，開啟 Store/Components/Pages/Products.razor 檔案。
在 @code 區段中，新增下列變數以儲存功能旗標的狀態：
```
private decimal discountPercentage;  
```

在 OnInitializedAsync 方法中，新增下列程式碼以擷取組態設定的值：

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

該方法現在看起來應該像下列程式碼：

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

上述程式碼會使用組態物件來擷取組態設定的值。此值會以十進位形式儲存在 discountPercentage 變數中。

顯示折扣價格

必須更新產品頁面，才能顯示折扣價格。完成下列步驟：

使用此程式碼取代 <td>@product.Price</td>:
```
<td>
  @if (saleOn) {
    <strike>@(product.Price)</strike><br>
    @((product.Price * discountPercentage).ToString("#.##"))
  } else {
    @product.Price
  }
</td>
```
上述程式碼會檢查季節性銷售是否已啟用。若已啟用，原價顯示時帶有刪除線，而折扣價格會顯示在其下方。如果未啟用季節性銷售，則會顯示原始價格。

建置應用程式

請確保您已儲存所有變更，且位於 dotnet-feature-flags 目錄中。在終端機中執行下列命令：
```
dotnet publish /p:PublishProfile=DefaultContainer 
```
使用 docker 執行應用程式:
```
docker compose up
```

測試價格折扣功能

若要確認功能旗標在 codespace 中如預期般運作，請完成下列步驟：

請切換至 [連接埠] 索引標籤，然後在 [前端] 連接埠的本機位址右側，選取地球圖示。瀏覽器會在首頁開啟新的索引標籤。
選取產品。

如果您在本機使用 Visual Studio Code，請開啟 http://localhost:32000/products。

若要測試功能旗標會控制季節性銷售，請完成下列步驟：

在 Azure 入口網站中，瀏覽至前面加上 eshop-app-features 的 Azure 應用程式組態資源。
在 [作業] 區段中，選取 [功能管理員]。
選取啟用的 SeasonalDiscount 切換開關，以關閉此功能。
在瀏覽器中，返回應用程式。
選取 [首頁]，然後選取 [產品] 頁面。

快取最多可能需要 30 秒的時間才能清除。如果仍然顯示銷售橫幅，請稍候幾秒鐘，再次重新整理頁面。