Xây dựng hệ thống web và mobile cho Đoàn Thanh niên HCMUTE

Đồ án xây dựng hệ thống web và mobile cho Đoàn Thanh niên trường ĐH Sư phạm Kỹ thuật TP.HCM (HCMUTE)

• Tác giả: Bùi Thanh Phương
• Người hướng dẫn: ThS. Nguyễn Trần Thi Văn
• Trường học: Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Xây dựng hệ thống web và mobile cho Đoàn Thanh niên HCMUTE
• Loại tài liệu: Khóa luận tốt nghiệp
• Năm xuất bản: 2022
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Tổng quan về hệ thống web và mobile cho Đoàn HCMUTE

Hệ thống web và mobile cho Đoàn Thanh niên Trường Đại học Sư phạm Kỹ thuật TP.HCM (HCMUTE) là đề tài khoa học ứng dụng cấp trường, được thực hiện bởi nhóm sinh viên ngành Công nghệ Thông tin khóa 2018. Đề tài hướng đến việc số hóa toàn bộ quy trình quản lý hoạt động Đoàn – từ đăng ký sự kiện, điểm danh bằng mã QR đến quản lý điểm rèn luyện. Hệ thống gồm ba nhóm người dùng chính: sinh viên, ban cơ sở Đoàn và quản trị viên. Mỗi nhóm có phân quyền riêng biệt, đảm bảo dữ liệu được bảo mật và phân luồng xử lý rõ ràng. Nền tảng công nghệ sử dụng là MERN Stack kết hợp React Native cho ứng dụng di động, triển khai trên AWS EC2 thông qua Docker và Nginx. Toàn bộ quá trình phát triển kéo dài 15 tuần, từ tháng 3 đến tháng 6 năm 2022. Đây là một giải pháp thực tiễn, giải quyết bài toán quản lý thủ công vốn tồn tại lâu năm tại các tổ chức Đoàn trong môi trường đại học. Hệ thống không chỉ nâng cao hiệu quả vận hành mà còn tạo trải nghiệm số hiện đại cho sinh viên.

1.1. Bối cảnh và mục tiêu của đề tài nghiên cứu

Đoàn Thanh niên HCMUTE quản lý hàng nghìn sinh viên với nhiều hoạt động diễn ra đồng thời. Quy trình thủ công gây ra nhiều sai sót trong điểm danh, tổng hợp điểm rèn luyện và phân phối thông tin. Đề tài đặt mục tiêu xây dựng nền tảng số tập trung, giúp ban Đoàn tạo và duyệt tin tức, hoạt động; sinh viên theo dõi lịch sự kiện và đăng ký tham gia; quản trị viên kiểm soát toàn bộ hệ thống. Mục tiêu thực tiễn bao gồm triển khai frontend và backend lên EC2, phát hành ứng dụng di động qua Firebase.

1.2. Phạm vi và đối tượng sử dụng hệ thống

Hệ thống phục vụ ba nhóm đối tượng trong môi trường trường đại học. Sinh viên sử dụng ứng dụng di động để đọc tin tức, đăng ký hoạt động và quét mã QR check-in. Ban cơ sở Đoàn dùng giao diện web để tạo yêu cầu đăng tin, quản lý danh sách tham gia và xuất báo cáo điểm danh. Quản trị viên có quyền cao nhất: phê duyệt nội dung, quản lý người dùng và giám sát toàn bộ hoạt động. Phạm vi triển khai giới hạn trong khuôn khổ HCMUTE nhưng có thể mở rộng cho các trường đại học khác.

II. Phân tích yêu cầu và bài toán quản lý hoạt động Đoàn

Quản lý hoạt động Đoàn tại các trường đại học hiện nay đối mặt với nhiều thách thức. Dữ liệu phân tán trên giấy tờ và bảng tính thủ công. Thông tin sự kiện truyền đạt chậm qua kênh không chính thức. Điểm danh bằng danh sách giấy dễ gian lận và mất thời gian tổng hợp. Điểm rèn luyện tính toán sai sót do nhập tay nhiều lần. Từ những vấn đề này, nhóm nghiên cứu tiến hành phân tích yêu cầu hệ thống theo phương pháp Use Case. Mỗi actor được xác định rõ ràng với luồng nghiệp vụ chính và luồng thay thế. Sinh viên cần đọc tin tức theo thời gian thực, đăng ký hoạt động, theo dõi trạng thái đăng ký và check-in bằng QR. Ban cơ sở cần công cụ tạo yêu cầu nội dung chờ duyệt, kiểm tra danh sách và xuất file báo cáo. Quản trị viên cần bảng điều khiển toàn diện để phê duyệt, từ chối, xóa nội dung và quản lý tài khoản. Việc phân tích kỹ lưỡng giúp xác định đúng phạm vi, tránh phát sinh yêu cầu ngoài kế hoạch trong quá trình phát triển.

2.1. Các vấn đề tồn tại trong quản lý Đoàn truyền thống

Hệ thống quản lý thủ công tạo ra nhiều điểm nghẽn. Thứ nhất, thông tin sự kiện phân phối không đồng đều, nhiều sinh viên bỏ lỡ hoạt động vì không nhận được thông báo kịp thời. Thứ hai, điểm danh giấy tờ không chống được gian lận và mất nhiều công sức tổng hợp sau sự kiện. Thứ ba, tổng hợp điểm rèn luyện cuối kỳ thường chậm và hay sai sót. Các vấn đề này làm giảm hiệu quả hoạt động Đoàn và gây bất mãn cho sinh viên lẫn ban cán bộ Đoàn.

