Báo cáo Khóa luận: Xây dựng website cung cấp người giúp việc - ĐH SPKT

Tham khảo báo cáo khóa luận tốt nghiệp đề tài xây dựng website cung cấp người giúp việc. Nội dung chi tiết từ phân tích, thiết kế đến triển khai hệ thống.

• Tác giả: Huỳnh Nhật Lâm
• Người hướng dẫn: ThS. Nguyễn Minh Đạo
• Trường học: Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
• Chuyên ngành: Công Nghệ Phần Mềm
• Đề tài: Xây Dựng Website Cung Cấp Người Giúp Việc
• Loại tài liệu: Khóa Luận Tốt Nghiệp
• Năm xuất bản: 2016 - 2020
• Địa điểm: Thành Phố Hồ Chí Minh

Tóm tắt

I. Tổng Quan Về Website Cung Cấp Người Giúp Việc

Website cung cấp người giúp việc là một nền tảng kỹ thuật số hiện đại giúp kết nối khách hàng với những người lao động giúp việc chuyên nghiệp. Đây là đề án tốt nghiệp được phát triển bởi các sinh viên Trường Đại học Sư Phạm Kỹ Thuật TP. HCM nhằm giải quyết nhu cầu ngày càng tăng về dịch vụ giúp việc uy tín. Dự án sử dụng công nghệ Spring Boot cho backend và ReactJS cho frontend, mang lại trải nghiệm người dùng tối ưu. Ứng dụng website giúp việc cung cấp các chức năng quản lý toàn diện, từ đăng ký dịch vụ đến quản lý hồ sơ nhân viên. Nền tảng này tạo ra một thị trường lao động giúp việc hiệu quả, an toàn và minh bạch cho cả khách hàng lẫn người giúp việc.

1.1. Khái Niệm Và Ý Nghĩa Của Dự Án

Đồ án xây dựng website cung cấp người giúp việc là một hệ thống thông tin toàn diện, được thiết kế để tạo cầu nối giữa người tìm kiếm dịch vụ giúp việc và những nhân viên đăng ký làm việc. Dự án này giải quyết vấn đề khó khăn trong việc tìm kiếm và quản lý dịch vụ giúp việc chuyên nghiệp. Với sự hỗ trợ của công nghệ hiện đại, người dùng có thể dễ dàng tìm kiếm, so sánh và lựa chọn dịch vụ phù hợp với nhu cầu của mình.

1.2. Vai Trò Của Công Nghệ Trong Dự Án

Website cung cấp người giúp việc được xây dựng trên nền tảng công nghệ hiện đại bao gồm Spring Boot framework và ReactJS library. Những công nghệ này đảm bảo hiệu suất cao, bảo mật dữ liệu và trải nghiệm người dùng mượt mà. RESTful API được sử dụng để kết nối frontend và backend một cách hiệu quả, cho phép hệ thống xử lý hàng ngàn yêu cầu đồng thời mà không gặp vấn đề.

II. Các Chức Năng Chính Của Hệ Thống

Hệ thống website giúp việc được chia thành ba phân quyền chính: Admin, Khách hàng, và Người giúp việc. Mỗi nhóm người dùng có chức năng riêng biệt được tối ưu hóa cho nhu cầu cụ thể của họ. Các chức năng website cung cấp người giúp việc bao gồm: đăng ký tài khoản, đăng nhập, tìm kiếm dịch vụ, quản lý hồ sơ cá nhân, và tư vấn trực tuyến. Hệ thống này cung cấp một nền tảng toàn diện cho phép quản lý dễ dàng các yêu cầu dịch vụ. Tính năng tư vấn trực tuyến giúp khách hàng có thể liên hệ trực tiếp với người cung cấp dịch vụ giúp việc để trao đổi thông tin chi tiết.

2.1. Các Tính Năng Dành Cho Khách Hàng

Khách hàng trên nền tảng cung cấp người giúp việc có thể thực hiện nhiều hành động quan trọng như: tìm kiếm và lọc dịch vụ giúp việc theo các tiêu chí cụ thể, xem thông tin chi tiết về người giúp việc chuyên nghiệp, đánh giá và bình luận về dịch vụ đã sử dụng. Tính năng tư vấn trực tuyến cho phép họ liên lạc trực tiếp để hỏi đáp chi tiết. Quản lý đơn hàng và lịch sử giao dịch cũng được cung cấp để theo dõi các dịch vụ đã đặt.

