1. Trang chủ
  2. » Cao đẳng - Đại học

Áp dụng spring kết hợp ReactJS phát triển hệ thống hỗ trợ học tập toàn diện

109 11 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 109
Dung lượng 2,17 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Nội dung

− Tìm hiểu và áp dụng các kĩ thuật nâng cao như load balancing, − Nghiên cứu thực tiễn những khó khăn còn tồn đọng trong học tập của sinh viên, từ đó chỉnh sửa hệ thống cho phù hợp... Hệ

Trang 1

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

LƯU BIÊU NGHỊ - 17520794 NGUY ỄN VĂN ĐÔNG - 17520350

ĐỒ ÁN 2

BUILDING A FEATURE RICH LEARNING ASSISTANCE WEBSITE USING

SPRING AND REACTJS

Trang 2

L ỜI CẢM ƠN

Trong suốt 4 năm học tập tại trường đại học Công nghệ Thông tin, từ sự giảng dạy nhiệt tình và hướng dẫn chu đáo từ phía thầy cô, đặc biệt là quý thầy cô khoa Công nghệ Phần mềm, chúng em đã được tiếp thu rất nhiều kiến thức bổ ích và vô cùng cần thiết để chúng

em có thể có được một chuyên môn vững chắc trong tương lai Thông qua đồ án này, chúng em đã thể hiện những gì đã được học và phối hợp chúng lại để cố gắng tạo nên một sản phẩm có khả năng đưa vào hoạt động thực tế, bước đầu là quy mô vừa và nhỏ, dần dần hướng đến một sản phẩm hoàn chỉnh với quy mô lớn

Chúng em xin gửi lời cảm ơn chân thành đến quý thầy cô trường Đại học Công nghệ Thông tin nói chung, và quý thầy cô khoa Công nghệ Phần mềm nói riêng, đặc biệt là cô Huỳnh Hồ Thị Mộng Trinh đã chu đáo và tận tình hướng dẫn chúng em, giúp chúng em

có điều kiện tốt nhất để hoàn thành đồ án với chất lượng cao nhất

Bên cạnh đó, nhóm cũng xin gửi lời cảm ơn đến các bạn nhóm khác đã cùng góp ý để nhóm có đề tài hoàn thiện hơn mỗi ngày

Trong suốt quá trình thực hiện đồ án, do quy mô của sản phẩm khá lớn so với một đồ án thông thường, với thời gian và vốn kiến thức vẫn còn nhiều hạn chế, chắc chắn khó tránh khỏi những sai sót không mong muốn Chúng em rất mong nhận được sử góp ý chân thành từ phía thầy cô và các bạn

Thành phố Hồ Chí Minh, tháng 01 năm 2021

Lưu Biêu Nghị Nguyễn Văn Đông

Trang 3

ĐHQG TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

Độc Lập - Tự Do - Hạnh Phúc

TP HCM, ngày… tháng… năm……

ĐỀ CƯƠNG CHI TIẾT

TÊN ĐỀ TÀI: Áp dụng Spring kết hợp ReactJS phát triển hệ thống hỗ trợ học tập

toàn diện

Thời gian thực hiện: Từ tháng 03/2021 đến tháng 06/2021

Lưu Biêu Nghị 17520794

Nội dung đề tài:

Mục tiêu:

− Nghiên cứu, tìm hiểu về công nghệ Spring, React

− Tìm hiểu và áp dụng best-practice khi phát triển ứng dụng với Spring và

React

− Tìm hiểu và áp dụng các kĩ thuật nâng cao như load balancing,

− Nghiên cứu thực tiễn những khó khăn còn tồn đọng trong học tập của sinh

viên, từ đó chỉnh sửa hệ thống cho phù hợp

Trang 4

Hệ thống cho phép thực hiện việc chia sẻ kiến thức thông qua hai hình thức chính: Đăng tải bài viết và tài liệu Người dùng có thể tiến hành đăng bài và theo dõi, quản

lý bài viết của mình Ngoài ra còn có thể tương tác với bài viết như like, dislike, lưu bài viết về kho của mình, comment đến bài viết…

