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ệ ReactJS

b. Các thành phần phía client

• Phía Client: Sử dụng framework ReactJS làm cốt lõi phát triển front-end, sử dụng 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 + npm để thiết môi trường phát triển ứng dụng.

• Triển khai dự án trên Heroku

d. Cơ sở dữ liệu

• Cơ sở dữ liệu tự tạo cố định trong các modules, một số ảnh được upload trên firebase hoặc các web phục vụ upload ảnh

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

import React, {Component} from 'react';
import ScreenTest from './Containers/ScreenTest';
import ScreenListTest from './Containers/ScreenListTest';
import ScreenDisplayResult from './Containers/ScreenDisplayResult';
import ScreenListOnTap from './Containers/ScreenListOnTap';
import ScreenSahinh from './Containers/ScreenSahinh';
import ScreenThucHanh from './Containers/ScreenThucHanh';
import ScreenLyThuyet from './Containers/ScreenLyThuyet';
import ScreenBienBao from './Containers/ScreenBienBao';
import ScreenSuccess from './Containers/ScreenSuccess';
import ScreenHoso from './Containers/ScreenHoso';
import './App.css';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';

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

<Router>
        <div>
          <Route exact path='/' component={ScreenListTest}/>
          <Route path='/test' component={ScreenTest}/>
          <Route path='/result/:id' component={ScreenDisplayResult} />
          <Route path='/ontap' component={ScreenListOnTap} />
          <Route path='/sahinh' component={ScreenSahinh}/>
          <Route path='/thuchanh' component={ScreenThucHanh}/>
          <Route path='/bienbao' component={ScreenBienBao}/>
          <Route path='/lythuyet' component={ScreenLyThuyet}/>
          <Route path='/hoso' component={ScreenHoso} />
          <Route path='/success' component={ScreenSuccess}/>
        </div>
      </Router>

Khi click vào Tài liệu ôn tập sẽ dẫn vào ScreenListOnTap/index.js