Đồ án 2: Xây dựng Phần mềm Quản lý Trung tâm Ngoại ngữ với ReactJS & NodeJS

Tham khảo đồ án phần mềm quản lý trung tâm ngoại ngữ bằng ReactJS và NodeJS. Báo cáo đầy đủ các bước phân tích, thiết kế, triển khai và code mẫu.

2022

162
1
0

Phí lưu trữ

45 Point

Tóm tắt

I. Tổng Quan Về Hệ Thống Quản Lý Trung Tâm Ngoại Ngữ

Đồ án Phần mềm quản lý trung tâm ngoại ngữ được xây dựng nhằm giải quyết các vấn đề quản lý hiện tại tại các trung tâm ngoại ngữ. Hệ thống này tập trung vào ứng dụng website hiện đại, không yêu cầu quá nhiều về phần cứng và phần mềm, giúp tối ưu chi phí triển khai. Language Center Management System được phát triển sử dụng công nghệ mới như ReactJS cho phía client và NodeJS với Express framework cho phía server, mang lại trải nghiệm người dùng tốt hơn. Đồ án này được thực hiện tại Trường Đại Học Công Nghệ Thông Tin, Đại Học Quốc Gia TP.HCM dưới sự hướng dẫn của ThS. Nguyễn Công Hoan. Quá trình phát triển sử dụng mô hình V-model để đảm bảo chất lượng sản phẩm cao nhất.

1.1. Thực Trạng Và Nhu Cầu Thực Tế

Các trung tâm ngoại ngữ hiện nay gặp khó khăn trong quản lý khóa học, lớp học, học viên và nhân sự. Việc sử dụng các phần mềm cũ hoặc quản lý thủ công dẫn đến mất thời gian, lỗi sai và hiệu suất thấp. Nhu cầu cấp thiết là xây dựng một hệ thống quản lý tập trung, tự động hóa các quy trình nghiệp vụ. Hệ thống cần đáp ứng quản lý điểm, trình độ, báo cáo một cách hiệu quả, giảm tải công việc cho nhân viên.

1.2. Mục Tiêu Và Phạm Vi Đề Tài

Mục tiêu chính là xây dựng ứng dụng web quản lý trung tâm ngoại ngữ toàn diện, bao gồm các chức năng: quản lý khóa học, lớp học, học viên, nhân sự, điểm số và báo cáo. Phạm vi đề tài tập trung vào phân tích yêu cầu, thiết kế cơ sở dữ liệu, phát triển giao diện và triển khai hệ thống trên máy chủ cloud.

II. Công Nghệ Và Công Cụ Sử Dụng

Đồ án sử dụng các công nghệ hiện đại và phổ biến trong phát triển ứng dụng web. ReactJS được lựa chọn cho phía client vì khả năng xây dựng giao diện tương tác, hiệu suất cao với thư viện Redux quản lý state. NodeJS kết hợp Express framework cung cấp backend mạnh mẽ, xử lý đa luồng hiệu quả. Ant Design được dùng để thiết kế giao diện chuyên nghiệp, thân thiện người dùng. Bảo mật dữ liệu được đảm bảo thông qua thuật toán Bcrypt cho mã hóa mật khẩu và JSON Web Token (JWT) cho xác thực. Firebase StorageGoogle Cloud được sử dụng để lưu trữ dữ liệu và triển khai server một cách an toàn.

2.1. Frontend ReactJS Và Redux

ReactJS là thư viện JavaScript phổ biến cho xây dựng giao diện component-based. React Redux giúp quản lý trạng thái ứng dụng một cách tập trung, tránh prop drilling và nâng cao hiệu suất. Ant Design cung cấp thành phần UI đẹp, sẵn sàng sử dụng, giúp phát triển nhanh chóng.

2.2. Backend NodeJS Express Và JWT

NodeJS cho phép xử lý nhiều request đồng thời với kiến trúc event-driven. Express framework cung cấp routing, middleware dễ dàng. JSON Web Token (JWT) đảm bảo xác thực an toàn giữa client và server. Bcrypt mã hóa mật khẩu với tính bảo mật cao, chống tấn công brute-force.

2.3. Lưu Trữ Và Triển Khai Cloud

Firebase StorageGoogle Cloud cung cấp giải pháp lưu trữ đáng tin cậy, khả năng mở rộng cao. Server được triển khai trên Google Cloud, cho phép truy cập API từ bất kỳ thiết bị nào thông qua internet. Các công cụ phát triển bao gồm Visual Studio CodeNotion để quản lý công việc.

III. Phân Tích Thiết Kế Và Triển Khai Hệ Thống

