Xây dựng hệ thống thư viện và hỗ trợ đọc sách trực tuyến

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌCSƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHÓA LUẬN TỐT NGHIỆP NGÀNH KỸ THUẬT DỮ LIỆU XÂY DỰNG HỆ THỐNG THƯ VIỆN VÀ HỖ TRỢ ĐỌC SÁCH TRỰC TUYẾN GVHD: TS.

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC

SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH

KHÓA LUẬN TỐT NGHIỆP NGÀNH KỸ THUẬT DỮ LIỆU

XÂY DỰNG HỆ THỐNG THƯ VIỆN VÀ HỖ TRỢ ĐỌC SÁCH TRỰC TUYẾN

GVHD: TS LÊ VĂN VINH SVTH: NGUYỄN TRUNG TÍN

HUỲNH THỊ THUÝ VY

SKL009619

Tp.Hồ Chí Minh, năm 2022

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ

MINH KHOA CÔNG NGHỆ THÔNG TIN

-NGUYỄN TRUNG TÍN - 18110381 HUỲNH THỊ THUÝ VY - 18110400

Đề Tài:

XÂY DỰNG HỆ THỐNG THƯ VIỆN VÀ

HỖ TRỢ ĐỌC SÁCH TRỰC TUYẾN

KHOÁ LUẬN TỐT NGHIỆP

GIẢNG VIÊN HƯỚNG DẪN

TS LÊ VĂN VINH

KHÓA 2018 - 2022

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ

MINH KHOA CÔNG NGHỆ THÔNG TIN

-NGUYỄN TRUNG TÍN - 18110381 HUỲNH THỊ THUÝ VY - 18110400

Đề Tài:

XÂY DỰNG HỆ THỐNG THƯ VIỆN VÀ

HỖ TRỢ ĐỌC SÁCH TRỰC TUYẾN

KHOÁ LUẬN TỐT NGHIỆP

GIẢNG VIÊN HƯỚNG DẪN

TS LÊ VĂN VINH

KHÓA 2018 - 2022

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên 1: Nguyễn Trung Tín MSSV 1: 18110381

Họ và tên Sinh viên 2: Huỳnh Thị Thuý Vy MSSV 2: 18110400

Ngành: Công nghệ Thông tin

Tên đề tài: Xây dựng hệ thống thư viện và hỗ trợ đọc sách trực tuyến

Họ và tên Giáo viên hướng dẫn: TS Lê Văn Vinh

NHẬN XÉT

1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không?

Tp Hồ Chí Minh, ngày tháng năm 2022

Giáo viên hướng dẫn

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

ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên 1: Nguyễn Trung Tín MSSV 1: 18110381

Họ và tên Sinh viên 2: Huỳnh Thị Thuý Vy MSSV 2: 18110400

Ngành: Công nghệ Thông tin

Tên đề tài: Xây dựng hệ thống thư viện và hỗ trợ đọc sách trực tuyến

Họ và tên Giáo viên phản biện: ThS Mai Anh Thơ

Tp Hồ Chí Minh, ngày tháng năm 2022

Giáo viên phản biện

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

LỜI CẢM ƠN

Lời đầu tiên, nhóm xin phép được gửi lời cảm ơn chân thành đến với KhoaCông Nghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ ChíMinh đã tạo điều kiện cho nhóm chúng em được trau dồi, học tập và phát triển nềntảng kiến thức vững chắc để thực hiện đề tài này

Bên cạnh đó, nhóm chúng em xin gửi đến thầy Lê Văn Vinh lời cảm ơn chânthành và sâu sắc nhất Thầy đã tận tâm hướng dẫn nhiệt tình và đưa ra những góp ýquý báu cho nhóm chúng em trong suốt quá trình từ lúc bắt đầu cũng như kết thúc đềtài này

Nhờ có những nền tảng kiến thức chuyên ngành vững chắc cộng thêm vớinhững kinh nhiệm và yêu cầu thực tế ngoài xã hội thông qua việc học ở trường vàthực tập ở các công ty Tập thể các thầy cô Khoa Công Nghệ Thông Tin và đặc biệtthầy Lê Văn Vinh đã đem đến cho chúng em một khối lượng kiến thức và kinhnghiệm khổng lồ về chuyên ngành và công việc trong tương lai Đặc biệt điều này đãgiúp và thôi thúc chúng em hoàn thành được đề tài Đây sẽ là hành trang vô cùng lớncủa chúng em trước khi bước ra một cuộc sống mới

Tuy nhiên lượng kiến thức là vô tận và với khả năng hạn hẹp chúng em đã rất

cố gắng để hoàn thành một cách tốt nhất Chính vì vậy việc xảy ra những thiếu sót làđiều khó có thể tránh khỏi Chúng em hi vọng nhận được sự góp ý tận tình của quýthầy (cô) qua đó chúng em có thể rút ra được bài học kinh nghiệm và hoàn thiện và cảithiện nâng cấp lại sản phẩm của mình một cách tốt nhất có thể

Chúng em xin chân thành cảm ơn!

Nhóm thực hiện

Nguyễn Trung Tín – 18110381 Huỳnh Thị Thuý Vy – 18110400

1

Trường Đại học Sư phạm Kỹ thuật TP.HCM

Khoa Công nghệ Thông tin

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP

Họ và Tên SV thực hiện 1: Nguyễn Trung Tín Mã Số SV: 18110381

Họ và Tên SV thực hiện 2: Huỳnh Thị Thuý Vy Mã Số SV: 18110400

Thời gian làm luận văn: Từ 14/03/2022 đến 03/07/2022.

Chuyên ngành: Công nghệ phần mềm

Tên luận văn: Xây dựng hệ thống thư viện và hỗ trợ đọc sách trực tuyến

Giáo viên hướng dẫn: TS Lê Văn Vinh

Nhiệm vụ của luận văn:

