BÁO CÁO THỰC TẬP TỐT NGHIỆP PHÁT TRIỂN VÀ TRIỂN KHAI DỰ ÁN TRANG WEB CHẤM THI PHỤC VỤ DOANH NGHIỆP

MỤC LỤC MỞ ĐẦU ...................................................................................................... 1 CHƯƠNG I: TỔNG QUAN VỀ XÂY DỰNG ỨNG DỤNG .................. 5 1.1 Giới thiệu về MERN Stack:.......................................................... 5 1.2 Docker và lợi ích của việc sử dụng Docker:................................ 5 1.3 Thiết kế UX/UI với Figma:........................................................... 7 1.4 Quản lý dự án phần mềm:............................................................ 8 1.5 Bảo mật trong ứng dụng web:...................................................... 9 CHƯƠNG II: THIẾT KẾ, XÂY DỰNG ỨNG DỤNG CHẤM THI PHỤC VỤ CÔNG TÁC ĐÀO TẠO......................................................... 11 2.1 Yêu cầu ......................................................................................... 11 2.2 Mô hình kiến trúc hệ thống:....................................................... 13 2.3 Thiết kế cơ sở dữ liệu:................................................................. 15 2.4 Giao diện người dùng: ................................................................ 18 CHƯƠNG III: XÂY DỰNG ỨNG DỤNG.............................................. 21 3.1 Cài đặt môi trường phát triển:................................................... 21 3.2 Công cụ và công nghệ sử dụng:.................................................. 25 3.3 Lập trình các chức năng chính: ................................................. 28 3.4 Kiểm thử ứng dụng:.................................................................... 41 CHƯƠNG IV: TRIỂN KHAI TRÊN MÔI TRƯỜNG THỰC TẾ ...... 44 4.1 . Mô hình thử nghiệm.................................................................. 44 4.2 Quy trình triển khai:................................................................... 47 4.3 Kết quả thí nghiệm:..................................................................... 49 4.4 Đánh giá hiệu suất:...................................................................... 49 CHƯƠNG V: KẾT LUẬN CHUNG ....................................................... 51 5.1 Kết luận chung: ........................................................................... 51 5.2 Hướng phát triển:........................................................................ 51 TÀI LIỆU THAM KHẢO ..............................................

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC GIA ĐỊNH KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO THỰC TẬP TỐT NGHIỆP

PHÁT TRIỂN VÀ TRIỂN KHAI DỰ ÁN TRANG WEB CHẤM THI PHỤC VỤ DOANH NGHIỆP

Giảng viên hướng dẫn: ThS ĐINH HOÀNG GIA

Sinh viên thực hiện: HUỲNH ĐỨC THÀNH

MSSV: 210410015 Lớp: K15DCPM01 Khoá: 15

Thành phố Hồ Chí Minh, tháng 07 năm 2024

cố gắng hết sức để làm báo cáo nhưng chắc chắn bài báo cáo khó tránh khỏi những thiếu sót, kính mong thầy cô xem xét và góp ý bài báo cáo em được hoàn thiệt hơn

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

ĐÁNH GIÁ CỦA ĐƠN VỊ THỰC TẬP

1 Thái độ tác phong trong thời gian thực tập:

2 Kiến thức chuyên môn:

3 Nhận thức thực tế:

4 Đánh giá khác:

5 Đánh giá chung kết quả thực tập:

………… , ngày ……… tháng ……… năm …………

Giảng viên hướng dẫn

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

ĐÁNH GIÁ CỦA GIẢNG VIÊN HƯỚNG DẪN

1 Thái độ tác phong trong thời gian thực tập:

2 Kiến thức chuyên môn:

3 Nhận thức thực tế:

4 Đánh giá khác:

5 Đánh giá chung kết quả thực tập:

………, ngày ……… tháng ……… năm …………

Giảng viên hướng dẫn

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

TRƯỜNG ĐẠI HỌC GIA ĐỊNH

KHOA CÔNG NGHỆ THÔNG TIN

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

Địa chỉ: 05, Nguyễn Gia Thiều, lầu 5, Thiên Sơn Building, Quận 3, TP.HCM

Điện thoại: 028.36368449 Tên cán bộ phụ trách thực tập tại doanh nghiệp: HỒ TẤN DƯƠNG Thời gian thực tập: 3 tháng Từ: 22/02/2024 Đến: 22/05/2024

Stt Tuần thứ Nội dung CV thực tập

trong tuần

Nhận xét của CB hướng dẫn tại DN (Ký tên và ghi rõ

họ tên)

Nhận xét của giảng viên hướng

dẫn (Ký tên và ghi rõ

họ tên)

