演習 - Azure App Configuration インスタンスに構成設定を実装する

10 分

アプリケーションの新しい要件では、機能フラグで製品の割引を制御できるようにする必要があります。この演習では、その方法を説明します。

Azure App Configuration インスタンスに構成設定を追加します。
新しい設定を使用して製品価格を割引するコードを追加します。
アプリをビルドしてテストします。

App Configuration ストアに構成設定を追加する

Azure App Configuration で、販売割引率を保存するための新しいキーと値のペアを作成します。次の手順を実行します。

別のブラウザータブで、Azure CLI と同じアカウントとディレクトリを使用して Azure portal にサインインします。
検索ボックスを使用し、前に eshop-app-features が付いている App Configuration リソースを見つけて開きます。
[操作] セクションで [構成エクスプローラー] を選びます。
上部のメニューで、[+ 作成]、[キー値] の順に選びます。
[キー] テキストボックスに「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);
    }
}

上記のコードでは、Configuration オブジェクトを使用して構成設定の値を取得します。この値は、10 進数として 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 portal で、eshop-app-features というプレフィックスが付いた Azure App Configuration リソースに移動します。
[操作] セクションで、 [機能マネージャー] を選びます。
[SeasonalDiscount] が有効になっているトグルを選択して、この機能をオフに切り替えます。
お使いのブラウザーでアプリケーションに戻ります。
[ホーム] ページ、[製品] ページの順に選択します。

キャッシュがクリアされるまでに最大 30 秒かかることがあります。販売バナーがまだ表示されている場合は、数秒待ってからページを再び更新します。