3. l Blazor 概要
l 今回作成する Web アプリケーションの概要
l Blazor WebAssembly プロジェクト作成
l Web API コントローラー追加、モデル追加
l Entity Framework による Code First データベース作成
l 商品サービス、商品リスト、カテゴリーサービス等必要なサービス、
CRUD 処理等の実装
l 検索サービスの追加と検索コンポーネントの実装
l その他の機能の実装と UI/UX の変更
アジェンダ
7. Blazor – .NET 5 まで
Blazor Server Blazor WebAssembly
DOM
Blazor
WebAssembly
.NET
Razor Components
Blazor
.NET
Razor Components
DOM
SignalR
ü DB アクセス含むサーバー機能へのフルアクセス
ü ⾼速なスタートアップ
ü コードがサーバーから離れない
ü 古いブラウザとシンクライアントをサポート
ü 永続的な接続が必要
ü UI の遅延が⾼い
ü完全にクライアント側で実⾏
ü必要なサーバー コンポーネントなし
ü静的サイトとしてホスト
üオフラインで実⾏可能
ü⼤きなダウンロードサイズ
üランタイムパフォーマンスの低下
Blazor Server (.NET 5) Blazor WebAssembly (.NET 5)
14. Get started with Blazor
• Go to https://blazor.net
• Install the .NET SDK
• .NET Conf 2021 https://www.dotnetconf.net/
• .NET Conf 2021 – videos/slides/demos
https://github.com/dotnet-presentations/dotNETConf/tree/master/2021/MainEvent/Technical
Visual Studio Visual Studio for Mac Visual Studio Code
+ C# extension
19. EC Demo アプリの構成 1
Azure
SQL Database
Elastic Cloud
東⽇本リージョン
マスターノード x 1
データノード x 2
ML ノード x 1
https://f79...c67.japaneast
.azure.elastic-
cloud.com:9243/
全⽂検索クエリ
検索・更新 UI
Azure サブスクリプション
Azure
App Service
Elastic APM
Endpoint に送信
Blazor
Server
APM .NET Agent
Blazor
WebAssembly
CRUD
Visual
Studio
2022 for
Mac Azure Data Studio
20. EC Demo アプリの構成 2
Azure
SQL Database
Elastic Cloud
東⽇本リージョン
マスターノード x 1
データノード x 2
ML ノード x 1
https://f79...c67.japaneast
.azure.elastic-
cloud.com:9243/
CRUD
Azure サブスクリプション
Visual
Studio
2022 for
Mac
Azure
App Service
Elastic APM
Endpoint に送信
Azure Data Studio
ASP.NET 6 Web API
Azure
Static Web Apps
Blazor
WebAssembly
検索・更新 UI
APM .NET Agent
Blazor
WebAssembly
全⽂検索クエリ
25. Product Model の追加
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using 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
---
30. Blazor WebAssembly の Hot Reload
https://docs.microsoft.com/ja-jp/aspnet/core/test/hot-reload?view=aspnetcore-6.0
In Visual Studio 2022 GA (17.0), Hot Reload is only
supported when running without the debugger.
37. まとめ
l Blazor 概要
l 今回作成する Web アプリケーションの概要
l Blazor WebAssembly プロジェクト作成
l Web API コントローラー追加、モデル追加
l Entity Framework による Code First データベース作成
l 商品サービス、商品リスト、カテゴリーサービス等必要なサービス、
CRUD 処理等の実装
l 検索サービスの追加と検索コンポーネントの実装
l その他の機能の実装と UI/UX の変更
38. リソースと今後の展望
l セッションでご紹介した EC アプリ .NET 5版ですが、参考にさせて戴きました。
l https://github.com/patrickgod/BlazorEcommercePreviewYT
l 3⽉は、EF 連携-DB ⽣成、各サービス実装、検索機能 (Elastic による強化)等
l 将来的に microservices 化などできるといいなと思っています(4⽉︖W)
l 今回、共演した宝達さんがデモされた OpenShift へのデプロイ、さらに進めて、ARO
(Azure Red Hat OpenShift)にデプロイも⾯⽩いかなと思っています。
l 次回もよろしくお願いします︕