2.2. Các Tính Năng Dành Cho Người Giúp Việc

Người giúp việc có thể tạo hồ sơ cá nhân chi tiết, hiển thị kỹ năng, kinh nghiệm, và giá cơ chế của mình. Họ có thể đăng ký dịch vụ trên nền tảng, quản lý các yêu cầu từ khách hàng, và cập nhật trạng thái công việc. Tính năng tư vấn trực tuyến cho phép họ trao đổi trực tiếp với khách hàng tiềm năng để thảo luận về nhu cầu cụ thể.

III. Công Nghệ Và Stack Phát Triển

Đồ án website cung cấp người giúp việc được phát triển sử dụng stack công nghệ hiện đại và mạnh mẽ. Spring Boot là framework chính được sử dụng cho phát triển backend, cung cấp RESTful API cho giao tiếp với frontend. ReactJS là thư viện JavaScript được lựa chọn để xây dựng giao diện người dùng interactive và responsive. Bootstrap UI (v4) được sử dụng để tạo thiết kế giao diện đẹp và tương thích với nhiều thiết bị. Database được thiết kế và tối ưu hóa để lưu trữ thông tin người giúp việc, khách hàng, và các giao dịch dịch vụ một cách an toàn.

3.1. Spring Boot Framework Và Backend Development

Spring Boot framework là nền tảng chính để phát triển backend của website cung cấp người giúp việc. Framework này cung cấp các tính năng mạnh mẽ như xây dựng RESTful API, quản lý database, xác thực người dùng, và xử lý logic nghiệp vụ. Spring Boot giúp giảm độ phức tạp trong cấu hình, cho phép phát triển nhanh và dễ dàng bảo trì.

3.2. ReactJS Và Frontend Development

ReactJS library được sử dụng để xây dựng giao diện người dùng động với các thành phần như JSX, State, Lifecycle, Handling Events, và React Router DOM. Các thư viện này giúp tạo trải nghiệm người dùng mượt mà và hiệu suất cao. Bootstrap UI (v4) kết hợp với ReactJS tạo ra một thiết kế web responsive hoàn toàn, tương thích trên các thiết bị từ điện thoại đến desktop.

IV. Lợi Ích Và Ứng Dụng Thực Tiễn

Dự án website cung cấp người giúp việc mang lại nhiều lợi ích thiết thực cho cả khách hàng lẫn người cung cấp dịch vụ giúp việc. Khách hàng có thể tiết kiệm thời gian tìm kiếm bằng cách sử dụng nền tảng kỹ thuật số hiệu quả, trong khi người giúp việc có cơ hội mở rộng cơ hội kiếm sống. Hệ thống quản lý website cho phép Admin kiểm soát chất lượng dịch vụ, xác minh thông tin nhân viên giúp việc, và bảo vệ quyền lợi cả hai bên. Ứng dụng này tạo một thị trường lao động minh bạch và an toàn, giúp giảm chi phí trung gian cho khách hàng.

4.1. Lợi Ích Cho Khách Hàng

Khách hàng sử dụng website cung cấp người giúp việc nhận được nhiều lợi ích: truy cập vào kho dữ liệu lớn của người giúp việc chuyên nghiệp, so sánh dễ dàng giữa các lựa chọn, tiết kiệm chi phí bằng cách loại bỏ các trung gian không cần thiết, và bảo vệ quyền lợi thông qua hệ thống đánh giá và phản hồi minh bạch.

4.2. Lợi Ích Cho Người Giúp Việc Và Xã Hội

Người giúp việc có cơ hội tiếp cận khách hàng trực tiếp mà không cần trung gian, giúp tăng thu nhập và phát triển kinh doanh cá nhân. Xã hội hưởng lợi từ một thị trường lao động chính thức hóa, an toàn, và đáng tin cậy, giúp tạo việc làm và nâng cao chất lượng dịch vụ giúp việc.

Trích đoạn nội dung tài liệu