2.2. Yêu cầu chức năng theo từng nhóm người dùng

Phân tích Use Case xác định ba nhóm chức năng rõ ràng. Sinh viên có quyền xem tin tức nổi bật, đăng ký và hủy đăng ký hoạt động, quét mã QR check-in và theo dõi lịch sử tham gia. Ban cơ sở Đoàn tạo yêu cầu đăng tin tức và hoạt động chờ duyệt, chỉnh sửa hoặc xóa yêu cầu ở trạng thái chờ, xuất danh sách điểm danh. Quản trị viên phê duyệt hoặc từ chối yêu cầu từ ban cơ sở, quản lý toàn bộ người dùng và nội dung trên hệ thống.

III. Giải pháp kỹ thuật MERN Stack React Native và AWS

Nhóm phát triển lựa chọn MERN Stack làm nền tảng chính vì tính đồng nhất của JavaScript xuyên suốt toàn bộ kiến trúc. MongoDB lưu trữ dữ liệu dạng document linh hoạt, phù hợp với cấu trúc tin tức và hoạt động đa dạng. ExpressJS xây dựng lớp API RESTful nhanh gọn trên nền Node.js. ReactJS phát triển giao diện web với khả năng cập nhật DOM hiệu quả nhờ Virtual DOM. Redux và Redux-Saga quản lý trạng thái ứng dụng phức tạp và xử lý side effect bất đồng bộ. React Native tái sử dụng logic nghiệp vụ từ ReactJS để xây dựng ứng dụng di động đa nền tảng iOS và Android từ một codebase duy nhất. Hệ thống triển khai trên AWS EC2, sử dụng Docker để đóng gói ứng dụng thành container độc lập và Nginx làm reverse proxy. Ứng dụng di động phân phối qua Google Firebase. Kiến trúc này đảm bảo khả năng mở rộng theo chiều ngang khi số lượng người dùng tăng. Toàn bộ pipeline từ phát triển đến triển khai được chuẩn hóa, giảm thiểu rủi ro môi trường.

3.1. Kiến trúc MERN Stack và luồng dữ liệu hệ thống

MERN Stack hoạt động theo mô hình client-server ba tầng. Tầng trình bày gồm ReactJS cho web và React Native cho mobile, giao tiếp với tầng ứng dụng qua HTTP/REST API. Tầng ứng dụng do ExpressJS và Node.js đảm nhận, xử lý logic nghiệp vụ, xác thực JWT và điều phối truy vấn. Tầng dữ liệu sử dụng MongoDB với schema linh hoạt. Redux-Saga xử lý các tác vụ bất đồng bộ như gọi API và cập nhật store, giúp luồng dữ liệu predictable và dễ debug. Việc dùng JavaScript thống nhất từ database đến UI rút ngắn thời gian phát triển đáng kể.

3.2. Triển khai hệ thống với Docker Nginx và AWS EC2

Quy trình triển khai sử dụng Docker để container hóa từng dịch vụ: frontend ReactJS, backend Node/Express và MongoDB chạy trong các container riêng biệt, liên kết qua Docker Compose. Nginx đóng vai trò reverse proxy, phân phối request đến đúng service và xử lý SSL termination. Toàn bộ stack được đẩy lên instance EC2 trên AWS, đảm bảo tính ổn định và khả năng phục hồi nhanh khi sự cố. Ứng dụng React Native được build và phân phối qua Google Firebase Hosting, tạo kênh cập nhật liên tục mà không cần phát hành lại lên store.

IV. Kết quả đạt được và hướng ứng dụng thực tiễn tại HCMUTE

Sau 15 tuần phát triển, hệ thống hoàn thành đầy đủ các chức năng đã đề ra. Giao diện web phục vụ ban cơ sở Đoàn và quản trị viên hoạt động ổn định trên môi trường EC2. Ứng dụng di động cho sinh viên chạy được trên cả Android và iOS, tích hợp thành công tính năng quét mã QR check-in sự kiện. Luồng phê duyệt nội dung hoạt động đúng theo mô hình đề xuất: ban cơ sở tạo yêu cầu, quản trị viên duyệt hoặc từ chối, nội dung được hiển thị tự động sau khi duyệt. Chức năng xuất danh sách điểm danh giúp ban Đoàn tiết kiệm đáng kể thời gian tổng hợp dữ liệu sau sự kiện. Hệ thống có tiềm năng mở rộng sang các đơn vị Đoàn khác trong khối trường đại học. Kiến trúc microservice thông qua Docker cho phép scale từng module độc lập khi nhu cầu tăng. Về mặt học thuật, đề tài chứng minh khả năng ứng dụng công nghệ hiện đại – MERN Stack, React Native, Docker, AWS – vào bài toán quản lý tổ chức thực tiễn trong môi trường giáo dục đại học Việt Nam.

4.1. Các chức năng chính được hoàn thiện trong hệ thống

Hệ thống hoàn thiện ba nhóm chức năng cốt lõi. Phía sinh viên: đọc tin tức nổi bật, đăng ký hoạt động để cộng điểm rèn luyện, theo dõi danh sách hoạt động đã đăng ký và quét mã QR check-in trực tiếp tại sự kiện. Phía ban cơ sở Đoàn: tạo, chỉnh sửa, xóa yêu cầu đăng tin tức và hoạt động chờ duyệt; kiểm tra và xuất danh sách điểm danh sau mỗi sự kiện. Phía quản trị viên: phê duyệt nội dung, quản lý toàn bộ tài khoản người dùng và giám sát điểm danh.

