Đồ án: Xây dựng ứng dụng hỗ trợ Đoàn viên - ĐH Sư phạm Kỹ thuật TP.HCM

Nghiên cứu chuyên sâu Đồ án tốt nghiệp: Ứng dụng quản lý và hỗ trợ Đoàn viên mang tính hệ thống, nâng cao năng lực chuyên môn cho giáo dục đào tạo

• Tác giả: Võ Hồng Phúc
• 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ệ Phần Mềm
• Đề tài: Xây Dựng Ứng Dụng Quản Lý Và Hỗ Trợ Đoàn Viên
• Loại tài liệu: Khóa Luận Tốt Nghiệp
• Năm xuất bản: 2016 - 2020
• Địa điểm: Thành Phố Hồ Chí Minh

Tóm tắt

I. Tổng quan về đồ án tốt nghiệp ứng dụng quản lý và hỗ trợ Đoàn viên

Đồ án tốt nghiệp với chủ đề xây dựng ứng dụng hỗ trợ đoàn viên là một dự án học tập thực tiễn được thực hiện bởi sinh viên Võ Hồng Phúc và Đặng Thị Duyên từ Trường Đại học Sư phạm Kỹ thuật TP.HCM, khóa 2016-2020. Dự án này tập trung vào việc phát triển một hệ thống quản lý đoàn viên hiện đại, kết hợp công nghệ backend và frontend tiên tiến. Mục tiêu chính là xây dựng một nền tảng toàn diện giúp quản lý thông tin, hoạt động và hỗ trợ các đoàn viên một cách hiệu quả. Ứng dụng này sử dụng các công nghệ phần mềm đang được áp dụng rộng rãi trong ngành công nghệ thông tin, nhằm cung cấp giải pháp quản lý chuyên nghiệp cho tổ chức.

1.1. Mục tiêu và ý nghĩa của dự án

Dự án được phát triển nhằm mục tiêu giải quyết các bài toán thực tế trong quản lý hoạt động đoàn viên. Ứng dụng cung cấp các tính năng quản lý thông tin, theo dõi hoạt động và gửi thông báo tức thời đến người dùng. Ý nghĩa của dự án nằm ở việc hiện đại hóa quy trình quản lý, giảm công việc thủ công và tăng cường tương tác giữa tổ chức với các thành viên.

1.2. Đối tượng sử dụng và phạm vi ứng dụng

Ứng dụng hỗ trợ đoàn viên được thiết kế cho các tổ chức đoàn, cán bộ quản lý và các đoàn viên. Phạm vi của ứng dụng bao gồm quản lý hồ sơ, lịch hoạt động, thống kê thành tích và gửi thông báo. Hệ thống hỗ trợ trên nhiều nền tảng từ web đến ứng dụng di động, giúp người dùng truy cập thông tin mọi lúc, mọi nơi.

II. Công nghệ và công cụ phát triển ứng dụng

Dự án sử dụng một stack công nghệ hiện đại bao gồm nhiều framework và công cụ chuyên dụng. Spring Framework với Spring Boot được lựa chọn để phát triển backend, cung cấp các API RESTful mạnh mẽ. Để đảm bảo bảo mật, nhóm tác giả áp dụng JSON Web Token (JWT) cho xác thực và phân quyền người dùng. Phía frontend, ReactJS được dùng để xây dựng giao diện web, trong khi React Native giúp phát triển ứng dụng di động cross-platform. Cơ sở dữ liệu MongoDB cùng Hibernate ORM được sử dụng để quản lý và thao tác dữ liệu. Cuối cùng, Google Firebase được tích hợp để hỗ trợ gửi thông báo push tức thời.

2.1. Backend và cơ sở dữ liệu

Spring Boot cung cấp nền tảng mạnh mẽ để phát triển các APIs RESTful. Hibernate hoạt động như một ORM layer, kết nối và thao tác với MongoDB một cách hiệu quả. JSON Web Token được triển khai để bảo vệ các endpoint API. Kiến trúc backend được thiết kế theo mô hình MVC, đảm bảo tính maintainability và scalability của hệ thống.

2.2. Frontend và giao diện người dùng

ReactJS được sử dụng để xây dựng giao diện admin web và trang thông tin của hệ thống. React Native cho phép phát triển ứng dụng di động chạy trên cả iOS và Android từ một codebase duy nhất. Giao diện được thiết kế thân thiện, dễ sử dụng và tối ưu hóa trải nghiệm người dùng. Firebase Push Notification được tích hợp để gửi thông báo tức thời đến người dùng.

III. Quá trình thiết kế và triển khai dự án