1

Tuần 1 (Từ ngày 22/02

đến ngày 29/02)

Nhận yêu cầu từ doanh nghiện, phân tích yêu cầu

2

Tuần 2 (Từ ngày 01/03

đến ngày 08/03)

Báo cáo phân tích và lên ý tưởng thiết kế phần mềm, thiết kế giao diện người dùng

3

Tuần 3 (Từ ngày 09/03

đến ngày 16/03)

Báo cáo thiết kế hệ thống và thiết kế giao diện Chọn công nghệ phù hợp để phát triển

mã nguồn

4

Tuần 4 (Từ ngày 17/03

đến ngày 24/03)

Phát triển mã nguồn giao diện người dùng với ReactJs,

TailwindCSS

5

Tuần 5 (Từ ngày 25/03

đến ngày 01/04)

Báo cáo kiểm tra giao diện người dùng, sửa lỗi giao diện người dùng

6

Tuần 6 (Từ ngày 02/04

đến ngày 09/04)

Phát triển mã nguồn hệ thống với NodeJs, ExpressJs cùng các thư viện liên quan

7

Tuần 7 (Từ ngày 10/04

đến ngày 17/04)

Báo cáo kiểm tra mã nguồn hệ thống, sửa lỗi connection

8

Tuần 8 (Từ ngày 18/04

đến ngày 03/05)

Tìm hiểu phương pháp

và cách thức triển khai ứng dụng lên server thực tế

10

Tuần 10 (Từ ngày 04/05

đến ngày 11/05)

Báo cáo và sửa lỗi khi triển khai ứng dụng

MỤC LỤC

MỞ ĐẦU 1

CHƯƠNG I: TỔNG QUAN VỀ XÂY DỰNG ỨNG DỤNG 5

1.1 Giới thiệu về MERN Stack: 5

1.2 Docker và lợi ích của việc sử dụng Docker: 5

1.3 Thiết kế UX/UI với Figma: 7

1.4 Quản lý dự án phần mềm: 8

1.5 Bảo mật trong ứng dụng web: 9

CHƯƠNG II: THIẾT KẾ, XÂY DỰNG ỨNG DỤNG CHẤM THI PHỤC VỤ CÔNG TÁC ĐÀO TẠO 11

2.1 Yêu cầu 11

2.2 Mô hình kiến trúc hệ thống: 13

2.3 Thiết kế cơ sở dữ liệu: 15

2.4 Giao diện người dùng: 18

CHƯƠNG III: XÂY DỰNG ỨNG DỤNG 21

3.1 Cài đặt môi trường phát triển: 21

3.2 Công cụ và công nghệ sử dụng: 25

3.3 Lập trình các chức năng chính: 28

3.4 Kiểm thử ứng dụng: 41

CHƯƠNG IV: TRIỂN KHAI TRÊN MÔI TRƯỜNG THỰC TẾ 44

4.1 Mô hình thử nghiệm 44

4.2 Quy trình triển khai: 47

4.3 Kết quả thí nghiệm: 49

4.4 Đánh giá hiệu suất: 49

CHƯƠNG V: KẾT LUẬN CHUNG 51

5.1 Kết luận chung: 51

5.2 Hướng phát triển: 51

TÀI LIỆU THAM KHẢO 53

MỞ ĐẦU

Trong bối cảnh phát triển nhanh chóng của công nghệ thông tin và truyền thông, việc ứng dụng công nghệ vào các lĩnh vực khác nhau đã trở thành một xu hướng tất yếu Đặc biệt, trong lĩnh vực giáo dục và đào tạo, việc tổ chức các cuộc thi thiết kế và truyền thông ngày càng trở nên phổ biến Những cuộc thi này không chỉ giúp phát hiện và bồi dưỡng tài năng trẻ mà còn góp phần nâng cao chất lượng nguồn nhân lực cho ngành công nghiệp sáng tạo Tuy nhiên, việc quản lý

và chấm thi cho các cuộc thi này thường gặp nhiều khó khăn, từ khâu tiếp nhận bài dự thi cho đến việc đánh giá và công bố kết quả

Trong bối cảnh công nghệ số ngày càng phát triển, việc tổ chức các cuộc thi thiết kế và truyền thông trở nên phổ biến hơn bao giờ hết Tuy nhiên, quy trình chấm thi truyền thống thường gặp nhiều khó khăn như thiếu minh bạch, dễ xảy

ra sai sót và mất thời gian Đề tài “Phát Triển và Triển Khai Dự Án Trang Web Chấm Thi” được chọn nhằm giải quyết những vấn đề này Hệ thống sẽ cung cấp một nền tảng trực tuyến cho phép các doanh nghiệp và tổ chức dễ dàng chấm thi các dự án, từ đó nâng cao tính chuyên nghiệp và hiệu quả trong quy trình đánh giá

