đồ á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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.47 MB, 43 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN</b>

<b>KHOA CƠNG NGHỆ PHẦN MỀM </b>

<b>ĐỒ ÁN 1</b>

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

<b>CÔNG NGHỆ THÔNG TIN </b>

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

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

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

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>LỜI CẢM ƠN </b>

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 q 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 q thầy cơ để hoàn thiện và phát triển đồ án hơn.

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

<i>Hồ Chí Minh, tháng 12 năm 2023 </i>

Lê Trung Hiếu

<b> </b>

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

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

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>TĨM TẮT ĐỒ ÁN </b>

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:

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

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

<b>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 để </b>

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

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

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

<b>DANH MỤC BẢNG </b>

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

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

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.

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ọ

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

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

• Database: Postgres

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<b>CHƯƠNG 2. CƠ SỞ LÝ THUYẾT </b>

<b>2.1. Lý thuyết về phương pháp cố vấn </b>

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

<b>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ẽ </b>

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.

<b>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 </b>

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.

<b>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ẻ </b>

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.

<b>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 </b>

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ý.

<b>2.2. ReactJS </b>

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, ...

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

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

<b>• Khả năng tái sử dụng cao: ReactJS sử dụng mơ hình </b>

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.

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

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

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

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

<b>2.3. Typescript </b>

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

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

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 q trình phát triển và tăng tính rõ ràng của mã nguồn.

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

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 tồn bộ mã nguồn cùng một lúc.

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

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

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.

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

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.

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

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:

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

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 q trình quản lý trạng thái và tương tác với dữ liệu.

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

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.

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

độ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 q trình tích hợp và sử dụng trong dự án React.

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

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 ln được cập nhật.

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

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.

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

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

<b>2.5. Zustand </b>

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.

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

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

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

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.

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

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

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

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.

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

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

<b>2.6. NestJs </b>

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.

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

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

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

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.

<b>• Sử dụng TypeScript: NestJS được xây dựng hồn tồn bằng </b>

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.

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

để đá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.

<b>• Dependency Injection: NestJS hỗ trợ Dependency Injection (DI), </b>

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.

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

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 sốt cao và tối ưu hóa q trình xử lý.

<b>2.7. TypeORM </b>

Hình 2.5: TypeORM

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

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:

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

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

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

độ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.

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

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.

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

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.

<b>• Tương thích với NestJS </b>

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<b>2.8. Video call và chat sdk </b>

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.

<small>• </small> 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.

<small>• </small> 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.

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

<b>CHƯƠNG 3. XÂY DỰNG HỆ THỐNG </b>

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:

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

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

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

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

<b>Authentication: token-based authentication sử dụng JWT. Refresh token, </b>

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

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

<b>3.2. Phân tích hệ thống 3.2.1. Sơ đồ Usecase </b>

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

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

Hình 3.3: Sơ đồ usecase mentee

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

Hình 3.4: Sơ đồ usecase mentor

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

Hình 3.5: Sơ đồ usecase admin

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

<b>2 </b> 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

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

<b>4 </b> 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>3.2.2. Mô tả usecase </b>

<b>3.2.2.1. Đăng ký tài khoản </b>

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

</div>