Nghiên cứu và áp dụng React Js trong xây dựng ứng dụng học trực tuyến Beva

Việc phát triển một ứng dụng học trực tuyến sẽ giúp chúng tađáp ứng nhu cầu ngày càng tăng của học viên và giáo viên trong việc tiếp cận và thamgia vào quá trình hoc tap/dao tạo tiện lợi

Trang 1

HỌC VIEN CÔNG NGHỆ BƯU CHÍNH VIÊN THONG

KHOA ĐA PHƯƠNG TIỆN

ĐỎ ÁN TÓT NGHIỆP ĐẠI HỌC

ĐÈ TÀI:

NGHIÊN CỨU VÀ ÁP DỤNG REACT JS TRONG XÂY

DỰNG ỨNG DỤNG HỌC TRỰC TUYẾN BEVA

Người hướng dẫn : ThS VŨ THỊ TÚ ANH

Sinh viên thực hiện : DO TUẦN PHONGLớp : DI9PTDPT

Hệ : ĐẠI HỌC CHÍNH QUY

HÀ NỘI - 2023

Trang 2

Đỗ Tuần Phong - DI9PTDPT

Đồ án tốt nghiệp Đại học LỜI CẢM ƠN

LỜI CẢM ƠN

Đầu tiên, em xin gửi lời cảm ơn tới cô Vũ Thị Tú Anh, cảm ơn cô đã cho em

những kiến thức để xây dựng đồ án và chỉnh sửa những ý tưởng từ những ngày từ rấtlâu để em hình dung và chuẩn bị những kỹ năng để có cho mình một nền tảng vững

chắc nhất, cùng với đó là sự tận tình chỉ bảo, hướng dẫn cho em những kiến thức vàkinh nghiệm quý giá dé hoàn thành đồ án này Em cũng xin cảm ơn các thầy cô trongkhoa Da Phương tiện của Học Viện Công Nghệ Bưu Chính Viễn Thông đã truyền đạtcho em những kiến thức, kỹ năng chuyên ngành cùng việc chia sẻ những góc nhìn vàkinh nghiệm quý báu xuyên suốt 4 năm học vừa qua

Trong quá trình làm đồ án, em đã luôn nhận được sự quan tâm, giúp đỡ củathầy cô, bạn bè và gia đình Điều đó đã tiếp thêm động lực giúp cho em có thể hoànthành đồ án này

Tuy nhiên, do kinh nghiệm của bản thân còn hạn chế cùng với thời gian thực

hiện gấp rút nên đồ án không thể tránh khỏi những thiếu sót Em rất mong được sựđóng góp ý kiến của thầy cô dé có thé nhìn nhận được những yếu điểm dé tiếp tục pháttriển, hoàn thiện về sau

Em xin chân thành cảm on!

Hà Nội, ngày 14 tháng 12 năm 2023

Sinh viên

Trang 3

2.3.6 PgAdmin 2.3.7 Postman

Trang 4

Đồ án tốt nghiệp Đại học MỤC LỤC

3.2.2.1 Quản tri viên

3.2.2.2 Người hướng dẫn (Mentor)

3.4.1.1 Lựa chọn lớp thực thê và thuộc tính

3.4.1.2 Xác định quan hệ số lượng giữa các thực thể3.4.1.3 Biểu đồ lớp thực thé

3.4.2 Thiết kế cơ sở dữ liệu3.5 Thiết kế động

3.5.1 Chức năng thêm tai khoản học viên 3.5.2 Chức năng sửa tài khoản học viên 3.5.3 Chức năng xoá tài khoản học viên

3.5.4 Chức nang tạo tài khoản mentor

3.5.5 Chức năng sửa tai khoản Mentor 3.5.6 Chức năng xoá tải khoản mentor 3.5.7 Chức năng thêm lộ trình học

3.5.8 Chức năng thêm khóa học vào lộ trình học 3.5.9 Chức năng thêm khóa học vảo lộ trình học

3.5.10 Chức năng thêm bộ trắc nghiệm

3.6 Một số kết quả đạt được

3.7 Đánh giá kết quả

3.8 Kết luận chương

KET LUẬN

TÀI LIỆU THAM KHẢO

Trang 5

Đồ án tốt nghiệp Đại học DANH SÁCH HÌNH ANH

DANH MỤC CÁC HÌNH VE

Hình 2.1 - Mô hình thác nước

Hình 2.2 - Mô hình hoạt động hệ thống Beva

Hình 3.0 - Biểu đồ use case tổng quan

Hình 3.1 - Giao diện tạo tài khoản Học viên

Hình 3.3 - Giao diện sửa tài khoản Học viên

Hình 3.4 - Giao diện xóa tài khoản Học viên

Hình 3.5 - Giao diện tạo tài khoản mentor

Hình 3.6 - Giao diện sửa tài khoản mentor

Hình 3.7 - Giao diện xóa tài khoản mentor

Hình 3.8 - Giao diện thêm lộ trình hoc

Hình 3.9 - Giao diện thêm khóa học vào lộ trình học

Hình 3.10 - Giao diện thêm học viên vào lộ trình học

Hình 3.11 - Giao diện thêm bộ trắc nghiệm

Hình 3.12 - Giao điện sửa bộ trắc nghiệm

Hình 3.13 - Giao diện xóa bộ trắc nghiệm

Hình 3.13 - Giao diện thêm bài trắc nghiệm

Hình 3.14 - Giao diện danh sách bài trắc nghiệm

Hình 3.15 - Giao diện thông tin bài trắc nghiệm cần sửa

Hình 3.16 - Giao diện xác nhận xóa bài trắc nghiệm

Hình 3.17 - Giao diện danh sách khóa học và form thêm bài học

Hình 3.18 - Giao diện danh sách khóa học và form sửa bài học

Hình 3.19 - Giao diện thông báo xóa khóa học

Hình 3.20 - Thông báo xác nhận xuất bản khóa học

Hình 3.21 - Giao diện thêm bài học dạng văn bản

Hình 3.22 - Giao diện thêm bài học dạng video

Hình 3.23 - Giao diện thêm bài học dạng trắc nghiệm

Hình 3.24 - Giao diện bảng chọn khi click vào bai học

Hình 3.25 - Giao diện lịch học

Hình 3.26 - Giao diện xem tiến trình học

Hình 3.27 - Giao diện xem lộ trình học

Hình 3.35 - User flow học viên

Hình 3.36 - User flow người hướng dẫn

Hình 3.37 - User flow quan tri viên

Hinh 3.38 - Giao dién man hinh Dang nhap

Hình 3.38 - Giao điện màn hình Tổng quan

Hình 3.39 - Giao diện màn hình Lộ trình học

Trang 6

Đồ án tốt nghiệp đại học DANH SÁCH HÌNH ẢNH

Hình 3.40 - Giao diện màn hình Bài học

Hình 3.41 - Biểu đồ lớp thực thé

Hình 3.42 - Biểu đồ cơ sở dữ liệu

Hình 3.43 - Biéu đồ tuần tự chức năng thêm tài khoản học viên

Hình 3.44 - Biéu đồ tuần tự chức năng sửa tài khoản học viên

Hình 3.45 - Biéu đồ tuần tự chức năng xoá tài khoản học viên

Hình 3.46 - Biéu đồ tuần tự chức năng tạo tài khoản mentor

Hình 3.47 - Biéu đồ tuần tự chức năng sửa tài khoản mentor

Hình 3.48 - Biéu đồ tuần tự chức năng xoá tài khoản mentor

Hình 3.49 - Biéu đồ tuần tự chức năng thêm lộ trình học

Hình 3.50 - Biéu đồ tuần tự chức năng thêm khóa học vào lộ trình học

Hình 3.51 - Biêu đồ tuần tự chức năng thêm bộ trắc nghiệm

Hình 3.68 - Tính năng Mentor thêm khóa học

Hình 3.69 - Tính năng Mentor cập nhật bài trắc nghiệm

Hình 3.70 - Tính năng Học viên xem bài học

Hình 3.70 - Tính năng Học viên xem thời gian biêu

Hình 3.71 - Tính năng Quản trị viên thêm khóa học vào lộ trình học

Hình 3.71 - Tính năng Quản trị viên tạo tài khoản Mentor

Trang 7

Đồ án tốt nghiệp Đại học MỞ DAU

MỞ ĐẦU

Giáo dục trong những năm gan đây luôn là một trong những lĩnh vực đối mới,song hành với các tiến bộ trong công nghệ thông tin và trải qua thời kỳ dịch bệnhhoành hành, học trực tuyến đang thé hiện được những ưu điểm nỗi trội và trở thànhmột xu hướng phô biến Việc phát triển một ứng dụng học trực tuyến sẽ giúp chúng tađáp ứng nhu cầu ngày càng tăng của học viên và giáo viên trong việc tiếp cận và thamgia vào quá trình hoc tap/dao tạo tiện lợi, chủ động mọi lúc mọi noi, chủ động về mặt

thời gian, thoải mái về không gian học tập, không bị giới hạn về khoảng cách địa lý, từ

đó tăng cường tiện ích và hiệu quả học tập/đào tạo.

Một ứng dụng học trực tuyến sẽ giúp chúng ta có thê tối ưu hóa quá trình quản lýhọc tập và giảm thiêu công sức và thời gian cần thiết cho việc tổ chức và theo dõi hoạtđộng học tập Cho phép chúng ta tích hợp các tính năng tiên tiến như video học trựctuyến, giải đáp câu hỏi tự động, kiểm tra trực tuyến, tự động hóa quy trình học tập, Đồng thời cung cap tài nguyên học tập phong phú cho học viên dé dàng tiếp cận nhưbài giảng, bài tập, tài liệu được biên soạn bài bản và có hệ thống một cách Điều này

giúp tạo ra một môi trường học tập da dạng và giau tính tương tác, nâng cao trải nghiệm học tập của học viên và giáo viên.

Với mong muốn của bản thân là tất cả học viên đều được tiếp cận được các lộtrình học phù hợp cùng môi trường học tập trực tuyến giàu tính tương tác và tiếp cậnđược với những công cụ hỗ trợ học tập tiên tiễn, em đã chọn đề tài này để phát triển.Ứng dụng này là một Website Em hi vọng với ứng dụng này, em có thể giúp những

học viên cùng đội ngũ giảng viên/người hướng dẫn có một trải nghiệm học tập/đào tạo

thuận lợi nhất với hiệu suất cao đồng thời đóng góp một phần nhỏ bé vào việc pháttriển của ngành công nghệ thông tin nói chung và ngành giáo dục nói riêng, thúc đâycuộc cách mạng công nghiệp 4.0, chuyên đổi số quốc gia và làm chủ công nghệ

Đồ án bao gồm 3 chương:

Chương 1: Tổng quan về học trực tuyến Chương này làm rõ các khái niệm liên

quan, lợi ích và một số hệ thống phô biến trong lĩnh vực học trực tuyến và phátbiểu bài toán

Chương 2: Phương pháp tiếp cận và giải quyết vấn đề.Chương này sẽ trình bay nghiên cứu về các giải pháp để xây dựng hệ thống Beva

và nêu các công nghệ sử dụng dé xây dựng hệ thống

Chương 3: Xây dựng hệ thong hoc trực tuyén Beva:

Chương này sẽ trình bay theo thứ tự các bước trong qua trình phát triển phần mềm

dé xây dựng hệ thống, bao gồm:

Trang 8

Đồ án tốt nghiệp Đại học MỞ ĐẦU

- _ Chương này sẽ trình bày chỉ tiết các bước trong quá trình phát triển dé xây dựng

hệ thống Beva, bao gồm:

- _ Xác định yêu cầu (mục tiêu hệ thống, xác định đối tượng sử dung)