- Sử dụng MongoDB để lưu trữ dữ liệu người dùng của hệ thống

- Sử dụng JSON Web Token để xác thực và ủy quyền cho hệ thống API hoạt động tốt và hiệu quả

- Sử dụng thư viện React để thiết kế và xử lý giao diện web cho người dùng thaotác

- Sử dụng Flutter để thiết kế và xử lý giao diện di động cho người dùng sử dụng

Đề cương viết luận văn:

MỤC LỤC

1 Phần MỞ ĐẦU

1.1 Tính cấp thiết của đề tài

1.2 Mục đích của đề tài

1.3 Cách tiếp cận và phương pháp nghiên cứu

- Đối tượng nghiên cứu

- Phạm vi nghiên cứu

1.4 Phân tích những công trình có liên quan

2

1.5 Kết quả dự kiến đạt được

1.8 Các thư viện hỗ trợ khác ở Back-End

2 Chương 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 2.1 Khảo sát hiện trạng

2.2 Kiến trúc chung của hệ thống

2.3 Xác định yêu cầu

2.4 Mô hình hóa yêu cầu

3 Chương 3: THIẾT KẾ PHẦN MỀM 3.1 Lược đồ tuần tự

3.2 Lược đồ lớp

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

3.4 Thiết kế giao diện

4 Chương 4: CÀI ĐẶT VÀ KIỂM THỬ 4.1 Cài đặt phần mềm

- Tìm hiểu về thư viện React củaJavaScript.

2 21/03/2022 – 07/04/2022 - Tìm hiểu về nền tảng NodeJS vàExpressJS

- Tìm hiểu về nền tảng Flutter và ngônngữ Dart

- Tìm hiểu về JSON Web Token để ứngdụng vào xác thực và phân quyền API

3 08/04/2022 – 17/04/2022 - Tìm hiểu về NoSQL và MongoDB đểcủa hệ thống.

áp dụng vào lưu trữ dữ liệu người dùngcủa hệ thống

- Tiến hành phát triển API dựa trên cáckiến thức đã tìm hiểu được và các tài

4 18/04/2022 – 08/05/2022 liệu.

- Tiến hành xây dựng giao diện ngườidùng cho hệ thống

- Kết hợp các phần đã xây dựng lại với

5 09/05/2022 – 09/06/2022 nhau (giao diện, API, cơ sở dữ liệu).

- Tìm hiểu, sửa đổi hệ thống để hoànthiện

6 09/06/2022 – 20/06/2022 Kiểm thử chương trình và tiến hành sửa lỗi

7 21/06/2022 – 10/07/2022 Viết và hoàn thiện báo cáo

Ngày tháng năm 2022

Người viết đề cương

Ý kiến của giáo viên hướng dẫn

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

4

5

2.4.1.1 Phía Người dùng (User) 39

3.4.1 Màn hình giao diện phía Người dùng 1053.4.2 Màn hình giao diện phía Quản trị viên 1293.4.3 Màn hình giao diện phía Người dùng trên điện thoại 157

DANH MỤC HÌNH ẢNH

Hình 4 Các thành phần quan trọng trong NodeJS 22Hình 5 Cấu trúc một API được xây dựng với ExpressJS 23Hình 6 Phân tầng middleware trong ExpressJS 24

Hình 8 Website ‘Thư viện số trường Đại học Sư phạm Kỹ thuật Tp.HCM’ 31

Hình 11 Website, ứng dụng ‘Notion’ – Light mode 34Hình 12 Website, ứng dụng ‘Notion’ – Dark mode 35

Hình 14 Kiến trúc chi tiết của hệ thống sử dụng MERN Stack 36

Hình 17 Sequence “Đăng nhập với tài khoản Google” 59

Hình 19 Sequence “Chỉnh sửa thông tin tài khoản” 61Hình 20 Sequence "Update Account Information API" 62Hình 21 Sequence “Xem thông tin chi tiết Sách” 63Hình 22 Sequence "Get Book Detail API" 64

Hình 25 Sequence “Cập nhật trang sách đang đọc” 67Hình 26 Sequence "Cập nhật trang sách đang đọc API" 67

Hình 34 Sequence “Thêm nhiều Sách vào Thư viện” 77Hình 35 Sequence “Chỉnh sửa thông tin Sách” 78

Hình 38 Sequence "Add Category API" 82Hình 39 Sequence “Chỉnh sửa thông tin Danh mục” 83Hình 40 Sequence "Edit Category API" 84

7

Hình 42 Sequence "Add Tag API" 86Hình 43 Sequence “Chỉnh sửa thông tin Thẻ sách” 87

Hình 46 Sequence "Mua sách và Đọc ngay API" 90

Hình 48 Sequence "Thêm Bình luận API" 91

Hình 51 Screen Flow (Sơ đồ luồng màn hình) cho Guest 105Hình 52 Screen Flow (Sơ đồ luồng màn hình) cho User 106Hình 53 Sidebar Guest (2 hình trái) và Sidebar User (2 hình phải) 107

Hình 73 LO015 – Thông báo Hoàn thành Pomodoro 128Hình 74 Sơ đồ luồn màn hình cho Admin trên Web Admin 129

Hình 79 LOA005 – Cập nhật thông tin người dùng 136

Hình 85 LOA011 – Cập nhật thông tin sách 143

Hình 90 LOA014 – Thống kê và báo cáo sách (a) 149Hình 91 LOA014 – Thống kê và báo cáo sách (b) 150

Hình 93 LOA016 – Thêm/Cập nhật thông tin thẻ 152

Hình 95 LOA018 – Thêm/Cập nhật thông tin danh mục 155

DANH MỤC BẢNG BIỂU

Bảng 2 Mô tả Use case “Đăng nhập với tài khoản Google” 38Bảng 3 Mô tả Use case “Chỉnh sửa thông tin tài khoản” 39Bảng 4 Mô tả Use case “Xem thông tin chi tiết Sách trong Thư viện” 40