Giai đoạn phân tích yêu cầu định rõ các chức năng cần thiết của hệ thống. Sử dụng use case diagram mô tả tương tác giữa các actor (admin, giáo viên, học viên) và hệ thống. Lược đồ hoạt động chi tiết các quy trình: quản lý khóa học, lớp học, học viên, nhân sự, điểm số, trình độ và báo cáo. Thiết kế cơ sở dữ liệu được mô hình hóa để đảm bảo toàn vẹn dữ liệu, hiệu suất truy vấn. Thiết kế giao diện sử dụng Figma để tạo mockup chuyên nghiệp, sau đó triển khai bằng React. Quá trình phát triển song song giữa client và server giúp rút ngắn thời gian. Unit test được thực hiện xuyên suốt, integration test ở cuối giai đoạn.

3.1. Phân Tích Yêu Cầu Nghiệp Vụ

Hệ thống cần hỗ trợ quản lý toàn bộ quy trình từ đăng ký khóa học đến hoàn tất. Các actor chính gồm admin, giáo viên, học viên, mỗi người có quyền hạn khác nhau. Use case diagram mô tả các tương tác: đăng nhập, quản lý khóa học, nhập điểm, xuất báo cáo.

3.2. Thiết Kế Cơ Sở Dữ Liệu

Cơ sở dữ liệu được thiết kế để lưu trữ thông tin khóa học, lớp học, học viên, nhân sự, điểm số. Các quan hệ one-to-many kết nối giữa bảng. Khóa chính và khóa ngoại đảm bảo toàn vẹn referential. Tối ưu chỉ mục để tăng tốc độ truy vấn.

3.3. Thiết Kế Giao Diện Người Dùng

Giao diện được thiết kế thân thiện, dễ sử dụng cho các nhóm người dùng khác nhau. Dashboard hiển thị thông tin tổng quan. Các màn hình chức năng cho phép CRUD dữ liệu một cách trực quan. Sơ đồ liên kết màn hình định rõ luồng điều hướng giữa các trang.

IV. Kết Quả Đạt Được Và Hướng Phát Triển

Đồ án hoàn thành thành công với một hệ thống quản lý trung tâm ngoại ngữ đầy đủ chức năng, sẵn sàng triển khai. Hệ thống được triển khai lên Google Cloud, cho phép truy cập từ bất kỳ đâu. Giao diện thân thiện, hiệu suất cao nhờ sử dụng ReactJS. Bảo mật đạt tiêu chuẩn với JWT và Bcrypt. Tuy nhiên, còn nhiều hướng phát triển trong tương lai: thêm chức năng thống kê, phân tích dữ liệu nâng cao, hỗ trợ ứng dụng mobile, tích hợp thanh toán trực tuyến, cải thiện hiệu suất cache, và thêm các công cụ quản lý lớn hơn.

4.1. Kết Quả Thực Hiện

Hệ thống quản lý hoàn toàn tự động hóa các quy trình. Giao diện dễ sử dụng, giảm thời gian đào tạo nhân viên. Báo cáo được xuất nhanh chóng. Bảo mật dữ liệu được đảm bảo. Triển khai thành công trên Google Cloud.

4.2. Những Hạn Chế Và Khó Khăn

Quá trình phát triển gặp khó khăn về tối ưu hiệu suất khi dữ liệu lớn. Tương thích trình duyệt trên các thiết bị cũ chưa tối ưu. Thiếu chức năng thông báo real-time, offline-first.

4.3. Hướng Phát Triển Tương Lai

Nên phát triển ứng dụng mobile cho iOS/Android. Thêm tính năng AI dự đoán điểm số. Tích hợp thanh toán trực tuyến. Triển khai caching để tăng tốc độ. Hỗ trợ đa ngôn ngữ. Nâng cao analytics và business intelligence.

28/12/2025

Trích đoạn nội dung tài liệu

CHƯƠNG 1. Nhu cầu thực tế đề tài Ngày nay, đáp ứng với việc hội nhập quốc tế, việc học ngoại ngữ cũng trở thành một xu hướng tất yếu. Từ đó các trung tâm ngoại ngữ ra đời ngày càng nhiều. Tuy nhiên việc quản lý vận hành, dữ liệu của các trung tâm hầu hết vẫn thao tác bởi những ứng dụng cơ bản tách rời nhau, chưa có sự thống nhất và đảm bảo an toàn dữ liệu.

Đồng thời các trung tâm và học viên muốn tiếp cận nhau phải thông qua nhiều nguồn trung gian khác. Đối mặt với những điều đó, phần mềm Quản lý trung tâm ngoại ngữ được ra đời và đã, đang và sẽ trở thành nhu cầu thiết yếu của các trung tâm ngoại ngữ. Hiện trạng đơn vị cần xây dựng phần mềm Hiện trạng đơn vị: • Cơ cấu tổ chức: các trung tâm có nhiều chi nhánh hoặc một chi nhánh, số lượng người dùng có thể đáp ứng là trên 100 người. • Quy trình nghiệp vụ: tiếp nhận học sinh, xếp các khóa học phù hợp với trình độ, quản lý dữ liệu về tài liệu, giảng viên, nhân viên, báo cáo thống kê doanh thu • Hiện trạng về mặt tin học: quản lý thông tin qua giấy tờ, excel, trao đổi thông tin, thông báo qua Zalo, Facebook… 1.

