Đồ án tìm hiểu về nodejs và xây dựng ứng website chia sẻ nhà ở

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN TÌM HIỂU VỀ NODEJS VÀ XÂY DỰNG ỨNG WEBSITE CHIA SẺ NHÀ Ở Giảng viên hướng dẫn: TH.S NGUYỄN CÔNG HOAN Sinh viên thực hiện: Đặng Thái Tài-20520923 Tp Hồ Chí Minh, Tháng năm 2021 ĐẠI LỜI CẢM ƠN Đầu tiên, nhóm thực đề tài “Xây dựng website nghe mua điện thoại online” xin gửi lời cảm ơn đến quý thầy cô giảng dạy chúng em trường Đại học Công nghệ thông tin – Đại học quốc gia thành phố Hồ Chí Minh kiến thức tảng vững để nhóm tự tìm hiểu hồn thiện đề tài cách tốt Đặc biệt, chúng em xin gửi lời cảm ơn tới cô Nguyễn Công Hoan tận tình hướng dẫn góp ý, đề xuất q báu dành cho nhóm trình thực đồ án Trong suốt thời gian qua, nhóm tự tìm hiểu cơng nghệ kết hợp với kiến thức tảng trình học tập, nghiên cứu vận dụng để thực đề tài Với quỹ thời gian có hạn kinh nghiệm xây dựng sản phẩm cịn thiếu, sản phẩm đồ án cuối mắc phải số sai sót chúng em mong nhận góp ý để bổ sung, cải tiến sản phẩm nâng cao kiến thức để xây dựng sản phẩm chu hồn thiện hơn, tích luỹ thêm cho kinh nghiệm quý giá để đáp ứng tốt cho công việc thực tế tương lai Một lần nữa, xin cảm ơn đồng hành chúng em suốt học kỳ I năm học Sinh viên thực Đặng Thái Tài NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN , ngày tháng……năm 2021 Người nhận xét (Ký tên ghi rõ họ tên) Mục lục LỜI CẢM ƠN NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN DANH MỤC VIẾT TẮT ĐỀ CƯƠNG CHI TIẾT Chương 1: GIỚI THIỆU ĐỀ TÀI .11 1.1Tên đề tài: 11 1.2 Mô tả đề tài: 11 1.3 Lý chọn đề tài: 12 1.4 Khảo sát trạng: 12 1.5 Công nghệ sử dụng: 13 1.5 Môi trường thiết kế: 13 1.6 Công cụ hỗ trợ: 13 Chương 2: CƠ SỞ LÝ THUYẾT 13 2.1 Tổng quan HandleBarJs: .13 2.1.1 Giới thiệu HandleBarJs: 13 2.1.2 Khái niệm HandleBarJs: 13 2.1.2.1 Biểu thức Handbars.js: 13 2.1.2.2 Biểu thức Handbars.js: 14 2.1.2.2 Hàm biên dịch Handbars.js: 14 2.1.3 Ưu điểm Handlebarjs: .14 2.2.1 NodeJS gì? 15 2.2.2 Cách NodeJS hoạt động: 15 2.2.3 Ưu điểm NodeJS: 15 2.3.1 ExpressJS gì? .16 2.3.2 Tính ExpressJS: 16 2.4 MongoDB: 17 2.4.1 MongoDB gì: 17 2.4.2 Một số câu lệnh bản: 17 2.4.3 Ưu điểm MongoDB: 17 Chương 3: 18 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 18 3.1 Sơ đồ Use-case: 18 3.1.1 Đăng nhập: 19 3.1.2 Đăng xuất: .20 3.1.3 Đăng ký thành viên: 21 3.1.5 Thay đổi thông tin nhân: 24 3.1.6 Quản lý thông tin cá nhân: .25 3.1.7 Tìm kiếm: 27 3.1.8 Xem thông sản phẩm: .28 Chương 4: 29 THIẾT KẾ GIAO DIỆN 29 4.1 Trang đăng nhập, đăng ký: 29 4.1.1 Mô tả: 29 4.2 Trang chủ: .30 4.2.1 Giao diện: 30 4.2.2 Mô tả: 31 4.3 Trang thông tin nhà ở: 32 4.3.1 Giao diện: 32 4.3.2 Mô tả: 32 4.4 Trang tìm kiếm: 32 4.4.1 Giao diện: 32 4.4.2 Mô tả: 32 4.5 Trang thông tin giỏ hàng: 33 4.5.1 Giao diện: 33 4.5.2 Mô tả: 33 4.6 Trang thông tin vận chuyển: 35 4.6.1 Giao diện: 35 4.6.2 Mô tả: 35 Chương 5: 35 KẾT LUẬN 35 5.1 Nhận xét: 35 5.1.1 Thuận lợi: 35 5.1.2 Khó khăn: 36 5.1.3 Ưu điểm đồ án: 36 5.1.4 Nhược điểm đồ án: 36 5.2 Hướng phát triển đồ án: 36 TÀI LIỆU THAM KHẢO 36 Mục Lục ảnh Hình Express js cung cấp chế định tuyến giúp trì trạng thái website Hình 2:Sơ đồ use-case tổng quát Hình 3: Sơ đồ use-case đăng nhập Hình 4:Sơ đồ use-case đăng xuất Hình 5: Sơ đồ use-case đăng ký thành viên Hình 6: Sơ đồ use-case mua sản phẩm Hình 7: Sơ đồ use-case thay đổi thông tin cá nhân Hình 8: Sơ đồ use-case quản lý giỏ hàng cá nhân Hình 9: Sơ đồ use-case tìm kiếm Hình 10: Sơ đồ use-case xem thông tin sản phẩm Hình 11:Giao diện đăng nhập Hình 12 : Giao diện nút trang đăng ký sau click Sign up Hình 13:Giao diện trang chủ Hình 14:Giao diện thông tin người dùng Hình 15:Giao diện thơng tin phịng Hình 16: Giao diện trang tìm kiếm Hình 17:Giao diện sau tìm kiếm Hình 18:Giao diện thơng tin chuyến Hình 19: Giao diện đặt phịng thành cơng Hình 20:Giao diện đặt phịng 16 18 19 20 21 22 24 25 27 28 29 30 30 31 32 32 33 33 34 35 DANH MỤC VIẾT TẮT STT Ký hiệu chữ viết tắt Chữ viết đầy đủ CSDL Cơ sở liệu API Application program interface DOM Document Object Model RDBMS Relational Database Management System ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: Nền tảng chia sẻ nhà với Nodejs Tên đề tài tiếng Anh: Building a Home Sharing Platform with Node.js Cán hướng dẫn: ThS Nguyễn Công Hoan Thời gian thực hiện: Từ ngày 05/03/2023 đến tháng 26/06/2023 Sinh viên thực hiện: Đặng Thái Tài Nội dung đề tài: Giới thiệu: Javascript ngơn ngữ lập trình sử dụng rộng rãi nay, dễ đọc hỗ trợ nơi Mà Expressjs lại hỗ trợ Javascript, bạn biết đến Javascript chắn việc lập trình Express.js vơ đơn giản Ngay người bắt đầu tham gia vào lĩnh vực phát triển web sử dụng Expressjs Javascript ngơn ngữ lập trình dễ học với người khơng có kiến thức ngơn ngữ lập trình khác Chính tính phổ biến, dễ học dễ sử dụng mà Express.js cho phép tài trẻ tham gia đạt nhiều thành công phát triển ứng dụng web Thơng qua đề tài này, nhóm xây dựng website bán hàng trực tuyến Website cung cấp tảng trực tuyến kết nối người có nhu cầu thuê chỗ (khách) với người chủ nhà có sẵn nhà, hộ phòng trống (đơn vị chủ sở hữu) Website cập nhật tất điện thoại mắt phù hợp nhu cầu sử dụng, mẫu mã nhằm đáp ứng nhu cầu người mua Hệ thống có chức hiển thị order, upload mặt hàng mới, gợi ý nhu cầu người dùng, chức tìm kiếm theo dạng text, … Về phía quản trị viên có chức như: quản lý mặt hàng, số lượng, thông tin đơn hàng, quản lý tài khoản người dùng, … Mục tiêu: - Kết nối người thuê người cho thuê: Tạo tảng kết nối người muốn thuê nhà người sẵn sàng cho thuê nhà - Cung cấp trải nghiệm người dùng tốt: Tạo trang web dễ sử dụng hiệu quả, giúp người dùng dễ dàng tìm kiếm đặt thuê nhà theo nhu cầu họ - Quản lý thông tin liên quan đến nhà cho thuê: Cung cấp giao diện quản lý cho người cho thuê để quản lý thông tin nhà, đặt giá thuê tương tác với người thuê - Tạo niềm tin đảm bảo an tồn: Đảm bảo tính bảo mật an toàn giao dịch cho người thuê người cho thuê - Tích hợp tính phụ trợ: Bao gồm tính tốn trực tuyến, đánh giá nhận xét, đồ hiển thị vị trí, dịch vụ khác hỗ trợ khách hàng hướng dẫn dành cho người sử dụng Phạm vi: • Phạm vi mơi trường: o Triển khai sản phẩm đề tài mơi trường web • Phạm vi chức năng: o Đăng ký đăng nhập: Người dùng đăng ký tài khoản đăng nhập vào trang web o Tìm kiếm xem thơng tin nhà cho th: Người dùng tìm kiếm xem thông tin chi tiết nhà cho th bao gồm hình ảnh, mơ tả, giá tiện nghi o Đặt quản lý đơn hàng: Người dùng đặt yêu cầu thuê nhà, xem quản lý lịch sử đặt hàng toán o Đăng tin nhà cho thuê: Người cho thuê đăng tin nhà bao gồm mơ tả, hình ảnh, giá tiện nghi kèm o Đánh giá nhận xét: Người thuê đánh giá viết nhận xét lần th nhà trước o Thanh tốn trực tuyến: Tích hợp cổng tốn trực tuyến để người dùng tốn tiền th nhờ hệ thống an toàn tin cậy o Gửi yêu cầu hỗ trợ: Người dùng gửi yêu cầu hỗ trợ liên hệ với nhóm quản lý để giải vấn đề liên quan đến thuê nhà o Quản lý thơng tin cá nhân: Người dùng quản lý thông tin cá nhân, thay đổi mật cài đặt tùy chọn cá nhân Đối tượng: - Người dùng khách - Người dùng có tài khoản - Quản trị viên (Admin) Kế hoạch thực hiện: Thời gian Nội dung 05/03/2023 – 16/04/2024 Tìm hiểu đề tài, đánh giá thị trường, xác định chức hệ thống 17/04/2023 – 30/04/2023 Tìm hiểu, nghiên cứu cơng nghệ 01/05/2023 – 17/05/2023 Phân tích thiết kế hệ thống website 18/05/2023 – 08/06/2023 Tìm hiểu quy trình thiết kế UX/UI thiết kế giao diện cho website 09/06/2023 – 05/07/2023 Cài đặt phần back-end, xử lý hệ thống 06/07/2023 – 08/07/2023 Kiểm thử hệ thống hoàn thiện báo cáo Tiền điều kiện Đã đăng nhập tài khoản website Hậu điều kiện Người dùng đặt phịng thành cơng Luồng kiện Hệ thống đưa sản phẩm vào giỏ hàng Kết thực Use-case Luồng kiện phụ Bảng 3.5: Đặc tả đề xuất điện thoại: Use – Case Nội Dung Tên Use – Case Đề xuất điện thoại  Mô tả Use-case đề xuất máy cho người dùng họ tìm kiếm điện thoại Actor Hệ thống Điều kiện kích hoạt Người dùng tìm điện thoại chọn hiển thị điện thoại đề xuất Tiền điều kiện Người dùng sử dụng tài khoản Website đăng nhập vào hệ thống chọn máy để mua Hậu điều kiện Hệ thống cung cấp cho người dùng loại điện thoại đề xuất Luồng kiện Hệ thống tìm đến điện thoại mà khách hàng cần mua Hệ thống hiển thị mẫu điện thoại đề xuất Luồng kiện phụ Bảng 3.6: Đặc tả hiển thị thông tin sản phẩm: Use – Case Nội Dung Tên Use – Case Hiển thị lời sản phẩm  Mô tả Use-case hiển thị sản phẩm người dùng họ chọn sản phẩm Actor Hệ thống Điều kiện kích hoạt Người dùng chọn vào sản phẩm chọn biểu tượng hiển thị thông tin sản phẩm Tiền điều kiện Người dùng sử dụng tài khoản Website đăng nhập vào hệ thống chọn máy để mua Hậu điều kiện Hệ thống cung cấp cho người dùng các loại máy đề xuât Luồng kiện Luồng kiện phụ Hệ thống tìm kiếm thơng tin sản phẩm Hệ thống hiển thị thông tin sản phẩm Khơng tìm thấy thơng tin sản phẩm: Hệ thống hiển thị khơng tìm thấy thơng tin sản phẩm 3.1.5 Thay đổi thông tin nhân: Hình 7: Sơ đồ use-case thay đổi thông tin cá nhân Bảng 3.7: Đặc tả thông tin cá nhân: Use – Case Nội Dung Tên Use – Case Thay đổi thông tin cá nhân  Mô tả Use-Case cho phép người dùng thay đổi thơng tin Actor Thành viên Điều kiện kích hoạt Người dùng chọn Account Tiền điều kiện Đã đăng nhập tài khoản Website Hậu điều kiện Người dùng thay đổi thơng tin thành cơng Luồng kiện Hệ thống hiển thị trang thông tin cá nhân Người dùng chọn Chỉnh sửa hồ sơ Người dùng nhập thông tin chọn lưu Hệ thống lưu thông tin Kết thúc Use-case Luồng kiện phụ Thông tin không hợp lệ : Hệ thống hiển thị thông báo lỗi Quay lại bước Luồng kiện chính.   Người dùng chọn Hủy : Hệ thống trở lại trang Thông tin cá nhân 3.1.6 Quản lý thông tin cá nhân: Hình 8: Sơ đồ use-case quản lý giỏ hàng cá nhân Bảng 3.8: Đặc tả thêm sản phẩm : Use – Case Tên Use – Case Nội Dung Thêm sản phẩm  Mô tả Use-Case cho phép người dùng thêm sản phẩm Actor Thành viên Điều kiện kích hoạt Người dùng chọn Add Tiền điều kiện Đã đăng nhập tài khoản Website Hậu điều kiện Người dùng thêm sản phẩm thành công Luồng kiện Luồng kiện phụ Hệ thống hiển thị sản phẩm Người dùng chọn sản phẩm lưu Kết thúc Use-case Không nhập tên : Hệ thống hiển thị thông báo lỗi Quay lại bước Luồng kiện Bảng 3.9: Đặc tả xoá sản phẩm: Use – Case Nội Dung Tên Use – Case Xố sản phẩm  Mơ tả Use-Case cho phép người dùng xóa sản phẩm có Actor Thành viên Điều kiện kích hoạt Người dùng chọn Delete Tiền điều kiện Đã đăng nhập tài khoản website Hậu điều kiện Người dùng xố sản phẩm thành cơng Luồng kiện Luồng kiện phụ Hệ thống hiển thị thơng báo xác nhận xóa Người dùng chọn có Hệ thống xóa sản phẩm Kết thúc Use-case Người dùng chọn hủy : Hệ thống trở lại trang giỏ hàng 3.1.7 Tìm kiếm: Hình 9: Sơ đồ use-case tìm kiếm Bảng 3.10: Đặc tả tìm kiếm: Use – Case Nội Dung Tên Use – Case Tìm kiếm  Mơ tả Use-Case cho phép người dùng tìm kiếm máy, nhà sản xuất, … Actor Tất Điều kiện kích hoạt Người dùng chọn Search Tiền điều kiện Khơng Hậu điều kiện Luồng kiện Luồng kiện phụ Không Hệ thống hiển thị trang tìm kiếm Người dùng nhập từ khóa Hệ thống hiển thị kết tìm kiếm Kết thúc Use-case Người dùng xóa tồn từ khóa: Hệ thống hiển thị danh sách thể loại Quay lại bước Luồng kiện chính.   Người dùng chọn thể loại: Hệ thống hiển thị sản phẩm liên quan đến thể loại 3.1.8 Xem thông sản phẩm: Hình 10: Sơ đồ use-case xem thông tin sản phẩm Bảng 3.11: Đặc tả xem thông tin đơn hàng: Use – Case Nội Dung Tên Use – Case Xem thông tin đơn hàng  Mô tả Use-Case cho phép người dùng xem thông tin đơn hàng Actor Tất Điều kiện kích hoạt Người dùng chọn đơn gàng Tiền điều kiện Khơng Hậu điều kiện Khơng Luồng kiện Hệ thống hiển thị trang thông tin đơn hàng Kết thúc Use-case Luồng kiện phụ Chương 4: THIẾT KẾ GIAO DIỆN 4.1 Trang đăng nhập, đăng ký: 4.1.1 Mô tả: Hình 11:Giao diện đăng nhập - Khi click vào nút Log in, dẫn vào trang đăng nhập Website - Khi click vào nút quên mật khẩu, dẫn vào trang nhập mail lấy lại mật sau xác nhận mật Hình 12 : Giao diện nút trang đăng ký sau click Sign up - Sau đăng nhập thành công, trang tự chuyển hướng trang chủ 4.2 Trang chủ: 4.2.1 Giao diện: Hình 13:Giao diện trang chủ 4.2.2 Mô tả: - Với người dùng khách, tính xem thơng tin khách hàng Hình 14:Giao diện thông tin người dùng 4.3 Trang thông tin nhà ở: 4.3.1 Giao diện: Hình 15:Giao diện thơng tin phịng 4.3.2 Mô tả: - Nhấn click vào sản phẩm, dẫn đến trang chi tiết sản phẩm - Trang cá nhân hiển thị tên sản phẩm, hình ảnh, giá thành thơng số 4.4 Trang tìm kiếm: 4.4.1 Giao diện: Hình 16: Giao diện trang tìm kiếm 4.4.2 Mơ tả: - Mặc định, website hiển thị sẵn đa dạng thể loại, chủ đề chẳng hạn như: top sản phẩm (những sản phẩm thuộc top), thể loại sản phẩm - Hình 17:Giao diện sau tìm kiếm - - Khi gõ vào tìm kiếm từ khố, cơng cụ tìm kiếm thể kết loại điện thoại liên quan tới từ khoá 4.5 Trang thơng tin giỏ hàng: 4.5.1 Giao diện: Hình 18:Giao diện thông tin chuyến 4.5.2 Mô tả: - Khi click vào giỏ hàng dẫn đến trang thơng tin đơn hàng - Trang có nhiệm vụ chính: • Kiểm tra số lượng sản phẩm đặt mua • Thanh đến thánh tốn sản phẩm • Nút Thanh Toán: click vào đổi sang trạng thái nhập thông tin khách hàng nhận đơn hàng trạng thái đơn hàng Hình 19: Giao diện đặt phịng thành cơng 4.6 Trang thơng tin vận chuyển: 4.6.1 Giao diện: Hình 20:Giao diện đặt phịng 4.6.2 Mơ tả: - Khi click “Tiếp tục” dẫn đến trang thông tin vận chuyển - Trang liệt kê danh sách thành phần mà người dùng order lần mua hàng Cuối tới chấp nhận toán Chương 5: KẾT LUẬN 5.1 Nhận xét: 5.1.1 Thuận lợi: - Các tài liệu, video, giảng công nghệ sử dụng đồ án chia sẻ internet, giúp việc tìm hiểu chủ động chi phí bỏ thấp - Vận dụng quy trình xây dựng sản phẩm từ mơn học trước áp dụng cho đồ án - Giảng viên hướng dẫn tận tình, ln hỗ trợ chia sẻ, góp ý q trình thực đồ án 5.1.2 Khó khăn: - Vì cơng nghệ sử dụng cho đồ án tiếp cận lần đầu nhóm nên việc Đánh giá: 5.1.3 Ưu điểm đồ án: - Hoàn thành chức phía người dùng dành cho website đặt phòng trực tuyến - Thiết kế giao diện đại, dễ sử dụng 5.1.4 Nhược điểm đồ án: - Một số tính xử lý khơng tốt vấn đề liệu từ API - Chưa xây dựng hệ thống quản trị đề từ đầu 5.2 Hướng phát triển đồ án: - Xây dựng hệ thống quản trị để quản lý đối tượng bổ sung nhiều tính hữu ích cho website - Thiết kế hồn thiện lại giao diện để phù hợp với loại thiết bị sử dụng - Phát triển thêm tính để website ngày phổ biến đến người dùng TÀI LIỆU THAM KHẢO [1] Trần Thị Hồng Yến (2021), Slide giảng môn Internet Công nghệ Web, Khoa Khoa Học Kỹ Thuật Thông Tin, Trường ĐH Công Nghệ Thông Tin [2] Phạm Thế Sơn (2021), Bài tập thực hành Internet Công nghệ Web, Khoa Khoa Học Kỹ Thuật Thông Tin, Trường ĐH Công Nghệ Thông Tin [3] Jon DuCkeTT (2011), HTML & CSS Design and Build Websites, John Wiley & Sons, Inc [4] Giới thiệu ReactJS - Phần I (Các khái niệm bản): https://viblo.asia/p/gioi-thieu vereactjs-phan-i-cac-khai-niem-co-ban-V3m5WzjblO7 [5] React gì? Và hoạt động nào? https://www.hostinger.vn/huong-dan/react lagi-va-no-hoat-dong-nhu-the-nao [6] NodeJS gì? Những điều nên biết NodeJS bạn cần biết năm 2022: https://niithanoi.edu.vn/nodejs-la-gi-tong-hop-day-du-ve-nodejs-ban-can-biet.html [7] NodeJS gì? Tổng quan kiến thức Node.JS: https://vietnix.vn/nodejs-la-gi/ [8] Expressjs gì? Tại nên sử dụng Expressjs lập trình? https://itnavi.com.vn/blog/expressjs-la-gi/?amp [9] MongoDB gì? Cơ sở liệu phi quan hệ: https://viblo.asia/p/mongodb-la-gi-co-so dulieu-phi-quan-he-bJzKmgoPl9N [10] Trang chủ React: https://reactjs.org/ [11] Trình quản lý thư viện NPM: https://www.npmjs.com [12] F8 – Học lập trình để làm: https://fullstack.edu.vn/