Phân tích thiết kế ứng dụng web hỗ trợ học trực tuyến

Phân tích thiết kế ứng dụng web hỗ trợ học trực tuyến. Sử dụng công nghệ frontend là reactjs, backend là express trên nền tảng nodejs, database sử dụng monggodb. Đây là bản phân tích và thiết kế ngắn gọn, không quá chi tiết

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

Viện Công nghệ thông tin và Truyền thông

Xây dựng trang web hỗ trợ học trực tuyến Môn: Công nghệ web và dịch vụ trực tuyến

Nhóm 22

Hà Nội, ngày 5 tháng 6 năm 2020

1

<Các chú thích nằm trong cặp dấu ngoặc nhọn không nằm trong tài liệu này, mục đích là để giảithích thêm Khi sinh viên sử dụng tài liệu này, cần xoá các phần chú thích này trong bài làm củamình và điền nội dung theo chỉ dẫn>

<Tài liệu này được viết bởi TS Nguyễn Thị Thu Trang, như một case study dùng cho sinh viêntrong các học phần liên quan Nghiêm cấm mọi hành vi sửa đổi hoặc sử dụng khi chưa có sựđồng ý của tác giả >

2.2 Biểu đồ use case tổng quan

2.3 Biểu đồ use case phân rã

2.3.1 Phân rã use case “Gọi video”

2.3.2 Phân rã use case “Nhắn tin”

2.3.3 Phân rã use case “Tạo nhóm”

2.4 Quy trình nghiệp vụ

2.4.1 Quy trình sử dụng trang web

2.4.2 Quy trình gọi video call

2.4.3 Quy trình sử dụng chức năng chat real time2.4.4 Quy trình tạo group của người dùng

3 Đặc tả các chức năng

3.1 Đặc tả use case UC001 “Đăng nhập”3.2 Đặc tả use case UC002 “Tạo nhóm”

3.3 Đặc tả use case UC003 “Đăng ký”

3.4 Đặc tả use case UC004 “Gọi video”

3.5 Đặc tả use case UC005 “Nhắn tin”

3

5.1.3 Thiết kế chi tiết gói

5.2 Thiết kế chi tiết

5.2.3 Thiết kế cơ sở dữ liệu

5.2.4 Thiết kế lớp

5.2.5 Thiết kế giao diện

1 Giới thiệu

1.1 Mục đích

ơTài liệu này đưa ra mô tả chi tiết cho Phân/ /hệ quản lý người dùng, nhóm người dùng

và các chức năng của họ có thể sử dụng được tại thời gian chạy Tài liệu mô tả mục đích

và các tính năng của hệ thống, các giao diện, ràng buộc của hệ thống cần thực hiện đểphản ứng tới các kích thích bên ngoài

Tài liệu dành cho các bên liên quan (stakeholder) và các nhà phát triển phần mềm

nhập sử dụng tài khoản của hệ thống Ng i dùng có th xem thông tin tài kho n c aườ ể ả ủmình.

Sau khi một người dùng đăng nhập thành công, phần mềm sẽ tự động tạo menu chứa cácchức năng mà người dùng đó được phép sử dụng Mỗi khi người dùng chọn một chứcnăng trên menu, giao diện tương ứng với chức năng sẽ được đưa ra

Phần Cơ sở dữ liệu: MongoDB

Phần nhắn tin, gọi điện real time : WebRTC, SocketIO

Trang web sử dụng mô hình MVC với phần Controller và Model được tích hợp bên phíaserver

1.6 Đóng góp của các thành viên:

Phân công công việc:

- Nguyễn Trọng Tú: Backend, chỉnh sửa Front-End, kết nối với database, tạodatabase, …

- Lương Anh Tuấn: Backend+ frontend Chat,Nhóm, chỉnh sửa giao diện…

- Bùi Minh Tuấn : Frontend (đăng nhập, đăng ký,Nhóm,giao diện chính), phân chiatrang, viết báo cáo,…

Số lượng commit trên gitlab của mỗi người:

Thời gian bắt đầu làm bài tập lớn của chúng em là ngày 15-5-2020