4.2. Hướng phát triển và mở rộng hệ thống trong tương lai

Hệ thống hiện tại đặt nền móng vững chắc cho các giai đoạn phát triển tiếp theo. Hướng mở rộng gần nhất bao gồm tích hợp module tính điểm rèn luyện tự động cuối học kỳ và hệ thống thông báo push notification theo thời gian thực. Về dài hạn, kiến trúc có thể được áp dụng cho các trường đại học khác với chi phí tùy chỉnh thấp nhờ codebase chuẩn hóa. Việc chuyển sang kiến trúc serverless hoặc Kubernetes sẽ tăng khả năng chịu tải trong các đợt cao điểm đăng ký hoạt động đầu học kỳ.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Tại Trường Đại học Sư phạm Kỹ thuật TP.HCM (HCMUTE), số lượng sinh viên liên tục gia tăng qua các năm, đạt quy mô khoảng 30.000 sinh viên theo số liệu khảo sát của nhóm nghiên cứu. Trong khi đó, đội ngũ giảng viên và cán bộ quản lý của nhà trường có số lượng giới hạn. Thực trạng công tác quản lý các chương trình, phong trào Đoàn - Hội hiện vẫn phụ thuộc chủ yếu vào quy trình thủ công bằng sổ sách giấy tờ, tiêu tốn nhiều nhân lực, diện tích lưu trữ và tiềm ẩn rủi ro sai sót hoặc thất lạc dữ liệu. Ngoài ra, nhà trường chưa có phần mềm hoặc trang web chuyên dụng nào đóng vai trò cổng thông tin tra cứu và quản lý hoạt động cho đoàn viên, thanh niên. Việc số hóa quy trình quản lý hoạt động phong trào và tạo lập kênh tương tác trực tuyến cho sinh viên trở thành nhu cầu cấp thiết trong tiến trình chuyển đổi số của nhà trường.

Trước thực tiễn đó, đề tài "Building a web-based and mobile system for youth HCMUTE" (Xây dựng hệ thống web và di động cho Đoàn Thanh niên HCMUTE) được thực hiện bởi sinh viên Bùi Thanh Phương (MSSV: 18110179) và Diệp Thúy Vi (MSSV: 18110237), thuộc Khoa Đào tạo Chất lượng cao, ngành Công nghệ Thông tin, dưới sự hướng dẫn của ThS. Nguyễn Trần Thị Vân.

Mục tiêu của đề tài được phân định cụ thể theo hai phương diện:

1. Mục tiêu lý thuyết:
   • Nghiên cứu mô hình kiến trúc MERN Stack bao gồm bốn thành phần chính: MongoDB, ExpressJS, ReactJS và NodeJS.
   • Nghiên cứu các công nghệ quản lý trạng thái bổ trợ cho React như Redux và Redux-Saga.
   • Nghiên cứu framework phát triển ứng dụng di động đa nền tảng React Native.
   • Nghiên cứu hạ tầng ảo hóa và điện toán đám mây: Amazon Web Services (AWS EC2), Docker, máy chủ web Nginx và Google Firebase.
2. Mục tiêu thực hành:
   • Xây dựng hệ thống phần mềm gồm cổng thông tin dạng website và ứng dụng di động với các tính năng: sinh viên đọc tin tức, tra cứu hoạt động, đăng ký tham gia để tích lũy điểm rèn luyện, theo dõi tiến trình hoạt động, quét mã QR để điểm danh sự kiện; đoàn cơ sở tạo yêu cầu đăng tải tin tức, hoạt động, kiểm tra và xuất danh sách sinh viên tham gia; quản trị viên (Admin) quản lý người dùng, duyệt tin tức, duyệt hoạt động và quản lý điểm danh.
   • Đóng gói và triển khai mã nguồn frontend và backend lên nền tảng đám mây AWS EC2 bằng Docker; triển khai ứng dụng di động qua Google Firebase.

• Đối tượng nghiên cứu: Hệ thống quy trình nghiệp vụ quản trị hoạt động Đoàn - Hội, quy trình tương tác của sinh viên và các giải pháp công nghệ phần mềm xây dựng ứng dụng web và di động tích hợp.
• Phạm vi nghiên cứu:
  • Không gian: Áp dụng cho công tác Đoàn Thanh niên và phong trào sinh viên tại Trường Đại học Sư phạm Kỹ thuật TP.HCM (HCMUTE).
  • Thời gian thực hiện: Đồ án được triển khai trong thời gian 15 tuần, bắt đầu từ ngày 07/03/2022 đến ngày 27/06/2022.

---

Cơ sở lý thuyết và phương pháp

Khóa luận xây dựng hệ thống phần mềm dựa trên nền tảng công nghệ full-stack JavaScript, bao gồm các khung lý thuyết, công nghệ và phương pháp nghiên cứu sau:

