3.1.Thiết kế kiến trúc

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.component';
import { AnswerComponent }   from './answer.component';
import { LoginComponent }      from './login.component';
import { StoryComponent }    from './story.component';
import { HomeComponent }    from './home.component';
import {AatroxComponent} from './aatrox.component';
import {AhriComponent} from './ahri.component';
import {AkaliComponent} from './akali.component';
import {AlistarComponent} from './alistar.component';
import {AmumuComponent} from './amumu.component';
import {AniviaComponent} from './anivia.component';
import {AnnieComponent} from './annie.component';
import {AsheComponent} from './ashe.component';
import {AurelionsolComponent} from './aurelionsol.component';

• Đường dẫn đến các component khi click:

<li class= "active"> <a routerLink="/login" routerLinkActive="active">Đăng Nhập</a></li>
<li><a  routerLink="/answer" routerLinkActive="active">Câu hỏi</a></li>
<li><a     routerLink="/story" routerLinkActive="active">Truyền Thuyết</a></li>

Click vào Đăng nhập sẽ dẫn vào app/login.component.html

Click vào Câu hỏi sẽ dẫn vào app/answer.component.html

Click vào Truyền thuyết sẽ dẫn vào app/story.component.html