サンプルコードは、C#と.NETを使用して、フロントエンドからバックエンドまでコードを完全に共有する方法を示します。
このプロジェクトには以下が含まれます。
| プロジェクト | 説明 |
|---|---|
| pokemoneverywhere.blazor | Web APIプロジェクトから来る取得したポケモンデータを表示するBlazor Webアプリ |
| pokemoneverywhere.blazor.shared | すべてのBlazor対応プロジェクトの間で共有されるRazorクラスライブラリ(RCL)(Blazor、Blazor Hybrid with .Net Maui、WPF、Winforms) |
| pokemoneverywhere.blazorhybrid | Android、iOS、Windows、およびMacOSで実行できる.NET Mauiに構築されたBlazor Hybridプロジェクト |
| pokemoneverywhere.console | テーブル内のWeb APIプロジェクトからのポケモンデータを表示する.NETコンソールアプリケーション |
| pokemoneverywhere.maui | .NET MAUI「ネイティブ」アプリケーションは、ネイティブAndroid、iOS、Windows、MacOSアプリのWebAPIプロジェクトからのポケモンデータを表示します |
| pokemoneverywhere.shared | 他のすべてのプロジェクトと共有されるクラスライブラリ。データを取得するためのポケモンモデルとサービスが含まれています |
| pokemoneverywhere.vue(ソリューションではない) | VuehybridプロジェクトでホストされているVue Webプロジェクト |
| pokemoneverywhere.vuehybrid | HybridWebViewを使用してVueアプリをロードする.NET MAUIクライアントプロジェクトは、Web APIプロジェクトからのポケモンデータを表示する |
| pokemoneverywhere.webapi | 外部ソースからデータを取得し、クライアントに提供するバックエンドWeb APIプロジェクト |
| pokemoneverywhere.wpf | WPF DataGridとBlazorハイブリッドの両方でデータを取得する方法を示すWPFクライアントプロジェクト |
| pokemoneverywhere.winforms | Winforms DataGridViewとBlazor Hybridの両方でデータを取得する方法を示すWinformsクライアントプロジェクト |
データを提供するためにWebAPIプロジェクトが実行されていることを確認してください。
これを実行することができますdotnet run --project PokemonEverywhere.WebApi/PokemonEverywhere.WebApi.csproj --launch-profile "https"
HTTPSエンドポイントに接続すると、証明書が無効であることに関するエラーが発生する場合は、サーバーを停止し、 dotnet dev-certs https --trustを実行します。これにより、パスワードを促す可能性があります。次に、上記のコマンドを再度実行してサーバーを実行します。
オプションで、devtunnelをセットアップして、エミュレータ/シミュレーターからサーバーに接続できます。
これを行うには、devtunnelsをインストールし、 devtunnel host -a -p 7055を実行します。ポート7055はこのプロジェクトのデフォルトです。他の何かを使用することを選択した場合は、ポートを更新してください。ブラウザから生成されたURLに1回ナビゲートして警告メッセージを確認します。その後、クライアントアプリプロジェクトからURLに接続できます。
すべてのプロジェクトは、IDEまたはコードエディター、またはコマンドラインを介して実行できる必要があります。
たとえば、コマンドラインの使用からBlazorクライアントプロジェクトを実行する
dotnet run --project PokemonEverywhere.Blazor/PokemonEverywhere.Blazor.csproj --launch-profile " https "または、コマンドライン使用からWindowsで.NET MAUIを実行する
dotnet build PokemonEverywhere.Maui/PokemonEverywhere.Maui.csproj -t:Run -f net8.0-windows10.0.19041.0Visual Studioで、お気に入りのプロジェクトをスタートアッププロジェクトとして設定し、実行を開始してください!
VueHybridプロジェクトを実行する前に、必ずNPMをインストールして、 Pokemonevery.vueフォルダーを実行してください。
npm i
npm run build