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
Trang 1ĐẠ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
Trang 2NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
Trang 3LỜ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
Trang 53.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
Trang 71
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 để
Trang 8Hì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
Trang 93
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
Trang 101.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
Trang 126
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,
Trang 137
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
Trang 148
• 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
Trang 159
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
Trang 1610
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
Trang 1711
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
Trang 1812
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
Trang 1913
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
Trang 2115
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
Trang 2216
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
Trang 2317
Hình 3.3: Sơ đồ usecase mentee
Trang 2418
Hình 3.4: Sơ đồ usecase mentor
Trang 2519
Hình 3.5: Sơ đồ usecase admin
Trang 262 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