3.1. Thiết kế kiến trúc
Thiết kế UML:
a. Mô tả công nghệ sử dụng:
Dự án sử dụng công nghệ Angular 2.
b. Các thành phần phía client
- Phía Client: Sử dụng framework Angular 2 làm cốt lõi phát triển front-end, framework Boostrap để hỗ trợ phần giao diện hiển thị.
c. Các thành phần phía server
Sử dụng Node.js và npm để thiết lập môi trường phát triển ứng dụng.
Triển khai dự án trên firebase.
d. Cơ sở dữ liệu
- Cơ sở dữ liệu tự tạo cố định trong các modules, liên kết cơ sở dữ liệu với firebase.
e. Các đường kết nối giữa các thành phần:
- Các đường kết nối giữa các thành phần được viết trong file app-routing.modules.ts, ví dụ:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from 'app/app.component';
import { HomeComponent } from 'app/home.component';
import { FeedbackComponent } from 'app/feedback';
import { CountQuestionDetailComponent } from 'app/luyentap/chuong1-phamvi10/count-question-detail.component';
import { CalQuestionDetailComponent } from 'app/luyentap/chuong1-phamvi10/cal-question-detail.component';
import { luyentapComponent } from 'app/luyentap/luyentap.component';
import { MinMaxQuestionDetailComponent } from 'app/luyentap/chuong1-phamvi10/min-max-10';
import { SoSanh20Component } from 'app/luyentap/chuong2-phamvi20/sosanh-20.component';
import { Sub20Question } from 'app/luyentap/chuong2-phamvi20/sub-20-question.component';
import { Sum20Question } from 'app/luyentap/chuong2-phamvi20/sum-20-question.component';
import { MinMax20QuestionComponent } from 'app/luyentap/chuong2-phamvi20/min-max-20-question.component';
import { SoLienTruocSau20Component } from 'app/luyentap/chuong2-phamvi20/lientruoc-sau-20.component';
- Đường dẫn đến các component khi click
<li><a routerLink="/luyentap" routerLinkActive="active">Luyện tập</a></li>
<li><a routerLink="/kiemtra" routerLinkActive="active">Kiểm tra</a></li>
<li><a routerLink="/kynangsong" routerLinkActive="active">Kỹ năng sống</a></li>
Click vào Luyện tập sẽ dẫn vào app/luyentap/luyentap.component.ts
f. Thông tin các thư viện sử dụng
f.1. Thư viện jQuery
f.2. Các thư viện Angular 2
- system.js: được gọi là “Universal dynamic module loader”, viết dựa trên es6-module-loader để thay vì chỉ load các module của es6 thì còn có thể load được cả CommonJs, AMD, global script.
- typescript.js: là transpiler cho system.js, sử dụng để dịch TypeScript thành JavaScript.
- angular2-polyfills.js: file này thực chất là hợp nhất giữa zone.js và reflect-metadata.
- rx.js: Là thư viện Observables, thuật ngữ này sẽ gặp nhiều khi đi sâu vào Angular, nó được bổ sung giống Promises ở AngularJS.
- angular2.dev.js
f.2. Các thư viện Bootstrap