Building React, Flutter and Blazor development and debugging environment with using VSCode

React, Flutter, Blazor の開発・デバッグ 環境を VSCode でサクッと構築する 鈴⽊ 章太郎 Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト デジタル庁 省庁業務グループ ソリューションアーキテクト

MS Eva 時代は、WPF → Silverlight → Azure Mobile Apps/Xamarin, HoloLens (初代)…etc. Shotaro Suzuki Twitter : @shosuz Elastic Technical Product Marketing Manager/Evangelist デジタル庁 省庁業務グループ ソリューションアーキテクト 元 Microsoft Technical Evangelist

アジェンダ l l l l React / React Native の開発・デバッグ環境構築 Flutter の開発・デバッグ環境構築 Blazor の開発・デバッグ環境構築 まとめ

React/React Native の 開発・デバッグ環境構築

Expo Tools https://marketplace.visualstudio.com/items?itemName=byCedric.vscode-expo 特徴 •app.jsonまたは app.config.jsonマニフェストの オートコンプリートと検証 •⾃動構成プラグインの検証と IntelliSense コマンド Expo を最⼤限に活⽤するのに 役⽴つコマンドもいくつか⽤意

• https://marketplace.visualstudio.com/items?itemName=byCedric.vscode-expo
• https://docs.expo.io/guides/config-plugins/

Prettier https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode • 独創的なコードフォーマッター • コードを解析し、最⼤⾏⻑を 考慮した独⾃のルールを使⽤ してコードを再印刷し、必要 に応じてコードをラップすること により⼀貫したスタイルを適⽤

• https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

React Native + Firebase サンプルアプリ (CQRS) プロジェクト Cloud Function Firebase Firestore データ保存 iOS / Android Mobile App Cloud Function で同期 React Native Elastic APM Agent 全⽂検索クエリ https://google-cloud-daydigital-2021.es.asianortheast1.gcp.cloud.es.io :9243 検索結果 VSCode northeast1-b リージョン マスターノード x 1 データノード x 2 ML ノード x 1 Elastic Cloud

• https://google-cloud-day-digital-2021.es.asia-northeast1.gcp.cloud.es.io:9243/
• https://www.elastic.co/guide/en/apm/agent/rum-js/current/framework-integrations.html

Flutter の開発・デバッグ環境構築

Flutter v3.29.0 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter Flutter モバイルアプリの効果的 な編集、リファクタリング、実⾏、 及びリロードのサポートと、Dart プログラミング⾔語サポートを追加

• https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
• https://flutter.io/
• https://www.dartlang.org/

Material Icon Theme https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme マテリアルデザインアイコンを VSCode に取り込み

• https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Flutter Tree https://marketplace.visualstudio.com/items?itemName=marcelovelasquez.flutter-tree • コードを書く前にUIの実装イメージが 固まっているのが前提 • わずか1⾏で複雑なレイアウトを⼀気 に書ける

• https://marketplace.visualstudio.com/items?itemName=marcelovelasquez.flutter-tree

Flutter Widget Snippets https://marketplace.visualstudio.com/items?itemName=alexisvt.flutter-snippets • よく使う Widget を⾼速で挿⼊可能 • Column とか Row 等、よく使うものの Children…と続けるのは⾯倒

• https://marketplace.visualstudio.com/items?itemName=alexisvt.flutter-snippets

Flutter + Firebase サンプルアプリ (CQRS) プロジェクト iOS / Android Mobile App データ保存 Cloud Function で同期 Flutter 全⽂検索クエリ VSCode Cloud Function Firebase Firestore https://google-cloud-daydigital-2021.es.asianortheast1.gcp.cloud.es.io :9243 検索結果 northeast1-b リージョン マスターノード x 1 データノード x 2 ML ノード x 1 Elastic Cloud

• https://google-cloud-day-digital-2021.es.asia-northeast1.gcp.cloud.es.io:9243/

Blazor の開発・デバッグ環境構築

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

Blazor を使⽤して Web アプリをビルドする https://docs.microsoft.com/ja-jp/learn/modules/build-blazor-webassembly-visual-studio-code/ 拡張機能ではないが この Learn は最初にやるのがおすすめ