Bảng 6 Mô tả Use case “Thêm Sách vào Tủ sách” 41Bảng 7 Mô tả Use case “Xoá Sách khỏi Tủ sách” 42Bảng 8 Mô tả Use case "Chỉnh sửa Tủ sách" 43Bảng 9 Mô tả use case “Thêm bình luận cho Sách” 44Bảng 10 Mô tả Use case “Thêm trả lời bình luận cho Sách” 45Bảng 11 Mô tả Use case “Thêm ghi chú cho Sách” 46Bảng 12 Mô tả Use case “Chỉnh sửa ghi chú Sách” 47Bảng 13 Mô tả Use case “Thêm Sách vào Thư viện” 49Bảng 14 Mô tả Use case “Chỉnh sửa thông tin Sách” 50Bảng 15 Mô tả Use case “Thêm Loại thẻ sách” 51Bảng 16 Mô tả Use case “Chỉnh sửa thông tin Loại thẻ sách” 53

Bảng 18 Mô tả Use case “Chỉnh sửa thông tin Thẻ sách” 55

Bảng 29 Danh sách màn hình sử dụng phía Người dùng 99

Bảng 32 Các đối tượng trên màn hình Tìm kiếm (Search) 104Bảng 33 Các đối tượng trên màn hình Tìm kiếm (Search) 106Bảng 34 Các đối tượng trên màn hình Xem trước sách (View Intro) 108Bảng 35 Các đối tượng trên màn hình Đăng nhập (Log In) 109Bảng 36 Các đối tượng trên màn hình Tủ sách (Bookcase) 111Bảng 37 Các đối tượng trên màn hình Chi tiết tài khoản (Account Detail) 113Bảng 38 Các đối tượng trên màn hình Không gian Ghi chú (Note Space) 114Bảng 39 Các đối tượng trên màn hình Thông tin ghi chú (Note Form) 116Bảng 40 Các đối tượng trên màn hình Sách của tôi (My Books) 117Bảng 41 Các đối tượng trên màn hình Sách của tôi (My Books) 118

10

Bảng 42 Các đối tượng trên màn hình Thông báo Reset Pomodoro 119Bảng 43 Các đối tượng trên màn hình Thông báo Hoàn thành Pomodoro 120Bảng 44 Danh sách các màn hình trên Web quản trị 121

Bảng 46 Các đối tượng trên màn hình Đăng nhập 123Bảng 47 Các đối tượng trên màn hình Quản lí người dùng 124Bảng 48 Các đối tượng trên màn hình Quản lí sách 126Bảng 49 Các đối tượng trên màn hình Thêm/Sửa sách 128

PHẦN MỞ ĐẦU

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Trong bối cảnh công nghệ thông tin và kỹ thuật ngày càng phát triển, cũng nhưsau ảnh hưởng nghiêm trọng của đại dịch COVID-19 lên toàn bộ đời sống xã hội hiệnnay, việc chuyển đổi số đang trở nên phổ biến và là ưu tiên hàng đầu trong tất cả cáclĩnh vực, kể cả các hoạt động giáo dục Cụ thể, các trung tâm, trường học vẫn đangtriển khai hình thức học và trao đổi trực tuyến trên các nền tảng song song với việchọc và giảng dạy trực tiếp tại các cơ sở Từ đó có thể thấy, việc sử dụng và khai tháccác thông tin từ sách vở, tài liệu tham khảo giấy thông thường ở các trung tâm, thưviện trường vẫn còn chưa thuận tiện và tiềm ẩn nhiều nguy cơ khi đại dịch hiện nayvẫn chưa được giải quyết dứt điểm

Vì thế, việc chuyển đổi cả hình thức đọc từ đọc sách giấy thuần tuý sang đọcsách trực tuyến trở nên được ưa chuộng và ưu tiên hơn trong bối cảnh hiện tại

Nhận thức được thực tiễn ấy và với mong muốn hỗ trợ các bạn sinh viên trường cóthể tiếp cận nguồn tài liệu đáng tin cậy, nhanh chóng, miễn phí, cũng như tối ưu các công

cụ hỗ trợ đọc sách và tạo không gian đọc trực tuyến thú vị cho người dùng, nhóm chúng

em quyết định chọn phát triển chủ đề tiểu luận chuyên ngành “XÂY DỰNG HỆ THỐNGTHƯ VIỆN SÁCH VÀ HỖ TRỢ ĐỌC SÁCH TRỰC TUYẾN”

Bên cạnh đó, ứng dụng được xây dựng với mục đích phi lợi nhuận, hướng đến

hỗ trợ các trường đại học, cao đẳng xây dựng thư viện với không gian đọc sách thânthiện, dễ sử dụng, có ngân hàng sách được tham khảo từ nguồn Thư viện trường Đạihọc Sư phạm Kỹ thuật TP.HCM, tạo động lực cho các bạn sinh viên tìm tòi, nghiêncứu và hình thành thói quen đọc sách Có thể nói, đề tài xây dựng hệ thống website vàứng dụng di động của chúng em giải quyết vấn đề công nghệ, về mặt bản quyền sách

do các tổ chức sử dụng chịu trách nhiệm đảm bảo

2 ĐỐI TƯỢNG NGHIÊN CỨU

Đối với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu sử dụng, tham khảosách, tài liệu của các bạn sinh viên, tạo ra được một môi trường đọc sách trực tuyếnthú vị, đồng thời hỗ trợ việc đọc sách với chức năng ghi chú và dịch thuật Bên cạnh

đó là các công nghệ áp dụng để hiện thực hoá sản phẩm Cụ thể như sau:

12

- Tập trung nghiêm cứu Restful API, NodeJS, ExpressJS để xây dựng nên hệthống các APIs hỗ trợ truy xuất và thao tác với dữ liệu một cách chính xác và nhanhchóng nhất.

