HabraKvestはASP.NET CoreとAngular2で作成します

新しいフレームワークがリリースされるたびに、私はそれを試して、その上にアプリケーションを作成したいと思います。 前回 、クエスト形式はうまくいきました。 したがって、ほぼ1年半の間に変化したものを見て、別のクエストを書くことを提案します。フレームワークが表示され、プレイできます。

結果：

-ソースを見ることに興味がある人のためにgithubで並べ替えます

-何が起こったかに興味があるか、別の論理的なクエストに時間を費やす人のためのクエストへのリンク 。



猫は、プロジェクトの作成から展開までの完全なプロセスを説明しています。

前提条件

ほとんどすべてのIDEまたはテキストエディターは、ASP.NET CoreおよびAngular2での作業に適しています。 もちろん、ASP.NETの完全なデバッグにはVisual Studioが必要ですが、開発用の新しいコアバージョンのリリースでは必要ありません。Sublime\ Atom \ ...のコードを操作し、コマンドラインからアプリケーションを実行できます（SDKのインストール後）。

dotnet run
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ソースコード、インストーラー、インターフェイスコマンドラインのドキュメントNETおよびSDKは、次の場所にあります。

dotnet.github.io

さらに、これらはすべてWindowsだけでなく、Max、Linux、Dockerでも使用できるようになりました。



多くの人が見たときにおそらく認知的不協和音を経験するでしょう

 sudo apt-get install dotnet-dev-1.0.0-preview2-003121
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プロジェクトを作成する

新しいASP.NETコアアプリケーションを作成するには、いくつかの方法があります。

1） Visual Studioを使用する

2）コンソールから-dotnet new

3）サードパーティのジェネレーターを使用します。



特に空のアプリケーションは必要ありませんが、Angular2が接続されており、できればビルドスクリプトが構成されているため、プロジェクトの作成と構成のすべての問題を掘り下げることはしません。

ASP.NET Core JavaScriptサービス github.com/aspnet/JavaScriptServicesはこれに理想的です。これにより、Angular 2、React、Knockoutの選択したJavaScriptフレームワークでASP.NET Coreアプリケーションを作成できます。

これを行うには、ASP.NET Core、Node.js、およびaspnet-spaテンプレートを備えたyeomanジェネレーターが必要です。 後者は次を使用してインストールできます。

 npm install -g yo generator-aspnetcore-spa
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

新しいプロジェクトの作成は、最終的には

 cd <__> yo aspnetcore-spa
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Angular2テンプレート、プロジェクトの名前、 ジェネレーターを選択し、構造全体、依存関係などを作成します。 （これには数分かかる場合があります）。

最初は、特にあなたが後者のファンではない場合、またはフロントエンドでほとんど作業していない場合、このジェネレーターが使用するライブラリが多すぎるように見えるかもしれません。 しかし、個人的には、これは最もバランスのとれたパターンの1つであるという意見です。 特に、次のプロパティを強調したいと思います。

TypeScript

もちろん、シンプルなJavaScriptを使用してAngular2でアプリケーションを開発できます。TypeScriptを使用すると、OOPの入力構文、オートコンプリート、使い慣れた（ほとんどの）構文を使用できます。 また、Angular2チームはTypeScriptを積極的に使用しており、TypeScriptはAngular2の公式のデフォルト言語ではない（または既に使用されている）ようです。

Webpack

フロントエンドツールの戦いでは 、 webpackがすぐにお気に入りになりつつあるようです。 絶え間ないコード変更を伴う機能に注目することが特に重要です。 実際、開発者は、Hot Module Replacement（ HMR ）を使用してプロジェクトを絶えず再組み立てし、ページを更新することを忘れることがあります。 1台のモニターでフロントエンドを記述しようとした後、2台目のモニターでは目の前で変化しているので、ホットスワップの可能性なしに楽器に戻る気がしません。

その他のボーナス

サーバーの事前レンダリング、遅延読み込み、開発ビルドと本番ビルドでの便利な作業。

JavaScriptServices開発者の1人のブログで詳細を読むことができます。

blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core

または、ASP.NETチームの最後の公開スタンドアップの1つの実際の例を参照してください。

プロジェクトをまとめる

前述のとおり、プロジェクトをビルドして実行するには、コンソールコマンドを使用できます。

 dotnet run
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、サイトが構築され、ローカルで起動されます。





または、Visual Studioから同じことを行います。

ビルド後に、すべてのnpmモジュールがインストールされていないという通知がある場合、



ほとんどの場合、これはモジュールの1つがWindowsでサポートされていないという問題ですが、依存関係は必須ではないため、アプリケーションは正常に動作するはずです。



