đồ án 1 phát triển ứng dụng mô hình mentorship hỗ trợ trong trường học ngành công nghệ thông tin

Với lí do trên, em quyết định chọn đề tài này để phát triển một ứng dụng trực tuyến kết nối giữa mentor người hướng dẫn và mentee người cần hướng dẫn có tên là urMentor Your Mentor, sử d

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 1

PHÁT TRIỂN ỨNG DỤNG MÔ HÌNH MENTORSHIP HỖ TRỢ TRONG TRƯỜNG HỌC NGÀNH

CÔNG NGHỆ THÔNG TIN

GV HƯỚNG DẪN: Nguyễn Thị Thanh Trúc SV THỰC HIỆN: Lê Trung Hiếu - 19521499

TP HỒ CHÍ MINH, 2023

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

LỜI CẢM ƠN

Lời đầu tiên, em xin gửi lời cảm ơn đến cô Nguyễn Thi Thanh Trúc đã giúp đỡ, hướng dẫn, hỗ trợ các tài liệu liên quan đến đồ án, tạo điều kiện tốt nhất để em có thể hoàn thành đề tài này

Đồng thời, em cũng bày tỏ lòng biết ơn chân thành đến Trường Đại học Công nghệ Thông tin – Đại học quốc gia thành phố Hồ Chí Minh đã tạo ra môi trường học tập tích cực với đội ngũ giáo viên nhiệt tình, cung cấp đầy đủ cơ sở vật chất và các nguồn tư liệu học tập phong phú, thuận tiện cho việc tìm kiếm, nghiên cứu thông tin

Trong quá trình thực hiện đồ án này em không tránh khỏi được những sai sót, nhóm kính mong nhận được sự chỉ dẫn và góp ý của quý thầy cô để hoàn thiện và phát triển đồ án hơn

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

Hồ Chí Minh, tháng 12 năm 2023

Lê Trung Hiếu

3.2.2.6 Xem hồ sơ mentor 23

3.2.2.7 Xem chi tiết chương trình cố vấn 23

3.2.2.8 Đăng ký phiên cố vấn với mentor 25

3.2.2.9 Hủy đăng ký phiên cố vấn với mentor 25

3.2.2.10 Xác nhận hoàn thành phiên cố vấn 26

3.2.2.11 Đánh giá phiên cố vấn 26

3.2.2.12 Nạp xu qua ngân hàng 27

3.2.2.13 Duyệt phiên cố vấn của mentee 28

3.2.2.14 Tạo nội dung cố vấn 28

3.2.2.15 Quản lý chương trình cố vấn 29

3.2.2.16 Rút coin 30

3.2.2.17 Kiểm duyệt tài khoản mentor 31

3.2.3 Cơ sở dữ liệu 32

3.2.3.1 Nhóm chức năng quản lý user 32

3.2.3.2 Nhóm nhức năng quản lý phiên cố vấn 33

3.2.3.3 Nhóm chức năng giao dịch 34

CHƯƠNG 4 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 35

4.1 Kết quả đạt được 35

1

TÓM TẮT ĐỒ ÁN

Trong lĩnh vực công nghệ thông tin (CNTT), việc học hỏi và phát triển là vô cùng quan trọng Tuy nhiên, với sự phát triển nhanh chóng của ngành, việc tự học và tự phát triển có thể gặp nhiều khó khăn Trong bối cảnh đó, mô hình mentorship (cố vấn - học trò) trở thành một giải pháp hiệu quả để hỗ trợ sinh viên ngành CNTT trong quá trình học tập và phát triển Nhưng trong trường học CNTT vẫn chưa có một ứng dụng cụ thể về mô hình này để kết nối những sinh viên có nhu cầu học tập, học hỏi kinh nghiệm từ những sinh viên giỏi, có kinh nghiệm hơn cả trong học tập và sự nghiệp

Với lí do trên, em quyết định chọn đề tài này để phát triển một ứng dụng trực tuyến kết nối giữa mentor (người hướng dẫn) và mentee (người cần hướng dẫn) có tên là urMentor (Your Mentor), sử dụng trong môi trường trường học CNTT

Nội dung báo cáo sẽ bao gồm 5 chương:

Chương 1: Giới thiệu về đề tài, đối tượng nghiên cứu, phạm vi đề tài,

phương pháp nghiên cứu

Chương 2: Trình bày cơ sở lý thuyết bao gồm các kiến trúc, nền tảng để

