Xây dựng website bán giày thể thao áp dụng công nghệ mern stack

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE BÁN GIÀY THỂ THAO ÁP DỤNG CÔNG NGHỆ MERN STACK GVHD: TS HUỲNH XUÂN PHỤNG SVTH: LÊ ĐỨC TÂN NGUYỄN VĂN TÂN SKL009445 Tp Hồ Chí Minh, năm 2022 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM ⸸⸸⸸⸸⸸ LÊ ĐỨC TÂN - 18110360 NGUYỄN VĂN TÂN - 18110361 Đề tài: XÂY DỰNG WEBSITE BÁN GIÀY THỂ THAO ÁP DỤNG CƠNG NGHỆ MERN STACK KHĨA LUẬN TỐT NGHIỆP GIẢNG VIÊN HƯỚNG DẪN TS HUỲNH XUÂN PHỤNG KHÓA 2018-2022 ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập – Tự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Lê Đức Tân MSSV 1: 18110360 Họ tên Sinh viên 2: Nguyễn Văn Tân MSSV 2: 18110361 Ngành: Công nghệ Thông tin Tên đề tài: XÂY DỰNG WEBSITE BÁN GIÀY THỂ THAO ÁP DỤNG CÔNG NGHỆ MERN STACK Họ tên Giáo viên hướng dẫn: TS Huỳnh Xuân Phụng NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: Ưu điểm: Khuyết điểm Đề nghị cho bảo vệ hay khơng? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày … tháng… năm 2022 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập – Tự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên 1: Lê Đức Tân MSSV 1: 18110360 Họ tên Sinh viên 2: Nguyễn Văn Tân MSSV 2: 18110361 Ngành: Công nghệ Thông tin Tên đề tài: XÂY DỰNG WEBSITE BÁN GIÀY THỂ THAO ÁP DỤNG CÔNG NGHỆ MERN STACK Họ tên Giáo viên phản biện: TS Lê Vĩnh Thịnh NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: Ưu điểm: Khuyết điểm Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày … tháng… năm 2022 Giáo viên phản biện (Ký & ghi rõ họ tên) LỜI CẢM ƠN Trong suốt trình nghiên cứu đề tài, giảng viên hỗ trợ, hướng dẫn sinh viên Với tất kính trọng, nhóm thực đề tài xin bày tỏ lòng biết ơn đến quý thầy cô theo dõi hướng dẫn suốt thời gian thực đề tài Đặc biệt, xin gửi lời cảm ơn chân thành đến thầy Huỳnh Xuân Phụng – giáo viên hướng dẫn Khóa luận tốt nghiệp – Khoa Công Nghệ Thông Tin – Đại học Sư phạm Kỹ thuật Tp Hồ Chí Minh, hướng dẫn, quan tâm, góp ý ln đồng hành nhóm giai đoạn khó khăn đề tài Với kinh nghiệm thực tiễn thiếu sót kinh nghiệm chun mơn cịn non yếu, báo cáo có thiếu sót hạn chế định Kính mong nhận phản hồi, đóng góp ý kiến bảo thêm quý thầy để nhóm đạt kiến thức hữu ích nhất, nâng cao ý thức để phục vụ cho kỹ sau Xin chân thành cảm ơn! MỤC LỤC DANH MỤC HÌNH ẢNH VI DANH MỤC BẢNG BIỂU XII DANH MỤC CÁC TỪ VIẾT TẮT XV CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI 1.1 Tính cấp thiết đề tài 1.2 Mục đích đề tài 1.3 Phương pháp nghiên cứu 1.4 Khảo sát trạng 1.4.1 Một số website bán giày thị trường 1.5 Các giả thiết ràng buộc rủi ro 1.6 Các chức xây dựng 1.6.1 Chức chung 1.6.2 Chức dành cho quản trị viên 1.6.3 Chức dành cho người dùng CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Tổng quan công nghệ MERN Stack 2.2 Giới thiệu Recommend FPT 2.3 Giới thiệu Amazon Web Service 10 2.4 Cách cài đặt thành phần MERN Stack 10 2.4.1 Cài đặt Mongodb 10 2.4.2 Cài đặt NodeJs 11 2.4.3 Cài đặt Express 15 2.4.4 Cài đặt ReactJs 16 I 2.5 Cách xây dựng triển khai dự án MERN Stack 16 CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 23 3.1 Mô tả yêu cầu 23 3.1.1 Tổng quan quy trình nghiệp vụ 23 3.2 Tổng quan 24 3.2.1 Sơ đồ tổng quan 24 3.2.2 Lược đồ usecase 25 3.2.3 Sơ đồ hoạt động hệ thống 26 3.2.4 Danh sách chức 26 3.3 Thiết kế sở liệu 30 3.3.1 Lược đồ class 30 3.3.2 Các thành phần sở liệu 30 3.3.3 Cách kết nối sở liệu 36 3.4 Đặc tả chức 42 3.4.1 Đăng nhập 42 3.4.2 Đăng nhập Google 45 3.4.3 Đăng ký 47 3.4.4 Quên mật 50 3.4.5 Thêm loại 53 3.4.6 Cập nhật loại 55 3.4.7 Xóa loại 59 3.4.8 Thêm thương hiệu 61 3.4.9 Cập nhật thương hiệu 64 3.4.10 Xóa thương hiệu 67 II 3.4.11 Thêm sản phẩm 70 3.4.12 Cập nhật sản phẩm 72 3.4.13 Xóa sản phẩm 75 3.4.14 Xóa người dùng 77 3.4.15 Quản lý đơn hàng 79 3.4.16 Cập nhật trạng thái đơn hàng 81 3.4.17 Xét giảm giá 84 3.4.18 Thống kê 86 3.4.19 Tìm kiếm, lọc sản phẩm 88 3.4.20 Xem chi tiết sản phẩm 91 3.4.21 Xem hướng dẫn chọn size 94 3.4.22 Thêm sản phẩm vào giỏ 96 3.4.23 Tăng/giảm số lượng sản phẩm giỏ 99 3.4.24 Xóa sản phẩm giỏ 99 3.4.25 Cập nhật thông tin cá nhân 104 3.4.26 Thay đổi mật 106 3.4.27 Thêm thông tin nhận hàng 109 3.4.28 Xóa thơng tin nhận hàng 111 3.4.29 Checkout đơn hàng 113 3.4.30 Thanh toán sau nhận hàng 116 3.4.31 Thanh tốn ví Momo 118 3.4.32 Đánh giá sản phẩm 121 3.4.33 Gợi ý sản phẩm liên quan 123 3.4.34 Gợi ý sản phẩm dựa theo hành vi người dùng 125 III 5.3.2 API đăng ký – phương thức POST Hình 171: API đăng ký Bảng 57: Bảng mô tả API đăng ký Route https://ec2-3-11235-74.ap- Method Post Request JSON - name: string - email: string northeast1.compute.amazon - password: string Response JSON - accessToken: Thông string tạo tài khoản - refreshToken: string aws.com/api/auth/s User: Object ignup 157 Mô tả báo thành công 5.3.3 API lấy tồn sản phẩm– phương thức POST Hình 172: API lấy tồn sản phẩm Bảng 58: Bảng mơ tả API lấy toàn sản phẩm Route https://ec2-3-112- Method Request JSON Post Response JSON products: Array Mô tả Hiển thị tất sản phẩm 35-74.apnortheast1.compute.amazon aws.com/api/produ ct/getProducts 158 5.3.4 API lấy sản phẩm theo Slug – phương thức GET Hình 173: API lấy sản phẩm theo slug Bảng 59: Bảng mô tả API lấy sản phẩm theo Slug Route https://ec2-3-112- Method Request JSON Get Mô tả Response JSON product: Object Hiển thị 35-74.ap- sản northeast- theo slug 1.compute.amazon aws.com/api/produ ct/”Slug” 159 phẩm 5.3.5 API lấy sản phẩm theo loại – phương thức GET Hình 174: API lấy sản phẩm theo loại Bảng 60: Bảng mô tả API lấy sản phẩm theo loại Route https://ec2-3-112- Method Request JSON Get Mô tả Response JSON products: Array Hiển thị danh 35-74.ap- sách sản northeast- phẩm 1.compute.amazon loại aws.com/api/produ ct/category/Giaybong-djaDQOjq6Wgn 160 theo 5.3.6 API thêm sản phẩm – phương thức POST Hình 175: API thêm sản phẩm Bảng 61: Bảng mô tả API thêm sản phẩm Route https://ec2-3-11235-74.ap- Method Post Request JSON - name: string, - price: number, aws.com/api/produ ct/add product: Object Mô tả Hiển thị thông tin sản phẩm northeast1.compute.amazon Response JSON - description: string, thêm công - category: string, - brand: string, - productPicture: Array 161 thành 5.3.7 API tìm kiếm sản phẩm theo từ khóa – Phương thức POST Hình 176: API tìm kiếm sản phẩm theo từ khóa Bảng 62: Bảng mơ tả API tìm kiếm sản phẩm theo từ khóa Route https://ec2-3-112- Method Post Request JSON - text: string Response JSON products: Array Mô tả Hiển thị danh 35-74.ap- sách northeast- phẩm 1.compute.amazon aws.com/api/produ ct/searchByProduc tName 162 sản 5.3.8 API thêm loại – phương thức POST Hình 177: API thêm loại Bảng 63: Bảng mô tả API thêm loại Route https://ec2-3-11235-74.ap- Method Post Request JSON - name: string - parentId: string Response JSON category: Object Mô tả Hiển thị danh mục sản phẩm thêm northeast1.compute.amazon - categoryImage: aws.com/api/categ Image ory/add 163 5.3.9 API lấy thông tin đơn hàng – phương thức POST Hình 178: API lấy thơng tin đơn hàng Bảng 64: Bảng mô tả API lấy thông tin đơn hàng Route Method https://ec2-3-112- Post Request JSON orderId: string Response JSON order: Object Mô tả Hiển thị 35-74.ap- thông tin đơn northeast- hàng 1.compute.amazo công naws.com/api/ord er/getOrder 164 thành 5.3.10 API gợi ý danh sách sản phẩm liên quan Hình 179: API gợi ý danh sách sản phẩm liên quan Bảng 65: Bảng mô tả API gợi ý danh sách sản phẩm liên quan Route Metho Request JSON Response JSON Mô tả d https://ec2-3-11235-74.ap-northeast1.compute.amazon aws.com/api/recom Post { order: Object “id”: String Hiển thị danh sách sản phẩm } quan /getRecommended ProductsById 165 liên CHƯƠNG 6: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 6.1 Kết luận Sau chặng đường lên ý tưởng đề tài, xây dựng hệ thống Nhóm em có sản phẩm chưa phải xuất sắc có cố gắng đóng góp thành viên Về hệ thống, ngồi tính cho hệ thống bán hàng online xác thực người dùng, giỏ hàng, tốn nhóm em có số tính bật xác thực Google, cửa sổ tư vấn hỏi đáp qua Facebook, đặt lại mật dùng mã OTP xác thực, toán trực tuyến ví Momo,gợi ý sản phẩm liên quan, sản phẩm dựa vào hành vi người dùng sử dụng AI cung cấp từ dịch vụ Recommend FPT …Bên cạnh hệ thống cịn số hạn chế, chẳng hạn chưa phát triển tính gợi ý sản phẩm, thiết kế bên phía quản trị viên chưa đẹp,… Về trách nhiệm, thành viên nhóm có phối hợp tốt để hồn thành hệ thống tiến độ Dù tất thành viên nhóm làm fulltime q trình thực khóa luận tốt nghiệp cố gắng để lên kế hoạch phân bổ thời gian dành cho đề tài Tuy nhiên, thời gian dành cho đề tài khơng nhiều, khơng thể tránh khỏi thiếu sót đề tài 6.2 Ưu/nhược điểm 6.2.1 Ưu điểm - Website viết ngôn ngữ tiên tiến sử dụng framework mạnh mẽ - Có tính bảo mật cao với JWT (JSON Web Token) - Sử dụng mơ hình microservices - Mạnh mẽ chạy hệ điều hành MacOS, window, Linux - Deploy dễ dàng, nhanh chóng tảng Amazon Web Service - Rollback dễ dàng hệ thống gặp cố ý muốn - Giao diện website đẹp, dễ sử dụng cho người dùng - Thanh tốn tiện lợi với nhiều cách thức: tiền mặt, ví điện tử 166 - Đăng nhập, đăng kí dễ dàng, bên cạnh đăng nhập bước qua tài khoản google - Gợi ý cho khách hàng sản phẩm liên quan, sản phẩm dựa vào tương tác khách hàng - Đa dạng sản phẩm, hướng dẫn chọn sản phẩm cụ thể 6.2.2 Nhược điểm - Thời gian xử lí tác vụ cịn chậm lí dịch vụ sở hạ tầng sử dụng Vercel, Cloudinary miễn phí nên giới hạn chức - Khi lâu không truy cập vào trang web vào trạng thái ngủ nên lần đầu truy cập tốn thời gian khoảng chừng 5s - Giao diện Admin khiêm tốn, chưa hoàn thiện mức cao - Chức thống kê chưa đầy đủ 6.3 So sánh với website tham khảo - Tại DoubleT người dùng nhắn tin trực tiếp ẩn danh tài khoản facebook thật với quản trị viên để hỏi đáp vấn đề thắc mắc vượt trội so với Neymarsport người dùng cần phải truy cập vào facebook bắt buộc phải có tài khoản 167 Hình 180: Giao diện phần chatbox website - Website DoubleT thiết kế theo dạng Single Page Application mang lại trải nghiệm tốt cho người dùng mượt mà so với trang web tham khảo thao tác phải tải lại trang - Tại DoubleT người dùng tốn ví điện tử Momo có lượng người sử dụng lớn Việt Nam - Giao diện đẹp mắt 6.4 Hướng phát triển Ở đề tài “Website bán giày thể thao” này, nhóm em có ý tưởng để mở rộng, cải thiện số phần giúp cho hệ thống hoạt động tốt : - Phát triển tính tích điểm, tạo mã giảm giá cho người dùng 168 - Phát triển trang quản lý với giao diện đẹp mắt - Đăng kí chứng https để trang web phổ biến rộng rãi - Phát triển liên kết với ngân hàng phổ biến để tiện cho việc toán khách hàng 169 TÀI LIỆU THAM KHẢO [1] https://viblo.asia/p/gioi-thieu-mern-stack-bWrZnv4vZxw [2] https://blog.epal.vn/huong-dan-tao-api-dang-nhap-bang-google [3] https://neymarsport.com/ [4] https://thanhhungfutsal.com/ [5] https://wiki.matbao.net/kb/huong-dan-tich-hop-facebook-chat-vao-website-ma-khongcan-dung-plugin/ [6] https://recom.fpt.vn/pages/documentation 170