• Khung công nghệ và mô hình kiến trúc:

  • MERN Stack: Mô hình kết hợp bốn công nghệ web:
    • MongoDB: Hệ quản trị cơ sở dữ liệu phi quan hệ (NoSQL) hướng tài liệu (document-oriented), lưu trữ dữ liệu dưới định dạng BSON (Binary JSON), giúp tối ưu hóa khả năng mở rộng và linh hoạt cấu trúc dữ liệu.
    • ExpressJS: Web application framework chạy trên nền NodeJS, chịu trách nhiệm thiết lập các middleware xử lý yêu cầu HTTP, định tuyến (routing table) và cung cấp giao diện lập trình ứng dụng RESTful API.
    • ReactJS: Thư viện mã nguồn mở phía máy khách (client-side) do Facebook phát triển, phục vụ việc xây dựng giao diện người dùng tương tác dạng SPA (Single Page Application) với hiệu năng xử lý cao.
    • NodeJS: Môi trường thực thi JavaScript phía máy chủ (server-side runtime environment), đóng vai trò tầng logic ứng dụng (application tier).
  • React Native: Framework do Facebook phát triển cho phép lập trình ứng dụng di động nguyên bản (native app) chạy đồng thời trên hệ điều hành Android và iOS bằng ngôn ngữ JavaScript.
  • Thư viện quản lý luồng dữ liệu: Sử dụng Redux và Redux-Saga để quản lý trạng thái tập trung và xử lý các side-effect bất đồng bộ trong ứng dụng React.
  • Hạ tầng triển khai: Dịch vụ đám mây AWS EC2, công nghệ đóng gói container Docker, reverse proxy Nginx và nền tảng hỗ trợ ứng dụng di động Google Firebase.

• Phương pháp nghiên cứu thực tế:

  • Phương pháp lập kế hoạch và phân rã công việc: Xây dựng kế hoạch chi tiết trong 15 tuần, xác định các mốc hoàn thành cho từng giai đoạn từ khảo sát, phân tích, thiết kế, lập trình đến kiểm thử.
  • Phương pháp thu thập tài liệu: Thu thập kiến thức từ sách chuyên ngành, diễn đàn lập trình, mạng xã hội và các buổi trao đổi định kỳ qua thư điện tử với giảng viên hướng dẫn.
  • Phương pháp tích hợp kiến thức chuyên ngành: Vận dụng kiến thức từ các môn học cốt lõi như Cơ sở dữ liệu, Lập trình Web, Công nghệ phần mềm và Công nghệ phần mềm mới vào giải quyết bài toán nghiệp vụ thực tế.
  • Phương pháp phân tích và mô hình hóa hệ thống: Sử dụng biểu đồ ca sử dụng (Use case diagram) và biểu đồ tuần tự (Sequence diagram) để đặc tả chi tiết các tương tác của hệ thống.
  • Phương pháp kiểm thử chức năng: Thực hiện kiểm thử hộp đen, kiểm tra tính hợp lệ dữ liệu nhập (input validation check) và kiểm thử các luồng chức năng tạo, đọc, sửa, xóa dữ liệu (CRUD).

• Nguồn dữ liệu: Dữ liệu khảo sát hiện trạng quy mô khoảng 30.000 sinh viên tại Trường Đại học Sư phạm Kỹ thuật TP.HCM; bộ dữ liệu thực nghiệm về tài khoản người dùng, hoạt động phong trào và bài viết tin tức do nhóm tác giả tự thiết lập để kiểm thử trên môi trường phát triển và máy chủ ảo.

---

Thiết kế và triển khai

Hệ thống được thiết kế theo mô hình phân tầng, kết hợp giữa cổng thông tin web dành cho công tác quản lý và ứng dụng di động phục vụ sinh viên tương tác trực tiếp.

1. Môi trường vận hành và cấu trúc hệ thống

Thành phần	Đặc tả kỹ thuật trong đồ án
Môi trường trình duyệt máy tính	Google Chrome, Microsoft Edge, Cốc Cốc
Môi trường phát triển tích hợp (IDE)	Visual Studio Code (VS Code)
Ngôn ngữ lập trình	JavaScript
Hệ quản trị cơ sở dữ liệu	MongoDB (lưu trữ định dạng BSON)
Nền tảng ứng dụng di động	React Native (hỗ trợ nền tảng Android và iOS)
Hạ tầng máy chủ và lưu trữ	AWS EC2, Docker, Nginx, Google Firebase

2. Yêu cầu phi chức năng

• Bảo mật (Security): Hệ thống thực hiện phân quyền người dùng theo vai trò; áp dụng cơ chế mã hóa mật khẩu; sử dụng token xác thực (token-based authentication) cho các phiên làm việc nhằm kiểm soát quyền truy cập API; thiết lập cơ chế thông báo hết hạn phiên làm việc (token expired).
• An toàn (Safety): Áp dụng các giải pháp kỹ thuật ngăn chặn truy cập trái phép vào cơ sở dữ liệu và bảo vệ tài khoản người dùng khỏi nguy cơ bị chiếm quyền điều khiển.

3. Phân tích tác tử và các ca sử dụng (Use Case)

Hệ thống xác định 4 tác tử chính: Khách (Guest), Sinh viên (Student), Đoàn cơ sở (Base union) và Quản trị viên (Admin).