- Đặc tả hệ thống (biểu đồ use case, kịch bản chuẩn và ngoại lệ)

- _ Thiết kế tương tác (user flow, một số màn hình trong thiết kế giao diện)

- Phan tích thiết kế phần mềm (thiết kế lớp thực thé, Thiết kế cơ sở dit liệu, thiết

kế động: biểu đồ tuần tự - giả code)

- Một số kết đạt được

- _ Đánh giá kết quả

Trang 9

Đồ án tốt nghiệp Đại học CHƯƠNG 1: TONG QUAN VE HỌC TRỰC TUYẾN

CHUONG 1: TONG QUAN VE HỌC TRỰC TUYẾN

Chương này của đô án sé tim hiêu vê học trực tuyên va khảo sát những lợi ich của việc học trực tuyên, một sô hệ thông phô biên có liên quan đên lĩnh vực học trực

tuyên hiện tại Trên cơ sở đó chỉ ra mục tiêu mà đồ án này hướng dén.

1.1 Tìm hiểu v

Học trực tuyến hay còn gọi là E-Learning (Electronic Learning) là một thuật ngữ

xuất hiện vào năm 1999[1] Hiện nay theo các quan điểm và dưới các hình thức khác

nhau có rất nhiều cách hiểu về E-Learning Theo PGS.TS Lê Huy Hoàng “E-learning

là một loại hình đào tạo chính quy hay không chính quy hướng tới thực hiện tốt mục

tiêu học tập, trong đó có sự tương tác trực tiếp giữa người dạy với người học cũng như

giữa cộng đồng học tập một cách thuận lợi thông qua công nghệ thông tin và truyền

thống”[1] Theo tác giả William Horton định nghĩa “E-Learning” là “E-learning is the

use of information and computer technologies to create learning experiences”[2]

(E-learning là việc sử dung công nghệ thông tin và máy tinh dé tao ra các trải nghiệm hoc

tập) Hiểu theo nghĩa rộng, học trực tuyến là một thuật ngữ dùng dé mô tả việc học tập

và đào tạo dựa trên công nghệ thông tin và công nghệ đa phương tiện.

Theo quan điểm hiện nay, học trực tuyến là sự phân phát nội dung học kết hợp sửdụng các phần cứng điện tử hiện đại như máy tính, mang máy tính, mạng vệ tinh,

mạng Internet, Intranet và phần mềm máy tính kết hợp với việc số hoá kiến thức

thành các dạng tài liệu học tập có thé được trình bày dưới dạng văn bản, hình ảnh, âm

thanh, video và các sản phẩm đa phương tiện khác Tạo điều kiện cho phép nhiều học

viên tương tác với nhau, với nội dung học tập và người dạy trên môi trường mạng.

Ngày nay, học trực tuyến là hình thức giáo dục phát triển nhanh nhất với doanhthu toàn cầu tăng 900% từ năm 2000 và vẫn chưa đạt đỉnh, dự kiến sẽ gấp 3 lần vào

năm 2025; thị trường học trực tuyến được dự đoán sẽ đạt 336,98 tỷ USD vào năm

2026 Tại Việt Nam, doanh thu trên thị trường Giáo dục Trực tuyến dự kiến sẽ đạt

328,20 triệu USD vào năm 2023[5] Số lượng học viên tham gia học trực tuyến tăng

theo từng năm, và đạt ngưỡng 79,7% trên tong số hoc sinh/sinh viên thuộc Bộ giáo dục

và đào tạo năm 2021 dưới tác động của dịch Covid 19 [6] và dự kiến sẽ lên tới 10,7

triệu người dùng vào năm 2027[5].

Ba loại hình học trực tuyến cơ bản thường được biết đến đó là không đồng bộ,đồng bộ và kết hợp:

e Học đồng bộ (Synchronous E-Learning): Học đồng bộ là phương pháp mà

giảng viên và các học viên tham gia vào quá trình học tập cùng một thời điểm

Học đồng bộ sử dụng các công nghệ truyền thông trực tuyến như video hộithảo, phần mềm hội thảo web, trò chuyện trực tuyến hoặc cuộc gọi video dé tao

Đỗ Tuan Phong - DI9PTDPT

Trang 10

ra môi trường giảng dạy trực tiếp và tương tác thời gian thực giữa giảng viên và

học viên.

e Học không đồng bộ (Asynchronous E-Learning): Học không đồng bộ là

phương pháp mà giảng viên va học viên không tham gia vao quá trình học tập

cùng một thời điểm Thay vì truyền đạt nội dung trực tiếp, giảng viên tạo ra tàiliệu học tập, bai giảng hoặc tài liệu tham khảo dưới dạng sản phẩm đa phươngtiện và chia sẻ chúng cho học viên qua các công nghệ truyền thông như: email,diễn đàn, hệ thống quản lý học tập trực tuyến, hoặc các nền tảng học trực tuyến, Học viên có thé tự điều chỉnh thời gian và tốc độ học tập của minh, và có thé

tương tác với giảng viên hoặc các học viên khác thông qua các phương tiện

truyền thông không đồng bộ như bình luận, thảo luận trực tuyến hoặc diễn đàn.

e Học kết hợp (Hybrid e-learning): Học kết hợp là phương pháp kết hop cả học

đồng bộ và học không đồng bộ Trong học kết hợp, một phần nội dung học tậpđược truyền tải đồng bộ, ví dụ như qua các buổi học trực tuyến, lớp học trựctuyến hoặc budi thảo luận trực tuyến, trong khi phần khác được cung cấp khôngđồng bộ qua các tài liệu, bài giảng đã được ghi sẵn hoặc các hoạt động tự học

Học kết hợp cho phép linh hoạt về thời gian và địa điểm học tập, đồng thờicung cấp cơ hội cho sự tương tác trực tiếp với giảng viên và học viên

1.2 Loi ích của việ

Học trực tuyến đem lại những cải cách đột phá trong quy trình đào tạo, giúpmọi thứ trở nên thuận tiện và dễ tiếp cận hơn, giải quyết được những vấn đề hóc búa

tồn tại trong hình thức dạy và học truyền thống

Người học đóng vai trò trung tâm và chủ động trong quá trình đào tạo, trực tiếp

nhận được những lợi thế của học trực tuyến:

e Linh hoạt về thời gian và địa điểm: Học trực tuyến cho phép người học tự điều

chỉnh thời gian và địa điểm học tập Người học có thể tiếp cận nội dung học tập,chương trình đào tạo và tài liệu từ khắp nơi trên thế giới Người học không bị

giới hạn bởi địa lý và có thé chon học từ các trường đại học, tổ chức đảo tạo vàchuyên gia hàng đầu ở bất kỳ quốc gia nào

e Tiết kiệm chi phí: Học trực tuyến thường có chi phí thấp hon so với hình thức

học truyền thống Người học không cần chi trả cho việc di chuyên, ăn uống,

Ngoài ra, có nhiều tải liệu học tập miễn phí trực tuyến và các khóa học trực

tuyến thường có giá thành hợp lý, giúp tiết kiệm chi phí đào tạo

e Tự điều chỉnh tốc độ học: Với học trực tuyến, có thể điều chỉnh tốc độ học tập

theo nhu cầu và khả năng của mình Việc quay lại xem lại nội dung, tăng/giảmtốc độ học giúp tiếp thu kiến thức theo cách tốt nhất cho bản thân

e Tính hấp dẫn: Giao diện thân thiện, dé sử dụng, cung cấp thông tin đa dang

dưới các hình thức phương tiện như âm thanh, hình ảnh, hình ảnh động ba

Trang 11

chiều, kĩ xảo hoạt hình, có độ tương tác cao giữa người sử dụng và chươngtrình, đàm thoại trực tiếp qua mạng Điều này đem đến cho học viên sự thú vị,say mê trong quá trình tiếp thu kiến thức cũng như hiệu quả trong học tập

1.3 Một số hệ thống pho biến trong lĩnh vụ

1.3.1

Coursera là một công ty cung cấp khóa học trực tuyến quy mô lớn có trụ sở tại

Hoa Kỳ, được thành lập vào năm 2012 bởi các giáo sư Khoa học Máy tính tại Đại học

Stanford, Andrew Ng và Daphne Koller Coursera hợp tác với các trường đại học và tô

chức khác dé cung cấp các khóa học trực tuyến, chứng chỉ và bằng cấp trong nhiều

lĩnh vực khác nhau Vào năm 2023, hơn 275+ trường đại học và công ty cung cấp hơn

4.000 khóa học thông qua Coursera với hơn 118 triệu người dùng vào năm 2022 [8]

Sản phẩm:

e Cung cấp các khóa học: Các khóa học trên Coursera bao gồm nhiều chuyên

ngành, có phí hoặc miễn phí Khóa học kéo dài từ bốn đến mười hai tuần, vớimột đến hai giờ bài giảng video mỗi tuần

e Cung cấp bằng Thạc sĩ: từ năm 2017, Coursera cung cấp các bằng thạc sĩ hoàn

chỉnh Ban dau, ho bat đầu với Thạc sĩ Đổi mới và Khởi nghiệp (MSIE) từ HEC

Paris và Thạc sĩ Kế toán (iMSA) từ Đại học Illinois, nhưng sau đó đã mở rộng

để cung cấp Thạc sĩ Khoa học Máy tính trong Khoa học Dữ liệu và Thạc sĩ

Quản trị kinh doanh (iMBA), cả hai từ Dai hoc Illinois Ngoài ra, trong các

chương trình MBA của họ, có một số khóa học được cung cấp riêng rẽ, đượcbao gồm trong chương trình học của các MBA cụ thé khi đăng ký vào các lớphọc như các khóa học về marketing SỐ

e Cung cấp chứng chỉ chuyên nghiệp: Google, IBM, Meta và các công ty nổi

tiếng khác đã ra mắt các khóa học chứng chỉ chuyên nghiệp, cho phép học viênđáp ứng nhu cau lao động trong các lĩnh vực khác nhau, chang hạn như phân

tích đữ liệu, hỗ trợ công nghệ thông tin, marketing số, thiết kế UX, quản lý dự

án và Khoa học đữ liệu Theo Google, các khóa học của họ tương đương với

bằng cấp 4 năm Google và hơn 20 đối tác của họ sẽ chấp nhận các chứng chỉ

này như tương đương với bằng cấp 4 năm

Tính năng chính:

@ Học trực tuyến: Học viên sẽ tìm kiếm và tham gia các khóa học (Enroll) Các

khoá học bao gồm các bài học là tai liệu dưới dạng văn bản hoặc video, các baikiểm tra, bài tập hàng tuần (dạng trắc nghiệm), bài tập được đánh giá và xem xétbởi các bạn học cùng khóa (bài tập dạng viết văn bản) và đôi khi có một dự án

hoặc kỳ thi cuối cùng dé hoàn thành khóa học Các bài học sẽ có thời gian học

nhất định va có thé thay đổi được, dữ liệu trong thời gian học được thu thập để

Trang 12

tính toán xem học viên có đủ điểm vượt qua bai hoc/hoan thành khóa học hay

không.

@ Diễn đàn: người hướng dẫn tạo các chủ dé (Thread) theo các bai học trong khóa

học dé trao đổi thông tin giữa các học viên

® Ghi chú: người dùng có thể thêm ghi chú theo các mốc thời gian trong video và

có thê xem lại các ghi chú này

Uu điểm:

e Dễ sử dụng: Giao diện đơn giản, các khoá học được sắp xếp theo danh mục từ

những thông tin của người học cung cấp giúp người dùng dễ dàng tìm kiếm và

tra cứu Các khóa học đã và đang tham gia ở vị trí dé nhìn, dễ truy cập giúp