Nhằm đáp ứng nhu cầu này, dự án "Phát Triển và Triển Khai Dự Án Trang Web Chấm Thi" ra đời với mục tiêu xây dựng một hệ thống chấm thi trực tuyến hiệu quả và thân thiện với người dùng Hệ thống này không chỉ giúp các doanh nghiệp tổ chức các cuộc thi một cách chuyên nghiệp mà còn đảm bảo tính minh bạch và công bằng trong quá trình chấm thi Với giao diện hiện đại, dễ sử dụng,

hệ thống sẽ cung cấp cho người dùng những trải nghiệm tốt nhất, từ việc đăng

ký tham gia, nộp bài thi cho đến việc nhận xét và đánh giá

Phạm vi nghiên cứu của đề tài tập trung vào việc phát triển một ứng dụng web

sử dụng công nghệ MERN stack (MongoDB, Express.js, React.js, Node.js) kết hợp với Docker để triển khai Nghiên cứu sẽ bao gồm việc phân tích yêu cầu người dùng, thiết kế giao diện người dùng thân thiện, và xây dựng các chức năng cần thiết cho hệ thống chấm thi Bên cạnh đó, hệ thống cũng sẽ được thiết

kế để có khả năng mở rộng, đáp ứng nhu cầu của nhiều cuộc thi khác nhau Một trong những điểm nổi bật của dự án này là việc áp dụng công nghệ MERN stack, một trong những công nghệ hiện đại nhất hiện nay trong phát triển ứng dụng web Sự kết hợp này không chỉ giúp tối ưu hóa hiệu suất của ứng dụng mà còn đảm bảo tính mở rộng và bảo trì dễ dàng trong tương lai Bên cạnh đó, việc

sử dụng Docker trong quá trình triển khai sẽ giúp tạo ra một môi trường nhất quán và dễ dàng quản lý, từ đó giảm thiểu các rủi ro liên quan đến sự khác biệt giữa môi trường phát triển và môi trường thực tế

Kết quả của dự án sẽ là một hệ thống chấm thi trực tuyến hoàn chỉnh, bao gồm các tính năng như đăng nhập, tìm kiếm bài thi, chấm thi, và xuất file kết quả

Hệ thống sẽ giúp giảm thiểu thời gian chấm thi, nâng cao tính chính xác và minh bạch trong quy trình đánh giá Ngoài ra, việc áp dụng Docker sẽ giúp việc triển khai và quản lý ứng dụng trở nên dễ dàng hơn, đồng thời đảm bảo tính ổn định

và khả năng mở rộng của hệ thống Qua đó, dự án không chỉ đáp ứng nhu cầu hiện tại mà còn có thể phát triển trong tương lai, phục vụ cho nhiều lĩnh vực liên quan đến thiết kế và truyền thông

Hệ thống chấm thi trực tuyến sẽ bao gồm nhiều chức năng nổi bật như đăng nhập, đăng ký tài khoản, tìm kiếm bài thi, xem chi tiết bài thi, chấm thi và quản

lý tài khoản người dùng Đặc biệt, chức năng chấm thi sẽ cho phép người dùng đánh giá các bài thi một cách dễ dàng và nhanh chóng, đồng thời cung cấp các

công cụ hỗ trợ để người chấm có thể đưa ra nhận xét chính xác và khách quan nhất Hệ thống cũng sẽ hỗ trợ tính năng thông báo qua email, giúp người dùng cập nhật thông tin nhanh chóng về trạng thái bài thi của mình

Để đảm bảo rằng hệ thống hoạt động hiệu quả và đáp ứng được nhu cầu của người dùng, việc kiểm thử ứng dụng sẽ được thực hiện một cách nghiêm ngặt Các phương pháp kiểm thử đơn vị, kiểm thử tích hợp và kiểm thử giao diện người dùng sẽ được áp dụng để phát hiện và khắc phục các lỗi phát sinh trong quá trình phát triển Bên cạnh đó, việc đánh giá hiệu suất của hệ thống cũng sẽ được thực hiện để đảm bảo rằng ứng dụng có thể xử lý được lượng truy cập lớn

mà không bị giảm hiệu suất