- Sử dụng cơ sở dữ liệu NoSQL là MongoDB để lưu trữ dữ liệu trong hệ thống

- Về phần hiển thị cho người sử dụng cuối nhóm chúng em tiến hành nghiêncứu Framework ReactJS, Redux và một số thư viện được hỗ trợ cho ReactJS để xâydựng và xử lý giao diện và cho người dùng sử dụng trên website Đồng thời, nghiêncứu Framework Flutter và các thư viện hỗ trợ cho Flutter để xây dựng và xử lý giaodiện trên mobile

- Về phần bảo mật hệ thống, tiến hành nghiên cứu công nghệ Json WebToken làm bảo mật cho hệ thống, tất cả các luồng dữ liệu vào ra đều được kiểm soátthông qua Token

Website chủ yếu tập trung đi vào việc xử lý các nghiệp vụ cơ bản của một websiteđọc sách và hỗ trợ đọc sách trực tuyến như: xem danh sách sách trong thư viện theocác thẻ, thêm sách vào tủ sách cá nhân, tương tác, bình luận trên quyển sách có trên hệthống, tạo ghi chú trực tiếp trên sách trong quá trình đọc, tính giờ đọc sách để tích luỹcác điểm thưởng có thể quy đổi, có không gian đọc với đồng hồ pomodoro khoa học

và hiệu quả… Về phần lõi xử lý, xây dựng đầy đủ các APIs phục vụ cho phần hiển thịcuối cùng

4.1 PHÍA NGƯỜI DÙNG

Người dùng có thể thực hiện các chức năng:

- Đăng nhập với tài khoản email Sinh viên

- Xem các sách khả dụng trong thư viện

- Tuỳ chọn tìm kiếm sách

- Xem chi tiết sách: lượt tương tác, bình luận, lượt xem sách

- Thêm sách vào tủ sách cá nhân, xem chi tiết tủ sách

13

- Có môi trường đọc sách trực tuyến: pomodoro giúp tập trung đọc sách một cách khoa học, chức năng ghi chú trong quá trình đọc.

- Thêm ghi chú và xem lại chi tiết ghi chú từ quyển sách trong tủ

4.2 PHÍA QUẢN TRỊ VIÊN

Quản trị viên có thể thực hiện các chức năng:

- Quản lý (thêm, xoá, sửa) sách, loại thẻ, thẻ của sách

- Xem danh sách người dùng

- Thống kê hoạt động của thư viện

Sau khi hoàn thiện đề tài, nhóm chúng em đã rèn luyện, tiếp thu được nhiều kỹnăng và kiến thức bổ ích, đặc biệt là về những công nghệ mới đang được sử dụng hiện nay Đồng thời, nâng cao tinh thần nghiên cứu và sáng tạo, cống hiến vì cộng đồng Khi đề tài nhóm chúng em được áp dụng vào thực tế, việc đọc sách trực tuyến

và xây dựng thói quen đọc sách của học sinh, sinh viên trong các trường Đại học, Caođẳng sẽ trở nên thuận tiện và dễ dàng hơn Với lượng thông tin, kiến thức vô cùng to lớn và quý báu từ sách vở, cũng như môi trường đọc sách trực tuyến được xây dựng sinh động, đây sẽ là nơi các bạn học sinh, sinh viên có thể tiếp cận và hình thành thói quen đọc sách một cách thoải mái và dễ dàng

6 PHÂN CÔNG

Bảng 1 Phân công công việc

- Viết báo cáo phần Back-End và các phần còn lại

15

PHẦN NỘI DUNG CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 1.1 CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONT-END

1.1.1 ReactJS Framework

1.1.1.1 Khái niệm

ReactJS là một thư viện JavaScript có tính hiệu quả và linh hoạt để xâydựng các thành phần giao diện người dùng (UI) có thể sử dụng lại ReactJSgiúp phân chia các UI phức tạp thành các thành phần nhỏ (được gọi làcomponent) Nó được tạo ra bởi Jordan Walke, một kỹ sư phần mềm tạiFacebook ReactJS ban đầu được phát triển và duy trì bởi Facebook và sau đóđược sử dụng trong các sản phẩm của mình như WhatsApp & Instagram

ReactJS được dùng để xây dựng các ứng dụng - single pageapplication (SPA) Một trong những điểm thú vị của ReacJS là nó khôngchỉ được xây dựng bên phía clients mà còn được sử dụng trên server và cóthể kết nối với nhau ReactJS so sánh sự thay đổi giữa các giá trị của lầnrender này với lần render trước và cập nhật ít thay đổi nhất trên DOM

Công nghệ Virtual DOM giúp tăng hiệu năng cho ứng dụng Việcchỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ,đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽảnh hưởng đến tốc độ xử lý ReactJS sử dụng Virtual DOM (DOM ảo) đểcải thiện vấn đề này Virtual DOM là một object Javascript, mỗi objectchứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó

sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoáviệc re-render DOM tree thật

16

Hình 1 Virtual DOM trong ReactJS

ReactJS sử dụng cơ chế one-way data binding – luồng dữ liệu 1chiều Dữ liệu được truyền từ parent đến child thông qua props Luồng dữliệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi

Với các đặc điểm ở trên, ReactJS dùng để xây dựng các ứng dụng lớn

mà dữ liệu của chúng thay đổi liên tục theo thời gian Dữ liệu thay đổi thì hầuhết kèm theo sự thay đổi về giao diện Ví dụ như Facebook: trên Newsfeed củabạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share,comment liên tục thay đổi Khi đó ReactJS sẽ rất hữu ích để sử dụng

Hình 2 One-way binding trong ReactJS

17

- Một ý tưởng khác làm cho ReactJS trở nên độc đáo là nó cho phép

