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

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á

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

GVHD: TS LÊ VĂN VINH SVTH: NGUYỄN TRUNG TÍN HUỲNH THỊ THUÝ VY

S K L 0 0 9 6 1 9

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

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

-🙞🙜🕮🙞🙜 -

Đề 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

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

- 18110400

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)

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ơ

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 phản biệ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 Khoa Cô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ền tả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ân thà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ới nhữ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ệt thầy Lê Văn Vinh đã đem đến cho chúng em một khối lượng kiến thức và kinh nghiệ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ớn củ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ải thiệ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

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 thao tá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.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

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Ử

2 21/03/2022 – 07/04/2022

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

- Tìm hiểu về nền tảng NodeJS và ExpressJS

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

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

- Tìm hiểu về NoSQL và MongoDB để

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

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

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

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)

Lược đồ Use case

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

3.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 5 Cấu trúc một API được xây dựng với ExpressJS 23

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” 77

Hình 39 Sequence “Chỉnh sửa thông tin Danh mục” 83

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 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 82 LOA008 – Thống kê và báo cáo người dùng (a) 139

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 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” 50

Bả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)

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

Bảng 52 Kết quả kiểm thử chức năng phía Người dùng 134Bảng 53 Kết quả kiểm thử chức năng phía Quản trị viên 136

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ện nay, 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ác lĩ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 đang triể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ệc họ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ác cá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 nay vẫ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 đọc sá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ỐNG THƯ 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ân thiện, dễ sử dụng, có ngân hàng sách được tham khảo từ nguồn Thư viện trường Đại họ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ên cứ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ảo sá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ến thú

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à

- 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à nhanh chó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ên cứu Framework ReactJS, Redux và một số thư viện được hỗ trợ cho ReactJS

để xây dựng và xử lý giao diện và cho người dùng sử dụng trên website Đồng thời, nghiên cứu Framework Flutter và các thư viện hỗ trợ cho Flutter để xây dựng và xử lý giao diệ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 Web Token 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át thông qua Token

3 PHẠM VI NGHIÊN CỨU

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 theo cá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 MỤC TIÊU CỦA ĐỀ TÀI

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

- 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

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄ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

Huỳnh Thị Thuý Vy - Thiết kế cơ sở dữ liệu

- Xử lý Back – End

Hoàn thành tốt

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

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ây dựng các thành phần giao diện người dùng (UI) có thể sử dụng lại ReactJS giú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ại Facebook 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 page application (SPA) Một trong những điểm thú vị của ReacJS là nó không chỉ đượ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ần render 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ệc chỉ 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 object chứ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

Hình 1 Virtual DOM trong ReactJS

ReactJS sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiề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ầu hết kèm theo sự thay đổi về giao diện Ví dụ như Facebook: trên Newsfeed của bạ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

- 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 độc lập Dev sẽ không phải lo lắng về tổng thể ứng dụng web, giờ đây Developer

dễ dàng chia nhỏ các cấu trúc UI/UX phức tạp thành từng component đơn giản hơn

- Không chỉ vậy, thông qua Props, các component có thể kết nối vớ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 đã được tù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ái cho 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 ảnh hưởng tới component gốc (parent) đang ở trạng thái Stateful Việc điều chỉnh các ứng dụ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ải nghiệ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ũng khá tốn kém chi phí Vì thế ý tưởng sử dụng DOM ảo giúp ReactJS biết chính xác khi nào cần render lại hoặc khi nào bỏ đi những phần tử của DOM 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

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ăng tù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ái củ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ểm thử

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,…) trong trong ReactJS

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ới nhữ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

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ến vớ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ủa mì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ành cá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ằng JavaScript, là một trình biên đóng gói của Google’s V8 JavaScript engine, libuv platform abstraction layer, và một thư viện lõi được viết bằng Javascript Mục tiêu củ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ều client 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ột cách dễ dàng Chẳng hạn như NodeJS có module HTTP cho phép xây dựng một webserver chỉ với vài dòng code, tuy nhiên vì thế mà chúng ta sẽ phải học nhiều thứ 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ện cá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

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ác bướ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 module khá mạnh cho vấn đề này

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ực hiện thay đổi nó trước khi trả về kết quả cho người dùng Dưới đây là các middleware thường dùng:

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

Ports

Khi ta đã có đầy đủ các yêu cầu trên, ta cần phải cung cấp một địa chỉ

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ải cho 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ơi thường gọi là Not-Only SQL CSDL này được phát triển trên Javascript Framework 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ết của mô hình Hệ quản trị cơ sở dữ liệu quan hệ (Relational Database Management System - RDBMS) Đó là cải tiến về tốc độ, tính năng cũng như 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ệu này có thể linh động, sẵn sàng bỏ qua tính toàn vẹn cứng nhắc của transaction hay

dữ liệu nhằm đổi lấy hiệu suất, cùng với khả năng mở rộng tốt Chính vì ưu điểm này mà nhiều Tập đoàn lớn rất ưa chuộng NoSQL như 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

mục đích hướng đến đối tượng MongoDB hoạt động dựa vào các khái niệm Collection và Document Đồng thời, nó có hiệu suất cao cùng với tính khả 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ều nà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ấu trú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 Database lấ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ệ (Relational Database Management System - RDBMS) Do đó, một Collection tồn tại bên trong một cơ sở dữ liệu duy nhất Các Collection không có ràng buộc Relationship như các hệ quản trị cơ sở dữ liệu khác nên việc truy xuất rất nhanh, chính vì thế mỗi collection có thể chứa nhiều thể loại khác nhau không giống như table trong hệ quản trị mysql là các field cố định Các Document bên trong một Collection có thể có nhiều trường khác nhau Đặc biệt, tất cả các Document trong một Collection là tương tự nhau hoặc với cù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 chung trong Document của một Collection có thể giữ các kiểu dữ liệu khác nhau

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ác yê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ên gọ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 Đồng thờ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 truy vấ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ằm mục đích đảm bảo hiệu suất mặc định của chương trình

- 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 Shard key

để 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ệu hay cân bằng tải nhằm giữ hệ thống hoạt động liên tục trong trường hợp phát sinh lỗi về phần cứng

- Lưu trữ tệp

Khi tìm hiểu hệ cơ sở dữ liệu MongoDB thì bạn sẽ thấy, tính năng lư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êng biệt Sau đó, người dùng dễ dàng truy cập GridFS thông qua Mongofiles hay các plugin sử dụng cho Nginx và Lighttpd

- Tập hợp

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

- Giới hạn kích thước collection

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ợp cù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

- Giao dịch

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

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 nhu cầ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úc khi 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ột khuô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 node và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ếp vớ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ỗi document) đượ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ểu diễ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 “.”

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ười dùng sẽ chứa thêm mã JWT Điều này cho phép BE kiểm tra được quyền của người dùng và cấp quyền truy cập vào các url, service, các tà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

Lưu trữ cấu hình trong môi trường tách biệt với code

- 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

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 trang sách

o Quản lí sách dưới định dạng đa số là PDF

o Chỉ xem được trang bìa và 1-2 trang đầu quyền sách, không cho phé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

- Ưu điểm:

o Bố cục rõ ràng, dễ thao tác cho người mới sử dụng

o Giao diện sáng – đẹp

o Dễ sử dụng

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)

- Nhược điểm:

o Trình đọc Online còn đơn giản, chỉ dựa trên trình đọc của trình duyệt, chưa hỗ trợ các công cụ hỗ trợ đọc khác như: lưu sách đọc hay bookmark

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

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

- Chức năng chính:

o Ghi chú và quản lý ghi chú

o Lên kế hoạch và quản lí công việc