Xây dựng hệ thống thương mại điện tử sử dụng 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Ệ PHẦN MỀM XÂY DỰNG HỆ THỐNG THƯƠNG MẠI ĐIỆN TỬ SỬ DỤNG MERN STACK GVHD: THS NGUYỄN HỮU TRUNG SVTH: NGUYỄN THỊ BÍCH PHƯƠNG ĐẶNG VĂN NGHĨA SKL009165 Tp.Hồ Chí Minh, tháng 6/2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HCM KHOA CƠNG NGHỆ THƠNG TIN KHĨA LUẬN TỐT NGHIỆP XÂY DỰNG HỆ THỐNG THƯƠNG MẠI ĐIỆN TỬ SỬ DỤNG MERN STACK Nguyễn Thị Bích Phương - 18110341 Đặng Văn Nghĩa - 18110325 GIẢNG VIÊN HƯỚNG DẪN ThS Nguyễn Hữu Trung TP HỒ CHÍ MINH, 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HCM KHOA CƠNG NGHỆ THƠNG TIN KHĨA LUẬN TỐT NGHIỆP XÂY DỰNG HỆ THỐNG THƯƠNG MẠI ĐIỆN TỬ SỬ DỤNG MERN STACK Nguyễn Thị Bích Phương - 18110 341 Đặng Văn Nghĩa - 18110325 GIẢNG VIÊN HƯỚNG DẪN ThS Nguyễn Hữu Trung TP HỒ CHÍ MINH, 2022 ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ****** ****** PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Họ tên sinh viên 1: Nguyễn Thị Bích Phương MSSV 1: 18110341 Họ tên sinh viên 2: Đặng Văn Nghĩa MSSV 2: 18110325 Chuyên ngành: Công nghệ phần mềm Tên đề tài: XÂY DỰNG HỆ THỐNG THƯƠNG MẠI ĐIỆN TỬ SỬ DỤNG MERN STACK Họ tên giảng viên hướng dẫn: ThS Nguyễn Hữu Trung Nhận xét: Về nội dung đề tài khối công việc thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho phản biện hay không? Đánh giá loại: Điểm: TP Hồ Chí Minh, ngày……tháng……năm 2022 Giảng viên hướng dẫn ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ****** ****** PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN Họ tên sinh viên 1: Nguyễn Thị Bích Phương MSSV 1: 18110341 Họ tên sinh viên 2: Đặng Văn Nghĩa MSSV 2: 18110325 Chuyên ngành: Công nghệ phần mềm Tên đề tài: XÂY DỰNG HỆ THỐNG THƯƠNG MẠI ĐIỆN TỬ SỬ DỤNG MERN STACK Họ tên giảng viên phản biện: ThS Mai Anh Thơ Nhận xét: Về nội dung đề tài khối công việc thực hiện: Ưu điểm: Khuyết điểm: 10 Đề nghị cho phản biện hay không? 11 Đánh giá loại: 12 Điểm: TP Hồ Chí Minh, ngày……tháng……năm 2022 Giảng viên phản biện ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ****** ****** ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP Họ tên Sinh viên 1: Nguyễn Thị Bích Phương Mã Số SV: 18110341 Họ tên Sinh viên 2: Đặng Văn Nghĩa Mã Số SV: 18110325 Thời gian làm luận văn: Từ: 14/02/2022 Đến: 30/06/2022 Chuyên ngành: Công nghệ phần mềm Tên đề tài: XÂY DỰNG HỆ THỐNG THƯƠNG MẠI ĐIỆN TỬ SỬ DỤNG MERN STACK Giảng viên hướng dẫn: ThS Nguyễn Hữu Trung Nhiệm vụ đề tài: Tìm hiểu công nghệ MERN Xây dựng hệ thống thương mại điện tử Đề cương viết luận văn: MỤC LỤC PHẦN MỞ ĐẦU Tính cấp thiết đề tài Mục đích đề tài Cách tiếp cận phương pháp nghiên cứu Phân tích cơng trình có liên quan Kết dự kiến đạt PHẦN NỘI DUNG Chương 1: Cơ sở lý thuyết 1.1 Ngôn ngữ JavaScript 1.2 Bộ công nghệ MERN stack 1.2.1 MongoDB 1.2.2 Node.js 1.2.3 Express.js 1.2.4 React.js 1.3 Kiến trúc hệ thống 1.3.1 Cơ sở liệu 1.3.2 Back-end 1.3.3 Front-end 1.3.4 React Native Chương 2: Khảo sát trạng 2.1 Tiki 2.2 Shopee 2.3 Lazada 2.4 Etsy Chương 3: Phân tích thiết kế hệ thống 3.1 Phân tích chức 3.1.1 Phía Khách (Guest) 3.1.2 Phía Người mua (Customer) 3.1.3 Phía Người bán (Vendor) 3.1.4 Phía Quản trị viên (Admin) 3.3 Biểu đồ Use case (Use case Diagram) 3.3 Biểu đồ Tuần tự (Sequence Diagram) 3.4 Biểu đồ Class (Class Diagram) 3.5 Thiết kế Cơ sở liệu 3.6 Thiết kế Giao diện 3.6.1 Phía Khách (Guest) 3.6.2 Phía Người mua (Customer) 3.6.3 Phía Người bán (Vendor) 3.6.4 Phía Quản trị viên (Admin) Chương 4: Cài đặt kiểm thử 4.1 Cài đặt 4.2 Kiểm thử PHẦN KẾT LUẬN Những kết đạt Ưu, nhược điểm Hướng phát triển TÀI LIỆU THAM KHẢO Kế hoạch thực STT Thời gian Công việc 14/02/2022 - Nghiên cứu sở lý thuyết, 27/02/2022 khảo sát trạng, phân tích thiết kế hệ thống Ghi Đã hoàn thành 28/02/2022 - Xây dựng cấu trúc hệ thống, 13/03/2022 thiết lập mơi trường, cài đặt Đã hồn thành phần mềm 14/03/2022 - Xây dựng hệ thống phía Khách, Đã hoàn thành 17/04/2022 Người mua 18/04/2022 - Xây dựng hệ thống phía Người 22/05/2022 bán 23/05/2022 - Kiểm thử, sửa lỗi, hoàn thiện Đã hoàn thành Viết báo cáo Đã hoàn thành Đã hoàn thành 19/06/2022 20/06/2022 30/06/2022 Ngày 30 tháng 06 năm 2022 Người viết đề cương Đặng Văn Nghĩa Ý kiến Giảng viên hướng dẫn (ký ghi rõ họ tên) LỜI CẢM ƠN Lời đầu tiên, nhóm xin gửi lời cảm ơn đến khoa Công Nghệ.Thông Tin, trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh, tạo điều kiện cho chúng tôi.được học tập, nghiên cứu thực đề tài Nhóm xin cảm ơn ThS Nguyễn Hữu Trung, Giảng viên hướng dẫn, người tận tình chia sẻ, giúp đỡ nhóm nhiều, để chúng tơi có đủ kiến thức vận dụng vào Khóa luận tốt nghiệp Nhóm tự thấy, suốt q trình thực đề tài, với hạn chế kiến thức, kinh nghiệm kỹ thuật chun mơn, sai sót điều tránh khỏi Rất mong nhận quan tâm, ý kiến đóng góp, nhật xét cơng tâm từ phía Hơi đồng, Giảng viên hướng dẫn Giảng viên phản biện Xin chân thành cảm ơn liệu - Nhập đầy đủ 02/admin/dashboa hợp lệ thông tin đăng rd nhập - Bấm Sign in 003 Đăng - Vào hệ thống - Email= nhập với website email Đăng nhập thất Như kỳ Pass nghiadang66 bại, hiển thị thông vọng - Bấm nút Sign @gmail.com báo “User not khơng tồn in góc bên - Password= found” phải Nghia@123 - Nhập đầy đủ thông tin đăng nhập - Bấm Sign in 004 Đăng - Vào hệ thống - Email= nhập với website Đăng nhập thất Như kỳ Pass nghiadang666 bại, hiển thị thông vọng mật - Bấm nút Sign @gmail.com báo “Password không in góc bên - Password= doesn't match” hợp lệ phải Nghia@12 - Nhập đầy đủ thông tin đăng nhập - Bấm nút Sign in 005 Đăng ký - Vào hệ thống - Firstname= Đăng ký thành với thông website Văn Nghĩa công, hiển thị tin hợp lệ - Bấm nút Sign - Lastname= thơng báo in góc bên Đặng “Signing up phải successfully, you - Email= - Chọn Sign up vannghiadang can sign in now” 79@gmail.co m 152 Như kỳ Pass vọng - Nhập đầy đủ - Password= thông tin đăng Nghia@123 ký - Bấm nút Sign up - Bấm nút Confirm 006 Đăng ký - Vào hệ thống - Firstname= Đăng ký thất bại, Như kỳ Pass với email website Văn Nghĩa hiển thị thông báo vọng tồn - Bấm nút Sign - Lastname= “Email already in góc bên Đặng phải exists” - Email= - Chọn Sign up vannghiadang - Nhập đầy đủ 79@gmail.co thông tin đăng m ký - Password= - Bấm Sign up Nghia@123 - Bấm Confirm 007 Đăng xuất - Đăng nhập - Email= Đăng xuất thành Như kỳ Pass thành công vào nghiadang666 công, chuyển sang vọng hệ thống @gmail.com giao diện cho - Chọn thẻ - Password= Khách Account góc Nghia@123 bên phải - Ở phần dropdown, chọn Sign out - Bấm Confirm 008 Quên mật - Vào hệ thống - Email= website - Hệ thống gửi Như kỳ Pass vannghiadang mail thành công, vọng thông báo 153 - Bấm nút Sign 79@gmail.co “Request in góc bên m successfully, phải - Password= waiting for email - Nhập email Nghia@1234 or sms” - Chọn Forgot 56 - Thay đổi mật password? Send thành công, email thông báo “Update - Kiểm tra email, password chọn Change successfully” password - Nhập mật - Bấm Save 009 Tìm kiếm/ - Vào hệ thống - Keyword= a - Chuyển đến Như kỳ Pass website vọng Xem sản - Ở tìm - Filters: trang tìm kiếm + Sort by= http://localhost:30 phẩm kiếm, chọn tìm New product 02/products/search theo từ kiếm theo sản + Rating= khóa phẩm trở lên thị danh sách sản - Nhập từ khóa - Product= ?keyword=a, hiển phẩm có tên - Bấm tìm kiếm basas bumper mơ tả chứa ký tự - Chọn All filters gum ne - low “a” - Thay đổi top - - Danh sách thay Filters black/gum đổi theo lọc - Chọn sản - Chuyển đến phẩm trang chi tiết http://localhost:30 02/product/61931f fce2d54d0763932 500 154 010 Tìm kiếm/ - Vào trang chủ -Category - Chuyển đến http://localhost:3 lv1= Clothing trang tìm kiếm Xem sản 002/ & Shoes http://localhost:30 -Category 02/category/6191c theo loại chọn loại sản Lv2= Men's c07502be9ac1c4b sản phẩm phẩm Shoes 674c,hiển thị danh phẩm - Ở Discover, - Chọn loại sản - Filters: sách sản phẩm có phẩm loại “Clothing + Sort by= Như kỳ Pass vọng - Chọn All filters New product & Shoes > Men's - Thay đổi Filters + Rating= trở lên - Danh sách thay - Chọn sản - Product= phẩm Shoes” đổi theo lọc basas bumper - Chuyển đến gum ne - low trang chi tiết top - http://localhost:30 black/gum 02/product/61931f fce2d54d0763932 500 011 Tìm kiếm/ - Vào hệ thống - Keyword= a - Chuyển đến Như kỳ Pass website vọng Xem cửa - Ở tìm hàng - Store= trang tìm kiếm Ananas http://localhost:30 kiếm, chọn tìm 02/stores/search?k kiếm theo cửa eyword=a, hiển thị hàng danh sách cửa - Nhập từ khóa hàng có tên - Bấm tìm kiếm mô tả chứa ký tự - Chọn cửa “a” hàng - Chuyển đến trang chủ cửa hàng http://localhost:30 155 02/store/6191c14f 502be9ac1c4b653 e - Vào hệ thống - Keyword= a - Chuyển đến Như kỳ Pass kiếm/ website - Store= trang tìm kiếm vọng Xem - Ở tìm Nghĩa Đặng http://localhost:30 người kiếm, chọn tìm 02/users/search?ke dùng kiếm theo người yword=a, hiển thị dùng danh sách người - Nhập từ khóa dùng có tên chứa - Bấm tìm kiếm ký tự “a” - Chọn cửa - Chuyển đến hàng trang người dùng 012 Tìm http://localhost:30 02/user/6191bd6f5 02be9ac1c4b6452 013 Giỏ hàng - Đăng nhập - Email= - Hiển thị trang thành công với nghiadang666 chi tiết quyền user @gmail.com http://localhost:30 - Vào trang chi - Password= 02/product/61931f tiết sản phẩm Nghia@123 muốn thêm vào - Product = fce2d54d0763932 500 giỏ hàng basas bumper - Thông báo thêm - Chọn thuộc gum ne - low thành cơng tính top - “Add to cart - Bấm nút thêm black/gum successfully”, số vào giỏ hàng sản phẩm - Bấm Confirm - Bấm nút Giỏ hàng góc - Style= + Color= black + Size= 40 bên phải giỏ hàng cập nhật - Chuyển đến trang giỏ hàng 156 Như kỳ Pass vọng http://localhost:30 02/cart, hiển thị danh sách sản phẩm giỏ hàng 014 Đặt hàng - Đăng nhập - Email= - Chuyển đến thành công với nghiadang666 trang giỏ hàng quyền user @gmail.com http://localhost:30 - Bấm nút Giỏ - Password= 02/cart, hiển thị hàng góc Nghia@123 danh sách sản bên phải phẩm giỏ - Phone= Như kỳ Pass vọng - Bấm Proceed 0364956649 hàng to checkout - Address= - Chuyển đến - Nhập thông tin 120, đường số trang quản lý đơn nhận hàng 3… hàng người - Chọn đơn vị - Delivery dùng vận chuyển unit= http://localhost:30 - Bấm nút Only GDNow 02/account/purcha Order se - Bấm Confirm 015 Tạo cửa - Đăng nhập hàng - Email= - Chuyển đến Như kỳ Pass thành công với nghiadang666 trang quản lý tổng vọng quyền user @gmail.com hợp cửa hàng - Chọn Shop - Password= Người bán Manager góc Nghia@123 bên phải http://localhost:30 - Shop name= 02/account/shopM - Chọn nút New Nhà sách anager shop Spiderum - Hiển thị trang - Nhập đầy đủ - Shop bio= form tạo cửa hàng thông tin cửa Books for the http://localhost:30 hàng Youth *A 157 02/account/shopM - Chọn series of anager/createNew sách hoa hồng books for Shop - Bấm Submit - Avatar= file - Tạo cửa hàng - Bấm Confirm - Cover = file thành công, -Commission chuyển đến trang = small and Dashboard medium cửa hàng business http://localhost:30 (6%/order) 02/vendor/61d3df 19d5ec02c6c7503 841 016 Tạo sản phẩm - Đăng nhập - Email= - Chuyển đến Như kỳ Pass thành công với nghiadang666 trang Dashboard vọng quyền user @gmail.com cửa hàng - Chọn Shop - Password= http://localhost:30 Manager góc Nghia@123 02/vendor/61d3df bên phải - Store= Nhà 19d5ec02c6c7503 - Chọn Go to sách 841 dashboard Spiderum - Chuyển đến cửa hàng - Product trang quản lý sản - Chọn Products name= Sách phẩm cửa Seneca sidebar - Avatar= file http://localhost:30 - Chọn nút New - Other hàng 02/vendor/product product images = files s/61d3df19d5ec02 - Nhập đầy đủ - Description c6c7503841 thông tin sản = Chủ Nghĩa - Chuyển đến phẩm Khắc kỷ trang form tạo - Bấm Submit (Stoicism) sản phẩm - Bấm Confirm http://localhost:30 02/vendor/product 158 - Quantity= s/createNewProdu 20 ct/61d3df19d5ec0 - Price= 2c6c7503841 149000 - Tạo sản phẩm - Promotion thành công, thông price= 129000 báo “Creating - Category= product Toys & successfully” Entertainment > Books > Reference Books - Styles= + Cover type= Paperback 017 Quản lý - Đăng nhập - Email= - Chuyển đến Như kỳ Pass đơn hàng thành cơng với nghiadang666 trang Dashboard vịng quyền user @gmail.com cửa hàng Người - Chọn Shop - Password= http://localhost:30 bán Manager góc Nghia@123 02/vendor/61d3df bên phải - Store= 19d5ec02c6c7503 - Chọn Go to Ananas 841 dashboard - Order= - Chuyển đến cửa hàng #61d3db56d5 trang quản lý đơn - Chọn Orders ec02c6c75037 hàng cửa hàng 1e http://localhost:30 sidebar - Status= 02/vendor/orders/ - Chọn View Shipped 6191c14f502be9a order detail c1c4b653e đơn hàng 159 - Chọn trạng thái - Chuyển đến cho đơn trang chi tiết đơn hàng hàng - Bấm Confirm http://localhost:30 02/vendor/orders/ detail/61d3db56d5 ec02c6c750371e/6 191c14f502be9ac 1c4b653e - Cập nhật trạng thái đơn hàng thành công 018 Quản lý - Đăng nhập - Email= - Chuyển đến đơn hàng thành công với admin6@gma trang Admin Quản quyền admin il.com trị viên - Chọn Orders - Password= http://localhost:30 Admin@123 02/admin/dashboa sidebar - Order= Như kỳ Pass vọng Dashboard rd - Chọn Delivery #61d1adf7ec0 - Chuyển đến Service 4a314c5a7e80 trang quản lý đơn - Chọn View hàng order detail - Status= http://localhost:30 đơn hàng 02/admin/order Delivered - Chọn trạng thái - Cập nhật trạng cho đơn thái đơn hàng hàng thành công 019 Thống kê - Đăng nhập - Email= - Chuyển đến Như kỳ Pass doanh thu thành công với nghiadang666 trang Dashboard vọng cửa hàng quyền user @gmail.com cửa hàng - Password= http://localhost:30 Nghia@123 160 02/vendor/61d3df - Chọn Shop - Store= Manager góc Ananas bên phải - Chọn Go to 19d5ec02c6c7503 841 - By Orders= - Vẽ biểu đồ + Statistics đường thống kê dashboard by= Hour cửa hàng + Chart theo doanh thu theo đơn hàng - Chọn thống kê type= Line - Vẽ biểu đồ cột theo đơn hàng thống kê doanh - By - Thay đổi thời Products= thu theo 10 sản gian, loại biểu + Statistics phẩm bán chạy đồ by= 10 - Chọn thống kê products theo sản phẩm + Chart - Thay đổi số type= Bar sản phẩm, loại biểu đồ 020 Thống kê - Đăng nhập - Email= - Chuyển đến người thành công với admin6@gma trang Admin dùng quyền admin il.com Dashboard cửa hàng - Chọn thống kê - Password= http://localhost:30 tham gia người dùng Admin@123 02/admin/dashboa - Chọn thời gian, - By Users= loại biểu đồ rd + Statistics - Vẽ biểu đồ - Chọn thống kê by= Day đường thống kê cửa hàng mới, theo ngày số + Chart chọn thời gian, type= Line người tham gia loại biểu đồ - By vào hệ thống Products= - Vẽ biểu đồ tròn + Statistics thống kê theo by= Months tháng số cửa hàng products 161 Như kỳ Pass vọng + Chart type= tham gia vào hệ thống Doughnut Bảng 4-1 Một số test case 162 PHẦN KẾT LUẬN Những kết đạt Trải qua trình thực đề tài, nhóm thực mục tiêu đề trước đó: - Hiểu thành phần, cấu trúc, cách hoạt động MERN stack - Xây dựng website sàn giao dịch thương mại điện tử với tương đối đầy đủ chức năng, với tên gọi GoodDeal Ưu điểm - Website Mobile App có đầy đủ chức sàn giao dịch thương mại điện tử, nơi người đến để trao đổi buôn bán, lúc, nơi - Giao diện đơn giản, thân thiện với người dùng, có responsive loại thiết bị cho Web - Có phân quyền rõ ràng - Có chức toán Online Nhược điểm - Giao diện đơn giản, khơng có chế độ dark mode, light mode… - Chưa có chức thơng báo, nhắn tin trực tuyến… cản trở người mua người bán - Nhiều chức thuộc bên thứ ba mang tính chất demo, chưa áp dụng thực tế Hướng phát triển - Phát triển giao diện đẹp mắt hơn, thêm chế độ dark mode, light mode… - Thêm chức thơng báo, nhắn tin… - Có thể thêm chức phía người dùng viết bài, đăng ảnh, theo dõi người dùng… từ phát triển thành cộng đồng, theo hướng mạng xã hội 163 TÀI LIỆU THAM KHẢO [1] MDN Web Docs (2021) JavaScript [Online] Available: [Online] Available: https://developer.mozilla.org/en-US/docs/Web/JavaScript [2] GeeksforGeeks (2021) MERN stack https://www.geeksforgeeks.org/mern-stack/ [3] Nodejs.org (không rõ) About Node.js [Online] Available: https://nodejs.org/en/about/ [4] Expressjs.com (2017) Express [Online] Available: https://expressjs.com/en/starter/installing.html [5] Reactjs.org (2021) Getting Started [Online] Available: https://reactjs.org/docs/getting-started.html [6] Mongodb.com (2021) MongoDB Documentation [Online] Available: https://docs.mongodb.com/ [7] Getbootstrap.com (2021) Getting started [Online] Available: [Online] Available: https://getbootstrap.com/docs/5.1/getting-started/introduction/ [8] Mongoosejs.com (không rõ) API Docs https://mongoosejs.com/docs/api.html [9] Reactnative.dev (2022) Guide [Online] Available: https://reactnative.dev/docs/getting-started [10] Website Tiki [Online] Available: https://tiki.vn/ [11] Website Shopee [Online] Available: https://shopee.vn/ [12] Website Lazada [Online] Available: https://www.lazada.vn/ [13] Website Etsy [Online] Available: https://www.etsy.com/ [14] Academind (2016) Node.js Basics [Online] Available: https://www.youtube.com/watch?v=65a5QQ3ZR2g&list=PL55RiY5tL51oGJorjEgl6N VeDbx_fO5jR 164 [15] Web Dev Simplified (2020) React Hooks [Online] Available: https://www.youtube.com/watch?v=O6P86uwfdR0&list=PLZlA0Gpn_vH8EtggFGER CwMY5u5hOjf-h [16] F8 fullstack (2021) Khóa học bật [Online] https://fullstack.edu.vn/courses?_type=tab [17] Ryan Dhungel (2021) MERN Stack React Node Ecommerce from Scratch to Deployment [Online] Available: https://www.udemy.com/course/react-node- ecommerce/ 165 S K L 0