Application development with c#, .net 6, blazor web assembly, asp.net web api, azure, part 2

468 Views

March 26, 22

c6 asp.net web api .net core .net6 spa entity fra

スライド概要

https://dotnetlab.connpass.com/event/236752/
「C#, .NET 6, Blazor WebAssembly, ASP.NET Web API, Azure によるアプリ開発・その2」
Elastic　テクニカルプロダクトマーケティングマネージャーエバンジェリスト
デジタル庁ソリューションアーキテクト
鈴木章太郎

前々回までご紹介した内容、2月にご紹介した内容も復習しつつ、C#, .NET 6, Blazor WebAssembly, ASP.NET Web API, Static Web Apps, Azure Web Apps 等、最新の .NET 6 スタックを使った本格的なアプリ開発を何回かに分けてご紹介したいと思います。今回はその2回目です。

Shotaro Suzuki

@shosuz

スライド一覧

ヴイエムウェア株式会社ソリューションアーキテクト本部プリンシパルエンタープライズアーキテクト。 Microsoft で13年間、テクニカルエバンジェリストとして .NET、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け最新技術啓発活動を実施。その後、Dell、Accenture、Elastic で開発者向け技術啓発活動等を経て現職。モダンアプリケーション開発、マルチクラウド対応、アーキテクチャ策定等を中心に、技術者向けに最新技術の啓発活動を実施中。 2019年4月〜2021年8月迄、内閣官房 IT 総合戦略室政府 CIO 補佐官を兼務、2021年9月〜2024年3月迄、デジタル庁 PjM ユニットソリューションアーキテクトを兼務。

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 4.28MB)

関連スライド

各ページのテキスト

C#, .NET 6, Blazor WebAssembly, ASP.NET Web API, Azure によるアプリ開発 – その2 鈴⽊章太郎 Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリストデジタル庁省庁業務グループソリューションアーキテクト

Shotaro Suzuki Twitter : @shosuz Elastic Technical Product Marketing Manager/Evangelist デジタル庁省庁業務グループソリューションアーキテクト元 Microsoft Technical Evangelist

l アジェンダ l l l l l 前回までの復習 l Blazor 概要 l 今回作成する Web アプリケーションの概要 l Blazor WebAssembly プロジェクト作成 l Web API コントローラー追加、モデル追加 Entity Framework による Code First データベース作成商品サービス、商品リスト、カテゴリーサービス等必要なサービス、 CRUD 処理等の実装検索サービスの追加と検索コンポーネントの実装カートサービス、認証・ユーザー登録その他の機能の実装と UI/UX の変更

リソースと今後の展望 l l l l l l セッションでご紹介した EC アプリ .NET 5版ですが、参考にさせて戴きました。 https://github.com/patrickgod/BlazorEcommercePreviewYT 3⽉は、EF 連携-DB ⽣成、各サービス実装、検索機能 (Elastic による強化)等将来的に microservices 化などできるといいなと思っています（4⽉︖W）今回、共演した宝達さんがデモされた OpenShift へのデプロイ、さらに進めて、ARO (Azure Red Hat OpenShift）にデプロイも⾯⽩いかなと思っています。次回もよろしくお願いします︕ 検索機能の実装の前までご説明し、カートサービス、認証、ユーザー登録、等はもし可能であれば、次回に回させて戴きたく… UI/UX はどこの箇所にも含まれていますが、ページネーション等は別途取り上げて次回⼊れます。

https://github.com/patrickgod/BlazorEcommercePreviewYT

Blazor 概要

Modern Web UI with .NET & Blazor HTML、CSS、.NET、C#... JavaScript の代わりに Open Web 標準でアプリ開発 Server WebAssembly どこにでもホストできる Hybrid

Part of the ASP.NET Core family Web UI Services MVC Razor Pages HTTP APIs SignalR SPA Blazor Worker gRPC

Blazor – .NET 5 まで Blazor Server Blazor WebAssembly Blazor DOM SignalR .NET Razor Components Blazor DOM .NET Razor Components WebAssembly ü DB アクセス含むサーバー機能へのフルアクセス ü ⾼速なスタートアップ ü コードがサーバーから離れない ü 古いブラウザとシンクライアントをサポート ü完全にクライアント側で実⾏ ü必要なサーバーコンポーネントなし ü静的サイトとしてホスト üオフラインで実⾏可能 ü 永続的な接続が必要 ü⼤きなダウンロードサイズ ü UI の遅延が⾼い üランタイムパフォーマンスの低下 Blazor Server (.NET 5) Blazor WebAssembly (.NET 5)

Blazor – .NET 6 による強化 Blazor Server Blazor WebAssembly Blazor DOM SignalR .NET Razor Components Blazor DOM .NET Razor Components WebAssembly .NET 6 Blazor WebAssembly の事前 (AOT) コンパイル対応 Blazor WebAssembly アプリのダウンロードサイズの縮⼩ Error Boundaries Razor コンポーネント型の推論とジェネリック型の制約動的コンポーネントプリレンダリング中の Blazor コンポーネント状態の永続性 Hot Reload, Native File Reference, 他多数

10.

