15. 今回のデモアプリのイメージ
Azure
SQL Database
Elastic Cloud
東日本リージョン
マスターノード x 1
データノード x 2
ML ノード x 1
https://f79...c67.japaneast
.azure.elastic-
cloud.com:9243/
全文検索クエリ
CRUD
検索・更新 UI
Blazor
WebAssembly
Azure サブスクリプション
Visual
Studio
2022
Azure
App Service
Elastic APM
Endpoint に送信
Azure
Data Explorer
ASP.NET 6
Web API
APM .NET Agent
AntDesign
16. .NET MAUI Blazor App - モバイル、デスクトップ、
Web ハイブリッドアプリを開発
https://qiita.com/shosuz/items/4218af93343e5cc999ec
このデモアプリを元に、 自分が持って
いる Elastic の books index に
対応したデモを作ろうとしていたところ、
17. ASP.NET Core Blazor WebAssembly と Web API と Entity Framework
Core で SQL Server のデータを取得したり追加したり更新したり削除したりする
[.NET 6 版]
https://qiita.com/tamtamyarn/items/876a5cd4b9ec9cdc1044
ちょうどこちらのエントリを発見!
とても良い実装なので、参考にさせて
いただきます!Special Thanks!
18. コードファーストによる Azure SQL Database 生成
• Microsoft.EntityFrameworkCore.SqlServer
• Microsoft.EntityFrameworkCore.Tools
• Elastic.Apm.NetCoreAll
• プロジェクトに Models フォルダを作成し、 book
クラスを作成
• Book.cs に右のコードを記載
public class Book
{
public int BookId { get; set; }
public string Title { get; set; }
public string ThumbnailUrl { get; set; }
public string Isbn { get; set; }
public string Author { get; set; }
public string Category { get; set; }
public Book
(int bookId, string title, string thumbnailUrl,
string isbn, string author, string category)
{
BookId = bookId;
Title = title;
ThumbnailUrl = thumbnailUrl;
Isbn = isbn;
Author = author;
Category = category;
}
}
20. Azure Data Studio を使用して
新しいデータベースを確認、データを追加
INSERT INTO Books(Title,ThumbnailUrl,Isbn,Author,Category)VALUES(N'Unlocking Android',N'https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.book-thumb-
images/ableson.jpg',N'1933988673',N'W. Frank Ableson, Charlie Collins, Robi Sen',N'Open Source, Mobile');
INSERT INTO Books(Title,ThumbnailUrl,Isbn,Author,Category)VALUES(N'ASP.NET Core 6.0 in Practice',N'https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.bo
ok-thumb-images/bochicchio.jpg',N'1935182463',N'Daniele Bochicchio, Stefano Mostarda',N'Microsoft .NET');
INSERT INTO Books(Title,ThumbnailUrl,Isbn,Author,Category)VALUES(N'Brownfield Application Development in .NET',N'https://s3.amazonaws.com/AKIAJC5RL
ADLUMVRPFDQ.book-thumb-images/baley.jpg',N'1933988711',N'Kyle Baley, Donald Belcham',N'Microsoft');
INSERT INTO Books(Title,ThumbnailUrl,Isbn,Author,Category)VALUES(N'MongoDB in Action',N'https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.book-thumb-
images/banker.jpg',N'1935182870',N'Kyle Banker',N'Next Generation Databases');
INSERT INTO Books(Title,ThumbnailUrl,Isbn,Author,Category)VALUES(N'jQuery in Action',N'https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.book-thumb-
images/bibeault.jpg',N'1933988355',N'Bear Bibeault, Yehuda Katz',N'Web Development');
23. 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.
25. 今回のデモアプリのイメージ
Azure
SQL Database
Elastic Cloud
東日本リージョン
マスターノード x 1
データノード x 2
ML ノード x 1
https://f79...c67.japaneast
.azure.elastic-
cloud.com:9243/
全文検索クエリ
CRUD
検索・更新 UI
APM .NET Agent
Blazor
WebAssembly
Azure サブスクリプション
Visual
Studio
2022
Azure
App Service
Elastic APM
Endpoint に送信
Azure
Data Explorer
ASP.NET 6
Web API
AntDesign
29. まとめ
⚫ .NET 6 における Blazor Update
⚫ ASP.NET Core Web API を構築
⚫ Blazor WebAssembly でフロントエンドアプリを構築
⚫ Elastic APM によるアプリケーションの監視
30. 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
31. .NET MAUI Blazor App - モバイル、デスクトップ、
Web ハイブリッドアプリを開発
https://qiita.com/shosuz/items/4218af93343e5cc999ec
32. ASP.NET Core Blazor WebAssembly と Web API と Entity Framework
Core で SQL Server のデータを取得したり追加したり更新したり削除したりする
[.NET 6 版]
https://qiita.com/tamtamyarn/items/876a5cd4b9ec9cdc1044