Hình 2.6: video call và chat sdk 13

Hình 3.1: Tổng quan kiến trúc hệ thống urMentor 15

Hình 3.2: Sơ đồ Usecase người dùng vãng lai 16

Hình 3.3: Sơ đồ usecase mentee 17

Hình 3.4: Sơ đồ usecase mentor 18

Hình 3.5: Sơ đồ usecase admin 19

Hình 3.6: Database diagram nhóm user 32

Hình 3.7: Database diagram nhóm phiên cố vấn 33

Hình 3.8: Database diagram nhóm giao dịch 34

3

DANH MỤC BẢNG

Bảng 3.1: Danh sách tác nhân 20

Bảng 3.2: Mô tả usecase đăng ký tài khoản 21

Bảng 3.3: Mô tả usecase đăng nhập 21

Bảng 3.4: Mô tả usecase đăng xuất 22

Bảng 3.5: Mô tả usecase đăng ký làm mentor 22

Bảng 3.6: mô tả usecase tìm kiếm mentor 23

Bảng 3.7: mô tả usecase xem hồ sơ mentor 23

Bảng 3.8: mô tả usecase xem chương trình cố vấn 24

Bảng 3.9: mô tả usecase đăng ký phiên cố vấn 25

Bảng 3.10: mô tả usecase hủy đăng ký phiên 26

Bảng 3.11: Xác nhận hoàn thành phiên cố vấn 26

Bảng 3.12: mô ta usecase đánh giá phiên cố vấn 27

Bảng 3.13: mô tả use case Nạp xu qua ngân hàng 28

Bảng 3.14: mô tả use case duyệt phiên cố vấn 28

Bảng 3.15: mô tả use case Tạo nội dung cố vấn 29

Bảng 3.16: mô tả usecase Quản lý chương trình cố vấn 30

Bảng 3.17: mô tả use case Rút coin 30

Bảng 3.18: mô tả use case Kiểm duyệt tài khoản mentor 31

1.2 Lý do chọn đề tài

Hiện nay có rất nhiều ứng dụng mô hình mentorship, nhưng trong trường học CNTT vẫn chưa có một ứng dụng cụ thể về mô hình này để kết nối những sinh viên có nhu cầu học tập, học hỏi kinh nghiệm từ những sinh viên giỏi, có kinh nghiệm hơn cả trong học tập và sự nghiệp

Với lí do trên, em quyết định chọn đề tài này để phát triển một ứng dụng trực tuyến kết nối giữa mentor (người hướng dẫn) và mentee (người cần hướng dẫn) có tên là urMentor (Your Mentor), sử dụng trong môi trường trường học CNTT

1.3 Mục tiêu đề tài

Xây dựng được một nền tảng giúp sinh viên hoặc giảng viên trong trường có thể kết nối được với nhau, giúp đỡ mentee phát triển trong vấn đề học tập và sự nghiệp của họ

1.4 Đối tượng nghiên cứu 1.4.1 Các công nghệ

• Front-end: ReactJS, Typescript, Zustand, React-query, Tailwind-css • Back-end: Nestjs, Typescript, TypeORM

• Database: Postgres

6

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT

2.1 Lý thuyết về phương pháp cố vấn

Một vài cách tiếp cận phổ biến về phương pháp cố vấn:

Cố vấn 1-1: Phương pháp này bao gồm một người cố vấn làm việc chặt chẽ

với từng người được cố vấn, hỗ trợ và cung cấp các hướng dẫn, lời khuyên được cá nhân hóa phù hợp với nhu cầu và mục tiêu của người được cố vấn

Cố vấn theo nhóm: Trong phương pháp này, một người cố vấn làm việc với

một nhóm nhỏ những người được cố vấn cùng một lúc Tư vấn nhóm khuyến khích việc học tập lẫn nhau, sự hợp tác và ý thức chung giữa những người được cố vấn

Cố vấn đảo ngược: Phương pháp này hướng đến việc kết nối một cá nhân trẻ

hoặc ít kinh nghiệm hơn với một người cố vấn cao cấp và sở hữu nhiều kinh nghiệm hơn Thông qua phương pháp này, người cố vấn có thể hiểu rõ hơn về các xu hướng và công nghệ mới nổi trội, trong khi người được cố vấn được hưởng lợi từ sự kiến thức và kinh nghiệm của người cố vấn