Developer phá vỡ những cấu tạo UI phức tạp thành những component độclập Dev sẽ không phải lo lắng về tổng thể ứng dụng web, giờ đâyDeveloper dễ dàng chia nhỏ các cấu trúc UI/UX phức tạp thành từngcomponent đơn giản hơn

- Không chỉ vậy, thông qua Props, các component có thể kết nốivới nhau bằng cách sử dụng data tùy biến Điều này giúp chuyển các dữ liệu đã đượctùy biến đến một UI component cụ thể

- Tính năng State khi sử dụng ReactJS, giúp điều chỉnh trạng tháicho các component (child) nhận data từ một component nguồn (parent) Developer cóthể thay đổi trạng thái cho nhiều component (child) trên ứng dụng nhưng không ảnhhưởng tới component gốc (parent) đang ở trạng thái Stateful Việc điều chỉnh các ứngdụng cũng trở nên dễ dàng hơn

- Dom ảo (Virtual DOM) giúp cho ứng dụng nhanh hơn DOM ảo hỗtrợ rất tốt cho việc cấu trúc UI phản ứng kịp thời với trước những thay đổi nhằm tăng trảinghiệm người dùng Khi tạo ra ReactJS, các nhà thiết kế đã

dự đoán đúng việc cập nhật các HTML cũ là cực kỳ quan trọng nhưng cũngkhá tốn kém chi phí Vì thế ý tưởng sử dụng DOM ảo giúp ReactJS biếtchính xác khi nào cần render lại hoặc khi nào bỏ đi những phần tử củaDOM chính vì phát hiện ra những thay đổi trên data

Đồng thời, ReactJS được đánh giá cao đối với các doanh nghiệp:

- Ứng dụng được tạo ra bởi ReactJS với cấu trúc UI tốt hơn giúp

nâng cao và tối ưu hóa UX Các doanh nghiệp có thể dễ dàng tăng tương tác

18

của người dùng, tỉ lệ click và tỉ lệ chuyển đổi (conversion) trên trang web của mình.

- Hiệu suất kinh doanh khi có dùng ứng dụng của ReactJS cũng tốt

hơn so với khi dùng các framework khác Nó sẽ hạn chế cập nhật của DOM, từ đó tăng tốc độ truy cập ứng dụng và cải tiến UX tốt hơn

- ReactJS cũng được thiết kế để giúp cải thiện số trang render tổng

từ phía server Đồng thời sẽ giúp tối ưu các nút để render phía client-side Khả năngtùy chỉnh công cụ tốt, thậm chí làm giảm ngân sách bảo trì hệ

thống, giúp ReactJS hiệu quả cao hơn

1.1.2 Redux

Redux là một thư viện Javascript giúp tạo ra thành một lớp quản lý trạng tháicủa ứng dụng, giúp người dùng viết các ứng dụng hoạt động một cách nhất quán,chạy trong các môi trường khác nhau (client, server, native) và dễ dàng để kiểmthử

Redux được xây dựng dựa trên 3 nguyên lý:

- Nguồn dữ liệu tin cậy duy nhất: State của toàn bộ ứng được chứa trong một object tree nằm trong Store duy nhất

- Trạng thái chỉ được phép đọc: Cách duy nhất để thay đổi State của ứng dụng là phát một Action (là 1 object mô tả những gì xảy ra)

- Thay đổi chỉ bằng hàm thuần túy: Để chỉ ra cách mà State được biến đổi bởi Action chúng ta dùng các pure function gọi là Reducer

Redux-saga là một thư viện middleware của Redux, để xử lý các side effect(các xử lý bất đồng bộ như call API, sử dụng setTimeout, setInterval,…) trongtrong ReactJS

19

Hình 3 Luồng hoạt động của Redux-saga

1.1.3 Các thư viện hỗ trợ khác

Một số thư viện hỗ trợ cho việc xây dựng website ở phía Front-End:

- Axios: là một HTTP client được phát triển dựa trên Javascript Promise,

được dùng để hỗ trợ cho việc xây dựng các ứng dụng API từ đơn giản đến phức tạp và có thể được sử dụng cả ở trình duyệt hay Node.js

- Froala Editor: react-froala-wysiwyg: hỗ trợ xây dựng trình chỉnh sửa,

biên tập, soạn thảo cho website

- react-pdf-viewer: hỗ trợ hiển thị, thao tác và xử lý file pdf cho website.

- https://libretranslate.de/ : API hỗ trợ dịch thuật cho trang web

- Material UI: là một thư viện các React Component đã được tích hợp

thêm cả Google's Material Design, hỗ trợ xây dựng một giao diện hoàn toàn mới, vớinhững button, textfield, toogle được design theo một phong cách mới lạ, thay vì sửdụng Bootstrap

- formik và yup: hỗ trợ xử lý và thao tác với form một cách thuận tiện và dễ

dàng hơn

20

1.1.4 Flutter Framework

Flutter là một nền tảng hỗ trợ phát triển cho các ứng dụng đa nền tảng cho hệiOS và Android do tập đoàn Google phát triển, được sử dụng vô cùng phổ biếnvới nhiệm vụ tạo ra các ứng dụng gốc dành cho Google

Flutter thường bao gồm 2 thành phần chính quan trọng như sau:

- SDK (Software Development Kit): Đây là một bộ sưu tập bao gồm các

công cụ có thể hỗ trợ cho người dùng có thể phát triển được các ứng dụng nền củamình Những điều này thường bao gồm các công cụ có trình để biên dịch mã thànhcác mã gốc dành riêng cho hệ điều hành iOS và Android

- Framework (UI Library based on widgets): Mỗi một tập hợp những thành

phần giao diện của người dùng đều có thể thực hiện tái sử dụng vô cùng dễ dàng

nên người sử dụng có thể cá nhân hóa tùy theo nhu cầu riêng của người lập trình

1.2. CÁC CÔNG NGHỆ SỬ DỤNG Ở BACK-END

1.2.1 NodeJS