Tác tử	Quyền hạn và ca sử dụng chính
Khách (Guest)	Đăng ký tài khoản (Register qua Gmail); Đăng nhập (Login); Đọc tin tức (Read news); Đọc thông tin hoạt động (Read activities); Tìm kiếm tin tức (Search news).
Sinh viên (Student)	Đăng nhập; Đọc/tìm kiếm tin tức; Đăng ký tham gia hoạt động (Register activity) để tích lũy điểm rèn luyện; Theo dõi tiến trình và trạng thái hoạt động đã đăng ký (Tracking activity); Quét mã QR bằng app di động để điểm danh sự kiện (Scan QR Code); Thay đổi thông tin cá nhân (Change information); Đánh giá mức độ hài lòng về ứng dụng di động (Conduct rating); Đăng xuất (Logout).
Đoàn cơ sở (Base union)	Đăng nhập; Tạo yêu cầu đăng bài tin tức (Create request news); Chỉnh sửa tin tức đang chờ duyệt (Edit request news); Xóa yêu cầu tin tức (Delete request news); Tạo yêu cầu tổ chức hoạt động (Create request activity); Chỉnh sửa/xóa yêu cầu hoạt động (Edit/delete request activities); Kiểm tra và xuất danh sách sinh viên tham gia sự kiện (Export participant); Đánh giá ứng dụng.
Quản trị viên (Admin)	Quản lý người dùng: Tạo, sửa, xóa, đặt lại mật khẩu (Manage/Create/Edit/Delete/Reset Password User); Quản lý hoạt động: Tạo, sửa, xóa hoạt động (Create/Edit/Delete Activity); Phê duyệt hoạt động do Đoàn cơ sở gửi (Approve Requested Activity); Xuất danh sách tham gia (Export participant); Quản lý tin tức: Chỉnh sửa tin tức (Edit News), Phê duyệt tin tức (Approve Request News); Quản lý thanh trượt hiển thị hình ảnh (Create/Edit/Delete Slider).

4. Luồng sự kiện của một số ca sử dụng trọng tâm

• Đăng ký tài khoản (Register): Tác tử Guest chọn tài khoản Gmail tương ứng; hệ thống kiểm tra thông tin nhập, đối chiếu với cơ sở dữ liệu; nếu hợp lệ, tài khoản được thêm vào cơ sở dữ liệu và hiển thị thông báo thành công. Trường hợp nhập sai định dạng, hệ thống hiển thị thông báo yêu cầu nhập lại.
• Đăng ký tham gia hoạt động (Register activity): Sinh viên đăng nhập vào hệ thống, chọn hoạt động cần đăng ký; hệ thống ghi nhận và phản hồi trạng thái đăng ký thành công để làm căn cứ cộng điểm rèn luyện.
• Điểm danh bằng quét mã QR (Scan QR Code): Sinh viên sử dụng ứng dụng di động, kích hoạt tính năng quét mã; màn hình quét xuất hiện; sinh viên quét mã QR do Đoàn cơ sở cung cấp tại sự kiện. Nếu mã hợp lệ, hệ thống thông báo điểm danh thành công; nếu mã không tồn tại hoặc không hợp lệ, hệ thống báo lỗi và cho phép quét lại.
• Tạo yêu cầu tin tức và hoạt động (Create request news / activities): Đoàn cơ sở điền nội dung tin tức hoặc kế hoạch hoạt động vào biểu mẫu; hệ thống kiểm tra tính hợp lệ của các trường dữ liệu (input validation); nếu hợp lệ, dữ liệu được lưu vào cơ sở dữ liệu với trạng thái "chờ phê duyệt" (waiting for approval) và chuyển tiếp đến Quản trị viên.
• Đánh giá mức độ hài lòng (Conduct rating): Người dùng kích hoạt tính năng đánh giá trên ứng dụng di động; cửa sổ pop-up hiển thị số sao lựa chọn; sau khi người dùng chọn mức sao tương ứng, hệ thống lưu kết quả đánh giá vào cơ sở dữ liệu.

5. Kiểm thử hệ thống

Đồ án ghi nhận việc triển khai các trường hợp kiểm thử chức năng cho các module cốt lõi:

• Kiểm thử tạo yêu cầu đăng tin tức (Test create request news): Xác minh luồng dữ liệu từ giao diện nhập liệu đến khi lưu vào cơ sở dữ liệu.
• Kiểm tra tính hợp lệ của trường dữ liệu nhập (Check validation of input field when create request news): Đánh giá khả năng chặn các biểu mẫu để trống hoặc sai quy cách.
• Kiểm thử lấy toàn bộ dữ liệu tin tức (Test get all news data): Kiểm tra API truy vấn và khả năng hiển thị danh sách bài viết trên giao diện.
• Kiểm thử tạo yêu cầu hoạt động (Create request activity): Kiểm tra quá trình tạo lập sự kiện phong trào từ phía Đoàn cơ sở.
• Kiểm thử lấy toàn bộ dữ liệu hoạt động (Test get all activities data): Xác nhận tính toàn vẹn của danh sách hoạt động trả về từ cơ sở dữ liệu.

---

Nội dung chính theo từng chương

Chương 1. Nghiên cứu hiện trạng và xác định yêu cầu (Study of Status and Determination of Requirements)

Chương 1 trình bày lý do chọn đề tài xuất phát từ việc quy mô đào tạo của trường đạt khoảng 30.000 sinh viên nhưng công tác quản lý phong trào Đoàn - Hội vẫn thực hiện thủ công, thiếu vắng cổng thông tin điện tử chuyên trách. Chương này xác định các mục tiêu nghiên cứu lý thuyết (tìm hiểu MERN Stack, React Native, AWS EC2, Docker, Nginx, Firebase) và mục tiêu thực hành (xây dựng các tính năng web và mobile phục vụ sinh viên, đoàn cơ sở và ban quản trị). Tác giả làm rõ môi trường vận hành (trình duyệt Chrome, Edge, Cốc Cốc; IDE VS Code; ngôn ngữ JavaScript; DBMS MongoDB) và thiết lập quy trình nghiên cứu gồm 5 bước: chọn đề tài, lập kế hoạch 15 tuần, tìm kiếm tài liệu, vận dụng kiến thức chuyên ngành và phân loại tổng hợp thông tin. Cuối chương, tác giả giới thiệu chi tiết lý thuyết nền tảng của MERN Stack (MongoDB, Express, ReactJS, NodeJS) và framework React Native.