Giai đoạn đầu quá trình làm đồ án, chúng em để một project, thời gian bắt đầucommit vào ngày 17-5-2020

5

Giai đoạn 2: Do vấn đề để các component backend trong frontend gây khó khăn trong lúcchạy, chúng em đã chia làm 2 project, thời gian bắt đầu commit 2 project này là 2-6-2020

1.7 Bài học kinh nghiệm

- Khó khăn: Với việc thực hiện một đề tài khó, nhóm em đã gặp rất nhiều khó khăntrong quá trình tìm hiểu và làm việc Vấn đề chúng em thấy khó nhất đó là trang web yêucầu tính real time rất cao, khác hẳn với các trang web truyền thống

-Bài học kinh nghiệm: Sự đồng lòng, giúp đỡ lẫn nhau, không ngại khó đã giúp chonhóm em có thể hoàn thành được bài tập lớn này

2 Mô tả tổng quan

2.1 Các tác nhân

Phần mềm có 2 tác nhân là Khách, Người dùng Khách là vai trò của người dùng khichưa đăng nhập vào hệ thống Người dùng là vai trò của một người dùng bình thường saukhi đã đăng nhập thành công vào hệ thống

2.2 Biểu đồ use case tổng quan

Khi chưa đăng nhập, khách có thể đăng ký tài khoản mới, đăng nhập Khi khách đăngnhập thành công, hệ thống tạo ra menu chứa các chức năng

Sau khi đăng nhập, người dùng có thể xem và cập nhật thông tin cá nhân của mình, và cóthể thay đổi thay đổi mật khẩu

Người dùng có thể thực hiện các chức năng của hệ thống như tạo nhóm, gọi video, chatvideo, tìm kiếm người dùng

7

2.3 Biểu đồ use case phân rã

2.3.1 Phân rã use case “Gọi video”

2.3.2 Phân rã use case “Nhắn tin”

2.3.3 Phân rã use case “Tạo nhóm”

2.4 Quy trình nghiệp vụ

Trong phân hệ này, có 4 quy trình nghiệp vụ chính: Quy trình sử dụng trang web củakhách và người dùng, Quy trình sử dụng chức năng gọi video , quy trình sử dụng chứcnăng chat của người dung, quy trình sử dụng chức năng tạo group của người dùng

Chi tiết về hành động trong các quy trình này được mô hình hoá trong các mục con củatừng quy trình

2.4.1 Quy trình sử dụng trang web

Khách có thể đăng ký để tạo ra tài khoản cho mình Sau đó có thể đăng nhập để sử dụngcác chức năng của phần mềm Nếu khách quên mật khẩu, khách có thể yêu cầu hệ thốngcho phép mình thiết lập lại mật khẩu Lúc này, hệ thống sẽ gửi token trong liên kết kèmgửi qua email đã đăng ký Khách có thể vào liên kết đó để thực hiện việc thiết lập lại mậtkhẩu

Sau khi đăng nhập thành công vào hệ thống, người dùng có thể sử dụng các chức năngnhư Xem và cập nhật thông tin cá nhân của mình, Thay đổi mật khẩu, và các chức năngkhác như tạo nhóm, nhắn tin, gọi video

11

2.4.2 Quy trình gọi video call

Người dùng có thể gọi video với một người khác hay một nhóm người khác theo quytrình như sau: Người dùng click vào Call trong menu, hệ thống chuyển sang trang Call.Người dùng nhập tên phòng và mã code để có thể vào phòng Sau khi vào phòng, hệthống sẽ tự động thực hiện cuộc gọi video Trong lúc gọi video, hệ thống còn cung cấpthêm các chức năng khác như chia sẻ màn hình, tắt camera, tắt âm, chức năng chat realtime với những người trong nhóm

2.4.3 Quy trình sử dụng chức năng chat real time

Người dùng có thể thực hiện theo quy trình sau để sử dụng chức năng chat: Người dùngnhập tên, nhâp group và mã code để có thể gia nhập vào phòng chat Tại đây, người dùng

có thể nhìn thấy các người khác trong phòng, có thể nhắn tin với họ

2.4.4 Quy trình tạo group của người dùng

