Á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

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

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

ĐỒ ÁN 2

Á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
BUILDING A FEATURE RICH LEARNING ASSISTANCE WEBSITE USING
SPRING AND REACTJS

KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM

GIẢNG VIÊN HƯỚNG DẪN
THS. HUỲNH HỒ THỊ MỘNG TRINH

TP. HỒ CHÍ MINH, 2021


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 chun 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 hồ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à q 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 hồn thiện hơn mỗi ngày.
Trong suốt q 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


ĐHQG TP. HỒ CHÍ MINH

CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM

TRƯỜNG ĐẠI HỌC

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

CÔNG NGHỆ THÔNG TIN

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
Cán bộ hướng dẫn: ThS. Huỳnh Hồ Thị Mộng Trinh
Thời gian thực hiện: Từ tháng 03/2021 đến tháng 06/2021
Sinh viên thực hiện:
Lưu Biêu Nghị

17520794

Nguyễn Văn Đơng

17520350

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.
− Cài đặt môi trường Cloud để chạy thử nghiệm thực tế hệ thống.
Phạm vi:


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. Ngồ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 khố 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 q 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.


− 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.
− Tiến hành định nghĩa các yêu cầu về bảo mật của hệ thống.
− Tiến hành nghiên cứu và lựa chọn công nghệ sử dụng.
− Phát triển sản phẩm.
− Kiểm thử tích hợp.
− Nhận ý kiến phản hồi từ người dùng.
− Hoàn thiện sản phẩm.
Đối tượng:
Sinh viên toàn trường ĐHCNTT nói riêng và sinh viên tồn quốc nói chung có quan
tâm đến việc cải thiện kết quả học tập bằng hệ thống online, cũng như quan tâm đến

việc chia sẻ kiến thức.
Những công nghệ được sử dụng:
− Backend:
o Spring Boot.
o Spring Security.
o Hibernate.
− Frontend:
o ReactJS.
Kết quả dự kiến:
− Hiểu rõ và nắm vững cơ chế hoạt động của Spring, Hibernate, Spring
Security.
− Hiểu và áp dụng được các best practices đang được áp dụng trong các hệ
thống thực tế.


− 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.
− 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 chức năng
sau:
o Đối với khách truy cập bình thường:
 Hệ thống bài viết:
• Xem được các bài viết đã được đăng tải bởi người dùng
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:
• Xem được 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,…).
• Xem được các bình luận của những thành viên đã đăng
ký.

• Tải được tài liệu.
 Hệ thống E-learning:
• Xem được nội dung các khố học.
• Tìm kiếm được các khố học.
• Lọc các khố học theo chủ đề.
• Thao tác với các bài tập, bài kiểm tra của khoá học.
o Đối với người dùng đã đăng ký:
 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,…).


• 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
họ đăng tải).
• Thực hiện report bài viết.
 Hệ thống tài liệu:
• Thực hiện tương tác với tài liệu (upvote/downvote, lưu
tài liệu về kho của mình,…).
• 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,…).
• Xem được những bài viết đã lưu, những tài liệu đã lưu.
 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.


 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.
Kế hoạch thực hiện:
− Giai đoạn 1: (Tháng 9/2020 – 10/2020): Tìm hiểu và phân tích những vấn đề
khó khăn cịn tồn đọng trong việc tự học của sinh viên.
− Giai đoạn 2: (Tháng 10/2020 – 11/2020): Thiết kế hệ thống.
− Giai đoạn 3: (Tháng 11/2020 – 1/2020): Triển khai cài đặt.
− Giai đoạn 4: (Tháng 1/2020): Thực hiện kiểm thử toàn diện.
Xác nhận của CBHD

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

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

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

ThS. Huỳnh Hồ Thị Mộng Trinh
Lưu Biêu Nghị


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

Nguyễn Văn Đông


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


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 qt .......................................................................................... 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
Hình 3-21 Giao diện màn hình Login ............................................................................ 71


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 khố 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


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
Bảng 3-26 Bảng PostUserSaved .................................................................................... 44


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

DANH MỤC TỪ VIẾT TẮT
STT Từ viết tắt

Từ đầy đủ

Ý nghĩa

1

SV

Sinh viên

Sinh viên trong trường ĐHCNTT.

2

HTTD

Học tập toàn diện

Hệ thống hỗ trợ học tập tồn diện
(sản phẩm đồ án).

3

CNTT

Cơng nghệ Thông
tin

Công nghệ Thông tin.