Một yếu tố không thể thiếu trong dự án này là việc triển khai hệ thống lên môi trường thực tế Quy trình triển khai sẽ bao gồm việc sử dụng Docker để tạo ra các container cho ứng dụng, từ đó đảm bảo rằng môi trường triển khai giống hệt như môi trường phát triển Việc đưa ứng dụng lên server thực tế và cấu hình tên miền sẽ giúp người dùng dễ dàng truy cập vào hệ thống Đồng thời, việc giám sát và bảo trì hệ thống cũng sẽ được thực hiện thường xuyên để đảm bảo rằng ứng dụng luôn hoạt động ổn định và an toàn

Cuối cùng, dự án không chỉ nhằm mục đích phát triển một hệ thống chấm thi hiệu quả mà còn góp phần nâng cao chất lượng đào tạo và phát triển nguồn nhân lực trong lĩnh vực thiết kế và truyền thông Qua đó, dự án mong muốn tạo ra một môi trường cạnh tranh lành mạnh, khuyến khích sự sáng tạo và đổi mới trong cộng đồng

Với những lý do trên, dự án "Phát Triển và Triển Khai Dự Án Trang Web Chấm Thi" không chỉ là một sản phẩm công nghệ mà còn là một bước tiến quan trọng

trong việc áp dụng công nghệ thông tin vào giáo dục Chúng tôi hy vọng rằng

hệ thống này sẽ trở thành một công cụ hữu ích cho các doanh nghiệp, tổ chức trong việc tổ chức và quản lý các cuộc thi, đồng thời tạo ra những giá trị bền vững cho cộng đồng thiết kế và truyền thông

Dự án không chỉ mang ý nghĩa công nghệ mà còn có giá trị xã hội sâu sắc Hệ thống chấm thi trực tuyến sẽ tạo điều kiện thuận lợi cho việc phát hiện và phát triển tài năng trẻ trong lĩnh vực thiết kế và truyền thông Điều này không chỉ giúp các cá nhân phát huy tối đa năng lực sáng tạo của mình mà còn đóng góp vào sự phát triển chung của ngành công nghiệp sáng tạo

Ngoài ra, dự án còn góp phần nâng cao nhận thức về tầm quan trọng của công nghệ trong giáo dục và đào tạo Bằng cách ứng dụng các công nghệ tiên tiến như MERN stack và Docker, dự án không chỉ mang lại hiệu quả cao trong việc chấm thi mà còn là minh chứng cho khả năng ứng dụng công nghệ vào giải quyết các vấn đề thực tiễn Qua đó, dự án hy vọng sẽ tạo ra một làn sóng ứng dụng công nghệ trong các lĩnh vực khác, khuyến khích sự đổi mới và sáng tạo không ngừng trong xã hội

CHƯƠNG I: TỔNG QUAN VỀ XÂY DỰNG ỨNG DỤNG

1.1 Giới thiệu về MERN Stack:

MERN stack là một bộ công nghệ phát triển ứng dụng web hiện đại, bao gồm bốn thành phần chính: MongoDB, Express.js, React.js và Node.js MongoDB

là một cơ sở dữ liệu NoSQL, cho phép lưu trữ dữ liệu theo cấu trúc linh hoạt, rất phù hợp cho các ứng dụng có yêu cầu thay đổi nhanh chóng như hệ thống chấm thi Với khả năng mở rộng và hiệu suất cao, MongoDB giúp lưu trữ thông tin người dùng, bài thi và kết quả chấm thi một cách hiệu quả

Express.js là một framework cho Node.js, giúp xây dựng các ứng dụng web và API một cách nhanh chóng và dễ dàng Nó cung cấp các phương thức để quản

lý routing, middleware và xử lý các yêu cầu HTTP, giúp việc phát triển backend cho hệ thống chấm thi trở nên mượt mà và hiệu quả

React.js là thư viện JavaScript mạnh mẽ được sử dụng để xây dựng giao diện người dùng Với khả năng tạo ra các component tái sử dụng, React giúp thiết

kế giao diện cho hệ thống chấm thi trở nên linh hoạt và dễ bảo trì Người dùng

có thể tương tác với giao diện một cách mượt mà, từ việc đăng nhập cho đến việc xem chi tiết bài thi

Node.js, nền tảng chạy JavaScript phía server, cho phép xây dựng các ứng dụng mạng hiệu suất cao Với khả năng xử lý đồng thời nhiều kết nối, Node.js rất phù hợp cho các ứng dụng cần phản hồi nhanh, như hệ thống chấm thi với nhiều người dùng truy cập đồng thời

1.2 Docker và lợi ích của việc sử dụng Docker:

Docker là một công cụ giúp đóng gói ứng dụng và tất cả các phụ thuộc của nó vào trong một container Điều này không chỉ giúp đơn giản hóa quá trình triển khai mà còn đảm bảo rằng ứng dụng sẽ chạy nhất quán trên mọi môi trường Đối với dự án chấm thi, việc sử dụng Docker mang lại nhiều lợi ích đáng kể

