Ứng dụng mua bán đồ nội thất

ĐẠ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 Đề tài: ỨNG DỤNG MUA BÁN ĐỒ NỘI THẤT GVHD: Mai Trọng Khang Nhóm sinh viên thực Phạm Hớn Tuyền MSSV: 19521092 Phạm Gia Bảo MSSV: 19521254  Tp Hồ Chí Minh, 06/2022  ĐẠ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 Đề tài: ỨNG DỤNG MUA BÁN ĐỒ NỘI THẤT GVHD: Mai Trọng Khang Nhóm sinh viên thực Phạm Hớn Tuyền MSSV: 19521092 Phạm Gia Bảo MSSV: 19521254  Tp Hồ Chí Minh, 06/2022  ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc Lập - Tự Do - Hạnh Phúc TP HCM, ngày tháng năm 2022 NHẬN XÉT ĐỒ ÁN (CỦA CÁN BỘ HƯỚNG DẪN) Tên khóa luận: Ứng dụng cung cấp dịch vụ mua bán hàng trực tuyến Nhóm sinh viên thực hiện: Cán hướng dẫn: PHẠM HỚN TUYỀN 19521092 PHẠM GIA BẢO 19521254 MAI TRỌNG KHANG Đánh giá Khóa luận: Về báo cáo: Số trang Số chương Số bảng số liệu Số hình vẽ Số tài liệu tham khảo Sản phẩm Một số nhận xét hình thức báo cáo: • Về nội dung nghiên cứu: • • Về chương trình ứng dụng: • Về thái độ làm việc sinh viên: • Đánh giá chung: Điểm sinh viên: PHẠM HỚN TUYỀN ……./10 PHẠM GIA BẢO ./10 Người nhận xét (Ký ghi rõ họ tên) MAI TRỌNG KHANG LỜI CẢM ƠN Để hồn thành dự án cho mơn Đồ án này, chúng em xin gửi lời cảm ơn chân thành đến: Giảng viên Mai Trọng Khang tận tình giúp đỡ, định hướng cách tư cách làm việc khoa học Đó góp ý q báu khơng q trình thực đồ án mơn học mà cịn hành trang tiếp bước cho chúng em trình học tập thực khóa luận tốt nghiệp sau Trong q trình làm đồ án chúng em khơng tránh khỏi sai sót, chúng em kính mong nhận dẫn góp ý thầy để đồ án hoàn thiện Chúng em xin chân thành cảm ơn Xin chúc điều tốt đẹp đồng hành thầy TP.HCM, ngày 02 tháng 06 năm 2022 Sinh viên PHẠM HỚN TUYỀN PHẠM GIA BẢO ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc Lập – Tự Do – Hạnh Phúc TP.HCM, ngày 02 tháng 06 năm 2022 ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: Ứng dụng cung cấp dịch vụ mua bán đồ nội thất online Cán hướng dẫn: Giảng viên Mai Trọng Khang Thời gian thực hiện: Từ ngày 07/04/2022 đến ngày 23/06/2022 Sinh viên thực hiện: Phạm Hớn Tuyền – 19521092 Phạm Gia Bảo – 19521254 Nội dung đề tài: (Mô tả chi tiết mục tiêu, phạm vi, đối tượng, phương pháp thực hiện, kết mong đợi đề tài) Mục tiêu Nghiên cứu cơng nghệ lập trình website ngôn ngữ JavaScript, xây dựng Frontend ReactJS, xây dựng Backend ngôn ngữ JavaScript sử dụng NodeJS Express framework, hệ quản trị sở liệu…., nghiệp vụ hay bước xử lý toán đặc trưng ứng dụng bán hàng online cụ thể đồ án cung cấp dịch vụ mua bán trực tiếp, hiểu cách xử lý liệu để giảm thiểu thời gian tải, gia tăng hiệu suất ứng dụng, giải đa dạng hàng hóa Nhiệm vụ Đề tài “Ứng dụng cung cấp dịch vụ mua bán đồ nội thất” ứng dụng chạy trình duyệt web chạy trình duyệt Ứng dụng gồm có phần: Ứng dụng xây dựng cho người bán, ứng dụng xây dựng cho người mua ứng dụng website backend truy vấn liệu viết Javascript • • • • • • • • • • • • • • • Ứng dụng người tiêu dùng: Đăng kí Đăng nhập Xem Sản phẩm Tìm kiếm sản phẩm Xem Chi tiết sản phẩm Lọc sản phẩm theo thể loại trang trí Thêm sản phẩm vào giỏ hang Quản lý giỏ hàng Đặt hàng Trả ví Paypal Quản lý thơng tin cá nhân Quản lý địa Quản lý đơn hàng Hủy đơn hàng Xem chi tiết đơn hàng ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Ứng dụng người bán hàng: Đăng nhập hệ thống Tìm kiếm sản phẩm Quản lý sản phẩm Quản lý kho Quản lý đơn đặt hàng Cập nhật trạng thái giao hàng Hủy đơn hàng Quản lý người dùng Báo cáo doanh thu • • • • • • Phương pháp thực hiện: Tìm hiểu quy trình nghiệp vụ mua bán hàng có Tìm hiểu nghiệp vụ, quy trình hoạt động shop mua sắm đồ nội thất Phác họa hệ thống tổng quát (thiết kế liệu, xử lý liệu…) Tham khảo ứng dụng tương tự: Nhà xinh, Phố xinh, Shopee, Tiki, … Tham khảo ý kiến giảng viên hướng dẫn để định hướng đúng, đạt kết tốt Thiết kế giao diện, sở liệu đáp ứng yêu cầu cho ứng dụng • • • • Kết mong đợi Đối với kết mong đợi chung: Xây dựng cách xử lý toán tải liệu tăng hiệu suất Biết kỹ thuật lập trình với JavaScript, ReactJS, SCSS, TailwindCSS, Axios, Redux, Antd, NodeJS, ExpressJS, MongoDB, Mongoose, JsonWebToken, Bcrypt Hoàn thành ứng dụng với giao diện trực quan, hoạt động tốt tảng trình duyệt (mobile desktop) Giải tốn đa dạng hàng hóa Đối với ứng dụng bên mua: • Với khách hàng người dùng chưa đăng nhập, xem sản phẩm, tìm kiếm sản phẩm đăng ký tài khoản • Với khách hàng người mua đăng nhập thực chức xem sản phẩm, quản lý giỏ hàng, quản lý địa giao hàng, tạo đơn hàng, xem tình trạng đơn hàng, hủy đơn hàng Đối với ứng dụng bên bán • Với khách hàng cửa hàng đăng nhập quản lí, thực CRUD sản phẩm, thực cập nhật trạng thái giao hàng, hủy đơn hàng phát bất thường, thực quản lý kho… Các tiêu chí khác • Tính thẩm mỹ: Ứng dụng có giao diện dễ nhìn, dễ dàng thực thao tác, không gây cảm giác khó chịu hay khó sử dụng cho người dùng Kế hoạch thực hiện: (Mô tả kế hoạch làm việc phân chia công việc thành viên tham gia) Với thời gian thực từ ngày 07/04/2022 đến ngày 23/06/2022, nhóm chia thành cơng việc cụ thể sau: STT Công việc Phân công Giai đoạn 1: Khảo sát tìm hiểu ứng dụng, tốn cần giải có liên quan Khảo sát ứng dụng Nhà xinh, Phố xinh, Shopee, Tiki, … Cả hai Tìm hiểu thêm hoạt động khác lĩnh vực thương mại điện tử: liên kết liệu, kiến trúc phần mềm Cả hai Hình toán riêng cho đồ án Cả hai Lập báo cáo khảo sát bao gồm, hình ảnh UI, luồng, bào toán Cả hai Giai đoạn 2: Thiết kế giải toán, phân rã yêu cầu, hình thành chức Thảo luận cách giải toán Cả Hai Viết user-story Cả hai Vẽ use-case Cả hai Giai đoạn 3: Tìm hiểu cơng nghệ liên quan sử dụng Javascript, ReactJS, NodeJS, ExpressJS, Cả hai Antd, MongoDB, Mongoose Cả hai 10 JSON, JWT, BCrypt, Postman, Heroku, Vercel Cả hai Giai đoạn 4: Mô tả chi tiết toán, usecase, hoạt động đồ án, thiết kế kiến trúc, UI/UX, sở liệu, class 11 Viết đặc use-case Cả hai 12 Vẽ Sequence Diagram, Activity Diagram Cả hai CHƯƠNG 4: GIAO DIỆN NGƯỜI DÙNG 4.1 Giao diện người dùng Về mặt giao diện, phần UX/UI đề tài phát triển xây dựng dựa theo chủ đề mẫu có sẵn Qodeinteractive, Konsept Tuy nhiên, nhóm em thu nhỏ lại để vừa kích cỡ với khối lượng đề tài Mỗi trang website có hỗ trợ responsive giúp cho website có SEO tốt Bên cạnh components sẵn có, nhóm chúng em cịn có thêm vài components tùy chỉnh: • • • • • Snackbar Slider Outlined Button Loading Button Form components Các hỉnh ảnh chụp website: Hình ảnh trang chủ 55 56 Hình ảnh trang sản phẩm 57 Hình ảnh trang chi tiết sản phẩm Hình ảnh trang đăng nhập/đăng ký 58 Hình ảnh trang chi tiết đơn hàng 59 Hình ảnh trang chi tiết giao hàng 60 Hình ảnh trang chi tiết cá nhân dành cho người dùng 61 62 63 Hình ảnh trang nhóm chúng em 64 4.2 Cài đặt chương trình Mơi trường phát triển/xây dựng Đầu tiên, ta cần phải cài đặt NodeJS để tải gói (package) Link tải NodeJS Với project yêu cầu phiên NodeJS tối thiểu 14.0 trở lên Bật loại terminal (với window mặc định command prompt) di chuyển đến thư mục project Ta sử dụng terminal IDE cung cấp Ví dụ terminal VS Code cung cấp Gõ lệnh “npm install” đợi project cài đặt packages cần thiết Sau việc cài đặt hoàn tất, gõ lệnh “npm run start” để bắt đầu chạy chương trình 65 66 CHƯƠNG 5: KẾT LUẬN 5.1 Kết đạt Về công nghệ ứng dụng Sau tìm hiểu, nghiên cứu phát triển ứng dụng web, nhóm chúng em đạt được: - Hiểu biết ngôn ngữ HTML, CSS Javascript - Hiểu biết sử dụng ReactJS để xây dựng phần Frontend Hiểu biết sử dụng NodeJS kết hợp ExpressJS để xây dựng phía Backend - Hiểu biết sử dụng MongoDB để xây dựng Database Hiểu biết sử dụng Postman để kiểm tra API - Sử dụng frameworks Ant Design, TailwindCSS, SCSS để tạo phần thiết kế cho UI Đáp ứng số yêu cầu bản: o o o o o o Đăng kí, đăng nhập Các thao tác việc xem mua sản phẩm trực tuyến Các thao tác việc gửi liệu qua lại Frontend Backend Quản lý sản phẩm thông tin liên quan đến sản phẩm Giao diện thân thiện, dễ sử dụng người dùng Hiểu biết cách triển khai server backend lên heroku Link github nhóm chúng em: https://github.com/FurnitureShop Về nghiệp vụ mua hàng trực tuyến Ngoài nhóm chúng em tìm hiểu nghiên cứu số quy trình nghiệp vụ việc mua bán hàng hóa trực tuyến - Hiểu biết quy trình nghiệp vụ bán hàng trực tuyến - Hiểu vấn đề thương mại điện tử - Giải tốn đa dạng hàng hóa - 5.2 Giải toán đặt hàng Khó khăn Tuy nhiên, nhóm chúng em cịn vài hạn chế mà khơng thể hồn tồn khắc phục đồ án lần cần phải cố gắng cho lần sau o Chưa tích hợp việc toán trực tuyến o Tối ưu code chưa hợp lý nên tốc độ trang web có độ trễ nhỏ việc tải liệu o Chưa có thơng báo nhỏ để thông báo hay gợi lưu ý dành cho người dùng 67 o Một số tính chưa thực hồn thiện o Một số tính khơng tương thích với trình duyệt cũ o Việc thiết kế responsive lỗi nhỏ vài điểm số thiết bị 5.3 Hướng phát triển Nhóm chúng em đưa sáng kiến hướng phát triển cho đồ án sản phẩm • Tiếp tục phát triển tính cịn chưa hồn thiện • Có thể tích hợp số cách tuyến trực tuyến Momo, Zalopay, hay đơn vị ngân hàng khác • Cung cấp thêm số lựa chọn đơn vị vận chuyển • Phát triển tính Coupon - mã thẻ giảm giá • Tối ưu hóa code để cải thiện tốc độ web tăng tốc trải nghiệm cho người dùng • Quản lý chi tiết nghiệp vụ nhập hàng, xuất hàng tồn kho sản phẩm (dành cho Admin) • Cải tiển số thuật toán việc xử lý backend để giảm thiểu thời gian phải cho việc truy xuất liệu • Cấu trúc lại nguồn code để dễ dàng bảo trì nâng cấp dành cho sau đồ án 68 CHƯƠNG 6: TÀI LIỆU THAM KHẢO Các thư viện dành cho việc xây dựng ứng dụng ReactJS • • • • ReactJS: https://reactjs.org/docs/introducing-jsx.html Redux: https://redux.js.org/ React Router: https://reactrouter.com/ React Hook Form: https://react-hook-form.com/ Các thư viện framework dành cho việc xây dựng UI • • • • https://tailwindcss.com/ https://sass-lang.com/ https://konsept.qodeinteractive.com/furniture-store/ https://ant.design/ MongoDB • https://docs.mongodb.com/manual/core/document/ • https://www.mongodb.com/products/compass NodeJS & ExpressJS • https://nodejs.org/en/download/ • https://expressjs.com/en/api.html Một số nguồn tham khảo khác • Stackoverflow: https://stackoverflow.com/ • Github: https://github.com/ 69 ... hiệu suất ứng dụng, giải đa dạng hàng hóa Nhiệm vụ Đề tài ? ?Ứng dụng cung cấp dịch vụ mua bán đồ nội thất? ?? ứng dụng chạy trình duyệt web chạy trình duyệt Ứng dụng gồm có phần: Ứng dụng xây dựng... website bán hàng nội thất Và với tiêu chí mua đồ nội thất thường tiêu chí màu sắc chất liệu đạt nhiều quan tâm người khảo sát Tuy website bán đồ nội thất lại không cung cấp đầy đủ thơng tin hàng nội. .. TẮT KHÓA LUẬN Đồ án với đề tài ? ?Ứng dụng mua bán đồ nội thất? ?? gồm 05 chương: Chương 1: Giới thiệu đề tài, khảo sát người dùng, chức yêu cầu phi chức Chương 2: Trình bày cơng nghệ sử dụng dự án Chương