Chương 1. TỔNG QUAN
1.1. Giới thiệu/Lí do chọn đề tài
Tự học là một kỹ năng không chỉ cần thiết trong q trình học tập ở trường, mà cịn là
một kĩ năng quan trọng trong cuộc sống. Học đại học có điểm khác so với học phổ thơng
đó 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 tố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 q 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:
− Sinh viên Đại học Cơng nghệ Thơng tin nói riêng và sinh viên các trường Đại học
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ả.
− Đảm bảo tất cả sinh viên đều có cơ hội như nhau trong việc tiếp cận thông tin,
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à chun mơn nói chung.
− Thúc đẩy và khuyến khích các bạn sinh viên tạo ra nhiều sản phẩm thiết thực,
mang lại nhiều lợi ích đến cộng đồng.
1.2. Mục tiêu
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

1


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.
− Đăng nhập vào tài khoản để quản lý và theo dõi tiến độ học tập, cũng như để thực
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.
− Được tính điểm khi có người dùng khác tương tác đến những gì mà mình đăng
tải (VD +5 điểm khi có người like, -1 điểm khi có người dislike,…).
− Xem thông tin cá nhân, các thông báo của cá nhân, danh sách các bài viết/tài
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/khố 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.

2


− 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.
1.2. Phạm vi
− Đối tượng: Sinh viên Đại học Công nghệ Thơng tin và sinh viên các trường khác
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.
1.3. Nội dung nghiên cứu
− Nghiên cứu, tìm hiểu về cơng nghệ Spring, Hibernate và ReactJS. Tìm hiểu những
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 ngồi.
− Nâng cao và củng cố kĩ năng xây dựng một hệ thống chạy thực tế với quy mô vừa
và nhỏ.
1.4. 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: Tìm hiểu những khó khăn hạn chế việc tự học của sinh viên,
đồ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.

3


− 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.
− Cài đặt môi trường để triển khai và chạy thử nghiệm, sau đó là chạy thực tế hệ
thống.
− Triển khai và thiết kế hệ thống một cách chuyên nghiệp, tối đa hoá tính tái sử
dụng, tính bảo trì của hệ thống.
Những cơng nghệ được sử dụng:
− Back-end:
o Spring MVC.
o Hibernate (PostgreSQL).
o Cache (Redis).
− Front-end:
o ReactJS.
1.5. Mơ tả tính năng
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.
− Với nhu cầu học tập theo một khố học, hệ thống hỗ trợ tính năng này với chuỗi
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.

4

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.
1.6. Ý nghĩa thực tiễn
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. Ngồ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.

5


Chương 2. CÔNG NGHỆ SPRING VÀ REACTJS.
2.1. Tổng quan về hệ sinh thái Spring Framework
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:
− Controller: Nơi sẽ tiếp nhận các yêu cầu của người dùng.
− Service: Nơi cung cấp các phương thức dịch vụ gồm nhiều bước khác nhau để
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.
− Entity: Các đối tượng đại diện cho các bảng trong CSDL.

6

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:

7


Hình 2-2 Sơ đồ hoạt động của Spring Boot
2.1.4. Hibernate
ORM là một framework cho phép người lập trình thao tác với database một cách hồn
tồn tự nhiên thơng qua các đối tượng. Lập trình viên hồn tồ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.

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

8


2.2. Thư viện ReactJS và Redux

2.2.1. ReactJS
− ReactJS là một thư viện viết bằng JavaScript, được facebook phát triển, dùng để
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: />− Mục đích sử dụng của ReactJS:
o Xây dựng các Single Page Application (SPA).
o Xây dựng các website từ các component có tính tái sử dụng và mở rộng.
o Cải thiện hiệu suất, trải nghiệm website thông qua Virtual DOM và Clientside rendering.
− Ưu điểm của ReactJS:
o Dễ dàng tiếp cận và tìm hiểu hơn so với nhiều framework.
o Có các plugin hỗ trợ: React Dev Tool, Redux, Dev Tool
o Có document rõ ràng ( , cộng đồng hỗ trợ mạnh mẽ.

9


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.
− Nhược điểm của ReactJS:
o Chỉ là một thư viện UI, cần kết hợp với nhiều thư viện khác để tạo thành
một website hồn chỉnh.
o Kích thước của thư viện này rất lớn.
o Khơng thích hợp với SEO.
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 hồn
hảo với ReactJS.
− Trong ứng dụng ReactJS, việc phải chia sẻ các state thông qua props thường
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.

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