Node là một nền tảng phát triển các ứng dụng web back-end được viết bằngJavaScript, là một trình biên đóng gói của Google’s V8 JavaScript engine, libuvplatform abstraction layer, và một thư viện lõi được viết bằng Javascript Mục tiêucủa NodeJS là làm cho web có khả năng push như trong một số ứng dụng gmail.NodeJS cung cấp công cụ giúp lập trình viên có thể làm việc trong non-blocking,

mô hình I/O Sau hơn 20 năm nghiên cứu, xây dựng và phát triển, nhóm kĩ sư đãcho ra đời sản phẩm ứng dụng web NodeJS chạy thời gian thực và kết nối 2 chiềuclient và server, cho phép trao đổi dữ liệu một cách tự do

Ngoài việc chạy trên JavaScript thì Node có những tính năng đi kèm sau:

- Có trình CLI (giao diện dòng lệnh)

- Chạy theo mô hình REPL

Dưới đây là sơ đồ về các thành phần quan trọng trong NodeJS:

Hình 4 Các thành phần quan trọng trong NodeJS

NodeJS cho phép chúng ta thực hiện các giao thức mạng ở cấp độ thấp mộtcách dễ dàng Chẳng hạn như NodeJS có module HTTP cho phép xây dựng mộtwebserver chỉ với vài dòng code, tuy nhiên vì thế mà chúng ta sẽ phải học nhiềuthứ hơn như học về các header của một gói tin HTTP, không như PHP vốn chỉ làmột module mở rộng của một webserver có sẵn (như Apache hay NginX…) – tức

là PHP dễ dùng hơn NodeJS nhưng lại không cho phép các lập trình viên thực hiệncác công việc ở cấp độ thấp Tuy nhiên vì NodeJS là một framework mã nguồn

mở, do đó trên mạng cũng có một số thư viện hỗ trợ viết webserver nhanh hơn và

dễ hơn cho các lập trình viên

1.2.2 ExpressJS

1.2.2.1 Khái niệm

ExpressJS là một framework được xây dựng trên nền tảng của NodeJS

Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile

22

ExpressJS hỗ trợ các method HTTP và midleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng.

Hình 5 Cấu trúc một API được xây dựng với ExpressJS

Tổng hợp một số chức năng chính của ExpressJS như sau:

- Thiết lập các lớp trung gian để trả về các HTTP request

- Khai báo router cho phép sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL

- Cho phép trả về các trang HTML dựa vào các tham số

1.2.2.2 Cách thức xây dựng

Để xây dựng được một Web server với ExpressJS, ta cần trải qua cácbước sau:

Require statements

Nếu muốn web server của chúng ta hoạt động một cách hiệu quả, ta

sẽ cần một module làm việc hiệu quả ở mức tối đa Express là một modulekhá mạnh cho vấn đề này

23

Cũng giống như bất kì một package NPM khác, chúng ta cần phải

cài đặt bằng lệnh “npm install express” và sử dụng lệnh require để load

module này vào:

const express = require (" express ");

const app = express ();

Khác với các NPM package khác, chúng ta cần phải viết “const app

= express()” vì cần có 1 biến số để giữ Express application mới của mình.ExpressJS không phải là phần mặc định quan trọng của Node

Middleware

Trước khi tiến hành các bước xử lý chính, ta cần trải qua bước xử lýtrung gian để có thể kiểm soát ứng dụng của mình chạy tốt và chính xác

mỗi khi APIs được gọi Đây là lý do mà middlewares xuất hiện Các hàm

middle cho phép chúng ta thực hiện hành động trước request bất kì và thựchiện thay đổi nó trước khi trả về kết quả cho người dùng Dưới đây là cácmiddleware thường dùng:

Hình 6 Phân tầng middleware trong ExpressJS

24

Khi ta đã có đầy đủ các yêu cầu trên, ta cần phải cung cấp một địachỉ cụ thể để người dùng có thể truy cập web server của mình Khi đó,server sẽ có các ports tương tự như các cổng của một trung tâm thương mại

Do server phải hỗ trợ nhiều dịch vụ khác nhau cùng 1 lúc, nên ta cần phảicho server biết nơi mà mỗi script nên chạy

Ví dụ:

app listen (process.env.PORT, () => {

console log ( `Server is running on http://localhost:2005` );

});

Trong ví dụ trên, web server của chúng ta sẽ hoạt động ở port 2005

1.2.3 MongoDB

1.2.3.1 Khái niệm NoSql

NoSQL là 1 dạng CSDL mã nguồn mở không sử dụng Transact-SQL

để truy vấn thông tin NoSQL viết tắt bởi: None-Relational SQL, hay có nơithường gọi là Not-Only SQL CSDL này được phát triển trên JavascriptFramework với kiểu dữ liệu JSON (Cú pháp của JSON là “key:value”)

NoSQL còn được xem là mảnh vá cho những hạn chế, khiếm khuyếtcủa mô hình Hệ quản trị cơ sở dữ liệu quan hệ (Relational DatabaseManagement System - RDBMS) Đó là cải tiến về tốc độ, tính năng cũngnhư khả năng mở rộng

NoSQL cho phép mở rộng dữ liệu mà không cần tạo khóa ngoại,khóa chính hay kiểm tra tính ràng buộc… Có thể thấy, dạng cơ sở dữ liệunày có thể linh động, sẵn sàng bỏ qua tính toàn vẹn cứng nhắc củatransaction hay dữ liệu nhằm đổi lấy hiệu suất, cùng với khả năng mở rộngtốt Chính vì ưu điểm này mà nhiều Tập đoàn lớn rất ưa chuộng NoSQLnhư Facebook, Google,…

1.2.3.2 Khái niệm MongoDB

MongoDB là một dạng phần mềm cơ sở dữ liệu sử dụng mã nguồn mởNoSQL Nó có thể hỗ trợ trên nhiều nền tảng khác nhau và được thiết kế với