Quá trình phát triển dự án được thực hiện theo quy trình khoa học, bao gồm các giai đoạn khảo sát hiện trạng, phân tích yêu cầu, thiết kế hệ thống, cài đặt và kiểm thử. Trong giai đoạn đầu, nhóm tiến hành khảo sát nhu cầu thực tế của các tổ chức đoàn để hiểu rõ yêu cầu. Sau đó, các usecase và mô hình hóa yêu cầu được xây dựng để làm rõ phạm vi của ứng dụng. Giai đoạn thiết kế hệ thống bao gồm thiết kế kiến trúc, cơ sở dữ liệu và giao diện người dùng. Cuối cùng, quá trình cài đặt được thực hiện song song trên cả backend, frontend và mobile, kèm theo kiểm thử toàn diện và sửa lỗi.

3.1. Phân tích yêu cầu và thiết kế kiến trúc

Giai đoạn phân tích yêu cầu xác định các tính năng chính: quản lý thông tin đoàn viên, lịch hoạt động, thống kê, và gửi thông báo. Kiến trúc hệ thống được thiết kế theo mô hình client-server với backend APIs độc lập. Cơ sở dữ liệu MongoDB được mô hình hóa để lưu trữ thông tin đoàn viên, hoạt động, và log hệ thống. Thiết kế giao diện prototype được tạo ra để validate yêu cầu với người dùng.

3.2. Cài đặt kiểm thử và triển khai

Phần cài đặt được chia thành nhiều giai đoạn: phát triển API, xây dựng giao diện web với ReactJS, và phát triển ứng dụng React Native. Quá trình kiểm thử bao gồm unit testing, integration testing và user acceptance testing. Các lỗi được phát hiện và sửa chữa để đảm bảo chất lượng ứng dụng. Cuối cùng, ứng dụng được triển khai và sẵn sàng để sử dụng.

IV. Kết quả đạt được và hướng phát triển tương lai

Dự án đã hoàn thành thành công với ứng dụng quản lý đoàn viên đầy đủ chức năng. Các kết quả chính bao gồm: hệ thống backend hoàn chỉnh với các API RESTful bảo mật, giao diện web admin thân thiện và chuyên nghiệp, ứng dụng mobile cross-platform dễ sử dụng, và tích hợp thông báo tức thời thông qua Firebase. Hệ thống đã được kiểm thử toàn diện và sẵn sàng phục vụ các tổ chức đoàn. Tuy nhiên, có một số nhược điểm cần cải thiện trong các phiên bản tương lai. Hướng phát triển bao gồm tối ưu hóa hiệu suất, thêm các tính năng phân tích dữ liệu nâng cao, tích hợp AI để đưa ra gợi ý và cải thiện trải nghiệm người dùng.

4.1. Những kết quả chính và thành tựu

Ứng dụng đã triển khai thành công với hệ thống quản lý hoàn chỉnh. Backend APIs được phát triển với Spring Boot có khả năng xử lý yêu cầu đồng thời cao. Giao diện web với ReactJS cung cấp trải nghiệm người dùng mượt mà. Ứng dụng mobile React Native hoạt động ổn định trên cả iOS và Android. Firebase integration cho phép gửi thông báo push hiệu quả. Dự án đã đạt được mục tiêu chính và nhận được phản hồi tích cực từ người dùng.

4.2. Nhược điểm và phương hướng cải tiến

Một số nhược điểm cần được cải tiến bao gồm: khả năng xử lý tải lớn của API, tính năng báo cáo thống kê còn hạn chế, và giao diện người dùng có thể tối ưu hơn. Hướng phát triển tương lai sẽ tập trung vào caching để cải thiện tốc độ, thêm dashboard phân tích dữ liệu chi tiết, và áp dụng Machine Learning để dự đoán xu hướng hoạt động đoàn viên.

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

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. SPRING FRAMEWORK – SPRING BOOT [1] ➢ Spring Framework Spring là một Framework phát triển các ứng dụng Java được sử dụng bởi hàng triệu lập trình viên. Nó giúp tạo các ứng dụng có hiệu năng cao, dễ kiểm thử, sử dụng lại code…Spring nhẹ và trong suốt (nhẹ: kích thước nhỏ, version cơ bản chỉ khoảng 2MB). Spring Framework được xây dựng dựa trên 2 nguyên tắc design chính là: Dependency Injection và Aspect Oriented Programming.

Dependency Injection (DI) là gì? o Có thể hiểu DI theo một cách đơn giản như sau: ▪ Các module không giao tiếp trực tiếp với nhau mà thông qua các Interface. Module cấp thấp sẽ implement lại các interface, module cấp cao sẽ gọi module cấp thấp thông qua các interface. ▪ Việc khởi tạo các module cấp thấp sẽ do DI Container thực hiện. ▪ Việc module nào gắn với interface nào sẽ được config trong code hoặc trong file XML.