Tương tự, ở tài liệu còn có một số chức năng nổi bật như: Cho phép upload tài liệu, upvote/downvote tài liệu, xem thông số tài liệu như số lượt tải và số lượt xem, … Tất cả các nội dung đều có thể được kiểm duyệt thông qua hệ thống kiểm duyệt của Quản trị viên Ngoài ra, quản trị viên còn có thể quản lý tài khoản người dùng,… Hai tính năng nâng cao của hệ thống đó chính là E-learning và hỏi đáp học tập (mô-tuýt gần giống với Stack-Overflow) Với E-learning, người học có thể chọn môn, chọn khoá học để bắt đầu học Nội dung học tập trong hệ thống E-learning cũng sẽ được cung cấp bởi quản trị viên thông qua trang quản lý E-learning

Với hỏi đáp học tập, người dùng có thể đăng câu hỏi, nếu có câu trả lời cho một câu hỏi đang mở, người dùng cũng có thể thực hiện đăng tải câu trả lời Cả câu hỏi và câu trả lời đều có thể tương tác được (like/dislike)

Phương pháp thực hiện:

Thực hiện đề tài theo các bước:

− Phân tích đề tài

− Khảo sát những khó khăn còn tồn đọng trong quá trình học tập của các bạn và

đề xuất giải pháp thông qua hệ thống tự động với các tính năng phục vụ giải quyết những khó khăn ấy

− Phân tích yêu cầu thu thập được

− Tiến hành thiết kế giao diện cho hệ thống

− Tiến hành thiết kế mock-up của hệ thống

Trang 5

− Tiến hành thiết kế API backend của hệ thống

− Tiến hành thiết kế cơ sở dữ liệu của hệ thống

Trang 6

− Hệ thống có các tính năng bám sát nhu cầu học tập của sinh viên

sau:

 Hệ thống bài viết:

khác hoặc quản trị viên

• Tìm kiếm một bài viết, thực hiện lọc theo các tiêu chí khác nhau (Thời gian, Danh mục,Tags,…)

 Hệ thống tài liệu:

• Tìm kiếm một tài liệu, thực hiện lọc theo các tiêu chí khác nhau (Môn học, Danh mục,Tags,…)

• Thao tác với các bài tập, bài kiểm tra của khoá học

 Tất cả tính năng của khách truy cập bình thường

 Hệ thống bài viết:

• Thực hiện tương tác với bài viết (like/dislike, bình luận, save về thư viện của mình,…)

Trang 7

• Thực hiện đăng tải một bài viết

• Thực hiện bình luận vào một bài viết