• https://docs.microsoft.com/ja-jp/learn/modules/build-blazor-webassembly-visual-studio-code/

Microsoft.AspNetCore.Razor.VSCode. BlazorWasmDebuggingExtension https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.blazorwasm-companion • C＃拡張機能のコンパニオン 拡張機能 • VSCode で Blazor WebAssembly をデバッグ するためのエクスペリエンスに いくつかの改善をもたらす • この拡張機能は、単独で インストールするべきではなく、 C＃拡張機能が⾃動的に インストールされる

• https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.blazorwasm-companion
• https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp

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

• https://f79...c67.japaneast.azure.elastic-cloud.com:9243/
• https://www.elastic.co/guide/en/apm/agent/dotnet/current/index.html

.NET MAUI Blazor App - モバイル、デスクトップ、 Web ハイブリッドアプリを開発 https://qiita.com/shosuz/items/4218af93343e5cc999ec このデモアプリを元に、 ⾃分が持って いる Elastic の books index に 対応したデモを作ろうとしていたところ、

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

ASP.NET Core Blazor WebAssembly と Web API と Entity Framework Core で SQL Server のデータを取得したり追加したり更新したり削除したりする [.NET 6 版] https://qiita.com/tamtamyarn/items/876a5cd4b9ec9cdc1044 ちょうどこちらのエントリを発⾒︕ とても良い実装なので、参考にさせて いただきます︕Special Thanks! 詳しくは、.NET ラボ 12⽉ (12/18実施）アーカイブでご覧ください︕

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

コードファーストによる Azure SQL Database ⽣成 public class Book { • • • • • public public public public public public Microsoft.EntityFrameworkCore.SqlServer Microsoft.EntityFrameworkCore.Tools Elastic.Apm.NetCoreAll int BookId { get; set; } string Title { get; set; } string ThumbnailUrl { get; set; } string Isbn { get; set; } string Author { get; set; } 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; } プロジェクトに Models フォルダを作成し、 book クラスを作成 Book.cs に右のコードを記載 }

コードファーストによる Azure SQL Database ⽣成 2
{
"ConnectionStrings": {
"DefaultConnection":
"Server=tcp:xxx.database.windows.net,1433;Initial Catalog=BlazorWasmDb;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": "*"
}

Add-Migration -Name Initial

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

Update-Database

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

Azure Data Studioを使⽤して 新しいデータベースを確認、データを追加 INSERT INTO Books(Title,ThumbnailUrl,Isbn,Author,Category)VALUES(N'Unlocking Android',N'https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.book-thumbimages/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-thumbimages/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-thumbimages/bibeault.jpg',N'1933988355',N'Bear Bibeault, Yehuda Katz',N'Web Development'); VSCode に近い Electron ベース、拡張機能使⽤可能︕

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

• https://github.com/AdrienTorris/awesome-blazor
• https://antblazor.com/en-US/

AntDesign https://antblazor.com/en-US/components/image • Components • Image の使⽤⽅法を 参照 • Source Code 利⽤ 可能 この辺りの拡張機能、VSCode でいち早く欲しい︕

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

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. この辺りの拡張機能、VSCode でいち早く欲しい︕

• https://docs.microsoft.com/ja-jp/aspnet/core/test/hot-reload?view=aspnetcore-6.0

Jaguʻeʼr Cloud Native #3 みんなで語り合おう︕クラウドネイティブLT祭り https://jaguer-cloud-native.connpass.com/event/231835/ Jaguʼeʼr 会員企業所属のみです。ごめんなさい︕

• https://jaguer-cloud-native.connpass.com/event/231835/

Thank you for your attention!

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

今回のデモアプリのイメージ 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 サブスクリプション

• https://f79...c67.japaneast.azure.elastic-cloud.com:9243/
• https://www.elastic.co/guide/en/apm/agent/dotnet/current/index.html

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 BlazorWASMApp.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
}
}

• http://www.elastic.co/jp/apm/
• http://www.elastic.co/guide/en/apm/agent/dotnet/current/configuration-on-asp-net-core.html
• http://www.elastic.co/guide/en/apm/agent/dotnet/current/setup-asp-net-core.html

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

• https://cloud.elastic.co/home