25

mục đích hướng đến đối tượng MongoDB hoạt động dựa vào các kháiniệm Collection và Document Đồng thời, nó có hiệu suất cao cùng với tínhkhả dụng tốt và dễ dàng mở rộng.

Các Collection trong MongoDB có cấu trúc cực kỳ linh hoạt Điềunày cho phép dữ liệu không cần thiết phải tuân theo bất kỳ một dạng cấutrúc nào Vì thế, MongoDB có thể lưu trữ những dữ liệu có cấu trúc đa dạng

và phức tạp Dữ liệu trong MongoDB được lưu bằng định dạng kiểu JSON

Khái niệm Database

Database là một nơi chứa vật lý cho các Collection Mỗi Databaselấy tập hợp các file riêng của nó trên hệ thống file Mỗi MongoDB Server

có thể có nhiều cơ sở dữ liệu

Khái niệm Collection

Collection là một nhóm các Document trong MongoDB Nó tươngđương như một bảng trong Hệ quản trị cơ sở dữ liệu quan hệ (RelationalDatabase Management System - RDBMS) Do đó, một Collection tồn tạibên trong một cơ sở dữ liệu duy nhất Các Collection không có ràng buộcRelationship như các hệ quản trị cơ sở dữ liệu khác nên việc truy xuất rấtnhanh, chính vì thế mỗi collection có thể chứa nhiều thể loại khác nhaukhông giống như table trong hệ quản trị mysql là các field cố định CácDocument bên trong một Collection có thể có nhiều trường khác nhau Đặcbiệt, tất cả các Document trong một Collection là tương tự nhau hoặc vớicùng mục đích liên quan

Khái niệm Document

Một Document trong MongoDB, có cấu trúc tương tự như kiểu dữliệu JSON, là một tập hợp các cặp key-value Các Document có schemađộng, nghĩa là Document trong cùng một Collection không cần thiết phải cócùng một tập hợp các trường hoặc cấu trúc giống nhau, và các trường chungtrong Document của một Collection có thể giữ các kiểu dữ liệu khác nhau

26

Nguyên tắc hoạt động

Nguyên tắc hoạt động của MongoDB là dưới một tiến trình dịch vụngầm và mở một cổng (mặc định là cổng 27017), để có thể tiếp nhận cácyêu cầu truy vấn, thao tác; sau đó tiến hành xử lý

Mỗi bản ghi của MongoDB (document) được gắn một trường có tên

“_id” nhằm xác định tính duy nhất của bản ghi Có thể hiểu id này như têngọi của một bản ghi và dùng phân biệt chúng với các bản ghi khác Đồngthời, nó còn được sử dụng cho mục đích truy vấn hoặc tìm kiếm thông tin.Trường dữ liệu “_id” được tự động đánh chỉ mục (index) để đảm bảo tốc độtruy vấn đạt hiệu suất tối ưu

Mỗi truy vấn dữ liệu đều được ghi đệm lên bộ nhớ RAM nên các truyvấn sau đó sẽ diễn ra nhanh hơn Bởi nó không cần đọc dữ liệu từ ổ cứng

Khi thực hiện thêm, xóa hay sửa bản ghi thì MongoDB đều mất 60s

để ghi các dữ liệu được thay đổi từ RAM xuống ổ cứng Điều này nhằmmục đích đảm bảo hiệu suất mặc định của chương trình

27

- Cân bằng tải

MongoDB sử dụng Sharding nhằm chia tỷ lệ theo chiều ngang vàxác định dữ liệu phân phối trong collection Điều này giúp người dùng cóthể chọn một Shard key

Nói tóm lại, MongoDB cân bằng tải bằng cách dựa vào các Shardkey để chia dữ liệu thành các phạm vi và phân phối đồng đều Chúng có thểchạy trên nhiều máy chủ khác nhau và thực hiện chức năng sao chép dữ liệuhay cân bằng tải nhằm giữ hệ thống hoạt động liên tục trong trường hợpphát sinh lỗi về phần cứng

Khi tìm hiểu hệ cơ sở dữ liệu MongoDB thì bạn sẽ thấy, tính nănglưu trữ tệp được dùng như một hệ thống tệp (gọi là GridFS) đóng vai tròcân bằng tải, đồng thời, sao chép dữ liệu trên nhiều máy tính Cụ thể,GridFS chia một tệp ra làm nhiều phần và lưu trữ thành các tài liệu riêngbiệt Sau đó, người dùng dễ dàng truy cập GridFS thông qua Mongofileshay các plugin sử dụng cho Nginx và Lighttpd

Tính năng này chính là chương trình mang đến ba giải pháp để thựchiện tập hợp gồm Aggregation Pipeline, Mapreduce và Single-purposeAggregation Trong đó, Aggregation Pipeline được đánh giá là có hiệu suấttốt nhất

Các collection được MongoDB hỗ trợ thường có kích thước cố định Vìthế, người ta gọi chúng là collection giới hạn Với kích cỡ cố định, kết hợpcùng việc theo sau thứ tự chèn giúp tăng hiệu suất của các hoạt động liên quanđến dữ liệu Và khi dữ liệu vượt giới hạn thì những tài liệu cũ hơn sẽ tự động

bị xóa mà bạn không cần thực hiện thao tác thêm bất kỳ dòng lệnh nào

Bắt đầu từ phiên bản 4.0 ra mắt vào tháng 6 năm 2018, MongoDB được bổ sung thêm tính năng hỗ trợ giao dịch ACID đa tài liệu

28

1.2.3.3 Ưu điểm của MongoDB

MongoDB mang đến cho người dùng khá nhiều lợi ích:

- Linh hoạt trong lưu trữ các kích cỡ dữ liệu khác nhau Nhờ chúngđược lưu dưới dạng JSON nên bạn thoải mái chèn bất kỳ thông tin nào tùy theo nhucầu sử dụng