Cố vấn ảo: Bằng việc sử dụng công nghệ, người cố vấn và người được cố vấn

có thể tham gia vào các mối quan hệ cố vấn bất kể các vấn đề liên quan đến vị trí địa lý

2.2 ReactJS

ReactJS là một thư viện JavaScript mã nguồn mở và miễn phí để xây dựng giao diện người dùng dựa trên các thành phần UI riêng lẻ Nó được phát triển và duy trì bởi Meta và cộng đồng các nhà phát triển và công ty cá nhân

ReactJS được sử dụng để xây dựng các ứng dụng web, ứng dụng di động và các ứng dụng web cho thiết bị di động Nó là một trong những thư viện JavaScript phổ biến nhất hiện nay, được sử dụng bởi các công ty lớn như Facebook, Instagram, Netflix, Airbnb,

7

Hình 2.1: ReactJs ReactJS có một số tính năng nổi bật, bao gồm:

• Khả năng tái sử dụng cao: ReactJS sử dụng mô hình

component-based, cho phép các nhà phát triển tạo các thành phần UI có thể tái sử dụng trong nhiều ứng dụng khác nhau

• Tốc độ nhanh: ReactJS sử dụng virtual DOM để tối ưu hóa việc cập

nhật giao diện người dùng, giúp các ứng dụng chạy nhanh và mượt mà

• Dễ học: ReactJS có cú pháp đơn giản và dễ hiểu, giúp các nhà phát

triển mới bắt đầu dễ dàng học hỏi

2.3 Typescript

TypeScript là một ngôn ngữ lập trình mã nguồn mở được phát triển và duy trì bởi Microsoft Nó là một tập hợp siêu cú pháp nghiêm ngặt của JavaScript và thêm tính năng kiểu tĩnh tùy chọn vào ngôn ngữ TypeScript được thiết kế để phát triển các ứng dụng lớn và chuyển đổi sang JavaScript

Đặc điểm nổi bật của TypeScript

• Kiểu dữ liệu tĩnh: TypeScript cho phép bạn xác định kiểu dữ liệu của

biến, tham số, và giá trị trả về từ hàm Điều này giúp phát hiện lỗi nhanh chóng trong quá trình phát triển và tăng tính rõ ràng của mã nguồn

• Tính mở rộng của JavaScript: TypeScript là một superset của

JavaScript, điều này có nghĩa là mã nguồn JavaScript hợp lệ cũng là mã nguồn TypeScript hợp lệ Bạn có thể chuyển từ JavaScript sang TypeScript dần dần trong dự án mà không cần phải chuyển đổi toàn bộ mã nguồn cùng một lúc

8

• Tích hợp với các công cụ phát triển: TypeScript có thể tích hợp dễ

dàng với các công cụ phát triển như Visual Studio Code, Sublime Text, và các trình biên dịch khác để cung cấp trải nghiệm phát triển tốt hơn

• Kiểm tra kiểu tại thời điểm biên dịch: TypeScript thực hiện kiểm

tra kiểu tại thời điểm biên dịch, giúp phát hiện lỗi trước khi chạy chương trình, giảm số lượng lỗi xảy ra tại thời điểm chạy

9

từ các nguồn khác nhau, như API, và giúp quản lý trạng thái ứng dụng một cách hiệu quả

Dưới đây là một số đặc điểm nổi bật của React Query:

• Quản lý trạng thái dữ liệu dễ dàng: React Query giúp bạn quản lý

trạng thái dữ liệu của ứng dụng một cách dễ dàng và hiệu quả Việc sử dụng các hooks như useQuery và useMutation giúp tối ưu hóa quá trình quản lý trạng thái và tương tác với dữ liệu

• Giảm boilerplate code: Thư viện này giảm bớt số lượng boilerplate

code cần thiết để xử lý các tác vụ phổ biến như lấy dữ liệu từ API, caching, và tự động làm mới dữ liệu Điều này giúp mã nguồn trở nên ngắn gọn, dễ đọc, và dễ bảo trì hơn

• Tích hợp mạnh mẽ với React: React Query được thiết kế để hoạt

động chặt chẽ với React, sử dụng các hooks để cung cấp khả năng quản lý trạng thái và tương tác dữ liệu Điều này giúp đơn giản hóa quá trình tích hợp và sử dụng trong dự án React

• Hỗ trợ caching và làm mới dữ liệu: React Query có hệ thống

