Đồ án website dịch vụ chăm sóc thú cưng tại nhà

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN NGUYỄN THÁI HOÀNG - 20520360 WEBSITE DỊCH VỤ CHĂM SÓC THÚ CƯNG TẠI NHÀ Lớp: SE121.N21 GIẢNG VIÊN HƯỚNG DẪN Th.S TRẦN ANH DŨNG TP HỒ CHÍ MINH 07/2023 LỜI CẢM ƠN Trước tiên, em xin gửi lời cảm ơn chân thành đến Thầy Trần Anh Dũng người tận tâm hướng dẫn đồng hành em trình thực đồ án website chăm sóc thú cưng nhà Thầy dành nhiều thời gian tâm huyết để dẫn em, đưa gợi ý quý giá mang đến động viên khiến cho em hồn thành dự án cách thành công Sự hiểu biết sâu rộng kinh nghiệm dày dặn Thầy giúp em khám phá thấu hiểu khía cạnh quan trọng việc thiết kế xây dựng trang web chuyên chăm sóc thú cưng nhà Nhờ kiến thức mà Thầy chia sẻ, em có hội nắm vững nguyên tắc áp dụng chúng vào thực tế Đồ án không nhiệm vụ học tập mà cịn bước ngoặt quan trọng hành trình em trở thành nhà phát triển website chuyên nghiệp Em biết ơn tận tâm kiên nhẫn thầy việc giúp đỡ em vượt qua khó khăn thách thức q trình nghiên cứu thực dự án Em xin chân thành cảm ơn Thành phố Hồ Chí Minh, 01 tháng 07 năm 2023 Sinh viên Nguyễn Thái Hoàng MỤC LỤC LỜI CẢM ƠN .2 MỤC LỤC DANH MỤC HÌNH DANH MỤC BẢNG TÓM TẮT ĐỒ ÁN Chương MỞ ĐẦU, GIỚI THIỆU TỔNG QUAN ĐỀ TÀI .8 1.1 Lý chọn đề tài .8 1.2 Mục đích đề tài 1.3 Đối tượng, phạm vi nghiên cứu 1.3.1 Đối tượng 1.3.2 Phạm vi nghiên cứu Chương XÁC ĐỊNH VÀ PHÂN TÍCH YÊU CẦU 2.1 Khảo sát trạng 2.1.1 Khảo sát cấu tổ chức 2.1.2 Các quy trình, nghiệp vụ 10 2.2 Yêu cầu chức 10 2.3 Yêu cầu phi chức 11 Chương PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 12 3.1 Sơ đồ use-case .12 3.1.1 Sơ đồ use-case tổng quát 12 3.1.2 Danh sách use-case 12 3.2 Đặc tả use-case 14 3.2.1 UC01 - Đăng nhập 14 3.2.2 UC02 - Đăng ký 14 3.2.3 UC03 - Đăng xuất 15 3.2.4 UC04 - Xem giỏ hàng 16 3.2.5 UC05 - Sử dụng dịch vụ 17 3.2.6 UC06 - Tìm kiếm sản phẩm 17 3.2.7 UC07 - Quản lý tài khoản .18 3.2.8 UC08 - Thanh toán 19 3.2.9 UC9 - Quản lý dịch vụ 20 3.2.10 UC10 - Quản lý sản phẩm 20 3.3 Sơ đồ hoạt động sơ đồ 21 3.3.1 Một số sơ đồ hoạt động 21 3.3.2 Một số sơ đồ 25 3.4 Thiết kế sở liệu .30 3.4.1 Sơ đồ lớp 30 Chương CÀI ĐẶT VÀ TRIỂN KHAI 30 4.1 Cấu hình cài đặt 30 4.2 Môi trường phát triển triển khai hệ thống 30 4.2.1 Môi trường phát triển : 30 4.2.2 Môi trường triển khai 31 Chương THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 31 5.1 Danh sách hình 31 5.2 Mô tả chi tiết hình 32 5.2.1 Trang chủ 32 5.2.2 Đăng nhập 33 5.2.3 Đăng ký 34 5.2.4 Giới thiệu 35 5.2.5 Dịch vụ 36 5.2.6 Cửa hàng 37 5.2.7 Liên hệ 38 5.2.8 Online booking 39 5.2.9 Giỏ hàng 40 Chương TỔNG KẾT 40 6.1 Kết đạt - ưu điểm 40 6.2 Hạn chế 41 6.3 Hướng phát triển .41 6.4 Kết luận 41 TÀI LIỆU THAM KHẢO .42 DANH MỤC HÌNH DANH MỤC BẢNG TĨM TẮT ĐỒ ÁN Đồ án đặt nặng yếu tố tương tác người dùng, với mục tiêu tạo giao diện trực quan thân thiện Việc sử dụng ReactJS giúp tạo thành phần giao diện tái sử dụng, tạo linh hoạt dễ bảo trì cho trang web Ngồi ra, kỹ quản lý trạng thái xử lý kiện ReactJS áp dụng để cung cấp trải nghiệm tương tác mượt mà cho người dùng Phần back-end dự án xây dựng NodeJS, cho phép xử lý yêu cầu từ phía người dùng tương tác với sở liệu MongoDB Qua việc sử dụng NodeJS, xây dựng API linh hoạt, hỗ trợ phương thức HTTP GET, POST, PUT DELETE để thao tác với liệu Đồng thời, việc tích hợp MongoDB giúp lưu trữ thông tin người dùng, dịch vụ lịch hẹn cách hiệu đáng tin cậy Để tạo giao diện hợp thời trang tùy chỉnh, sử dụng Tailwind CSS Thư viện cung cấp lớp CSS tiền xử lý để tạo giao diện theo ý muốn, giúp tiết kiệm thời gian nỗ lực việc viết CSS từ đầu Qua trình thực dự án, áp dụng phát triển kỹ lập trình front-end back-end, tạo trang web tương tác, linh hoạt thẩm mỹ Phần cuối khố luận trình bày kết thực lên báo cáo, đưa kết luận hướng phát triển cho hệ thống tương lai Nội dung đồ án trình chương - Chương Mở đầu, giới thiệu tổng quan: trình bày sơ lược đề tài Nêu lý chọn đề tài, từ đặt mục tiêu hướng giải đề tài - Chương Xác định phân tích u cầu: Trình bày quy trình khảo sát trạng , tổng kết khảo sát, nêu yêu cầu chức năng, phi chức hướng xây dựng đề tài - Chương Phân tích thiết kế hệ thống: Trong chương này, thực phân tích mơ tả sơ đồ việc phân tích thiết kế hệ thống đặt lịch chăm sóc thú cưng nhà - Chương Cài đặt triển khai hệ thống: Tiến hành triển khai cài đặt hệ thống - Chương Thiết kế giao diện: Trình bày nội dung thiết kế giao diện website - Chương Tổng kết: Trình bày kết nghiên cứu đề tài, số hạn chế chưa giải hướng phát triển đề tài tương lai Chương MỞ ĐẦU, GIỚI THIỆU TỔNG QUAN ĐỀ TÀI 1.1 Lý chọn đề tài - Lựa chọn đề tài xuất phát từ nhận thấy gia tăng việc nuôi thú cưng xã hội đại Thú cưng trở thành thành viên quan trọng gia đình nhu cầu chăm sóc chúng ngày quan tâm Tuy nhiên, việc đưa thú cưng đến sở chăm sóc gặp khó khăn thời gian, giao tiếp khó khăn di chuyển Điều thúc đẩy lựa chọn đề tài việc phát triển website dịch vụ chăm sóc thú cưng nhà, nhằm giải vấn đề đáp ứng nhu cầu chủ thú cưng 1.2 Mục đích đề tài - Mục đích đề tài xây dựng trang web dịch vụ chăm sóc thú cưng nhà, tạo tảng trực tuyến người chủ thú cưng nhân viên chăm sóc Trang web cung cấp cho người dùng thông tin dịch vụ chăm sóc thú cưng, cho phép đặt lịch trực tuyến quản lý thông tin cá nhân Mục tiêu đem đến tiện lợi, linh hoạt chất lượng cho người chủ thú cưng, đồng thời tạo hội kinh doanh cho nhân viên chăm sóc thú cưng 1.3 Đối tượng, phạm vi nghiên cứu 1.3.1 Đối tượng - Đối tượng nghiên cứu người chủ thú cưng, bao gồm người có nhu cầu chăm sóc thú cưng muốn sử dụng dịch vụ chăm sóc nhà - Đối tượng phụ nhân viên chăm sóc thú cưng, người cung cấp dịch vụ chăm sóc nhà 1.3.2 Phạm vi nghiên cứu - Nền tảng hỗ trợ: triển khai website - Nghiên cứu tập trung vào việc thiết kế giao diện, tạo sở liệu, phát triển tính đặt lịch quản lý thơng tin Chương XÁC ĐỊNH VÀ PHÂN TÍCH YÊU CẦU 2.1 Khảo sát trạng 2.1.1 Khảo sát cấu tổ chức - Trước xây dựng website dịch vụ chăm sóc thú cưng nhà, tiến hành khảo sát cấu tổ chức lĩnh vực Dưới điểm khảo sát: - Các sở chăm sóc thú cưng: Tìm hiểu sở chăm sóc thú cưng có sẵn, bao gồm phòng khám thú y, spa, dịch vụ chăm sóc thú cưng nhà khác xác định mơ hình hoạt động dịch vụ mà sở cung cấp - Các nhân viên chăm sóc thú cưng: Khảo sát nhân viên chăm sóc thú cưng, bao gồm kiến thức chuyên môn, kỹ năng, kinh nghiệm thời gian làm việc Tìm hiểu quy trình tuyển dụng đào tạo nhân viên 2.1.2 Các quy trình, nghiệp vụ - Trong trình khảo sát, tìm hiểu quy trình nghiệp vụ liên quan đến dịch vụ chăm sóc thú cưng nhà Dưới số quy trình nghiệp vụ chính: - Đăng ký đặt lịch: Khảo sát quy trình đăng ký tài khoản đặt lịch trực tuyến Điều bao gồm việc thu thập thông tin cá nhân người dùng cung cấp thông tin loại dịch vụ, ngày, địa điểm mong muốn - Dịch vụ chăm sóc thú cưng: Tìm hiểu dịch vụ chăm sóc thú cưng phổ biến, bao gồm chăm sóc sức khỏe, tắm, cắt tỉa lông, điều trị bệnh, giao tiếp với thú cưng - Đánh giá đánh giá phản hồi: Khảo sát quy trình đánh giá đánh giá phản hồi từ khách hàng Điều giúp cải thiện chất lượng dịch vụ đáp ứng tốt đến nhu cầu khách hàng 2.2 Yêu cầu chức - Đăng ký đăng nhập: Cho phép người dùng tạo tài khoản đăng nhập vào hệ thống để truy cập chức - Quản lý thông tin cá nhân: Người dùng cập nhật quản lý thông tin cá nhân, bao gồm tên, địa chỉ, số điện thoại, email - Xem thông tin dịch vụ: Hiển thị danh sách dịch vụ chăm sóc thú cưng nhà, bao gồm mô tả, giá thông tin chi tiết - Đặt lịch trực tuyến: Cho phép người dùng đặt lịch hẹn trực tuyến cho dịch vụ chăm sóc thú cưng theo ngày, địa điểm mong muốn - Quản lý lịch hẹn: Người dùng xem, chỉnh sửa hủy lịch hẹn đặt trước 3.3.2.4 Quản lý dịch vụ 3.4 Thiết kế sở liệu 3.4.1 Sơ đồ lớp Chương CÀI ĐẶT VÀ TRIỂN KHAI 4.1 Cấu hình cài đặt - Phía client ● ReactJS: Xây dựng giao diện dùng để tương tác người dùng hệ thống - Phía server ● Mongodb: dùng để lưu liệu ● NodeJS: Thao tác với sở liệu để trả người dùng 4.2 Môi trường phát triển triển khai hệ thống 4.2.1 Môi trường phát triển - Hệ điều hành: window 11 : - Công cụ quản lý tiến độ: trello - Công cụ quản lý source: github - Công cụ quản lý sở liệu: mongodb - Cơng cụ lập trình: visual studio code 4.2.2 Môi trường triển khai - Hệ điều hành: window 11 - Cài đặt Mongodb Chương THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 5.1 Danh sách hình STT Tên hình Ý nghĩa Trang chủ Màn hình giới thiệu mở ứng dụng Đăng nhập Cho phép người dùng đăng nhập vào hệ thống Đăng ký Cho phép người dùng đăng ký tài khoản Giới thiệu Màn hình giới thiệu tổng quan website Dịch vụ Màn hình giới thiệu loại dịch vụ Cửa hàng Màn hình bán loại sản phẩm Liên hệ Màn hình gửi góp ý khách hàng Online booking Màn hình đặt lịch khách hàng Giỏ hàng Màn hình lịch sử giỏ hàng 5.2 Mô tả chi tiết hình 5.2.1 Trang chủ - Mơ tả: Màn hình hiển thị thông tin tổng quan dịch vụ chăm sóc thú cưng, viết nhất, tin tức thông tin quan trọng khác - Cách thực hiện: Trang chủ hình mặc định người dùng truy cập vào website Nó hiển thị thơng tin hình ảnh hấp dẫn để giới thiệu thu hút người dùng 5.2.2 Đăng nhập - Mơ tả: Màn hình cho phép người dùng đăng nhập vào tài khoản họ - Cách thực hiện: Người dùng nhập thông tin đăng nhập, bao gồm tên đăng nhập mật Sau đó, hệ thống kiểm tra thông tin đăng nhập chuyển hướng người dùng đến hình Trang chủ đăng nhập thành công 5.2.3 Đăng ký - Mô tả: Màn hình cho phép người dùng tạo tài khoản - Cách thực hiện: Người dùng điền thông tin cần thiết tên, địa chỉ, số điện thoại, email, tên đăng nhập mật Sau người dùng hồn thành đăng ký, thơng tin tài khoản lưu trữ sở liệu người dùng chuyển hướng đến hình Đăng nhập để đăng nhập vào tài khoản tạo 5.2.4 Giới thiệu - Mơ tả: Màn hình cung cấp thông tin chi tiết công ty, đội ngũ, lịch sử, mục tiêu giá trị cốt lõi dịch vụ chăm sóc thú cưng - Cách thực hiện: Trên hình này, bạn cung cấp trang văn mơ tả hình ảnh minh họa để giới thiệu công ty bạn giới thiệu thành viên quan trọng đội ngũ 5.2.5 Dịch vụ - Mơ tả: Màn hình liệt kê dịch vụ chăm sóc thú cưng mà bạn cung cấp, bao gồm mô tả, giá thông tin chi tiết dịch vụ - Cách thực hiện: Bạn hiển thị danh sách dịch vụ bảng danh sách, bao gồm tên dịch vụ, mô tả ngắn gọn, giá tương ứng Người dùng nhấp vào dịch vụ để xem thông tin chi tiết dịch vụ đó, bao gồm tính năng, quy trình, thời gian dự kiến hình ảnh minh họa 5.2.6 Cửa hàng - Mơ tả: Màn hình hiển thị sản phẩm, đồ dùng phụ kiện liên quan đến thú cưng mà người dùng mua - Cách thực hiện: Bạn hiển thị danh sách sản phẩm bảng danh sách, bao gồm tên sản phẩm, mơ tả, giá hình ảnh tương ứng Người dùng nhấp vào sản phẩm để xem chi tiết thêm sản phẩm vào giỏ hàng 5.2.7 Liên hệ - Mô tả: Màn hình cung cấp thơng tin liên hệ dịch vụ chăm sóc thú cưng, bao gồm địa chỉ, số điện thoại, email biểu mẫu liên hệ - Cách thực hiện: Bạn hiển thị thơng tin liên hệ hình cung cấp biểu mẫu liên hệ cho phép người dùng gửi yêu cầu câu hỏi trực tiếp tới dịch vụ chăm sóc thú cưng 5.2.8 Online booking - Mơ tả: Màn hình cho phép người dùng đặt lịch trực tuyến để sử dụng dịch vụ chăm sóc thú cưng - Cách thực hiện: Bạn cung cấp biểu mẫu đặt lịch cho phép người dùng chọn dịch vụ, ngày giờ, thú cưng cần chăm sóc yêu cầu khác Người dùng sau gửi yêu cầu đặt lịch hệ thống xác nhận gửi thông báo việc đặt lịch thành công 5.2.9 Giỏ hàng - Mơ tả: Màn hình hiển thị sản phẩm dịch vụ người dùng thêm vào giỏ hàng - Cách thực hiện: Bạn liệt kê mục giỏ hàng bao gồm tên, mơ tả, giá số lượng Người dùng xem lại thông tin sản phẩm giỏ hàng, cập nhật số lượng, xóa mục khơng cần thiết Người dùng tiếp tục mua sắm thêm sản phẩm vào giỏ hàng tiến hành toán Chương TỔNG KẾT 6.1 Kết đạt - ưu điểm - Giao diện: Xây dựng website có giao diện tương đối hồn thiện, có đủ thành phần website như: Header, logo, văn giới thiệu, home link, điều hướng, footer,… - Cơ sở liệu: Xây dựng sở liệu lưu thông tin khách hàng - Chức admin: Xây dựng quyền admin bao gồm thêm, xóa, sửa sản phẩm, quản lý lịch hẹn, - Chức khách: Xây dựng chức cho khách gửi form liên hệ cho công ty, đăng ký thành người dùng,… - Chức người dùng: Thực chức người dùng đăng nhập, mua sản phẩm, thêm vào giỏ hàng, đặt lịch, … 6.2 Hạn chế - Sao lưu: Chưa có chức lưu liệu gặp cố Giao diện: Chưa thật bắt mắt Cơ sở liệu: Thao tác sở liệu cịn thơ sơ Routing: Việc routing hiệu ứng chuyển trang chưa thực mượt mà Chức cịn thơ sơ 6.3 Hướng phát triển - Dự định nâng cấp chức năng, nâng cấp giao diện để phù hợp với yêu cầu thực tế thay đổi Áp dụng framework tốt để thao tác với sở liệu Thêm chức lưu liệu gặp cố Nâng cấp chức thao tác admin trang web Thêm chức bình luận Tích hợp phương thức tốn online Tích hợp chatbox Tối ưu trải nghiệm người dùng 6.4 Kết luận Nhờ tiếp cận với công nghệ mới, đại, Nhóm em xây dựng thành cơng trang web tương đối hoàn chỉnh nhằm phục vụ nhu cầu tiếp cận với dịch vụ chăm sóc thú cưng nhà website PetService trang web có nhiều ưu điểm giao diện lẫn chức Nhưng tồn song song với ưu điểm nhược điểm cần khắc phục Sau khắc phục nhược điểm ấy, Nhóm em tin tưởng website PetService phát triển mạnh mẽ tương lai TÀI LIỆU THAM KHẢO Các framework tiêu biểu sử dụng trình phát triển [1] expressJS: http://expressjs.com/ [2] reactJS: https://react.dev/ [3] tailwindCss: https://tailwindcss.com/ Các tài liệu tham khảo trình xây dựng dự án [4] stackoverflow: https://stackoverflow.com/ [5] mozzila: https://developer.mozilla.org/en-US/docs/Web/javascript [6] mongoose: https://github.com/Automattic/mongoose