PHẦN MỞ ĐẦU 1.1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI Cuộc sống càng ngày càng phát triển kéo theo đó là sự bộn bề lo toan trong cuộc sống. Con người cuốn theo bởi bốn chữ cơm - áo - gạo - tiền, đối với những gia đình có ít thành viên thì gặp khó khăn trong việc phân chia công việc cho từng thành viên vì ai cũng phải đi làm. Còn đối với gia đình có nhiều thế hệ như ông bà, ba mẹ già yếu hay con còn thơ nhỏ, ta cũng không thể ở nhà hàng giờ, hàng ngày để chăm sóc một cách chu đáo nhất. Hoặc những người sống một mình, sức khỏe không cao, muốn có công ăn việc làm nhưng do sức khỏe kém chỉ giỏi trong việc nội trợ, việc nhà.

Nhận thấy hai vấn đề trên, một bên muốn có một công việc phụ giúp nhà cửa để kiếm thêm thu nhập, một bên muốn thư giãn sau những giờ làm việc căng thẳng trên công ty, cơ quan. Để giải quyết hai vấn đề trên thì cần có một bên trung gian giúp kết nối giữa người giúp việc và khách hàng. MỤC ĐÍCH CỦA ĐỀ TÀI Tìm hiểu SpringBoot, Bootstrap Framework và thư viện ReactJS về: cách thức hoạt động, cấu hình và tích hợp vào dự án. Từ đó xây dựng một server có độ bảo mật và tốc độ với SpringBoot, một giao diện đẹp có mức độ trải nghiệm người dùng cao với Bootstrap và một single page load với ReactJS.

Do gần đến ngày tết âm lịch, công việc của mỗi gia đình bận rộn, cho nên việc vệ sinh ngôi nhà của khách hàng đang rất cần thiết. Vì vậy nhóm em quyết định lập một trang “website cung cấp người giúp việc”. Với những mục đích như sau:  Công nghệ hóa đời sống bằng website – nơi mà con người dành phần lớn thời gian với chiếc điện thoại, máy tính bản, laptop …  Tạo ra một mô hình kinh doanh công nghệ 4.0 giúp người dùng dễ tiếp cận, dễ sử dụng.  Tìm hiểu về RESTful API Designing Với Spring Boot.

20  Tìm hiểu về cách xây dựng giao diện trang web với ReactJS  Nâng cao kỹ năng cập nhật công nghê, các bài toán về thời gian trong đời sống hằng ngày.  Tìm hiểu mô hình kinh doanh – doanh nghiệp ứng dụng công nghệ.  Nâng cao tinh thần làm việc nhóm, kỹ năng báo cáo và viết báo cáo. CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 1.

Đối tượng nghiên cứu Nghiên cứu và sử dụng HTML, CSS, Bootstrap UI để xây dựng giao diện cho trang web. Kết hợp với thư viện ReactJS để tạo ra một Single-page application được nhiều người ưa chuộng. Nghiên cứu và sử dụng SpringBoot để khởi tạo một RestfulAPI – Web Service nhanh, mạnh mẽ. Sử dụng hệ quản trị cơ sở dữ liệu MySQL để xây dựng database lưu trữ dữ liệu của website.

Phương pháp nghiên cứu Để phục vụ cho việc phát triển và hoàn chỉnh website ta cần phải tìm hiểu và áp dụng các mảng kiến thức sau vào đề tài:  Kỹ thuật phân tích thiết kế hệ thống thông tin.  Tài liệu về hệ quản trị cơ sở dữ liệu MySQL.  Có kiến thức về ngôn ngữ Javasript.  Các kiến thức để khởi tạo giao diện: HTML, CSS.

 Ứng dụng công nghệ mới của SpringBoot, ReactJS vào đề tài.  Mô hình ứng dụng tương tự MVC.  Tham khảo các nguồn tài liệu khác liên quan đến đề tài đang thực hiện. KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC Với website này người dùng và quản trị viên có thể:  Chi phí đào tạo sử dụng website thấp, rút ngắn thời gian làm quen với website.

 Các tính năng bên trang admin gồm có: phân quyền đăng nhập, thêm xóa sửa sắp xếp tăng dần, giảm dần theo tên, ngày tạo. Chức năng tìm kiếm, vẽ biểu đồ, thông báo có lượt đặt mới.  Các tính năng bên trang người dùng gồm có: chức năng đặt các dịch vụ, chat với tư vấn viên, đăng kí trở thành người giúp việc, hiển thị thông tin các dịch vụ. 22 PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.