Các phần mềm đang sẵn có • Hệ thống quản lý trung tâm ngoại ngữ Mono eLMS • Công cụ quản lý trung tâm ngoại ngữ Centre Online • Phần mềm quản lý đào tạo VnResource – EBMPro • Và rất nhiều phần mềm khác. Các hạn chế, vấn đề tồn tại Các phần mềm có khá nhiều tính năng dư thừa, chưa tập trung vào việc quản lý, khó khăn cho người có khả năng tin học thấp. Mục đích - Giảm thiểu số lượng công việc thủ công, tiết kiệm thời gian, công sức. - Nâng cao tính chính xác và bảo mật trong kinh doanh, quản lý thông tin học viên, nhân viên.

- Kiểm soát tốt công việc sắp xếp lịch học hợp lí, thống kê báo cáo. Đối tượng sử dụng - Quản trị viên hệ thống - Nhân viên - Giảng viên 1. Yêu cầu chức năng • Quản lý tài khoản ▪ Đăng ký tài khoản ▪ Đăng nhập ▪ Quên mật khẩu ▪ Đổi mật khẩu • Quản lý học viên ▪ Tiếp nhận và hiệu chỉnh thông tin học viên ▪ Tra cứu học viên ▪ Xếp lớp ▪ Lập thẻ học viên và in ▪ Lập hóa đơn thu học phí ▪ Xem bảng điểm 2 ▪ Xem thời khóa biểu • Quản lý khoá học ▪ Tạo mới và hiệu chỉnh thông tin khóa học ▪ Tra cứu khóa học ▪ Xem thông tin chi tiết khóa học ▪ Xem danh sách lớp học thuộc khóa học • Quản lý lớp học ▪ Tạo mới và hiệu chỉnh thông tin lớp học ▪ Tra cứu lớp học ▪ Xem chi tiết thông tin lớp học ▪ Xem thời khóa biểu lớp học ▪ Xem bảng điểm của lớp ▪ Xem danh sách học viên ▪ Thiết lập bài thi và lịch thi ▪ Bổ nhiệm giáo viên • Quản lý nhân viên ▪ Thêm và hiệu chỉnh thông tin nhân viên ▪ Tra cứu nhân viên • Quản lý giảng viên ▪ Thêm và hiệu chỉnh thông tin giảng viên ▪ Tra cứu giảng viên ▪ Xem thời khóa biểu giảng viên ▪ Xem danh sách lớp dạy ▪ Cập nhật điểm cho học viên • Báo cáo, thống kê ▪ Thống kê doanh thu, chi tiêu theo tháng/quý/năm ▪ Lập danh sách top những lớp học được đăng ký nhiều nhất ▪ Xem chi tiết hóa đơn và in hóa đơn ▪ Xuất file excel các báo cáo và danh sách. 3 • Quản lý trình độ học vấn ▪ Tạo trình độ học vấn mới, hiệu chỉnh thông tin trình độ học vấn • Quản lý loại khóa học ▪ Tạo mới, hiệu chỉnh thông tin loại khóa học • Quản lý cột điểm ▪ Tạo mới, hiệu chỉnh thông tin cột điểm • Quản lý khung thời gian ▪ Tạo mới, hiệu chỉnh thông tin khung thời gian • Thiết lập chung ▪ Thay đổi quy định, tham số ▪ Thiết lập thông tin trung tâm ▪ Hiệu chỉnh thông tin tài khoản 1.

Yêu cầu phi chức năng • Yêu cầu về giao diện: - Giao diện thân thiện, bố cục hợp lý, dễ sử dụng. - Giao diện thống nhất, đồng bộ, không gây bất ngờ cho người sử dụng. - Màu sắc, vị trí, hiển thị của các component có tính đồng bộ. • Yêu cầu về độ tin cậy, bảo mật: - Có sử dụng phân quyền cho từng nhóm tài khoản.

- Dữ liệu tài khoản người dùng được bảo mật. • Yêu cầu về độ tương thích: - IE11 / Edge - Firefox: 2 version gần nhất - Chrome: 2 version gần nhất - Safari: 2 version gần nhất - Opera: 2 version gần nhất - Electron: 2 version gần nhất • Yêu cầu về khả năng phát triển: 4 - Dễ dàng nâng cấp tính năng đã có nhờ vào sự hệ thống hóa trong khâu xử lý. - Dễ dàng mở rộng khi có nhu cầu phát triển. • Yêu cầu về tính hiệu quả: - Hệ thống quản lý dữ liệu một cách logic.

