DotNetConf2024の資料 BlazorとLowCodeと生成AIの話です

DotNetConf2024の資料 BlazorとLowCodeと生成AIの話です

• 1.
  Blazor とローコードと AI
• 2.
  石川達也 Codeer 代表取締役 →社員募集中 プログラマ (C,C++, C#) テスト自動化ライブラリ / ツール開発 Microsoft MVP 2014 ～ 趣味はギターと OSS ライブラリ作成 Twitter: @StoneGuitar777 自己紹介
• 3.
  Blazor でローコードのライブラリ作りました！（どや Blazor アプリに組み込むんで使えます。 もちろん生成AI とも相性抜群！ それでこのライブラリを作成する中で得た Blazor とか AI に関する情報を話します。 今日話す内容
• 4.
  Codeer.LowCode.Blazor Codeer.LowCode.Blazor Codeer.LowCode.Blazor ローコード 生成 AI 使いませんか？ 作りませんか？ 御社独自の ノウハウ ライブラリで 組み込み 業界 ロジック 開発技術 .NET 資産 Codeer.LowCode.Blazorを使えば あっという間に『オリジナルのローコードアプリ』を作成 できます！ ローコードアプ リを
• 5.
  ビジネスモデル：社内アプリ 開発後はローコードアプリとし て 非技術職の方でもカスタマイズ 可能 メンテナンスも簡単 Blazor で開発フレームワークを最新 化！ あっという間に開発完了 Codeer.LowCode.Blazor 自社用 ビジネスア プリ DB (SQL Server,Oracle, MySQL, PostgreSQL, SQLite) 既存の資産と簡単に連 携 オリジナルのローコードア プリ Codeer.LowCode.Blazor 御社独自のノウハウ・業界ロ ジック AI-Powered! 低コストで高品質なアプリを開発できま す！
• 6.
  ビジネスモデル： SI 基盤/ パッケージアプリ / 自社サービス Codeer.LowCode.Blazor アプリにローコード機能と AI 機能の組み込みが可能です！ 顧客別 ビジネスア プリ 顧客 A 顧客 B ローコード機能と AI 機能を組み込むこ とで 高品質で高速な開発が可能 ベースとなるアプリから 顧客別にカスタマイズして展開するこ とが可能 オリジナルのローコードア プリ Codeer.LowCode.Blazor 御社独自のノウハウ・業界ロ ジック AI-Powered! 顧客 C
• 7.
  充実の機能 生成 AI 開発の効率化カスタマイズ Codeer.LowCode.Blazor 帳票出力 バーコードリーダー連携 Excel 連携 リッチな UI AI によるデータ取り 込み AI による開発サポー ト 自動テスト 簡単に画面や機能を作成 プロコードとの自由な連携 スクリプトで処理をカスタマ イズ Excel や DB の定義をもとに 作成 Codeer.LowCode.Blazor の特徴 Codeer.LowCode.Blazor
• 8.
  独自の部品、インフラの作成 通常の .NET 開発 基本となるビジネスアプリ機能を ローコードで作成 開発効率UP エンドユーザー様も ローコード機能でカスタマイズ 独自のローコードアプリを開発しませんか？
• 9.
  デモ 新規作成 レイアウト スクリプト AI で取り込み AI でモジュールつくる AIでクエリ作成して Chart 表示
• 10.
  ※1 .NET8 のテンプレからは消えている ※2 頑張ったらアリにもできる、昔から ※3 設定で無しにもできる Web での Blazor
• 11.
  WebApp-WebAssembly でもプリレンダリング切れるって
• 12.
  InteractiveServer でもプリレンダリング中は JavaScriptが使えない点で異なる InteractiveServer ではプリレンダリングと本レンダリングを区別できない → OnAfterRender はプリレンダリング中実行されないのでそこでやるのがいいらしい ・プリレンダリング (Server) ・ Seraver で本レンダリング ・ Wasm で本レンダリング InteractiveWebAssmbly では区別がつくけど Wasm と Server の両方で動くようにするのはまあまあ難易度高い 実装難易度が上がるポイント タイミングによって使える機能が異なる！
• 13.
  番外編： BlazorWebView プリレンダリングなし .NET のランタイムで動くので非常に楽
• 14.
  Blazor の認証小話 DuendeIdenityServer builder.Services.AddIdentityServer() .AddApiAuthorization<ApplicationUser, ApplicationDbContext>(); 前に WebAssembly ＋ ASP.NET ホスティングだと Duende IdentityServer が使われていた 商用利用の場合は有料なので注意が必要だった ※ ちなみに Server の方は .NetIdentity の Cookie 認証なので Duende は使われ てない
• 15.
  WebAssembly で社内環境での利用時 Duende IdenityServerを事情があって使いづらい場合・・・ ASP.NET Core Identity + Cookie 認証 Codeer.LowCode.Blazor のテンプレートで作ってます。 テンプレートからコードの作成自体は無料なんで是非使ってください。 Azure Entra Id のもあります。 VisualStudio MarketPlace https://marketplace.visualstudio.com/items?itemName=Codeer.LowCodeBlazor ってやってたんだけど・・・
• 16.
  WebApp-WebAssembly で作ったら デフォルトで Cookie認証のコードが出てきます。 （ Duende IdenityServer 使われてない
• 17.
  生成 AI Codeer.LowCode.Blazor は 他の機能と組み合わせて使うのに非常に向いています。 AIだけでなく UI ライブラリなんかも AI での画像解析機能はユーザーコードの方で AITextAnalysis というフィールドを作成して それを使えるようにしています。 以下説明するコードはテンプレートから作成してもらったら出力されます。 無料なんで是非テンプレートをインストールして作成してみてください。 VisualStudio MarketPlace https://marketplace.visualstudio.com/items?itemName=Codeer.LowCodeBlazor
• 18.
  API が呼ばれる DocumentAnalysisClinet で 画像からテキストデータに変換 テキストをAI に食わせて 指定のフォーマットの Json に変換 画面用データに変換 AI で画像を読み込んでデータ設定
• 19.
  AI で画像を読み込んでデータに設定 static asyncTask<string> ExtractTextFromImage(MemoryStream stream) { var client = new DocumentAnalysisClient( new Uri(config.DocumentAnalysisEndPoint), new AzureKeyCredential(config.DocumentAnalysisKey)); var operation = await client.AnalyzeDocumentAsync( WaitUntil.Completed, "prebuilt-read", stream); return string.Join(Environment.NewLine, operation.Value.Pages. SelectMany(e => e.Lines).Select(e => e.Content)); DocumentAnalysisClinet で画像からテキストデータに変 換
• 20.
  AI で画像を読み込んでデータに設定 生成 AIで文字列から Json に変換 static async Task<string> DocumentAnalysisByText(IModuleDesigns moduleDesigns, string moduleName, string text) { var config = SystemConfig.Instance.AISettings; var azureClient = new AzureOpenAIClient( new Uri(config.OpenAIEndPoint), new ApiKeyCredential(config.OpenAIKey)); var chatClient = azureClient.GetChatClient(config.ChatModel); var completion = await chatClient.CompleteChatAsync( [ new SystemChatMessage(@" あなたは文中から特定のデータを取得する担当です。取り出すデータの指示と文章を渡すので Json でデータを返してください。 指示はフィールド名とあれば () の中に補助の名前を入れます。 Json ではフィールド名を使ってください。 配列のものもあります。その場合は [{ 子要素のフィールドの指示 }] で再帰的に指定します。 回答はプログラムで使うので Json のみにしてください。 「わかりました」とか「 ```json 」とか本当に何も書かないでください。 "), new UserChatMessage(CreateJsonExplanation(moduleDesigns, moduleName)), new UserChatMessage(text), ]); return completion.Value.Content.FirstOrDefault()?.Text ?? string.Empty; } ① わからせ ② 画面と出力する JSON の説明 ③ テキストデータ
• 21.
  AI でモジュール作成 あなたはローコードのアプリ設計者です。 このローコードシステムの仕様は以下のものです。 ・・・（略） Codeer.LowCode.Blazorの外部仕様の説明 ・・・ （略）現在のプロジェクト中の設定の説明 今からユーザーがあなたに対してチャットでアプリの設計を相談します。 必要な Module の構成を答えてください。 ユーザーとチャットで会話して Module の構成を決定してください。 ここまでは登場するすべての Module の話をしてください。 最後に Module を作成するかとうかたずねてください。 全部まとめて作ることもできますし、ピックアップして任意のモジュールだけ作成することもできます。 作成時は $Create コマンドを使います。 以下はプログラムが解釈して使うコマンドです。 ・・・ （略）コマンドの説明 プロンプト
• 22.
  ・ユーザーの話 ・ AI の回答 ・ユーザーの話 ・AI の回答 $Create ・ユーザーの話 ・ AI の回答 ・詳細な Json の仕様を追加 ・生成 AI に問い合わせ Module の Json の作成 ※ このことは履歴に追加しない Json の仕様を先に渡すと 要件定義の時に細かい Json の話を AI がし始めるか ら （技術者が細かい技術的な話を お客さんにしちゃうのに似てるかも List<ChatMessage> _chatHistory = new(); var completion = await chatClient.CompleteChatAsync(_chatHistory); // ここまでの会話をコピー var tmp = _chatHistory.ToList(); モジュールを作ったことだけは記憶 やっぱり Json の詳細はしらない AI に入れる知識と会話を制御
• 23.
  THANK YOU ！ Codeer.LowCode.Blazor