caching mạnh mẽ, giúp tránh việc gửi các yêu cầu dữ liệu lặp lại và tối ưu hóa hiệu suất ứng dụng Nó cũng hỗ trợ tự động làm mới dữ liệu để đảm bảo rằng trạng thái dữ liệu luôn được cập nhật

• Xử lý side effects dễ dàng: React Query cung cấp các hooks như

useMutation để xử lý các tác vụ phụ (side effects) như tạo mới, cập nhật, xóa dữ liệu một cách dễ dàng và có tổ chức

• DevTools hỗ trợ: React Query đi kèm với DevTools giúp theo dõi và

debug trạng thái dữ liệu và các yêu cầu từ API một cách hiệu quả

2.5 Zustand

Zustand là một thư viện quản lý trạng thái cho ứng dụng React Nó giúp quản lý trạng thái ứng dụng một cách dễ dàng và linh hoạt, đặc biệt được thiết kế để đơn giản hóa việc quản lý trạng thái trong các ứng dụng React

10

Dưới đây là một số đặc điểm nổi bật của Zustand:

• Kích thước nhỏ: Zustand có kích thước nhỏ và tập trung vào việc

cung cấp một API dễ sử dụng mà không làm tăng kích thước của ứng dụng nhiều

• Cú pháp đơn giản: API của Zustand rất đơn giản, giúp giảm bớt

boilerplate code và làm cho việc quản lý trạng thái trở nên thuận tiện hơn Điều này làm cho zustand được ưu tiên tích hợp vào các dự án nhỏ và trung bình hơn so với redux

• Tích hợp tốt với React: Zustand được xây dựng để tích hợp tốt với

React, sử dụng React Hooks để quản lý trạng thái Điều này giúp tận dụng các lợi ích của React Hooks và làm cho việc sử dụng Zustand trở nên tự nhiên trong môi trường React

• Hỗ trợ middleware: Zustand hỗ trợ middleware, giúp bạn mở rộng

chức năng và tùy chỉnh quy trình xử lý trạng thái

2.6 NestJs

Hình 2.4: NestJs

NestJS là một framework phát triển web back-end cho Node.js, được thiết kế để tạo ra ứng dụng server-side hiệu quả và dễ bảo trì NestJS kết hợp các đặc điểm của TypeScript (hoặc JavaScript) với các kiến trúc và ý tưởng từ Angular, tạo ra một môi trường phát triển mạnh mẽ cho xây dựng ứng dụng web

11

Dưới đây là một số điểm nổi bật của NestJS:

• Kiến trúc modular: NestJS thúc đẩy việc sử dụng kiến trúc modular,

giúp tạo ra mã nguồn dễ bảo trì và linh hoạt Ứng dụng có thể được chia thành các module độc lập với các thành phần như controllers, providers, và

middleware

• Sử dụng TypeScript: NestJS được xây dựng hoàn toàn bằng

TypeScript, một ngôn ngữ lập trình mở rộng của JavaScript với kiểu dữ liệu tĩnh Điều này giúp giảm lỗi trong quá trình phát triển và tăng tính rõ ràng của mã nguồn

• Decorator-based syntax: NestJS sử dụng cú pháp dựa trên decorator

để đánh dấu các thành phần như controllers, modules, routes, và middleware Điều này giúp mã nguồn trở nên rõ ràng và dễ đọc hơn

• Dependency Injection: NestJS hỗ trợ Dependency Injection (DI),

giúp quản lý và đưa các phụ thuộc vào ứng dụng một cách hiệu quả Điều này cũng tạo điều kiện cho việc kiểm thử và tái sử dụng mã nguồn

• Middleware-based approach: NestJS sử dụng middleware để xử lý

các yêu cầu HTTP trước khi đến đối tượng xử lý chính Điều này cung cấp khả năng kiểm soát cao và tối ưu hóa quá trình xử lý

2.7 TypeORM

Hình 2.5: TypeORM

12

TypeORM là một thư viện ORM (Object-Relational Mapping) cho TypeScript và JavaScript, được sử dụng để tương tác với cơ sở dữ liệu trong các ứng dụng Node.js và TypeScript ORM giúp quản lý truy vấn cơ sở dữ liệu và tương tác với dữ liệu một cách trừu tượng hóa, sử dụng các đối tượng và lớp thay vì các truy vấn SQL trực tiếp