- Tiết kiệm thời gian trong việc kiểm tra sự tương thích về cấu trúckhi thêm, xóa hoặc cập nhật dữ liệu Nhờ MongoDB không có sự ràng buộc trong mộtkhuôn khổ, quy tắc nhất định nào

- Ta có thể dễ dàng mở rộng hệ thống thông qua việc thêm nodevào cluster Cụm các node này đóng vai trò như thư viện chứa các dữ liệu giao tiếpvới nhau

- Tốc độ truy vấn của MongoDB nhanh hơn so với RDBMS do toàn

bộ dữ liệu truy vấn đã được ghi đệm lên bộ nhớ RAM Nhờ thế, những lượt truy vấn sau

sẽ được rút ngắn thời gian vì chúng không cần đọc từ ổ cứng

- Trường dữ liệu “_id” (đại diện cho giá trị duy nhất trong mỗidocument) được tự động đánh chỉ mục nên hiệu suất luôn đạt mức cao nhất

1.2.4 Các thư viện hỗ trợ khác

Một số thư viện hỗ trợ cho việc xây dựng website ở phía Back-End:

moongose: là một thư viện mô hình hóa đối tượng (Object Data Model

-ODM) cho MongoDB và Node.js Nó quản lý mối quan hệ giữa dữ liệu, cung cấp

sự xác nhận giản đồ và được sử dụng để dịch giữa các đối tượng trong mã và biểudiễn các đối tượng trong MongoDB

- jsonwebtoken:

o JSON Web Token (JWT) là 1 tiêu chuẩn mở (RFC 7519) định nghĩa cách thức truyền tin an toàn giữa các thành viên bằng 1 đối tượng JSON Thông tin này có thể được xác thực và đánh dấu tin cậy nhờ vào "chữ ký" của nó Phần chữ ký của JWT sẽ được mã hóa lại bằng HMAC hoặc RSA Trong đó chuỗi Token phải có 3 phần là header , phần payload và phần signature được ngăn bằng dấu “.”

29

Hình 7 Các thành phần của JSON Web Token

o Người ta thường sử dụng JWT trong authentication Khi người dùng

đã đăng nhập vào hệ thống thì những request tiếp theo từ phía ngườidùng sẽ chứa thêm mã JWT Điều này cho phép BE kiểm tra đượcquyền của người dùng và cấp quyền truy cập vào các url, service, cáctài nguyên của hệ thống

- google-auth-library: thư viện được hỗ trợ chính thức của Google để sử

dụng ủy quyền và xác thực OAuth 2.0 với các API của Google

- cookie-parser: Cookie parser là middleware trong Expressjs được sử

dụng để phân tích cú pháp cookie Dùng thư viện này để đọc cookie của request

- dotenv: là một module, tải các biến môi trường từ env vào process.env.

- moment: là một thư viện mạnh dùng để thao tác xử lý datetime trong

javascript cũng như là typescript được thiết kế hoạt động trong cả browser và Node.js, thường được dùng để thay thế cho datetime có sẵn trong javascript

- cors: là viết tắt của Cross-origin resource sharing, là một cơ chế cho phép

hạn chế việc chia sẻ tài nguyên của một trang web đối với các trang web khác

30

CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HOÁ YÊU CẦU 2.1 KHẢO SÁT HIỆN TRẠNG

2.1.1 Website “THƯ VIỆN SỐ TRƯỜNG ĐH SƯ PHẠM KỸ THUẬT TP.HCM"

http://thuvienso.hcmute.edu.vn/

Hình 8 Website ‘Thư viện số trường Đại học Sư phạm Kỹ thuật Tp.HCM’

- Các chức năng chính:

o Giao diện hiển thị Danh sách sách và Danh mục đầu sách

o Có thể Upload sách và Download sách về từ trang web

o Tìm kiếm sách, tìm kiếm nâng cao và lọc kết quả tìm kiếm

o Quản lí sách theo Danh mục, theo Khoa…

o Trang chi tiết sách: Xem chi tiết quyển sách và xem nhanh trước các

o Chỉ xem được trang bìa và 1-2 trang đầu quyền sách, không chophép người dùng xem trực tiếp trên web mà phải tải về máy cá nhân mới có thể đọc.

2.1.2 Website “MÊ TẢI SÁCH”

https://metaisach.com/

Hình 9 Website ‘Mê tải sách’

- Chức năng chính:

o Quản lí và Hiển thị dach sách Sách cùng các Danh mục đầu sách

o Trang chi tiết Sách: mục lục sách, có chức năng share sách trên các

nền tảng khác như Facebook, Twitter…

o Quản lí sách với hai định dạng chính: Ebook (Epub) và PDF

o Với định dạng PDF có thể đọc Online (thông qua trình đọc PDF của

trình duyệt)

o Có thanh hiển thị những quyển sách có nhiều người đọc

o Có thanh New Book thể hiện những quyển sách vừa được update

o Có thể đọc toàn bộ sách trực tuyến (giới hạn với sách có định dạng PDF).

o Mapping nội dung đã ghi chú, tạo Flask card

o Bookmark, quản lí Sách đọc và quản lí Ghi chú

o Sách được upload từ phía người dùng (ở định PDF)

o Search và map dữ liệu từ cách đầu Note

o Giao diện đẹp và hiện đại.

- Nhược điểm:

o Giao diện khá khó làm quen và phức tạp cho người mới sử dụng

o Một số chức năng và giao diện chưa phù hợp với thói quen người dùng

ở Việt Nam

o Chức năng upload file còn hạn chế, một số file không thể upload hoặc

quá trình upload tốn nhiều thời gian

o Giao diện hoàn toàn bằng Tiếng anh

2.1.4 Website, ứng dụng “NOTION”

https://www.notion.so/

Hình 11 Website, ứng dụng ‘Notion’ – Light mode

34