Tài liệu Ứ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 1 Đề tài: ỨNG DỤNG MUA BÁN ĐỒ NỘI THẤT GVHD: Mai Trọng Khang Nhóm sinh viên thực hiện 1. Phạm Hớn Tuyền MSSV: 19521092 2. 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 1 Đề tài: ỨNG DỤNG MUA BÁN ĐỒ NỘI THẤT GVHD: Mai Trọng Khang Nhóm sinh viên thực hiện 1. Phạm Hớn Tuyền MSSV: 19521092 2. 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 1 (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 bộ 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: 1. Về cuốn 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 về hình thức cuốn báo cáo: • 2. Về nội dung nghiên cứu: • • 3. Về chương trình ứng dụng: • 4. Về thái độ làm việc của sinh viên: • Đánh giá chung: Điểm từng sinh viên: PHẠM HỚN TUYỀN ................... ……./10 PHẠM GIA BẢO .................................. ./10 Người nhận xét (Ký và ghi rõ họ tên) MAI TRỌNG KHANG LỜI CẢM ƠN Để hoàn thành dự án cho môn Đồ án 1 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ư duy và cách làm việc khoa học. Đó là những góp ý hết sức quý báu không chỉ trong quá trình thực hiện đồ án môn học này mà còn là hành trang tiếp bước cho chúng em trong quá trình học tập và thực hiện khóa luận tốt nghiệp sau này. Trong quá trình làm đồ án này chúng em không tránh khỏi được những sai sót, chúng em kính mong nhận được sự chỉ dẫn và góp ý của thầy để đồ án được hoàn thiện hơn. Chúng em xin chân thành cảm ơn. Xin chúc những điều tốt đẹp nhất sẽ luôn đồng hành cùng 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 bộ 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: 1. Phạm Hớn Tuyền – 19521092 2. 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 quả mong đợi của đề tài) Mục tiêu Nghiên cứu về các công nghệ lập trình website bằng ngôn ngữ JavaScript, xây dựng Frontend bằng ReactJS, xây dựng Backend bằng ngôn ngữ JavaScript sử dụng NodeJS và Express framework, hệ quản trị cơ sở dữ liệu…., các nghiệp vụ hay bước xử lý các bài toán đặc trưng của một ứng dụng bán hàng online cụ thể trong đồ án này là cung cấp dịch vụ mua bán trực tiếp, cũng như hiểu được cách xử lý dữ liệu để có thể giảm thiểu thời gian tải, gia tăng hiệu suất ứng dụng, giải quyết được sự đa dạng của 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” là một ứng dụng chạy trên trình duyệt web và có thể chạy trên mọi trình duyệt hiện nay. Ứng dụng gồm có 3 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 trên ứng dụng website và backend truy vấn dữ liệu viết bằng Javascript. • • • • • • • • • • • • • • • Ứng dụng đối với 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ả bằng ví Paypal Quản lý thông tin cá nhân Quản lý địa chỉ Quản lý đơn hàng Hủy đơn hàng Xem chi tiết từng đơn hàng ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Ứng dụng đối với 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 các quy trình nghiệp vụ mua bán hàng hiện có. Tìm hiểu nghiệp vụ, quy trình hoạt động của shop mua sắm đồ nội thất. Phác họa hệ thống tổng quát (thiết kế dữ liệu, xử lý dữ liệu…). Tham khảo các ứng dụng tương tự: Nhà xinh, Phố xinh, Shopee, Tiki, … Tham khảo ý kiến của giảng viên hướng dẫn để được định hướng đúng, đạt kết quả tốt nhất. Thiết kế giao diện, cơ sở dữ liệu đáp ứng được các yêu cầu cho ứng dụng. • • • • Kết quả mong đợi Đối với kết quả mong đợi chung: Xây dựng được cách xử lý các bài toán về tải dữ liệu tăng hiệu suất. Biết được các 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 trên các nền tảng trình duyệt (mobile và desktop). Giải quyết được bài toán về đa dạng hàng hóa. Đối với ứng dụng bên mua: • Với khách hàng là người dùng chưa đăng nhập, có thể xem sản phẩm, tìm kiếm sản phẩm và đăng ký tài khoản. • Với khách hàng là người mua và đã đăng nhập có thể thực hiện chức năng xem sản phẩm, quản lý giỏ hàng, quản lý địa chỉ 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 là các cửa hàng đã đăng nhập có thể quản lí, thực hiện CRUD sản phẩm, thực hiện cập nhật trạng thái giao hàng, hủy đơn hàng khi phát hiện bất thường, thực hiện 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 hiện cá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 và phân chia công việc các thành viên tham gia) Với thời gian thực hiện từ ngày 07/04/2022 đến ngày 23/06/2022, nhóm chia thành các công việc cụ thể như sau: STT Công việc Phân công Giai đoạn 1: Khảo sát tìm hiểu về các ứng dụng, bài toán cần giải quyết có liên quan 1 Khảo sát các ứng dụng như Nhà xinh, Phố xinh, Shopee, Tiki, … Cả hai 2 Tìm hiểu thêm về các hoạt động khác trong lĩnh vực thương mại điện tử: liên kết dữ liệu, kiến trúc phần mềm. Cả hai 3 Hình thanh các bài toán riêng cho đồ án Cả hai 4 Lập báo cáo khảo sát bao gồm, hình ảnh UI, luồng, các bào toán Cả hai Giai đoạn 2: Thiết kế giải quyết các bài toán, phân rã yêu cầu, hình thành các chức năng 5 Thảo luận cách giải quyết các bài toán. Cả Hai 6 Viết user-story Cả hai 7 Vẽ các use-case Cả hai Giai đoạn 3: Tìm hiểu về các công nghệ liên quan và sẽ được sử dụng. 8 Javascript, ReactJS, NodeJS, ExpressJS, Cả hai 9 Antd, MongoDB, Mongoose Cả hai 10 JSON, JWT, BCrypt, Postman, Heroku, Vercel Cả hai Giai đoạn 4: Mô tả chi tiết các bài toán, usecase, các hoạt động của đồ án, thiết kế kiến trúc, UI/UX, cơ sở dữ liệu, class 11 Viết đặc các use-case Cả hai 12 Vẽ Sequence Diagram, Activity Diagram Cả hai 13 Thiết kế sơ đồ dữ liệu Cả hai 14 Thiết kế UI/UX Cả hai 15 Thiết kế kiến trúc ứng dụng Cả hai Giai đoạn 5: Tiến hành triển khai xây dựng đồ án 16 Code phần UI/UX cho web bán hàng nội thất Phạm Hớn Tuyền 17 Code phần Model ở Backend (xây dựng model ở backend theo bảng thiết kế class diagram – MongoDB là CSDL NoSQL nên không có mô hình CSDL) Phạm Gia Bảo 20 Xây dựng các APIs kết hợp với kiểm thử Postman, sau đó kết nối với bên UI/UX web bằng Axios. Giai đoạn 6: Hoàn thành Cả hai Cả hai MỤC LỤC CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI .................................................................................................. 1 1.1. Giới thiệu đề tài ........................................................................................................................ 1 1.2. Khảo sát người dùng ................................................................................................................ 1 1.3. Giải pháp .................................................................................................................................. 5 1.4. Các chức năng chính ................................................................................................................ 6 1.5. Các yêu cầu phi chức năng....................................................................................................... 7 1.5.1. Tính khả dụng.................................................................................................................... 7 1.5.2. Độ tin cậy .......................................................................................................................... 7 1.5.3. Hiệu năng .......................................................................................................................... 7 1.6. Các công nghệ .......................................................................................................................... 7 1.7. Các công cụ phát triển .............................................................................................................. 7 1.8. Quản lý Projects ....................................................................................................................... 8 CHƯƠNG 2: CÔNG NGHỆ ............................................................................................................... 9 2.1. Công nghệ chính ...................................................................................................................... 9 2.1.1. MongoDB .......................................................................................................................... 9 2.1.2. Javascript ......................................................................................................................... 10 2.1.3. ReactJS ............................................................................................................................ 10 2.1.4. Nodejs .............................................................................................................................. 11 2.1.5. ExpressJS......................................................................................................................... 11 2.1.6. Ant Design....................................................................................................................... 12 2.2. Cấu trúc của ứng dụng Web ................................................................................................... 13 CHƯƠNG 3: CHI TIẾT CẤU TRÚC HỆ THỐNG ....................................................................... 15 3.1. Mô hình Usecase .................................................................................................................... 15 3.2. Danh sách các Actor .............................................................................................................. 15 3.3. Danh sách các Usecases ......................................................................................................... 16 3.4. Đặc tả Usecases ...................................................................................................................... 17 3.4.1. Đặc tả Use-case “Quản lý giỏ hàng” .................................................................................. 17 3.4.2. Đặc tả Use-case “Thêm sản phẩm vào giỏ hàng” ............................................................... 17 3.4.3. Đặc tả Use-case “Đặt hàng”................................................................................................ 18 3.4.4. Đặc tả Use-case “Quản lý sản phẩm” ................................................................................. 19 3.4.5. Đặc tả Use-case “Quản lý hóa đơn” ................................................................................... 19 3.4.6. Đặc tả Use-case “Cập nhật trạng thái hóa đơn”.................................................................. 20 3.4.7. Đặc tả Use-case “Tìm kiếm khách hàng” ........................................................................... 21 3.4.8. Đặc tả Use-case “Hiển thị thông tin chi tiết sản phẩm” ..................................................... 21 3.4.9. Đặc tả Use-case “Đăng nhập” ............................................................................................. 22 3.4.10. Đặc tả Use-case “Đăng kí” ............................................................................................... 23 3.4.11. Đặc tả Use-case “Thoát” ................................................................................................... 23 3.4.12. Đặc tả Use-case “Đổi password” ...................................................................................... 24 3.4.13. Đặc tả Use-case “Tìm kiếm sản phẩm” ............................................................................ 25 3.4.14. Đặc tả Use-case “Xem chi tiết hóa đơn” .......................................................................... 25 3.4.15 Đặc tả Use-case “Thay đổi thông tin cá nhân” .................................................................. 26 3.4.16. Đặc tả Use-case “Quản lý địa chỉ giao hàng” ................................................................... 27 3.5 Sơ đồ Activity Diagram ......................................................................................................... 28 3.5.1 UC1: Quản lý giỏ hàng.................................................................................................... 28 3.5.2 UC2: Thêm sản phẩm vào giỏ hàng ................................................................................ 29 3.5.3 UC3: Đặt hàng ................................................................................................................. 30 3.5.4 UC4: Quản lý sản phẩm .................................................................................................. 31 3.5.5 UC5: Quản lý hóa đơn..................................................................................................... 32 3.5.6 UC6: Hiển thị danh sách hóa đơn ................................................................................... 33 3.5.7 UC7: Tìm kiếm khách hàng ............................................................................................ 34 3.5.8 UC8: Hiển thị thông tin chi tiết sản phẩm....................................................................... 35 3.5.9 UC9: Đăng nhập .............................................................................................................. 36 3.5.10 UC10: Đăng kí ................................................................................................................ 36 3.5.11 UC11: Thoát .................................................................................................................... 38 3.5.12 UC12: Đổi password ....................................................................................................... 39 3.5.13 UC13: Tìm kiếm sản phẩm ............................................................................................. 40 3.5.14 UC14: Xem chi tiết hóa đơn............................................................................................ 41 3.5.15 UC15: Thay đổi thông tin các nhân ................................................................................ 42 3.5.16 UC16: Quản lý địa chỉ giao hàng .................................................................................... 43 3.6 Sơ đồ Sequence Diagram ....................................................................................................... 44 3.6.1. UC1,2: Quản lý giỏ hàng .................................................................................................... 44 3.6.2. UC3: Quản lý giỏ hàng ....................................................................................................... 44 3.6.3. UC4: Quản lý sản phẩm ...................................................................................................... 45 3.6.4. UC5: Quản lý hóa đơn ........................................................................................................ 45 3.6.5. UC6: Cập nhật trạng thái hóa đơn ...................................................................................... 46 3.6.6. UC7: Tìm kiếm khách hàng ................................................................................................ 46 3.6.7. UC8: Hiển thị thông tin chi tiết sản phẩm .......................................................................... 47 3.6.8. UC9: Đăng nhập ................................................................................................................. 47 3.6.9. UC10: Đăng kí .................................................................................................................... 47 3.6.10. UC11: Thoát ..................................................................................................................... 48 3.6.11. UC12: Đổi mật khẩu ......................................................................................................... 48 3.6.12. UC13: Tìm kiếm sản phẩm ............................................................................................... 49 3.6.13. UC14: Xem chi tiết hóa đơn ............................................................................................. 49 3.6.14. UC15: Thay đổi thông tin các nhân .................................................................................. 50 3.6.15. UC16: Quản lý địa chỉ giao hàng...................................................................................... 50 3.7 Thiết kế database .................................................................................................................... 51 3.7.1 Sơ đồ Database .................................................................................................................... 51 3.7.2 Mô tả Database .................................................................................................................... 52 CHƯƠNG 4: GIAO DIỆN NGƯỜI DÙNG .................................................................................... 55 4.1. Giao diện người dùng .............................................................................................................. 55 4.2. Cài đặt chương trình ................................................................................................................ 65 CHƯƠNG 5: KẾT LUẬN ................................................................................................................. 67 5.1. Kết quả đạt được .................................................................................................................... 67 5.2. Khó khăn ................................................................................................................................ 67 5.3. Hướng phát triển .................................................................................................................... 68 CHƯƠNG 6: TÀI LIỆU THAM KHẢO ......................................................................................... 69 DANH MỤC TỪ VIẾT TẮT Từ viết tắt Từ đầy đủ Giải thích TMĐT Thương mại điện tử Hình thức mua sắm online CSDL (DB) Cơ sở dữ liệu (Database) Cơ sở dữ liệu cho ứng dụng API Aplication Programming Interface UI/ UX User Interface/ User Experience HTTP HyperText Transfer Protocol Giao diện lập trình ứng dụng Giao diện người dùng/Trải nghiệm người dùng Giao thức truyền siêu văn bản Định dạng trao đổi dữ liệu JSON JavaScript Object Notation HTML HyperText Markup Language Ngôn ngữ đánh dấu siêu văn bản CSS Cascading Style Sheets Tập tin định kiểu theo tầng JS JavaScript Ngôn ngữ lập trình theo ý niệm nguyên mẫu CRUD Create Read Update Delete Tạo, Đọc, Cập nhật, Xóa COD Cash on delivery Thanh toán khi nhận hàng TÓM TẮT KHÓA LUẬN Đồ án 1 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 về đề tài, khảo sát người dùng, các chức năng chính và các yêu cầu phi chức năng Chương 2: Trình bày các công nghệ chính sử dụng trong dự án Chương 3: Trình bày chi tiết cấu trúc hệ thống và thiết kế database Chương 4: Thiết kế Giao diện người dùng. Chương 5: Kết luận, những gì đạt được, khó khăn sau khi làm đồ án này, và hướng phát triển của đồ án. Chương 6: Tài liệu nghiên cứu được dùng trong quá trình thực hiện đồ án. CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1.1. Giới thiệu đề tài Ngày nay, với sự phát triển của ngành Công nghệ thông tin, các sản phẩm và ứng dụng truyền thống đã được chuyển sang các nền tảng trực tuyến. Việc đăng tin trên các nền tảng này sẽ giúp cửa hàng tiếp cận được nhiều khách hàng hơn, đồng thời có thể quản lý việc bán hàng, lưu kho, vận chuyển và thanh toán một cách chính xác và minh bạch. Khách hàng mục tiêu của nhóm chúng em là dịch vụ cửa hàng nội thất và cây cảnh. Trên thị trường, có rất nhiều mô hình ứng dụng thương mại điện tử nhưng chưa có dự án nào tập trung phát triển cho những cửa hàng nội thất như thế này. Đồng thời, các dự án chưa đáp ứng được về mặt hiệu suất, giao diện cũng như tính dễ sử dụng. Hiểu được nhu cầu về một hệ thống giải quyết vấn đề cho các cửa hàng nội thất vừa và nhỏ, nhóm cho ra đời sản phẩm Konsept với mục tiêu nhanh - dễ sử dụng - giao diện thân thiện. 1.2. Khảo sát người dùng Trong quá trình nghiên cứu các tính năng và phân tích các ứng dụng có sẵn trên thị trường, em đã thực hiện một số khảo sát tìm hiểu về nhu cầu người dùng về nội thất. Sau đây là một số thống kê rút ra từ báo cáo: 1 Đối với các câu hỏi về mức độ quan tâm về đồ nội thất thì ta có thể thấy đa số người khảo sát đều khá quan tâm và họ cũng thường xuyên ghé các website bán hàng nội thất. Và với các tiêu chí khi mua đồ nội thất thì thường tiêu chí màu sắc và chất liệu đạt được nhiều sự quan tâm nhất của những người khảo sát 2 Tuy vậy các website bán đồ nội thất lại không cung cấp đầy đủ các thông tin và hàng nội thất cho khách hàng. Vì vậy để làm hoàn thiện và phong phú hơn về các chức năng cũng như giao diện cho website thì nhóm chúng em đã thực hiện thêm các cuộc khảo sát về màu sắc, phân chia loại sản phẩm, vị trí điều hướng, độ đầy đủ thông tin và độ dễ hiểu. 3 4