Xây dựng ứng dụng hỗ trợ đoàn viên

TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Thời đại công nghiệp hóa và hiện đại hóa đã đánh dấu sự bùng nổ của công nghệ số, dẫn đến sự phổ biến của các thiết bị thông minh trong đời sống con người Trong số đó, điện thoại thông minh nổi bật với vai trò thiết yếu cho mọi lứa tuổi và hoàn cảnh, từ học tập đến giải trí Nhằm đáp ứng nhu cầu phát triển xã hội, số lượng ứng dụng trên smartphone ngày càng gia tăng Nhận thấy những khó khăn trong công tác quản lý và hỗ trợ đoàn viên tại Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh, nhóm nghiên cứu đã tìm hiểu về sự tiện nghi mà điện thoại thông minh mang lại.

Xây dựng ứng dụng hỗ trợ đoàn viên sẽ tạo ra những thay đổi tích cực, nâng cao chất lượng quản lý và truyền tải thông tin từ Đoàn Trường, Đoàn Khoa đến sinh viên một cách nhanh chóng và hiệu quả.

PHÂN TÍCH CÁC ỨNG DỤNG CÓ LIÊN QUAN

Hầu hết các ứng dụng hỗ trợ Đoàn viên đã được phát triển với nhiều tính năng đa dạng, từ cơ bản đến phức tạp Tuy nhiên, một số ứng dụng vẫn tồn tại những nhược điểm cần khắc phục.

- Giao diện chưa thật sự bắt mắt và thu hút người dùng

- Xử lý API vẫn còn gặp nhiều khó khăn

- Tính năng của một số ứng dụng vẫn còn hạn chế.

KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

- Áp dụng ReactJS và React Native để xây dựng giao diện cho admin trên website và người dùng trên mobile

- Sử dụng Spring Framework xây dựng được APIs cho các module trong hệ thống quản lý

- Hoàn tất gửi thông báo cho người dùng về email để cung cấp mật khẩu, thông tin hoạt động bằng Google Firebase.

CƠ SỞ LÝ THUYẾT

KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU

THIẾT KẾ PHẦN MỀM

THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ

CHƯƠNG 4 CÀI ĐẶT VÀ KIỂM THỬ PHẦN MỀM

1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC

Tuần Ngày Nhiệm vụ (Công việc dự kiến) Sản phẩm Sinh viên thực hiện

- Thiết kế usecase và mô hình hóa yêu cầu

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

- Thiết kế giao diện và thiết kế xử lý

- Tìm hiểu về Mobile CrossPlatform ReactNative

- Tìm hiểu về Jeact JS cho Website

- Tìm hiểu về Java Springboot cho phát triển APIs

- Xây dựng được giao diện trên thiết bị di động bằng

- Xây dụng giao diện web admin bằng ReactJS

- Tìm hiểu JSON WEB TOKEN để ứng dụng vào hệ thống

- Tìm hiểu về cách xây dựng Restful API

- Xây dựng các class xử lý APIs với Java SpringBoot

- Xây dựng document Resful API của ứng dụng

- Tiến hành phát triển của API dựa trên document

- Tìm hiểu Firebase và áp dụng vào hệ thống

- Xây dụng API với database MongoDB đã thiết kế Phúc

- Kết hợp các thành phần đã xây dựng (Giao diện, API, Database) Ứng dụng hoàn thành cơ bản

- Tìm hiểu và xây dựng hệ thống hoàn thiện Ứng dụng hoàn thành cơ bản

- Kiểm thử chương trình, tiến hành sửa lỗi

- Chỉnh sửa tổng hợp báo cáo Ứng dụng đã được kiểm thử và sửa lỗi

Bản báo cáo hoàn chỉnh để in và nộp

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

Tp Hồ Chí Minh, ngày…tháng…năm 2020

Người viết đề cương (Ký và ghi rõ họ tên)

LỜI CẢM ƠN ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP

KẾ HOẠCH THỰC HIỆN DANH SÁCH BẢNG BIỂU DANH SÁCH HÌNH

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1

4 PHÂN TÍCH CÁC ỨNG DỤNG CÓ LIÊN QUAN 2

5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 2

6 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 2

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 3

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 12

2.2.1 Yêu cầu chức năng nghiệp vụ 13

2.2.2 Yêu cầu chức năng hệ thống 14

2.2.2 Yêu cầu phi chức năng 14

2.3 MÔ HÌNH HÓA YÊU CẦU 15

