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

Trang 1

HỌC VIEN CÔNG NGHỆ BƯU CHÍNH VIÊN THONG KHOA ĐA PHƯƠNG TIỆN

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

Sinh viên thực hiện : DO TUẦN PHONG Lớ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ất lâ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ô trong khoa Da Phương tiện của Học Viện Công Nghệ Bưu Chính Viễn Thông đã truyền đạt cho 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ủa thầy cô, bạn bè và gia đình Điều đó đã tiếp thêm động lực giúp cho em có thể hoàn thà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át triể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

1.2 Lợi ích của việc học trực tuyến

1.3 Một số hệ thống phổ biến trong lĩnh vực học trực tuyến

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ệu 3.5 Thiết kế động

3.5.1 Chức năng thêm tai khoản học viên3.5.2 Chức năng sửa tài khoản học viên3.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 Mentor3.5.6 Chức năng xoá tải khoản mentor3.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ọc3.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.2 - Giao diện tạo tài khoản Học viênHình 3.3 - Giao diện sửa tài khoản Học viênHì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 mentorHì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 mentorHì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ọcHì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ọcHì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ảnHì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ọcHì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ọcHì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.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ọcHì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ệnh hoà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ành mộ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à tham gia 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ực tuyế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ảinghiệ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át triể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 đây cuộ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át biể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 ichcủ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ựctuyê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 doanh thu 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ội thả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ài liệ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ương tiệ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ực tuyế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ời cung 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úp mọ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ảm tố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ương

trì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ụ

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ới mộ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ẽ, được bao gồm trong chương trình học của các MBA cụ thé khi đăng ký vào các lớp họ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 bai kiể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ét bở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

@ 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àn cầ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ại Coursera 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.

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ĩnh vự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ọ quan tâ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ạy phủ 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át

lạ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á

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ỳ khi nao 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

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ách họ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ên Codecademy 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úp ngườ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ực cô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ác trang 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ập trì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ển thà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 Paths cung 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ăng mớ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ác vớ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ảo luậ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 đáp thắ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ình họ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ột

cá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âng cao Đ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

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 nha tuyê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ọc viê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ự động triể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ọc

như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át triể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ện thoạ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.

Đồ á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.

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.

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 - Software

Requirements 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ớiyê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 chi tiế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 được hoà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

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 duy

nhất khi người dùng truy cập trang web Sau đó, các thay đôi và cập nhật trang diễ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ệp

HTML 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ệ

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ệu

PostgresSQL, 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.1 Nếu ứng dụng React yêu cầu tương tác với hệ thống lưu trữ đối tượng

Minio, Backend sẽ sử dụng thư viện dé gửi HTTP request đến Minio Server Có thé là tải lên tệp tin, tải xuống tệp tin hoặc thực hiện các hoạt động khác liên quan đến lưu

trữ đối tượng.

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âu lệnh nhằm tương tác với cơ sở dữ liệu PostgreSQL, và hệ thống lưu trữ MinIO.

JavaScript được tao ra bởi Brendan Eich khi ông làm việc tai Netscape

Communications 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ến hiện nay đều có công cụ JavaScript chuyên dụng để thực thi mã trên thiết bị của người dù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ụng JavaScript 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

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ượng Tà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 and XML, là phương thức trao đôi dữ liệu với máy chủ vả cập nhật một hay nhiều phầ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ác khá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ẵn cù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 ứng dụ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ện ngườ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ái thay đồ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ử

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ệc viế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ải nghiệ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 ca iOS 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 được cập nhật về nội dung và vi du, Wikipedia, W3C, cũng như hỏi đáp lẫn nhau như Github, StackOverFlow, giúp giải quyết nhanh chóng các vấn đề, thắc mắ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ập liê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ảo dưỡ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ồn hiệ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ác

như 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ào nă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 đó đượcJoyent (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ôngcụ 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 quanh mộ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

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ấp rất nhiều module và gói mã nguồn mở cho phép tái sử dụng và phát triển nhanh chó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ầu

chươ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ông sứ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ả truy vấ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 dit liệ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 đồng thờ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ác

khố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 tin cậ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ệ

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ển khai 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ết cá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ụ dir liệ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ớp trung 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ộng hoặ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ác chí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

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ằng

cá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ượng khá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ó ít tà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ức tạ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.

Lý do sử dụng:

Giao diện người dùng thân thiện: Visual Studio Code có giao diện đơn giản, trực quan và đễ sử dụng Nó cung cấp một trải nghiệm người dùng tốt với các

tính năng như kiểm soát phiên bản tích hợp, gợi ý mã, đánh dấu cú pháp và nhiều hơn nữa.

Đ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ười dù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ểu cầ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ả

truy vấn một cách dễ dàng.

Quản lý người dùng và quyền truy cập: PgAdmin cho phép quản lý người dùng, nhóm người dùng và quyền truy cập trong cơ sở dữ liệu Người dùng có the tao và quan lý người ding, gan quyền truy cập cho người dùng và quản lý quyền

truy cập cơ sở đữ liệu Điều này giúp kiểm soát quyền truy cập và bảo mật dữ

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ôi

phụ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ệm cá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ộng rã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ính chí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ôi trườ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 API trong các cai đặt khác nhau và thay đôi môi trường dé dàng.

2.3.8 FigmaGiớ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ộng tác và xây dựng prototype các ứng dụng và trang web.

Lý do sử dụng:

Thiết kế giao diện người dùng (UI): Figma cung cấp một giao điện và công cụ mạnh mẽ để thiết kế giao diện người dùng Người dùng có thể tạo ra các thành

phan, bố cục, và các trang một cách dé dàng và linh hoạt Figma cung cấp các công cụ vẽ, thiết kế và tổ chức các yếu tô giao diện, giúp tao ra các giao diện đẹp và tương tác.

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

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ều nền tảng, bao gồm Windows, macOS và Linux Điều này cho phép người dùng truy 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ình bà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) - Một số kết đạt được

- _ Đánh giá kết qua

3.1.1 Mục tiêu hệ thống

Cung cấp một Website học trực tuyến linh hoạt và cá nhân hóa Người hướng dẫn có thé thiết kế và quản lý các khóa học Quản trị viên có thé quan lý lộ trình hoc và tài

khoản của các thành viên trong hệ thống Đối với học viên, hệ thống giúp hỗ trợ phát triển kỹ năng và tư duy, hỗ trợ quan lý thời gian và cung cấp các tiện ích, nhằm tạo ra

môi trường học tập hiệu quả.

3.1.2 Xác định đối tượng sử dụng

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ác khó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ập

thô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.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

Thêm tài khoảngui hưởng dan

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

Xem tài khoảnngườ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 / |

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

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

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

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ênActor 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ậpthô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

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ênActor 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