Xây dựng hệ thống hỗ trợ tìm kiếm đội nhóm dự án
MỤC LỤC
GIỚI THIỆU TỔNG QUAN
Nhìn chung, đề tài có một cơ hội lớn để phát triển một giải pháp đáp ứng những thách thức và nhu cầu đang tồn tại trong môi trường làm việc và quản lý dự án ngày nay. Nhận thấy được nhu cầu đó và với những kiến thức được trang bị tại trường đại học Công Nghệ Thông Tin, ĐHQG thành phố Hồ Chí Minh với sự hướng dẫn của thầy Nguyễn Tấn Toàn, nhóm chúng em quyết định xây dựng “Hệ thống hỗ trợ tìm kiếm đội nhóm, dự án” nhằm đáp ứng những nhu cầu của người dùng và phục vụ cho đồ án môn học lần này tại trường. Thông qua đồ án lần này, nhóm chúng em mong rằng sẽ được học hỏi và trao dồi thêm được nhiều kinh nghiệm và kiến thức thực tế trong quá trình xây dựng một website thực tế, biết được thêm nhiều kiến thức mới về ngôn ngữ lập trình, công nghệ, cơ sở dữ liệu, quy trình triển khai một dự án website.
Chúng em hy vọng đề tài sẽ không chỉ giải quyết một vấn đề thực tế mà còn tạo ra một giải pháp linh hoạt và hiệu quả cho môi trường làm việc và quản lý dự án hiện đại. Đồng thời, nghiên cứu sâu hơn các công nghệ được sử dụng trong đề tài, qua đó làm hành trang phục vụ cho việc thực hiện các đồ án môn học khác và cho công việc trong tương lai sau này.
CƠ SỞ LÝ THUYẾT
- ReactJS .1 Giới thiệu
- Spring Boot .1 Giới thiệu
- Tailwind CSS .1 Giới thiệu
Nếu không sử dụng ReactJS (và JSX), website sẽ sử dụng HTML để cập nhật lại cây DOM cho chính bản nó (quá trình thay đổi diễn ra tự nhiên trên trang mà người dùng không cần phải tải lại trang), cách làm này sẽ ổn cho các website nhỏ, đơn giản, static website. Nhưng đối với các website lớn, đặc biệt là những website thiên về xử lý các tương tác của người dùng nhiều, điều này sẽ làm ảnh hưởng performance website cực kỳ nghiêm trọng bởi vì toàn bộ cây DOM phải reload lại mỗi lần người dùng nhấn vào tính năng yêu cầu phải tải lại trang). Virtual DOM (bản chất của nó theo đúng tên gọi) là bản copy của DOM thật trên trang đó, và ReactJS sử dụng bản copy đó để tìm kiếm đúng phần mà DOM thật cần cập nhật khi bất kỳ một sự kiện nào đó khiến thành phần trong nó thay đổi (chẳng hạn như user nhấn vào một nút bất kỳ). Tailwind CSS là một CSS framework theo phương hướng utility-first, nghĩa là các class trong framework này thuộc dạng “công cụ”, và ta cần kết hợp nhiều class khác nhau để đạt được thiết kế mong muốn.
Điều này mặc dù có phần đúng nhưng đối với bản thân em, sau khi đã hiểu cú pháp sử dụng CSS framework này thì việc đọ class HTML trở nên rất dễ đọc hơn là giấu hết mọi thứ trong một class duy nhất, ta có thể hình dung được giao diện sẽ nhìn như thế nào chỉ qua việc đọc các utility class. Các utility class trong Tailwind CSS đều có thể được áp dụng ở các breakpoint khác nhau bằng cách thêm ký hiệu break point trước utility class, điều này giúp ta xây dựng UI responsive 1 cách dễ dàng mà không cần phải động đến file CSS.
THIẾT KẾ KIẾN TRÚC
THIẾT KẾ HỆ THỐNG
Sơ đồ Use-case
1 Seeker Cho phép tìm kiếm thông tin về các Dự án, Vacancy, Tổ chức theo nhu cầu của bản thân và hỗ trợ ứng tuyển vào các Vacancy. Đồng thời quản lý thông tin về hồ sơ, resume cá nhân, các danh mục yêu thích và các Vacancy đã ứng tuyển. 2 Organizer Cho phép tạo, đăng tải và quản lý các Dự án, Vacancy đang mong muốn mọi người (Seeker) tham gia vào.
Đồng thời, quản lý thông tin hồ sơ cá nhân, danh mục yêu thích (Favourite Seeker) và tìm kiếm người ứng tuyển phù hợp (Applicants). Đồng thời quản lý, xử lý các báo cáo của Vacancy, quản lý cỏc lĩnh vực của Dự ỏn và theo dừi lịch sử thanh toỏn.
Danh sách chức năng
Đăng nhập vào hệ thống / Quên mật khẩu / Xác thực tài khoản / Đăng xuất khỏi tài khoản. Xem người ứng tuyển gần đây / Xem số lượng Dự án, Vacancy, số lượt xem profile/ Xem thông báo mới. Cập nhật Vacancy / Tra cứu Vacancy / Xóa Vacancy / Thanh toán nếu đã được duyệt / Xem chi tiết Vacancy / Quản lý Vacancy đang dang dở / Quản lý nhân sự Vacancy / Mời tham gia lại / Block thành viên / Xóa thành viên.
Từ chối ứng viên / Chấp nhậm ứng viên / Xem danh sách người ứng tuyển / Xem chi tiết ngừơi ứng tuyển. Xem chi tiết ngừơi ứng tuyển / Gửi mail giới thiệu về Dự án, Vacancy của tổ chức / Cập nhật người ứng tuyển yêu thích / Liên hệ với ứng viên. Xem chi tiết thông tin người ứng tuyển / Cập nhật người ứng tuyển yêu thích.
Thêm ngành nghề mới / Cập nhật ngành nghề / Tra cứu ngành nghề / Xóa ngành nghề. Xem Project, Vacancy, Tổ chức đăng ký gần đây / Doanh thu tháng / Xem thông báo giao dịch gần đây / Số lượng Dự án, Vacancy. Cập nhật trạng thái hoạt động của Tổ chức / Xem chi tiết Tổ chức / Tìm kiếm Tổ chức / Xem danh mục Dự án của Tổ chức.
Xét duyệt Dự án / Xem chi tiết Dự án / Tìm kiếm dự án / Cập nhật trạng thái của dự án / Xem danh mục Vacancy của dự án. Tìm kiếm vacancy / Xem chi tiết Vacancy / Xét duyệt vacancy / Cập nhật trạng thái block của vacancy. Tìm kiếm Vacancy bị báo cáo / Xem danh sách báo cáo của Vacancy / Cập nhật trạng thái block của vacancy.
THIẾT KẾ DỮ LIỆU
Danh sách các bảng
20 REPORT Thể hiện thông tin về các báo cáo của những người tìm kiếm đội nhóm về dự án.
THIẾT KẾ GIAO DIỆN
Danh sách các màn hình
6 Manage Vacancy Hiển thị danh sách, tìm kiếm, lọc và quản lý trạng thái (cấm, bỏ cấm, cho phép đăng, từ chối đăng) của Vacancy upload. 7 Vacancy Detail Hiển thị chi tiết thông tin của Vacancy và có thể thực hiện các thao tác quản lý (cấm, bỏ cấm, cho phép đăng, từ chối đăng) Vacancy. 8 Manage Report Hiển thị danh sách, tìm kiếm, lọc các báo cáo của các Vacancy và quản lý trạng thái ( cấm, bỏ cấm) của các Vacancy đã bị báo cáo 9 Occupations Hiển thị danh sách, tìm kiếm và quản lý (. thêm, cập nhật, xóa) các Occupation đã có trong hệ thống.
12 History Transactions Xem danh sách, tìm kiếm, lọc và xem chi tiết lịch sử giao dịch của các Organizer đã thanh toán để post project hay vacancy. 5 Organizer Detail Hiển thị chi tiết thông tin (Thông tin hồ sơ, thông tin project, vacancy) và có thể thực hiện các thao tác (mở gửi email, thêm/ bỏ yêu thích) Organizer hoặc đến các trang Project/ Vacancy Detail của Organizer. 6 Find Project Hiển thị danh sách, tìm kiếm, lọc, thêm/ bỏ yêu thích và xem chi tiết các Project trong hệ thống cũng như xem các Vacancy trong Project đó.
7 Project Detail Hiển thị chi tiết thông tin (Thông tin hồ sơ, thông tin các vacancy trong project) và có thể thực hiện các thao tác (mở gửi email, thêm/ bỏ yêu thích) Project hoặc bấm đến các trang Organizer, Vacancy Detail của Project đó. 9 Find Vacancy Hiển thị danh sách, tìm kiếm, lọc, thêm/ bỏ yêu thích, apply Vacancy và xem chi tiết các Vacancy đã upload trong hệ thống. 10 Vacancy Detail Hiển thị chi tiết thông tin Vacancy và có thể thực hiện các thao tác (apply Vacancy, thêm/ bỏ yêu thích) Vacancy hoặc bấm đến các trang Organizer Detail của Vacancy đó.
1 Dashboard Organizer Thống kê số lượng xem profile Organizer, thông báo, số lượng, số lượng Vacancy, Project đã post và danh sách seeker apply Vacancy gần đây. 5 Seeker Detail Hiển thị chi tiết thông tin profile, resume của Seeker và có thể thực hiện các thao tác (gửi lời mời xem qua Vacancy, Project, thêm/ bỏ yêu thích) Seeker. 7 Interviews Hiển thị danh sách, tìm kiếm, lọc và xem chi tiết, chấp nhận hoặc từ chối các Seeker đã apply trong các Vacancy của Organizer.
CÀI ĐẶT VÀ THỬ NGHIỆM 7.1 Môi trường triển khai và phát triển ứng dụng
Chúng em đánh giá mức độ hoàn thành của các chức năng đều tương đối tốt. - Ngoài ra, sau khi hoàn thiện đồ án này, nhóm đã nắm được quy trình của một website tìm kiếm đội nhóm, dự án ngoài thực tế. Nắm vững được các kiến thức đã học hơn từ đó giúp ích rất nhiều cho việc phát triển các công nghệ mới về sau này.
Hơn nữa, kỹ năng làm việc nhóm và sắp xếp thời gian cũng được cải thiện tương đối. - Sắp xếp thời gian vẫn chưa tối ưu, dẫn đến phải gấp rút chạy đồ án về sau. - Vì thời gian gấp rút nên màn hình giao diện hệ thống vẫn còn đơn giản.
- Các chức năng còn cơ bản và chưa hướng thực tế - Database còn đơn giản chưa chặt chẽ. - Và có thể còn nhiều lỗi sai không tên khác mà nhóm không thể nào tránh khỏi. Và ngược lại, tổ chức cũng có thể đánh giá ứng viên thông qua quá trình làm việc.
- Cải thiện trải nghiệm người dùng: Tối ưu hóa giao diện cũng như là cải thiện các trải nghiệm của người dùng. - Xây dựng hệ thống có thể đóng góp quỹ từ thiện cho các dự án cộng đồng. + Xác thực người dùng ( Đăng ký, Đăng nhập, Đổi mật khẩu, Xác thực tài khoản, Khôi phục mật khẩu).