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 Truyền thông Xây dựng trang web hỗ trợ học trực tuyến Môn: Công nghệ web dịch vụ trực tuyến Nhóm 22 Hà Nội, ngày tháng năm 2020 Mục lục Giới thiệu 1.1 Mục đích ơTài liệu đưa mô tả chi tiết cho Phân/ /hệ quản lý người dùng, nhóm người dùng chức họ sử dụng thời gian chạy Tài liệu mơ tả mục đích tính hệ thống, giao diện, ràng buộc hệ thống cần thực để phản ứng tới kích thích bên ngồi Tài liệu dành cho bên liên quan (stakeholder) nhà phát triển phần mềm 1.2 Phạm vi Đây trang web hỗ trợ học trực tuyến với chức đăng nhập, đăng ký, gọi video, chat người, chat nhóm, tạo nhóm Mục đích phần mềm nhằm tạo phân hệ quản lý người dùng (user), vai trò người dùng (role) chức (function) mà người dùng / vai trò người dùng sử dụng thời điểm chạy.Người dùng đăng ký để tạo tài khoản cho mình, sau đăng nhập để sử dụng chức hệ thống Người dùng đăng nhập sử dụng tài khoản hệ thống Người dung ̀ có thể xem thông tin taì khoan̉ cuả minh ̀ Sau người dùng đăng nhập thành công, phần mềm tự động tạo menu chứa chức mà người dùng phép sử dụng Mỗi người dùng chọn chức menu, giao diện tương ứng với chức đưa 1.3 Từ điển thuật ngữ 1.4 Tài liệu tham khảo 1.5 Các công nghệ sử dụng: Phần front-end: HTML, CSS, Jquery, JavaScript, React JS Phần back-end: Express JS Phần Cơ sở 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 Model tích hợp bên phía server 1.6 Đóng góp 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ạo database, … 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 chia trang, viết báo cáo,… Số lượng commit gitlab người: Thời gian bắt đầu làm tập lớn chúng em ngày 15-5-2020 Giai đoạn đầu trình làm đồ án, chúng em để project, thời gian bắt đầu commit vào ngày 17-5-2020 Giai đoạn 2: Do vấn đề để component backend frontend gây khó khăn lúc chạy, chúng em chia làm project, thời gian bắt đầu commit project 2-6-2020 1.7 Bài học kinh nghiệm - Khó khăn: Với việc thực đề tài khó, nhóm em gặp nhiều khó khăn q trình tìm hiểu làm việc Vấn đề chúng em thấy khó trang web yêu cầu tính real time cao, khác hẳn với 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 cho nhóm em hồn thành tập lớn Mô tả tổng quan 2.1 Các tác nhân Phần mềm có tác nhân Khách, Người dùng Khách vai trò người dùng chưa đăng nhập vào hệ thống Người dùng vai trò người dùng bình thường sau đă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 đăng ký tài khoản mới, đăng nhập Khi khách đăng nhập thành công, hệ thống tạo menu chứa chức Sau đăng nhập, người dùng xem cập nhật thơng tin cá nhân mình, thay đổi thay đổi mật Người dùng thực chức hệ thống tạo nhóm, gọi video, chat video, tìm kiếm người dùng 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ó quy trình nghiệp vụ chính: Quy trình sử dụng trang web khách người dùng, Quy trình sử dụng chức gọi video , quy trình sử dụng chức chat người dung, quy trình sử dụng chức tạo group người dùng Chi tiết hành động quy trình mơ hình hố mục quy trình 2.4.1 Quy trình sử dụng trang web Khách đăng ký để tạo tài khoản cho Sau đăng nhập để sử dụng chức phần mềm Nếu khách quên mật khẩu, khách yêu cầu hệ thống cho phép thiết lập lại mật Lúc này, hệ thống gửi token liên kết kèm gửi qua email đăng ký Khách vào liên kết để thực việc thiết lập lại mật Sau đăng nhập thành cơng vào hệ thống, người dùng sử dụng chức Xem cập nhật thông tin cá nhân mình, Thay đổi mật khẩu, chức khác tạo nhóm, nhắn tin, gọi video 2.4.2 Quy trình gọi video call Người dùng gọi video với người khác hay nhóm người khác theo quy trình sau: Người dùng click vào Call menu, hệ thống chuyển sang trang Call Người dùng nhập tên phòng mã code để vào phòng Sau vào phòng, hệ thống tự động thực gọi video Trong lúc gọi video, hệ thống cung cấp thêm chức khác chia sẻ hình, tắt camera, tắt âm, chức chat real time với người nhóm 2.4.3 Quy trình sử dụng chức chat real time Người dùng thực theo quy trình sau để sử dụng chức chat: Người dùng nhập tên, nhâp group mã code để gia nhập vào phòng chat Tại đây, người dùng nhìn thấy người khác phòng, nhắn tin với họ 10 Luồng kiện thay Hệ thống Người dùng Nhập tên phòng, nhập mật nhóm(mơ tả **) Người dùng u cầu gọi video Hệ thống Kiểm tra mật tên phòng chưa, trả gọi video Người dùng Sử dụng chức gọi STT Thực Hành động 5a Hậu điều kiện Trả trang giao diện gọi video Hệ thống thông báo: Nếu người dùng nhập sai tên phòng mật thơng báo nhập sai Khơng * Dữ liệu đầu vào thơng tin phòng gọi video: Trường liệu STT Mô tả Bắt buộc? Điều kiện hợp lệ Ví dụ Tên nhóm có IT2030 Mật có araass 3.5 Đặc tả use case UC005 “Nhắn tin” Mã Use case UC005 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 ST Luồng kiện Nhắn tin Tên Use case Thực Hành động T Người dùng Chọn chức nhắn tin Hệ thống Trả giao diện trang web nhắn tin Người dùng Nhâp thông tin phòng chat, thơng tin mật Hệ thống Kiểm tra thông tin người dùng nhập Hệ thống Nếu thành công, hệ thống giúp người dùng gia nhập 5a 16 nhóm 5b Luồng kiện thay Hệ thống Nếu thơng tin người dùng nhập khơng xác trang web thông báo lỗi Không Hậu điều kiện * Dữ liệu đầu hiển thị danh sách chức năng: STT Trường liệu Mô tả Định dạng hiển thị Ví dụ Tên phòng chat Dạng text IT3221 Mật Dạng text amsc Các yêu cầu khác 4.1 Chức (Functionality) - Khi người dùng thực việc đăng nhập vào hệ thống phải thông qua bước sau: nhập tên đăng nhập mật - Khi đăng ký khách hàng cần điền đầy đủ thông tin đăng nhập gồm tên đăng nhập, Email, mật nhập lại mật cần phải cho biết thêm thông tin địa số điện thoại, ảnh (nếu có) - Định dạng hiển thị chung sau: - Số phải - Chữ trái - Font: Arial 14, màu đen - Nền trắng 4.2 Tính dễ dùng (Usability) Các chức cần thiết kế cho dễ thao tác Cần có hướng dẫn cụ thể lỗi sai người dùng để người dùng biết định vị lỗi, biết lỗi 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 17 - 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ở liệu phải đảm bảo hệ thống hoạt động 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 phần, thành phần có nhiệm vụ riêng biệt độc lập với thành phần khác Bao gồm ba lớp xử lý Model – View – Controller : Model : nơi chứa nghiệp vụ tương tác với liệu hệ quản trị sở liệu (mysql, mssql… ); bao gồm class/function xử lý nhiều nghiệp vụ kết nối database, truy vấn liệu, thêm – xóa – sửa liệu… View : nơi chứa giao diện nút bấm, khung nhập, menu, hình ảnh… đảm nhiệm nhiệm vụ hiển thị liệu giúp người dùng tương tác với hệ thống Controller : nơi tiếp nhận yêu cầu xử lý gửi từ người dùng, gồm class/ function xử lý nhiều nghiệp vụ logic giúp lấy liệu thông tin cần thiết nhờ nghiệp vụ lớp Model cung cấp hiển thị liệu 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 ● Model View khơng có tương tác với mà tương tác với thơng qua Controller Kiến trúc cho ứng dụng trang web:  Phần View: Các giao diện hiển thị viết file js Bao gồm: - Phần front-end( giao diện khách thành viên): + Component: chức trang web +chat: +Chat.css: Giao diện css trang chat 18 +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 người phòng chat online +rooms.js: tạo room chat +App.js:Giao diện phương thức trang gọi video +Context.js: chứa phương thức xử lí nhóm +Infoteam.js: chưa giao diện trang thơng tin nhóm +ListTeam.js: danh sách nhóm 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 liệu nhóm người dùng với server +team.js: Giao diện nhóm + UI: giao diện +MenuBar.js: Thanh menuBar ngang +MenuBarLeft.js: Thanh menu dọc +User: 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 phương thức gửi nhận liệu người dù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 thay đổi thông tin cá nhân +Home.js: chứa giao diện trang home +index.js: chứa tất component trang web  Phần Controller: +index.js: lớp khởi tạo +message.js: phương thức xử lí tin nhắn +room.js: phương thức xử lí nhóm +users.js: phương thức xử lí người dùng  Phần Model: phần models backend +ChatUsertoRoomModel.js: chứa đối tượng thuộc tính đối tượng ChatUsertoRoom 19 +ChatUsertoUserModel.js: chứa đối tượng thuộc tính đối tượng ChatUsertoRoom +CreateRoomModel.js: chứa đối tượng thuộc tính đối tượng ChatUsertoRoom +UserJoinRoomModel.js chứa đối tượng thuộc tính đối tượng ChatUsertoRoom +UserModel.js chứa đối tượng thuộc tính đối tượng ChatUsertoRoom +views: +error.js: +index.js: +app.js: chứa thư viện cần thiết cho server 5.1.2 Thiết kế tổng quan Sơ đồ kiến trúc phân cấp chức mô tả chi tiết cho chức năng, quan hệ thành phần: Mô tả chi tiết: 20 Trang web chia làm phần chức chính: Người dùng, Nhóm, Nhắn tin , Gọi video Trong đó, chức người dùng bao gồm có: đăng ký, đăng nhập, xem thông tin cá nhân thay đổi thông tin cá nhân Chức nhóm gồm có: tạo nhóm thay đổi thơng tin nhóm Chức nhắn tin gồm có : tạo phòng chat nhắn tin Chức Gọi video bao gồm : Bật / tắt camera, Bật/tắt âm lượng, chia sẻ hình Mục đích, nhiệm vụ package: + package UI: chứa component giao diện +package Component: chứa component trang web gọi video, tạo nhóm , chat +package User: chứa componenet liên quan đến chức người dùng +package Router: chứa lớp Controller +package models: chứa lớp model Hình 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 vấn đề tìm kiếm: 21 Hình Ví dụ thiết kế gói chức chat Mô tả : Lớp ChatUsertoUser ChatUsertoRoom phần models kế thừa từ lớp message Controller, lớp Chat lớp message có mối quan hệ liên kết với 5.2 Thiết kế chi tiết 5.2.3 Thiết kế sở liệu Sơ đồ thực thể liên kết: 22 Nhóm em sử dụng Nosql, với hệ quản trị sở liệu MongoDB; Bảng ChatUsertoRoom STT Tên trường Kiểu liệu Ghi username String Tên tài khoản message String Tin nhắn Created_date String Ngày tạo room roomName String Tên phòng Ràng buộc Not null Not null Bảng UserJoinRoom STT Tên trường Kiểu liệu Ghi Ràng buộc userName String Tên tài khoản Not null Create_date String Ngày tạo RoomNameJoin String Tên phòng người dùng Not null tham gia Bảng User STT Tên trường Kiểu liệu Ghi Ràng buộc UserName String Tên tài khoản Not null Password String Mật Not null 23 Dia_chi String Địa người dùng Gioi_tinh String Giới tính người dùng Ngay_sinh String Ngày sinh Bảng CreateRoom STT Tên trường Kiểu liệu Ghi userName String Tên tài khoản roomNameCreate String Thời gian tạo phòng passwordRoom String Mật Ràng buộc Not null Not null Bảng ChatUsertoUser STT Tên trường Kiểu liệu Ghi Ràng buộc userName String Tên tài khoản message String Tin nhắn Create_date String Ngày tạo usernamefriend String Người chat với chủ tài Not null khoản 5.2.4 Thiết kế lớp Biểu đồ trình tự cho lớp usecase đăng nhập: 24 Not null Biểu đồ trình tự cho usecase nhắn tin 25 5.2.5 Thiết kế giao diện Giao diện trang chủ: Giao diện trang đăng ký, đăng nhập: 26 27 Giao diện trang nhóm: 28 Giao diện trang bạn bè: Giao diện chat: 29 Giao diện gọi điện: 30 ... triển phần mềm 1.2 Phạm vi Đây trang web hỗ trợ học trực tuyến với chức đăng nhập, đăng ký, gọi video, chat người, chat nhóm, tạo nhóm Mục đích phần mềm nhằm tạo phân hệ quản lý người dùng (user),... thuộc gói 5.1.3 Thiết kế chi tiết gói Thiết kế biểu đồ package giải vấn đề tìm kiếm: 21 Hình Ví dụ thiết kế gói chức chat Mơ tả : Lớp ChatUsertoUser ChatUsertoRoom phần models kế thừa từ lớp message... Controller, lớp Chat lớp message có mối quan hệ liên kết với 5.2 Thiết kế chi tiết 5.2.3 Thiết kế sở liệu Sơ đồ thực thể liên kết: 22 Nhóm em sử dụng Nosql, với hệ quản trị sở liệu MongoDB; Bảng