PHẦN MỞ ĐẦU 1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI Qua đại dịch Covid-19 vì người dân có thói quen mua sắm nhiều hơn bình thường, nhờ vào đó các hộ kinh doanh nhỏ lẻ bắt đầu mọc lên nhiều hơn. Đồ ăn, dịch vụ, các nhu yếu phẩm và đặc biệt là thời trang. Có thể dễ hiểu thời trang là mặt hàng được ưa chuộng bởi giới trẻ họ muốn mình được đẹp.
Nhưng cũng chính vì đại dịch covid vừa qua điều kiện đi lại tới các cửa hàng lại khó khăn, nên bán hàng online lại là nước đi tối ưu của các cửa hàng. Họ có thể triển khai cửa hàng của mình dưới dạng app hoặc website, dễ dàng phục cho mọi người truy cập và mua sắm. Nắm bắt được nhu cầu này nên việc xây dựng một trang web có thể tận dụng được tối đa phân khúc User là điều cần thiết. Vậy nên chúng em quyết định chọn đề tài “Xây dựng website bán quần áo sử dụng Spring Boot và ReactJS” để mô hình hóa sản phẩm này.
Nhằm đem đến hiệu quả tốt nhất cho việc mua bán giữa người dùng và cửa hàng thuận lợi nhất. ĐỐI TƯỢNG NGHIÊN CỨU Với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu mua bán thời trang, giúp người mua tiếp cận tới các sản phẩm đẹp, khuyến mãi tốt mà không cần phải ra cửa hàng. Đồng thời giúp cho bên bán hàng quản lý các sản phẩm, thu nhập, khuyến mãi, tránh để tồn kho và các vấn đề liên quan. Bên cạnh đó là các công nghệ mà chúng em sử dụng trong đề tài, cụ thể như sau: - Sử dụng ReactJS để xây dựng một giao diện tiện dụng, dễ tương tác và hợp mắt người dùng.
- Nghiên cứu RESTful API với Spring Boot của Java để xây dựng hệ thống, hỗ trợ thao tác và truy xuất thông tin nhanh chóng và chính xác nhất - Sử dụng MySQL để làm cơ sở dữ liệu. - Áp dụng Spring Security của Spring Framework và JWT để ứng dụng vào việc bảo mật và phân quyền người dùng. PHẠM VI NGHIÊN CỨU Trang web được xây dựng vào các chức năng theo nghiệp vụ định hướng người dùng xem và mua các sản phẩm thời trang trở nên nhanh chóng, tiện lợi. Như là xem danh sách các sản phẩm, đặt hàng, chọn các mặt hàng để thêm vào giỏ hàng, chọn nơi cần giao hàng,… Ngoài ra về phía bộ phận quản trị của cửa hàng thì có các chức năng để quản lý các sản phẩm đang tồn tại ở trong cửa hàng như chỉnh sửa các thuộc tính của sản phẩm thời trang, số lượng của các mặt hàng tại thời điểm hiện hành, quản lý các tài khoản của người dùng,… 4.
MỤC TIÊU CỦA ĐỀ TÀI Phía người dùng - Đăng nhập và đăng ký tài khoản với email. - Xem thông tin chi tiết sản phẩm, các biến thể sản phẩm và số lượng của biến thể đó. - Tìm kiếm sản phẩm. - Lọc sản phẩm theo các tiêu chí về phân loại, màu sắc và kích thước có sẵn.
- Thêm sản phẩm vào giỏ hàng. - Đặt mua các sản phẩm trong giỏ hàng. - Thanh toán online. - Quản lý địa chỉ giao hàng (thêm, sửa, xóa địa chỉ).
- Xem thông tin đơn hàng đã đặt. - Đánh giá sản phẩm. - Quản lý thông tin cá nhân. - Đặt lại mật khẩu khi quên.
Phía quản trị viên - Quản lý (thêm, sửa, xóa) sản phẩm, phân loại, màu sắc, kích thước của sách. - Quản lý (xác nhận, hủy đơn) đơn hàng của người dùng. - Xem danh sách người dùng, vô hiệu hóa tài khoản của người dùng. - Xem danh sách đánh giá sản phẩm, vô hiệu hóa đánh giá của người dùng.
16 - Thống kê doanh thu của cửa hàng bao gồm: xem thông tin doanh thu, xuất file excel (.xlsx) danh sách hóa đơn theo khoảng ngày chỉ định. 17 PHẦN NỘI DUNG CHƯƠNG 1. KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 1. KHẢO SÁT HIỆN TRẠNG 1.
Website “ROUTINE | THƯƠNG HIỆU QUẦN ÁO THỜI TRANG NAM NỮ CAO CẤP” Link: https://routine. Hình ảnh trang chủ của website Routine 1. Các chức năng chính - Giao diện hiển thị các sản phẩm theo từng danh mục. - Tìm sản phẩm theo tên.
- Lọc sản phẩm. - Đăng nhập, đăng ký. - Chức năng đặt hàng, giỏ hàng, thanh toán sản phẩm. - Chat trực tiếp với cửa hàng thông qua plug-in messenger.
- Lịch sử đơn hàng. - Xem thông tin tài khoản.2 Điểm tốt - Giao diện đơn giản, trực quan, người mới dễ dàng tiếp cận sử dụng. 18 - Có lượng mặt hàng nhiều, chức năng lọc sản phẩm chi tiết. - Có áp dụng plug-in chat messenger.3 Nhược điểm - Chưa tối ưu được không gian hiển thị với danh sách các sản phẩm.
- Chưa tích hợp thanh toán online. Website “HARDMODE – THIẾT KẾ VÀ THỜI TRANG” Link: https://hardmode. Hình ảnh trang chủ của trang Hardmode 1. Các chức năng chính - Quản lý các mặt hàng và các danh mục sản phẩm.
- Đăng nhập, đăng ký tài khoản. - Xác nhận đơn đặt hàng. - Giao diện hiển thị các sản phẩm. - Xem lịch sử đặt hàng.
- Chức năng đặt hàng, giỏ hàng, thanh toán sản phẩm. - Chat trực tiếp với cửa hàng thông qua plug-in messenger. - Lọc sản phẩm. - Thiết kế đơn giản, dễ nhìn, dễ sử dụng.
- Có áp dụng plug-in chat messenger.3 Nhược điểm - Chưa tích hợp thanh toán online. Website “YaMe | Mua Online Quần Áo Thời Trang Nam Nữ Giá Rẻ - YaMe.vn” Link: https://yame. Hình ảnh trang chủ của website www. Các chức năng chính - Quản lý các mặt hàng và các danh mục sản phẩm.
- Giao diện hiển thị các sản phẩm. - Chức năng đặt hàng, giỏ hàng, thanh toán sản phẩm. - Lọc sản phẩm. Ưu điểm - Thiết kế đơn giản, dễ nhìn, dễ sử dụng, phân thành nhiều category trên sidebar.
- Ngoài nhận tại địa chỉ của mình Yame cho phép nhận hàng tại cửa hàng mà mình muốn. Nhược điểm - Chưa tích hợp thanh toán online. - Chức năng thanh toán chưa tối ưu, người dùng có thể cho thông tin ảo. - Chức năng đăng ký, đăng nhập chưa hoàn thiện.
Kết luận khảo sát thực trạng Qua những dữ liệu mà nhóm chúng em đã thu thập được của 3 hệ thống web app về buôn bán sản phẩm thời trang và để phù hợp với hiện hành chúng em đã chọn cái tên đề tài là “Xây dựng website bán quần áo sử dụng Spring Boot và ReactJS” bao gồm: - Đây là trang web về thương mại nên sẽ tập trung vào trải nghiệm người dùng cũng với các tính năng quan trọng thiết yếu. - Xây dựng với các chức năng thêm sửa xóa của các phần quản lý cho người quản trị viên. - Về hệ thống thì đảm nhiệm tốc độ xử lý hiển thị giao diện nhanh chóng không để người dùng phải chờ đợi lâu. - Sử dụng plugin chat Messenger từ Facebook (Meta) để có thể dễ dàng trao đổi trực tiếp với khách hàng một cách nhanh chóng.
- Sử dụng API thanh toán online bằng Momo giúp cho người dùng có thể dễ dàng thanh toán trước đơn hàng. XÁC ĐỊNH YÊU CẦU 1. Yêu cầu chức năng 1. Yêu cầu chức năng phía người dùng - Tìm kiếm sản phẩm theo tên.
- Xem danh sách tất cả sản phẩm. - Xem chi tiết thông tin của một sản phẩm. - Xem lịch sử đơn hàng đã đặt. - Chỉnh sửa thông tin tài khoản.
- Đăng ký tài khoản. - Thay đổi mật khẩu. - Quản lý địa chỉ giao hàng. - Hủy đơn hàng đã đặt.
- Lấy lại mật khẩu khi người dùng đã quên mật khẩu - Áp dụng voucher để giảm giá tiền 1. Yêu cầu chức năng phía quản trị viên - Quản lý thông tin sản phẩm. - Quản lý các danh mục. - Quản lý tài khoản người dùng.
- Quản lý các thuộc tính sản phẩm. - Quản lý voucher - Quản lý các bình luận đánh giá sản phẩm - Xác nhận đơn hàng. - Kích hoạt tài khoản người dùng. - Vô hiệu hóa tài khoản người dùng.
- Thống kê số lượng các thành phần trong cửa hàng 1.3 Yêu cầu chức năng hệ thống - Cung cấp chức năng phân quyền. - Cung cấp chức năng thanh toán trực tuyến. - Cung cấp chức năng chat trực tuyến từ plugin Messenger của Facebook. - Thông báo mail cho người dùng khi đơn hàng được cập nhật ở trạng thái mới Bảng 1.
Bảng yêu cầu nghiệp vụ STT Yêu cầu nghiệp vụ Loại yêu cầu Ghi chú 1 Thêm, chỉnh sửa thông tin sản phẩm mới Lưu trữ 2 Thêm thông tin tài khoản mới Lưu trữ 3 Thêm, chỉnh sửa thông tin danh mục Lưu trữ 22 4 Thêm, chỉnh sửa thông tin kích cỡ Lưu trữ 5 Thêm, chỉnh sửa thông tin màu Lưu trữ 6 Thêm, chỉnh sửa voucher Lưu trữ 7 Xem, lọc danh sách tài khoản Tra cứu (tìm kiếm) 8 Xem danh sách danh mục Tra cứu (tìm kiếm) 9 Xem danh sách kích cỡ Tra cứu (tìm kiếm) 10 Xem danh sách màu Tra cứu (tìm kiếm) 11 Xem danh sách đơn hàng Tra cứu (tìm kiếm) 12 Tính doanh thu của cửa hàng Tính toán 13 Thống kê số lượng sản phẩm Kết xuất 14 Áp dụng voucher khi thanh toán Tính toán 1.4 Yêu cầu phi chức năng - Giao diện bắt mắt, thân thiện với người dùng. - Tốc độ xử lý và tìm kiếm nhanh chóng, chính xác. - Có độ tin cậy cao. - Các thông tin của người dùng phải được bảo mật và mã hóa.
- Có thể dễ dàng mở rộng quy mô hệ thống. CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONT-END 2. Thư viện ReactJS 2. Khái niệm ReactJS là một thư viện chứa nhiều JavaScript mã nguồn mở được Facebook xây dựng và phát triển.
Thư viện này được sử dụng để tạo ra các ứng dụng trang web hấp dẫn với hiệu quả cao, tốc độ tải nhanh và khả năng tái sử dụng mã nguồn cao. Thư viện này ban đầu được phát triển và duy trì bởi Facebook nay còn được gọi với cái tên Meta, và sau đó dần được ứng dụng WhatsApp và Instagram. Và nó sẽ so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước để cập nhật ít thay đổi nhất trên DOM. Dữ liệu được truyền từ parent đến child thông qua props.
Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi. [1] Các thành phần nổi bật của thư viện ReactJS: JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Hơn thế nữa là JSX, một tính năng mà làm cho ReactJS thân thiện hơn. Các thuộc tính trong JSX được viết theo camelCase như class thành className.
Mã này sẽ dịch ngược lại Js thuần túy thông qua công cụ Babel, chuẩn hóa phiên bản ES6 thành ES5.