▪ DI được dùng để làm giảm sự phụ thuộc giữa các module, dễ dàng hơn trong việc thay đỏi module, bảo trì code và testing. o Có ba dạng DI: ▪ Constructor Injection: Các dependency sẽ được container inject vào một class thông qua constructor của class đó. Đây là cách thông dụng nhất. ▪ Setter Injection: Các dependency sẽ được truyền vào class thông qua hàm setter.

▪ Interface Injection: Class cần inject sẽ implement một interface. Interface này chứa hàm tên “Inject”. Container sẽ injection dependency vào một class thông qua việc gọi hàm “inject” của interface đó. Đây là cách rườm rà và ít được sử dụng 3 o Ngày nay, có nhiều DI Containers được sử dụng.

Phổ biến trong java là Spring, BtterFly, Seasar Framework. Có thể hiểu đơn giản, DI Containers là một phần trong framework. o Aspect Oriented Programming (AOP) lập trình hướng khía cạnh: là một kỹ thuật lập trình (kiểu như lập trình hướng đối tượng) nhằm phân tách chương trình thành cách moudule riêng rẽ, phân biệt, không phụ thuộc nhau. o Khi hoạt động, chương trình sẽ kết hợp các module lại để thực hiện các chức năng nhưng khi sửa đổi một chức năng thì chỉ cần sửa một module.

o AOP không phải dùng để thay thế OOP mà để bổ sung cho OOP Những tính năng core (cốt lõi) của Spring có thể được sử dụng để phát triển Java Desktop, ứng dụng mobile, Java Web. Mục tiêu chính của Spring là giúp phát triển các ứng dụng J2EE một cách dễ dàng hơn dựa trên mô hình sử dụng POJO (Plain Old Java Object). Spring Framework được tổ chức theo kiểu module. Các tính năng được tổ chức thành khoảng 20 module.

Các module này được phân nhóm thành Core Container, Data Access/Intergration, Web, AOP, Instrumentation, Messaging, và Test. Tùy vào mục đích phát triển ứng dụng mà các nhà phát triển sử dụng một trong các module đó. Hình 1: Tổng quan về Spring Framework [1] [1 – Theo tài liệu tham khảo số 1] 4 ➢ Spring Boot - Spring boot là một module của Spring Framework, cung cấp tính năng RAD (Rapid Application Development) - Phát triển ứng dụng nhanh. - Spring boot dùng để tạo các ứng dụng độc lập dựa trên Spring.

- Spring boot không yêu cầu cấu hình XML. - Sping boot là một chuẩn cho cấu hình thiết kế phần mềm, tăng cao năng suất cho người phát triển phần mềm. HIBERNATE [2] Hibernate là 1 ORM Framework: thực hiện mapping cơ sở dữ liệu quan hệ sang các object trong ngôn ngữ hướng đối tượng. Hibernate là 1 Framework cho persistence layer: Thực hiện giao tiếp giữa tầng ứng dụng với tầng dữ liệu (kết nối, truy xuất, lưu trữ…).

Kiến trúc Hibernate Framework: Hình 2: Kiến trúc Hibernate Framework [2] [2 – Tài liệu tham khảo số 2] 1. REACT JS [3] React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử 5 dụng lại được. React được sử dụng để viết Facebook trong các production, và instagram được viết hoàn toàn bằng React. 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. Công nghệ Virtual DOM 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.

Hình 3: Virtual DOM trong React [3] 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 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. 6 Hình 4: One-way binding [3] [3 – Tài liệu tham khảo số 3] 1.

JSON WEB TOKEN [4] Json Web Token (JWT) là một tiêu chuẩn mở (RFC 7519) định nghĩa cách thức truyền tin an toàn giữa các bên dưới dạng đối tượng JSON. Thông tin này được xác minh và đáng tin cậy vì nó có chứa chữ ký số. JWT được mã hóa với một thuật toán bí mật (thuật toán HMAC) hoặc một public/private key sử dụng mã hóa RSA. Hình 5: Cấu trúc của Json Web Token [4] Theo như mô tả ở hình trên, cấu trúc của một JWT được hiểu đơn giản như sau: Nói cách khác, JWT là một sự kết hợp (bởi dấu chấm) một Object Header dưới dạng JSON được encode base64, một Payload Object dưới dạng JSON được encode base64 và một Signature cho URI cũng được mã encode base64.