2.3.1.1 Sơ đồ usecase tổng quan 15

2.3.1.2 Sơ đồ usecase chi tiết quản lý năm học 15

2.3.1.3 Sơ đồ usecase chi tiết quản lý học kì 16

2.3.1.4 Sơ đồ usecase chi tiết quản lý tài khoản 16

2.3.1.5 Sơ đồ usecase chi tiết quản lý hoạt động 16

2.3.2 Đặc tả chi tiết các usecase 17

CHƯƠNG 3: THIẾT KẾ PHẦN MỀM 31

3.2 THIẾT KẾ CƠ SỞ DỮ LIỆU 31

3.3 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 41

3.3.1.1 Giao diện trang đăng nhập 41

3.3.1.3 Giao diện trang Quản lý Khoa 42

3.3.1.4 Giao diện trang Quản lý Học kì 44

3.3.1.5 Giao diện trang Quản lý Lớp 47

3.3.1.5 Giao diện trang Quản lý Người dùng 48

3.3.1.6 Giao diện trang Quản lý Hoạt động cấp trường 49

3.3.1.7 Giao diện trang Quản lý Hoạt động cấp khoa 51

3.3.2.1 Giao diện trang Đăng nhập 52

3.3.2.2 Giao diện trang Đăng kí trên Mobile 53

3.3.2.3 Giao diện Trang chủ trên Mobile 54

3.3.2.4 Giao diện trang chi tiết nội dung trên Mobile 54

3.3.2.4 Giao diện trang Tài khoản trên Mobile 55

3.3.2.5 Giao diện trang Đánh giá sao trên Mobile 55

3.3.2.6 Giao diện trang Thay đổi mật khẩu 56

3.3.2.7 Giao diện trang Hoạt động đã Đăng kí 56

3.4 SƠ ĐỒ TUẦN TỰ CỦA MỘT SỐ TÍNH NĂNG CHÍNH 57

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ PHẦN MỀM 59

4.2.2.4 Màn hình tạo hoạt động 62

4.2.2.5 Màn hình đăng kí hoạt động 62

1 CHẠY ỨNG DỤNG API SERVER VÀ WEBSITE QUẢN LÝ TRÊN VPS 66

1.1 Sử dụng VPS chạy ứng dụng 66

1.2 Trỏ địa chỉ hostname về VPS 68

2 DEPLOY ỨNG DỤNG ANDROID LÊN GOOGLE STORE 69

2.1 Xuất file AAB với đầy đủ Signager 69

1.2 Cài đặt Java JDK 1.8 trở lên 73

1.4 Database Managerment System (DBMS) – MongoDB 74

Bảng 1: Usercase Quản lý năm học 17

Bảng 2: Usecase Quản lý học kì 17

Bảng 3: Usecase Quản lý tài khoản 18

Bảng 5: Usecase Quản lý hoạt động 19

Bảng 7: Usecase Gửi thông báo 20

Bảng 9: Usecase Xem file CSV 21

Bảng 11: Usecase Quên mật khẩu 22

Bảng 14: Usecase Xem hoạt động 25

Bảng 15: Usecase Đăng kí tham gia 26

Bảng 16: Usecase Đánh giá sao 27

Bảng 17: Usecase Xem thông tin cá nhân 28

Bảng 18: Usecase Đổi mật khẩu 29

Bảng 19: Usecase Xem hoạt động đã đăng kí 30

Bảng 20: Chi tiết dữ liệu bảng User 31

Bảng 21: Chi tiết bảng dữ liệu user_role 32

Bảng 22: Chi tiết bảng dữ liệu user_privilege 32

Bảng 23: Chi tiết bảng dữ liệu students 33

Bảng 24: Chi tiết bảng dữ liệu semesters 33

Bảng 25: Chi tiết bảng dữ liệu scholastics 34

Bảng 26: Chi tiết bảng dữ liệu roles 35

Bảng 27: Chi tiết bảng dữ liệu roles_privilege 35

Bảng 28: - Chi tiết bảng dữ liệu privileges 35

Bảng 29: Chi tiết bảng dữ liệu people_contact 36

Bảng 30: Chi tiết bảng dữ liệu managers 36

Bảng 31: Chi tiết bảng dữ liệu faculities 37

Bảng 32: Chi tiết bảng dữ liệu classes 38

Bảng 33: Chi tiết bảng dữ liệu activity_level 38