Đầu tiên, Docker giúp giảm thiểu xung đột môi trường Khi phát triển ứng dụng, các lập trình viên thường gặp phải vấn đề "nó chạy trên máy của tôi nhưng không chạy trên máy của bạn" Với Docker, mọi thứ được đóng gói trong container, đảm bảo rằng ứng dụng sẽ hoạt động giống nhau trên tất cả các máy chủ

Thứ hai, Docker cung cấp khả năng mở rộng dễ dàng Khi số lượng người dùng tăng lên, việc khởi động thêm các container mới để phục vụ nhu cầu là rất đơn giản Điều này giúp hệ thống chấm thi có thể đáp ứng nhanh chóng khi có nhiều người tham gia cùng lúc

Hình 1.2.2: Lợi ích của Docker

Cuối cùng, Docker hỗ trợ quy trình CI/CD (Continuous Integration/Continuous Deployment), giúp tự động hóa quy trình phát triển và triển khai ứng dụng Điều

này không chỉ tiết kiệm thời gian mà còn giảm thiểu lỗi do con người gây ra trong quá trình triển khai

1.3 Thiết kế UX/UI với Figma:

Figma là một công cụ thiết kế giao diện người dùng trực tuyến, cho phép các nhà thiết kế và lập trình viên hợp tác dễ dàng trong việc tạo ra các prototype và wireframe cho ứng dụng Sử dụng Figma trong dự án chấm thi giúp đội ngũ phát triển tạo ra các giao diện thân thiện và dễ sử dụng

Hình 2.2.3: Figma Application

Với Figma, các nhà thiết kế có thể tạo ra các mẫu giao diện một cách nhanh chóng, từ đó nhận phản hồi ngay lập tức từ các thành viên trong nhóm Điều này giúp cải thiện quy trình thiết kế, đảm bảo rằng sản phẩm cuối cùng sẽ đáp ứng được nhu cầu của người dùng

Hơn nữa, Figma hỗ trợ tính năng responsive design, cho phép thiết kế giao diện cho cả màn hình máy tính và điện thoại di động Điều này rất quan trọng trong bối cảnh hiện nay, khi người dùng ngày càng sử dụng nhiều thiết bị khác nhau

để truy cập ứng dụng

Ngoài ra, Figma cũng tích hợp các công cụ hỗ trợ kiểm tra và đánh giá trải nghiệm người dùng, giúp nhóm phát triển dễ dàng nhận diện và khắc phục các vấn đề trong giao diện Qua đó, việc áp dụng Figma không chỉ giúp tạo ra giao diện đẹp mắt mà còn nâng cao trải nghiệm người dùng, đảm bảo rằng hệ thống chấm thi sẽ được sử dụng một cách hiệu quả và thuận tiện

Phương pháp Agile cho phép nhóm phát triển chia dự án thành các phần nhỏ hơn, gọi là sprint, và hoàn thành từng phần một cách nhanh chóng Điều này không chỉ giúp giảm thiểu rủi ro mà còn cho phép nhóm nhận phản hồi từ người dùng sớm hơn, từ đó điều chỉnh sản phẩm theo nhu cầu thực tế

Scrum, một khung làm việc trong Agile, giúp tổ chức các cuộc họp định kỳ để theo dõi tiến độ và giải quyết các vấn đề phát sinh Các cuộc họp này giúp đảm bảo rằng mọi thành viên trong nhóm đều nắm rõ tình hình dự án và có thể phối hợp hiệu quả

Việc quản lý dự án tốt không chỉ giúp tiết kiệm thời gian và chi phí mà còn nâng cao chất lượng sản phẩm cuối cùng Đối với hệ thống chấm thi, điều này có nghĩa là một sản phẩm hoàn chỉnh, đáp ứng được nhu cầu của người dùng và

có thể triển khai một cách hiệu quả

1.5 Bảo mật trong ứng dụng web:

Bảo mật là một yếu tố không thể thiếu trong phát triển ứng dụng web, đặc biệt

là khi hệ thống chấm thi chứa nhiều thông tin nhạy cảm như dữ liệu người dùng

và kết quả chấm thi Để đảm bảo an toàn cho hệ thống, cần áp dụng nhiều biện pháp bảo mật khác nhau

Hình 3.2.5: Xác thực 2 yếu tố (2FA)

Đầu tiên, việc mã hóa dữ liệu là rất quan trọng Sử dụng các thuật toán mã hóa mạnh mẽ sẽ giúp bảo vệ thông tin người dùng và đảm bảo rằng chỉ những người