Người dùng có thể tạo nhóm theo quy trình sau: Người dùng click vào ô tạo group Hệ thống sẽ trả về trang tạo group, người dùng có thể nhập thông tin về nhóm(tên, ảnh, miêu tả).Sau khi những thông tin về nhóm được gửi đi, hệ thống sẽ trả về mã code để người khác có thể tham gia vào nhóm đó

13

3 Đặc tả các chức năng

Chi tiết về các use case được đưa ra trong phần 2 được đặc tả trong các phần dưới đây

3.1 Đặc tả use case UC001 “Đăng nhập”

2 Hệ thống hiển thị giao diện đăng nhập

3 Khách nhập tài khoản và mật khẩu (mô tả phía dưới *)

nhập hay chưa

6 Hệ thống kiểm tra tài khoản và mật khẩu có hợp lệ do khách

nhập trong hệ thống hay không

đúng nếu không tìm thấy tài khoản và mật khẩu trong hệ thống

7b Hệ thống gọi use case “Thay đổi mật khẩu theo yêu cầu”

nếu đúng email và mật khẩu; nhưng người dùng được đánh dấu là cần thay đổi mật khẩu

Hậu điều kiện Không

* Dữ liệu đầu vào của thông tin cá nhân gồm các trường dữ liệu sau:

STT Trường dữ liệu Mô tả Bắt buộc? Điều kiện hợp lệ Ví dụ

3.2 Đặc tả use case UC002 “Tạo nhóm”

1 Người dùng Chọn chức năng tạo nhóm

15

2 Hệ thống Trả về giao diện trang tạo nhóm

3 Người dùng Nhập cá thông tin cơ bản về nhóm

4 Người dùng Yêu cầu tạo nhóm

5 Hệ thông Kiểm tra xem các trường dữ liệu nhập vào đã hợp

lệ hay chưa, kiểm tra xem tên nhóm đã tồn tại chưa

6 Hệ thống Nếu tất cả hợp lệ, hệ thống sẽ trả về trang có

giao diện chứa nhóm người dùng mới tạo

Luồng sự kiện thay

thế Không có

Hậu điều kiện Không

3.3 Đặc tả use case UC003 “Đăng ký”

2 Hệ thống hiển thị giao diện đăng ký

3 Khách nhập các thông tin cá nhân (mô tả phía dưới *)

nhập hay chưa

6 Hệ thống kiểm tra địa chỉ email của khách có hợp lệ không

7 Hệ thống kiểm tra mật khẩu nhập lại và mật khẩu có trùng

nhau hay không

8 Hệ thống lưu thông tin tài khoản và thông báo đăng ký

thành công

Luồng sự kiện thay

T Thực hiện bởi Hành động

6a Hệ thống thông báo lỗi: Cần nhập các trường bắt buộc nhập

nếu khách nhập thiếu 7a Hệ thống thông báo lỗi: Địa chỉ email không hợp lệ nếu địa

chỉ email không hợp lệ 8a Hệ thống thông báo lỗi: Mật khẩu xác nhận không trùng

với Mật khẩu nếu hai mật khẩu không trùng nhau

Hậu điều kiện Không

* Dữ liệu đầu vào của thông tin cá nhân gồm các trường dữ liệu sau:

STT Trường dữ liệu Mô tả Bắt buộc? Điều kiện hợp lệ Ví dụ

3 Email Có Địa chỉ email hợp lệ h.anh@gmail.com

4 Mật khẩu Có Ít nhất 8 ký tự, gồm cả chữ

cái hoa và thường, ít nhất 1 chữ số và ký tự đặc biệt

ToiLa12#$

3.4 Đặc tả use case UC004 “Gọi video”

Thực hiện bởi

Hành động

1 Người dùng chọn chức năng gọi video

17

2 Hệ thống Trả về trang giao diện gọi video

3 Người dùng Nhập tên phòng, nhập mật khẩu của nhóm(mô tả dưới **)

4 Người dùng Yêu cầu gọi video

5 Hệ thống Kiểm tra mật khẩu và tên phòng đã đúng chưa, nếu đúng trả