quản lý tiến trình học Các bài học được trình bày đơn giản theo từng trình tự

học Các chứng chỉ có thể truy cập nhanh và chia sẻ làm minh chứng

e Nội dung học chất lượng va đa dang: Coursera hợp tác với những nhà cung cấp

các nội dung học tập là hơn 275[8] trường đại học danh giá và tô chức trên toàncầu với đội ngũ giảng viên - giáo sư, người hướng dẫn là những người cung cấp

phần lớn nội dung cho nền tảng giáo dục này Do đó, chất lượng nội dung luôn

được đảm bảo và kiểm duyệt, biên soạn kĩ càng bởi các chuyên gia đầu ngành,

có nhiều năm kinh nghiệm Coursera đã xây dựng được một lượng một kho

tàng kiến thức với hơn 7000 khoá hoc[8] ở mọi chuyên ngành Hầu hết cácđánh giá về Coursera của người dùng đều đồng ý rằng các khóa học tạiCoursera mang lại những kiến thức chuyên sâu và bao quát hơn những gì họtừng được học Điều này cho thấy học viên rất hài lòng về chất lượng đào tạo

tại đây.

1.3.2

Udemy, Inc là một công ty công nghệ giáo dục cung cấp một né

giảng dạy trực tuyến Nó được thành lập vào tháng 5 năm 2010 bởi Eren Bali, Gagan

Biyani và Oktay Caglar Cho đến tháng 6 năm 2023, nền tảng này có 64 triệu người

học, hơn 210.000 khóa học và hơn 75.000 giảng viên giảng dạy các khóa học bằng gần

75 ngôn ngữ, với hơn 870 triệu lượt đăng ký khóa học[9] Sản phẩm:

e© Khóa học trực tuyến: Udemy có hơn 210,000 khóa học trực tuyến trên nhiều

lĩnh vực khác nhau Các khóa học này bao gồm lập trình, kỹ năng kinh doanh,nghệ thuật, khoa học, công nghệ, marketing, ngôn ngữ, âm nhạc, va nhiều lĩnhvực khác Học viên có thể tìm kiếm và đăng ký vào các khóa học mà họ quantâm Khi hoàn thành một số khóa học nhất định học viên nhận được các chứng

chỉ minh chứng cho việc hoan thành khóa học đó.

e Udemy for Business: Đây là phiên bản dành riêng cho doanh nghiệp của

Udemy Udemy for Business cung cấp cho các tô chức và công ty một nền tảng

Trang 13

học tập và đào tạo nhân viên trực tuyến Các doanh nghiệp có thể tạo và quản lýnhóm học viên, truy cập vào thư viện khóa học của Udemy và theo dõi tiễn độ

học tập của nhân viên.

e Udemy for Government: Đây là phiên bản dành riêng cho tổ chức và cơ quan

chính phủ Udemy for Government cung cấp các khóa học và tài liệu giảng dạyphủ hợp với các yêu cầu và quy định của các cơ quan chính phủ

e Thư viện khóa học đa dạng: Udemy có một thư viện khóa học rộng lớn với hơn

210,000 khóa học trên nhiều chủ đề khác nhau Điều này cho phép người học

tìm và chọn khóa học phù hợp với nhu cầu và quan tâm cá nhân

e Video học linh hoạt: Các khóa học trên Udemy thường cung cấp video học chất

lượng cao Người học có thé xem các bài giảng video và điều chỉnh tốc độ phátlại theo nhu cầu của mình

e Học tập theo tốc độ cá nhân: Udemy cho phép người học tự điều chỉnh tốc độ

học tập của mình Người học có thể tiền hành học tập theo lịch trình cá nhân và

tiến độ riêng

e Tài liệu bổ sung: Ngoài video học, các khóa học trên Udemy thường cung cấp

tài liệu b6 sung như bài giảng ghi chú, slide, bai tập và tài liệu tham khảo Điều

này giúp người học có thé tiếp cận và ôn tập kiến thức một cách chỉ tiết

e Thảo luận và trao đôi: Udemy cung cấp một cộng đồng học viên và giảng viên

năng động Người học có thể tham gia vào diễn đàn thảo luận, đặt câu hỏi và

chia sẻ ý kiến với cộng đồng dé tăng cường sự hiểu biết và tương tác

e Chứng chỉ hoàn thành: Một số khóa học trên Udemy cung cấp chứng chỉ hoàn

thành cho những người hoàn thành khóa học và đạt các yêu cầu tương ứng

Chứng chi này có thé được sử dụng dé chứng minh kỹ năng và thành tựu cá

nhân.

e Đa dạng và phong phú: Udemy có một thư viện khóa học đa dang, với hàng

ngàn khóa học trên nhiều lĩnh vực, bao gồm lập trình, kỹ năng mềm, marketing,nghệ thuật, âm nhạc và nhiều lĩnh vực khác Điều này cho phép người học có

nhiều lựa chọn và tìm được khóa học phù hợp với nhu cầu và quan tâm cá nhân

e Linh hoạt và tự học: Udemy cho phép người học tự điều chỉnh tốc độ học tập và

lịch trình học tập của mình Người học có thể tiếp cận các khóa học bat kỳ khinao và ở bat kỳ đâu, sử dụng ứng dung di động hoặc truy cập từ máy tính cá

nhân Điều này cho phép học tập linh hoạt và tiện lợi theo nhu cầu cá nhân

e Chất lượng giảng dạy: Udemy có một quy trình đánh giá chất lượng khắt khe dé

đảm bảo các khóa học trên nền tảng đạt tiêu chuẩn cao Các giảng viên trên

Udemy thường có kiến thức và kinh nghiệm chuyên môn trong lĩnh vực của

mình, và họ cung cấp nội dung học tập chất lượng và hữu ích.

Trang 14

1.3.3

Tiết kiệm thời gian và tiền bạc: So với việc tham gia các khóa học truyền thống

tại các trường đại học hay trung tâm đảo tạo, Udemy thường có giá cả phải

chăng hơn nhiều Người học có thé tiết kiệm thời gian và tiền bạc bang cáchhọc trực tuyến từ Udemy, không cần di chuyền đến các địa điểm học tập vàkhông cần tuân thủ một lịch trình cô định

Codecademy là một nền tảng học trực tuyến của Mỹ cung cấp các lớp học lập

trình miễn phí trong 12 ngôn ngữ lập trình khác nhau bao gồm Python, Java, Go,

JavaScript, Ruby, SQL, C++, C#, va Swift, cũng như các ngôn ngữ đánh dau(Markup

Language) HTML và CSS Codecademy được thành lập vào tháng 8 năm 2011 bởi

Zach Sims và Ryan Bubinski là hai cựu sinh viên của Đại học Columbia Vào quý đầu

năm 2020, Codecademy có tới hơn 45 triệu người dùng [9].

Sản phẩm chính:

Cung cấp các khóa học: Với Codecademy các khoá học tập trung vào lĩnh vực

lập trình, với các gói học tập khác nhau từ Miễn phí (Basic Plan), Mở rộng

(Plus Plan) và Chuyên nghiệp (Pro Plan).

Cung cấp lộ trình xây dựng kỹ năng hoặc nghề nghiệp: Codecademy thiết kếcác bộ khoá học nhằm xây dựng một kỹ năng hoặc cung cấp cho học viên

những kỹ năng cần thiết dé bắt đầu sự nghiệp trong lĩnh vực đó Các thành viênCodecademy Pro có thê lựa chọn các con đường nghề nghiệp như back-end

engineer (kỹ sư back-end), computer science (khoa học máy tinh), data analyst

(phân tích dữ liệu), data scientist (khoa học dir liệu), front-end engineer (kỹ sư

front-end), và full-stack engineer (kỹ sư full-stack) Ngoài ra, Codecademy còn

triển khai công cụ kiểm tra mức độ sẵn sàng cho công việc, giúp học viên đánh

giá mức độ chuẩn bị của họ cho công việc dựa trên các kỹ năng đã học và quá

trình học tập.

Hỗ trợ tìm việc: Codecademy cung cấp danh sách việc làm cá nhân hóa và giúpngười dùng kết nối với nha tuyên dụng đang tìm kiếm nhân lực trong lĩnh vựccông nghệ Tính năng này giúp người dùng Codecademy tìm kiếm các cơ hội

việc làm phù hợp dựa trên kỹ năng và sự quan tâm của họ.

Cung cấp đa dạng chứng chỉ: Codecademy cung cấp chứng chỉ hoàn thành cho

các khóa học về ngôn ngữ lập trình và các chương trình hướng dẫn kỹ năng,nghề nghiệp, cũng như các cuộc thi lập trình được tô chức trên trang web này.Tất cả đều có thé lưu lại dưới nhiều dạng khác nhau cũng như chia sẻ lên cáctrang mạng xã hội bằng chia sẻ hoặc liên kết tới đường dẫn của chứng chỉ

Tính năng chính:

Bài học có thể tương tác: Codecademy cung cấp các bài học liên quan đến lậptrình có thể tương tác cho phép người dùng thực hành lập trình trực tiếp trên

Trang 15

trình duyệt web Nền tảng này mang đến một phương pháp học tập thực hành,với phản hồi tức thì và cung cấp các gợi ý để giúp người dùng tiễn bộ

e “Skill Tracks” va “Career Paths”: Dé cao tính cá nhân hoá và hướng đến kết

quả cuối cùng là người dùng có thê hoàn thiện kỹ năng lập trình và ứng tuyểnthành công Codecademy sử dung trí tuệ nhân tao dé giúp học viên biết cần

luyện tập những gì và khi nào, ngoài ra còn cung cấp các hướng dẫn học tập

được tùy chỉnh được soạn sẵn gọi la “Skill Tracks” và “Career Paths” Skill

Tracks tập trung vào các ngôn ngữ lập trình hoặc chủ dé, trong khi Career Pathscung cấp lộ trình học tập toàn diện dé đạt được mục tiêu sự nghiệp cụ thể

e Xây dựng dự án và tô chức các cuộc Thi: Khi học Codecademy, người dùng có

thê tham gia các dự án và cuộc thi cho phép người dùng áp dụng những kỹ năngmới học vào các tình huống thực tế Giúp người dùng có được kinh nghiệm

thực tế va củng có hiểu biết về các khái niệm lập trình

e Trình soạn thảo mã: Codecademy cung cấp một trình soạn thảo mã tích hợp cho

phép người dùng viết và thực thi mã trực tiếp trên nền tảng web Giúp giảm tối

đa thời gian phải cài đặt và tối ưu hoá quá trình học tập

e Hỗ trợ từ cộng đồng và người hướng dẫn: Codecademy có một cộng đồng học

viên sôi nối, nơi người dùng có thé đặt câu hỏi, tìm kiếm sự trợ giúp và hợp tácvới những người học khác Diễn đàn cộng đồng cung cấp một nên tang dé thảoluận và chia sẻ kiến thức Với gói học tập Pro, người dùng có thể liên hệ trực

tiếp với những người soạn thảo khóa học hoặc người hướng dẫn đề giải đápthắc mắc và đặt yêu cầu

Ưu điểm:

e Dễ sử dụng và độ tương tác cao: Giao diện đơn giản va tất cả các khoá học, liên

tục được cá nhân hoá từ những dữ liệu mà người dùng cung cấp trong quá trìnhhọc Cho phép người dùng thực hành trực tiếp và nhận phản hồi tức thì Điều

này giúp người dùng nắm bắt kiến thức một cách hiệu quả và nhanh chóng

Ngoài ra, việc theo dõi tiễn độ học tập cũng như sự tiến bộ của bản thân mộtcách dé dang, từ việc hoàn thành bài học cho đến đánh giá kỹ năng Điều này