Dưới đây là một số đặc điểm và lợi ích của TypeORM:

• Hỗ trợ nhiều cơ sở dữ liệu: TypeORM hỗ trợ nhiều loại cơ sở dữ

liệu như MySQL, PostgreSQL, MariaDB, SQLite, Microsoft SQL Server, Oracle, và nhiều hệ thống cơ sở dữ liệu khác

• Kiểu dữ liệu tĩnh với TypeScript: TypeORM được thiết kế để hoạt

động tốt với TypeScript, cho phép sử dụng kiểu dữ liệu tĩnh trong quá trình phát triển để giảm lỗi và tăng tính rõ ràng của mã nguồn

• Object-Relational Mapping (ORM): TypeORM giúp ánh xạ giữa

các đối tượng trong mã nguồn và các bảng trong cơ sở dữ liệu Điều này giúp làm giảm cú pháp và tăng sự trừu tượng hóa, cho phép sử dụng đối tượng để thao tác dữ liệu thay vì trực tiếp với SQL

• Quản lý migrations: TypeORM cung cấp các công cụ để quản lý quá

trình migration, giúp duy trì và cập nhật cấu trúc cơ sở dữ liệu khi ứng dụng phát triển

• Tương thích với NestJS

13

2.8 Video call và chat sdk

Hình 2.6: video call và chat sdk

ZegoCloud là một công ty cung cấp dịch vụ đám mây toàn cầu, chuyên về các giải pháp truyền phát trực tiếp, hội nghị truyền hình và trò chuyện Video Call SDK và Chat SDK của ZegoCloud là hai sản phẩm chính của công ty, được sử dụng bởi hàng triệu nhà phát triển trên toàn thế giới để xây dựng các ứng dụng giao tiếp trực tiếp

• Tính năng đa nền tảng: Hỗ trợ đa nền tảng, bao gồm Android, iOS, web, Flutter và React Native

• Tính năng bảo mật cao: Sử dụng mã hóa TLS và AES256 để bảo vệ dữ liệu người dùng

15

CHƯƠNG 3 XÂY DỰNG HỆ THỐNG

3.1 Kiến trúc

Hình 3.1: Tổng quan kiến trúc hệ thống urMentor

Hệ thống sử dụng kiến trúc Client – Server với client và server riêng biệt:

Server: API chính được xây dựng bằng NestJS framework và TypeORM, sử

dụng Server Sent Event để gửi thông báo cho người dùng, UploadThing dùng để lưu avatar và file

Client: Ứng dụng web được xây dựng bằng ReactJS, quản lý Client State

bằng Zustand và Server State (dữ liệu trả về từ server) bằng React Query

Authentication: token-based authentication sử dụng JWT Refresh token,

verify mail code được lưu trên redis để truy cập nhanh hơn

16

3.2 Phân tích hệ thống 3.2.1 Sơ đồ Usecase

Hình 3.2: Sơ đồ Usecase người dùng vãng lai

17

Hình 3.3: Sơ đồ usecase mentee

18

Hình 3.4: Sơ đồ usecase mentor

19

Hình 3.5: Sơ đồ usecase admin

2 Người hướng dẫn (mentor) Người dùng có nhu cầu muốn truyền đạt kiến thức và kinh nghiệm thực tế với người khác

3 Người cần hướng dẫn (mentee) Người dùng có mong muốn được học hỏi

4 Quản trị viên (admin) Người thực hiện quản lý hệ thống, bao gồm: quản lý các loại tài khoản, kỹ năng, lĩnh vực và giao dịch

Bảng 3.1: Danh sách tác nhân

3.2.2 Mô tả usecase

3.2.2.1 Đăng ký tài khoản

Mã usecase UC001

Tên usecase Đăng ký tài khoản

Mô tả Người dùng vãng lai muốn đăng ký tài khoản Tác nhân Người dùng vãng lai

Điều kiện Phải có kết nối mạng Dòng sự kiện chính 1 Truy cập vào trang web

2 Chọn vào nút “Đăng ký” ở trang chủ 3 Hiển thị màn hình đăng ký

4 Nhập thông tin email, mật khẩu, tên 5 Chọn vào nút “Đăng ký”

Dòng sự kiện phụ Chọn nút “Đã có tài khoản? Đăng nhập” ở màn hình đăng ký tài khoản sẽ hiển thị màn hình đăng nhập