về cuộc gọi video

6 Người dùng Sử dụng chức năng gọi

Luồng sự

kiện thay

thế STT Thực hiện bởi Hành động

5a Hệ thống thông báo: Nếu người dùng nhập sai tên phòng hoặc mật

khẩu thì thông báo đã nhập sai

3.5 Đặc tả use case UC005 “Nhắn tin”

Tác nhân Thành viên

Tiền điều

kiện Người dùng phải đăng nhập thành công

1 Người dùng Chọn chức năng nhắn tin

2 Hệ thống Trả về giao diện trang web nhắn tin

3 Người dùng Nhâp thông tin phòng chat, thông tin mật khẩu

4 Hệ thống Kiểm tra thông tin người dùng nhập

5a Hệ thống Nếu thành công, hệ thống sẽ giúp người dùng gia nhập

nhóm

Luồng sự kiện

thay thế

5b Hệ thống Nếu thông tin người dùng nhập không chính xác

thì trang web thông báo lỗi

Hậu điều

kiện

Không

* Dữ liệu đầu ra khi hiển thị danh sách chức năng:

STT Trường dữ liệu Mô tả Định dạng hiển thị Ví dụ

1 1 Tên phòng chat Dạng text IT3221

- Định dạng hiển thị chung như sau:

4.2 Tính dễ dùng (Usability)

Các chức năng cần được thiết kế sao cho dễ thao tác Cần có hướng dẫn cụ thể lỗi sai củangười dùng để người dùng biết định vị lỗi, biết lỗi gì và biết cách sửa lỗi

4.3 Các yêu cầu khác

- Dung lượng website vừa phải

- Tốc độ truy xuất nhanh

- Hệ thống thông tin phải có chế độ bảo mật, không chấp nhận sai sót

- Cơ sở dữ liệu phải được đảm bảo khi hệ thống đang hoạt động

5 Thiết kế kiến trúc

5.1.1 Lựa chọn kiến trúc phần mềm

Trang web sử dụng kiến trúc ba lớp MVC

Mô hình phân bố source code thành 3 phần, mỗi thành phần có một nhiệm vụ riêng biệt

và độc lập với các thành phần khác Bao gồm ba lớp xử lý Model – View – Controller :

Model : là nơi chứa những nghiệp vụ tương tác với dữ liệu hoặc hệ quản trị cơ sở dữ liệu

(mysql, mssql… ); nó sẽ bao gồm các class/function xử lý nhiều nghiệp vụ như kết nốidatabase, truy vấn dữ liệu, thêm – xóa – sửa dữ liệu…

View : là nơi chứa những giao diện như một nút bấm, khung nhập, menu, hình ảnh… nó

đảm nhiệm nhiệm vụ hiển thị dữ liệu và giúp người dùng tương tác với hệ thống

Controller : là nơi tiếp nhận những yêu cầu xử lý được gửi từ người dùng, nó sẽ gồm

những class/ function xử lý nhiều nghiệp vụ logic giúp lấy đúng dữ liệu thông tin cầnthiết nhờ các nghiệp vụ lớp Model cung cấp và hiển thị dữ liệu đó ra cho người dùng nhờlớp View

● Controller tương tác với qua lại với View

● Controller tương tác qua lại với Model

Kiến trúc cho ứng dụng của trang web:

 Phần View: Các giao diện hiển thị viết bằng file js Bao gồm:

- Phần front-end( giao diện đối với khách và thành viên):

+ Component: về chức năng cơ bản của trang web

+chat:

+Chat.css: Giao diện css trang chat+chat.js: Giao diện trang chat+input.js :ô nhập tin nhắn+messageItem.js:Icon chat, ảnh người chat+messageList.js:danh sách tin nhắn

+online-list.js:danh sách những người trong phòng chatonline

+rooms.js: tạo room chat+App.js:Giao diện và các phương thức trang gọi video+Context.js: chứa các phương thức xử lí về nhóm+Infoteam.js: chưa giao diện trang thông tin nhóm+ListTeam.js: danh sách các nhóm của người dùng+createGroup.js:giao diện trang tạo nhóm