TỔNG QUAN VỀ SPRINGBOOT 1. Khái niệm về Spring Boot Mặc dù Spring là một Framework tuyệt vời để phát triển phần mềm nhưng nó vẫn tồn tại một số nhược điểm / hạn chế (Quá nhiều cấu hình…). Spring Boot được xây dựng để khắc phục những nhược điểm đó, đồng thời cũng cung cấp một hướng phát triển phần mềm mới trong tương lai. Spring Boot là một module của Spring Framework, cung cấp tính năng RAD (Rapid Application Development) – Phát triển ứng dụng nhanh.

Spring Boot được dùng để tạo các ứng dụng độc lập dựa trên Spring. Spring Boot không yêu cầu cấu hình XML Nó là một chuẩn cho cấu hình thiết kế phần mềm, tăng cao năng suất cho developer. 1 Kiến trúc tổng thể của Spring Framework. Ưu điểm của Spring Boot  Có các tính năng của Spring Framework.

 Tạo ứng dụng độc lập, có thể chạy bằng java -jar (cho cả java web) 23  Nhúng trực tiếp các ứng dụng server (Tomcat, Jetty…) do đó không cần phải triển khai file WAR  Cấu hình ít, tự động cậu hình bất kì khi nào có thể (Giảm thời gian viết code, tăng năng suất)  Không yêu cầu XML config…  Cung cấp nhiều plugin  Chuẩn cho Microservices (Cloud support; giảm việc setup, config; các thư viện hỗ trợ…) 1. Các thành phần chính SpringApplication: SpringApplication là một class cung cấp cách thuận tiện để khởi chạy ứng dụng từ hàm main(). Externalized Configuration: Spring Boot cho phép chúng ta cấu hình từ bên ngoài (externalize), do đó một ứng dụng có thể chạy trên nhiều môi trường khác nhau. Chúng ta có thể sử dụng file YAML, file properties, các biến môi trường và tham số command-line để thực hiện externalize configuration.

Các thuộc tính cấu hình có thể inject trực tiếp vào bean bằng cách sử dụng annotation @Value hoặc thông qua object với @ConfigurationProperites… Profiles: Spring Boot Profiles cung cấp một cách để phân chia các cấu hình cho mỗi môi trường. Các annotation @Component hoặc@Configuration có thể được đánh dấu @Profile để giới hạn khi nào được tải lên. Logging: Spring Boot sử dụng common logging cho tất cả các chức năng log nội bộ. Các depencdeny logging được quản lý mặc định, chúng ta không nên / cần sửa dependency logging nếu khồng có yêu cầu tùy biến (customization) thực sự cần.

Working with SQL Databases: Spring Boot + Hibernate 1. TỔNG QUAN VỀ REACTJS FRAMEWORK 1. Khái niệm reactjs và lịch sử hình thành React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái(state) và có tính sử 24 dụng cao. React được sử dụng tại Facebook trong production, và www.com được viết hoàn toàn trên React.

Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau. React so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM Được phát hành lần đầu vào 29/05/2013 đến nay framework này đã trả qua nhiều phiên bản với các cột mốc điển hình là: v0. Các khái niệm khi sử dụng reactjs Virtual DOM: là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật. React sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều.

Dữ liệu được truyền từ parent đến child thông qua props. Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi. JSX: JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Đặc điểm: Faster: Nhanh hơn.

JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript. Safer: an toàn hơn. Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++.

Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch. Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt. Easier: Dễ dàng hơn. JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng.

Components: React được xây dựng xung quanh các component, chứ không dùng template như các framework khác. Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác. Mỗi component trong React có một trạng 25 thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái.

Mọi thứ React đều là component. Chúng giúp bảo trì mã code khi làm việc với các dự án lớn. Một react component đơn giản chỉ cần một method render. Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo.

Props và State: Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render. Prop là bất biến. State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI. LifeCycle của component: Hình 1.

2 Sơ đồ miêu tả vòng đời của một component (a) 26 Hình 1. 3 Sơ đồ miêu tả vòng đời của một component(b) 1. Ư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 lên 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 27 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.