これは、未完成の基本的なASP.NET 8およびAngular 17 Webアプリケーションです。このアプリは、Visual Studio 2022の「AngularおよびAsp.Net Core」プロジェクトテンプレートに基づいています。目標は、Devexpress 'Devextreme UI Template Gallery Angularアプリケーションを使用し、ASP.NETアプリケーションのクライアント側として使用して、見栄えの良いビジネス(LOB)アプリを実証することでした。
GitHub上のすべてのASP.NETアプリがUIを欠いているか、非常に単純なUIを使用していない場合、ほとんどのことに気付きました。私は誰かが良いUIを見せるべきだと決めました。
元のdevexpress 'uiは、すべてのデータをDevexpress' Webサービスから取得します。 ASP.NETアプリの一部としてWebクライアントパーツとして実行されるように、Angularバージョンをコピーして変更しました。 「連絡先リスト」セクションは、データベースから取得するASP.NETバックエンドからデータを取得します。目標は、残りのUIで同じタイプの変換を行うことでしたが、私は短く停止し、Blazorに集中するために移動しました。バックエンドは、クリーンなアーキテクチャパターンに基づいており、エンドポイント - >サービス - >リポジトリ - >データベースの同じワーフは、同じコンベンションを使用して他のアプリケーションに適用できます。
アプリケーションは、認証、承認、ロギング、コンテナを実装していません。このような機能を実装するには、インスピレーションと実装については、jasontaylordev/cleanArchitectureを参照してください。
UIは、完全に特徴的で磨かれたUIコンポーネントスイートであるDevexpress 'Devextremeに基づいており、デモギャラリーは素晴らしいデモでした。強くお勧めします。 Devextremeは非商用アプリケーションには無料であり、商用アプリのライセンスが必要です。
データベースを設定するための手順:
- 最初のステップは、データベースのセットアップです。アプリはSQL Serverを使用します。 SQL Server 2019以降を使用している場合は、インフラストラクチャプロジェクトの「MISC_FILES」フォルダーで、バックアップファイルdxfullapp.bakからデータベースを単純に復元できます。
- それ以外の場合は、データベースを作成して入力するために「wisc_files」フォルダーにあるdxfullapp.sqlスクリプトを実行します。必要に応じてファイルを編集して、システムのSQL Serverインストールの適切なパスにFilename値を更新します。
- ServerプロジェクトのAppSettings.jsonファイルで必要に応じて、defaultConnectionString値を更新します。
アプリを実行するための手順:
- (vs 2022でのロードに数分かかるという問題があります。それが現地の問題であるかどうかはまだわかりません。)
- データベースと接続文字列を設定した後、サーバープロジェクトを起動プロジェクトにします。アプリを実行すると、連絡先がロードされたページでブラウザが起動します。最初のページには、壊れたページが表示され、自動リフレッシュと適切なレンダリングが表示されます。これは修正する必要があります。
リストを行うには(現在それらを完了する計画はありません):
- すべてのUIをdevexpressのエンドポイントの代わりにASP.NETバックエンドを使用するように変換します。
- すべてのDTOを作成してクライアントにサービスを提供し、エンティティをマッピングします。 (それが望ましい場合は、AutomApperまたはMapsterを使用します)。
- ユニット、機能、統合、エンドツーエンドテストを追加します。
- UIは、編集の保存や新しいオブジェクトの作成などの更新を行いません。それらを実装します。
- 認証、承認、ロギング、ヘルスチェックなどを追加します。
- コントローラーベースのAPIの代わりに、最小限のAPIを試してください。
- Angularクライアントはバージョン17にある間、バージョンの特定の機能を実際には使用していません。私がしたのは、バージョン15から17に変換することだけです。
なぜdevextreme:
- Angular、React、Vue、JQuery、Plain JavaScriptをネイティブにサポートする高品質、洗練された、拡張可能なUIコンポーネントが数十個あります。
- 優れた技術サポートとドキュメント。各コンポーネントの機能を示すリアルタイムのカスタマイズ可能なデモを備えたオンライン。
- 強力でモバイルレスポンシブデータグリッド。スイート全体の価格は、人気のあるUIコンポーネントのみの価格よりも低くなっています。
- 費用はかかりますが、長期的には、開発のコストを削減し、時間と、動作し、振る舞い、一貫性のないように見えるオープンソースのUIコンポーネントのhodgepodgeを使用して、時間を削減することで多くのお金を節約できます。企業が開発者やコミュニティの自由時間に依存するのではなく、生計を立てるコンポーネントを使用します。
- PS:私は幸せな顧客であること以外に、Devexpressに所属していません。私は自分の意見を表明しているだけです。
- コーディングをお楽しみください!