その結果、3つの単純なページを備えた実用的なアプリケーションが必要になります。

仕事を始める

フレームワークの以前のバージョンと比較した主な違いを考えてみましょう。

プロジェクト構造

JavaScriptServicesプロジェクトの構造はWebパック指向のようです。 つまり、それぞれnpm + webpackであり、gulpとbowerはありません。 私の知る限り、bowerはJavaScriptライブラリーに多くの依存関係がないため、スタートアッププロジェクトに追加しないことに決めました。npmはすべてを処理します。 そして、すべてのgulp （またはうなり声 ）機能がwebpackによって実行されるようになりました 。



ファイル構造に関しては、サーバーファイルに関してはすべて以前と同じですが、フロントエンドでいくつかの違いがあります。 たとえば、静的なwwwrootファイルがあるフォルダーには、実際にはすべてのJavaScriptがコンパイルされるdistフォルダーのみがあります。

Angularの最初のバージョンと比較すると、表現とコントローラーが存在しないことは驚くべきことです。すべてがコンポーネント内にあり、コンポーネントの各HTMLパーツにはTypeScriptパーツがあります。

プロセスの特徴

もちろん、Webpackはモジュールのホットスワップに関して非常に満足しています。このため、フロントエンド部分の開発ははるかに快適です。

また、WebPackエラーはASP.NETレベルですでに完全に表示されており、非常に便利な統合であることに注意してください。 確かに、誤った状態（たとえば、存在しないコンポーネントのプルアップ）の後、ホットスワップは機能しませんでした。そのような場合でも、ページを手動で更新する必要があります。



また、ブラウザでTypeScriptを借方記入できることも非常に便利であり、これらはすべてデフォルトですでに組み込まれています。





まず第一に、必要なものに例を使ってページを書き直しました。 Angular2とTypeScriptについての私の知識がゼロに近いという事実にもかかわらず、それは非常に簡単であることが判明しました。 一般的に、新しいAngularの構文は、少なくとも一見すると非常に読みやすいようです。 また、TypeScriptでインターフェイス、クラス、およびタイプを記述する機能により、非常に理解しやすくなります。

単純なコンポーネントの例：



TypeScriptを初めて目にするほとんどの開発者は、ここで何が起こっているのかをすぐに理解すると思います。

エンティティフレームワークとデータベース

Entity Frameworkの以前のバージョンに精通している場合、Entity Framework Coreに問題はないはずです。 極端な場合は、 docs.efproject.net / en / latest / intro.htmlでドキュメントを表示できます



まず、EF自体と、データベースを操作するためのツール用のnugetパッケージを配置します（後者のバージョンはまだ安定していません）。

 Install-Package Microsoft.EntityFrameworkCore.SqlServer Install-Package Microsoft.EntityFrameworkCore.Tools –Pre
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

github.com/gbdrm/HabraQuest/commit/959f4cb6c253dad0cc5e6eb34756ee5cc9c920f9



次に、ツールコマンドをproject.jsonに追加して、これを行い、それを開き、 ツール設定を見つけて追加します

 "Microsoft.EntityFrameworkCore.Tools": "1.0.0-preview2-final",
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おそらく、テンプレートツールに既に追加されているでしょう。 その後、何も変更する必要はありません。



アプリケーションのモデルクラスとDbContextを追加し、それらをStartup.csに登録します。

そしてもちろん、 appsettings.jsonの ConnectionStringを使用し 、 Startup.csに構成コードを追加します。

github.com/gbdrm/HabraQuest/commit/7411eb4262bdef9f5fb810f6cf7d5a239221c0b5



次のステップである移行に関する典型的なストーリー-最初の移行を追加し、データベースに更新を依頼します。

 Add-Migration Initial Update-Database
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ベースはまだ存在しないため、2番目のコマンドの後に作成する必要があります。 これは、VisualまたはSQL Management Studioを使用してSQLサーバーに参加する場合に存在するデータベースを調べることで確認できます。

github.com/gbdrm/HabraQuest/commit/09b42dc0a8e45da1f461b38c2b41d79c4fc0b88a



Homeコントローラーに簡単なメソッドを追加して、データベースへの接続を最小限に使用してみましょう。 メソッドを追加して、トークンを返す新しいプレーヤーを作成します。

github.com/gbdrm/HabraQuest/commit/e67a322184517aa929d1347f6fd638c6290bf9d3



アプリケーションを実行したら、アドレスの最後に/ home / registernewplayerを追加して、このメソッドをテストできます。 その結果、プレーヤーのトークンを取得する必要があります。