+createGroupJs.js: phương thức xử lí trang tạo nhóm+data.js: giao tiếp dữ liệu về nhóm người dùng với server+team.js: Giao diện 1 nhóm

+ UI: về giao diện

+MenuBar.js: Thanh menuBar ngang+MenuBarLeft.js: Thanh menu dọc+User: về người dùng

+Login.js: Giao diện trang login+Profile.js:Giao diện trang thông tin cá nhân+Register.js: Giao diện trang đăng ký

+UserFunction.js:chứa các phương thức gửi và nhận dữ liệu ngườidùng với sserver

+changeProfile.js:chưa giao diện trang thay đổi thông tin cá nhân+changing.js:chứa giao diện trang web sau khi thay đổi thông tin

cá nhân+Home.js: chứa giao diện trang home+index.js: chứa tất cả component của trang web

 Phần Controller:

21

+index.js: lớp khởi tạo+message.js: các phương thức xử lí về tin nhắn+room.js: các phương thức xử lí về nhóm+users.js: các phương thức xử lí về người dùng

 Phần Model: phần models của backend

+ChatUsertoRoomModel.js: chứa đối tượng về các thuộc tính của đốitượng ChatUsertoRoom

+ChatUsertoUserModel.js: chứa đối tượng về các thuộc tính của đối tượngChatUsertoRoom

+CreateRoomModel.js: chứa đối tượng về các thuộc tính của đối tượngChatUsertoRoom

+UserJoinRoomModel.js chứa đối tượng về các thuộc tính của đối tượngChatUsertoRoom

+UserModel.js chứa đối tượng về các thuộc tính của đối tượngChatUsertoRoom

Mô tả chi tiết:

Trang web sẽ chia làm 4 phần chức năng chính: Người dùng, Nhóm, Nhắn tin ,Gọi video

Trong đó, chức năng người dùng bao gồm có: đăng ký, đăng nhập, xem thông tin cá nhân

và thay đổi thông tin cá nhân Chức năng nhóm gồm có: tạo nhóm và thay đổi thông tinnhóm Chức năng nhắn tin gồm có : tạo phòng chat và nhắn tin Chức năng Gọi video baogồm : Bật / tắt camera, Bật/tắt âm lượng, chia sẻ màn hình

23

Mục đích, nhiệm vụ của từng package:

+ package UI: chứa các component về giao diện

+package Component: chứa các component chính về trang web như gọi video, tạonhóm , chat

+package User: chứa các componenet liên quan đến chức năng của người dùng.+package Router: chứa các lớp Controller

+package models: chứa các lớp model

Hình 1 Ví dụ biểu đồ phụ thuộc gói

5.1.3 Thiết kế chi tiết gói

Thiết kế biểu đồ package giải quyết vấn đề tìm kiếm:

Hình 2 Ví dụ thiết kế gói chức năng chat

Mô tả : Lớp ChatUsertoUser và ChatUsertoRoom ở phần models được kế thừa từ lớp

message của Controller, lớp Chat và lớp message có mối quan hệ liên kết với nhau

5.2 Thiết kế chi tiết

5.2.3 Thiết kế cơ sở dữ liệu

Sơ đồ thực thể liên kết:

25

Nhóm em sử dụng Nosql, với hệ quản trị cơ sở dữ liệu MongoDB;

Bảng ChatUsertoRoom

3 Created_date String Ngày tạo room

Bảng UserJoinRoom

3 RoomNameJoin String Tên phòng người dùng

tham gia

Not null

1 UserName String Tên tài khoản Not null

3 Dia_chi String Địa chỉ của người dùng

4 Gioi_tinh String Giới tính của người dùng

Bảng CreateRoom

2 roomNameCreate String Thời gian tạo phòng

Bảng ChatUsertoUser

4 usernamefriend String Người chat với chủ tài

Biểu đồ trình tự cho usecase nhắn tin

5.2.5 Thiết kế giao diện

Giao diện trang chủ:

Giao diện trang đăng ký, đăng nhập:

29

Giao diện trang nhóm:

31

Giao diện trang bạn bè:

Giao diện chat:

Giao diện gọi điện:

33