Tìm hiểu công nghệ mern stack để xây dựng website thương mại điện tử về thời trang

Sản phẩm đạt được: • Website bán hàng đầy đủ các tính năng cần thiết, giao diện giúp người dùng dễ dàng mua hàng đặt hàng, quản lý đơn hàng của bản thân.. Website hỗ trợ người dùng t

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 TÌM HIỂU CƠNG NGHỆ MERN STACK ĐỂ XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ VỀ THỜI TRANG GVHD: ThS MAI ANH THƠ SVTH: NGUYỄN DƯƠNG ĐẠT PHẠM NGỌC HƯNG SKL009489 Tp Hồ Chí Minh, tháng 06, năm 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO -   - KHOÁ LUẬN TỐT NGHIỆP Đề tài: Tìm hiểu cơng nghệ MERN stack để xây dựng website thương mại điện tử thời trang SVTH : Khóa : Ngành : GVHD : NGUYỄN DƯƠNG ĐẠT 18110092 PHẠM NGỌC HƯNG 18110127 2018 - 2022 CÔNG NGHỆ THÔNG TIN Th.S MAI ANH THƠ TP Hồ Chí Minh, tháng 06, năm 2022 CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc -Tp Hồ Chí Minh, _tháng 06, 2021 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên sinh viên: Nguyễn Dương Đạt Họ tên sinh viên: Phạm Ngọc Hưng Chuyên ngành: Công nghệ phầm mềm MSSV: 18110092 MSSV: 18110127 Lớp: 18110CLST1 Lớp: 18110CLST2 Giảng viên hướng dẫn: ThS Mai Anh Thơ Tên đề tài: Tìm hiểu công nghệ MERN stack để xây dựng website thương mại điện tử về thời trang 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: …………… (bằng chữ……………………………………………… ) GIẢNG VIÊN HƯỚNG DẪN (Kí ghi rõ họ tên) CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc -Tp Hồ Chí Minh, _tháng 06, 2022 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên sinh viên: Nguyễn Dương Đạt MSSV: 18110092 Lớp: 18110CLST1 Họ tên sinh viên: Phạm Ngọc Hưng Chuyên ngành: Công nghệ phần mềm MSSV: 18110127 Lớp: 18110CLST2 Giảng viên phản biện: TS Lê Vĩnh Thịnh Tên đề tài: Tìm hiểu cơng nghệ MERN stack để xây dựng website thương mại điện tử về thời trang 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: …………… (bằng chữ……………………………………………… ) GIẢNG VIÊN PHẢN BIỆN (Kí ghi rõ họ tên) LỜI CẢM ƠN Trên thực tế, khơng có thành cơng khơng gắn với hỗ trợ, giúp đỡ dù hay nhiều, trực tiếp hay gián tiếp người khác Nay xin gửi lời cảm ơn chân thành đến Thạc sĩ Mai Anh Thơ, người hỗ trợ truyền động lực cho chúng tơi q trình chọn đề tài, hướng dẫn góp ý Mặc dù hạn chế về mặt thời gian cô giành nhiều thời gian để hỗ trợ nhóm nhờ giúp đỡ cơ, đó là động lực để chúng em hoàn thành đồ án, khơng có hướng dẫn kinh nghiệm thực tế cô em nghĩ đồ án khó hoàn thành và hoàn thành thời hạn Một lần nữa, nhóm thực xin gửi lời cảm ơn tới người giám sát nhóm Nhóm thực gửi lời cảm ơn đến bạn học viên cung cấp thơng tin, kiến thức bổ ích giúp chúng tơi hồn thiện đề tài Nhóm thực xin gửi lời cảm ơn đến Thạc sĩ Mai Anh Thơ người trực tiếp hướng dẫn nhóm hoàn thành đồ án Chúng ta khơng thể hồn thành khơng có hướng dẫn Do chưa có kinh nghiệm thiết kế xây dựng phần mềm áp dụng quy trình cịn mới nên q trình thi cơng có nhiều sai sót, vướng mắc mong bạn thông cảm Do thời gian có hạn, kiến thức cịn hạn chế cịn nhiều sai sót nên khơng tránh khỏi sai sót, mong nhận góp ý quý báu người để sau hoàn thiện Chúng xin chân thành cảm ơn Ho Chi Minh, tháng 06, năm 2021 CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc -Tp Hồ Chí Minh, _tháng 06, 2022 NHIỆM VỤ KHOÁ LUẬN Họ tên sinh viên: Nguyễn Dương Đạt MSSV: 18110092 Lớp: 18110CLST1 Họ tên sinh viên: Phạm Ngọc Hưng MSSV: 18110127 Lớp: 18110CLST2 Chuyên ngành: Công nghệ phần mềm Giảng viên hướng dẫn: ThS.Mai Anh Thơ Ngày nhận đề tài: 07/03/2022 Ngày nộp đề tài: 18/06/2022 Tên đề tài: Tìm hiểu cơng nghệ MERN stack để xây dựng website thương mại điện tử về thời trang Nhiệm vụ luận văn: • Xây dựng website bán quần áo thời trang dựa vào cơng nghệ MERN stack • Kết nối website với services bên thứ để giải yêu cầu tốn • Trình bày đầy đủ tính bài thuyết trình đáp ứng yêu cầu đề Sản phẩm đạt được: • Website bán hàng đầy đủ tính cần thiết, giao diện giúp người dùng dễ dàng mua hàng đặt hàng, quản lý đơn hàng thân • Hồn thiện hệ thống quản lý website • Sản phẩm đưa lên môi trường internet MỤC LỤC CHƯƠNG : TỔNG QUAN 1.1 Lý chọn đề tài 1.2 Mục tiêu CHƯƠNG : KHẢO SÁT HIỆN TRẠNG 2.1 Khảo sát trạng 2.1.1 Website CANIFA 2.1.2 Website ELISE 2.1.3 Website CHANNEL 2.1.4 Website GUCCI 2.2 Xác định yêu cầu 2.2.1 Yêu cầu chức 2.2.2 Yêu cầu phi chức CHƯƠNG : CÁC CÔNG NGHỆ SỬ DỤNG 3.1 Tổng quan về MERN stack 3.2 Thành phần ứng dụng 10 3.3 Hệ thống Front-End 10 3.4 Hệ thống Back-End 11 3.5 Hệ thống cloud Mongodb 11 3.6 Hệ thống toán trực tuyến 12 3.6.1 Paypal sanbox 12 3.6.2 VNPay sanbox 12 3.7 Hệ thống Google cloud 12 I 3.7.1 Đăng nhập gmail gửi email 12 3.7.2 Theo dõi người dùng 13 3.8 Hệ thống Cloudinary 13 3.9 Hệ thống deployment 14 CHƯƠNG : THIẾT KẾ PHẦN MỀM 15 4.1 Thiết kế liệu 15 4.1.1 Sơ đồ Usecase và chức actor 15 4.1.2 Đặc tả số Usecase và lược đồ tuần tự 22 4.1.3 Lược đồ lớp 58 4.1.4 Mơ hình liên kết thực thể 59 4.2 Thiết kế giao diện 60 4.2.1 Trang chủ 60 4.2.2 Trang đăng nhập 60 4.2.3 Trang đăng ký 61 4.2.4 Trang hiển thị cách danh mục 62 4.2.5 Trang hiển thị sản phẩm 63 4.2.6 Trang tìm kiếm sản phẩm 65 4.2.7 Trang hiển thị giỏ hàng 66 4.2.8 Trang quản lý giỏ hàng 66 4.2.9 Trang đặt hàng 68 4.2.10 Trang tổng quan tài khoản 68 4.2.11 Trang cập nhật thông tin 69 4.2.12 Trang khôi phục mật 70 4.2.13 Trang đổi mật 70 4.2.14 Trang toán 71 II 4.2.15 Trang toán paypal 72 4.2.16 Trang thống kê 72 4.2.17 Trang quản lý người dùng 73 4.2.18 Trang quản lý danh mục 75 4.2.19 Trang quản lý danh mục 76 4.2.20 Trang quản lý sản phẩm 78 4.2.21 Trang quản lý kích thước màu sắc sản phẩm 81 4.2.22 Trang quản lý đơn hàng cần xác nhận 82 4.2.23 Trang quản lý đơn hàng xác nhận 83 4.2.24 Trang quản lý lịch sử đơn hàng 84 4.2.25 Trang quản lý sale sản phẩm 85 4.2.26 Trang quản lý voucher khách hàng 86 4.2.27 Trang thống kê doanh thu 87 CHƯƠNG : CÀI ĐẶT VÀ KIỂM THỬ 88 5.1 Cài đặt 88 5.2 Các bước chạy hệ thống 88 5.3 Kiểm thử 89 CHƯƠNG : KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 95 6.1 Kết đạt 95 6.2 Ưu điểm 95 6.3 Nhược điểm 96 6.4 Khó khăn 96 6.5 Bài học kinh nghiệm 96 6.6 Hướng phát triển 96 TÀI LIỆU THAM KHẢO 98 III DANH MỤC HÌNH ẢNH Hình Sơ đồ MERN Stack Hình Thành phần ứng dụng 10 Hình Sơ đồ usecase 15 Hình Usecase Login 23 Hình Lược đồ tuần tự đăng nhập 25 Hình Usecase thêm sản phẩm 26 Hình Lược đồ tuần tự thêm vào giỏ hàng 27 Hình Usecase quản lý giỏ hàng 28 Hình Thêm sản phảm vào giỏ hàng 29 Hình 10 Xố sản phẩm khỏi đơn hàng 30 Hình 11 Usecase đơn đặt hàng 31 Hình 12 Lược đồ tuần tự tạo đơn hàng 32 Hình 13 Đơn hàng tốn qua paypal 34 Hình 14 Usecase quản lý đơn hàng cá nhân 35 Hình 15 Xem chi tiết đơn hàng 36 Hình 16 Lược đồ tuần tự huỷ đơn hàng 38 Hình 17 Quản lý thơng tin khách hàng 39 Hình 18 Sơ đồ t̀n tự xem thơng tin khác hàng 40 Hình 19 Sơ đồ tuần tự thay đổi thông tin khách hàng 42 Hình 20 Quản lý sản phẩm 43 Hình 21 Lược đồ tuần tự thêm sản phẩm mới 44 Hình 22 Sơ đồ tuần tự cập nhật sản phẩm 46 Hình 23 Quản lý đơn hàng 47 Hình 24 Lược đồ tuần tự xem chi tiết đơn hàng admin 48 Hình 25 Lược đồ tuần tự chấp nhận đơn hàng 50 Hình 26 Quản lý đơn hàng xử lý 51 IV 4.2.25 Trang quản lý sale sản phẩm Hình 76 Trang quản lý mã giảm giá sản phẩm Mô tả : Trang web hiển thị thông tin giảm giá sản phẩm đồng thời cho phép quản trị viên thay đổi xố thơng tin giảm giá sản phẩm Hình 77 Trang sửa thơng tin giảm giá Mơ tả : Trang web phép quản trị viên thay đổi thông tin giảm giá sản phẩm 85 4.2.26 Trang quản lý voucher khách hàng Hình 78 Trang quản lý mã giảm giá Mô tả :Trang web quản lý thông tin mã giảm giá theo đơn hàng trang thương mại điện tử Hình 79 Trang thêm mã giảm giá Mô tả :Trang web cho phép thêm mới mã giảm giá theo đơn hàng trang thương mại điện tử 86 Hình 80 Trang web chỉnh sửa thơng tin mã giảm giá Mô tả :Trang web cho phép chỉnh sửa mã giảm giá theo đơn hàng tồn trước đó 4.2.27 Trang thống kê doanh thu Hình 81 Trang thông kê doanh thu Mô tả :Trang web cho hiển thị doanh thu theo sản phẩm theo đơn hàng khoảng thời gian xác định đồng thời hiển thị thông tin cần thiết số sản phẩm bán tổng tiền, tổng đơn hàng hoàn thành 87 CHƯƠNG : CÀI ĐẶT VÀ KIỂM THỬ 5.1 Cài đặt ❖ Chạy localhost: - Cài đặt môi trường: Cài đặt NodeJS phiên mới (LTS mới https://nodejs.org/en/download/) - Cài đặt công cụ: Cài đặt Visual Studio Code https://code.visualstudio.com/download - Tải FrontEnd tại: - https://github.com/hung3032000/DoAnTotNghiep - Tải BackEnd tại: - https://github.com/duongdatnguyen/ecommerce_web - Cơ sở liệu MongoDB - Kiểm tra môi trường NodeJs lệnh node –v Command Prompt/Windows Powershell windows hay Terminal Mac Linux - Kiểm tra phiên npm lệnh npm –v Command Prompt/Windows Powershell windows hay Terminal Mac Linux ❖ Chạy môi trường website: Ở nhóm thực deploy lên môi trường internet dựa heroku 5.2 Các bước chạy hệ thống - Truy cập hệ thống môi trường internet: https://hermesshop.vercel.app/ - Chạy trang web môi trường localhost: + Mở thư mục BackEnd Visual Studio Code, mở Terminal Visual Studio Code => chạy lệnh npm install để hệ thống tự động cập nhật thư viện cần thiết => Chạy lệnh npm run dev để khởi chạy server + Mở thư mục FrontEnd Visual Studio Code => mở Terminal Visual Studio Code => chạy lệnh npm install để hệ thống tự động cập nhật thư viện cần thiết => Chạy lệnh npm start để khởi chạy trang web 88 5.3 Kiểm thử ❖ Chức Đăng nhập: Bảng 22 Kiểm thử đăng nhập Test case Kiểm thử tính "Đăng nhập" Test Title Đăng nhập thành công Test Steps Vào trang chủ Nhấn vào SignIn Điền đầy đủ thông tin Nhấn enter click button Đăng nhập Test Data Password: 12345678 Email:phamngochung3032001@gmail.com Đăng nhập thành công, chuyển sang giao Expected Result diện tuỳ thuộc vào quyền người đăng nhập Đăng nhập thành công, chuyển sang giao Actual Result diện tuỳ thuộc vào quyền người đăng nhập Status Pass ❖ Chức Đăng nhập Google: Bảng 23 Kiểm thử đăng nhập google Test case Kiểm thử tính "Đăng nhập Google" 89 Test Title Đăng nhập thành công Test Steps 1.Vào trang chủ Nhấn vào SignIn Nhấn vào icon Google Chọn tài khoản google đăng ký Test Data Expected Result Đăng nhập thành công, chuyển sang giao diện tuỳ thuộc vào quyền người đăng nhập Actual Result Đăng nhập thành công, chuyển sang giao diện tuỳ thuộc vào quyền người đăng nhập Status ❖ Chức Đăng ký: 90 Pass Bảng 24 Kiểm thử đăng ký Test case Kiểm thử tính "Đăng ký" Test Title Đăng ký thành công Test Steps 1.Vào trang chủ Nhấn vào SignIn Nhấn vào Create an account Điền thông tin Ấn đăng ký Test Data Title: Ông First Name: Hung Last Name: Pham Email: duongdat@gmail.com Password: 12345678 Đăng ký thành công, chuyển sang Expected Result giao diện Đăng ký thành cơng, chuyển sang Actual Result giao diện Status Pass ❖ Chức Thêm vào giỏ hàng: Bảng 25 Kiểm thử thêm vào giỏ hàng Kiểm thử tính "Thêm vào giỏ Test case hàng" 91 Test Title Thêm vào giỏ hàng thành công Test Steps 1.Vào trang chủ 2.Chọn danh mục Chọn danh mục phụ Chọn hàng Chọn size hàng Chọn màu hàng Chọn số lượng sản phẩm Bấm chọn add to card Giỏ hàng xuất hàng với số lượng tăng thêm Test Data Expected Result Thêm vào giỏ hàng thành cơng, giỏ hàng có số lượng hàng ý muốn Actual Result Thêm vào giỏ hàng thành cơng, giỏ hàng có số lượng hàng ý muốn Status ❖ Chức Thanh toán paypal: 92 Pass Bảng 26 Kiểm thử toán paypal Test case Kiểm thử tính " Thanh tốn paypal " Test Title Thanh toán paypal thành công Test Steps Bấm vào icon giỏ hàng Chọn paypal Chọn paypal đăng nhập tài khoản paypal nhấn chọn toán Test Data Expected Result Thanh tốn paypal thành cơng, chuyển sang giao diện đơn hàng có thông tin đơn hàng vừa tạo Actual Result Thanh tốn paypal thành cơng, chuyển sang giao diện đơn hàng có thông tin đơn hàng vừa tạo Status ❖ Chức huỷ đơn đặt hàng: 93 Pass Bảng 27 Kiểm thử toán paypal Test case Kiểm thử tính " huỷ đơn hàng đặt " Test Title Huỷ đơn hàng thành công Test Steps Bấm vào đơn hàng Chọn đơn hàng đặt trạng thái “Pending” Chọn vào button huỷ đơn hàng Test Data Expected Result Đơn hàng chuyển trạng thái thành “Cancel” Actual Result Đơn hàng chuyển trạng thái thành “Cancel” và sản phẩm huỷ thêm vào lại số lượng sản phẩm Status 94 Pass CHƯƠNG : KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 6.1 Kết quả đạt Nhóm thực tự đánh giá nhóm hoàn thành yêu cầu đồ án Nhóm thực củng cố lại kiến thức về reactjs và nodejs để hồn thiện đồ án Áp dụng vào trang web bán hàng để thực chức trang web thương mại Các kiến thức mơn học trải qua góp phần tạo lập trang web ổn định nghiệp vụ đồ án xử lý tốt phù hợp với u cầu người dùng Thơng qua khố luận nhóm thực tích luỹ kiến thức, kinh nghiệm Đồng thời khắc phục vấn đề phải đối mặt từ đó tích luỹ kinh nghiệm thực tiễn việc tạo lập trang web Các kiến thức, công nghệ liên kết với dịch vụ bên thứ áp dụng phù hợp với tính cần thiết trang thương mại điện tử Tuy nhiên thời gian có hạn nên website cịn tính cần nghiên cứu phát triển hơn( đề cập phần 6.3 hướng phát triển) 6.2 Ưu điểm - Việc sử dụng React JS giúp cho trang web dễ dàng sử dụng thời gian chờ giảm ngắn - Xây dựng hệ thống tracking user thông qua đó xây dựng hệ thống gợi ý cho người dùng - Người dùng toán qua kênh toán khác nhóm phát triển - Giao diện thống kê giúp người quản trị kiểm kiểm soát doanh thu bán hàng, - Giao diện trực quan dễ dàng sử dụng cho người dùng - Đáp ứng đủ yêu cầu cần có trang bán hàng điện tử - Xử lý đầy đủ nghiệp vụ toán - Dựa vào công nghệ sử dụng nên việc triển khai môi trường web dễ dàng - Công nghệ sử dụng Nodejs giúp ta dễ dàng tuỳ chỉnh Ứng dụng dễ dàng chỉnh sửa thêm mới tính 95 6.3 Nhược điểm - Hệ thống vận chuyển hàng hố chưa nhóm phát triển đầy đủ tính - Hệ thống gợi ý cho người dùng về sản phẩm chưa hoàn hảo 6.4 Khó khăn Trong trình phát triển ứng dụng giới hạn về vấn đề thời gian nên ứng dụng chưa hoàn thiện trọn vẹn hoàn thành chức cần thiết Các nghiệp vụ nâng cao bài toán nhóm áp dụng thành cơng ty nhiên hồn thiện tốt cần phải chỉnh sửa để đáp ứng nhu cầu đưa website thành sản phẩm hoàn thiện 6.5 Bài học kinh nghiệm Việc xây dựng website MERN STACK giúp cho nhóm có kinh nghiệm sơ khai về công nghệ mới, là bước đệm quan trọng cho phát triển sau trường tham gia vào dự án công ty khác Cùng với đó là việc hợp tác làm việc nhóm, quản trị thời gian… Trải qua khố luận, nhóm có nhiều kinh nghiệm từ bước ban đầu hoàn thiện website đáp ứng chức cần có từ đó có thể phát triển và đưa vào sử dụng, 6.6 Hướng phát triển Trong thời gian nhóm tiếp tục phát triển để web trở thành trang web hoàn chỉnh đầy đủ toàn tính Các chức nhóm tiếp tục phát triển như: - Tính tốn chi phí vận chuyển xác: Dựa vào địa mà người dùng cung cấp hệ thống đưa chi phí vận chuyển phù hợp, đưa gói khuyến hỗ trợ việc giao hàng, cho phép người dùng lựa chọn gói phù hơp 96 - Gợi ý hàng loại: nhóm tiếp tục tiến hành thu thập liệu nghiên cứu ứng dụng mô hình AI để giải tốn Dựa vào thơng tin khách hàng gợi ý phù hợp với yêu cầu người dùng DevOps: Nghiên cứu deploy website lên hệ thống đám mây tốt Kubenetes Thơng qua đó có thể kiểm sốt hoạt đồng website môi trường thực tế đồng thời tiến hành nâng cấp cải thiện hiệu suất làm việc website 97 TÀI LIỆU THAM KHẢO [1] Hoang, N V (2020, October 20) File upload với Multer, Nodejs VA express Viblo https://viblo.asia/p/file-upload-voi-multer-nodejs-va-express- E375z4VdZGW [2] Getting started – React (n.d.) React – A JavaScript library for building user interfaces https://reactjs.org/docs/getting-started.html [3] Mongoose v5.11.7: Schemas (n.d.) Mongoose ODM v5.11.7 https://mongoosejs.com/docs/guide.html [4] MERN stack (2021, October 7) GeeksforGeeks https://www.geeksforgeeks.org/mern-stack/ [5] Hướng Dan Cách deploy project NodeJS Len Heroku VA Su dung database MongoDB atlas (2020, January 29) Thanh Long Dev https://www.thanhlongdev.com/huong-dan-cach-deploy-project-nodejs-lenheroku/ [6] Reinman, A (n.d.) Nodemailer :: Nodemailer Nodemailer :: Nodemailer https://nodemailer.com/about/ [7] Thuan, P (2018, September 15) Authentication with Google OAuth using Nodejs, Passportjs, MongoDB Viblo https://viblo.asia/p/authenticationwith-google-oauth-using-nodejs-passportjs-mongodb-gAm5yqAV5db 98