• Thực hiện chỉnh sửa bài viết (đối với bài viết của cá nhân

• Thực hiện đăng tải một tài liệu

• Thực hiện bình luận vào một tài liệu

• Thực hiện chỉnh sửa tài liệu (đối với tài liệu do cá nhân

họ đăng tải)

• Thực hiện report tài liệu

 Hệ thống quản lý tài khoản:

• Quản lý thông tin tài khoản (tên đăng nhập, mật khẩu, email,…)

• Quản lý các thông báo cá nhân (khi có người like, comment vào bài viết của mình,…)

 Hệ thống E-learning:

• Thực hiện lưu một khoá học vào kho “Khoá học đã lưu”

o Đối với quản trị viên:

 Tất cả tính năng của người dùng đã đăng ký

 Quản lý bài viết và duyệt bài viết

 Quản lý tài liệu và duyệt tài liệu

 Quản lý danh mục bài viết/tài liệu

Trang 8

 Quản lý các thông báo (Announcement) trên Website

 Quản lý người dùng (chỉnh role, ban/unban,…)

 Xem nhật kí hoạt động của Website

 Xem thống kê của Website (Lượt truy cập, Bài viết, tài liệu)

 Quản lý khoá học (thêm/sửa/xoá)

 Quản lý các danh mục của khoá học

− Triển khai ứng dụng:

o Back-End: Hetzner Cloud

o Front-End: ReactJS

khó khăn còn tồn đọng trong việc tự học của sinh viên

Trang 9

Sinh viên 2

(Ký tên và ghi rõ họ tên)

Trang 10

M ỤC LỤC

Chương 1 TỔNG QUAN 1

1.1 Giới thiệu/Lí do chọn đề tài 1

1.2 Mục tiêu 1

1.2 Phạm vi 3

1.3 Nội dung nghiên cứu 3

1.4 Phương pháp thực hiện 3

1.5 Mô tả tính năng 4

1.6 Ý nghĩa thực tiễn 5

Chương 2 CÔNG NGHỆ SPRING VÀ REACTJS 6

2.1 Tổng quan về hệ sinh thái Spring Framework 6

2.2 Thư viện ReactJS và Redux 9

Chương 3 HỆ THỐNG HỖ TRỢ HỌC TẬP TOÀN DIỆN 12

3.1 Xác định và phân tích yêu cầu 12

3.2 Đặc tả Use-case 17

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

3.4 Thiết kế kiến trúc hệ thống 47

3.5 Thiết kế giao diện và xử lý 51

3.6 Triển khai hệ thống 86

Chương 4 KẾT LUẬN 88

4.1 Kết quả đạt được 88

4.2 Thuận lợi và khó khăn 93

4.3 Hướng phát triển 93

TÀI LIỆU THAM KHẢO 94

Trang 11

DANH M ỤC HÌNH VẼ

Hình 2-1 Sơ đồ hoạt động của Spring Boot 7

Hình 2-2 Sơ đồ hoạt động của Spring Boot 8

Hình 2-3 Sơ đồ kiến trúc Hibernate ORM 8

Hình 2-4 Logo ReactJS 9

Hình 2-5 Hình ảnh minh hoạ cho các state nếu sử dụng và không sử dụng Redux 10

Hình 3-1 Use case tổng quát 17

Hình 3-2 Use case Hệ thống bái viết 18

Hình 3-3 Use case Hệ thống tài liệu 19

Hình 3-4 Use case Hệ thống quản lý người dùng 20

Hình 3-5 Use case hệ thống tính điểm người dùng 21

Hình 3-6 Use case Hệ thống E-learning 22

Hình 3-7 Use case Làm bài kiểm tra 23

Hình 3-8 Use case Hệ thống hỏi đáp 24

Hình 3-9 Sơ đồ ERD của hệ thống 25

Hình 3-10 Kiến trúc tổng thể hệ thống 47

Hình 3-11 Sơ đồ kiến trúc Front-end 48

Hình 3-12 Kiến trúc Back-end 50

Hình 3-13 Giao diện Header khi chưa thực hiện tìm kiếm 56

Hình 3-14 Giao diện Header khi thực hiện tìm kiếm 56

Hình 3-15 Component HomeDocumentItem và HomePostItem 60

Hình 3-16 Component PostItem 62

Hình 3-17 Giao diện DocumentItem 64

Hình 3-18 Giao diện màn hình trang chủ 67

Hình 3-19 Giao diện màn hình PostsList 69

Hình 3-20 Giao diện màn hình DocumentsList 70

Trang 12

Hình 3-22 Giao diện màn hình Register 72

Hình 3-23 Giao diện Component SubjectItem 73

Hình 3-24 Giao diện màn hình danh sách khoá học 75

Hình 3-25 Giao diện màn hình CreatePost 77

Hình 3-26 Giao diện màn hình UploadDocument 79

Hình 3-27 Giao diện màn hình PostApproving 81

Hình 3-28 Giao diện màn hình DocumentApproving 83

Hình 3-29 Giao diện màn hình CoursesManagement 85

Hình 3-30 Deployment Diagram của hệ thống 86

Hình 4-1 Màn hình trang chủ 89

Hình 4-2 Một số màn hình tìm kiếm 90

Hình 4-3 Màn hình CreatePost và UploadDocument 91

Hình 4-4 Màn hình PostApproving và DocumentApproving 91

Hình 4-5 Màn hình CoursesList 92

Hình 4-6 Các màn hình khác liên quan tới khoá học 92

Trang 13

DANH M ỤC BẢNG

Bảng 3-1 Danh sách các Actor 12

Bảng 3-2 Danh sách các Usecase 12

Bảng 3-3 Bảng Activity 25

Bảng 3-4 Bảng Announcement 26

Bảng 3-5 Bảng CourseCategory 27

Bảng 3-6 Bảng CourseSubjectGroup 27

Bảng 3-7 Bảng Course 28

Bảng 3-8 Bảng CourseHeading 29

Bảng 3-9 Bảng CoursePart 30

Bảng 3-10 Bảng CourseContent 31

Bảng 3-11 Bảng CourseUserSaved 31

Bảng 3-12 Bảng CourseMCQQuestion 32

Bảng 3-13 Bảng CourseMCQAnswer 33

Bảng 3-14 Bảng Doc 34

Bảng 3-15 Bảng DocCategory 36

Bảng 3-16 Bảng DocDocTag 36

Bảng 3-17 Bảng UserDocReaction 37

Bảng 3-18 Bảng DocSubject 38

Bảng 3-19 Bảng Notification 38

Bảng 3-20 Bảng Post 40

Bảng 3-21 Bảng PostCategory 40

Bảng 3-22 Bảng PostComment 41

Bảng 3-23 Bảng PostCommentUserLike 42

Bảng 3-24 Bảng PostPostTag 43

Bảng 3-25 Bảng PostUserLike 43

Trang 14

Bảng 3-27 Bảng Tag 45

Bảng 3-28 Bảng UserWebsite 45

Bảng 3-29 Bảng UserWebsiteRole 46

Bảng 3-30 Bảng danh sách các Component của Front-end 48

Bảng 3-31 Bảng danh sách các Component của Back-end 50

Bảng 3-32 Bảng danh sách màn hình 51

Bảng 3-33 Bảng mô tả Component của Header 56

Bảng 3-34 Bảng Mô tả component HomeDocumentItem và HomePostItem 60

Bảng 3-35 Bảng Mô tả component PostItem 62

Bảng 3-36 Bảng Mô tả component DocumentItem 64

Bảng 3-37 Bảng Mô tả màn hình trang chủ 67

Bảng 3-38 Bảng Mô tả màn hình PostsList 69

Bảng 3-39 Bảng Mô tả màn hình DocumentsList 70

Bảng 3-40 Bảng Mô tả màn hình Đăng nhập/Đăng ký 72

Bảng 3-41 Bảng Mô tả màn hình SubjectItem 73

Bảng 3-42 Bảng Mô tả màn hình CoursesList 75

Bảng 3-43 Bảng Mô tả màn hình CreatePost 77

Bảng 3-44 Bảng Mô tả màn hình Upload Document 79

Bảng 3-45 Bảng Mô tả màn hình PostApproving 81

Bảng 3-46 Bảng Mô tả màn hình DocumentApproving 83

Bảng 3-47 Bảng Mô tả màn hình CoursesManagement 85

Bảng 3-48 Mô tả Deployment Digram của hệ thống 86

Trang 15

DANH M ỤC TỪ VIẾT TẮT

2 HTTD Học tập toàn diện Hệ thống hỗ trợ học tập toàn diện

Trang 16

Chương 1 TỔNG QUAN

Tự học là một kỹ năng không chỉ cần thiết trong quá trình học tập ở trường, mà còn là

đó là trường đại học yêu cầu sinh viên có khả năng tự học cao Từ đó có khả năng tự nghiên cứu, sáng tạo, áp dụng lí thuyết giải quyết bài toán thực tiễn

Hiện nay, với sự xuất hiện của Internet cùng với sự phổ biến đại trà của các thiết bị điện

tử, sinh viên có thể tìm được tài liệu học tập thông qua Internet Tuy vậy, những hoạt động chia sẻ tài liệu, hay những khoá học hiện nay đều xuất hiện chủ yếu ở quy mô tự phát, ảnh hưởng đến sự hiệu quả trong quá trình tự học của sinh viên

Đó là lý do nhóm đã quyết định chọn đề tài Đồ án 2 là "Áp dụng Spring kết hợp ReactJS phát triển hệ thống hỗ trợ học tập toàn diện” (tên tiếng Anh: “Building a feature rich learning assistance website using Spring and ReactJS”)

Thông qua đề tài này, nhóm hi vọng:

khác quan tâm đến Công nghệ Thông tin nói chung có nguồn tự học tập hiệu quả

giúp sinh viên phát huy tối đa sức mạnh của bản thân

− Tạo một môi trường giúp các bạn chia sẻ kiến thức và kinh nghiệm, cũng như kĩ năng trong việc học tập nói riêng và chuyên môn nói chung

mang lại nhiều lợi ích đến cộng đồng

Hiểu rõ được những cách sử dụng cơ bản và nâng cao của các công nghệ đã nêu trên Áp dụng các kĩ thuật nâng cao, các best-practices để tăng hiệu suất trang Web, nhất là trong

Trang 17

những lúc cao điểm Đồng thời, xây dựng và phát triển hệ thống hỗ trợ học tập toàn diện với những tính năng chính sau:

Đối với người học:

− Tạo tài khoản

hiện tương tác với hệ thống như Post bài viết/tài liệu, Comment vào bài viết/tài liệu, Like/Dislike một bài viết/tài liệu,…

− Tìm kiếm bài viết/khoá học/tài liệu/hỏi đáp

− Xem bài viết/tài liệu/khoá học/hỏi đáp

− Tạo mới bài viết/tài liệu/hỏi đáp

− Thực hiện tương tác với bài viết/tài liệu (like/dislike, lưu về thư viện cá nhân, …)

− Thực hiện tương tác với câu hỏi đáp (upvote/downvote, trả lời câu hỏi, đặt câu hỏi,…)

− Thực hiện tương tác với khoá học (Save về thư viện cá nhân)

− Thực hiện các bài tập trên khoá học và được tính điểm

tải (VD +5 điểm khi có người like, -1 điểm khi có người dislike,…)

liệu/câu hỏi đã đăng

Đối với quản trị viên:

− Quản lý (thêm/sửa/xoá/duyệt) một bài viết/tài liệu/khoá học

− Quản lý thông báo đến trang chủ của Website

− Quản lý người dùng: Cài đặt quyền hạn, Ban/Unban

− Quản lý danh mục bài viết/tài liệu: Thêm/Sửa/Xoá

− Quản lý nội dung bài viết/tài liệu/khoá học/hỏi đáp: Duyệt, xoá, sửa

Trang 18

− Xem nhật ký hoạt động của tất cả các thành viên trên hệ thống

− Xem thống kê của hệ thống

có quan tâm đến việc tự học kiến thức CNTT

− Môi trường sử dụng: Bất kì thiết bị nào hỗ trợ trình duyệt Web và có thể truy cập Internet

best practices tương ứng với những công nghệ này và áp dụng thực tế

− Nghiên cứu và áp dụng kĩ thuật nâng cao hiệu suất của hệ thống khi số lượng người dùng tăng (VD cân bằng tải, CDN, cache,…)

− Nghiên cứu các quy tắc thiết kế nhằm bảo mật dữ liệu và bảo vệ hệ thống khỏi sự tấn công từ các tác nhân bên ngoài

và nhỏ

Thực hiện đề tài theo các bước:

đồng thời đề xuất giải pháp dưới dạng hệ thống tự động nhằm giúp việc tự học diễn ra hiệu quả hơn

− Liệt kê các khó khăn trong quá trình tự học và giải pháp

− Tham khảo một số hệ thống tương tự ở nhiều trang Web khác

− Phân tích các yêu cầu đã thu thập được

− Thiết kế cơ bản các yêu cầu

Trang 19

− Nghiên cứu công nghệ để áp dụng

− Phát triển sản phẩm qua các giai đoạn, đồng thời nhận ý kiến phản hồi

− Kiểm thử và hoàn thiện

Hệ thống cung cấp một giải pháp hỗ trợ học tập toàn diện cho sinh viên

− Với nhu cầu tìm hiểu những kiến thức được chia sẻ bởi các thành viên khác, hệ

thống có tính năng bài post

danh sách các kiến thức được biên soạn có bài bản và hệ thống, được cung cấp dưới tính năng E-learning

− Với nhu cầu hỏi đáp, hệ thống cung cấp tính năng “Hỏi và Đáp”

− Với nhu cầu tìm đọc tài liệu, tính năng “Chia sẻ tài liệu” là nơi lý tưởng và hoàn chỉnh tổng hợp rất nhiều tài liệu được cung cấp bởi cộng đồng

Trang 20

Ngoài ra, với việc cho phép tương tác như like/dislike, comment, lưu về kho tài liệu cá nhân,… hệ thống cũng là nơi gắn kết các bạn sinh viên có niềm đam mê với học tập cùng

có một nơi để chia sẻ đến cộng đồng

Nhóm kì vọng hệ thống sẽ được đa số các bạn sinh viên CNTT chấp nhận và sử dụng như một công cụ hằng ngày Ngoài ra, nhóm cũng hi vọng sẽ triển khai được đến sinh viên những trường khác có quan tâm đến việc tự học CNTT

Trang 21

Chương 2 CÔNG NGHỆ SPRING VÀ REACTJS

2.1.1 Spring RESTful Web Service

Spring Framework là một nền tảng ngôn ngữ Java, cung cấp cơ sở hạ tầng toàn diện để phát triển ứng dụng Java

Spring Framework cung cấp các thành phần được thiết kế sẵn có thể được sử dụng để phát triển các ứng dụng với độ kết dính thấp Đặc biệt, hệ sinh thái Spring Framework cực kỳ mạnh mẽ, với số lượng plugin hỗ trợ cực kì đa dạng đảm bảo có thể phục vụ mọi nhu cầu từ hệ thống linh hoạt nhất đến hệ thống lớn và phức tạp nhất

Spring RESTful Web Service tỏ ra cực kì phù hợp với các yêu cầu của hệ thống này Kiến trúc của Spring RESTful Web Services bao gồm:

thực hiện một công việc cụ thể

− Repository: Nơi thực hiện gọi đến Database để lấy dữ liệu

Trang 22

Hình 2-1 Sơ đồ hoạt động của Spring Boot

2.1.2 Spring Boot

Là một công cụ hỗ trợ cấu hình hệ thống Spring nhanh chóng Với Spring Boot, chúng

ta sẽ không cần phải thực hiện cấu hình lại từng chỉ tiết nhỏ nhất trong hệ thống

2.1.3 Spring Security

Bộ công cụ mạnh mẽ cung cấp tiện ích nhằm giúp cho việc Authorization và Authentication diễn ra đơn giản hơn Thay vì phải viết lại mọi thứ từ đầu, Spring Security cung cấp sẵn những công cụ được dựng sẵn để ta có thể sử dụng ngay

Spring Security định nghĩa ra các Filter, giúp chúng ta thực hiện lọc trên request dễ dàng:

Trang 23

Hình 2-2 Sơ đồ hoạt động của Spring Boot

ORM là một framework cho phép người lập trình thao tác với database một cách hoàn toàn tự nhiên thông qua các đối tượng Lập trình viên hoàn toàn không quan tâm đến loại database sử dụng SQL Server, MySQL, PostgreSQL, … Và Hibernate là một ORM framework

ORM giúp đơn giản hoá việc tạo ra dữ liệu, thao tác dữ liệu và truy cập dữ liệu Đó là một kỹ thuật lập trình để ánh xạ đối tượng vào dữ liệu được lưu trữ trong cơ sở dữ liệu

Trang 24

2 2 Thư viện ReactJS và Redux

2.2.1 ReactJS

xây dựng Giao diện người dùng (UI) React JS được sử dụng rộng rãi và có hệ sinh thái đa dạng, phong phú React cho phép nhúng code html trong code javascript, có thể dễ dàng lồng các đoạn HTML vào trong JS Tích hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn

Hình 2-4 Logo ReactJS

Nguồn: https://auth0.com/blog/bootstrapping-a-react-project/

− Mục đích sử dụng của ReactJS:

Client-side rendering

o Có document rõ ràng (https://reactjs.org/) , cộng đồng hỗ trợ mạnh mẽ

Trang 25

o Rất nhiều website có lượng truy cập lớn sử dụng tới ReactJS: facebook, instagram, KhanAcademy, dropbox, Atlassian, Netflix, Reddit, BBC, Cloudflare

một website hoàn chỉnh

Trong project còn sử dụng nhiều thư viện khác tích hợp với reactjs như react-router-dom, material-ui, react-router, redux, redux-thunk

2.2.2 Redux

− Redux là một thư viện Javascript, được xây dựng trên kiến trúc Flux do facebook giới thiệu để quản lý state của môt ứng dụng dễ dàng hơn và có thể kết hợp hoàn hảo với ReactJS

xuyên diễn ra, tuy nhiên nếu sử dụng nhiều sẽ dẫn tới sự coupling trong cấu trúc code, Redux ra đời để giải quyết vấn đề trên

Trang 26

Ngu ồn: freetut.net

− Một số thành phần chính của Redux:

o Action: Mang thông tin (payload, data) gửi lên store khi được gọi

o Reducer: Xác đinh state sẽ thay đổi như thế nào sau khi gọi action

o Store: Là nơi quản lý State, cho phép truy cập, cập nhật, state

trả về sẽ gọi một loại action tương ứng từ đó cập nhật state

Trang 27

Chương 3 HỆ THỐNG HỖ TRỢ HỌC TẬP TOÀN DIỆN

3.1.1 Danh sách các Actor

B ảng 3-1 Danh sách các Actor

3.1.2 Danh sách các Use-case

Bảng 3-2 Danh sách các Usecase

Syntax

Kiểm tra các lỗi liên quan đến format và thông báo đến người dùng

Trang 28

11 Reupload đến

Google Drive

Quản trị hệ thống thực hiện reup lên Google Drive để lưu trữ tài liệu lâu dài

liệu

Xem những thông tin giản lược của một tài liệu

tài liệu

Tiến hành quyên góp cho tài liệu

cảnh)

Xem thông tin của một User

Trang 29

Xem các bài viết User đã lưu

liệu

bài post/tài liệu

người dùng

tại

Rules

Quản lý các quy luật tăng/giảm điểm

chương

Truy cập đến một chương của môn học

Trang 30

Quản trị viên tiến hành duyệt đóng góp của người dùng

Đưa ra danh sách các kiến thức cần học trước khi thực

hiện bài kiểm tra

Thêm/sửa/xoá bài kiểm tra

Trang 31

Lưu lại câu hỏi/Câu trả lời vào bộ câu hỏi/câu trả lời của

cá nhân người dùng để tiện truy cập sau này

hỏi/Câu trả lời

Báo cáo một câu hỏi/câu trả lời vi phạm điều khoản sử dụng trang web

Trang 32

3.2 Đặc tả Use-case

User

Admin

Gửi bài viết

Xem bài viết

Duyệt bài viết

Kiểm tra Syntax Kiểm tra logic nghiệp vụ khác

<<extend>>

Xem lịch sử

<<extend>>

Xoá bài viết

Upload tài liệu

Duyệt tài liệu

Xem tài liệu

Reupload đến Google Drive

Xem trước tài liệu

Tải về tài liệu

<<extend>>

Quản lý danh mục tài liệu <<include>> Thêm/Sửa/Xoá

danh mục

Rate Document <<extend>> Bình luận trên tài liệu

Xoá bình luận

<<include>> Lưu lịch sử

Báo cáo tài liệu

Xoá tài liệu

Quyên góp Xem thông tin User

Xem những tài liệu

và câu hỏi liên quan

Gửi câu trả lời

<<extend>> Up/Down vote

<<extend>>

Chấp nhận câu trả lời

<<extend>>

Xoá câu hỏi

Xoá câu trả lời

Bình luận

Lưu câu hỏi/Câu trả lời

Báo cáo câu hỏi/Câu trả lời

Hình 3-1 Use case t ổng quát

Trang 33

3.2.2 H ệ thống bài viết

User

Gửi bài viết

Xem bài viết

Duyệt bài viết

Kiểm tra Syntax

Kiểm tra logic nghiệp vụ khác

Trang 34

3.2.3 H ệ thống tài liệu

User

Upload tài liệu

Duyệt tài liệu

Xem tài liệu

Admin

Reupload đến Google Drive

Xem trước tài liệu

Tải về tài liệu

<<extend>>

Quản lý danh mục tài liệu <<include>> Thêm/Sửa/Xoádanh mục

Rate Document <<extend>> Bình luận trên tài liệu

Xoá bình luận

Báo cáo tài liệu

Xoá tài liệu

Quyên góp cho tài liệu

Hình 3-3 Use case H ệ thống tài liệu

Trang 37

Đọc nội dung

Xem những tài liệu

và câu hỏi liên quan

<<include>>

Hình 3-6 Use case Hệ thống E-learning

Trang 38

3.2.7 H ệ thống làm kiểm tra

Gợi ý kiến thức cần học trước

Xem những câu hỏi liên quan

Gợi ý những kiến thức cần ôn tập lại

Quản lý bài kiểm tra

Hình 3-7 Use case Làm bài kiểm tra

Trang 39

3.2.8 H ệ thống hỏi đáp

User

Đặt câu hỏi

Gửi câu trả lời

<<extend>>

Chấp nhận câu trả lời

<<extend>>

Admin

Xoá câu hỏi

Xoá câu trả lời

Bình luận

Lưu câu hỏi/Câu trả lời

Báo cáo câu hỏi/Câu trả lời

Hình 3-8 Use case Hệ thống hỏi đáp

Trang 40

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

Hình 3-9 Sơ đồ ERD của hệ thống

B ảng 3-3 Bảng Activity

Activity

Mô tả: Lưu thông tin về các hoạt động của người dùng trong hệ thống

Ngày đăng: 05/09/2021, 20:45

TỪ KHÓA LIÊN QUAN

TRÍCH ĐOẠN

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

🧩 Sản phẩm bạn có thể quan tâm

w