giúp người dùng tự định hướng và đánh giá quá trình học tập của mình.

e Hướng dẫn học tập được cấu trúc: Codecademy cung cấp các công cụ giúp

người dùng có một lộ trình học tập rõ rang và hướng dẫn đi từ cơ bản đến nângcao Điều này giúp người dùng xây dung một cơ sở vững chắc và phát triển kỹ

năng theo hướng mục tiêu.

e Học tập linh hoạt: Codecademy cho phép người dùng học tập theo tốc độ của

minh và theo lịch trình riêng Người dùng có thé truy cập vào nên tang bat kỳlúc nào và từ bất kỳ thiết bị nào có kết nối internet

Trang 16

e Thực hành thực tế: Codecademy tập trung vào việc áp dụng kỹ năng vào các dự

án thực tế Người dùng có cơ hội thực hành lập trình thông qua các bài tập và

dự án, giúp họ phát triển khả năng giải quyết van dé và kỹ năng thực tế

e Hỗ trợ từ cộng đồng: Codecademy có một cộng đồng học viên và người hỗ trợ

đông đảo, nơi người dùng có thé tìm kiếm sự trợ giúp, trao đôi ý kiến và chia sẻkiến thức Điều này tạo ra một môi trường học tập hỗ trợ và khích lệ sự tương

tác.

e Chứng chỉ hoàn thành: Codecademy cung cấp chứng chỉ có thé trình bày trên

hồ sơ, giúp người dùng chứng minh kỹ năng và thành tựu của mình cho nhatuyên dụng

1.4 Hạn chế của các hệ thống

Di cùng những lợi ích to lớn của việc học trực tuyến đó là những hạ

em đưới vai trò là người học nhận thấy:

e Thiếu sự tương tác: Sự tương tác giữa giảng viên và học viên trong những hệ

thống học trực tuyến thường thiếu hoặc những tính năng này cần phải trả phí

Điều này có thé gây nhằm lẫn, khó khăn và mat nhiều thời gian hơn cho họcviên trong việc hiểu và tiếp thu nội dung học tập

e Doi hỏi ky luật và tự quản lý cao: Học trực tuyến yêu cầu sự kỷ luật và tự quản

ly cao từ phía học viên Do không có một lịch trình cố định và không có sựgiám sát trực tiếp từ giảng viên, học viên phải tự sắp xếp lịch học và tự độngtriển khai quá trình học tập Điều này có thể là một thách thức đối với những

người thiếu ý thức tự học và tự quản lý

e Chưa có lộ trình cụ thé: Các hệ thôống/ứng dụng học trực tuyến hiện nay với mô

hình kinh doanh là bán những khoá học nhằm hoàn thiện một kỹ năng nhất định

và thường sẽ kết thúc khi học viên hoàn thành hết các bài học Thiếu lộ trình cụ

thể có thé khiến học viên mat phương hướng và không biết bắt đầu từ đâu điều

này có thê dẫn đến lãng phí thời gian và không hiệu quả trong quá trình học

Nhất là trong lĩnh vực lập trình cũng, Không thiếu những bạn đăng ký họcnhưng đến khi hoàn thành không biết áp dụng những kiến thức này như thế nào,cần bổ sung những kỹ năng, kiến thức nào dé hiéu sâu hơn dé thăng tiến trong

chặng đường học tập, làm việc.

e Thiếu tính cá nhân hoá: số lượng/nội dung bài học có định bat ké trình độ/xuất

phát điểm của mỗi người dẫn tới rào cản trong việc tiếp thu

e Công cụ hỗ trợ học tập còn thô sơ: Tuy triển khai rất nhiều công nghệ trong các

sản phẩm của mình nhưng các hệ thống học trực tuyến chưa tập trung vào pháttriển các công cụ, phần mềm hỗ trợ học tập đi kèm, chúng còn khá thô sơ, khó

sử dụng và chưa đem lại quá nhiều lợi ích mà đáng ra phải đem lại đột phá,

nâng cao hiệu quả học tập

xs 1

Do Tuan Phong - DI9PTDPT 0

Trang 17

e Rào cản về công nghệ: Đề tham gia học trực tuyến, học viên cần có kết nối

internet ôn định và truy cập vào các thiết bị công nghệ như máy tính hoặc điệnthoại thông minh Điều này có thể làm hạn chế sự tiếp cận với học tập trực

tuyến đôi với những người không có đủ tai nguyên công nghệ hoặc không cókết nối internet đáng tin cậy

Đứng ở góc độ người học, nhìn thấy những ưu/nhược điểm của những hệ thống

học trực tuyến hiện tại, cùng mong muốn của bản thân là tất cả mọi học viên tiếp cận

được ứng dụng phục vụ tốt nhất cho quá trình phát triển bản thân trên con đường học

tập và làm việc, em đã chọn đề tài này dé phat triển

1.5

Đồ án đặt mục tiêu xây dựng một hệ thống học trực tuyến có thé cải thiện, tự

động hóa quy trình học tập/đào tạo/quản tri và khắc phục được những nhược điểm của

những hệ thống học trực tuyến hiện tại Bài toán bao gồm phần chính: Phát triển ứng

dụng học trực tuyến trên nền tảng Web cung cấp các tính năng giúp người hướng dẫn

có thê thiết kế các bộ khoá học Quản trị viên truy cập được các khóa học nay va sắp

xếp chúng theo cấu trúc nối tiếp nhau thành các lộ trình học cho từng học viên Ngoài

ra, quản trị viên còn có thê quản lý được các thông tin tài khoản của các tác nhân tham

gia hệ thống Đối với học viên, hệ thống hỗ trợ phát triển kỹ năng, tư duy dé áp dung

vào giải quyết các van dé, bài toán phát sinh trong thực tế Hệ thống có tinh cá nhân

hoá cao khi thu thập kết quả học tập giúp tùy chỉnh nội dung học tập theo khả năng,

nhu cầu Hệ thống lấy học viên làm trung tâm, cung cấp những tiện ích giúp người học

có thể quản lý, sắp xếp thời gian hợp lý, giải đáp nhanh chóng thắc mắc, tăng cường

ghi nhớ thông tin, nâng cao hiệu quả học tập.

1.6

Qua chương 1, đồ án đã trình bày các khái niệm liên quan tới học trực tuyến,

cùng với đó là lợi ich và một số hệ thống phô biến trong lĩnh vực này Chương này

cũng phát biểu bài toán mà đồ án hướng tới dé thực hiện Ở chương tiếp theo, em sẽ

trình bày nghiên cứu về các phương pháp tiếp cận và nêu các công nghệ sử dụng dé

xây dựng hệ thống

xs 11

Do Tuan Phong - DI9PTDPT

Ph

Trang 18

Đồ án tốt nghiệp Đại học _CHƯƠNG 2:PHUONG PHÁP TIẾP CAN VÀ GIẢI QUYET VAN ĐỀ

CHƯƠNG 2: PHƯƠNG PHÁP TIẾP CAN VÀ GIẢI QUYẾT

VÁN ĐÈ

Chương này sẽ trình bày nghiên cứu về các giải pháp đề xây dựng hệ thống Beva

và nêu các công nghệ sử dụng dé xây dựng hệ thống

2.1

Trước khi chọn mô hình phát triển, em đã xem xét kỹ lưỡng các yêu cầu, quy

mô và mục tiêu của dự án E-learning và lựa chọn Mô hình thác nước (Waterfall

Model) dé phát triển hệ thống Mô hình thác nước phân chia các quá trình phát triển

thành các giai đoạn tuần tự tuyến tính, có nghĩa là bat kỳ giai đoạn nao trong quá trình

phát triển chỉ bắt đầu nếu giai đoạn trước đó đã hoàn thành, trong đó mỗi giai đoạn

phụ thuộc vào các sản phẩm của giai đoạn trước và tương ứng với việc chuyên môn

hóa các nghiệp vụ Phương pháp này thường được sử dụng trong các lĩnh vực thiết kế

kỹ thuật Trong phát triển phần mềm, đây thường là một trong những phương pháp ít

lặp lại và linh hoạt hon, vì tiễn trình diễn ra chủ yếu theo một hướng ("xuống dốc" nhưmột dòng nước) qua các giai đoạn [11]

e Thu thập và phân tích yêu cầu: Tat cả các yêu cầu của hệ thông được thu thập

trong giai đoạn này và được mô tả băng Tài liệu đặc tả (SRS - SoftwareRequirements Specification) Tài liệu này mô tả cách phần mềm hoạt động,

am 12

Do Tuân Phong - DI9PTDPT

Trang 19

Đồ án tốt nghiệp Đại học _CHƯƠNG 2:PHƯƠNG PHÁP TIẾP CAN VÀ GIẢI QUYET VAN ĐỀ

cũng như cung cấp thông tin chỉ tiết về các chức năng mà sản phẩm cần có đểđáp ứng tất cả mọi nhu cầu của các bên liên quan (doanh nghiệp, người dùng)

e Thiết kế hệ thông: Từ những yêu cầu được phân tích và thiết lập trong bước

trên, nhà phát triển xây dựng thiết kế cho hệ thống Thiết kế hệ thống này giúp

xác định yêu cầu về hệ thống và giúp định nghĩa kiến trúc tổng thé của hệthống

e_ Triển khai: Giai đoạn triển khai là nơi diễn ra quá trình phát triển sản phẩm

Nhóm phát triển sẽ làm việc dé chuyên đổi thiết kế thành một sản phẩm thực tếbang việc sử dụng công nghệ dé triển khai Mỗi mô-đun hoặc thành phan được

phát triển riêng biệt và các lập trình viên tuân thủ chặt chẽ tài liệu thiết kế

e Tích hợp và Kiểm thử: Tất cả các tính năng được phát triển trong giai đoạn triển

khai được tích hợp thành một hệ thống và được kiểm tra lỗi và sự có

e_ Triển khai hệ thong: Sau khi kiểm thử chức năng và phi chức năng được hoàn

thành, sản phẩm được triển khai trong môi trường khách hàng hoặc được phát

hành trên thị trường.

e Bao trì : Khi có van đề xuất hiện trong môi trường khách hàng, dé khắc phục

những van dé đó, các ban vá được phát hành Ngoài ra, dé nâng cao sản pham,

các phiên bản tốt hơn được phát hành Bảo trì được thực hiện dé triển khai

những thay đổi này trong môi trường khách hang

Việc chọn mô hình thác nước (Waterfall) dé phát triển một dự án E-learning trong đồ

án của em vì những lợi ích và lý do sau:

e Yêu cầu ôn định: Do yêu cầu của hệ thống E- -learning đã được xác định rõ ràng

và không thay đối quá nhiều trong quá trình phát triển Hoàn toàn phù hợp với yêu cầu của mô hình thác nước.

e Thiết kế trước khi triển khai: Mô hình thác nước đặt nặng vào việc thiết kế toàn

bộ hệ thống trước khi triển khai Điều này có lợi cho dự án E-learning vì có thể

thiết kế các khóa học, cấu trúc hệ thống và giao diện người dùng một cách chitiết trước khi triển khai

e Sự liên tục và kiểm soát: Mô hình thác nước tạo ra một quy trình phát triển có

thứ tự, tuần tự và có sự kiểm soát rõ ràng, đảm bảo rằng mỗi giai đoạn đượchoàn thành và xem xét kỹ lưỡng trước khi chuyên sang giai đoạn tiếp theo

Điều này giúp theo dõi tiễn độ và tài liệu hóa từng phần giúp giải thích rõ hơn

về các công việc đã thực hiện cũng như chi tiết cách hệ thống hoạt động

2.2 Mô hình hoạt độn

xs 1

Trang 20