Bảng 34: Chi tiết bảng dữ liệu activities_description 39

Bảng 35: Chi tiết bảng dữ liệu activities 40

Bảng 36: Danh sách xử lý trang Đăng nhập 41

Bảng 37: Danh sách xử lý trang Dashboard 42

Bảng 38: Danh sách xử lý trang Quản lý Khoa 42

Bảng 39: Danh sách xử lý trang thêm Khoa 43

Bảng 40: Danh sách xử lý trang chỉnh sửa Khoa 43

Bảng 41: Danh sách xử lý trang xóa Khoa 44

Bảng 42: Danh sách xử lý trang Quản lý Học kì 44

Bảng 43: Danh sách xử lý trang thêm Học kì 45

Bảng 44: Danh sách xử lý trang chỉnh sửa Học kì 46

Bảng 45: Danh sách xử lý trang xóa Học kì 47

Bảng 46: Danh sách xử lý trang Quản lý Lớp 47

Bảng 47: Danh sách xử lý trang thêm Lớp 47

Bảng 48: Danh sách xử lý trang chỉnh sửa Lớp 48

Bảng 49: Danh sách xử lý trang xóa Lớp 48

Bảng 50: Danh sách xử lý trang Quản lý Người dùng 49

Bảng 51: Danh sách xử lý trang Quản lý Hoạt động cấp trường 49

Bảng 52: Danh sách xử lý trang thêm/chỉnh sửa hoạt động cấp trường 50

Bảng 53: Danh sách xử lý trang Quản lý Hoạt động cấp khoa 51

Bảng 54: Danh sách xử lý trang Đăng nhập trên Mobile 52

Bảng 55: Danh sách xử lý trang Đăng kí trên Mobile 53

Bảng 56: Danh sách xử lý Trang chủ trên Mobile 54

Bảng 57: Danh sách xử lý Trang chủ trên Mobile 54

Bảng 58: Danh sách xử lý trang Tài khoản trên Mobile 55

Bảng 59: Danh sách xử lý trang Đánh giá sao trên Mobile 55

Bảng 60: Danh sách xử lý trang Thay đổi mật khẩu 56

Bảng 61: Danh sách xử lý trang Hoạt động đã Đăng kí 56

Hình 1: Tổng quan về Spring Framework [1] 4

Hình 2: Kiến trúc Hibernate Framework [2] 5

Hình 3: Virtual DOM trong React [3] 6

Hình 5: Cấu trúc của Json Web Token [4] 7

Hình 6: Cách thức hoạt động của Json Web Token [4] 9

Hình 7: Các dịch vụ của Google Firebase [6] 10

Hình 8:Sơ đồ usecase tổng quan 15

Hình 9: Sơ đồ usecase chi tiết quản lý năm học 15

Hình 10: Sơ đồ usecase chi tiết quản lý học kì 16

Hình 11: Sơ đồ usecase chi tiết quản lý tài khoản 16

Hình 12: Sơ đồ usecase chi tiết quản lý hoạt động 16

Hình 13: Prototype Quản lý năm học 17

Hình 14: Prototype Quản lý học kì 17

Hình 15: Prototype Quản lý tài khoản 18

Hình 17: Prototype Quản lý hoạt động 19

Hình 19: Prototype Gửi thông báo 20

Hình 21: Prototype Xem file CSV 21

Hình 23: Prototype Quên mật khẩu 22

Hình 24: Prototype Quên mật khẩu 23

Hình 26: Prototype Xem hoạt động 25

Hình 27: Prototype Đăng kí tham gia 26

Hình 28: Prototype Đánh giá sao 27

Hình 29: Prototype Xem thông tin cá nhân 28

Hình 30: Prototype Đổi mật khẩu 29

Hình 31: Prototype Xem hoạt động đã đăng kí 30

Hình 32: Giao diện trang đăng nhập 41

Hình 33: Giao diện trang Dashboard 41

Hình 34: Giao diện trang Quản lý Khoa 42

Hình 35: Giao diện trang thêm Khoa 43

Hình 36: Giao diện Chỉnh sửa Khoa 43

Hình 37: Giao diện trang xóa Khoa 44

Hình 38: Giao diện trang Quản lý Học kì 44

Hình 39: Giao diện trang thêm Học kì 45

Hình 40: Giao diện trang chỉnh sửa Học kì 46

Hình 41: Giao diện trang xóa Học kì 46