Chương 2. Phân tích yêu cầu và mô hình hóa (Requirements Analysis and Modeling)

Chương 2 tập trung phân tích các yêu cầu phi chức năng về an ninh (security - phân quyền, mã hóa mật khẩu, token xác thực) và an toàn hệ thống (safety - chống xâm nhập cơ sở dữ liệu). Nội dung trọng tâm của chương là việc xây dựng biểu đồ ca sử dụng tổng thể (System overall usecase) và lập 36 bảng đặc tả use case chi tiết đi kèm biểu đồ tuần tự (Sequence diagram). Các use case bao quát toàn bộ hoạt động từ phía người dùng cuối đến ban quản trị: Đăng ký, Đăng nhập, Đọc/Tìm kiếm tin tức, Đăng xuất, Đăng ký hoạt động, Theo dõi hoạt động, Quét mã QR điểm danh, Thay đổi thông tin, Đánh giá ứng dụng, Tạo/Sửa/Xóa yêu cầu tin tức và hoạt động từ Đoàn cơ sở, Quản lý người dùng (Tạo, Sửa, Xóa, Đặt lại mật khẩu), Quản lý/Duyệt hoạt động, Xuất danh sách tham gia, Quản lý/Duyệt tin tức và Quản lý thanh trượt hiển thị (Slider). Phần cuối chương mô tả chi tiết thiết kế giao diện người dùng (UI/UX) cho cả nền tảng web (trang chủ, trang đăng nhập, danh sách hoạt động, chi tiết hoạt động, màn hình gửi yêu cầu, bảng điều khiển quản trị Admin dashboard) và nền tảng di động (màn hình đăng nhập, trang chủ, thanh điều hướng sidebar, màn hình cài đặt).

Chương 3. Cài đặt và kiểm thử (Implement and Testing)

Chương 3 trình bày chi tiết các bước cài đặt môi trường frontend và backend, công bố cấu trúc thư mục của dự án web frontend, backend và ứng dụng di động mobile, cùng danh mục các thư viện phần mềm được tích hợp vào hệ thống. Chương này tiến hành các ca kiểm thử chức năng: kiểm thử tạo yêu cầu tin tức, kiểm tra tính hợp lệ của trường dữ liệu nhập, kiểm thử truy vấn lấy dữ liệu tin tức, tạo yêu cầu hoạt động và lấy danh sách dữ liệu hoạt động. Bên cạnh phần kỹ thuật, chương này ghi nhận sự phân công nhiệm vụ cụ thể giữa hai thành viên nhóm nghiên cứu (Bùi Thanh Phương - 18110179 và Diệp Thúy Vi - 18110237), phân tích các ưu điểm và hạn chế của phần mềm, trình bày phương hướng khắc phục các khó khăn phát sinh trong quá trình lập trình, tự đánh giá mức độ hoàn thành kết quả và định ra phương hướng phát triển tiếp theo của hệ thống.

---

Kết quả và đóng góp

• Kết quả kỹ thuật đạt được:

  • Xây dựng hoàn chỉnh hệ thống đa nền tảng gồm ứng dụng web (MERN Stack: MongoDB, ExpressJS, ReactJS, NodeJS) và ứng dụng di động (React Native) trong khung thời gian 15 tuần (từ ngày 07/03/2022 đến ngày 27/06/2022).
  • Triển khai thành công ứng dụng phía máy chủ và giao diện web lên máy chủ đám mây AWS EC2 thông qua kỹ thuật đóng gói Docker kết hợp Nginx; thiết lập nền tảng Google Firebase hỗ trợ cho ứng dụng di động.
  • Xây dựng đầy đủ 36 ca sử dụng nghiệp vụ được mô hình hóa bằng biểu đồ tuần tự; tích hợp tính năng quét mã QR phục vụ điểm danh sự kiện thực tế và module xuất danh sách sinh viên tham gia (Export participant) hỗ trợ thống kê điểm rèn luyện.
  • Thiết lập cơ chế kiểm soát dữ liệu đầu vào và các biện pháp bảo mật dựa trên mã hóa mật khẩu và token phiên làm việc.

• Đóng góp của đồ án:

  • Đóng góp một giải pháp ứng dụng công nghệ thông tin cụ thể vào công tác chuyển đổi số tại Trường Đại học Sư phạm Kỹ thuật TP.HCM, hướng đến việc thay thế phương thức quản lý sổ sách giấy tờ truyền thống.
  • Cung cấp công cụ số hóa giúp Phòng Công tác Sinh viên, Văn phòng Đoàn trường và các Đoàn cơ sở rút ngắn thời gian xử lý thủ tục hành chính, giảm tải nhân sự quản lý và nâng cao độ chính xác khi theo dõi thông tin tham gia hoạt động của khoảng 30.000 sinh viên.

---

Hạn chế và hướng nghiên cứu tiếp