có quyền truy cập mới có thể xem được dữ liệu nhạy cảm Điều này đặc biệt quan trọng trong môi trường trực tuyến, nơi mà các cuộc tấn công có thể xảy ra bất cứ lúc nào

Thứ hai, xác thực người dùng cũng là một phần không thể thiếu Hệ thống cần

áp dụng các phương thức xác thực mạnh mẽ, chẳng hạn như xác thực hai yếu

tố (2FA), để đảm bảo rằng chỉ những người dùng hợp lệ mới có thể truy cập vào hệ thống

Cuối cùng, việc thường xuyên kiểm tra bảo mật và cập nhật phần mềm cũng rất cần thiết Các lỗ hổng bảo mật có thể được phát hiện và khai thác bất cứ lúc nào, do đó việc duy trì một quy trình kiểm tra bảo mật định kỳ sẽ giúp phát hiện

và khắc phục kịp thời các vấn đề

CHƯƠNG II: THIẾT KẾ, XÂY DỰNG ỨNG DỤNG CHẤM THI PHỤC

VỤ CÔNG TÁC ĐÀO TẠO 2.1 Yêu cầu

Trong trường hợp người dùng quên mật khẩu, tính năng quên mật khẩu sẽ giúp

họ dễ dàng khôi phục tài khoản của mình Hệ thống sẽ gửi một liên kết khôi phục đến email đã đăng ký, giúp người dùng tạo mật khẩu mới một cách an toàn

Tiếp theo, tính năng tìm kiếm bài thi cho phép người dùng nhanh chóng tìm thấy các bài thi của mình thông qua các bộ lọc như tên bài thi, tác giả, hoặc trạng thái chấm thi Người dùng có thể nhập từ khóa tìm kiếm và nhận được danh sách các bài thi phù hợp

Khi tìm thấy bài thi, người dùng có thể xem chi tiết bài thi, bao gồm thông tin

mô tả, tài liệu đính kèm, hình ảnh và video liên quan Điều này giúp người dùng hiểu rõ hơn về nội dung và tiêu chí chấm thi

Một trong những tính năng quan trọng nhất là chấm thi, nơi người dùng có thể đánh giá các bài thi dựa trên tiêu chí đã được xác định trước Hệ thống sẽ cung cấp các thang điểm và tiêu chí cụ thể để người dùng thực hiện việc chấm thi

một cách công bằng và chính xác Sau khi hoàn thành, người dùng có thể xem lại bài thi đã chấm để kiểm tra kết quả và nhận phản hồi từ giảng viên hoặc admin

Nếu cần thiết, họ cũng có thể chấm lại bài thi đã chấm, giúp đảm bảo tính công bằng và chính xác trong quy trình đánh giá Tính năng này rất hữu ích trong trường hợp có tranh chấp về điểm số hoặc cần điều chỉnh đánh giá

Cuối cùng, tính năng đăng xuất cho phép người dùng kết thúc phiên làm việc một cách an toàn, bảo vệ thông tin cá nhân của họ và đảm bảo rằng không ai có thể truy cập vào tài khoản của họ khi họ không có mặt

❖ Phía Admin:

Đối với admin, hệ thống cung cấp các tính năng mạnh mẽ để quản lý quy trình chấm thi Tính năng đăng nhập cho phép admin truy cập vào bảng điều khiển quản lý, nơi họ có thể theo dõi tất cả các hoạt động trong hệ thống Admin có thể đăng ký tài khoản người chấm thi, giúp mở rộng đội ngũ chấm thi cho các cuộc thi lớn và đảm bảo rằng mọi người đều có quyền truy cập vào hệ thống Tính năng cấp lại mật khẩu giúp admin hỗ trợ người dùng khi họ gặp khó khăn với thông tin đăng nhập Admin có thể tạo một mật khẩu mới cho người dùng hoặc gửi liên kết khôi phục đến email của họ

Tính năng tìm kiếm bài thi giúp admin theo dõi và quản lý các bài thi một cách

dễ dàng Admin có thể xem tất cả các bài thi đã được nộp, trạng thái chấm thi

và các thông tin liên quan khác

Ngoài ra, admin có thể tải lên nội dung bài thi, cho phép các giảng viên hoặc người chấm thi dễ dàng tiếp cận tài liệu cần thiết Tính năng này hỗ trợ nhiều

định dạng file như PDF, hình ảnh và video, giúp người dùng có được thông tin đầy đủ về bài thi

Cuối cùng, tính năng xuất file bài thi dạng Excel giúp admin dễ dàng tổng hợp