Đồ án tốt nghiệp Dai hoc CHƯƠNG 2:PHƯƠNG PHÁP TIẾP CAN VA GIẢI QUYÉT VAN DE

1 Người dùng truy cập trang web qua URL

FRONTEND

Tương tác giữa trong hệ thống diễn ra theo mô hình Client (phía máy khách) - Server(phía máy chủ) Giải thích chỉ tiết về quá trình tương tác giữa client và server như sau:

1 Người dùng Người dùng nhập URL: Người dùng nhập URL của trang web (vi

dụ: www.example.com) vào thanh địa chỉ của trình duyệt web và nhắn Enter

2 Trình duyệt sẽ tạo ra một truy van DNS (phân giải tên miền) dé tìm dia chỉ IP

tương ứng của tên miền đó Trình duyệt lấy địa chỉ IP liên kết với tên miền từ

máy chủ DNS Trình duyệt thiết lập một kết nỗi TCP với máy chủ bằng cách sử

dụng địa chi IP đã lay và HTTP/HTTPS port mặc định Trình duyệt gửi một yêu

cầu HTTP GET đến máy chủ

3 Máy chủ nhận yêu cầu: Máy chủ nhận yêu cầu HTTP và xử lý Hệ thống sử

dụng mô hình Single Page Application ( là một kiểu ứng dụng web mà tất cả

các tài nguyên, bao gồm HTML, CSS và JavaScript, được tải về một lần duynhất khi người dùng truy cập trang web Sau đó, các thay đôi và cập nhật trangdiễn ra thông qua việc tải lại nội dung bằng JavaScript, mà không cần tải lại

trang hoàn toàn) Do đó, máy chủ web (web server nơi trang web được deploy)

Aw 14

Đỗ Tuấn Phong - DI9PTDPT

Trang 21

trả về một tệp HTML duy nhất chứa ứng dụng React.js Máy chủ gửi tệpHTML chứa ứng dụng React.js trở lại trình duyệt dưới dang phản hồi HTTP

4 Trình duyệt nhận tệp HTML: Trình duyệt nhận tệp HTML từ máy chủ dưới

dạng phản hồi HTTP Trình duyệt phân tích tệp HTML và phát hiện đường dẫn

tới thư viện React.js (nằm trong file index.html) Nếu thư viện React.js chưađược lưu vào bộ nhớ đệm của trình duyệt, trình duyệt tải xuống thư viện này

Sau khi thư viện React.Js được tải, trình duyệt thực thi mã JavaScript trong tệp

HTML, khởi tạo ứng dung React.

5 Su dụng dir liệu đã được tải, ứng dụng React hiển thị các thành phần

(component) phù hợp dựa trên logic và trạng thai (state) của ứng dụng thành

giao diện hién thị cho người dùng

6 Đóng gói di liệu và gửi HTTP request: khi người dùng tương tac với giao diện

người dùng, ứng dụng sẽ gửi yêu cầu tương ứng đến Backend thông qua các

API (tập hợp các quy tắc và giao thức cho phép các phần mềm tương tác và

giao tiếp với nhau, trong hệ thống nay API được sử dung dé giao tiếp giữa phía

Frontend và phía Backend, cho phép việc trao đổi dữ liệu giữa hai phan của hệ

thống)

7 Backend nhận yêu cầu từ ứng dung React và xử lý, có thé bao gồm xác thực

người dùng, kiểm tra quyền truy cập, và tiếp tục xử lý yêu cầu Dưới đây là một

số trường hợp:

7.1.1 Nếu yêu cầu của ứng dung React liên quan đến dữ liệu từ cơ sở dữ liệuPostgresSQL, Backend sử dụng thư viện dé truy vấn cơ sở dit liệu Backend tao truy

van SQL và gửi đến cơ sở dữ liệu đề lay dữ liệu cần thiết

7.1.2 Cơ sở đữ liệu lưu trữ và truy xuất đữ liệu theo yêu cầu trả về thông tin cho

7.2.2 Minio Server trả về thông tin thông qua HTTP response

§ Gửi trả phản hồi bằng HTTP Response: gửi kết quả xử lý trở lại cho ứng dụng

React thông qua các API dưới dạng JSON.

2.3 Cô