• Hạn chế:
  • Khóa luận được hoàn thành trong giới hạn thời gian 15 tuần, do đó chương trình vẫn còn tồn tại một số nhược điểm nhất định trong quá trình vận hành mà nhóm tác giả đã tự nhận định ở mục tự đánh giá kết quả.
  • Các kịch bản kiểm thử được báo cáo trong tài liệu mới tập trung vào việc xác thực dữ liệu đầu vào và kiểm tra chức năng cơ bản của các API tin tức và hoạt động; văn bản chưa cung cấp số liệu kiểm thử hiệu năng tải chịu đựng (load testing) khi có lượng lớn sinh viên truy cập đồng thời.
• Hướng phát triển tiếp theo:
  • Tiếp tục hoàn thiện các giải pháp khắc phục các điểm hạn chế đã được nhóm nghiên cứu ghi nhận trong quá trình thực hiện đồ án.
  • Nâng cấp và mở rộng các tính năng của hệ thống quản lý chương trình và cổng thông tin Đoàn - Hội để đáp ứng tốt hơn yêu cầu thực tiễn phát sinh từ phía nhà trường và đoàn viên, sinh viên.

---

Giá trị tham khảo

• Đối tượng thụ hưởng:
  • Sinh viên ngành Công nghệ Thông tin, Kỹ thuật Phần mềm có thể sử dụng tài liệu như một trường hợp nghiên cứu cụ thể về việc xây dựng hệ thống full-stack hoàn chỉnh kết hợp giữa ứng dụng Web (MERN Stack) và ứng dụng Di động (React Native).
  • Các nhóm nghiên cứu hoặc cán bộ quản lý đang thực hiện các đề tài về số hóa công tác sinh viên, quản trị hoạt động ngoại khóa hoặc các bài toán điểm danh sự kiện tự động trong môi trường giáo dục đại học.
• Các phần nội dung có giá trị tham khảo chuyên môn:
  • Hệ thống 36 bảng đặc tả ca sử dụng chi tiết (Usecase details) cùng chuỗi biểu đồ tuần tự (Sequence diagrams) cung cấp tài liệu mẫu cho môn học Phân tích thiết kế hệ thống và Công nghệ phần mềm.
  • Mô hình tổ chức thư mục dự án và danh mục các thư viện cho frontend, backend và ứng dụng di động được liệt kê trong đồ án.

---

Câu hỏi thường gặp

1. Hệ thống phân chia người dùng thành những nhóm nào và mỗi nhóm có vai trò gì?
Hệ thống thiết lập 4 nhóm tác tử (actors):

• Khách (Guest): Xem tin tức, tìm kiếm tin bài, xem hoạt động và đăng ký tài khoản liên kết Gmail.
• Sinh viên (Student): Đăng nhập, đăng ký tham gia hoạt động để tích lũy điểm, theo dõi tiến trình hoạt động, quét mã QR điểm danh qua app di động, đổi thông tin và đánh giá ứng dụng.
• Đoàn cơ sở (Base union): Tạo, sửa, xóa yêu cầu đăng tin tức hoặc tổ chức hoạt động (ở trạng thái chờ duyệt), kiểm tra và xuất danh sách sinh viên tham gia.
• Quản trị viên (Admin): Quản lý người dùng (tạo, sửa, xóa, đặt lại mật khẩu), phê duyệt tin tức và hoạt động do Đoàn cơ sở gửi lên, quản lý slider và xuất báo cáo điểm danh.

2. Quy trình điểm danh sinh viên tham gia sự kiện được xử lý như thế nào?
Sinh viên sử dụng ứng dụng di động (phát triển bằng React Native) để thực hiện ca sử dụng Scan QR Code. Tại sự kiện, Đoàn cơ sở cung cấp mã QR; sinh viên mở ứng dụng và quét mã. Hệ thống sẽ đối chiếu mã với cơ sở dữ liệu: nếu mã hợp lệ, hệ thống ghi nhận có mặt và thông báo thành công; nếu mã không tồn tại hoặc có lỗi, ứng dụng hiển thị cảnh báo và cung cấp nút cho phép thực hiện quét lại.

3. Nhóm tác giả đã áp dụng các biện pháp bảo mật nào trong hệ thống?
Theo phân tích yêu cầu phi chức năng trong đồ án, hệ thống thực hiện phân quyền người dùng theo từng cấp bậc (decentralize users), tiến hành mã hóa mật khẩu tài khoản và sử dụng token để xác thực danh tính người dùng trong các phiên giao thức. Đối với các yêu cầu không hợp lệ hoặc khi token hết hạn (token expired), hệ thống sẽ từ chối thao tác và gửi thông báo lỗi tương ứng.

4. Toàn bộ tech stack được sử dụng để phát triển hệ thống gồm những gì?
Hệ thống ứng dụng mô hình MERN Stack cho nền tảng web bao gồm: MongoDB (cơ sở dữ liệu NoSQL, lưu trữ BSON), ExpressJS (framework máy chủ xử lý định tuyến và middleware), ReactJS (thư viện giao diện phía client) và NodeJS (môi trường máy chủ). Ứng dụng di động xây dựng bằng React Native. Quản lý trạng thái client sử dụng Redux và Redux-Saga. Hạ tầng triển khai ứng dụng sử dụng Docker trên máy chủ đám mây AWS EC2 kết hợp máy chủ web Nginx và dịch vụ Google Firebase.