Angular 2の最初のステップ

すでにプリミティブバックエンドを作成しているため、クライアントで使用することができます。 以下を試してみましょう。

新しいユーザーがページにアクセスしたとき-トークン付きのCookieがあるかどうかを確認し、ない場合はサーバーからユーザーに尋ねます。 独自の自転車を作成しないようにするには、既存のCookieライブラリを使用してみてください。 たとえば、 ng2 cookies 。

これを行うには、ホームコンポーネントにインストールして接続する必要があります。

github.com/gbdrm/HabraQuest/commit/8c7aadd9607a0c4d0a1039707b08b0c4b720112c



JavaScriptと最初のAngularのステレオタイプの激しい戦いの私の数時間を説明するのは難しいです。 フレームワークの2番目のバージョンでは、すべてが完全に異なっていることが判明しました。 これは、サービスをまだ使用しないことにしたという事実で終わったとしか言えません（Angular 2で積極的に使用されているrxjs observableに最初に対処することにしました）、候補の次のリリース（4番目）までパッケージを更新し、新しいフォームを追加しました（それらは大幅にやり直され、このプロセスはまだ終了していません）、可能な限りコードを簡素化することにしました（1つのコンポーネントのロジックのほとんど）。 最初に何かを行う必要があります。次に、良い習慣について考えます。 また、サーバー側にいくつかのスタブを追加しました。

github.com/gbdrm/HabraQuest/commit/60c8239a89cae2357d0521973e091781027186ba



興味深い機能のうち、スタジオまたはリシャーパーがTypeScriptの正しいインポートを強化できるかどうかにかかわらず、メソッドの標準ナビゲーションもほとんどの場合に機能します。 この種の特性のために、クライアント側のコードを書くことははるかに快適になり、どこかに落ちる可能性のある種類のスクリプトを書いているという感覚はなくなります。 代わりに、基本的な構文要素が自動的にチェックされ、すべてが途中で壊れないという確信があります。 また、破損した場合でも、webpackレベルで別のチェックが実行され、その結果、再起動しなくてもページにエラーが表示されます。





確かに、ファイルを保存するたびにページが再描画を開始すると、時々緊張し始めます。 しかし、これは習慣の問題だと思います。



次のコードはすべて特に重要ではありません。 基本的に、これはくぐもった瞬間の実装です。 視聴にまだ興味がある場合は、 github.com / gbdrm / HabraQuestからソースを入手できます。

展開

バックエンドは.Netで記述されているため、Azureにアプリケーションをデプロイします。 ちなみに、過去1年半にわたって、ここでたくさんの変更があります。初めて何をどこで理解するかはわかりません。 このアプリケーションでは、データベース（Webアプリ+ SQL）を使用して最も基本的なサイトを作成するだけで十分です。

展開では、いつものように、非常にスムーズではありません。 まず、エラーなしで失敗することはありません。 サイト自体は機能しますが、最終的に、Visual Studioは一部の外部TypeScriptモジュールでエラーを表示します。 これまでのところ、私はそれが何であるかを理解していません。 次に、サイトを開くと、「TaskCanceledException：タスクがキャンセルされました」というエラーが発生します。 これもまだ完全には明らかではありませんが、問題はホスティングレベルのどこかにあるようです。 そしてこれに加えて、私はマイグレーションで少し遊んだ。



概して、私はこのステップに満足していました。 非常に詳細でわかりやすいログ。すべてを構成できます（ベース、移行）。 ただし、最初は、すべてが構築されてコピーされるまで、しばらく（数分）待つ必要があります。 とにかく、私が理解している限り、最初はすべてがローカルにコピーされ、それから既にAzureに転送されているプロセスは非常に複雑であるように見えますが、これらは詳細です。

結果、結論

すべてが計画通りになりました。 私は新しいフレームワークに個人的に満足しています。喜んでそれらに切り替えました。 もちろん、まだあまり安定した点はありません。Angular2はまだ正式にリリースされていません。 しかし、すべてがすでにかなり面白く見えており、最も重要なことには、機能しています。

ツールの開発、ページの更新、データベース構造の制御など、日常的な作業を減らすことができる開発アプローチに非常に満足しています。

また、多くのブログ、質問、ドキュメントがオンラインにあるので、典型的な問題の解決策はすでにすべてシンプルになっているはずです。



すべての結果は次の場所にあります。

github.com/gbdrm/HabraQuest

habraquest.azurewebsites.net



多くの異なるトピックがあるので、かなり厄介であることが判明しました。 そのうち、あなたが最も説明に興味を持っているのはどれですか？