Chương 1, nhóm sẽ giới thiệu về đề tài “Xây dựng hệ thống hỗ trợ tìm kiếm đội nhóm, dự án”, các mục tiêu, đối tượng ứng dụng hướng tới. Cũng như là các công nghệ mà nhóm đã sử dụng.1 Lý do chọn đề tài Trong thời đại của sự hợp tác mạnh mẽ, việc tìm kiếm đội nhóm phù hợp trở thành một thách thức đối với nhiều người tìm kiếm hay tổ chức và doanh nghiệp. Dự án ngày càng trở nên phức tạp, đòi hỏi sự đa dạng trong đội nhóm với các kỹ năng và chuyên môn khác nhau. Tuy nhiên, quá trình tìm kiếm đội nhóm vẫn gặp khó khăn do sự phân tán của nguồn lực và thông tin.
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 .2 Mục tiêu của đề tài Mục tiêu của đề tài là xây dựng và phát triển một hệ thống tự động và hiệu quả, hỗ trợ quá trình tìm kiếm đội nhóm, dự án, thỏa mãn các yếu tố: - Xây dựng website hỗ trợ tìm kiếm đội nhóm, dự án. Đồng thời, cho phép các tổ chức tạo và đăng tải những dự án, vị trí nhằm thu hút người dùng đăng ký tham gia.
14 - Giao diện thân thiện, trực quan, dễ sử dụng tối ưu trải nghiệm người dùng. - Độ tin cậy, bảo mật cao. - Đưa ra báo cáo, thống kê, cập nhật dữ liệu nhanh chóng, chính xác. 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 1.3 Đối tượng Hệ thống được xây dựng hướng đến nhiều đối tượng người dùng tùy thuộc vào mục đích của người dùng, chủ yếu hướng đến hai loại người dùng chính, Dưới đây là mô tả chi tiết về đối tượng của đề tài: - Người tìm kiếm dự án, đội nhóm: Những người đang tìm kiếm dự án để tham gia, bao gồm freelancer, nhà phân tích, chuyên gia trong các lĩnh vực khác nhau. Họ sẽ sử dụng hệ thống để tìm kiếm và đăng ký tham gia vào các dự án phù hợp với kỹ năng và mong muốn của họ. - Các tổ chức muốn tìm kiếm thành viên: Những tổ chức muốn tìm kiếm thành viên tham gia vào các dự án, hoặc vị trí. Họ sẽ sử dụng hệ thống để tạo và đăng tải những dự án, vị trí họ đang cần với những kỹ năng phù hợp.4 Công nghệ sử dụng - Công cụ thiết kế UI: Figma - Công cụ vẽ sơ đồ: draw.io - Front-end: framework ReactJs với IDE là Visual Studio Code - CSS framework: Tailwind CSS - Back-end: framework Spring Boot với IDE là IntelliJ IDEA CE - Cơ sở dữ liệu: MongoDB - Công cụ quản lý source code: Git, Github 15 CHƯƠNG 2 CƠ SỞ LÝ THUYẾT Chương 2, nhóm sẽ giới thiệu về các công nghệ và cơ sở lý thuyết mà nhóm đã áp dụng trong dự án này.1 Giới thiệu ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website.
Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client nữa Nhìn chung, các tính năng và điểm mạnh của ReactJS thường đến từ việc tập trung vào các phần riêng lẻ. Do đó, khi làm việc với web thay vì toàn bộ ứng dụng của một trang web bằng ReactJS, các nhà phát triển tính năng có thể tách rời và chuyển đổi giao diện người dùng từ những cách phức tạp và biến nó thành những phần đơn giản hơn. Điều này có nghĩa là kết xuất dữ liệu không chỉ ở phía máy chủ. Thực hiện với các vị trí, nhưng bạn cũng có thể thực hiện tại vị trí khách hàng khi sử dụng ReactJS.2 JSX Trọng tâm chính của bất kỳ website cơ bản nào đó là những HTML documents.
Trình duyệt Web đọc những document này để hiển thị nội dung của website trên máy tính, tablet, điện thoại của bạn. Trong suốt quá trình đó, trình duyệt sẽ tạo ra một thứ gọi là Document Object Model (DOM) – một tree đại diện cho cấu trúc website được hiển thị như thế nào. Lập trình viên có thể thêm bất kỳ dynamic content nào vào những dự án của họ bằng cách sử dụng ngôn ngữ JavaScript để thay đổi cây DOM.1 DOM JSX (nói ngắn gọn là JavaScript extension) là một React extension giúp chúng ta dễ dàng thay đổi cây DOM bằng các HTML-style code đơn giản. Và kể từ lúc ReactJS browser hỗ trợ toàn bộ những trình duyệt Web hiện đại, bạn có thể tự tin sử dụng JSX trên bất kỳ trình duyệt nào mà bạn đang làm việc.3 Virtual DOM 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).2 Virtual DOM 17 Tuy nhiên, nếu sử dụng JSX thì bạn sẽ giúp cây DOM cập nhật cho chính DOM đó, ReactJS đã khởi tạo một thứ gọi là Virtual DOM (DOM ảo).4 Ưu – nhược điểm Ưu điểm: - Reactjs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi mà các component thực sự tồn tại trên đó. Điều này sẽ giúp cải thiện hiệu suất rất nhiều. Reactjs cũng tính toán những thay đổi nào cần cập nhật len DOM và chỉ thực hiện chúng. Điều này giúp Reactjs tránh những thao tác cần trên DOM mà nhiều chi phí.
- Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dung cú pháp đặc biệt là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và Javascript. Ta có thể them vào các đoạn HTML vào trong hàm render mà không cần phải nối chuỗi. Đây là đặc tính thú vị của Reactjs. Nó sẽ chuyển đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổi JSX.
- Nó có nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt ứng dụng mở rộng của Chrome dành cho Reactjs. Nó giúp bạn debug code dễ dàng hơn. Sau khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếp vào virtual DOM như thể bạn đang xem cây DOM thông thường. - Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tối ưu SEO và thời gian tải trang.
Nếu tất cả việc xây dựng và hiển thị trang đều thực hiện ở client, thì người dung sẽ phải chờ cho trang được khởi tạo và hiển thị lên. Điều này thực tế là chậm. Hoặc nếu giả sử người dung vô hiệu hóa Javascript thì sao? Reactjs là một thư viện component, nó có thể vừa render ở ngoài trình duyệt sử dụng DOM và cũng có thể render bằng các chuỗi HTML mà server trả về. 18 - Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diện vì virtual DOM được cài đặt hoàn toàn bằng JS.
- Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo trì và sửa lỗi. Nhược điểm: - Reactjs chỉ phục vụ cho tầng View. React chỉ là View Library nó không phải là một MVC framework như những framework khác. Đây chỉ là thư viện của Facebook giúp render ra phần view.
Vì thế React sẽ không có phần Model và Controller, mà phải kết hợp với các thư viện khác. React cũng sẽ không có 2- way binding hay là Ajax. - Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại. - React khá nặng nếu so với các framework khác React có kích thước tương tương với Angular (Khoảng 35kb so với 39kb của Angular).
Trong khi đó Angular là một framework hoàn chỉnh. - Khó tiếp cận cho người mới học Web.1 Giới thiệu Spring là một Java framework siêu to và khổng lồ, làm được đủ mọi thứ. Nó được chia thành nhiều module, mỗi module làm một chức năng, ví dụ Spring Core, Web, Data access, AOP,. Spring được xây dựng dựa trên 2 khái niệm nền tảng là Dependency injection và AOP (Aspect Oriented Programming).
Spring Boot là một dự án phát triển bởi JAV (ngôn ngữ java) trong hệ sinh thái Spring framework. Nó giúp cho các lập trình viên chúng ta đơn giản hóa quá trình lập trình một ứng dụng với Spring, chỉ tập trung vào việc phát triển business cho ứng dụng. Spring Boot nổi bật trong số các framework khác vì nó cung cấp cho các kỹ sư phần mềm cấu hình nhanh, xử lý hàng loạt, quy trình làm việc hiệu quả và 19 nhiều công cụ khác nhau, giúp phát triển các ứng dụng dựa trên Spring mạnh mẽ và có thể mở rộng.3 Spring Framework Runtime Spring khá mạnh mẽ nhưng việc cấu hình (config) dự án quá phức tạp. Do đó Spring boot ra đời.
Spring boot có nhiều thư viện có sẵn và cấu trúc code cũng thành chuẩn mực, nên không cần quá quan tâm phải viết code thế nào cho tốt nữa, thay vào đó sẽ tập trung vào logic hơn.2 Đặc tính cơ bản của spring boot Vì là một framework RAD nên Spring Boot mang trong nó nhiều đặc tính nổi trội phục vụ cho việc phát triển và cài đặt nhanh một ứng dụng chạy trên Java.