Hình 42: Giao diện trang Quản lý Lớp 47

Hình 43: Giao diện trang thêm Lớp 47

Hình 44: Giao diện trang chỉnh sửa Lớp 48

Hình 45: Giao diện trang xóa Lớp 48

Hình 46: Giao diện trang Quản lý Người dùng 48

Hình 47: Giao diện trang Quản lý Hoạt động cấp trường 49

Hình 48: Giao diện trang thêm/chỉnh sửa hoạt động cấp trường 50

Hình 49: Giao diện trang Quản lý Hoạt động cấp khoa 51

Hình 50: Giao diện trang Đăng nhập trên Mobile 52

Hình 51: Giao diện trang Đăng kí trên Mobile 53

Hình 52: Giao diện trang chủ trên Mobile 54

Hình 53: Giao diện trang chi tiết nội dung trên Mobile 54

Hình 54: Giao diện trang Tài khoản trên Mobile 55

Hình 55: Giao diện trang Đánh giá sao trên Mobile 55

Hình 56: Danh sách trang Thay đổi mật khẩu 56

Hình 57: Giao diện trang Họat động đã Đăng kí 56

Hình 58: Sơ đồ tuần tự Đăng nhập 57

Hình 59: Sơ đồ tuần tự Đăng ký hoạt động 57

Hình 60: Sơ đồ tuần tự Thêm hoạt động 58

Hình 61: Sơ đồ tuần tự Đăng ký tài khoản 58

Hình 63: Mẫu testcase chi tiết 60

Hình 64: Testcase màn hình trang chủ 60

Hình 65: Testcase màn hình đăng nhập 60

Hình 66: Test Data màn hình đăng nhập 61

Hình 67: Testcase màn hình đăng ký 61

Hình 68: Test Data màn hình đăng kí 61

Hình 69: Testcase màn hình tạo hoạt động 62

Hình 70: Testcase màn hình đăng kí hoạt động 62

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Thời đại công nghiệp hóa và hiện đại hóa đã usher vào kỷ nguyên công nghệ số, làm cho thiết bị thông minh ngày càng phổ biến trong đời sống con người Điện thoại thông minh nổi bật là thiết bị thiết yếu cho mọi lứa tuổi, phục vụ từ học tập đến giải trí Nhận thấy nhu cầu ngày càng cao về ứng dụng trên smartphone, các ứng dụng được phát triển để đáp ứng nhu cầu xã hội Đặc biệt, nhóm nghiên cứu đã nhận diện những khó khăn trong công tác quản lý và hỗ trợ đoàn viên tại Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh, từ đó khai thác tiện ích của điện thoại thông minh để cải thiện tình hình.

Xây dựng ứng dụng hỗ trợ đoàn viên nhằm tạo ra những thay đổi tích cực, nâng cao chất lượng quản lý và truyền tải thông tin từ Đoàn Trường, Đoàn Khoa đến sinh viên một cách nhanh chóng và hiệu quả.

2 ĐỐI TƯỢNG NGHIÊN CỨU Đối với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu sử dụng của người quản lý và công tác quản lý và hoạt động rèn luyện Đồng thời kèm theo đó là các công nghệ áp dụng tạo ra sản phẩm Cụ thể như sau:

Nghiên cứu công nghệ Spring Framework, đặc biệt là Spring MVC và Java Core, nhằm phát triển hệ thống API giúp lấy dữ liệu một cách chính xác và nhanh chóng.

- Áp dụng Hibernate làm kết nối đến hệ quản trị Cơ sở Dữ liệu MongoDB

Nhóm nghiên cứu đã tiến hành khảo sát về Framework ReactJS và React Native, cùng với các thư viện hỗ trợ, nhằm xây dựng và xử lý giao diện người dùng một cách hiệu quả.

Để đảm bảo bảo mật cho hệ thống, chúng tôi đã nghiên cứu và áp dụng công nghệ Json Web Token (JWT) Tất cả các luồng dữ liệu vào ra đều được kiểm soát thông qua Token Người dùng bắt buộc phải đăng nhập để nhận một Token riêng, và mỗi yêu cầu từ người dùng đều phải đi qua một Interceptor, trong đó Token đóng vai trò như "chìa khóa" truy cập.

- Về phần thông báo trên nhiều nền tảng ứng dụng sử dụng Google Firebase để thực hiện đẩy thông báo về ứng dụng

