この記事は、シアトル市立大学のための私のcapstoneに基づいています。 私の研究のタイトルは”完全なスタック開発のソフトウェア文書化とアーキテクチャ分析”です。 私の研究の目標は、オープンソースプロジェクトと完全なスタック開発を理解する上での学習曲線を減らすことでした。 Lucidchartを使用して、理解を容易にするために、次の図を作成しました。 これらのUML図は、4+1アーキテクチャビューモデルに基づいていました。

• レストランのアナロジー
• シーケンス図を使用したプロセスビュー
• シーケンス図を使用したシナリオ
• 展開図を使用した物理ビュー
• パッケージ図を使用した開発ビュー
• クラス図を使用した論理ビュー

研究は、展開と要求と応答の流れに焦点を当てました。

平均スタックは、フルスタックのJavaScriptオープンソースソリューションです。 これは、MongoDB、Express、Angular、およびNodeで構成されています。js”を発表した。

その背後にあるアイデアは、これらのフレームワークを接続する際の一般的な問題を解決し、日々の開発ニーズをサポートする堅牢なフレームワークを構築し、開発者が一般的なJavaScriptコンポーネントを使用しながらより良いプラクティスを使用できるようにすることです。

ノードとのバックエンド。js

ノード。jsは非同期I/Oを処理するために構築されていますが、JavaScriptにはクライアント側のイベントループが組み込まれています。 これはノードになります。jsは他の環境と比較して高速です。 しかし、イベント駆動型/コールバックのアプローチは、ノードを作ります。jsを学び、デバッグするのは難しいです。

ノード。jsには、MongoDBオブジェクトモデリングであるMongooseやExpress web application frameworkなどのモジュールが含まれています。 ノードモジュールを使用すると、抽象化を達成することができ、平均スタックの全体的な複雑さが軽減されます。

Expressフレームワークとバックエンド

Expressは、ノードのためのミニマリストと非初期化されたアプリケーションフレームワークです。js”を発表した。 ノードの上にあるレイヤーです。ノードを隠すことなく、webおよびモバイル開発のための豊富な機能を備えたjs。jsの機能。

フロントエンドAngular

Angularは、開発者にWebアプリケーションのクライアント側を作成するための堅牢なツールを提供するTypeScriptで構築されたweb開発プラッ

これは、ユーザーの行動や好みに基づいてコンテンツが動的に変化する単一ページのwebアプリケーションの開発を可能にします。 これは、コンポーネントが変更されるたびに、それに関連する他のコンポーネントが自動的に変更されることを保証するために、依存性注入を備えていMongoDBは、Bjson（バイナリJavaScriptオブジェクト表記）でデータを格納するNoSQLデータベースです。

MongoDBはノードのデファクトスタンダードデータベースになりました。異なる層（フロントエンド、バックエンド、およびデータベース）間でデータを送信するためにJSON（JavaScript Object Notation）を使用して、”JavaScript everywhere”パラダイムを実現するjsアプリケーシこれらの基本を理解したので、これらの図を見てみましょう。

Restaurant Analogy

急な学習曲線に取り組みたかったので、ユーザーが完全なスタックアプリケーションで要求と応答のプロセスを理解して保持できるように、restaurant analogyを選択しました。

顧客（エンドユーザー）はウェイター（コントローラ）を介して注文を要求し、ウェイターは注文ウィンドウ（サービス工場）でその要求を人に渡します。

これらの三つのコンポーネントは、フロントエンドサーバーを構成します。 サービスファクトリは、バックエンドのcook(コントローラ)と通信するためのファクトリになります。 その後、料理人は冷蔵庫（データベースサーバー）で必要な食材（データ）を取得します。

冷蔵庫は、バックエンドのコックに必要な材料（データ）を提供することができます。 これで、cookはそのデータを処理し、フロントエンドのサービスファクトリに送り返すことができます。

コントローラ（ウェイター）は、準備された食事を顧客（ユーザー）に引き渡します。 これで、顧客は食事（データ）を消費できるようになります。P>

シーケンス図を使用したプロセスビュー

誰がそれを使用しているか、それが示すもの:

• インテグレータ
• パフォーマンス
• スケーラビリティ

プロセスビューでは、最初にフロントエンドサーバーとバックエンドサーバーを別々に表示し、データベー 最初の例では、AngularアプリケーションがハードコードされたJSONをservice.tsファイル（サービスファクトリにあります）にデプロイされました。Angularアプリケーションは、サードパーティのApiと通信してデータを取得し、ユーザーに表示することができます。p>

私たちのバックエンドでは、ノード。jsアプリケーションの例は、処理して応答として使用できるハードコードされたJSONから始まります。

このバックエンドは、サードパーティのApiやデータベースサーバーに接続してJSONを取得し、処理し、リクエスタに送り返すことができます。