và lưu trữ dữ liệu chấm thi, phục vụ cho việc báo cáo và phân tích sau này Việc này không chỉ tiết kiệm thời gian mà còn giúp admin theo dõi hiệu quả hơn quá trình chấm thi

2.2 Mô hình kiến trúc hệ thống:

Mô hình kiến trúc hệ thống sẽ bao gồm các sơ đồ như Use Case Diagram, Activity Diagram và Sequence Diagram để mô tả cách thức hoạt động của hệ thống

❖ Use Case Diagram:

Sơ đồ Use Case sẽ thể hiện các tác nhân (actor) như người dùng và admin, cùng với các chức năng chính mà họ có thể thực hiện Ví dụ, người dùng có thể thực hiện các chức năng như đăng nhập, tìm kiếm bài thi, chấm thi, và xem lại bài thi Trong khi đó, admin có thể thực hiện các chức năng như đăng ký tài khoản người chấm thi, tải lên nội dung bài thi, và xuất file Excel Sơ đồ này giúp xác định rõ ràng các tương tác giữa người dùng và hệ thống, từ đó tạo điều kiện cho việc phát triển và kiểm thử

Hình 4.3.2: Use Case Diagram

❖ Activity Diagram:

Sơ đồ Activity sẽ mô tả quy trình hoạt động của từng chức năng trong hệ thống

Ví dụ, quy trình chấm thi sẽ bao gồm các bước như đăng nhập, tìm kiếm bài thi, đánh giá và lưu kết quả Sơ đồ này giúp xác định rõ ràng các bước cần thực hiện

và các quyết định có thể xảy ra trong quá trình chấm thi Nó cũng có thể chỉ ra các tình huống ngoại lệ, chẳng hạn như khi người dùng không tìm thấy bài thi hoặc khi có lỗi xảy ra trong quá trình chấm thi

❖ Sequence Diagram:

Sơ đồ Sequence sẽ mô tả thứ tự các tương tác giữa người dùng và hệ thống trong một chức năng cụ thể Ví dụ, trong quy trình chấm thi, sơ đồ sẽ cho thấy sự tương tác giữa người dùng khi đăng nhập, tìm kiếm bài thi, và thực hiện chấm thi Sơ đồ này giúp hiểu rõ hơn về luồng dữ liệu và quy trình xử lý trong hệ thống, từ đó giúp các lập trình viên có thể tối ưu hóa mã nguồn và cải thiện hiệu suất của hệ thống

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

Thiết kế cơ sở dữ liệu là một phần quan trọng trong việc phát triển hệ thống chấm thi Cơ sở dữ liệu sẽ được xây dựng với các tài liệu (document) chính như sau:

Hình 5.3.3: Sơ đồ thiết kế cơ sở dữ liệu

- organization: Tổ chức làm việc của người dùng, giúp phân loại người dùng theo tổ chức

- title: Chức vụ hoặc vai trò của người dùng, có thể ảnh hưởng đến quyền truy cập trong hệ thống

- password: Mật khẩu được mã hóa để bảo mật thông tin người dùng

- role: Vai trò của người dùng (người dùng hoặc admin), xác định quyền hạn trong hệ thống

Projects:

- id: Mã định danh bài thi (unique identifier) được tự động tạo ra khi bài thi được nộp

- title: Tiêu đề của bài thi, giúp người dùng dễ dàng nhận diện

- author: Tác giả của bài thi, thường là người tham gia cuộc thi

- description: Mô tả nội dung bài thi, cung cấp thông tin chi tiết về bài thi

- pdfFile: Tài liệu PDF liên quan đến bài thi, có thể chứa thông tin chi tiết hoặc hướng dẫn

- avatar: Hình ảnh đại diện cho bài thi, giúp tạo sự thu hút cho bài thi

- images: Các hình ảnh bổ sung cho bài thi, có thể là các sản phẩm hoặc thiết kế liên quan

- video: Video liên quan đến bài thi, giúp người dùng có cái nhìn trực quan hơn

- id_results: Mã định danh kết quả chấm thi, liên kết bài thi với kết quả đánh giá

Results:

- id: Mã định danh kết quả (unique identifier) được tự động tạo ra khi kết quả được lưu

- id_projects: Mã bài thi tương ứng, giúp liên kết kết quả với bài thi cụ thể

- score: Điểm số đạt được, phản ánh mức độ hoàn thành và chất lượng bài thi

- comment: Nhận xét từ người chấm thi, cung cấp phản hồi cho người tham gia

Thiết kế cơ sở dữ liệu này sẽ giúp lưu trữ và quản lý thông tin một cách hiệu quả, đảm bảo rằng mọi dữ liệu liên quan đến người dùng, bài thi và kết quả chấm thi đều được truy cập và xử lý một cách nhanh chóng Điều này không chỉ giúp tăng cường hiệu suất của hệ thống mà còn đảm bảo tính chính xác và minh bạch trong quy trình chấm thi