3 PHẠM VI NGHIÊN CỨU Đề tài này chủ yếu đi tập trung vào việc xử lý các nghiệp vụ của công tác quản lý các hoạt động rèn luyện đoàn viên như: tạo hoạt đông rèn luyện đoàn viên và thông báo tới ứng dụng, đăng kí tham gia và tạo danh sách cho đơn vị quản lý, đánh giá hoạt động, tạo bài kiểm tra bằng hình thức nhận diện khuôn mặt Về phần Core, xây dựng đầy đủ các API phục vụ cho phần hiển thị cuối cùng

4 PHÂN TÍCH CÁC ỨNG DỤNG CÓ LIÊN QUAN

Hầu hết các ứng dụng hỗ trợ Đoàn viên đã được phát triển và ra mắt với nhiều tính năng đa dạng, từ cơ bản đến phức tạp Tuy nhiên, một số ứng dụng vẫn còn tồn tại những nhược điểm nhất định.

- Giao diện chưa thật sự bắt mắt và thu hút người dùng

- Xử lý API vẫn còn gặp nhiều khó khăn

- Tính năng của một số ứng dụng vẫn còn hạn chế

5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

- Áp dụng ReactJS và React Native để xây dựng giao diện cho admin trên website và người dùng trên mobile

- Sử dụng Spring Framework xây dựng được APIs cho các module trong hệ thống quản lý

- Hoàn tất gửi thông báo cho người dùng về email để cung cấp mật khẩu, thông tin hoạt động bằng Google Firebase

6 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN Đề tài hướng đến khả năng tiếp thu, nâng cao kỹ năng lập trình, nghiên cứu công nghệ mới và trên hết là đáp ứng nhu cầu của việc đưa thông tin về các hoạt động của Đoàn Trường, Đoàn Khoa về đến các Chi đoàn và sinh viên một cách nhanh nhất Mục đích để việc các hoạt động được tổ chức một cách tốt nhất, đồng thời không bị thiếu hụt số lượng sinh viên tham gia, danh sách điểm rèn luyện và công tác xã hội được nhất quán một cách cụ thể

PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

Spring là một Framework phát triển ứng dụng Java phổ biến, được hàng triệu lập trình viên tin dùng Nó hỗ trợ tạo ra các ứng dụng hiệu suất cao, dễ dàng kiểm thử và tái sử dụng mã nguồn Với kích thước nhỏ gọn, chỉ khoảng 2MB cho phiên bản cơ bản, Spring mang lại sự nhẹ nhàng và tính minh bạch cho quá trình phát triển.

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 trong hệ thống không giao tiếp trực tiếp mà sử dụng các Interface để kết nối Module cấp thấp sẽ thực hiện các interface này, trong khi module cấp cao sẽ gọi đến module cấp thấp thông qua các interface đã được định nghĩa.

▪ 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

This interface features a function called "Inject," which allows the container to inject dependencies into a class by invoking the "inject" method of the interface However, this method is considered cumbersome and is not commonly used.

Ngày nay, có nhiều DI Containers phổ biến trong Java như Spring, BtterFly và Seasar Framework, được hiểu đơn giản là một phần của framework Aspect Oriented Programming (AOP) là một kỹ thuật lập trình, tương tự như lập trình hướng đối tượng, giúp phân tách chương trình thành các module riêng biệt, độc lập với nhau Khi chương trình hoạt động, các module này sẽ được kết hợp để thực hiện các chức năng, và khi cần sửa đổi một chức năng, chỉ cần chỉnh sửa một module AOP không thay thế OOP mà là sự bổ sung cho OOP.

Spring cung cấp các tính năng cốt lõi cho việc phát triển ứng dụng Java Desktop, mobile và Java Web Mục tiêu chính của Spring là đơn giản hóa quá trình phát triển các ứng dụng J2EE thông qua việc sử dụng mô hình POJO (Plain Old Java Object).

The Spring Framework is structured in a modular fashion, comprising approximately 20 distinct modules These modules are categorized into groups such as Core Container, Data Access/Integration, Web, AOP, Instrumentation, Messaging, and Test Developers can choose specific modules based on their application development needs.

Hình 1: Tổng quan về Spring Framework [1]

[1 – Theo tài liệu tham khảo số 1]

- 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 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ữ…)

Hình 2: Kiến trúc Hibernate Framework [2]

[2 – Tài liệu tham khảo số 2]

CÀI ĐẶT VÀ KIỂM THỬ PHẦN MỀM