フロントエンドサーバー、バックエンドサーバー、およびデータベースサーバープロセスについて説明し、以下の3つのサー

http要求が行われると、フロントエンドがトリガーされ、angularが要求を受け取ります。 リクエストはAngularで内部的に渡され、RouteはビューのリクエストをView/Templateに送信します。

View/Templateはコントローラを要求します。 コントローラは、Restful(Representational state transfer)エンドポイントへのHttp要求をサーバー側(Express/Node)に作成します。js”を発表した。 要求はExpress/Nodeで内部的に渡されます。コントローラ/モデルへのルートからのjs。 コントローラ/モデルは、Mongoose ODMを介してMongoDBを持つデータベースサーバーと対話するように要求します。 MongoDBは要求を処理し、コールバックをExpress/Nodeに応答します。js”を発表した。

エクスプレス/ノード。jsはJson応答をAngularコントローラに送信します。 Angular Controllerはビューで応答します。

シーケンス図を使用したシナリオビュー

誰がそれを使用するか、それが示すもの：

• オブジェクト間およびプロセス間の相互作用を説明

上記のシナリオでは、ユーザーがアクセスする必要がありますブックストアアプリケーション。 ユーザーがURLを入力すると、JavaScriptが実行され、AppRoutingModuleであるフロントエンドサーバーのルーターにヒットします。 AppRoutingModuleはBooksComponentを呼び出し、fetchbooksを依存性注入としてロードします。

fetchbooksは、要求を処理し、データベースサーバーを照会するためのルーター、コントローラー、およびモデルを持つバックエンドサーバーへのHTTP要求を作成します。

データベースサーバーがクエリを処理し、バックエンドサーバーが待機している状態でデータを取得し、JSON応答としてフロントエンドサーバーに送り返します。

フロントエンドには、ユーザーに表示するデータとテンプレートビューが表示されます。

展開図を使用した物理ビュー

誰がそれを使用し、それが何を示しているか:

• システムエンジニア
• トポロジ
• 通信

展開図は、フロントエンド、バックエンド、およびデータベースの3つのサーバーを示しています。 フロントエンドでは、Angularアプリケーションはブラウザベースのwebアプリケーションであるため、ブラウザが必要です。

バックエンドサーバーがノードをホストします。ノードの上にExpressを持つjs。js”を発表した。 Expressでは、その上にアプリケーションとMongooseがあります。 Expressは、フロントエンドとデータベースの両方で通信を処理します。 データベースサーバーにはMongoDBのみが含まれています。 JSONを使用してサーバー間で通信します。

MEANスタックの最初のビルドでは、ローカルマシン（localhost）を使用してローカルにデプロイし、フロントエンドサーバー、バック

次のデフォルトポートを使用します：Angular-port4200、Node。js/Express-ポート3000、およびMongoDB–ポート27017。

以下の図は、uml表記での完全なスタックwebアプリケーションを示しています。

実際の生産にさらに移動し、クラウドに移行することは、私たちのデータベースです。 MongoDBの場合、クラウドソリューションとしてMongoDB Atlasを選択しました。実稼働デプロイメントの最後のステップは、フロントエンドコードをAmazon S3にアップロードし、AWSを使用したEC2インスタンスにバックエンドをアッ これらはすべて、HTTP/HTTPSエンドポイントで相互に通信します。P>

UML表記を使用せずに本番展開を示す別の図です。

パッケージ図を使用した開発ビュー

誰がそれを使用し、それが示すもの：

• プログラマ
• ソフAngularアプリケーションは、すべてのangularコンポーネントがappmoduleにインポートされていることを示します。 AppModuleとAppRoutingModuleはBooksComponentに依存しています。 BooksComponentは、BookDetailComponentDialogおよびApiServiceに依存します。
  

  

  ノードのパッケージビュー。jsアプリケーションは、すべての書籍の取得、本の取得、本の更新、本の削除などのすべてのCRUD操作（コントローラ）がアプリによってインポートされることを示 また、すべてのCRUD操作ロジックはモデルブックにあります。p>

  

  クラス図を使用した論理ビュー

  誰がそれを使用し、それが何を示していますか:

  • エンドユーザー
  • 機能

  ブックストアアプリケーションは、Bookと呼ばれる単一のクラスのみを展示しました。 クラスのメンバーは、タイトル、isbn、著者、写真、価格です。 メソッドは、addBook、fetchBooks、fetchBook、updateBook、およびdeleteBookです。

  

  JSON形式のモデルブックの構造。

  ここでは、図のためのいくつかのビデオがあります:

  Documentation available on my GitHub:

  clarkngo/cityu_capstone

  Contribute to clarkngo/cityu_capstone development by creating an account on GitHub.

  clarkngoGitHub

  

  Find me on LinkedIn. =)