2.4 Giao diện người dùng:

Wireframe:

Wireframe là bản phác thảo sơ bộ của giao diện người dùng, giúp hình dung cấu trúc và bố cục của trang web Đối với màn hình máy tính, wireframe sẽ bao gồm các phần như thanh điều hướng ở phía trên cùng, nơi người dùng có thể truy cập vào các chức năng chính như đăng nhập, tìm kiếm bài thi, và chấm thi Khu vực hiển thị bài thi sẽ được bố trí ở giữa trang, với các thông tin như tiêu

đề, tác giả, và các tài liệu đính kèm

Các nút chức năng sẽ được thiết kế nổi bật, dễ dàng nhận diện để người dùng

có thể tương tác một cách thuận tiện Mỗi phần sẽ được bố trí một cách hợp lý

để người dùng dễ dàng truy cập và sử dụng

Đối với màn hình điện thoại, wireframe sẽ được tối ưu hóa với các yếu tố như kích thước nút lớn hơn, bố cục dọc và thanh điều hướng đơn giản hơn Điều này giúp người dùng có thể dễ dàng tương tác với giao diện trên các thiết bị di động

mà không gặp khó khăn Các yếu tố như hình ảnh và video sẽ được điều chỉnh kích thước phù hợp để đảm bảo trải nghiệm người dùng tốt nhất

Prototype:

Prototype là phiên bản tương tác của wireframe, cho phép người dùng trải nghiệm giao diện một cách thực tế Đối với màn hình máy tính, prototype sẽ bao gồm các chức năng như đăng nhập, tìm kiếm bài thi, và chấm thi Người dùng có thể thử nghiệm từng chức năng, từ việc nhập thông tin đăng nhập đến việc thực hiện chấm thi và xem kết quả

Hình 6.3.4: Giao diện màn hình chức năng

Hình 7.3.4: Giao diện màn hình chức năng

Trên màn hình điện thoại, prototype sẽ được thiết kế với các yếu tố tương tác như cuộn trang, nhấn nút và xem chi tiết bài thi Việc tạo ra prototype giúp đội ngũ phát triển nhận phản hồi từ người dùng sớm hơn, từ đó điều chỉnh giao diện cho phù hợp với nhu cầu thực tế Người dùng có thể dễ dàng chuyển đổi giữa các màn hình khác nhau, từ trang chính đến trang chấm thi, và trở lại trang tìm kiếm một cách mượt mà

CHƯƠNG III: XÂY DỰNG ỨNG DỤNG 3.1 Cài đặt môi trường phát triển:

Để phát triển ứng dụng web chấm thi sử dụng MERN stack (MongoDB, Express.js, React.js, Node.js), việc cài đặt môi trường phát triển là bước đầu tiên và quan trọng Môi trường này cho phép các lập trình viên phát triển, kiểm thử và triển khai ứng dụng một cách hiệu quả

Cài Đặt Node.js và npm:

- Node.js là nền tảng cho việc chạy JavaScript trên server, và npm (Node Package Manager) là công cụ quản lý các thư viện và package cần thiết Đầu tiên, tải xuống và cài đặt Node.js từ trang chính thức Sau khi cài đặt, kiểm tra phiên bản bằng lệnh node -v và npm -v trong terminal

Hình 8.4.1: Kiểm tra phiên bản NodeJs

Hình 9.4.1: Kiểm tra phiên bản npm

Cài Đặt MongoDB:

- MongoDB là cơ sở dữ liệu NoSQL mà chúng ta sẽ sử dụng để lưu trữ dữ liệu Tải xuống và cài đặt MongoDB Community Server từ trang chính thức Sau khi cài đặt, khởi động dịch vụ MongoDB và đảm bảo rằng nó đang chạy trên cổng mặc định 27017

Cài Đặt Express.js:

- Express.js là framework cho Node.js, giúp xây dựng API một cách nhanh chóng và dễ dàng Tạo một thư mục mới cho dự án của bạn và sử dụng lệnh npm init -y để khởi tạo một dự án Node.js Sau đó, cài đặt Express.js bằng lệnh npm install express

Hình 10.4.1: Cài đặt ExpressJs

Cài Đặt React.js:

- React.js là thư viện JavaScript cho việc xây dựng giao diện người dùng

Sử dụng Create React App để tạo một ứng dụng React mới bằng lệnh npx create-react-app client Thư mục client sẽ chứa mã nguồn front-end của ứng dụng