7 JWT có các thành phần cơ bản khi được mã hóa và truyền qua lại giữa các bên: o Header: bao gồm 2 phần chính: - Loại Token (mặc định là JWT - thông tin này cho biết đây là một Token JWT). - Thuật toán dùng để mã hóa (HMAC, SH2A56-SH256 hoặc RSA) o Payload: chứa các claims. Claims là các biểu thức về một thực thể (ví dụ: user) và một số metadata phụ trợ. Có 3 loại claims thường gặp trong Payload: reserved, public va private claims.

- Reserved claims: Đây là một số metadata được định nghĩa trước, trong đó một số metadata là bắt buộc; số còn lại tuân thủ theo JWT hợp lệ và đầy đủ thông tin. - Public claims: Claims được công nhận và sử dụng rộng rãi. - Private claims: Claims tự định nghĩa (không trùng với Reserved claims và Public claims), được tạo ra để chia sẻ thông tin giữa hai parties đã thỏa thuận và thống nhất trước đó. o Chữ ký Signature trong JWT là một chuỗi được mã hóa bởi header, payload cùng với một chuỗi được mã hóa bí mật theo nguyên tắt sau: Do bản thân Signature đã bao gồm cả header và payload nên Signature có thể được dùng để kiểm tra tính toàn vẹn của dữ liệu khi truyền tải.

Những đặc điểm nổi bật của JWT: o Kích thước nhỏ: JWT có thể được truyền thông qua URL, hoặc qua các giao thức POST, hay nhét vào bên trong phần HTTP Header. Kích thước nhỏ hơn ứng với tốc độ truyền tải sẽ nhanh hơn. o Khép kín: Phần Payload chứa toàn bộ những thông tin mà chúng ta cần với tới, ví dụ như thông tin người dùng. Vậy khi nào nên sử dụng Json Web Token: 8 o Authentication: Mỗi người dùng đăng nhập vào hệ thống thì những Request tiếp theo của người dùng sẽ chứa thêm mã JWT, cho phép người dùng có quyền truy cập vào các đường dẫn, dịch vụ và tài nguyên mà cần phải có sự cho phép nếu có mã Token trong đó.

Phương pháp này không bị ảnh hưởng bới Cross-Origin Resource Sharing (CORS) do nó không sử dụng cookie. o Trao đổi thông tin: JWT là một cách thức hữu hiệu và bảo mật để trao đổi thông tin giữa nhiều ứng dụng. Phía người nhận có thể biết chính xác được người gửi là ai vì JWT phải được ký bằng cặp public/private key. Ngoài ra, chữ ký JWT cũng được tạo ra bằng việc kết hợp cả phần Header và Payload nên thông qua đó có thể xác nhận được chữ ký có bị giã mạo hay không.

Cách thức hoạt động của Json Web Token: Hình 6: Cách thức hoạt động của Json Web Token [4] [4 – Tài liệu tham khảo số 4] 1. REACT NATIVE [5] React Native là một framework do công ty công nghệ nổi tiếng Facebook phát triển nhằm mục đích giải quyết bài toán hiệu năng của Hybrid và bài toán chi phí khi mà phải viết nhiều loại ngôn ngữ native cho từng nền tảng di động. Chúng ta sẽ build được ứng dụng Native, và chúng ta cũng có thể build ứng dụng đó một cách đa nền tảng (multi-platform) chứ không phải là một “mobile web app”, không phải là “HTML5 app”, và cũng không phải là một “hybrid app” hay cũng không chỉ build trên iOS hay Android mà chúng ta build và chạy được cả hai hệ sinh thái. 9 Về cơ bản, React Native có cùng chung cấu trúc bên trong với ReactJS đã kể trên nhưng có những điểm khác cơ bản như sau: o Thiết lập và đóng gói (setup and bundling) o DOM and Styling o Animations and Gestures o Điều hướng (Navigation) o Nền tảng code riêng (Platform specific code) o Công cụ phát triển o Publishing [5 – Tài liệu tham khảo số 5] 1.

GOOGLE FIREBASE [6] Firebase là một nền tảng phát triển ứng dụng di động và web. Nó cung cấp rất nhiều công cụ và dịch vụ để phát triển ứng dụng chất lượng, rút ngắn thời gian phát triển không cần quan tâm đến hạ tầng phần cứng. Hình 7: Các dịch vụ của Google Firebase [6] Firebase bao gồm các dịch vụ như: o Realtime Database o Authentication o Cloud Messaging o Storage 10 o Hosting o Test Lab o Crash Reporting o Notification o Remote Config o App Indexing o Dynamic Links o Invites o Adwords o AdMob Trong đề tài này, em chỉ tập trung nghiên cứ và sử dụng Cloud Messaging và Notification để ứng dụng đẩy thông báo về các thiết bị client.