Trong dự án này JavaScript đóng vai trò trung tâm, là ngôn ngữ dé [

hệ thống, trong đó: ReactJS được sử dụng dé xây dựng giao diện người dùng phía máy

khách, NodeJS đóng vai trò là môi trường chạy mã JavaScript trong quá trình phat

triển và gỡ lỗi (debug) ReactJS, phía máy chu (server-side) dé xây dựng các API

xs 1

Do Tuan Phong - DI9PTDPT °

Trang 22

(Application Programming Interface - là một tập hợp các quy tắc và giao thức mà cho

phép các phần mềm khác tương tác và trao đổi dữ liệu với nhau) và xây dựng các câulệnh nhằm tương tác với cơ sở dữ liệu PostgreSQL, và hệ thống lưu trữ MinIO

2.3.1

JavaScript được tao ra bởi Brendan Eich khi ông làm việc tai NetscapeCommunications vào năm 1995 Ban đầu, ngôn ngữ này được gọi là "Mocha" và sau

đó đổi tên thành "LiveScript" Tuy nhiên, dé tận dụng sự phô biến của ngôn ngữ Java

vào thời điểm đó, Netscape đã quyết định đổi tên thành "JavaScript" trong một thỏa

thuận hợp tác với công ty Sun Microsystems (nay là Oracle) Tên "JavaScript" không

phản ánh một mối liên hệ kỹ thuật chặt chẽ với Java, mà chỉ là một chiến lược tiếp thị

JavaScript, thường được viết tắt là JS, là ngôn ngữ lập trình là một trong những

công nghệ cốt lõi của World Wide Web, cùng với HTML và CSS Tính đến năm 2023,98,7% trang web sử dụng JavaScript ở phía máy khách cho hoạt động của trang web,thường kết hợp với các thư viện của bên thứ ba Tat cả các trình duyệt web phổ biếnhiện nay đều có công cụ JavaScript chuyên dụng để thực thi mã trên thiết bị của ngườidùng.[12]

JavaScript có nhiều ưu điểm đáng chú ý, đó là lý do tại sao nó trở thành một

trong những ngôn ngữ lập trình phổ biến nhất trên thế giới Dưới đây là một số ưuđiểm chính của JavaScript:

e Được hỗ trợ rộng rãi trên các trình duyệt: JavaScript là ngôn ngữ phía máy

khách, được hỗ trợ trên hầu hết các trình duyệt web hiện đại như Chrome,

Firefox, Safari, và Edge Điều này cho phép các nhà phát triển sử dụngJavaScript dé tạo ra các ứng dụng web tương tác mạnh mẽ và đa nền tảng

e Dễ học và sử dụng: JavaScript có cú pháp dễ hiểu và gần gũi với ngôn ngữ lập

trình khác như C, C++, và Java Điều này làm cho việc học và sử dụng

JavaScript trở nên dé dang đối với những người mới bắt đầu trong lĩnh vực lập

trình.

e Tích hợp tốt với HTML và CSS: JavaScript cho phép tương tác và thay đôi nội

dung HTML và kiểu dáng (style) CSS của trang web Điều này giúp tạo ra các

hiệu ứng động, tương tác người dùng và trải nghiệm web phong phú.

e© Mạnh mẽ và linh hoạt: JavaScript cung cấp nhiều tính năng mạnh mẽ như xử lý

sự kiện, thao tác với DOM (Document Object Model - Mô hình Các Đối tượngTài liệu, dùng dé truy xuất và thao tác trên các tài liệu có cau trúc dang HTML

hay XML bằng các ngôn ngữ lập trình nhằm thay đổi nội dung và cấu trúc trang

web), giao tiếp với máy chủ thông qua AJAX (Asynchronous Javascript andXML, là phương thức trao đôi dữ liệu với máy chủ vả cập nhật một hay nhiềuphần của trang web), và xử lý dữ liệu JSON (JavaScript Object Notation, là một

xs 1

Trang 23

kiểu định dang dữ liệu tuân theo một quy luật nhất định) Nó cũng hỗ trợ cáckhái niệm như ham bat đồng bộ (asynchronous) và Promise, cho phép xử ly dit

liệu và tương tác với máy chủ một cách hiệu quả.

e Cộng đồng phát triển mạnh mẽ: JavaScript có một cộng đồng phát triển lớn và

nhiêu tài liệu, thư viện đi cùng với sự hỗ trợ của cộng đồng đã giúp ngôn ngữ

này trở nên ngày một mạnh mẽ, phục vụ trên nhiều nền tảng khác nhau

e Kha năng tích hợp và mở rộng: JavaScript cho phép tích hợp các thư viện và

công cụ bên thứ ba, các Framework sẽ bao gồm các đoạn code được viết sẵncùng với các thư viện, tệp hình ảnh và tài liệu tham khảo được đóng thành một

gói, giúp giảm thời gian phát triển, mở rộng khả năng và hiệu suất của ứngdụng Các Framework hỗ trợ phát triển các ứng dụng di động như React Native

và lonic, phát triển ứng dụng web như Angular, Vue, , phát triển API

RESTful (Representational State Transfer) giúp giao tiếp giữa người dùng và

máy chủ như: Express JS.

2.3.2 React

React (còn được gọi là React.Js hoặc ReactJS) là một thư viện JavaScript mãnguồn mở và miễn phí để xây dựng giao diện người dùng dựa trên các thành phần

(Component) Được phát triển bởi Meta (trước đây là Facebook) và một cộng đồng

gồm các nhà phát triển cùng các công ty cá nhân.[13]

ReactJS giúp tạo ra các ứng dụng web, có tính tương tác cao và dé bảo trì Nó

sử dụng cách tiếp cận gọi là "React component" hoặc “component", trong đó giao diệnngười dung được chia thành các thành phan độc lập và có thé tái sử dụng Mỗi thành

phần có trạng thái riêng của nó, va ReactJS sé tự động cập nhật giao diện khi trạng tháithay đồi

ReactJS sử dụng JSX (JavaScript XML) dé xây dựng giao diện người dùng (UI)

trong ứng dụng web JSX là một phần mở rộng của JavaScript, cho phép viết mã

HTML-like (tương tự HTML) trong JavaScript Cú pháp JSX cho phép tạo các

component (thành phần) UI của mình băng cách kết hợp mã JavaScript và các phần tử

HTML.

Uu điểm:

e Tính linh hoạt và tái sử dụng: ReactJS cho phép phát triển ứng dụng web theo

mô hình component Các component là các phan tử UI độc lập có thé được tái

sử dụng trong nhiều phần khác nhau của ứng dụng

e Hiệu năng cao: ReactJS sử dụng Virtual DOM (là tên gọi viết tắt của Document

Object Model — tạm dich Mô hình Các Đối tượng Tài liệu, DOM được dùng détruy xuất và thao tác trên các tài liệu có cấu trúc dạng HTML hay XML băng

các ngôn ngữ lập trình thông dụng như Javascript, PHP ) dé tối ưu hóa hiệu

xs 1

Trang 24

suất của ứng dụng Virtual DOM là một bản sao của DOM được lưu trữ trong

bộ nhớ và được cập nhật một cách nhanh chóng khi có thay đổi, giúp tăng tốc

độ và hiệu suất của ứng dụng

e Dễ hiểu: JSX là một ngôn ngữ lập trình phân biệt được sử dụng trong ReactJS

để mô tả các thành phần UI JSX kết hợp HTML và JavaScript, giúp cho việcviết mã dé hiểu và dé bao trì hơn

e Dễ quản lý thông tin: ReactJS cho phép quan lý trạng thái của các thành phần

UI thông qua State va Props State là trang thái của một thành phan được quan

ly bởi chính nó, trong khi Props là các giá trị được truyền vào từ bên ngoài détùy chỉnh hoặc điều khiển hành vi của một thành phan

e Hỗ trợ tốt cho SEO: ReactJS hỗ trợ tốt cho việc tối ưu hóa SEO(là tên gọi viết

tắt của Search Engine Optimization - Tối ưu hóa công cụ tìm kiếm) Với các

thư viện như React Helmet, các nhà phát triển có thể quản lý các phần tử meta

và title cho từng trang web, giúp tăng khả năng tìm kiếm và tăng cường trảinghiệm người dùng.

e Hỗ trợ đa nén tang: ReactJS không chỉ được sử dụng dé phát triển ứng dụng

web, mà còn được sử dụng dé phát triển ứng dụng di động với React Native Sửdung React Native, các nhà phát triển có thé xây dựng ứng dụng di động cho caiOS và Android sử dụng cùng một mã nguồn

e Cộng đồng đông dao: Các nhà phát triển ReactJS có nhiều phương tiện dé tìm

hiểu tài liệu như trang web react.dev của nhà phát hành ReactJS liên tục đượccập nhật về nội dung và vi du, Wikipedia, W3C, cũng như hỏi đáp lẫn nhaunhư Github, StackOverFlow, giúp giải quyết nhanh chóng các vấn đề, thắcmắc trong quá trình sử dụng

Nhược điểm:

e Học tập nâng cao và kéo dai: Javascript là một ngôn ngữ khá dễ tiếp cận tuy

nhiên dé hiéu sâu về Javascript cũng như ReactJS yêu cầu một quá trình học tậpliên tục dé hiểu cú pháp JSX và các khái niệm như components, props, state, vàlifecycle (vòng đời), liên tục được cập nhật qua các phiên bản Điều này cóthể làm tăng độ khó của việc học dé có thé sử dụng tối đa hiệu năng ứng dụngđối với những người mới bắt đầu

e Phuc tạp cho các ứng dụng lớn: Trong các ứng dụng React lớn và phức tap,

việc quản lý state và props có thể trở nên khó khăn Khi ứng dụng phát triển,

việc theo dõi và duy trì các component hierarchy và trạng thái của chúng có thétrở nên phức tạp.

e Cần sử dụng thư viện bên thứ ba: ReactJS là một thư viện giao diện người dùng

(UD, không phải một framework đầy đủ Điều này có nghĩa là để xây dựng mộtứng dụng hoàn chỉnh, cần phải sử dụng các thư viện bên thứ ba như React

Router dé quản lý định tuyến, Redux dé quản lý trạng thái ứng dụng, hoặc

xs 1

Trang 25

Axios dé tương tác với các API, Gây ra phức tạp trong việc quản lý và bảodưỡng ứng dụng.

e Cập nhật phiên bản: Do ReactJS được phát triển nhanh chóng, việc cập nhật

phiên bản có thé là một thách thức Các phiên ban mới có thể có các cải tiễn vàtính năng mới, nhưng cũng có thể phá vỡ sự tương thích ngược với các phiên

bản trước Điều này có thé đòi hỏi công việc cập nhật và kiêm tra lại mã nguồnhiện có.

e Khả năng hiểu và tìm kiếm tài liệu: Vì ReactJS là một công nghệ mới, khả năng

tìm kiếm tải liệu và hỗ trợ có thể hạn chế so với các công nghệ phổ biến khácnhư Angular hoặc Vue.js Điều này có thể khiến việc tìm giải pháp cho các vấn

dé cụ thé trở nên khó khăn hơn

2.3.3 NodeJS

Node.js là một dự án mã nguồn mở đa nên tảng, được viết bởi Ryan Dahl vàonăm 2009, khoảng 13 năm sau khi Netscape's LiveWire Pro Web giới thiệu môi

trường JavaScript phía máy chủ đầu tiên Phiên bản ban đầu chỉ hỗ trợ Linux và Mac

OS X Việc phát triển và bảo trì của Node.js được Ryan Dahl đứng đầu và sau đó được Joyent (một công ty phần mềm và dịch vụ có trụ sở ở San Francisco, California) tài

trợ Node.Js là một môi trường chạy mã JavaScript phía máy chủ, hoạt động trên công

cụ JavaScript V8 và thực thi mã JavaScript ngoài trình duyệt web Node.js cho phép

nhà phát triển sử dụng JavaScript dé viết các logic, công cụ và kịch ban (script) phía

máy chủ Kha năng chạy mã JavaScript trên máy chủ được sử dụng dé xử ly dit liệu và

tạo các bản tin gửi đến trình duyệt web của người dùng Do đó, Nodejs đại điện cho

một mô hình "JavaScript ở mọi nơi", thống nhất phát triển ứng dụng web xung quanhmột ngôn ngữ lập trình duy nhất, thay vì sử dụng các ngôn ngữ khác nhau cho phía

máy chủ và phía máy khách.

Ưu điểm:

e Hiệu suất cao: Node.js sử dụng mô hình không đồng bộ và sự kiện, cho phép xử

lý đồng thời nhiều yêu cầu mà không gây block quá trình thực thi Điều này

giúp Node.js có hiệu suất cao và khả năng xử lý tốt trong các ứng dụng có tải

lớn.

e Công cụ và thư viện phong phú: Node.js thừa hưởng từ các cộng đồng, nhà phát

triển sử dung JavaScript, cung cấp nhiều công cụ, framework và thư viện hỗ trợphát triển ứng dụng backend Thư viện npm (Node Package Manager) cung cấprất nhiều module và gói mã nguồn mở cho phép tái sử dụng và phát triển nhanhchóng.

e Xây dựng ứng dung thời gian thực: Node.Js thích hợp cho việc xây dựng các

ứng dụng thời gian thực (real-time) như ứng dụng chat, trò chơi trực tuyến, và

xs 1

Do Tuan Phong - DI9PTDPT ?

Trang 26

hệ thông đa người dùng đồng thời nhờ vào kiến trúc không đồng bộ và xử lý sự

kiện (event).

e Dễ học và sử dụng: Node.js được xây dung trên nền tảng JavaScript, nên nó dé

học và sử dụng cho những người đã có kinh nghiệm với JavaScript Đồng thời,Node.js cho phép sử dụng mã chung giữa phía máy khách và phía may chủ,

giúp tiết kiệm thời gian và công sức trong việc phát triển ứng dụng

e Tiết kiệm tài nguyên: Nodejs sử dụng mô hình đơn luồng và non-blocking I/O

(phương pháp xử lý dữ liệu đầu vào/đầu ra trên máy tính mà không yêu cầuchương trình chờ đợi kết quả trước khi thực hiện các tác vụ khác), giúp tiết

kiệm tài nguyên máy chủ và cho phép xử lý hàng ngàn kết nối đồng thời

Nhược điểm:

e@ Không phù hợp cho xử ly tính toán phức tạp: Nodejs tập trung vào xử ly I/O

nhiều hơn xử lý tính toán phức tạp Trong các tác vụ tính toán nặng, Node.js cóthé không hiệu qua bằng các ngôn ngữ khác như Java hoặc C#

e Hạn chế trong xử ly: Mặc dù việc sử dụng mô hình Xử lý đơn luéng

(Single-threaded) giúp tiết kiệm tài nguyên máy chủ, nhưng cũng có nghĩa là Node.js

chỉ có thể sử dụng một lõi CPU duy nhất Điều này có thể là hạn chế trong việc

xử lý đồng thời và quản lý tải lớn

e© Quản lý mã lớn: Với các ứng dụng mã nguồn lớn và phức tạp, việc quản lý mã

có thé trở nên khó khăn hon Node.js không cung cấp cấu trúc mô-đun mạnh mẽnhư một số ngôn ngữ và framework khác

e Cập nhật phiên bản: Do tính đột phá và sự phát triển nhanh chóng, việc cập nhật

phiên bản mới của Node.js có thể gây ra sự không tương thích và đòi hỏi côngsức dé thích ứng với các thay đồi

2.3.3 PostgreSQL

PostgreSQL được phát triển vào năm 1986 bởi một nhóm các nhà nghiên cứu

và kỹ sư tại Dai học California, Berkeley Dự án này được gọi là "Postgres" ban đầu,

đề chỉ nguồn gốc của nó là một phiên bản kế thừa của cơ sở đữ liệu Ingres Là một hệquản tri cơ sở dir liệu quan hệ mã nguồn mở và miễn phí, với sự nhấn mạnh vao tinh

mở rộng và tuân thủ SQL Vào năm 1996, dự án được đổi tên thành PostgreSQL Sau

một cuộc đánh giá vào năm 2007, nhóm phát triển quyết định giữ nguyên tên

PostgreSQL và biệt danh Postgres PostgreSQL từng là cơ sở dữ liệu mặc định cho

macOS Server và cũng có sẵn trên Linux, FreeBSD, OpenBSD và Windows Cung cấp

các tính năng nôi bật sau:

e Giao dịch với tính chất ACID: PostgreSQL hỗ trợ giao dịch với tính chất

atomicity (nguyên tử), consistency (nhất quán), isolation (cô lập) va durability(bền vững) Điều này đảm bảo rằng các giao dịch được thực hiện an toàn và

đáng tin cậy.

xs 2

Trang 27

Các view có thê tự động cập nhật: Trong cơ sở dữ liệu, một view là kết quả truyvấn được lưu trữ, PostgreSQL cho phép tạo view có thể tự động cập nhật dữ

liệu Điều này giúp giảm thiểu công việc lập trình và đảm bảo tính nhất quán

của dữ liệu trong cơ sở dữ liệu.

Materialized views: PostgreSQL hỗ trợ materialized views, tức là các view lưu

trữ dữ liệu vật lý trên đĩa Điều này cung cấp hiệu suất cao hơn khi truy van ditliệu, đồng thời giảm thiểu việc tính toán lặp lại

Triggers: PostgreSQL cho phép tạo triggers, tức là các khối mã được thực thi tự

động khi xảy ra một sự kiện cụ thé trong cơ sở dữ liệu Triggers có thể sử dụng

dé kiểm tra và kiểm soát dit liệu, thực hiện các hành động tự động và đáp ứng

các sự kiện cụ thê

Khóa ngoại (foreign keys): PostgreSQL hỗ trợ khóa ngoại, cho phép xây dựng

mối quan hệ giữa các bảng trong cơ sở dit liệu Điều nay đảm bảo tính toàn ven

và nhất quán của dữ liệu khi thực hiện các thao tác liên quan đến khóa ngoại

Stored procedures: PostgreSQL cho phép tạo và lưu trữ các stored procedures,tức là các khối mã được lưu trữ trong cơ sở dtr liệu va có thé được gọi và thực

thi từ xa Stored procedures giúp tăng tính linh hoạt và hiệu suất trong việc xử

ly dữ liệu phức tap và thực hiện các thao tác logic phía máy chu.

PostgreSQL được thiết kế để xử lý một loạt các khối công việc, từ các máy đơn

lẻ cho đến các kho dữ liệu doanh nghiệp hoặc dịch vụ web với nhiều người dùng đồngthời Điều này cho phép PostgreSQL phù hợp với các ứng dụng và môi trường khác

nhau, từ các dự án nhỏ đến các hệ thống doanh nghiệp lớn

Ưu điểm:

Tinh mở rộng và mạnh mẽ: PostgreSQL được thiết kế dé xử lý một loạt cáckhối công việc, từ các ứng dụng nhỏ đến các hệ thống doanh nghiệp lớn Nó cókhả năng mở rộng tốt, cho phép mở rộng cấu trúc cơ sở đữ liệu và tăng hiệu

suất khi cần thiết

Tính linh hoạt và mã nguồn mở: PostgreSQL là một hệ quản trị cơ sở dữ liệu

mã nguồn mở, cho phép người dùng tùy chỉnh và mở rộng theo nhu cầu cụ thécủa ho Có thé thay đổi và tùy chỉnh các tính năng, thêm các phan mở rộng vàsửa đổi mã nguồn của PostgreSQL dé phù hợp với yêu cầu của dự án

Tinh bao mật cao: PostgreSQL có một hệ thống bảo mật mạnh mẽ và đáng tincậy Nó cung cấp các tinh năng bao mật như quản lý quyền truy cập, mã hóa dữliệu, kiểm tra tự động va theo đõi hoạt động cơ sở dữ liệu Điều này giúp bảo vệ

dữ liệu quan trọng và đáp ứng các yêu cầu bảo mật của các ứng dụng và hệthống

Tính nhất quán và tin cậy: PostgreSQL hỗ trợ tính chất ACID (atomicity,consistency, isolation, durability), đảm bảo rằng các yêu cầu tới máy chủ được

21

Trang 28

thực hiện an toàn và nhất quán Nó cũng có khả năng sao lưu và khôi phục dữliệu, giúp đảm bảo tính sẵn sàng và tin cậy của hệ thống

e Hỗ trợ đa nén tảng: PostgreSQL có sẵn trên nhiều nền tang, bao gồm Linux,

Windows, macOS và các hệ điều hành UNIX khác Điều này cho phép triểnkhai PostgreSQL trên nhiều môi trường khác nhau

e Cộng đồng phát triển và hỗ trợ: PostgreSQL có cộng đồng phát triển mạnh mẽ

và rộng lớn, với hàng ngàn người dùng và nhà phát triển trên toàn thế giới Dễdàng có thé tìm thay tài liệu, tài nguyên va sự hỗ trợ từ cộng đồng dé giải quyếtcác van đề và tìm hiểu về các tính năng mới của PostgreSQL

Nhược điểm:

với một số hệ quản trị cơ sở dữ liệu khác Điều này có thê đòi hỏi một sự hiểu

biết sâu về cấu trúc và cách hoạt động của PostgreSQL dé quan lý và tối ưu hóa

cơ sở đữ liệu.

e Tài nguyên hệ thống: PostgreSQL có thé yêu cầu tài nguyên hệ thống khá cao,

đặc biệt khi xử lý các khối công việc lớn hoặc có nhiều người dùng đồng thời

Điều này có thé đòi hỏi cấu hình phần cứng và tài nguyên hệ thống phù hợp déđảm bảo hiệu suất tốt

e Hạn chế về quản lý dt liệu phi cấu trúc: Mặc dù PostgreSQL hỗ trợ lưu trữ và

truy van dit liệu phi cấu trúc thông qua các tinh năng như JSON và hỗ trợ tìm

kiếm toàn văn bản, nhưng nó không phải là lựa chọn tốt nhất cho các tác vụ dirliệu phi cau trúc phức tạp

® Sự phụ thuộc vào bên thứ ba: Một số tính năng như sao lưu và phục hồi dữ liệu,

quản lý hiệu năng và giám sát có thể đòi hỏi sự hỗ trợ từ các công cụ và phần

mềm bên thứ ba

2.3.4 Minio

Nhà phát triển chính của MinIO là MinIO Inc, một công ty công nghệ có trụ sở

tại Thung lũng Silicon, được thành lập bởi Anand Babu Periasamy, Garima Kapoor va

Harshavardhana vào tháng 11 năm 2014.[15]

Minio là một hệ thống lưu trữ đối tượng (object storage system)

tương thích với Amazon S3 (Simple Storage Service) Cung cấp phương thức linh hoạt

và dễ dàng mở rộng, để lưu trữ và truy xuất dữ liệu không cấu trúc như hình ảnh,

video, tệp tin, va dữ liệu khác thông qua giao thức HTTP.

Minio được thiết kế dé đơn giản hóa việc triển khai và quản lý hệ thống lưu trữ

đối tượng Nó có thể được triển khai trên các máy chủ riêng lẻ hoặc trong môi trường

đám mây, cho phép người dùng xây dựng và quản lý hệ thống lưu trữ đối tượng riêng

của minh mà không phụ thuộc vào các nhà cung cấp dich vụ lưu trữ đám mây tư nhân

xs 22

Do Tuan Phong - DI9PTDPT

Trang 29

Ưu điểm:

e Tương thích với Amazon S3: MinIO hỗ trợ giao thức va API tương thích với

Amazon S3 Điều này cho phép sử dụng MinIO như một sự thay thế hoặc lớptrung gian cho việc lưu trữ đối tượng trên Amazon S3, mà không cần thay đôi

mã nguồn.

e Linh hoạt và dễ triển khai: MinIO cho phép dé dàng triển khai hệ thống lưu trữ

đối tượng trên các máy chủ riêng lẻ hoặc trong môi trường đám mây công cộnghoặc riêng tư Có thé mở rộng MinIO theo chiều ngang dé tăng khả năng lưu trữ

và xử lý.

e Hiệu năng cao: MinIO được tối ưu hóa để cung cấp hiệu suất cao cho việc lưu

trữ và truy xuất đữ liệu đối tượng Sử dụng kiến trúc phân tán dé phân tán dir

liệu va tăng khả năng chịu tai.

e Bảo mật và quản lý quyền truy cập: MinIO cung cấp các tính năng bảo mật như

mã hóa dé liệu trong quá trình truyền và lưu trữ, xác thực người dùng và quản

lý quyền truy cập Có thể kiểm soát quyền truy cập đến dữ liệu và áp dụng cácchính sách bảo mật theo nhu cầu

e Cấu hình linh hoạt: MinIO cung cấp các tùy chọn cấu hình linh hoạt dé tùy

chỉnh và điều chỉnh hiệu suất và tính năng của hệ thống theo yêu cầu

e Tích hợp dé dàng: MinIO tích hợp tốt với một số công cụ và framework phổ

biến như Kubernetes, Docker, Apache Spark và nhiều hệ thong lưu trữ dt liệu

khác.

e Mã nguồn mở: MinIO là một dự án mã nguồn mở, điều này cho phép cộng

đồng phát triên và đóng góp vào việc cải thiện và mở rộng tính năng của

Nhược điểm:

e Hạn chế về quy mô: MinIO được thiết kế để hoạt động tốt trong các môi trường

nhỏ đến trung bình Mặc du MinIO cho phép mở rộng theo chiều ngang bằngcách thêm nút (node), tuy nhiên, việc mở rộng quy mô lớn có thể gặp khó khăn

và có thể không đạt được hiệu suất tối đa so với các giải pháp lưu trữ đối tượngkhác Khi quy mô hệ thống lên hàng trăm hoặc hàng nghìn nút, có thể gặp khó

khăn trong việc quản lý và vận hành.

e Thiếu tính năng phức tap: So với một số giải pháp lưu trữ đối tượng khác,

MinlO có thé thiếu một số tính năng phức tạp và mở rộng như cơ chế đồng bộ

hóa đa nút hoặc tính năng quản lý dữ liệu phân tán phức tạp.

e Hỗ trợ công cụ và tai liệu: Mac dù MinIO có sự tích hợp tốt với một số công cụ

phô biến, tuy nhiên, so với các nhà cung cấp lưu trữ đám mây lớn, MinIO có íttài liệu hơn và khả năng hỗ trợ có thê hạn chế

cụm lưu trữ phân tán, việc quản lý và hiệu chỉnh hệ thống có thê trở nên phứctạp hơn so với các giải pháp truyền thống

xs 2

Trang 30

2.3.5 Visual Studio Code

Giới thiệu: Visual Studio Code (hay gọi tắt là VS Code) là một trình soạn thảo mã

nguồn mã nguồn mở, đa nền tang và được phát triển bởi Microsoft Nó là một ứng

dụng mạnh mẽ và linh hoạt, được thiết kế đặc biệt dé hỗ trợ phát triển ứng dụng web

và ứng dụng di động, nhưng cũng có thể sử dụng cho nhiều loại dự án phát triển khác

Đa nền tảng: VS Code có sẵn trên Windows, macOS và Linux, cho phép làm

việc trên bất kỳ hệ điều hành nào ma ban sử dụng Điều này giúp tạo điều kiện

thuận lợi cho việc làm việc đa nền tảng và hợp tác giữa các nhóm phát triển

Hỗ trợ ngôn ngữ đa dạng: VS Code hỗ trợ nhiều ngôn ngữ lập trình và

framework phô biến Nó đi kèm với các tinh năng như gợi ý mã thông minh,

kiểm tra lỗi cú pháp, định dang mã tự động và nhiều công cụ khác dé tăng năng

suất và chất lượng mã

Tích hợp công cụ phát triển: VS Code tích hợp tốt với nhiều công cụ phát triển

phổ biến như Git, Docker và Terminal Ta có thé làm việc với các du án quan lýphiên bản, triển khai ứng dụng và thao tác với dòng lệnh một cách thuận tiện từ

giao diện của VS Code.

2.3.6 PgAdmin

Giới thiệu: PgAdmin là một phần mềm quản lý cơ sở dữ liệu mã nguồn mở được phat

triển dé hỗ trợ người dùng quản lý và điều khiến cơ sở dit liệu PostgreSQL Nó cung

cấp một giao diện đồ họa trực quan, cho phép thực hiện các tác vụ quản lý và truy vấn

cơ sở đữ liệu.

Lý do sử dụng:

Giao diện đồ họa trực quan: PgAdmin cung cấp một giao diện người dùng đồ

họa trực quan, giúp dễ dàng thao tác và tương tác với cơ sở đữ liệu PgAdmin

cung cấp các tính năng quản lý toàn diện cho co sở dữ liệu PostgreSQL, ngườidùng có thể tạo cơ sở đữ liệu mới, tạo bảng, chỉnh sửa cấu trúc, quản lý ràng

buộc, chỉ mục và quyền truy cập và xóa các đối tượng cơ sở đữ liệu như bang,chỉ mục, ràng buộc và chế độ xem thông qua giao diện trực quan, giảm thiểucần phải viết truy van SQL thủ công Điều này giúp duy trì và kiểm soát cơ sở

dữ liệu một cách dễ dàng và hiệu quả.

Truy van dữ liệu và thao tác: PgAdmin cung cấp một trình truy van SQL mạnh

mẽ cho phép thực thi các truy van SQL trực tiếp trên cơ sở dit liệu Người dùng

24

Trang 31

có thé truy van, sắp xếp, loc va sửa đồi dữ liệu trong các bảng PgAdmin cũng

hỗ trợ tính năng xem trước trực quan cho các truy vấn, giúp kiểm tra kết quả

liệu trong cơ sở dữ liệu.

Sao lưu và khôi phục đữ liệu: PgAdmin cung cấp tính năng sao lưu và khôiphục dữ liệu Người dùng có thé tao sao lưu toàn bộ cơ sở dit liệu hoặc chỉ các

bảng cụ thé, và khôi phục lại dữ liệu từ các tập tin sao lưu Điều này giúp bảo

vệ dữ liệu và phục hồi lại dữ liệu trong trường hợp xảy ra sự cố

Hỗ trợ đa nền tảng: PgAdmin có sẵn trên nhiều nền tảng khác nhau bao gồm

Windows, macOS và Linux Điều này cho phép người dùng truy cập và sử dụng

công cụ trên đa dạng hệ điều hành

2.3.7 Postman

Giới thiệu: Là một trong những công cụ phô biến nhất được sử dụng trong thử nghiệmcác API Postman là một công cụ tương tác với API phô biến nhất, được sử dung rộngrãi trong quá trình phát triển và kiểm thử các API Nó cung cấp một giao diện trực

quan dé xây dựng, kiểm thử, gỡ lỗi và tài liệu hóa các API Với Postman, có thể gọi

Rest API mà không cần viết dong code nao

Ly do sử dung:

Kiểm thử va gỡ lỗi: Postman cung cấp một môi trường mạnh mẽ dé kiêm thử va

gỡ lỗi các API Có thể tạo và gửi các yêu cầu API, xem các thông tin phản hồi

từ máy chủ, kiểm tra và xác minh đữ liệu trả về Điều này giúp đảm bảo tínhchính xác và hiệu suất của các API

Sử dụng Collections (Bộ sưu tập): Postman cho phép người dùng tạo bộ sưu tập

cho các lệnh gọi API Mỗi bộ sưu tập có thể tạo các thư mục con và nhiều yêu

cầu (request), giúp cho việc việc tổ chức và quan lý các bộ thử nghiệm va API

Quản lý môi trường và biến: Bằng cách sử dụng Postman, có thể tạo và quản lý

các môi trường khác nhau, cho phép làm việc/lưu trữ/tái sử dụng các biến môitrường và tùy chỉnh các giá trị dé dang Điều này giúp kiểm tra các yêu cầu APItrong các cai đặt khác nhau và thay đôi môi trường dé dàng

2.3.8 Figma

Giới thiệu:

Đỗ Tuần Phong - DI9PTDPT 25

Trang 32

Figma là một công cụ thiết kế giao diện người dùng (UI) và trải nghiệm người dùng

(UX) dựa trên web Nó được phát triển nhằm hỗ trợ quá trình thiết kế giao diện, cộngtác và xây dựng prototype các ứng dụng và trang web.

Tạo và thử nghiệm nguyên mẫu (prototyping): Figma cho phép tạo các nguyên

mẫu tương tác, từ các trang tĩnh đến các trải nghiệm tương tác phức tạp Người

dùng có thê thêm liên kết, chuyên đổi trạng thái và tạo các hiệu ứng chuyên

động đề mô phỏng trải nghiệm người dùng thực tế Điều này giúp kiểm tra và

thử nghiệm giao diện trước khi triển khai, đồng thời thu thập phản hồi từ người

dùng.

Tích hop và mở rộng: Figma có khả năng tích hợp với các công cụ và dịch vu

khác như Slack, Jira, Zeplin và các plugin có sẵn trong kho ứng dụng mở rộng.

Điều này giúp tích hợp Figma vào quy trình làm việc hiện có và mở rộng khả

năng của nó.

Truy cập đa nền tảng: Figma được xây dựng dựa trên web và có san trên nhiềunền tảng, bao gồm Windows, macOS và Linux Điều này cho phép người dùngtruy cập và làm việc trên dự án từ bat kỳ thiết bị nào có kết nối internet

Trong chương này, đồ án đã đưa ra cách tiếp cận dé giải quyết dé tài “Nghiên cứu và

áp dụng React JS trong xây dựng ứng dụng học trực tuyến Beva” bằng cách áp dụng

mô hình thác nước, giới thiệu và giải thích các thành phần trong mô hình hoạt động hệ

thống với ngôn ngữ JavaScript làm chủ đạo, đi cùng các thư viện ReactJS, công cụ

NodeJS, hệ quản tri cơ so dtr liệu PostgreSQL, dịch vụ Mino và một số công cụ hỗ trợnhư Visual Studio Code, Postman, PgAdmin, Figma Ở chương tiếp theo em sẽ trìnhbày chỉ tiết các bước trong quá trình xây dựng hệ thống học trực tuyến Beva

Trang 33

Đồ án tốt nghiệp Đại học | CHƯƠNG 3: XÂY DỰNG HE THONG HỌC TRỰC TUYẾN BEVA

CHƯƠNG 3: XÂY DỰNG HỆ THÓNG HỌC TRỰC TUYẾN BEVA

Chương này sẽ trình bay chi tiết các bước trong quá trình phát triển để xây dựng hệ

thong Beva, bao gom:

- Xac định yêu cầu (mục tiêu hệ thông, xác định đối tượng sử dụng)

- _ Đặc tả hệ thống (biểu đồ use case, kịch bản chuẩn và ngoại lệ)

- _ Thiết kế tương tac (user flow, một số màn hình trong thiết kế giao điện)

- Phan tích thiết kế phần mềm (thiết kế lớp thực thé, Thiết kế cơ sở dữ liệu, thiết

kế động: biểu đồ tuần tự - giả code)

Hệ thống có ba đối tượng tham gia sử dụng bao gồm:

- - Người hướng dẫn: Đối tượng này sử dụng hệ thống dé thiết kế các khóa học

Họ có quyền tạo/quản lý các khoá học, bài học và bài trắc nghiệm

- Quan trị viên: Đối tượng này có quyền truy cập vào các khóa học và có khả

năng quản lý chúng Quản trị viên có thê xem, chỉnh sửa, xóa và tô chức cáckhóa học theo cấu trúc nối tiếp nhau để tạo lộ trình học tập cho từng học viên

Họ cũng có quyền quan lý thông tin tài khoản của tat cả các đối tượng tham gia

hệ thống, bao gồm người hướng dẫn và học viên, quản trị viên khác

- Hoc viên: Đối tượng chính của hệ thống, học viên sử dụng nền tang dé tiếp cận

và tham gia vào các khóa học trực tuyến Họ có thể tiếp thu nội dung học tậpthông qua các bài giảng, tài liệu học tập và thực hiện các bài trắc nghiệm

3.2

3.2.1 Biểu đồ use case tổng quát

Các chức năng tương ứng với từng tác nhân (actor):

xs 2

Trang 34

- Học viên: Đăng nhập, Xem nội dung bài học, Xem lộ trình học, Xem lịch học,

Xem tiến trình học, Xem bài học, Thêm/sửa/xóa/xem ghi chú cá nhân, Ghi chú

bài học, Xem/thêm/sửa/xóa thời gian biéu cá nhân

- _ Người hướng dẫn (Mentor): Đăng nhập, Thêm/sửa/xóa/publish các khóa học,

Thêm/sửa các bài học, Thêm/sửa/xoá các bộ/bài trắc nghiệm

- Quan trị viên: Đăng nhập, Thêm/sửa/xóa/xem tài khoản học viên,

Thêm/sửa/xóa/xem tài khoản người hướng dẫn, Thêm lộ trình học, Thêm khóa

học vao lộ trình học, Xem danh sách/Thêm/sửa/xóa học viên trong danh sách

học bài học, Thêm/sửa/xoá các bộ/bài trắc nghiệm

Trang 35

Xam ghi chú cả Thêm các bài hocnhân

Xem tài khoản người hướng dẫn.

P Sửa tài khoản

Học viên gười hướng dẫn

Xem nội dung 'hêm các bộ/bài

bài hoc, trac nghiém / |

bài học

(em danh sách học viễn trong danh sách bai

Trang 36

Đồ án tốt nghiệp Đại học | CHUONG 3: XÂY DỰNG HE THONG HỌC TRỰC TUYẾN BEVA

Đăng nhập

esabell23@gmail.com

1234@56

beva Bang nhapbetter mind, better life

Hinh 3.1 - Giao dién tao tai khoan Hoc vién

Các tác nhân tham gia bao gồm: Quan trị viên, người hướng dẫn, học viên Goi chung

2 Người dùng nhập thông tin đăng nhập, nhắn nút Đăng nhập

3 Hệ thống báo thành công, chuyển người dùng vào màn giao

diện chính.

Ngoại lệ | 2 Người dùng nhập không đủ thông tin đăng nhập, hệ thống thông

báo lỗi ở các ô nhập còn thiếu

4 Người dùng nhập tài khoản không tôn tại, hệ thống thông báo lỗi

Trang 37

3.2.2.1 Quản trị viên

Chức năng tạo tài khoản học viên

Tạo tài khoản Học viên Danh sách Học viên

Tên Email Action

i i

h a

|

Kịch bản 1 Tai giao diện chính, quan tri viên chọn chức năng Quản lý

chính Học viên.

2 Giao diện hiển thị danh sách học viên

3 Quản tri viên nhập thông tin Học viên cần tạo và ấn nút xác

nhận: email cá nhân, email Beva, tên học viên, mật khâu

4 Hệ thong bao thành công, xóa các thông tin Hoc viên đã điền

và cập nhật lại danh sách Học viên.

Ngoại lệ | 3 Quản trị viên nhập không đủ thông tin học viên mới, hệ thống

thông báo lỗi ở các ô nhập còn thiếu

am 1

Trang 38

Chức năng sửa tài khoản học viên

« Sửa tài khoản Học viên Danh sách Học viên

phong15 beva.edu.vn Tên Email Action

ail Beva phong15@beva.ed'

Sửa tai khoản khcd nhong17@beva.edu.vn

Hình 3.3 - Giao diện sửa tài khoản Học viên

Use case | Sửa tài khoản học viên

Actor Quản trị viên

Tiền điều | Quản trị viên đã đăng nhập thành công

Hậu điêu | Quản trị viên sửa thành công tài khoản học viên.

kiện

Nguyễn Van D | D@beva.edu.vn

Va giao diện thêm tài khoản học viên hiện lên có các 6 nhập thông tin: email cá nhân, email Beva, tên học viên, mật khâu.

am 2

Do Tuân Phong - DI9PTDPT 3

Trang 39

Đề án tốt nghiệp Đại học | CHƯƠNG 3: XÂY DỰNG HE THONG HỌC TRỰC TUYẾN BEVA

3 Quản trị viên click nút sửa tương ứng với tài khoản cần sửa

4 Hệ thong hiển thi các 6 nhập được điền sẵn thông tin của học

viên: email cá nhân, email Beva, tên học viên (hình 3.3).

5 Quản tri viên nhập thông tin Học viên cần sửa và ấn nút xác

nhận.

6 Hệ thống báo thành công, xóa các thông tin Học viên đã điền

và cập nhật lại danh sách Học viên.

5 Quản trị viên nhập không đủ thông tin học viên, hệ thống thông

báo lỗi ở các ô nhập còn thiếu

6 Quan trị viên nhập tài khoản đã tồn tại, hệ thống thông báo lỗi

Chức năng xoá tài khoản học viên

») Mac nhận xoá tài khoản

Hữy | 28099 |

Use case | Xoá tài khoản học viên

Actor Quản trị viên

Tiền điều | Quản trị viên đã đăng nhập thành công

Hậu điêu | Quản trị viên xoá thành công tài khoản học viên.

1 Tại giao diện chính, quản trị viên chọn chức năng Quản ly

Trang 40

Đồ án tốt nghiệp Đại học | CHUONG 3: XÂY DỰNG HE THONG HỌC TRỰC TUYẾN BEVA

Học viên.

2 Giao diện bao gôm danh sách học viên:

Và giao diện thêm tài khoản học viên hiện lên có các ô nhập

thông tin: email cá nhân, email Beva, tên học viên, mật khẩu.

Quản trị viên click nút xoá tương ứng với tài khoản cần xoá

Hệ thống hiền thị thông báo xác nhận xóa (hình 3.4)

Quản trị viên bam nút xác nhận

Hệ thong báo thành công va cập nhật lai danh sách Học viên

Tiêu đề	Nghiên cứu và áp dụng React Js trong xây dựng ứng dụng học trực tuyến Beva
Tác giả	Đỗ Tuần Phong
Người hướng dẫn	ThS. Vũ Thị Tú Anh
Trường học	Học viện Công nghệ Bưu chính Viễn thông
Chuyên ngành	Công nghệ thông tin
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2023
Thành phố	Hà Nội

Định dạng
Số trang	111
Dung lượng	25,03 MB