[アジャイルソフトウェアエンジニアリングチームのブログ]技術仕様を
| プロジェクト | コンテンツ |
|---|---|
| 春2020コンピュータソフトウェア工学研究所（ロジャー・レン建） | パーククラスのブログのブログ |
| 運用要件 | 技術仕様 |
| このコースでの我々の目的は、 | チームワークで自分自身を行使する |
| 私たちは私たちの目標達成を支援ジョブの特定の局面において | 機能仕様と命令の技術開発 |
概要＆技術スタック
アウトライン
私たちのプロジェクトでは、さらにデザインやGitLabベースのソフトウェア工学教育実習プラットフォームを改善するために、デザインを卒業羅Jidong先輩を続けています。ソフトコースの個々のプロジェクトの仕事、プロジェクトチームとプロジェクト管理のための結び目のすべてで一つの解決策。
テクノロジー・スタック
GitLab関連
OAuthのアプリケーションgitlab：ログインサービスを提供しています。
GitLab API
-
ランナーCI + gitlab gitlab：すべてのコードの変更は、自動的にテストをコンパイルし、その結果をGitLabに送り返されています。
-
+ウェブフックシステムをフック、（例えば、プロジェクトの作成、コード、チェックインなど）のモニタ様々なイベントが、指定されたURLにレポートを送信分析のための生徒と教師のための生データを提供します。
バックエンド
Ruby on Railsに
- HAML：Webページをレンダリングします。
- バンドラー：提供GEMバックグラウンドアプリケーションの依存関係の管理。
- nginxの：Railsはリバースプロキシサービスを提供します。
- Webpacker：Vue.jsと一体化したフロントエンドフレームMVVMレール。
データベース
sqlite3の / PostgreSQLの：宝石自由に切り替えることで、開発/生産デュアルデータベースのサポートを提供します。
フロント
Vue.js
-
UIエレメント：、図面ページをフロントエンドUIコンポーネントライブラリを提供します。
-
Echarts：視覚的な図を提供するには、同様に構築バーンダウンチャートをサポートしています。
-
糸は：パッケージ管理ツールを提供します。
-
WebPACKの：フロントエンドモジュール式の管理。
-
バベル：JavaScriptのコードをコンパイルします。
プロダクトデザイン
アーキテクチャ
マクロアーキテクチャ
マクロアーキテクチャ設計
インタフェース仕様（仮）
| ＃ | リクエストメソッド | リクエストパス | ルーティングポイント | 使用 |
|---|---|---|---|---|
| 1 | post |
/system |
system#index |
添加システム全体のウェブフック |
| 2 | post |
/webhook |
webhook#index |
各プロジェクトのウェブフックに追加 |
| 3 | post |
/report |
report#index |
試験結果の自動受け入れはインターフェイスを報告します |
| 4 | get |
/login |
sessions#login |
OAuthの認証ログイン |
| 5 | get |
/oauth/callback |
sessions#login |
OAuth認証ログインアプリケーション |
| 6 | get |
:issues : all |
issues#all_issues |
全量 issues |
| 7 | get |
:projects : kanban |
boards#index |
かんばんプロジェクト |
| 8 | post |
:projects : uploads |
uploads#index |
ファイルのアップロード |
| 9 | get |
:projects : labels |
projects#labels |
プロジェクトのラベルを取得します。 |
| 10 | get |
:projects : members |
projects#members |
プロジェクトメンバーを取得します。 |
| 11 | get |
:milestones : kanban |
boards#index |
進捗グラフを取得します。 |
| 12 | get |
:milestones : burndown |
burndown#index |
取得バーンダウン |
| 13 | post |
:classroom : feedback |
auto_test_projects#feedback |
申請者リスト |
| 14 | post |
:classroom : trigger |
auto_test_projects#trigger |
アプリケーションを承認 |
| 15 | get |
:team_projects : raw |
blogs#show_rawn |
RAWファイルを表示します |
| 16 | get |
:team_projects : insight |
insight#show |
ブラウザアクション |
| 17 | get |
:blogs : raw |
blogs#show_raw |
ショーは、RAWファイルをブログ |
| 18 | get |
member: join |
classrooms#join |
学生が参加します |
| 19 | get |
member: exit |
classrooms#exit |
学生出口 |
分析
抽象とデカップリング
我々のシステムは、主Vue.js他のフロントエンドフレームとレールフレームワーク上にバックエンドルビーに基づいています。このセクションでは、私たちは前に、私たちのシステムでは下から上へ順によるモジュラー抽象化に合わせて、高凝集し、低カップリングを実現してます。
-
デカップリングデータベースとバックエンドのフレームワーク
-
エンティティを対応のRuby on Railsのフレームワークデータベースは、データベースの変換を作成し、操作するためにデータベース記述言語（DDL）データベース操作言語（DML）を使用して、Rubyでオブジェクトに変換され、ルビーにオブジェクト・エンティティは、方法の一例に相当しますこれは、呼び出します。
-
一般的なデータベースの種類ごとに、Ruby on Railsフレームワークは、より包括的で信頼性の高いサポートを提供することができます。あなただけがする必要があり
Gemfile、たとえば、宝石のファイルに依存することができますプロジェクトを指定します：group :development do gem 'sqlite3' end group :production do gem 'pg' end図から分かるように、軽量データベースsqlite3のための便利で実用的な我々の開発環境で、本番環境のPostgreSQLで使用されます。
-
Ruby on Railsフレームワークで直接SQLデータベースクエリ言語の機能を提供しますが、データベースを変更するとき、私たちは、さまざまなSQLデータベース言語処理システムと原因の問題との違いを避けるために、このメソッドに発生する使用しないでください。
-
以上の考察に基づいて、我々は我々が開発し、生産環境は、我々はスイッチへのより多くの自由を達成することができますのでことを、データベースおよびバックエンドのフレームワークの完全なデカップリングを実現しました。例えば、プロジェクトディレクトリに
config/database.yml、あなたは自由に使用しているデータベースの開発環境と本番環境を設定することができます。development: <<: *default adapter: sqlite3 database: db/development.sqlite3 production: <<: *default adapter: postgresql encoding: unicode database: teach username: deploy password: <%= ENV['TEACH_DATABASE_PASSWORD'] %>新しいデータベースに切り替えた後、単に実行し
rails db:migrate、自動的にデータベース・エンティティを展開し、柔軟性が非常に強いです。
-
-
内部バックエンドのデカップリング
- 、モデルであるMVCデザインパターン、ビュー、コントローラを使ってRuby on Railsフレームワーク。ここで、対応するエンティティのためのモデルとデータベース、コントローラのビューを受信するための処理、ユーザーの要求にコントローラの応答をルーティングするための、そして最終的にユーザに提示ページをレンダリングします。
- まず、要求は、（にルーティングテーブルのセットに従ってユーザの問題
config/routes.rb）、パラメータと対応するコントローラに要求を渡し、コントローラは、ユーザが方法限り、必要なときに呼び出すことができ、そのメソッドを呼び出す方法を気にする必要はないルーティングに適切な権利を与えます。モデルはで対応すると対話する必要があります。その後、限り対応ページビューに変数を渡すために必要なレンダリング情報としてビュー、ビューをレンダリングする方法を心配することなくバックエンドとフロントエンドのデカップリングを達成することができます。
-
デカップリングの前端部の後端
- 上述したように、ビューセクションはコントローラによって送信されたパラメータのみを受信し、ページに対応するパラメータこのレンダリングに基づきます。コントローラは、ページをレンダリングするためにビュー何を気にしません。インタフェースと実装の良好な分離を達成するために、このデザイン。
- 通常、埋め込まれたRubyの文でHTMLページを使用して（
*.html.erb）、フロントページのコードをよりシンプルかつエレガントな作りに向けた我々のプロジェクトにHAML（HTML抽象マークアップ言語）を使用。私たちは、フロントフレームとしてVue.jsとElementUIを使用しています。
図に示すように、システム全体のモデル構造。
GitLabのカリキュラムと対話するための分離プラットフォーム
メインコースプラットフォーム（つまり我々のプロジェクトの主要部分）の分析に別々の内部と対話します。私たちのプロジェクト以来でGitLabに統合されているので、このセクションでは、我々はプロジェクトとGitLabプラットフォーム間の分離との相互作用に焦点を当てています。
ウェブフック
ウェブフックはこれにコードプッシュ、作成または変更の問題を含む特定のイベントによってトリガされる「ユーザ定義のHTTPコールバック」です。プロジェクトの範囲内でウェブフックの崩壊後、良いウェブフックのconfigureコールバックURLのプロジェクトの統合セット、コードのプッシュや、イベントなどの変更の問題で毎回発生し、GitLab URLは、URLに関連するデータを送信するためにPOST要求を開始します（プッシュ・イベントがトリガされたとき、そのような送信のようなデータは、このプッシュコミット）。ソフトウェアエンジニアリングの実践教育プラットフォームは、学生の論文を達成し、それによって貢献レポートを形成し、登録ウェブフックを介して情報を追跡する問題をコミットします。
システムフック
ウェブフックとは異なり、GitLabシステムフックはGitLabを削除する場合、システムフックが呼び出されますプロジェクトは、グループが作成、更新、作成、削除するには、更新、削除、更新のユーザーを作成するには、グローバルレベルのフック、登録を呼び出すための方法です（ようなプロジェクトを作成するときにプロジェクトデータの送信など）現在のイベントを送信するためのデータのURL。ソフトウェア工学の実践教育プラットフォームは、ウェブフックを追加し、プロジェクトの作成を追跡することによって、システムのフックに署名します。
分離・分析と対話
当社のプラットフォームは、上記のウェブフックとシステムフックを達成によりGitLabからとの対話の情報を取得するために主にあります。また、当社GitLabフロントエンドのコードは、ダッシュボードパネルGitLabに当社のソフトウェア・エンジニアリング・プラットフォームの入り口を見ることが可能となって、小さな場所を変更されています。このように、我々は、ソフトウェア工学コースのGitLab二つの部分のプラットフォームと生産プラットフォームは、2つの平らなレベルのモジュールのAPIは、モジュール間の緩やかなデカップリングを達成するために、お互いを提供するために、お互いを呼び出す、モジュール間の関係を呼び出します。
大量のデータの適応性
私たちのプロジェクトに適応大量のデータは、二つの側面に焦点を当てています。一方、システムと動的ユーザ相互作用である上に、一方で、静的なユーザ情報です。
静的なユーザー情報
ここでは、オンラインのいくつかの参照情報を見てください。私たちのシステムは、当社の加入者の増加は、通常、学期単位は、私たちによるので、教育ソフトウェア工学の使用に沿ったものであることを考えると、以前のブログの分析、当社の加入者の増加は早すぎる比較的遅く、ありません大（約1000の順に）、したがって、この部分は、我々は考慮に注力したいものではありません。ここでは、以下に示すように、プロジェクトの我々の分析と組み合わせて、仕上げからオンライン情報を収集します。
-
データベースの別々の読み取りと書き込み
- この機構は、大規模なデータIOに適しており、パフォーマンスのボトルネックを読み出す場合があります。例えば、我々は、それ自体を使用GitLabを達成するために、Ruby on Railsフレームワークに基づいており、設計のためのレールとアジャイル開発にRubyは、しかしながら、一つの欠点は、速度に対応する大量のデータが遅くなる場合、例えば、我々はGitLab倉庫から引くことです読み取りと書き込みのパフォーマンスのボトルネックにつながることができますあまりにも引きながら、学生はコードを取るとき。
- プライマリ・データベースと複数のスレーブデータベースを設定し、メインのライブラリは、書き込み動作、読み、オフ圧力を共有し、するためのライブラリ責任からの読み出し動作のための責任があります。
-
分散型サーバー
-
などGitLab配信プラットフォーム、さらに強化され、並列含む分散サーバーをご紹介します。
-
負荷分散は、nginxのによって管理されているか、他のソリューションは、我々のシステムでnginxのリバースプロキシを使用されています。
-
動的なユーザインタラクション
私たちのプロジェクトでは、学生の評価を自動化し、促進することができるようにするために自動的にデプロイされた、私たちは、生徒たちが主にGitLabランナーを使用し、その継続的な統合プロジェクトを、達成するために、GitLab CIを導入しました。ゴーGitLabランナーは、オープンソースプロジェクトの言語発達に基づいており、それは一緒GitLab CIで使用され、CIは、タスクを実行するために使用され、その結果が戻ってタスクCI GitLabに送信されます。GitLabランナーは、限り、あなたはランナーIPを作成するときにアドレスが、このデザインは、同時に私たちの学生のためであるので、展開プロジェクトの数が多いことができ、または評価のランナーのための十分な時間を確保するための構成GitLabとして、複数のサーバ上で実行することができますので、並列処理の改善、スタックは、ユーザーの待ち時間を短縮します。
情報パッケージと隠し
Ruby on Railsに
Ruby on Railsフレームワークに基づいて、当社のバックエンド。隠された情報を持つパッケージは、主に、パッケージとアクセス制御クラスを介して達成されます。ルビーは非常にオブジェクト指向言語として知られているその設計原理の一つである「すべてがオブジェクトです。」前述したように、我々は、Ruby on Railsフレームワークに情報データベースエンティティ・オブジェクト・インスタンスをパッケージ、アクセスはメンバ変数とオブジェクトインスタンスのメソッドによって制御され、パッケージが隠された情報と、基礎となるデータベースのために実現することができます。Ruby on RailsフレームワークとMVCデザインパターンの応用は、カプセル化し、非表示の情報への大きな助けを提供します。
GitLab
当社のプラットフォームはGitLabのコースに組み込まれています。GitLabのデザインは、当社のプラットフォームは、パッケージと隠されたGitLab内部情報を実現するように、内部の詳細との関係GitLabの仕事が、それと相互作用するGitLabのAPIインターフェースによってのみ開かれていない、非常に成熟してきました。
Vue.js
Vueが構築するために使用されるユーザインターフェースであるプログレッシブフレームを。他のフレームの差がヴューが層によってボトムアップ層から印加されるように設計されて、大きいです。唯一のビュー層の上にVueのコアライブラリの焦点は、だけでなく、使いやすいだけでなく、簡単なサードパーティ製のライブラリまたは既存のプロジェクトを統合することです。一方、現代のツールチェーンとさまざまなサポートライブラリと組み合わせて使用し、Vueのも複雑な1ページのアプリケーションのためにドライブを提供することが十分に可能。
Vue.jsに主に基づいて、我々のフロントエンドフレームワークは、Vue.jsフレームワークの概念は、異なる機能が異なる構成要素中に封入することができ、他のコンポーネントを呼び出すために対話型インタフェースを提供することができ、非常に重要な要素です。一方、また、我々は助けることはできませんが、フロントエンドにCSSカスケーディングスタイルシートとJavaScriptを使用します。もちろん、我々は、このようなHTMLページのように、スタイル設定のために回避しようとしますdivタグを指定したstyle、または設定buttonラベルをonclickJSファイルの方法のために、というように。代わりに、我々は、HTMLページの清浄度を確保しようと、厳格なCSSやJSでパッケージを文書化します。
柔軟性
- 一方で、原因デカップリングデータベースフレームワークを実現するためのRuby on Railsのフレームワークを使用することに我々のプロジェクト、前に述べたように、それはデータベースの交換に強い柔軟性を持っています。あなたがいる限り、異なるデータベースを使用する必要がある場合に
Gemfile行う、その後、対応する宝石のパッケージの依存関係データベースの増加bundle install自動的に使用して、すべての依存宝石のパッケージをインストールrails db:migrateするデータベースの移行を。 - 一方、我々はプロジェクトをデプロイする柔軟性を持っています。私たちは、Webpackerを使用しました。Railsアプリケーションの使用、管理、および簡単にJavascriptをパッケージ化Webpacker、開発およびフロントエンドコンポーネントのデバッグを容易にします。私たちのプロジェクトでは、フロントエンドMVVMフレームワークVue.jsとRailsを統合するWebpackerを使用しています。同時に、我々はまた、箱の外に真のワンクリックの展開を達成するために、サーバーにミラーリングローカルと展開スクリプトとドッキングウィンドウをユーザーに提供します。
エラー処理
-
リクエストアドレスエラー
-
不正な要求
- 彼らは不正なアドレスの出現につながったリクエストを修正するために、正当なユーザーに対応していないためです。
- 私たちのRuby on Railsフレームワーク
routes.rb最終セットデフォルトルートインチ 以前のすべての要求とアドレスが一致していなかったら、それは、エラーメッセージを提供し、たとえば、処理するためにコントローラを要求処理エラーに対応し、このデフォルトルートを通過した後、自分の個人的なホームページにアクセスするためにユーザーをリダイレクトしますこのメッセージは、レンダリング。
-
不正アクセス
-
ユーザーがアクセス情報または特権に他のユーザーのルーティング動作を使用しようとするためです。
-
対応するコントローラで私たちは、次のような動作を制御するために増加したアクセス制御文、関連付けられました：
before_action :correct_user, only: [:list_orders, :destroy, :month_income, :year_income,:monthly, :month_average]ここでは、（上記の例ではメソッドを書く
correct_userだけで、アクセス許可のみ認証が合法後、データベースに格納されているユーザーのセッションとそれに対応するレコードに基づいて身元識別と認証情報、）onlyそのが完了、そうでない場合は、後の方法をエラー処理は、ホームページにリダイレクトし、この情報をレンダリングするためのアクセスなしに知らせるためのメッセージを与えて、不正な要求に似ています。
-
-
-
データベースの格納されたエラー
- ここで主にフォームの任意の形式と内容はデータベースにデータレコードストアドプロシージャエンティティに対応する完全なことをいいます。
- ここでは、主にエントリーフォームの合法性のチェックの改善を通じて、我々は避けるために、限り、通常の状況下で提供されるAPIを介して可能フロントエンドのデータエントリとして、データベースへのアクセスを制限し、これに基づいて、その予防策にしようとしますデータベースの直接操作、不正なデータにつながったにフロントエンドデータベースをバイパスの合法性をチェックします。
概要
にGitLabで包括的なプロジェクトを取り入れながら、上記の分析は、私たちのプロジェクトは、Ruby on Railsに基づいてフロントエンドVue.js、バックエンドに基づいています。我々は完全にモジュール間のレベルとの間のデカップリングや、柔軟性とセキュリティの両方に同時に考慮し、設計の設計の際に考慮します。私たちは、その反復を改善し続け、最終的にはソフトウェア工学コースのためのプラットフォームを作成するプロジェクトの開発に本当に教育アプリケーションに入れることができます。