Blazor Server と Blazor WebAssembly の開発モデルの違い Blazor WebAssembly Blazor Server Blazor Blazor DOM SignalR .NET Razor Components DOM .NET Razor Components WebAssembly Blazor Server • 開発モデルは C/S 型に近い • DOM（ブラウザ UI）と Blazor ランタイム（仮想 DOM）がやりとりし UI 描画（差分更新） • 画⾯の⼊出⼒部分のみをリモートデスクトップのようにブラウザ側に持ってきているとみなせる • SignalR（Web ソケット通信） • DB に直接アクセス可能 • Web アプリケーションを Client - Server 型に近いモデルで開発可能 • Web サーバとの常時接続が必要 • サーバ側でリソース効率の⾼いアプリの作り⽅が必要 • Hot Reload Blazor WebAssembly • サンドボックス制限 • DB アクセス不可 → Native File Reference によるローカル DBアクセス • Web API を介して DB アクセス • 静的な Web サーバにホスト • アプリ全体がダウンロード（⼤きくなりがち） • DOM（ブラウザ UI）と Blazor ランタイム（仮想 DOM）がやりとりしUI 描画（差分更新）、ランタイムが Blazor アプリ（UI ロジック）とやりとりする • Hot Reload (デバッグなしで実⾏）

11.

Web Assembly（WASM）とは • Web ブラウザ上でバイナリコードを直接実⾏できる • 2019 年 12 ⽉ W3C 勧告、正式なウェブ標準に認定 • 様々な⾔語のバイナリコードを主要なブラウザのサンドボックス内で動作可能 • Web Assembly バイナリコードへのコンパイラなどのツールセットが必要 C++ WASM コンパイラ Edge C++ ソースコード Rust ソースコード Chrome Rust WASM コンパイラ C WASM コンパイラ SQLite ソースコード（C） Safari Web Assembly バイナリコード（W3C 標準技術） Firefox

12.

.NET 6 における Blazor WebAssembly 新機能 • 事前 (AOT) 実⾏コンパイル • カスタム要素 • ⼩規模なアプリサイズ • Native File Reference • Hot Reload • Component, .NET, HTML, CSS… …その他数⼗個の更新あり

13.

Blazor WebAssembly ⼩規模なアプリサイズ .NET 5 .NET 6 • Publish size: 1.7 MB • Publish size: 1.0 MB • ~40% size reduction

14.

Blazor WebAssembly のホスティング Blazor Blazor WebAssem WebAssembly bly APIs APIs ASP.NET App Services Blazor Blazor WebAssem WebAssembly bly Globally Globally distributed distributed hosting hosting APIs Serverless Microservices functions Azure Static Web Apps

15.

Get started with Blazor • Go to https://blazor.net • Install the .NET SDK Visual Studio Visual Studio for Mac Visual Studio Code + C# extension • .NET Conf 2021 https://www.dotnetconf.net/ • .NET Conf 2021 – videos/slides/demos https://github.com/dotnet-presentations/dotNETConf/tree/master/2021/MainEvent/Technical

16.

今回作成する Web アプリケーションの概要

17.

ASP.NET Core Blazor プロジェクトの構造 https://docs.microsoft.com/ja-jp/aspnet/core/blazor/project-structure?view=aspnetcore-6.0 Blazor WebAssembly アプリの初期ファイルとディレクトリ構造 [Client] • • • • • • • • • Connected Service Dependencies Pages Properties Shared wwwrooot _imports.razor App.razor Program.cs [Server] • Connected Service • Dependencies • Controllers • Pages • Properties • appsettings.json • Program.cs [Shared] • Connected Service • Dependencies • WeatherForecast.cs

https://docs.microsoft.com/ja-jp/aspnet/core/blazor/project-structure?view=aspnetcore-6.0

18.

ASP.NET Core Blazor のホスティングモデル https://docs.microsoft.com/ja-jp/aspnet/core/blazor/hosting-models?view=aspnetcore-6.0 • Blazor WebAssembly hosting model を使⽤すると、次のようになります。 • Blazor アプリ、その依存関係、.NET ランタイムが並⾏してブラウザーにダウンロードされます。 • アプリがブラウザー UI スレッド上で直接実⾏されます。 • 次の展開戦略がサポートされています。 • ASP.NET Core でのホストされた展開 • Blazor アプリは、ASP.NET Core アプリによって提供されます。 • "ホストされたデプロイ" により、 WebAssembly アプリが、Web サーバー上で実⾏されている ASP.NET Core アプリからブラウザーに提供されます。 • クライアント Blazor WebAssembly アプリは、サーバーアプリの他の静的な Web アセットと共に、サーバーアプリの /bin/Release/{TARGET FRAMEWORK}/publish/wwwroot フォルダーに発⾏されます。 • 2 つのアプリが⼀緒に展開されます。 ASP.NET Core アプリをホストできる Web サーバーが必要です。ホストされている展開の場合、Visual Studio には WebAssembly アプリプロジェクトテンプレートが含まれており (dotnet new コマンドを使⽤する場合は blazorwasm テンプレート)、 Hosted オプションが選択されています (dotnet new コマンドを使⽤する場合は -ho|--hosted)。 • スタンドアロン展開 • Blazor アプリは、Blazor アプリの提供に .NET が使⽤されていない静的ホスティング Web サーバーまたはサービス上に配置されます。 • "スタンドアロンデプロイ" により、 WebAssembly アプリが、クライアントによって直接要求される静的ファイルのセットとして提供されます。任意の静的ファイルサーバーで Blazor アプリを提供できます。 • スタンドアロンのデプロイアセットは、/bin/Release/{TARGET FRAMEWORK}/publish/wwwroot フォルダーに発⾏されます。 • Azure App Service • Blazor WebAssembly アプリは、Blazor 上でアプリをホストするために使⽤される Windows 上の Azure App Service にデプロイできます。 • スタンドアロンの Blazor WebAssembly アプリを Azure App Service for Linux にデプロイすることは、現在サポートされていません。現時点では、アプリをホストする Linux サーバーイメージは使⽤できません。このシナリオを可能にするための取り組みが進⾏中です。 • Azure Static Web Apps • 詳細については、「Tutorial: Building a static web app with Blazor in Azure Static Web Apps」を参照してください。 • IIS

19.

EC デモアプリの画⾯遷移例カートユーザー登録トップ Movies Books Video Games 選択検索決済・ログイン

20.

EC Demo アプリの構成 1 Azure App Service Blazor WebAssembly CRUD 全⽂検索クエリ Blazor Server Azure SQL Database Elastic APM Endpoint に送信検索・更新 UI APM .NET Agent Elastic Cloud Visual Studio 2022 for Mac https://f79...c67.japaneast .azure.elasticcloud.com:9243/ Azure Data Studio 東⽇本リージョンマスターノード x 1 データノード x 2 ML ノード x 1 Azure サブスクリプション

21.

EC Demo アプリの構成 2 Blazor WebAssembly CRUD 全⽂検索クエリ Azure Static Web Apps Azure App Service Blazor WebAssembly ASP.NET 6 Web API 検索・更新 UI Elastic APM Endpoint に送信 APM .NET Agent Elastic Cloud Visual Studio 2022 for Mac https://f79...c67.japaneast .azure.elasticcloud.com:9243/ Azure Data Studio Azure SQL Database 東⽇本リージョンマスターノード x 1 データノード x 2 ML ノード x 1 Azure サブスクリプション

22.

ASP.NET Core Blazor のホスティングモデルホスティングモデルの選択 Blazor サーバー Blazor WebAssembly 完全な .NET Core API の互換性 ✔ ❌ サーバーソースへの直接アクセス ✔ ❌ ⼩さいペイロードサイズと⾼速な初期読み込み時間 ✔ ❌ サーバー上でのアプリコードのセキュリティ保護と⾮公開 ✔ ❌† ダウンロードしたアプリをオフラインで実⾏ ❌ ✔ 静的サイトのホスティング ❌ ✔ クライアントへの処理のオフロード ❌ ✔ https://docs.microsoft.com/ja-jp/aspnet/core/blazor/hosting-models?view=aspnetcore-6.0#blazor-webassembly

https://docs.microsoft.com/ja-jp/aspnet/core/blazor/hosting-models?view=aspnetcore-6.0

23.

Blazor WebAssembly プロジェクト作成

24.

Blazor WebAssembly プロジェクト⽣成チェックを⼊れる︕

25.

Product Model の追加

26.

Product Model の追加 using using using using using System; System.Collections.Generic; System.Linq; System.Text; System.Threading.Tasks; namespace BlazorEcommerce.Shared { public class Product { public int Id { get; set; } public string Title { get; set; }; public string Description { get; set; }; public string ImageUrl { get; set; }; public decimal Price { get; set; } } } --@using BlazorEcommerce.Shared ---

27.

ProductList.Razor の追加

28.

[beta]

ProductList.Razor の追加 1
<h3>ProductList</h3>
--@code {
public static List<Product> Products = new List<Product>
{
new Product {
Id = "1",
Title = "The Hitchhiker's Guide to the Galaxy",
ImageUrl = "https://upload.wikimedia.org/wikipedia/en/b/bd/H2G2_UK_front_cover.jpg",
Description = "銀河ヒッチハイク・ガイド[注 1]（HG2G、[1] HHGTTG、[2] H2G2、[3] tHGttGと表記することもある）は、ダグラス・アダムスが⽣み出したコメディ
SFフランチャイズである。1978年にBBC Radio 4で放送されたラジオコメディが原作で、その後、舞台、⼩説、コミック、1981年のテレビシリーズ、1984年のテキストベー
スのコンピュータゲーム、2005年の⻑編映画など、様々な形式で翻案されている。",
Price. = 9.99m
}
new Product {
Id = "2",
Title = "Ready Player One",
ImageUrl = "https://upload.wikimedia.org/wikipedia/en/a/a4/Ready_Player_One_cover.jpg",
Description = “「レディ・プレイヤー・ワン」は2011年に発表されたSF⼩説で、アメリカ⼈作家アーネスト・クラインのデビュー作である。2045年のディストピアを舞台
に、主⼈公のウェイド・ワッツが世界規模のバーチャルリアリティゲームのイースターエッグを探し、その発⾒によってゲーム製作者の財産を相続することになるというス
トーリーである。クラインは2010年6⽉、⼊札競争の末に本作の出版権をクラウン・パブリッシング・グループ（ランダムハウスの⼀部⾨）に売却した[1]。 本作は2011年8
⽉16⽇に出版された[2]。同⽇にはオーディオブックも発売されており、ナレーションは、章のひとつで少し触れているウィル・ウィートンである[3][4]。 20 2012年には
アメリカ図書館協会のヤングアダルト図書館サービス部⾨からアレックス賞を受賞し[5] 、2011年にはプロメテウス賞を 受賞した[6]。”,
Price. = 7.99m
}
new Product {
Id = "3",
Title = "Nineteen Eighty-Four”,
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/c/c3/1984first.jpg",
Description = “ Nineteen Eighty-Four（1984）は、イギリスの作家ジョージ・オーウェルが書いたディストピア社会SF⼩説であり、教訓的な物語である。1949年6⽉8
⽇にセッカー＆ウォーバーグ社から出版され、オーウェルが⽣前に完成させた9冊⽬にして最後の著作となった。⺠主社会主義者であるオーウェルは、スターリン主義のロシ
アとナチス・ドイツをモデルに、⼩説の中の全体主義政府を描いた[2][3][4]。 より広く、この⼩説では政治における真実と事実の役割と、それらが操られる⽅法を検証し
ている。" ,
Price = 6.99m
}
}

29.

[beta]

ProductList.Razor の追加 2
<h3>ProductList</h3>
<ul class="list-unstyled">
@foreach (var product in ProductService.Products)
{
<li class="media my-3">
<div class="media-img-wrapper mr-2">
<a href="/product/@product.Id">
<img class="media-img" src="@product.ImageUrl" alt="@product.Title" />
</a>
</div>
<div class="media-body">
<a href="/product/@product.Id">
<h4 class="mb-0">@product.Title</h4>
</a>
<p>@product.Description</p>
<h5 class="price">
@GetPriceText(product)
</h5>
</div>
</li>
}
</ul>
---

30.

Index.Razor の変更 @page "/" <ProductList /> https://localhost:7226/#

https://localhost:7226/

31.

Web API コントローラー追加、モデル追加

32.

API コントローラーの追加

33.

[beta]

ProductController.cs の追加 1
[Route("api/[controller]")]
[ApiController]
public class ProductController : ControllerBase
{
private static List <Product> Products = new List <Product> {
new Product {
Id = "1",
Title = "The Hitchhiker's Guide to the Galaxy",
ImageUrl = "https://upload.wikimedia.org/wikipedia/en/b/bd/H2G2_UK_front_cover.jpg",
Description = "銀河ヒッチハイク・ガイド[注 1]（HG2G、[1] HHGTTG、[2] H2G2、[3] tHGttGと表記することもある）は、ダグラス・アダムスが
⽣み出したコメディSFフランチャイズである。1978年にBBC Radio 4で放送されたラジオコメディが原作で、その後、舞台、⼩説、コミック、1981年の
テレビシリーズ、1984年のテキストベースのコンピュータゲーム、2005年の⻑編映画など、様々な形式で翻案されている。",
Price. = 9.99m
}
new Product {
Id = "2",
Title = "Ready Player One",
ImageUrl = "https://upload.wikimedia.org/wikipedia/en/a/a4/Ready_Player_One_cover.jpg",
Description = “「レディ・プレイヤー・ワン」は2011年に発表されたSF⼩説で、アメリカ⼈作家アーネスト・クラインのデビュー作である。2045年の
ディストピアを舞台に、主⼈公のウェイド・ワッツが世界規模のバーチャルリアリティゲームのイースターエッグを探し、その発⾒によってゲーム製作
者の財産を相続することになるというストーリーである。クラインは2010年6⽉、⼊札競争の末に本作の出版権をクラウン・パブリッシング・グループ
（ランダムハウスの⼀部⾨）に売却した[1]。 本作は2011年8⽉16⽇に出版された[2]。同⽇にはオーディオブックも発売されており、ナレーションは、
章のひとつで少し触れているウィル・ウィートンである[3][4]。2012年にはアメリカ図書館協会のヤングアダルト図書館サービス部⾨からアレックス賞
を受賞し[5] 、2011年にはプロメテウス賞を受賞した[6]。”,
Price. = 7.99m
}
new Product {
Id = "3",
Title = "Nineteen Eighty-Four”,
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/c/c3/1984first.jpg",
Description = “ Nineteen Eighty-Four（1984）は、イギリスの作家ジョージ・オーウェルが書いたディストピア社会SF⼩説であり、教訓的な物語
である。1949年6⽉8⽇にセッカー＆ウォーバーグ社から出版され、オーウェルが⽣前に完成させた9冊⽬にして最後の著作となった。⺠主社会主義者で
あるオーウェルは、スターリン主義のロシアとナチス・ドイツをモデルに、⼩説の中の全体主義政府を描いた[2][3][4]。より広く、この⼩説では政治
における真実と事実の役割と、それらが操られる⽅法を検証している。" ,
Price = 6.99m
}
}
---

34.

[beta]

ProductController.cs の追加 2
--[HttpGet]
public async Task<ActionResult<<List<Product>>> GetProducts()
{
rerurn Ok(Product)
var result = await _productService. GetProductsAsync();
return Ok(result);
}

https://localhost:7226/#

https://localhost:7226/

35.

[beta]

ProductList.Razor の変更（クライアントからの呼び出し）
--@inject HttpClient Http
<ul class="list-unstyled">
@foreach (var product in ProductService.Products)
{
<li class="media my-3">
<div class="media-img-wrapper mr-2">
<a href="/product/@product.Id">
<img class="media-img" src="@product.ImageUrl" alt="@product.Title" />
</a>
</div>
<div class="media-body">
<a href="/product/@product.Id">
<h4 class="mb-0">@product.Title</h4>
</a>
<p>@product.Description</p>
<h5 class="price">
@GetPriceText(product)
</h5>
</div>
</li>
}
</ul>
--code@ {
private static List<Product> Products {get; set;} = new List<Product>();
protected override async TaskOnInitializedAsync()
{
Products = await Http.GetFromJsonAsync<List<Product>> ("api/product");
}
}

36.

Entity Framework による Code First データベース作成

37.

Blazor アプリのデバッグその他の TIPS dotnet watch run public class xxx prop → snippets が出て予測してくれる

38.

swagger インストールその他 --// AddRazorPages の後 builer.Services.AddEndpointApiExploler(); builer.Services.AddSwaggerGen(); //var ap = buildder.Build();の後 app.UserSwaggerUI(); • https://localhost:(ポート番号)/swagger/index.html // app.UseHttpsRedirection();の前 app.UseSwagger(); // Swagger UI で Products の shema が表⽰されない場合 // Public Async Task を書き換え Task<Action> GetProduct() → Task<ActionResult<List<Product>>> GetProduct()

https://localhost/

39.

.NET Core Entity Framework 6.0 インストール • • • • Microsoft.EntityFrameworkCore Microsoft.EntityFrameworkCore. Design Microsoft.EntityFrameworkCore. SqlServer Mac の場合は、唯⼀の選択肢︕ Windows の場合は、SQL Server Express Edition をインストールして使う⼿もあり appsettings.json で ”ConnectionString” とうつと⾃動的に出てくるこの⽂字列をコピペして修正すればOK ※ 注意点 EF で Code First で Database を⾃動⽣成した場合、巨⼤なインスタンスになっている（3⽇くらいで数千円レベル）。 instance のサイズだけはすぐに修正して⼩さいものBasic２TB等にする。これなら⽉額数百円。

40.

[beta]

Azure SQL Database 接続⽂字列追加
{
"ConnectionStrings": {
"DefaultConnection":
"Server=tcp:xxx.database.windows.net,1433;Initial Catalog=BlazorEcommerce;Persist
Security Info=False;User ID=(UserID);Password=(Password);
MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;"
},
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*"
}

dotnet ef migration add CreateInitial

// Migrations フォルダーと Migration クラス作成

dotnet ef Update Database

// Azure SQL データベースとテーブル作成

41.

Product Model の追加 • • BlazorEcommerce.Shared フォルダに、 Product クラスを作成 Book.cs に右のコードを記載 using using using using using using using System; System.Collections.Generic; System.ComponentModel.DataAnnotations; System.ComponentModel.DataAnnotations.Schema; System.Linq; System.Text; System.Threading.Tasks; namespace BlazorEcommerce.Shared { public class Product { public int Id { get; set; } [Required] public string Title { get; set; } = string.Empty; public string Description { get; set; } = string.Empty; public string ImageUrl { get; set; } = string.Empty; public Category? Category { get; set; } public int CategoryId { get; set; } public bool Featured { get; set; } = false; public List<ProductVariant> Variants { get; set; } = new List<ProductVariant>(); public bool Visible { get; set; } = true; public bool Deleted { get; set; } = false; [NotMapped] public bool Editing { get; set; } = false; [NotMapped] public bool IsNew { get; set; } = false; } }

42.

[beta]

DataContext 作成
• DataContext.cs

•
•

Class を追加
DataContext.class

namespace BlazorEcommerce.Server.Data
{
public class DataContext : DbContext
{
// DataContext を作るのに ctor とタイプするとできる
// 全体的に IntelliCode が補完
public DataContext(DbContextOptions<DataContext>
options) : base(options)
{

• Serverプロジェクト側の Program.cs
修正
•

global using
Microsoft.EntityFramework.Core を⼊
れておくと楽

}
}
}

• Server プロジェクト側の Program.cs
global using Microsoft.EntityFrameworkCore;

43.

Entity Framework を使った最初の DB Migration //最初に名前を決めておく dotnet ef migrations add CreateInitial //成功したら Migration フォルダを開いて内容を確認 //データベース作成 dotnet ef database update

44.

[beta]

データのシード（2回⽬のマイグレーション）
--Protected override void OnModelCreating(ModelBuilder
modelBuilder)
{
modelBuilder.Entity<Product>().HasData(
---<ここに new Product ３エントリをコピペ>--);
}
dotnet ef migrations add ProductSeeding
dotnet ef database update

45.

[beta]

（参考）旧 ProductController.cs
[Route("api/[controller]")]
[ApiController]
public class ProductController : ControllerBase
{
private static List <Product> Products = new List <Product> {
new Product {
Id = "1",
Title = "The Hitchhiker's Guide to the Galaxy",
ImageUrl = "https://upload.wikimedia.org/wikipedia/en/b/bd/H2G2_UK_front_cover.jpg",
Description = "銀河ヒッチハイク・ガイド[注 1]（HG2G、[1] HHGTTG、[2] H2G2、[3] tHGttGと表記することもある）は、ダグラス・アダムスが
⽣み出したコメディSFフランチャイズである。1978年にBBC Radio 4で放送されたラジオコメディが原作で、その後、舞台、⼩説、コミック、1981年の
テレビシリーズ、1984年のテキストベースのコンピュータゲーム、2005年の⻑編映画など、様々な形式で翻案されている。",
Price. = 9.99m
}
new Product {
Id = "2",
Title = "Ready Player One",
ImageUrl = "https://upload.wikimedia.org/wikipedia/en/a/a4/Ready_Player_One_cover.jpg",
Description = “「レディ・プレイヤー・ワン」は2011年に発表されたSF⼩説で、アメリカ⼈作家アーネスト・クラインのデビュー作である。2045年の
ディストピアを舞台に、主⼈公のウェイド・ワッツが世界規模のバーチャルリアリティゲームのイースターエッグを探し、その発⾒によってゲーム製作
者の財産を相続することになるというストーリーである。クラインは2010年6⽉、⼊札競争の末に本作の出版権をクラウン・パブリッシング・グループ
（ランダムハウスの⼀部⾨）に売却した[1]。 本作は2011年8⽉16⽇に出版された[2]。同⽇にはオーディオブックも発売されており、ナレーションは、
章のひとつで少し触れているウィル・ウィートンである[3][4]。2012年にはアメリカ図書館協会のヤングアダルト図書館サービス部⾨からアレックス賞
を受賞し[5] 、2011年にはプロメテウス賞を受賞した[6]。”,
Price. = 7.99m
}
new Product {
Id = "3",
Title = "Nineteen Eighty-Four”,
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/c/c3/1984first.jpg",
Description = “ Nineteen Eighty-Four（1984）は、イギリスの作家ジョージ・オーウェルが書いたディストピア社会SF⼩説であり、教訓的な物語
である。1949年6⽉8⽇にセッカー＆ウォーバーグ社から出版され、オーウェルが⽣前に完成させた9冊⽬にして最後の著作となった。⺠主社会主義者で
あるオーウェルは、スターリン主義のロシアとナチス・ドイツをモデルに、⼩説の中の全体主義政府を描いた[2][3][4]。より広く、この⼩説では政治
における真実と事実の役割と、それらが操られる⽅法を検証している。" ,
Price = 6.99m
}
}
---

46.

ProductController.cs 内のデータを削除 • Server プロジェクト側の Program.cs • Server Program.cs を開き global using Blazorxxx.Server.Data; を追加 • private readonly DataContext context; ⽣成されるので、これを修正 • しかしこれを⾃動的に実施したい global using Blazorxxx.Server.Data; //context → _context に変更 public ProductController(DataContext context) { _cotext = context; } ツール → オプションからテキストエディタ → C# → CodeStyle → Naming → Manage Naming Style Naming Style Title : _fieldName Capitalizatin : camel Case Name これを追加したらprivate or internal Style に追加 _fieldName、Suggestion を選択エディタに戻って create field context を選択する

47.

[HttpGet] GetProduct() 変更 • [HttpGet] GetProduct() 変更 • ProductList • ProductController • DataContext var products = await _cotext.Products.ToListAsync(); return Ok(products)

48.

商品サービス、商品リスト、カテゴリーサービス等必要なサービス、CRUD 処理等の実装

49.

Blazor WebAssembly の追加・改修等 • • ProductDetail.razor.css 追加 ProductDetail.razor 編集 @page "/product/{id:int}" @inject IProductService ProductService @inject ICartService CartService

50.

Product 単品をクライアントで取得する

51.

Category を実装する using using using using using using System; System.Collections.Generic; System.ComponentModel.DataAnnotations.Schema; System.Linq; System.Text; System.Threading.Tasks; namespace BlazorEcommerce.Shared { public class Category { public int Id { get; set; } public string Name { get; set; } = string.Empty; public string Url { get; set; } = string.Empty; public bool Visible { get; set; } = true; public bool Deleted { get; set; } = false; [NotMapped] public bool Editing { get; set; } = false; [NotMapped] public bool IsNew { get; set; } = false; } }

52.

[beta]

Category の Seeding と Migration（3回⽬）
• DataContext.cs
--modelBuilder.Entity<Category>().HasData(
new Category
{
Id = 1,
Name = "Books",
Url = "books"
},
new Category
{
Id = 2,
Name = "Movies",
Url = "movies"
},
new Category
{
Id = 3,
Name = "Video Games",
Url = "video-games"
}
);

•
•

---

53.

Category サービスの Client 側への実装 - 1 • CategoryServices.cs • namespace Blazorxxxxxxxx.Client.Services.CategoryService { public class CategoryService : ICategoryService { private readonly HttpClient _http; • public CategoryService(HttpClient http) { _http = http; } ---

54.

Category サービスの Client 側への実装 - 2 • Program.cs //builder.Services.AddScoped<IProductService,ProductSe rvice>();の下に追加 builder.Services.AddScoped<ICategoryService, CategoryService>(); • CategoryService • global using で⼀番上に追加 //⼀番上に追加 global using Blazorxxxxxxxx.Client.Services.CategoryService;

55.

Category サービスの Client 側への実装 - 3 • _Imports.razor @using Blazorxxxxxxxx.Client.Services.ProductService •

56.

iCategoryServices の実装 • iCategoryServices.cs • namespace Blazorxxxxxxx.Client.Services.CategoryService { public interface ICategoryService { event Action OnChange; List<Category> Categories { get; set; } List<Category> AdminCategories { get; set; } Task GetCategories(); Task GetAdminCategories(); Task AddCategory(Category category); Task UpdateCategory(Category category); Task DeleteCategory(int categoryId); Category CreateNewCategory(); } }

57.

[beta]

NavMenu への Category の表⽰
• NavMenu.razor
protected override async Task OnInitializedAsync()
{
await CategoryService.GetCategories();
}

• NavMenu.razor の編集
• @inject ICategoryService
CategoryService を冒頭に追加
• @code の後半部分に追加
• NavMenuCssClass の追加

• NavMenuCssClass
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
Home
</NavLink>
</div>
@foreach (var category in CategoryService.Categories)
{
<div class="nav-item px-3">
<NavLink class="nav-link" href="@category.Url">
@category.Name
</NavLink>
</div>
}
</nav>
</div>

58.

[beta]

Server の Category サービスから Product を取得 - 1
• iProductService.cs
Task<ServiceResponse<Product>> GetProduct(int productId);

• ProductService.cs

•
•

public async Task GetProducts(string? categoryUrl = null)
{
var result = categoryUrl == null ?
await
_http.GetFromJsonAsync<ServiceResponse
<List<Product>>>("api/product/featured") :
await _http.GetFromJsonAsync<ServiceResponse
<List<Product>>>($"api/product/category/{categoryUrl}");
if (result != null && result.Data != null)
Products = result.Data;
CurrentPage = 1;
PageCount = 0;
if (Products.Count == 0)
Message = "商品がみつかりません。";
ProductsChanged.Invoke();
}

59.

[beta]

Server の Category サービスから Product を取得 - 2
• ProductController.cs
•
•
•

https://locahost:(ポート番
号)/swagger/index.html

--[HttpGet("category/{categoryUrl}")]
public async Task<ActionResult<ServiceResponse
<List<Product>>>>
GetProductsByCategory(string categoryUrl)
{
var result =
await _productService.
GetProductsByCategory(categoryUrl);
return Ok(result);
}
---

60.

[beta]

Client の Category サービスから Product を取得 - 1
• iProductService.cs
Task GetProducts(string? categoryUrl = null);
event Action ProductsChanged;

• iProductService.cs
•
•
•

•

Task GetProducts を実装追加
event ProductChanged を追加

public async Task GetProducts(string? categoryUrl = null)
{
var result = categoryUrl == null ?
//この２⾏がポイント
await _http.GetFromJsonAsync<ServiceResponse
<List<Product>>>("api/product/featured") :
await _http.GetFromJsonAsync<ServiceResponse
<List<Product>>>($"api/product/category/{categoryUrl}");
if (result != null && result.Data != null)
Products = result.Data;
CurrentPage = 1;
PageCount = 0;
if (Products.Count == 0)
Message = "商品がみつかりません。";
//ここもポイント
ProductsChanged.Invoke();
}

61.

[beta]

Client の Category サービスから Product を取得 - 2
• Index.razor
@page "/"
@page "/search/{searchText}/{page:int}"
@page "/{categoryUrl}"
@inject IProductService ProductService
<PageTitle>マイショップ</PageTitle>

•

@if (SearchText == null && CategoryUrl == null)
{
<FeaturedProducts />
}
else
{
<ProductList />
}
@code {
[Parameter]
public string? CategoryUrl { get; set; } = null;
[Parameter]
public string? SearchText { get; set; } = null;
[Parameter]
public int Page { get; set; } = 1;
protected override async Task OnParametersSetAsync()
{
if (SearchText != null)
{
await ProductService.SearchProducts(SearchText, Page);
}
else
{
await ProductService.GetProducts(CategoryUrl);
}
}
}

62.

Client の Category サービスから Product を取得 - 3 • ProductList.razor • • • • --@code { protected override void OnInitialized() { ProductService.ProductsChanged += StateHasChanged; } --public void Dispose() { ProductService.ProductsChanged -= StateHasChanged; }

63.

[beta]

Shared に ProductVariant.cs を追加
• ProductVariant.cs

•
•
•

--namespace BlazorEcommerce.Shared
{
public class ProductVariant
{
[JsonIgnore]
public Product? Product { get; set; }
public int ProductId { get; set; }
public ProductType? ProductType { get; set; }
public int ProductTypeId { get; set; }
[Column(TypeName = "decimal(18,2)")]
public decimal Price { get; set; }
[Column(TypeName = "decimal(18,2)")]
public decimal OriginalPrice { get; set; }
public bool Visible { get; set; } = true;
public bool Deleted { get; set; } = false;
[NotMapped]
public bool Editing { get; set; } = false;
[NotMapped]
public bool IsNew { get; set; } = false;
}
}

64.

[beta]

Composite Primary Key の追加と Seeding の実施（4回⽬）

•
•
•
•
•
•

ProductTypes
ProductVariants

--modelBuilder.Entity<ProductVariant>().HasData(
new ProductVariant
{
ProductId = 1,
ProductTypeId = 2,
Price = 9.99m,
OriginalPrice = 19.99m
},
new ProductVariant
{
ProductId = 1,
ProductTypeId = 3,
Price = 7.99m
},
new ProductVariant
{
ProductId = 1,
ProductTypeId = 4,
Price = 19.99m,
OriginalPrice = 29.99m
},
new ProductVariant
{
ProductId = 2,
ProductTypeId = 2,
Price = 7.99m,
OriginalPrice = 14.99m
},
new ProductVariant
{
ProductId = 3,
ProductTypeId = 2,
Price = 6.99m
},
new ProductVariant
{
ProductId = 4,
ProductTypeId = 5,
Price = 3.99m
},
new ProductVariant
{
ProductId = 4,
ProductTypeId = 6,
Price = 9.99m
},
new ProductVariant
{
ProductId = 4,
ProductTypeId = 7,
Price = 19.99m
},
new ProductVariant
{
ProductId = 5,
ProductTypeId = 5,
Price = 3.99m,
},

new ProductVariant
{
ProductId = 6,
ProductTypeId = 5,
Price = 2.99m
},
new ProductVariant
{
ProductId = 7,
ProductTypeId = 8,
Price = 19.99m,
OriginalPrice = 29.99m
},
new ProductVariant
{
ProductId = 7,
ProductTypeId = 9,
Price = 69.99m
},
new ProductVariant
{
ProductId = 7,
ProductTypeId = 10,
Price = 49.99m,
OriginalPrice = 59.99m
},
new ProductVariant
{
ProductId = 8,
ProductTypeId = 8,
Price = 9.99m,
OriginalPrice = 24.99m,
},
new ProductVariant
{
ProductId = 9,
ProductTypeId = 8,
Price = 14.99m
},
new ProductVariant
{
ProductId = 10,
ProductTypeId = 1,
Price = 159.99m,
OriginalPrice = 299m
},
new ProductVariant
{
ProductId = 11,
ProductTypeId = 1,
Price = 79.99m,
OriginalPrice = 399m
}
);
}
---

65.

[beta]

Product Variants と Types を Product Service に含める - 1
--public async Task<ServiceResponse<Product>> GetProductAsync(int productId)
{
var response = new ServiceResponse<Product>();
Product product = null;
if (_httpContextAccessor.HttpContext.User.IsInRole("Admin"))
{
product = await _context.Products
.Include(p => p.Variants.Where(v => !v.Deleted))
.ThenInclude(v => v.ProductType)
.FirstOrDefaultAsync(p => p.Id == productId && !p.Deleted);
}
else
{

•

---

•
•
•

public async Task<ServiceResponse<List<Product>>> GetProductsAsync()
{
var response = new ServiceResponse<List<Product>>
{
Data = await _context.Products
.Where(p => p.Visible && !p.Deleted)
.Include(p => p.Variants.Where(v => v.Visible && !v.Deleted))
.ToListAsync()

タブは Network
フィルターは Fetch/XHR で実⾏
---

public async Task<ServiceResponse
<List<Product>>> GetProductsByCategory(string categoryUrl)
{
var response = new ServiceResponse<List<Product>>
{
Data = await _context.Products
.Where(p => p.Category.Url.ToLower().Equals(categoryUrl.ToLower()) &&
p.Visible && !p.Deleted)
.Include(p => p.Variants.Where(v => v.Visible && !v.Deleted))
.ToListAsync()
---

66.

Product Variants と Types を Product Service に含める - 2 • • • • Productは取れている movies のところの下で Productをクリックし、variants の中に Product が列挙されるように出⼒されていることが確認できる id 指定してないと ProductType が⼊っていないが、1と指定してリロードすると idに対応した ProductType がちゃんと⼊っているのが⾒える

67.

まとめと次回の予定

68.

まとめ l l l l l l 前回までの復習 l Blazor 概要 l 今回作成する Web アプリケーションの概要 l Blazor WebAssembly プロジェクト作成 l Web API コントローラー追加、モデル追加 Entity Framework による Code First データベース作成商品サービス、商品リスト、カテゴリーサービス等必要なサービス、CRUD 処理等の実装検索サービスの追加と検索コンポーネントの実装カートサービス、認証・ユーザー登録その他の機能の実装と UI/UX の変更

69.

リソースと今後の展望 l l l l セッションでご紹介した EC アプリ .NET 5版ですが、参考にさせて戴きました。 https://github.com/patrickgod/BlazorEcommercePreviewYT 4⽉は、検索サービス、カートサービス、認証・ユーザー登録、UI/UX 等次回もよろしくお願いします︕

https://github.com/patrickgod/BlazorEcommercePreviewYT

70.

Thank you for your attention!

71.

Elastic APM によるアプリケーションの監視

72.

今回のデモアプリのイメージ Azure App Service ASP.NET 6 Web API Azure SQL Database CRUD Blazor WebAssembly AntDesign 全⽂検索クエリ Elastic APM Endpoint に送信検索・更新 UI APM .NET Agent Elastic Cloud Visual Studio 2022 Azure Data Explorer https://f79...c67.japaneast .azure.elasticcloud.com:9243/ 東⽇本リージョンマスターノード x 1 データノード x 2 ML ノード x 1 Azure サブスクリプション

73.

[beta]

Elastic APM for ASP.NET Core
https://www.elastic.co/jp/apm/

Configuration on .NET Core
https://www.elastic.co/guide/en/apm/agent/dotnet/current/configuration-on-asp-net-core.html
ASP.NET Core Quick Start
https://www.elastic.co/guide/en/apm/agent/dotnet/current/setup-asp-net-core.html
// .NETアプリへの Nuget パッケージインストール
dotnet add Elastic.Apm.NetCoreAll
Install-Package -ProjectName BlazorApp.Server -Id Elastic.Apm.NetCoreAll
// Program.cs への追加
--using Elastic.Apm.NetCoreAll;
//Elastic APM 追加
app.UseAllElasticApm(builder.Configuration);
app.UseHttpsRedirection();
app.UseBlazorFrameworkFiles();
app.UseStaticFiles();
---

// appsettings.json の更新
--{
"Logging": {
"LogLevel": {
//"Default": "Information",
//"Microsoft": "Warning",
//"Microsoft.Hosting.Lifetime": "Information"
"Default": "Warning",
"Elastic.Apm": "Debug"
}
},
"AllowedHosts": " * " ,
//Elastic ポータルから APM エンドポイントと Secret をコピー＆ペースト
"ElasticApm": {
"ServerUrl":
"https://
7d39255475bg8e8e0j99fm870kj48v88.apm.
japaneast.azure.elastic-cloud.com",
"SecretToken": ”f6p81KJytBcGMK2JKS4",
"TransactionSampleRate": 1.0
}
}

74.

Elastic Cloud → Kibana で APM モニタリング https://cloud.elastic.co/home

https://cloud.elastic.co/home

75.

その他の機能の実装と UI/UX の変更

76.

AntDesign https://antblazor.com/en-US/ • ⼈気 No.1 on Awesome Blazor • 企業向け製品のためのデザインシステム • 効率的で楽しいワークエクスペリエンスを実現 Install-Package -ProjectName BlazorWASMApp.Client -Id AntDesign

77.

AntDesign https://antblazor.com/en-US/components/image • Components • Image の使⽤⽅法を参照 • Source Code 利⽤可能

https://antblazor.com/en-US/components/image

78.

まとめ

79.

まとめ l l l l .NET 6 における Blazor Update ASP.NET Core Web API を構築 Blazor WebAssembly でフロントエンドアプリを構築 Elastic APM によるアプリケーションの監視

80.

.NET MAUI Blazor App - モバイル、デスクトップ、 Web ハイブリッドアプリを開発 https://qiita.com/shosuz/items/4218af93343e5cc999ec

https://qiita.com/shosuz/items/4218af93343e5cc999ec

81.

ASP.NET Core Blazor WebAssembly と Web API と Entity Framework Core で SQL Server のデータを取得したり追加したり更新したり削除したりする [.NET 6 版] https://qiita.com/tamtamyarn/items/876a5cd4b9ec9cdc1044

https://qiita.com/tamtamyarn/items/876a5cd4b9ec9cdc1044

82.

Elastic リソース • 公式ドキュメント • APM https://www.elastic.co/guide/index.html https://www.elastic.co/jp/apm/ • クラウドネイティブアプリでの Elasticsearch • Configuration on .NET Core https://docs.microsoft.com/ja-jp/dotnet/architecture/cloudnative/elastic-search-in-azure https://www.elastic.co/guide/en/apm/agent/dotnet/current/co nfiguration-on-asp-net-core.html • Azure での検索データストアの選択 • ASP.NET Core Quick Start https://docs.microsoft.com/ja-jp/azure/architecture/dataguide/technology-choices/search-options • Elastic APM Agent https://www.elastic.co/guide/en/apm/agent/index.html https://www.elastic.co/guide/en/apm/agent/dotnet/current/set up-asp-net-core.html

83.

Thank you for your attention!

Application development with c#, .net 6, blazor web assembly, asp.net web api, azure, part 2

Shotaro Suzuki

関連スライド

Azure OpenAI Service 概要とサンプルアプリ等のご紹介

GitHub Copilot & Copilot Chat で Java コーディングを最大限効率化する-配布用

VSCode、GitHub Copilot Chat で Web アプリを開発してみよう - 2

.NET と Azure OpenAI Service を使ったインテリジェントアプリケーションを構築してみよう

最新の React/TypeScript SPA テンプレートを .NET 8 で試してみよう

VS Code 拡張機能を活用した AI 駆動フロントエンド開発 - 実践編

各ページのテキスト