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

529 Views

December 20, 21

スライド概要

https://vscode.connpass.com/event/231495/
"React/Flutter/Blazor の開発・デバッグ環境を VSCode でサクッと構築する"

profile-image

FPT ジャパン エグゼクティブエバンジェリスト 独立行政法人 国立印刷局 デジタル統括アドバイザー兼最高情報セキュリティアドバイザー Microsoft で C#、.NET、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け技術啓発活動を担当後、Dell、Accenture、Elastic、VMware を経て現職まで一貫して同様の活動を継続。現職では NVIDIA AI GPU クラウドサービス、各パブリッククラウドとの AI 関連での協業、マーケティングを担当。政府の仕事は、内閣官房 政府 CIO 補佐官、 デジタル庁 PM を経て、現職を兼務。

シェア

またはPlayer版

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

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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実施)アーカイブでご覧ください︕

21.

コードファーストによる 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 に右のコードを記載 }

22.
[beta]
コードファーストによる 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 データベースとテーブル作成

23.

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 ベース、拡張機能使⽤可能︕

24.

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

25.

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

26.

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 でいち早く欲しい︕

27.

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

28.

Thank you for your attention!

29.

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

30.

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

31.
[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 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
}
}

32.

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