- Hiệu năng ổn định tránh gây khó chịu cho người dùng. CƠ SỞ LÝ THUYẾT, TỔNG QUAN CÔNG NGHỆ 2. Thuật toán sử dụng 2. Thuật toán Bcrypt Để mật khẩu được an toàn ngay cả khi cơ sở dữ liệu của hệ thống bị rò rỉ, chúng ta cần băm mật khẩu trước khi sử dụng.

Vì tính chất của hàm băm là cùng 1 đầu vào thì kết quả sẽ luôn cho ra 1 giá trị không đổi, việc sử dụng các thuật toán băm thông thường dễ bị kẻ tấn công suy ra bằng các phương pháp như Dictionary Attack, Rainbrow Table Attack, … Bcrypt là một thuật toán mã hoá mật khẩu đã được tạo ra bởi Niels Provos và David Mazières vào năm 1999, nó hoạt động dựa trên các thuật toán mã hóa Blowfish. Nhằm tạo ra sự khó khăn, giảm tốc độ khi giải mã để tìm ra mật khẩu của các cuộc tấn công, Bcrypt sẽ tạo ra các chuỗi mã hoá ngẫu nhiên sau mỗi lần tạo ra. Bcrypt là sự kết hợp của cơ chế băm, yếu tố salt và stretching, cụ thể như sau: Cơ chế băm: - Giá trị băm không thể dịch ngược lại giá trị ban đầu. - Với cùng giá trị đầu vào, hàm băm luôn cho 1 kết quả đầu ra.

- Đầu vào khác nhau sẽ cho các giá trị đầu ra khác nhau. Yếu tố salt: Giá trị đầu vào được thêm bởi 1 chuỗi ngẫu nhiên, giúp giảm bớt khả năng kẻ tấn công có dữ liệu được tính toán từ trước hoặc tốn nhiều thời gian để tìm ra hơn. 5 Stretching: Các máy tính hiện nay có tốc độ xử lý rất nhanh, vì thế cơ chế này sẽ giúp làm chậm quá trình băm dữ liệu hay còn gọi là tăng tải, khiến kẻ tấn công tốn nhiều thời gian để có được dữ liệu băm.1 Tốc độ băm của 1 số thuật toán phổ biến1 Bcrypt được chạy trên 2 pha: - Pha 1: Hàm EksBlowfishSetup được gọi để chuẩn bị cho quá trình băm với chi phí mong muốn, salt và mật khẩu dùng cho khởi tạo trạng thái của eksblowfish. Trong trường hợp mật khẩu không đủ tốt hoặc quá ngắn, nó sẽ được xử lý và tạo ra mật khẩu có độ dài lớn hơn.

Mục đích chính của bước này là tăng cường sức mạnh của key để làm chậm tốc độ tính toán từ đó giảm tốc độ của kẻ tấn công. 1 Nguồn: https://asecuritysite.com/encryption/bcrypt 6 Hình 2.2 Mã giải thuật toán băm Bcrypt2 - Pha 2: Giá trị 192 bits OrpheanBeholderScryDoubt được mã hoá 64 lần sử dụng eksblowfish với chế độ ECB3. Đầu ra của pha này là giá trị cost và 128 bits salt được ghéo với kết quả vòng lặp mã hoá.3 Kết qủa cuối cùng của quá trình băm4 2 Nguồn: https://auth0.com 3 ECB là viết tắt của: Block cipher mode of operation 4 Nguồn: https://asecuritysite. Công nghệ sử dụng 2.

React Hình 2.4 Logo thư viện React5 ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website. Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client. Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau. React so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM.

Trước khi đến cài đặt và cấu hình, chúng ta sẽ đi đến một số khái niệm cơ bản: - Virtual DOM: Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng. Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý. React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật. React sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều.

Dữ liệu được truyền từ parent đến child thông qua props. Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi. Với các đặc điểm ở trên, React dùng để xây dựng các ứng dụng lớn mà dữ liệu của 5 Nguồn: https://reactjs.org/ 8 chúng thay đổi liên tục theo thời gian. Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi về giao diện.

Ví dụ như Facebook: trên Newsfeed của bạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share, comment liên tục thay đổi. Khi đó React sẽ rất hữu ích để sử dụng. - Giới thiệu về JSX: JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Đặc điểm: Faster: Nhanh hơn.

JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript. Safer: an toàn hơn. Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++.

Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch. Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt. Easier: Dễ dàng hơn. JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng (tham khảo tại https://jsx.

Nội dung được bảo vệ bản quyền — Tải xuống đầy đủ