5. Đồ án được thực hiện trong thời gian bao lâu và hướng tới giải quyết bài toán quy mô sinh viên như thế nào?
Đồ án được triển khai thực hiện trong thời gian 15 tuần (từ ngày 07/03/2022 đến ngày 27/06/2022). Hệ thống được thiết kế hướng tới giải quyết bài toán quản lý hoạt động phong trào và khắc phục phương thức quản lý sổ sách thủ công cho quy mô khoảng 30.000 sinh viên tại Trường Đại học Sư phạm Kỹ thuật TP.HCM (HCMUTE).

---

Kết luận

Khóa luận tốt nghiệp của sinh viên Bùi Thanh Phương và Diệp Thúy Vi đã hoàn thành việc nghiên cứu và xây dựng hệ thống quản lý chương trình và cổng thông tin hoạt động Đoàn - Hội cho Trường Đại học Sư phạm Kỹ thuật TP.HCM trên cả hai nền tảng web và di động. Đồ án kết hợp công nghệ MERN Stack, React Native và hạ tầng triển khai AWS EC2, Docker và Google Firebase để giải quyết các nghiệp vụ từ quản lý tin tức, quản lý sự kiện, điểm danh qua mã QR đến phân quyền đa cấp bậc. Kết quả nghiên cứu đáp ứng các mục tiêu lý thuyết và thực hành đã đề ra trong khung thời gian 15 tuần, đóng góp một giải pháp phần mềm cụ thể vào quá trình tin học hóa công tác sinh viên của nhà trường.

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

MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING CAPSTONE PROJECT INFORMATION TECHNOLOGY BUILDING A WEB-BASED AND MOBILE SYSTEM FOR YOUTH HCMUTE ADVISOR : MSC. NGUYEN TRAN THI VAN STUDENT6:BUI THANH PHUONG DIEP  THUY VI S K L 0 0 9 6 1 1 Ho Chi Minh City, -XQH2 HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING -----🙞🙜🕮🙞🙜----- CAPSTONE PROJECT BUILDING A WEB-BASED AND MOBILE SYSTEM FOR YOUTH HCMUTE INSTRUCTOR : MSc. NGUYEN TRAN THI VAN STUDENTS : BUI THANH PHUONG 18110179 DIEP THUY VI 18110237 Ho Chi Minh City, June 2022 SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Ho Chi Minh City,day month year 2022 CAPSTONE PROJECT OBJECTIVES Full name of student: Bui Thanh Phuong MSSV: 18110179 Full name of student: Diep Thuy Vi MSSV: 18110237 Major: Information technology Name project: Building a web-based and mobile system for youth HCMUTE Objectives: Theory: • Research MERN Stack: MongoDB, ExpressJS, ReactJS, NodeJS. • Research technology relative to React like Redux, Rredux-Saga.

• Research React Native • Research about AWS, Docker, Nginx, EC2,. • Deploy project to EC2 with Docker, Firebase Practice: • Build website and mobile with the following main features: o Student read hot news, activities, register activities to plus points. Besides they can track activities that they register, scan qr code tocheck- in the vent o Base union creates new request news or activities to show on the website, check and export list attendance,. o Admin manage user, activity, news, check student’s attendance • Deploy frontend and backend to EC2 by using Docker • Deploy mobile with Google Firebase i Execute time : 15 weeks (Start date from 7/3/2022 to 27/6/2022) Hồ Chí Minh City, day month year 2022 Head of industry Instructor’s name (Signed with full name) (Signed with full name) ii SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness ******* ASSESSMENT FORM FOR INSTRUCTOR Students’ names: 1.

Bui Thanh Phuong Student ID: 18110179 2. Diep Thuy Vi Student ID: 18110237 Major: Information Technology Project’s name: Building a web-based and mobile system for youth HCMUTE Instructor’s full name: MSc. Nguyen Tran Thi Van COMMENTARY: 1. Project’s contents and workload: Theory: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Implementation: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Results: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… 2.

Approving for dissertation defence or not? …………………………………………………………………………… …………………………………………………………………………… 5. Achievement level: …………………………………………………………………………… …………………………………………………………………………… Hồ Chí Minh City, day month year 2022 Instructor’s name (Signed with full name) iv SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness ******* ASSESSMENT FORM FOR REVIEWER Students’ names: 1. Bui Thanh Phuong Student ID: 18110179 2. Diep Thuy Vi Student ID: 18110237 Major: Information Technology Project’s name: Building a web-based and mobile system for youth HCMUTE Reviewer’s full name: MSc.

Nguyen Thanh Phuoc COMMENTARY: 1. Project’s contents and workload: Theory: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Implementation: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Results: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… 2. Approving for dissertation defence or not? …………………………………………………………………………… …………………………………………………………………………… 5. Achievement level: …………………………………………………………………………… …………………………………………………………………………… Hồ Chí Minh City, day month year 2022 Reviewer’s name (Signed with full name) vi ACKNOWLEDGMENTS First of all, I would like to express my love and gratitude to Mr.

Nguyen Tran Thi Van – a lecturer from the Faculty of Information Technology - Ho Chi Minh City University of Technology and Education, who has given me a lot of precious time, direct guidance, dedicated help, and guidance throughout the process of making specialized essays. The authors also sincerely thank all the teachers in the Faculty of Information Technology - Ho Chi Minh City University of Technology and Education, sincerely thank the teachers and teachers who participated in teaching and imparting knowledge. During our time at school, reading and reviewing our essay helped us better understand the issues we researched, so that we could complete this essay. I would like to thank the University Board of Directors, the Faculty of Information Technology and Faculty for High Quality Training, as other Functional Departments for creating the best conditions for my study and graduation.