Xây dựng website bán giày với reactjs và spring book

TỔNG QUAN VỀ ĐỀ TÀI

Lý do chọn đề tài

Trong những năm gần đây, sự nâng cao chất lượng cuộc sống đã khiến giày trở thành một phụ kiện không chỉ để đi lại mà còn là một sản phẩm kinh doanh quan trọng Các hãng thời trang thường xuyên ra mắt những mẫu giày giới hạn, tạo nên cơ hội trao đổi và sưu tầm hấp dẫn cho người tiêu dùng.

Để đáp ứng nhu cầu và sự tiện lợi cho người sử dụng, nhóm đã quyết định xây dựng trang web kinh doanh giày, giúp khách hàng dễ dàng tiếp cận các sản phẩm giày.

Mục đích của đề tài này là làm rõ mô hình kinh doanh giày online, nghiên cứu các chức năng cần thiết cho một trang web bán giày, và xác định các khuyết điểm trong quá trình xây dựng Qua đó, nhằm phát triển một trang web kinh doanh giày thành công, đáp ứng nhu cầu của người sử dụng và người kinh doanh.

Mục tiêu đề tài

Mục tiêu chính của chúng tôi là xây dựng một website bán giày trực tuyến hiệu quả, đáp ứng nhu cầu mua sắm của người tiêu dùng và gia tăng giá trị kinh doanh cho cửa hàng Chúng tôi cam kết tạo ra trải nghiệm mua sắm giày trực tuyến tốt nhất cho khách hàng, đảm bảo tính bảo mật và an toàn, đồng thời cung cấp thông tin đầy đủ về sản phẩm để khách hàng dễ dàng lựa chọn sản phẩm phù hợp.

Các mục tiêu cụ thể của dự án bao gồm khảo sát và phân tích các website bán giày hiện có để xác định những yếu tố cần thiết cho một website kinh doanh giày trực tuyến Bên cạnh đó, dự án sẽ tạo ra một hệ thống quản lý toàn diện cho khách hàng, doanh thu, sản phẩm và đơn hàng, giúp người quản trị dễ dàng quản lý và đảm bảo tính chính xác của thông tin liên quan đến đơn hàng, sản phẩm và khách hàng.

Chương 1: Tổng quan đề tài

Xây dựng một website với giao diện đơn giản, dễ sử dụng và thân thiện với khách hàng là rất quan trọng Trang web cần cung cấp thông tin đầy đủ và chi tiết về các sản phẩm giày, bao gồm mô tả, hình ảnh, kích cỡ, giá cả và số lượng sẵn có, giúp khách hàng dễ dàng đặt mua trực tuyến hoặc tham khảo trước khi đến cửa hàng Ngoài ra, cần cung cấp thông tin chi tiết về các đơn hàng đã đặt để khách hàng theo dõi Đặc biệt, tính bảo mật và an toàn khi mua sắm trực tuyến và thanh toán online cần được đảm bảo thông qua các phương thức an toàn và tiện lợi.

Dự án xây dựng hệ thống máy chủ tại cửa hàng kinh doanh giày nhằm tạo điều kiện cho nhân viên quản lý và khách hàng có thể truy cập từ xa qua giao diện web Hệ thống cho phép khách hàng đặt mua sản phẩm và tham khảo thông tin sản phẩm trước khi đến cửa hàng mua trực tiếp.

− Phạm vi dữ liệu: o Dữ liệu các cửa hàng, các sản phẩm giày o Dữ liệu của khách hàng

− Công nghệ thực hiện: o Front-end: HTML, CSS, Bootstrap, Javascript, ReactJS o Back-end: Spring, PostgreSQL

Hệ thống yêu cầu phải gần gũi và dễ sử dụng cho khách hàng, đồng thời cho phép quản lý nhân viên và khách hàng một cách dễ dàng Việc nâng cấp và bảo trì hệ thống cũng cần được thực hiện một cách đơn giản Về phía người dùng, hệ thống cần đảm bảo tính an toàn và bảo mật trong quá trình đăng nhập, đồng thời mang lại hiệu quả cao và khả năng theo dõi các dịch vụ mới nhất một cách thuận tiện.

3 o Chức năng tìm kiếm đa dạng dễ dàng o Quản lý tài khoản nhân viên và khách hàng dễ dàng

− Ước lượng thời gian hoàn thành: o Khoảng 3 tháng o Ngày bắt đầu : 20/02/2023 o Ngày kết thúc: 29/05/2023

1.3.2 Các điều kiện ràng buộc

Trong trường hợp xảy ra lỗi trong thời gian bảo trì, nhóm sẽ chịu trách nhiệm toàn bộ tùy theo tình huống, và công ty dịch vụ hỗ trợ sẽ can thiệp để giải quyết vấn đề.

− Sau khi hoàn thành dự án, nhóm phát triển website phải xóa hết toàn bộ tài liệu cũng như thông tin phát triển dự án

Công ty không chấp nhận việc sản phẩm chậm trễ 20 ngày, cũng như nếu sản phẩm không đáp ứng đầy đủ các chức năng yêu cầu Hệ thống chạy chậm và thường xuyên báo lỗi sẽ gây ra sự không hài lòng cho cả công ty và khách hàng.

− Khi sản phẩm cần nâng cấp thì khách hàng sẽ chịu thêm chi phí phát sinh cho mỗi chức năng nâng cấp

− Xây dựng một website tiện dụng đối với những người có nhu cầu mua giày

− Hệ thống giúp cửa hàng quản lý các thông tin các sản phẩm, quản lý thông tin khách hàng và thanh toán chi phí dịch vụ

1.5.1 Khảo sát website https://kingshoes.vn

− Từ khóa tìm kiếm: web giày sneaker

Hình 1: Từ khóa tìm kiếm website https://kingshoes.vn

Trang web này chuyên cung cấp giày sneaker, nổi bật với banner lớn và chức năng tìm kiếm theo từ khóa, giúp người dùng dễ dàng tìm kiếm sản phẩm.

− Thanh công cụ với màu trắng cho cảm giác khá hài hòa.

Hình 2: Trang chủ website https://kingshoes.vn

Các sản phẩm được phân loại theo từng danh mục, giúp người dùng dễ dàng tìm kiếm Bên cạnh việc hiển thị sản phẩm, thông tin về khuyến mãi, giá cả và đánh giá của khách hàng cũng được cung cấp rõ ràng.

Hình 3: Trang sản phẩm website https://kingshoes.vn

Hình 4: Trang tin tức website https://kingshoes.vn

Hình 5: Thanh footer website https://kingshoes.vn

Trang chi tiết sản phẩm trên website được thiết kế hài hòa, đơn giản nhưng tinh tế, dễ sử dụng và dễ nhìn Nó đáp ứng đầy đủ các tính năng cơ bản như nút thêm vào giỏ hàng, nút mua ngay và thông tin sản phẩm Ngoài ra, trang còn hỗ trợ chức năng tìm giày theo size và khoảng giá, mang lại trải nghiệm mua sắm thuận tiện cho người dùng.

Hình 6: Trang chi tiết sản phẩm website https://kingshoes.vn

− Khi bấm vào nút thêm vào giỏ hàng thì sẽ thông báo đặt hàng thành công và biểu tượnng giỏ hàng sẽ tăng thêm một

Hình 7: Thông báo thêm sản phẩm thành công website https://kingshoes.vn

Khi khách hàng nhấn nút đặt hàng, giỏ hàng sẽ hiển thị cho phép thực hiện các thao tác như thêm số lượng hoặc xóa sản phẩm Sau đó, khách hàng có thể chọn nút ‘đặt hàng’ để chuyển đến trang thanh toán hoặc nút ‘mua tiếp’ để tiếp tục mua sắm.

Hình 8: Trang giỏ hàng website https://kingshoes.vn

Trang đặt hàng và thanh toán có giao diện đơn giản nhưng rất dễ sử dụng Người dùng có thể xem thông tin giỏ hàng bên phải và điền các thông tin cần thiết để mua hàng bên trái Sau khi hoàn tất, chỉ cần nhấn nút ‘tiếp tục đến phương thức thanh toán’ và cuối cùng là nhấn nút hoàn tất đơn hàng.

Hình 9: Trang checkout website https://kingshoes.vn

Hình 10: Trang đặt hàng website https://kingshoes.vn

Nhận xét: Trang web này được thiết kế khá hợp lý, đầy đủ các chức năng

Bố cục rõ ràng giúp người mua sử dụng một cách đơn giản mà hiệu quả

1.5.2 Khảo sát website https://giayxshop.vn

− Từ khóa tìm kiếm: xshop

Hình 11: Từ khóa tìm kiếm website https://giayxshop.vn

− Là website chuyên bán giày sneaker của Xshop Khi vào trang web, ta thấy được thanh điều hướng đến các mục giày khác nhau

Hình 12: Trang chủ website https://giayxshop.vn

− Kéo xuống, ta sẽ thấy danh mục các sản phẩm mới của Xshop

Hình 13: Sản phẩm bán chạy của website https://giayxshop.vn

− Tiếp theo là đánh giá của khách hàng về shop, các con số thống kê của cửa hàng cũng như các thông tin liên quan

Hình 14: Chỗ đánh giá website https://giayxshop.vn

− Kéo xuống dưới cùng là hiển thị thông tin chi tiết và chính sách của cửa hàng

Hình 15: Thanh footer website https://giayxshop.vn

Cửa hàng giày sử dụng phông màu trắng cho trang web, với thanh ngang hiển thị các danh mục thương hiệu giày và thanh dọc bên trái liệt kê danh mục sản phẩm Nội dung chính tập trung vào các mẫu giày Nike mà khách hàng đang tìm kiếm.

Hình 16: Trang danh sách sản phẩm website https://giayxshop.vn

Khi nhấp vào chi tiết sản phẩm, người dùng sẽ thấy hình ảnh của đôi giày đã chọn cùng với thông tin quan trọng như mô tả, giá cả và đánh giá từ khách hàng Bên phải màn hình có các nút để mua hàng và tìm hiểu về chính sách bán hàng.

Hình 17: Trang chi tiết sản phẩm website https://giayxshop.vn

Sau khi lựa chọn thông tin và đôi giày, khách hàng nhấn nút “Mua ngay” để chuyển đến trang giỏ hàng, nơi hiển thị các sản phẩm đã chọn Tại đây, khách hàng có thể nhập mã giảm giá để nhận ưu đãi Cuối cùng, khách hàng tiến hành thanh toán để hoàn tất giao dịch.

Hình 18: Trang giỏ hàng website https://giayxshop.vn

Khảo sát website

1.5.1 Khảo sát website https://kingshoes.vn

− Từ khóa tìm kiếm: web giày sneaker

Hình 1: Từ khóa tìm kiếm website https://kingshoes.vn

Website này chuyên cung cấp giày sneaker, với giao diện nổi bật nhờ banner lớn và tính năng tìm kiếm theo từ khóa.

− Thanh công cụ với màu trắng cho cảm giác khá hài hòa.

Hình 2: Trang chủ website https://kingshoes.vn

Kéo xuống dưới, bạn sẽ thấy các sản phẩm được phân loại theo từng danh mục Ngoài việc hiển thị sản phẩm, trang còn cung cấp thông tin về khuyến mãi, giá cả và đánh giá của khách hàng.

Hình 3: Trang sản phẩm website https://kingshoes.vn

Hình 4: Trang tin tức website https://kingshoes.vn

Hình 5: Thanh footer website https://kingshoes.vn

Trang chi tiết sản phẩm trên website được thiết kế hài hòa, đơn giản nhưng tinh tế, dễ sử dụng và dễ nhìn Nó cung cấp đầy đủ các tính năng cơ bản như nút thêm vào giỏ hàng, nút mua ngay và thông tin sản phẩm Ngoài ra, trang còn có chức năng tìm giày theo size và khoảng giá, giúp người dùng dễ dàng lựa chọn sản phẩm phù hợp.

Hình 6: Trang chi tiết sản phẩm website https://kingshoes.vn

− Khi bấm vào nút thêm vào giỏ hàng thì sẽ thông báo đặt hàng thành công và biểu tượnng giỏ hàng sẽ tăng thêm một

Hình 7: Thông báo thêm sản phẩm thành công website https://kingshoes.vn

Khi nhấn nút đặt hàng, giỏ hàng sẽ xuất hiện, cho phép khách hàng thực hiện các thao tác như thêm số lượng hoặc xóa sản phẩm Sau đó, khách hàng có thể chọn nút ‘đặt hàng’ để chuyển đến trang thanh toán hoặc nhấn nút ‘mua tiếp’ để tiếp tục mua sắm.

Hình 8: Trang giỏ hàng website https://kingshoes.vn

Trang đặt hàng và thanh toán được thiết kế đơn giản, dễ sử dụng Người dùng có thể xem thông tin giỏ hàng bên phải và điền các thông tin cần thiết để mua hàng bên trái Sau khi hoàn tất, chỉ cần nhấn nút ‘tiếp tục đến phương thức thanh toán’ và cuối cùng là nhấn nút hoàn tất đơn hàng.

Hình 9: Trang checkout website https://kingshoes.vn

Hình 10: Trang đặt hàng website https://kingshoes.vn

Nhận xét: Trang web này được thiết kế khá hợp lý, đầy đủ các chức năng

Bố cục rõ ràng giúp người mua sử dụng một cách đơn giản mà hiệu quả

1.5.2 Khảo sát website https://giayxshop.vn

− Từ khóa tìm kiếm: xshop

Hình 11: Từ khóa tìm kiếm website https://giayxshop.vn

− Là website chuyên bán giày sneaker của Xshop Khi vào trang web, ta thấy được thanh điều hướng đến các mục giày khác nhau

Hình 12: Trang chủ website https://giayxshop.vn

− Kéo xuống, ta sẽ thấy danh mục các sản phẩm mới của Xshop

Hình 13: Sản phẩm bán chạy của website https://giayxshop.vn

− Tiếp theo là đánh giá của khách hàng về shop, các con số thống kê của cửa hàng cũng như các thông tin liên quan

Hình 14: Chỗ đánh giá website https://giayxshop.vn

− Kéo xuống dưới cùng là hiển thị thông tin chi tiết và chính sách của cửa hàng

Hình 15: Thanh footer website https://giayxshop.vn

Cửa hàng giày sử dụng phông màu trắng cho trang web, giúp nổi bật các danh mục giày Thanh ngang hiển thị các hãng giày, trong khi thanh dọc bên trái liệt kê danh mục sản phẩm Nội dung chính tập trung vào các mẫu giày Nike mà khách hàng đang tìm kiếm.

Hình 16: Trang danh sách sản phẩm website https://giayxshop.vn

Khi nhấn vào chi tiết sản phẩm, bạn sẽ thấy hình ảnh của đôi giày đã chọn cùng với thông tin cần thiết như người dùng, mô tả sản phẩm và giá cả Bên phải là các nút để mua hàng và chính sách bán hàng.

Hình 17: Trang chi tiết sản phẩm website https://giayxshop.vn

Sau khi chọn thông tin và đôi giày, khách hàng nhấn nút “Mua ngay” để chuyển đến trang giỏ hàng, nơi hiển thị các sản phẩm đã chọn Tại đây, khách hàng có thể nhập mã giảm giá để nhận ưu đãi Cuối cùng, khách hàng tiến hành thanh toán để hoàn tất đơn hàng.

Hình 18: Trang giỏ hàng website https://giayxshop.vn

Khi khách hàng hoàn tất việc điền thông tin giao hàng, họ sẽ được chuyển đến trang thanh toán Tại đây, khách hàng có thể chọn thanh toán online hoặc thanh toán trực tiếp khi nhận hàng Sau khi xác nhận đơn hàng, cửa hàng sẽ bắt đầu chuẩn bị hàng cho khách.

Hình 19: Trang đặt hàng website https://giayxshop.vn

Trang web sở hữu thiết kế hấp dẫn và đầy đủ chức năng cần thiết cho người dùng Bố cục rõ ràng giúp khách hàng dễ dàng tìm kiếm thông tin.

1.5.3 Khảo sát website https://www.nike.com/vn

− Từ khóa tìm kiếm: sneaker store in australia

Hình 20: Từ khóa tìm kiếm website https://www.nike.com/vn

Trang chủ của website Nike sử dụng tông màu trắng chủ đạo, nổi bật với các hình ảnh quảng cáo sản phẩm mới như giày, quần áo và dụng cụ thể thao Thanh điều hướng được phân chia rõ ràng theo các danh mục cho nam, nữ và trẻ em Ở góc trái, người dùng có thể dễ dàng tìm kiếm sản phẩm và truy cập giỏ hàng.

Hình 21: Trang chủ website https://www.nike.com/vn

Cuối trang web, người dùng sẽ tìm thấy các danh mục sản phẩm nổi bật của Nike, cùng với thông tin hữu ích như địa chỉ cửa hàng, hỗ trợ khách hàng, điều khoản dịch vụ và thông tin liên lạc cần thiết.

Hình 22: Phần footer website https://www.nike.com/vn

− Tiếp theo, sẽ quan sát đến phần sản phẩm giày của Nike Thanh dọc bên trái là các loại giày của cũng như là các sản phẩm khác

Hình 23: Trang danh sách sản phẩm website https://www.nike.com/vn

Chọn sản phẩm Nike, chẳng hạn như đôi Nike Air Force 1, trang web được chia thành hai phần: bên trái hiển thị hình ảnh sản phẩm và bên phải cung cấp thông tin về kích thước, tên sản phẩm cùng với đánh giá và đặt hàng Đặc biệt, một số sản phẩm cho phép khách hàng tùy chỉnh thiết kế theo sở thích cá nhân.

Hình 24: Trang chi tiết sản phẩm website https://www.nike.com/vn

Sau khi nhấn nút đặt hàng, bạn sẽ thấy thông báo về sản phẩm cần đặt Tiếp theo, thông tin về giỏ hàng và báo giá sản phẩm sẽ được hiển thị Cuối cùng, bạn cần điền thông tin cá nhân và hoàn tất quy trình đặt hàng.

Hình 25: Giỏ hàng website https://www.nike.com/vn

Hình 26: Trang giỏ hàng website https://www.nike.com/vn

Trang web không chỉ cung cấp sản phẩm giày của Nike mà còn đa dạng với các mặt hàng như quần áo và dụng cụ thể thao Đặc biệt, người dùng có thể thiết kế giày theo ý thích cá nhân Quy trình đặt hàng cũng rất đơn giản và dễ sử dụng.

1.5.4 So sánh về ba trang web đã khảo sát

Giao diện bắt mắt, bố cục rõ ràng

Tốc độ tải Website Độ thân thiện, dễ sử dụng

Xếp hạng kingshoes.vn 7.5 7.5 7.5 3 giayxshop.vn 8 8 8 2

Bảng 1: So sánh ba trang web đã khảo sát

CƠ SỞ LÝ THUYẾT

React JS

ReactJS là thư viện JavaScript do các kỹ sư Facebook phát triển, được nhiều công ty lớn như Yahoo, Airbnb và Facebook, Instagram sử dụng để xây dựng sản phẩm Thư viện này phù hợp cho các dự án lớn với khả năng mở rộng tốt hơn so với các dự án nhỏ.

Một trong những ưu điểm nổi bật của ReactJS là virtual DOM, một thành phần ẩn bên trong mỗi view, giúp tối ưu hiệu suất Khi một view được gọi, tất cả thông tin sẽ được chuyển vào một bản sao ảo của DOM Sau khi hoàn tất quá trình gọi, React sẽ so sánh giữa DOM ảo và DOM thật, từ đó thực hiện các thay đổi cần thiết dựa trên kết quả so sánh.

Redux là thư viện JavaScript giúp quản lý trạng thái ứng dụng hiệu quả Được phát triển dựa trên nguyên tắc của ngôn ngữ Elm và kiến trúc Flux do Facebook giới thiệu, Redux thường kết hợp hoàn hảo với React Tuy nhiên, nó cũng có thể được sử dụng với các framework khác như Angular và Backbone.

2.1.2.2 Trạng thái (state) của ứng dụng

Một ứng dụng web thông thường nhận dữ liệu từ máy chủ (backend) và các thao tác của người dùng như nhập liệu và click chuột, tất cả được gọi là trạng thái của ứng dụng Khi nắm rõ trạng thái của ứng dụng tại một thời điểm nhất định, chúng ta có thể xác định dữ liệu mà ứng dụng đã nhận và các thao tác người dùng đã thực hiện.

Redux được xây dựng dựa trên ba nguyên lý cơ bản: Trạng thái (state) của toàn bộ ứng dụng được lưu trữ trong một store duy nhất, được biểu diễn dưới dạng một Object có cấu trúc cây.

Chương 2: Cơ sở lý thuyết

Để thay đổi trạng thái (state) trong ứng dụng, chỉ có một cách duy nhất là tạo ra một action, đó là một đối tượng mô tả những gì xảy ra Để xác định rõ trạng thái (state) tree được thay đổi bởi một action, chúng ta cần viết các pure reducers.

Hình 27: Nguyên lý hoạt động của redux [2]

Redux bao gồm bốn thành phần chính: Store, nơi quản lý và cập nhật trạng thái (state) cũng như lắng nghe sự thay đổi để cập nhật giao diện; Actions, là các đối tượng thuần túy định nghĩa kiểu hành động (type) và giá trị tham số (payload); Reducers, chịu trách nhiệm xác định cách thức thay đổi trạng thái và trả về trạng thái mới; và View, nơi hiển thị dữ liệu từ Store.

Redux cho phép chúng ta tạo ra một STORE để lưu trữ dữ liệu, thay vì giữ toàn bộ dữ liệu trong một component Khi có sự thay đổi, chúng ta chỉ cần sử dụng Redux để cập nhật dữ liệu trong STORE một cách đơn giản và hiệu quả.

2.1.3 Các khái niệm cơ bản trong react

JSX, viết tắt của Javascript Syntax Extension hay Javascript XML, là một ngôn ngữ kết hợp giữa HTML và JavaScript JSX được sử dụng chủ yếu trong việc phát triển ứng dụng React, giúp việc viết mã trở nên dễ dàng và trực quan hơn, mặc dù không bắt buộc phải sử dụng.

Thành phần trong giao diện người dùng (UI) là các đơn vị độc lập, có thể tái sử dụng và tách biệt, giúp xây dựng giao diện hoàn chỉnh Chúng hoạt động như những hàm có thể được gọi bất kỳ lúc nào trong ứng dụng web, mang lại tính linh hoạt và hiệu quả trong quá trình phát triển.

Có hai loại components trong React: Functional Components, được xây dựng dựa trên cú pháp function của JavaScript, và Class Components, dựa trên cú pháp class của JavaScript Functional Components thường dễ sử dụng hơn và đang dần thay thế Class Components do tính đơn giản và hiệu quả của chúng.

DOM ảo là một bản sao của DOM thật được lưu trữ trong bộ nhớ, với mỗi thành phần trong DOM ảo là phiên bản sao của một thành phần trong DOM thật.

Khi có sự thay đổi, React sẽ cập nhật DOM và so sánh DOM ảo mới với phiên bản trước đó để xác định các thay đổi Sau đó, React chỉ cập nhật những phần cần thiết của DOM thực, giúp giữ cho DOM ảo và thực luôn đồng nhất.

Props, short for properties, serve as the attributes of HTML specifically for React components They are objects that encapsulate all the attributes in key-value pairs, which are passed when the component is invoked.

Hooks là các hàm với mục đích xác định, được giới thiệu trong React 16.8 Chúng cho phép các thành phần chức năng tận dụng các tính năng của class components, mở rộng khả năng phát triển ứng dụng trong React.

Spring Boot

Spring Boot là một dự án phát triển từ ngôn ngữ Java trong hệ sinh thái Spring framework, giúp lập trình viên đơn giản hóa quá trình xây dựng ứng dụng Với Spring Boot, các lập trình viên có thể tập trung vào việc phát triển các tính năng kinh doanh mà không phải lo lắng về cấu hình phức tạp.

Spring Boot có nhiều tính năng nổi bật, bao gồm khả năng tạo ra các ứng dụng Spring độc lập và nhúng Tomcat mà không cần triển khai file WAR Nó cũng cung cấp starter dependency giúp đơn giản hóa cấu hình Maven, tự động chạy cấu hình Spring khi cần thiết, và không yêu cầu sinh code cấu hình hay cấu hình bằng XML.

▪ SpringApplication: Giúp cho các lập trình viên chỉ cần cấu hình ít Spring nhất, phần còn lại Spring Boot sẽ lo liệu

▪ Externalized Configuration: Spring Boot sẽ giúp cấu hình từ ngoài và ứng dụng sẽ có thể chạy thoải mái

▪ Profiles: Nếu có nhiều config khác nhau có thể sử dụng Profile để phân chia từng môi trường để dễ dàng quản lý hơn.

Amazon Lex

− Tạo chatbot bằng cách sử dụng Amazon Lex (văn bản) và AWS Lambda (python)

Amazon Lex có khả năng hiểu các truy vấn từ người dùng, xác định mục đích hoặc dữ liệu mà họ mong muốn Dữ liệu này sau đó được gửi tới AWS Lambda để được xử lý và cung cấp phản hồi phù hợp.

Trong bài viết này, chúng tôi trình bày thông số kỹ thuật cho một dự án sử dụng ngôn ngữ lập trình Python và các dịch vụ của Amazon Web Service, bao gồm Amazon Lex và Amazon Lambda Quy trình thực hiện dự án bắt đầu bằng việc sử dụng AWS Lambda làm môi trường lập trình Amazon Lex nhận dữ liệu đầu vào từ người dùng và hiển thị kết quả dưới dạng văn bản sau khi dữ liệu đã được xử lý bởi Amazon Lambda.

2.3.2 Tìm hiểu về Amazon Lex và Lamda

Amazon Lex là một nền tảng giao diện đàm thoại cho phép thiết kế chatbot có khả năng hiểu câu hỏi tự nhiên và duy trì cuộc trò chuyện Nhờ vào các chức năng học sâu, chatbot có thể xác định ý định của người dùng, hiểu ngữ cảnh và cung cấp câu trả lời chính xác Hệ thống này tích hợp công nghệ nhận dạng lời nói tự động (ASR) và hiểu ngôn ngữ tự nhiên (NLU) NLU, một nhánh của xử lý ngôn ngữ tự nhiên (NLP), tập trung vào việc phân tích ý nghĩa của câu, giúp phần mềm nhận diện các câu đồng nghĩa và xử lý từ có nhiều nghĩa.

Các yếu tố cơ bản trong thiết kế luồng tương tác bao gồm cách nói, ý định và vị trí Phát ngôn (Utterances) là các câu hỏi mẫu mà người dùng đặt ra cho chatbot, giúp Lex hiểu rõ hơn về ngôn ngữ tự nhiên Nhờ vào khả năng học sâu, Lex có thể suy diễn từ các biến thể câu hỏi và mở rộng vốn từ vựng để tiếp nhận các câu hỏi mới Ý định (Intent) là yếu tố mà Lex được đào tạo để phân tách theo mục đích cơ bản Cuối cùng, các giá trị bổ sung (Slots) là thông tin cần thiết cho những phát ngôn hoặc ý định cụ thể, giúp chatbot trả lời chính xác hơn khi có yêu cầu về dữ liệu bổ sung.

Amazon Lex đã tích hợp huấn luyện dữ liệu liên quan đến các giá trị bổ sung, khả năng hoán vị và kết hợp của chúng Điều này giúp chatbot nhận diện chính xác các câu hỏi và phát hiện các giá trị bổ sung mới khi chúng xuất hiện.

Chi phí sử dụng Amazon Lex cho phép người dùng xử lý miễn phí tối đa 10.000 yêu cầu văn bản và 5.000 yêu cầu giọng nói mỗi tháng trong năm đầu tiên.

2.3.2.2 Nguyên tắc hoạt động của Amazon Lex

Amazon Lex áp dụng các thuật toán huấn luyện để phát triển các mô hình NLU hiệu quả Mặc dù chi tiết cụ thể của các thuật toán này không được công bố, quá trình huấn luyện trong Amazon Lex thường bao gồm việc chuẩn bị dữ liệu huấn luyện, trong đó tập dữ liệu được xây dựng từ các ví dụ người dùng được gán nhãn với các ý định (intents) và thông tin cần trích xuất (entities) tương ứng.

• Câu người dùng: “Book a flight from New York to San Francisco on July 10 th ”

On July 10th, travelers departing from New York can expect to arrive in San Francisco The input data has undergone preprocessing to standardize the format, eliminate special characters, and complete other necessary steps to prepare for the training process.

• Chuẩn hóa dữ liệu: chuyển đổi chữ hoa thành thường, xóa các ký tự đặc biệt

• Tách từ: Câu người dùng được tách thành các từ riêng biệt như “Book”, “a”, “flight”, “from”, “New York”,

Vào ngày 10 tháng 7, tại San Francisco, Amazon Lex đã phát triển mô hình NLU bằng cách áp dụng các thuật toán học máy, bao gồm mạng neural Những thuật toán này giúp nhận diện các mẫu và mối quan hệ trong dữ liệu huấn luyện, từ đó dự đoán ý định và trích xuất thông tin từ đầu vào của người dùng.

• Nhận dạng ý định: Thuật toán NLU nhận ra ý định

“BookFlight” dựa trên ngữ cảnh chung và sự hiện diện của các từ khóa như "book" và "flight" trong đầu vào từ người dùng

Thuật toán trích xuất thông tin có khả năng xác định và lấy ra các dữ liệu liên quan từ đầu vào của người dùng, giúp nhận diện các thông tin quan trọng một cách hiệu quả.

“Departure City” là “New York”, “Destination City” là

Vào ngày 10 tháng 7, San Francisco sẽ là điểm đến lý tưởng Mô hình NLU được phát triển sẽ được tinh chỉnh và cải thiện thông qua việc huấn luyện trên các tập dữ liệu lớn.

Để đạt được hiệu suất tối ưu, cần thực hiện điều chỉnh các tham số mô hình NLU Việc đánh giá mô hình được thực hiện thông qua tập dữ liệu kiểm tra độc lập, đảm bảo rằng mô hình hoạt động chính xác và duy trì hiệu suất cao trên các dữ liệu mới.

Thuật toán NLU của Amazon Lex nhận diện ý định và trích xuất thông tin, từ đó tạo ra phản hồi phù hợp hoặc thực hiện các hành động liên quan theo yêu cầu của người dùng.

AWS Lambda là nền tảng điện toán không máy chủ, cho phép chạy mã theo các trình kích hoạt sự kiện Nền tảng này tự động quản lý và mở rộng tất cả tài nguyên cần thiết cho mã của người dùng.

Ý định của người dùng và các giá trị bổ sung được thu thập bởi Amazon Lex là yếu tố quan trọng để kích hoạt Lambda Dựa trên những thông tin này, Lambda sẽ xử lý dữ liệu và cung cấp phản hồi thích hợp cho người dùng thông qua Amazon Lex.

Thuật toán gợi ý sản phẩm

− Thuật toán gợi ý dựa trên nội dung – Content-based

− Phương pháp Content-based dựa trên việc so sánh sự giống nhau của các thành phần của một sản phẩm

Khi một người xem một bộ phim, hệ thống sẽ gợi ý những bộ phim tương tự dựa trên các yếu tố như "mô tả phim" và "diễn viên" Phương pháp này sử dụng dữ liệu từ các thành phần của bộ phim để xây dựng thuật toán gợi ý.

Hình 28: Tổng quát về hệ thống gợi ý [6]

Trong học máy, máy tính không thể nhận biết ký tự và từ ngữ Do đó, khi xử lý dữ liệu văn bản, chúng ta cần chuyển đổi chúng thành dạng số để máy tính có thể hiểu và phân tích.

− Countvectorizer là một phương thức dùng để chuyển đổi từ kiểu dữ liệu dạng text sang kiểu dữ liệu số

Hình 29: Ví dụ về hệ thống gợi ý

− Đoạn văn được chuyển đổi thành một ma trận như bên dưới

Countvectorizer chuyển đổi dữ liệu dạng văn bản thành định dạng dễ sử dụng cho các mô hình học máy và học sâu, đặc biệt trong lĩnh vực phân loại văn bản.

− Hãy đến với một ví dụ khác:

− Các tham số sử dụng trong phương thức Countvectorizer:

− Lowercase: chuyển các ký tự sang ký tự thường trước khi mã hóa Mặc định của “Lowercase” là “true” và có kiểu dữ liệu là Boolean

− Sự khác biệt giữa chữ thường và chữ hoa

Stop words là những từ không mang nhiều ý nghĩa trong câu và có thể bị loại bỏ mà không ảnh hưởng đến nội dung.

− Tự tạo danh sách “Stop words”

− Sklearn trong danh sách Stop words

− Phương thức cosine_similarity là phương thức trong ‘sklearn

Phương thức cosine_similarity là một kỹ thuật hiệu quả để đo lường sự tương đồng giữa các vector thông qua tính góc cosine giữa chúng Phương pháp này có thể được tính toán bằng công thức đơn giản, giúp xác định mức độ tương đồng giữa các đối tượng trong không gian vector.

▪ 𝐴 𝑖 𝐵 𝑖 : tần số xuất hiện của từ trong câu

▪ ∑ 𝑛 𝑖=1 : tổng số từ trong cả hai câu

− Ví dụ: o A = I love student o B = I love university in city

I love student university in city

YÊU CẦU NGƯỜI DÙNG

Yêu cầu nghiệp vụ

− Dự án phần mềm ở đây là website kinh doanh giày

− Người sử dụng phần mềm: quản lý website, nhân viên , khách hàng

Dự án xây dựng chương trình cung cấp dịch vụ du lịch nhằm thiết kế một trang web dễ sử dụng với nhiều tính năng linh hoạt, phục vụ tốt nhất cho nhu cầu của khách hàng.

▪ Dễ dàng tìm kiếm thông tin, tham khảo các sản phẩm

▪ Đặt hàng online, dễ dàng thanh toán chi phí o Về phía nhân viên:

▪ Quản lý các đơn hàng của khách

▪ Báo cáo lợi nhuận cho quản lý

▪ Quản lý tính toán chi phí, lợi nhuận của công ty o Về phía quản trị viên:

▪ Quản lý tài khoản của hệ thống

▪ Tất cả các tính năng nhanh chóng và chính xác.

Các phương pháp và cách tiếp cận

− Tìm hiểu, khảo sát quy trình quản lý sản phẩm trong cửa hàng

− Tìm hiểu những nhu cầu của khách hàng dựa vào đó để xây dựng phần mềm

− Thu nhập thông tin từ các dịch vụ du lịch tương tự và liên quan

− Đánh giá, kiểm tra, cho ra mắt (quảng cáo) hướng dẫn người dùng sử dụng dịch vụ.

Sản phẩm bàn giao cuối 29 CHƯƠNG 4: PHÂN TÍCH HỆ THỐNG

− Website bán giày có các chức năng chính sau: o Phía khách hàng:

▪ Đăng ký, đăng nhập vào hệ thống

▪ Tìm kiếm thông tin giày theo nhu cầu

▪ Xem thông tin chi tiết của giày được hiển thị trên trang web

▪ Thực hiện việc đặt giày online

▪ Quản lý thông tin, tài khoản cá nhân

Chương 3: Yêu cầu người dùng

▪ Bao gồm các chức năng của khách hàng

▪ Quản lý các đơn đặt hàng

Chương 4: Phân tích hệ thống

CHƯƠNG 4: PHÂN TÍCH HỆ THỐNG

Xác định vai trò actor trong lược đồ Use case

Guest Khách hàng chưa đăng ký tài khoản muốn xem sản phẩm trên website

User Khách hàng đã đăng ký tài khoản muốn mua sắm giày trên website cửa hàng Moderator Nhân viên làm việc của cửa hàng

Admin Quản lý cửa hàng

Bảng 2: Xác định vai trò actor trong lược đồ Use Case

Mô tả vai trò của người dùng

4.2.1 Chi tiết vai trò actor

● Xem chi tiết sản phẩm

● Quản lý thông tin cá nhân

● Xem chi tiết sản phẩm

● Xem sản phẩm trong giỏ hàng

● Thêm sản phẩm trong giỏ hàng

● Chỉnh sửa sản phẩm trong giỏ hàng

● Xóa sản phẩm trong giỏ hàng

● Xem đơn hàng đã đặt

● Quản lý thông tin khách hàng

● Quản lý giao dịch online

● Quản lý size của mỗi sản phẩm

● Quản lý hình ảnh của mỗi sản phẩm

● Quản lý thông tin tài khách hàng

● Quản lý giao dịch online

● Quản lý size của mỗi sản phẩm

● Quản lý hình ảnh của mỗi sản phẩm

Bảng 3: Chi tiết vai trò actor

STT Chức năng Mô tả

1 Đăng nhập Đăng nhập vào trang web

2 Đăng ký Tạo một tài khoản mới

3 Đăng xuất Đăng xuất khỏi trang web

4 Quên mật khẩu Lấy lại mật khẩu mới

5 Quản lý tài khoản Xem, sửa thông tin tài khoản

6 Quản lý thông tin user Xem, sửa thông tin user

7 Quản lý sản phẩm Xem, thêm, sửa sản phẩm

8 Quản lý size của mỗi sản phẩm Xem, thêm, sửa, xóa size của sản phẩm

9 Quản lý hình ảnh của mỗi sản phẩm Xem, thêm, sửa hình ảnh của sản phẩm

10 Quản lý đơn hàng Xem, cập nhật thông tin đơn hàng

11 Quản lý danh mục Xem, thêm, sửa danh mục

12 Xem sản phẩm Xem danh sách sản phẩm đang có trên website

13 Xem chi tiết sản phẩm Xem thông tin chi tiết của sản phẩm

14 Gợi ý sản phẩm Gợi ý sản phẩm dựa trên thông tin của sản phẩm xem chi tiết

15 Quản lý thông tin cá nhân Xem, sửa thông tin cá nhân

17 Đặt hàng Có 2 hình thức thanh toán: COD và online bằng paypal

18 Xem đơn hàng đã đặt Xem, hủy đơn hàng đã đặt

19 Hủy đơn hàng đã đặt

20 Xem chi tiết đơn hàng đã đặt

22 Thêm sản phẩm vào giỏ hàng

23 Sửa sản phẩm trong giỏ hàng

24 Xóa sản phẩm trong giỏ hàng

25 Quản lý bình luận Xem, thêm, sửa, xóa bình luận

29 Xem doanh thu Xem doanh thu theo ngày, tháng, năm

30 Quản lý voucher Xem, thêm, sửa xóa voucher

31 Quản lý giao dịch online Xem danh sách giao dịch, hoàn tiền cho những đơn hàng thanh toán online đã hủy

32 Chatbot Phản hồi tự động các yêu cầu được tạo sẵn

Bảng 4: Chi tiết chức năng

Lược đồ Use case

Hình 36: Lược đồ Use case

Đặc tả Use case

Brief Description Cho phép Admin, mod, user đăng nhập vào hệ thống

Admin, mod được cấp tài khoản, user đã tạo tài khoản

Title Description Đăng nhập vào hệ thống thành công

1 Truy cập vào trang đăng nhập

4 Hệ thống xác thực thông tin đăng nhập [E1]

5 Thông báo đăng nhập thành công và điều hướng vào trang home [A1]

[A1] Nếu thông tin cá nhân của user chưa được cập nhật sẽ được điều hướng đến trang thông tin cá nhân

E1 Tài khoản hoặc mật khẩu không hợp lệ sẽ thông báo lỗi và quay lại bước 2

Bảng 5: Đặc tả đăng nhập

Brief Description Cho phép guest đăng ký tài khoản

Người dùng đăng ký tài khoản thành công

1 Người dùng vào trang đăng ký

2 Người dùng nhập thông tin đăng ký

4 Hệ thống kiểm tra thông tin đăng ký [E1]

5 Thông báo đăng ký tài khoản thành công

[E1] Tài khoản đăng ký không hợp lệ sẽ thông báo lỗi và về bước 2

Bảng 6: Đặc tả đăng ký

Brief Description Cho phép user lấy lại mật khẩu

Người dùng đã có tài khoản và đã cập nhật thông tin tài khoản hợp lệ Email và số điện thoại của tài khoản phải là thật.

1 Người dùng vào trang quên mật khẩu

2 Người dùng nhập thông tin cần cung cấp

4 Hệ thống kiểm tra thông tin tài khoản [E1]

5 Thông báo thành công và mật khẩu sẽ được gửi đến email của tài khoản

[E1] Thông tin tài khoản không hợp lệ sẽ thông báo lỗi và về bước 2

Bảng 7: Đặc tả quên mật khẩu

Name Quản lý toản khoản

Cho phép admin quản lý danh sách tài khoản

1 Đăng nhập thành công với tài khoản có quyền admin.

2 Bấm vào nút ‘Manage’ trên thanh Header để truy cập vào trang quản lý.

Success Admin có thể chỉnh sửa thông tin user trên danh sách hiển thị.

2 Hệ thống sẽ hiển thị danh sách tài khoản

3 Admin thực chỉnh sửa thông tin user bằng cách bấm chọn biểu tượng chỉnh sửa để hiển thị form điền

4 Admin điền thông tin vào form để cập nhật thông tin tài khoản [A1]

5 Hệ thống kiểm tra thông tin [E1]

[A1] Admin bấm dấu x và quay về bước 2

[E1] Thông tin không hợp lệ sẽ thông báo không cập nhật thành công và quay về bước 2.

Bảng 8: Đặc tả quản lý tài khoản

Name Quản lý sản phẩm.

Cho phép admin, mod quản lý giày trên hệ thống, có thể thêm mới, chỉnh sửa.

1 Đăng nhập thành công với tài khoản có quyền admin hoặc mod.

Success Admin, mod thực hiện được các thao tác thêm, sửa sản phẩm.

2 Hệ thống sẽ hiển thị danh sách sản phẩm

Thêm sản phẩm mới 3.1 Bấm chọn ‘New Product’ để hiển thị form điền thông tin 3.2 Nhập thông tin cần thiết [A1]

Chỉnh sửa sản phẩm 3.1 Bấm chọn biểu tượng chỉnh sửa để hiện form điền thông tin.

3.2 Nhập thông tin cần thiết [A1], E[1]

[A1] Admin dấu x và quay về bước 2

[E2] Ở mục ‘status’ nếu danh sách hình ảnh và size của sản phẩm trống sẽ thông báo lỗi khi bấm chọn vào ‘active’

Thông tin không hợp lệ sẽ thông báo lỗi và quay về bước 2.

Bảng 9: Đặc tả quản lý sản phẩm

4.4.6 Quản lý size của mỗi sản phẩm

Name Quản lý size của mỗi sản phẩm

Cho phép admin, mod quản lý size của mỗi sản phẩm, có thể thêm mới, chỉnh sửa hoặc xóa size.

1 Đăng nhập thành công với tài khoản có quyền admin hoặc mod

Success Admin, mod thực hiện được các thao tác thêm, sửa hình ảnh sản phẩm

1 Hiển thị danh sách sản phẩm

2 Bấm chọn biểu tượng size tương ứng với mỗi sản phẩm

3 Hệ thống sẽ hiển thị danh sách size của sản phẩm tương ứng [A1]

4.1 Điền thông tin cần thiết.

4.1 Bấm chọn biểu tượng chỉnh sửa của size để tự động điền thông tin lên form.

Xóa size 4.1 Bấm chọn biểu tượng xóa của size.

4.2 Hộp xác nhận hiện ra.

4.3 Chọn ‘Yes’ để xóa size [A3]

Admin bấm dấu ‘x’ trên góc phải khung ảnh và quay về bước 1. Admin bấm ‘Cancel’ và quay về bước 4

Admin bấm ‘No’ hoặc dấu x và quay về bước 4

Bảng 10: Đặc tả quản lý size của mỗi sản phẩm

4.4.7 Quản lý hình ảnh của mỗi sản phẩm

Name Quản lý hình ảnh của mỗi sản phẩm

Cho phép admin, mod quản lý hình ảnh của mỗi sản phẩm, có thể thêm hoặc chỉnh sửa hình ảnh.

Success Admin, mod thực hiện được các thao tác thêm, sửa hình ảnh sản phẩm

1 Bấm chọn biểu tượng hình ảnh tương ứng với mỗi sản phẩm

2 Hệ thống sẽ hiển thị danh sách hình ảnh của sản phẩm tương ứng

3.1 Bấm chọn ‘Add Image’ để hiển thị khung chứa ảnh.

3.1 Bấm chọn biểu tượng chỉnh sửa của ảnh để hiện khung chứa ảnh.

4 Bấm nút ‘Browse’ và chọn hình ảnh [A1]

5 Hình ảnh hiển thị trong khung ảnh [A2]

Bấm nút ‘Save’ để lưu thay đổi

6 Hệ thống xử lý thông tin

Bấm dấu ‘x’ trên góc phải khung ảnh và quay về bước 2.

Bấm nút ‘Cancel’ và quay về bước 4

Bảng 11: Đặc tả quản lý hình ảnh của mỗi sản phẩm

Name Quản lý đơn hàng

Brief Description Cho phép admin, mod quản lý các đơn hàng của cửa hàng để cập nhật trạng thái của đơn hàng.

1 Đăng nhập thành công với tài khoản có quyền admin hoặc mod.

Success Admin, mod thực hiện xem chi tiết và cập nhật trạng thái đơn hàng.

1 Người dùng bấm vào nút ‘Orders’ trên thanh sidebar

2 Hệ thống hiển thị danh sách đơn hàng

Xem chi tiết đơn hàng 3.1 Thực hiện bấm vào biểu tượng xem chi tiết để hiển thị form chi tiết của đơn hàng

3.2 Chi tiết đơn hàng hiển thị [A1]

Thay đổi trạng thái đơn hàng 3.1 Bấm chọn hộp select ở cột ‘status’

3.2 Hiển thị danh sách trạng thái Hủy đơn hàng 3.2.1 Bấm chọn ‘Cancel’ để

3.3 Hệ thống cập nhật đơn hàng [E1]

3.4 Thông báo cập nhật thành công

[A1] Bấm dấu x và quay lại bước 2

[E1] Cập nhật thất bại và quay về bước 2.

Bảng 12: Đặc tả quản lý đơn hàng

Giúp user, guest xem được tất cả các loại giày cửa hàng, có thể xem theo danh mục giày.

Success Người dùng xem được danh sách giày đang bán của cửa hàng và danh mục giày.

1 Bấm vào nút ‘Shoes’ trên thanh Header để truy cập vào trang sản phẩm

2 Hệ thống hiển thị danh sách giày và danh sách danh mục đang bán của cửa hàng

- Xem giày theo danh mục giày bằng cách bấm chọn danh mục cần xem

- Lọc giày theo price và size

- Tìm kiếm theo tên giày

4 Hiển thị danh sách giày

Bảng 13: Đặc tả xem sản phẩm

Brief Description Gợi ý những sản phẩm tương đồng với sản phẩm khách hàng lựa chọn xem chi tiết

Success Hiển thị danh sách sản phẩm gợi ý ở trang thông tin chi tiết của giày đã chọn

1 Người dùng bấm vào giày muốn xem trong danh sách giày hiển thị

2 Danh sách sản phẩm gợi ý hiển thị ở phía dưới trang chi tiết sản phẩm

Bảng 14: Đặc tả xem chi tiết sản phẩm

4.4.11 Quản lý thông tin cá nhân

Name Quản lý thông tin cá nhân

Brief Description Cho phép user xem thông tin cá nhân và chỉnh sửa

Title Description Đăng nhập tài khoản có quyền User

Success Người dùng có thể thực hiện sửa thông tin cá nhân.

1 Người dùng bấm vào biểu tượng thông tin cá nhân

2 Hệ thống hiển thị các thông tin của user

3 Người dùng thực hiện: Chỉnh sửa thông tin cá nhân bằng cách điền trực tiếp thông tin cần chỉnh sửa vào form thông tin

4 Người dùng bấm nút ‘Save Changes’ để lưu thông tin đã chỉnh sửa [E1]

5 Hệ thống thực hiện cập nhật thông tin user [E2]

6 Thông báo cập nhật thành công

Thông tin không hợp lệ hoặc thiếu sót sẽ dẫn đến thông báo lỗi Khi thông tin không hợp lệ được nhập, hệ thống sẽ thông báo cập nhật không thành công và quay lại bước 2.

Bảng 15: Đặc tả quản lý thông tin cá nhân

Name Thay đổi mật khẩu

Cho phép user thay đổi mật khẩu tài khoản của mình

1 Đăng nhập tài khoản có quyền User

2 Người dùng bấm vào biểu tượng thông tin cá nhân trên thanh Header

Success Người dùng có thể thực hiện sửa thông tin cá nhân.

1 Người dùng bấm vào nút ‘Change Password’

2 Hệ thống hiển thị form nhập mật khẩu mới và mật khẩu hiện tại

3 Người dùng thực hiện: nhập mật khẩu mới và mật khẩu hiển tại

4 Người dùng bấm nút ‘Save’ để thay đổi mật khẩu [E1]

5 Hệ thống thực hiện kiểm tra thông tin [E2]

6 Thông báo cập nhật thành công

Thông tin bị thiếu hoặc không đúng định dạng sẽ thông báo lỗi. Mật khẩu hiện tại không đúng sẽ xuất hiện thông báo lỗi.

Bảng 16: Đặc tả thay đổi mật khẩu

Brief Description Cho phép user thực hiện đặt hàng

1 Đăng nhập thành công bằng tài khoản user

2 Người dùng bấm vào biểu tượng giỏ hàng trên thanh Header

3 Có sản phẩm trong giỏ hàng

4 Bấm chọn ‘Check out’ để đi đến trang thanh toán

Success Thông báo đặt hàng thành công

1 Người dùng chỉnh sửa (nếu user đã cập nhật thông tin cá nhân) hoặc điền thông tin vào form ‘Delivery Information’

3 Chọn hình thức thanh toán

3.2 Người dùng bấm nút ‘Order’ [E1]

3.2 Người dùng bấm nút ‘Paypal’ [E1]

3.3 Form thanh toán paypal hiển thị 3.4 Nhập thông tin thanh toán

4 Hệ thống khởi tạo đơn hàng

5 Thông báo khởi tạo thành công

6 Gửi mail xác nhận đến mail của người dùng

Thông tin bị thiếu hoặc không đúng định dạng sẽ thông báo lỗi

Thông tin paypal không họp lệ sẽ không thể tạo đơn hàng

Bảng 17: Đặc tả đặt hàng

4.4.14 Xem đơn hàng đã đặt

Name Xem thông tin những đơn hàng đã đặt

Brief Description Cho phép user xem những đơn hàng và chi tiết của từng đơn hàng mình đã đặt

Người dùng đăng nhập vào hệ thống với quyền User.

Success Người dùng xem được đơn hàng và chi tiết đơn hàng.

1 Người dùng bấm vào nút ‘Orders’ trên thanh Header

2 Hệ thống hiển thị lịch sử đơn hàng

3 Người dùng bấm chọn biểu tượng ‘xem chi tiết’ của đơn hàng muốn xem

4 Hiển thị chi tiết đơn hàng

Bảng 18: Đặc tả xem thông tin đơn hàng đã đặt

Brief Description Cho phép user hủy những đơn hàng vẫn đang ở trạng thái

1 Đăng nhập với tài khoản quyền User

2 Nhấn vào nút ‘Order History’ trên thanh header để truy cập vào trang hiển thị danh sách lịch sử đơn hàng

Success Người dùng hủy thành công đơn hàng.

1 Danh sách đơn hàng hiển thị

2 Người dùng bấm vào biểu tượng hủy đơn hàng

3 Hộp xác nhập hiển thị

4 Người dùng chọn ‘Yes’ để hủy đơn hàng [A1]

5 Thông báo hủy thành công

[A1] Chọn ‘No’ hoặc dấu x để không hủy và quay về bước 1.

Bảng 19: Đặc tả hủy đơn hàng

Brief Description Cho phép user xem chi tiết giỏ hàng của mình

Người dùng đã đăng nhập vào hệ thống với quyền user.

Success Người dùng xem được thông tin chi tiết của giỏ hàng

2 Hệ thống hiển thị sản phẩm và thông tin sản phẩm có trong giỏ hàng [A1]

[A1] Giỏ hàng rỗng sẽ hiển thị thông báo

Bảng 20: Đặc tả xem giỏ hàng

4.4.17 Thêm sản phẩm vào giỏ hàng

Name Thêm sản phẩm vào giỏ hàng

Brief Description Cho phép user đã thêm sản phẩm vào giỏ hàng

2 Người dùng bấm vào nút ‘Shoes’ trên Header

Success Thông báo đặt hàng thành công

1 Người dùng chọn sản phẩm muốn mua để vào trang chi tiết của sản phẩm

2 Người dùng chọn số lượng và size theo nhu cầu

3 Người dùng bấm vào nút ‘Add to cart’

4 Hệ thống kiểm tra thông tin để thêm sản phẩm vào giỏ hàng [E1]

5 Thông báo thêm thành công

[E1] Hệ thống kiểm tra thông tin không hợp lý hoặc bị thiếu sẽ báo lỗi

Bảng 21: Đặc tả thêm sản phẩm vào giỏ hàng

4.4.18 Sửa sản phẩm trong giỏ hàng

Name Chỉnh sửa sản phẩm trong giỏ hàng

Brief Description Cho phép user chỉnh sửa số lượng sản phẩm trong giỏ hàng.

Success Thông báo chỉnh sửa thành công

1 Hiển thị danh sách sản phẩm trong giỏ hàng

2 Người dùng bấm vào nút ‘+’ hoặc ‘-’ để tăng giảm số lượng trên dòng sản phẩm hoặc chỉnh sửa số trong ô input (sau đó làm mất focus của ô input)

3 Hệ thống kiểm tra thông tin để để cập nhật giỏ hàng [E1]

4 Thông báo thay đổi thành công

[E1] Thông tin không hợp lý sẽ xuất hiện thông báo lỗi và trả về giá trị hiện tại của giỏ hàng.

Bảng 22: Đặc tả sửa sản phẩm trong giỏ hàng

4.4.19 Xóa sản phẩm trong giỏ hàng

Name Chỉnh sửa sản phẩm trong giỏ hàng

Brief Description Cho phép user xóa sản phẩm trong giỏ hàng.

2 Người dùng bấm vào biểu tượng giỏ hàng trên

Success Thông báo xóa phẩm công

1 Người dùng biểu tượng xóa hoặc bấm chọn nút giảm số lượng về 0 trên dòng sản phẩm

2 Hệ thống kiểm tra thông tin

3 Thông báo xóa thành công

Bảng 23: Đặc tả xóa sản phẩm trong giỏ hàng

Brief Description Cho phép admin, mod, user thêm bình luận vào sản phẩm.

2 Truy cập vào sản phẩm muốn bình luận

Success Thông báo bình luận thành công

4 Thông báo bình luận thành công

Bảng 24: Đặc tả thêm bình luận

Brief Description Cho phép user, mod xóa bình luận của mình.

Cho phép admin xóa bình luận của mọi người.

Success Thông báo xóa thành công

1 Bấm vào nút ‘Delete’ trên dòng bình luận

3 Thông báo xóa thành công

Bảng 25: Đặc tả xóa bình luận

Brief Description Cho phép admin, mod xem doanh thu của cửa hàng.

Title Description Đăng nhập vào hệ thống với quyền admin hoặc mod

Success Người dùng xem được thông tin doanh thu hàng tháng theo năm, doanh thu theo ngày và theo tháng.

1 Người dùng bấm nút ‘Manage’ trên thanh Header

2 Điều hướng đến trang quản lý

Xem doanh thu hàng tháng theo năm.

4.1 Bấm chọn ‘Monthly Revenue By Year’ hiển thị biểu đồ doanh thu năm hiện tại.

4.2 Thay đổi năm muốn xem bằng cách chọn năm khác.

Xem doanh thu theo tháng

4.1 Bấm chọn ‘Statistics By Month’ hiển thị biểu đồ doanh thu tháng hiện tại.

4.2 Thay đổi tháng muốn xem bằng cách chọn tháng khác.

Xem doanh thu theo ngày

4.1 Bấm chọn ‘Statistics By Date’ hiển thị biểu đồ doanh thu ngày hiện tại.

4.2 Thay đổi ngày muốn xem bằng cách chọn ngày khác.

Bảng 26: Đặc tả xem doanh thu

Giúp admin, mod quản lý danh mục voucher đang có của cửa hàng, có thể thêm mới, chỉnh sửa, xóa.

Success Admin thực hiện được các thao tác thêm, sửa, xóa voucher

1 Admin bấm vào nút ‘Voucher

2 Hệ thống sẽ hiển thị danh sách voucher

Thêm voucher mới 3.1 Bấm chọn ‘New Voucher để hiển thị form điền thông tin

3.2 Nhập thông tin cần thiết [A1]

Chỉnh sửa voucher 3.1 Bấm chọn biểu tượng chỉnh sửa để hiện form điền thông

Xóa voucher 3.1 Bấm chọn biểu tượng xóa để hiện hộp xác nhận.

Bấm ‘x’ trên góc phải để hủy thao tao và quay về bước 2 Bấm ‘No’ để hủy thao tác và quay về bước 2

[E1] Thông tin không hợp lệ sẽ thông báo không cập nhật thành công và quay về bước 2

Bảng 27: Đặc tả quản lý voucher

4.4.24 Quản lý giao dịch online

Name Quản lý giao dịch online

Giúp admin, mod quản lý các giao dịch online của cửa hàng, có thể thêm tiến hành hoàng tiền các đơn hàng thanh toán online đã hủy.

1 Đăng nhập thành công với tài khoản có quyền admin, mod.

1 Admin bấm vào nút ‘Paypal Transaction’

2 Hệ thống sẽ hiển thị các thông tin giao dịch online

Chọn khoảng thời gian để hiển thị giao dịch

3.1 Bấm vào nút “start date” để chọn ngày băt đầu

3.2 Bấm vào nút “start date” để chọn ngày kết thúc

3.3 Hiển thi danh sách giao dịch’

Hoàn tiền những giao dịch đã hủy

3.2 Hộp xác nhận hiện ra 3.3 Bấm chọn “Yes” [A1]

[A1] Bấm ‘No’ để hủy thao tác và quay về bước 2

[E1] Thông tin không hợp lệ sẽ thông báo không cập nhật thành công và

Bảng 28: Đặc tả quản lý giao dịch online

Hỗ trợ người dùng tìm kiếm thông tin về giày và theo dỗi đơn hàng

Người dùng truy cập vào trang web

1 Bấm vào biểu tượng “Messenger” ở góc phải bên dưới màn hình

Tìm kiếm giày theo danh mục

3.1 Nhập từ khóa “Find shoe by category”

Tìm kiếm giày theo tên

3.1 Nhập từ khóa “Find shoe by name”

Theo dỗi đơn hàng 3.1 Nhập từ khóa “My order”

3.2 Nhập tên id của order

4 Hệ thống kiểm tra thông tin

Name Quản lý danh mục sản phẩm

Giúp admin, mod quản lý danh mục sản phẩm đang có của cửa hàng, có thể thêm mới hoặc chỉnh sửa.

Success Admin thực hiện được các thao tác thêm, sửa danh mục

1 Admin bấm vào nút ‘Categories’

2 Hệ thống sẽ hiển thị danh sách danh mục

3.1 Bấm chọn ‘New Category’ để hiển thị form điền thông tin

3.1 Bấm chọn biểu tượng chỉnh sửa để hiện form điền thông tin.

[A1] Admin bấm hủy và quay về bước 2

[E1] Thông tin không hợp lệ sẽ thông báo không cập nhật thành công và quay về bước 2

Bảng 30: Đặc tả quản lý danh mục

Lược đồ Sequence 68

Hình 37: Lược đồ sequence đăng nhập

Hình 38: Lược đồ sequence đăng ký

Hình 39: Lược đồ sequence quản lý tài khoản

Hình 40: Lược đồ sequence quản lý sản phẩm

4.5.5 Quản lý size của mỗi sản phẩm

Hình 41: Lược đồ sequence quản lý size mỗi sản phẩm

4.5.6 Quản lý hình ảnh của mỗi sản phẩm

Hình 42: Lược đồ sequence quản lý hình ảnh mỗi sản phẩm

Hình 43: Lược đồ sequence quản lý đơn hàng

Hình 44: Lược đồ sequence xem sản phẩm

4.5.9 Xem chi tiết sản phẩm

Hình 45: Lược đồ sequence xem chi tiết sản phẩm

4.5.10 Quản lý thông tin cá nhân

Hình 46: Lược đồ sequence quản lý thông tin cá nhân

Hình 47: Lược đồ sequence thay đổi mật khẩu

Hình 48: Lược đồ sequence đặt hàng

4.5.13 Xem thông tin đơn hàng đã đặt

Hình 49: Lược đồ sequence xem thông tin đơn hàng đã đặt

Hình 50: Lược đồ sequence hủy đơn hàng

Hình 51: Lược đồ sequence xem giỏ hàng

Hình 52: Lược đồ sequence thêm sản phẩm vào giỏ hàng

4.5.17 Sửa sản phẩm trong giỏ hàng

Hình 53: Lược đồ sequence sửa sản phẩm trong giỏ hàng

4.5.18 Xóa sản phẩm trong giỏ hàng

Hình 54: Lược đồ sequence xóa sản phẩm trong giỏ hàng

Hình 55: Lược đồ sequence thêm bình luận

Hình 56: Lược đồ sequence xem doanh thu

Hình 57: Lược đồ activity quản lý danh mục

Chương 5: Thiết kế hệ thống

THIẾT KẾ HỆ THỐNG 82

Thiết kế database 82

5.1.2.1 accounts(id, username, password, created_by, created_date, modified_by, modifed_date, status)

Stt Attribute Loại Domain Mô tả

1 id Int8 Primary Key Id của account

4 created_by varchar Ngày tạo account

5 created_date varchar Người tạo account

6 modified_by varchar Người cập nhật

7 modified_date varchar Ngày cập nhật

8 status varchar Trạng thái của account

5.1.2.2 Images(id, link, product_id ,created_by, created_date, modified_date, modified_by, status)

1 id Int8 Primary Key Id của ảnh

3 product_id Int8 Primary Key Id của sản phẩm

4 created_by varchar Ngày tạo ảnh

5 created_date varchar Người tạo ảnh

6 modified_by varchar Người cập nhật

7 modified_date varchar Ngày cập nhật

8 status varchar Trạng thái ảnh

5.1.2.3 line_item_orders(id, size, total, status, order_id, product_id)

1 id Int8 Primary Key Id

2 size varchar Size của sản phẩm

5 order_id Int8 Foreign key Id của đơn hàng

6 product_id Int8 Foreign key Id của sản phẩm

Bảng 33: Bảng line_item_orders

5.1.2.4 line_items(id, size, status, total, amount, product_id, wish_list_id)

1 id Int8 Primary Key Id

5 amount varchar Số lượng sản phẩm

7 wish_list_id Int8 Foreign key Id của wish list

5.1.2.5 product_infors(id, size, amount, product_id)

1 id Int8 Primary Key Id thông tin sản phẩm

3 amount varchar Số lượng sản phẩm

5.1.2.6 products(id, name, price, description, created_by, created_date, modified_date, modifid_by, status, category_id)

1 id Int8 Primary Key Id của sản phẩm

2 name varchar Tên sản phẩm

3 price varchar Giá sản phẩm

4 description varchar Mô tả sản phẩm

5 created_by varchar Người tạo sản phẩm

6 created_date varchar Ngày tạo sản phẩm

7 modified_by varchar Người sửa sản phẩm

8 modified_date varchar Ngày sửa sản phẩm

9 status varchar Trạng thái sản phẩm

10 category_id Int8 Foreign key Id của danh mục

1 id Int8 Primary Key Id của size

3 value varchar Giá trị của size

5.1.2.8 users(id, name, phone, type, address, age, email, gender, status, account_id)

1 id Int8 Primary Key Id của người dùng

2 name varchar Tên người dùng

3 phone varchar Số điện thoại

4 type varchar Loại người dùng

7 email varchar Email người dùng

9 status varchar Trạng thái người dùng

10 account_id Int8 Foreign key Id của tài khoản

5.1.2.9 wish_lists(id, user_id, amount_item)

1 id Int8 Primary Key Id của wish list

2 user_id Int8 Foreign key Id của người dùng

3 amount_item varchar Số lượng sản phẩm

5.2 Giao diện và thiết kế quy trình

− Bước 1: Nhập username và password

− Bước 2: Bấm nút ‘Login’ để tiến hành đăng nhập

Hình 60: Giao diện trang đăng nhập

− Bước 1: Nhập username, password và confirm password

− Bước 2: Bấm nút ‘SignUp’ để đăng ký tài khoản

Hình 61: Giao diện trang đăng ký

− Bước 1: Nhập username, phone và email

− Bước 2: Bấm nút ‘Submit’ để lấy mật khẩu

Hình 62: Giao diện trang quên mật khẩu

5.2.4 Trang thông tin cá nhân

Trang thông tin cá nhân chứa các thông tin cơ bản của người dùng như tên, tuổi, giới tính và số điện thoại Người dùng có khả năng cập nhật thông tin cá nhân và thay đổi mật khẩu khi cần thiết.

− Cập nhật thông tin: o Bước 1: Nhập hoặc sửa đổi thông tin cá nhân ở form ‘Edit Profile’ o Bước 2: Bấm nút ‘Save Changes’ để cập nhật thông tin

Hình 63: Giao diện trang thông tin cá nhân

Để thay đổi mật khẩu, bạn cần thực hiện các bước sau: Bước 1, nhấn nút ‘Change Password’ để hiển thị form nhập mật khẩu hiện tại và mật khẩu mới Bước 2, nhập mật khẩu hiện tại cùng với mật khẩu mới Cuối cùng, Bước 3, nhấn nút ‘Save Changes’ để hoàn tất việc thay đổi mật khẩu.

Hình 64: Giao diện trang thông tin cá nhân khi thay đổi mật khẩu

− Hiển thị danh sách sản phẩm đang bán

− Lọc sản phẩm theo danh mục: o Bước 1: Bấm chọn vào mục select ‘All’, danh sách danh mục sẽ hiện ra o Bước 2: Bấm chọn danh mục cần lọc

− Lọc sản phẩm theo filter bằng cách kéo chọn price max và bấm chọn size

− Tìm kiếm sản phẩm: Nhập tên sản phẩm vào ô tìm kiếm để tiến hành tìm kiếm sản phẩm theo tên

Hình 65: Giao diện trang sản phẩm

5.2.6 Trang chi tiết sản phẩm

− Hiển thị thông tin chi tiết của sản phẩm

− Xem được các gợi ý sản phẩm tương đồng

− Bình luận về sản phẩm: o Bước 1: Nhập văn bản vào ô input o Bước 2: Bấm nút ‘Comment’

To edit a comment, first click on 'Edit' to bring up the editing form Next, modify the content of your comment as needed Finally, click 'Save' to update your comment or 'Cancel' to discard the changes.

− Xóa bình luận: Bấm vào nút ‘Delete’ để xóa bình luận

Để thêm sản phẩm vào giỏ hàng, trước tiên bạn cần đăng nhập vào hệ thống Sau đó, thực hiện theo các bước sau: Bước 1 là chọn kích thước sản phẩm, Bước 2 là chọn số lượng mong muốn, và cuối cùng, Bước 3 là nhấn nút ‘Add to cart’ để hoàn tất việc thêm sản phẩm vào giỏ hàng.

Hình 66: Giao diện trang chi tiết sản phẩm

− Hiển thị sản phẩm hiện có trong giỏ hàng, người dùng có thể chỉnh sửa giỏ hàng, xóa sản phẩm trong giỏ hàng

Hình 67: Giao diện trang giỏ hàng khi rỗng

− Chỉnh sửa: Bấm chọn ‘-’ hoặc ‘+’ hoặc thay đổi giá trị trong ô input để thay đổi số lượng của sản phẩm

− Xóa sản phẩm: o Bước 1: bấm vào biểu tượng thùng rác o Bước 2: Hộp xác nhận hiển thị o Bước 3: Bấm ‘Yes’ để đồng ý hoặc ‘No’ để hủy

− Bấm nút ‘Check Out’ để đi đến trang thanh toán

Hình 68: Giao diện trang giỏ hàng khi có sản phẩm

− Bước 1: Nhập hoặc chỉnh sửa thông tin giao hàng

− Bước 2: Lựa chọn địa chỉ giao hàng theo thứ tự: City, District, Ward

− Bước 3: Nhập voucher (nếu có)

− Bước 3: Bấm chọn hình thức thanh toán ‘COD’ hoặc ‘Paypal’

− Bước 5: Bấm nút ‘Order’ để tiến hành đặt hàng đối với hình thức ‘COD’ hoặc bấm nút ‘Paypal’ đối với hình thức ‘Paypal’

Hình 69: Giao diện trang thanh toán

5.2.9 Trang lịch sử đặt hàng

− Hiển thị danh sách đơn hàng đã đặt của khách hàng, cho phép xem chi tiết đơn hàng, hủy đơn hàng

Hình 70: Giao diện trang lịch sử đơn hàng khi chưa có đơn hàng

Để hủy đơn hàng có trạng thái 'Waiting', bạn cần thực hiện các bước sau: Bước 1: Nhấn vào biểu tượng thùng rác Bước 2: Một hộp xác nhận sẽ hiển thị Bước 3: Nhấn 'Yes' để đồng ý hủy đơn hàng hoặc 'No' để từ chối.

Hình 71: Giao diện trang lịch sử đơn hàng khi có đơn hàng

5.2.10 Trang quản lý giao dịch paypal

Hiển thị thông tin tài khoản PayPal của cửa hàng, cho phép xem thống kê giao dịch trong vòng 30 ngày, và có khả năng hoàn tiền cho những đơn hàng thanh toán qua PayPal đã bị hủy.

Để xem thống kê giao dịch, mặc định sẽ hiển thị dữ liệu trong 7 ngày trước từ ngày hiện tại Bạn có thể bấm chọn 'Ngày bắt đầu' để chọn thời gian bắt đầu và bấm chọn 'Ngày kết thúc' để xác định thời gian kết thúc cho báo cáo.

− Hoàn tiền: Những đơn hàng đã thanh toán ở trạng thái hủy sẽ hiển thị nút

‘Refund’ ở cột action o Bước 1: Bấm nút ‘Refund’ o Bước 2: Hộp xác nhận hiển thị o Bước 3: Bấm ‘Yes’ để đồng ý hoặc ‘No’ để hủy

Hình 72: Giao diện trang quản lý giao dịch Paypal

5.2.11 Trang xem doanh thu theo ngày

− Hiển thị sản phẩm và số lượng sản phẩm đã bán theo ngày

− Bấm chọn nút ‘Date dd/MM/yyyy’ để thay đổi ngày (mặc định là ngày hiện tại)

− Bấm chọn nút ‘Graphic’ để xem theo dạng đồ thị

Hình 73: Giao diện trang xem doanh thu theo ngày dạng bảng

− Bấm nút ‘Back’ để quay về dạng bảng

Hình 74: Giao diện trang xem doanh thu theo ngày dạng đồ thị

5.2.12 Trang quản lý tài khoản

− Hiển thị danh sách tài khoản, có thể tìm kiếm tài khoản, xem thông tin chi tiết và chỉnh sửa tài toản

− Tìm kiếm tài khoản: Nhập username vào ô tìm kiếm để tìm kiếm tài khoản

Hình 75: Giao diện trang quản lý tài khoản

Để chỉnh sửa và xem thông tin chi tiết tài khoản, bạn thực hiện các bước sau: Bước 1: Nhấn vào biểu tượng chỉnh sửa để truy cập thông tin tài khoản Bước 2: Tiến hành chỉnh sửa thông tin cần thiết Bước 3: Nhấn nút ‘Lưu thay đổi’ để cập nhật thông tin mới.

Hình 76: Modal xem thông tin chiết và chỉnh sửa tài khoản

5.2.13 Trang quản lý sản phẩm

Quản trị viên có thể hiển thị danh sách sản phẩm, lọc theo danh mục, tìm kiếm theo tên, thêm mới, chỉnh sửa sản phẩm, và quản lý kích thước cùng hình ảnh của sản phẩm.

To filter products by category, first click on the 'All' option to display the complete list of categories Next, select the desired category to filter the products accordingly.

− Tìm kiếm sản phẩm: Nhập tên sản phẩm vào ô tìm kiếm

Hình 77: Giao diện trang lý sản phẩm

− Thêm mới sản phẩm: o Bước 1: Bấm chọn nút ‘New Product’ o Bước 2:Nhập thông tin yêu cầu o Bước 3: Bấm nút ‘Save’ để thêm sản phẩm mới

Hình 78: Modal thêm sản phẩm mới

Để xem thông tin chi tiết và chỉnh sửa sản phẩm, bạn thực hiện theo các bước sau: Bước 1, nhấn vào biểu tượng chỉnh sửa; Bước 2, tiến hành chỉnh sửa thông tin cần thiết; Bước 3, nhấn ‘Save Changes’ để cập nhật thông tin đã chỉnh sửa.

Hình 79: Modal xem chi tiết và chỉnh sửa thông tin sản phẩm

− Quản lý size giày: o Bước 1: Bấm chọn biểu tượng size để quản lý size của sản phẩm o Bước 2:

Thêm size giày Chọn size và nhập số lượng sau đó bấm ‘Save

Create’ để thêm size Chỉnh sửa size giày

Bấm chọn biểu tượng chỉnh sửa để chỉnh sửa thông tin size

Xóa size giày Bấm chọn biểu tượng thùng rác để xóa đi size giày Họp thông báo xác nhận xuất hiện Bấm ‘Yes’ để xóa hoặc ‘No’ để hủy

Hình 80: Modal quản lý size sản phẩm

Quản lý hình ảnh giày rất đơn giản Đầu tiên, bạn cần bấm chọn biểu tượng ảnh để bắt đầu quản lý ảnh sản phẩm Tiếp theo, hãy nhấn vào ‘Add image’ để thêm ảnh mới hoặc chọn biểu tượng chỉnh sửa để thay đổi ảnh hiện có Sau đó, một nút ‘Browse’ sẽ xuất hiện; hãy bấm vào đó để chọn hình ảnh mong muốn Cuối cùng, bấm ‘Save’ để lưu lại hoặc ‘Cancel’ nếu bạn muốn hủy thao tác.

Hình 81: Modal quản lý hình ảnh sản phẩm

− Hiển thị danh sách danh mục, có thể thêm mới và chỉnh sửa voucher

Hình 82: Giao diện trang quản lý voucher

− Thêm voucher mới: o Bước 1: Bấm chọn nút ‘New Voucher’ để thêm voucher mới o Bước 2: Nhập thông tin o Bước 3: Bấm chọn ‘Save’

Hình 83: Modal thêm voucher mới

Để xem thông tin chi tiết và chỉnh sửa voucher, bạn thực hiện theo các bước sau: Bước 1, nhấn vào biểu tượng chỉnh sửa; Bước 2, tiến hành chỉnh sửa thông tin; Bước 3, chọn ‘Save Changes’ để cập nhật.

Hình 84: Modal xem chi tiết và chỉnh sửa thông tin voucher

5.2.15 Trang quản lý đơn hàng

− Hiển thị danh sách đơn hàng, người quản trị có thể tìm kiếm đơn hàng, cập nhật trạng thái của đơn hàng, xem chi tiết đơn hàng

− Tìm kiếm đơn hàng theo id: o Nhập id của đơn hàng vào ô tìm kiếm để tìm kiếm

Để cập nhật trạng thái đơn hàng, bạn cần thực hiện các bước sau: Bước 1, nhấn vào mục "select" ở cột trạng thái để hiển thị danh sách các trạng thái Bước 2, chọn trạng thái mong muốn để cập nhật cho đơn hàng.

Hình 85: Giao diện trang quản lý đơn hàng

Xem chi tiết đơn hàng: Bấm chọn biểu tượng con mắt

Hình 86: Modal xem chi tiết đơn hàng

CÀI ĐẶT VÀ KIỂM THỬ

Chuẩn bị

− Visual Studio Code cho code Front end

− Intellij IDE được sử dụng để code Back end

− Postgresql được sử dụng để quản lý Database

− Bootstrap sử dụng cho templates và CSS

− Github để quản lý source code

− React Js được sử dụng để làm phần Front end với ngôn ngữ chính là

− Spring Boot được sử dụng để làm Backend với ngôn ngữ chính là Java

Cài đặt

− Dự án được triển khai trên ba nền tảng cloud

− Front end: sử dụng Vercel

− Link trang web: https://shoe-store-van-viet.vercel.app/

− Back end: sử dụng Heroku

Phương pháp và kỹ thuật kiểm thử 107

Kiểm thử hộp trắng là phương pháp đánh giá cấu trúc bên trong của phần mềm, sử dụng dữ liệu từ mã nguồn để thực hiện kiểm tra toàn diện Kỹ thuật này cho phép người kiểm tra lựa chọn đầu vào nhằm thực hiện các đường dẫn trong mã và xác định đầu ra phù hợp.

6.3.1.1 Kiểm thử luồng điều khiển

Kiểm thử luồng điều khiển tập trung vào việc kiểm tra các thuật toán chức năng Mục tiêu chính của phương pháp này là đảm bảo rằng tất cả các đường đi trong đơn vị phần mềm được kiểm thử đều hoạt động chính xác.

− Quy trình kiểm thử: o Phân tích dòng dữ liệu và xây dựng đồ thị dòng điều khiển tương ứng o Tính độ phức tạp Cyclomatic của đồ thị (C=P+1)

Chương 6: Cài đặt và kiểm thử

Xác định các đường thi hành tuyến tính độc lập cơ bản và tạo test case cho từng đường So sánh kết quả thu được với kết quả mong đợi Lập báo cáo kết quả để phản hồi.

Đồ thị dòng điều khiển là một phương pháp mô tả giải thuật, giúp người dùng dễ dàng nhận diện các thành phần và mối quan hệ trong quá trình thực hiện Đồ thị này bao gồm hai loại chính: các nút và các cung nối kết giữa chúng Các loại nút trong đồ thị dòng điều khiển đóng vai trò quan trọng trong việc thể hiện các bước của giải thuật.

Hình 87: Các nút trong đồ thị dòng điều khiển

− Các cấu trúc điều kiện phổ biến:

Hình 88: Cấu trúc điều kiện kiểm thử hộp trắng

6.3.1.2 Kiểm thử dòng dữ liệu

− Phương pháp kiểm thử dòng dữ liệu sẽ kiểm thử đời sống của từng biến dữ liệu có bất thường trong từng luồng thi hành của chương trình.

− Quy trình kiểm thử: o Phân tích dòng dữ liệu và xây dựng đồ thị dòng điều khiển tương ứng o Tính độ phức tạp Cyclomatic của đồ thị (C=P+1)

Xác định các đường thi hành tuyến tính độc lập cơ bản và tạo test case cho từng đường Lặp kiểm thử vòng đời cho từng biến dữ liệu Cuối cùng, lập báo cáo kết quả để phản hồi.

Đồ thị dòng dữ liệu là một phương pháp hiệu quả để mô tả các kịch bản khác nhau trong cuộc sống của các biến Nó bao gồm hai thành phần chính: các nút và các cung nối kết giữa chúng Các loại nút trong đồ thị dòng dữ liệu đóng vai trò quan trọng trong việc thể hiện mối quan hệ và tương tác giữa các biến.

Hình 89:Các nút đồ thị dòng dữ liệu

− Các cấu trúc điều kiện phổ biến:

Hình 90: Các cấu trúc điều kiện trong kiểm thử hộp đen

Kiểm thử phần mềm hộp đen là phương pháp mà tester không cần biết cấu trúc bên trong của hệ thống, chỉ tập trung vào các đầu vào và đầu ra Phương pháp này giúp đánh giá chức năng của phần mềm từ góc độ người dùng, đảm bảo rằng hệ thống hoạt động đúng như mong đợi mà không cần hiểu chi tiết về mã nguồn hay thiết kế bên trong.

Quy trình kiểm thử hộp đen bao gồm các bước chính: đầu tiên, phân tích đặc tả của hệ thống phần mềm (HTPM); tiếp theo, sử dụng một kỹ thuật để định nghĩa các test case cần thiết; sau đó, tiến hành kiểm thử các test case đã được xác định; cuối cùng, so sánh kết quả thu được với các kỳ vọng đã đề ra.

− Các kỹ thuật kiểm thử hộp đen

Kỹ thuật phân lớp tương đương, phân tích các giá trị biên, và sử dụng bảng quyết định là những phương pháp quan trọng trong kiểm thử phần mềm Bên cạnh đó, kỹ thuật kiểm thử các bộ n thần kỳ và bảng chuyển trạng thái đóng vai trò quan trọng trong việc đảm bảo chất lượng sản phẩm Phân tích vùng miền và kỹ thuật dựa trên đặc tả use case giúp xác định các yêu cầu và kịch bản sử dụng, trong khi lược đồ quan hệ nhân quả hỗ trợ trong việc phân tích mối quan hệ giữa các yếu tố Tất cả những kỹ thuật này đều góp phần nâng cao hiệu quả kiểm thử và đảm bảo tính chính xác của phần mềm.

Sử dụng kiểm thử hộp trắng 110

− Mã nguồn thêm sản phẩm vào giỏ hàng

Hình 91: Đoạn mã được dùng để kiểm thử

− Đồ thị dòng điều khiển:

Hình 92: Đồ thị dòng điều khiển

− Số đường thi hành tuyến tính độc lập: Nhận thấy đồ thị có 6 nút quyết định nhị phân số đường thi hành tuyến tính độc lập là: 6+1=7

− Thiết kế test cases cho từng đường: Ta có bộ ba biến là (wishListId, productId, lineItemRequest: {amount, size}) Đường Test Case Kết quả

Error: “Not found Wish List with id = 10”

Error: “Not found Product with id = 10”

Error: “Not found Product infor with Product id = 15 Size id = 16”

Error: “Nike Air Max 270’s amount has size is 5.5 is 9 .Please choose again!” 1->2->4->6->8->9->11- (5, 15, {amount: 3, size: Error: “Nike Air Max 270’s

(Trường hợp sản phẩm đã có trong giỏ hàng)

5.5}) amount has size is 5.5 is 9

(Giải thích: có 7 sản phẩm đã tồn tại trong giỏ hàng)

(Trường hợp sản phẩm đã có trong giỏ hàng)

(Trường hợp sản phẩm chưa có trong giỏ hàng)

Bảng 40: Test case thêm sản phẩm vào giỏ hàng

− Đồ thị dòng dữ liệu chung

Hình 93: Đồ thị dòng dữ liệu chung

− Kiểm thử đời sống của từng biến o Biến wishListId

▪ Kịch bản 7: ~duuk o Kết luận: Cả 7 kịch bản trên đều không chứa cặp đôi hoạt động nào bất thường cả o Biến productId

Trong 7 kịch bản đã được phân tích, kịch bản 1 nổi bật với cặp đôi có hoạt động hơi khác thường, do đó cần được xem xét kỹ lưỡng Trong khi đó, 6 kịch bản còn lại không ghi nhận bất kỳ hoạt động bất thường nào của các cặp đôi.

Trong 7 kịch bản đã đề cập, kịch bản 1 và 2 nổi bật với cặp đôi có hoạt động hơi lạ, do đó cần được xem xét kỹ lưỡng Ngược lại, 5 kịch bản còn lại không ghi nhận bất kỳ cặp đôi nào có hành vi bất thường.

Trong bảy kịch bản đã được phân tích, các kịch bản 1 đến 6 cho thấy sự hoạt động hơi lạ của các cặp đôi, điều này cần được xem xét kỹ lưỡng Ngược lại, kịch bản 7 không ghi nhận bất kỳ hoạt động bất thường nào của các cặp đôi.

Trong 7 kịch bản đã phân tích, kịch bản 1 nổi bật với những trường hợp lạ cần được xem xét kỹ lưỡng Kịch bản 2 và 3 cũng đáng chú ý do có cặp đôi hoạt động hơi khác thường Ngược lại, các kịch bản 4, 5, 6 và 7 không ghi nhận bất kỳ hoạt động bất thường nào của cặp đôi.

Trong bảy kịch bản đã trình bày, kịch bản 1 và 2 là những trường hợp đặc biệt cần được chú ý và xem xét kỹ lưỡng Trong khi đó, kịch bản 3 thể hiện một cặp đôi có những hoạt động hơi khác thường.

116 cần lưu ý xem xét, còn kịch bản 4, 5, 6, 7 không có cặp đôi nào hoạt động bất thường cả. o Biến amountOfRequest

Trong 7 kịch bản đã nêu, kịch bản 1, 2 và 3 là những trường hợp đặc biệt cần được chú ý và xem xét kỹ lưỡng, trong khi đó kịch bản 4, 5, 6 và 7 không ghi nhận bất kỳ cặp đôi nào có hành vi bất thường.

▪ Kịch bản 7: ~dddddduk o Kết luận: Trong 7 kịch bản trên, kịch bản 1, 2, 3, 4 là trường hợp

Trong kịch bản 7, có sự xuất hiện của cặp đôi dd với những đặc điểm lạ lùng cần được xem xét kỹ lưỡng Ngược lại, kịch bản 5 và 6 không ghi nhận bất kỳ cặp đôi nào có hoạt động bất thường.

Trong bảy kịch bản đã nêu, kịch bản 1, 2, 3, 4, 5 và 7 là những trường hợp kỳ lạ cần được chú ý và xem xét kỹ lưỡng, trong khi kịch bản 6 không có cặp đôi bất thường nào xuất hiện.

Trong số 7 kịch bản đã phân tích, các kịch bản 1, 2, 3, 4, 5 và 7 đều là những trường hợp đặc biệt cần được chú ý và xem xét kỹ lưỡng, trong khi kịch bản 6 không phát hiện bất kỳ cặp đôi bất thường nào.

Trong 7 kịch bản đã được trình bày, các kịch bản 1, 2, 3, 4, 5 và 7 là những trường hợp đặc biệt cần được xem xét kỹ lưỡng, trong khi kịch bản 6 không có sự tồn tại của cặp đôi bất thường nào.

Trong bảy kịch bản đã nêu, kịch bản 1, 2, 3, 4, 5 và 7 là những trường hợp đặc biệt cần được chú ý và xem xét kỹ lưỡng, trong khi kịch bản 6 không có cặp đôi bất thường nào xuất hiện.

Trong 7 kịch bản đã nêu, kịch bản 1, 2, 3, 4 và 5 là những trường hợp đặc biệt cần được chú ý và xem xét kỹ lưỡng, trong khi kịch bản 6 và 7 không có sự tồn tại của cặp đôi bất thường nào.

Trong bảy kịch bản đã được trình bày, kịch bản 1, 2, 3, 4 và 5 là những trường hợp đặc biệt cần được chú ý và xem xét kỹ lưỡng Ngược lại, kịch bản 6 và 7 không có sự xuất hiện của bất kỳ cặp đôi bất thường nào.

Trong số 7 kịch bản đã đề cập, các kịch bản 1, 2, 3, 4, 5 và 7 là những trường hợp đặc biệt cần được xem xét kỹ lưỡng, trong khi kịch bản 6 không ghi nhận sự tồn tại của bất kỳ cặp đôi bất thường nào.

Trong 7 kịch bản đã nêu, kịch bản 1 đến 5 chứa những trường hợp kỳ lạ cần được xem xét kỹ lưỡng, trong khi kịch bản 6 và 7 không có sự xuất hiện của cặp đôi bất thường nào.

Bug Reports

Name Xem chi tiết tài khoản của admin

Summary Không xem được thông tin tài khoản của admin

URL https://shoe-store-van-viet.vercel.app/

Bảng 41: Báo cáo lỗi quản lý khách hàng

Khi đăng nhập với quyền admin, vào quản lý thông tin tài khoản, không thể truy cập vào thông tin chi tiết của tài khoản admin

Vào trang chủ Đăng nhập với tài khoản có quyền admin

Nhấn xem chi tiết thông tin admin

Xem chi tiết thông tin của tài khoản admin

Name Thêm mới một sản phẩm đã tồn tại

Summary Thêm mới một sản phẩm đã tồn tại

URL https://shoe-store-van-viet.vercel.app/manage/products

Bảng 42: Báo cáo lỗi quản lý sản phẩm

Khi thêm mới một sản phẩm, có thể tiếp tục thêm một sản phẩm giống với sản phẩm đã tồn tại

Vào trang chủ Đăng nhập với quyền Mod hoặc Admin

Thêm mới một sản phẩm

Hiển thị thông báo sản phẩm đã tồn tại

Thêm mới thành công sản phẩm giống với sản phẩm đã tồn tại trước đó.

TỔNG KẾT

Kết quả đạt được

Trong khóa luận này, nhóm chúng em đã áp dụng kiến thức về công nghệ React, HTML, CSS, Bootstrap, Spring Boot và SQL để xây dựng dự án.

Nhóm chúng em đã phát triển một chức năng chatbot nhằm đáp ứng những nhu cầu cơ bản cho người dùng và khách truy cập Chức năng này được xây dựng dựa trên dịch vụ Amazon Lex và Lambda.

Trong ứng dụng website này, nhóm chúng em đã hoàn thành các giao diện và chức năng cơ bản, đặc biệt là dành cho khách hàng chưa đăng ký tài khoản (Guest).

▪ Xem sản phẩm (có chức năng tìm kiếm, lọc sản phẩm theo giá, size và danh mục)

▪ Xem chi tiết sản phẩm

▪ Gợi ý các sản phẩm tương đồng

▪ Chatbot o Đối với khách hàng đã đăng ký tài khoản (user):

▪ Quản lý thông tin cá nhân

▪ Xem sản phẩm (có chức năng tìm kiếm, lọc sản phẩm theo giá, size và danh mục)

▪ Xem chi tiết sản phẩm

▪ Bình luận về sản phẩm (Chỉnh sửa, xóa)

▪ Gợi ý các sản phẩm tương đồng

▪ Quản lý giỏ hàng (Thêm sản phẩm, chỉnh sửa số lượng sản phẩm, xóa sản phẩm trong giỏ hàng)

▪ Đặt hàng (Có hai hình thức thanh toán là COD và Paypal)

▪ Quản lý đơn hàng đã đặt (Hủy đơn hàng chưa xác nhận)

▪ Chatbot o Đối với người quản trị (Admin, mod):

▪ Quản lý tài khoản (Chỉ admin)

▪ Quản lý giao dịch thanh toán qua Paypal

▪ Quản lý thông tin khách hàng

▪ Quản lý size của sản phẩm

▪ Quản lý hình ảnh của sản phẩm

▪ Quản lý bình luận của sản phẩm

▪ Xem thống kê theo ngày, theo tháng, theo năm (bảng và đồ thị)

Ưu điểm

− Xây dựng thành công một website với giao diện hợp lý, với đầy đủ chức năng của một website bán hàng

− Website dễ sử dụng, mang đến cho người dùng những trải nghiệm tốt

− Thanh toán online bằng Paypal

− Có thể xác thực địa chỉ giao hàng, tính phí giao hàng và thời gian giao hàng dự kiến (Áp dụng API của giao hàng nhanh)

− Có chatbot (Amazon Lex) hỗ trợ người dùng

− Áp dụng thuật toán Content-based theo mô tả của sản phẩm để gợi ý sản phẩm cho người dùng.

Nhược điểm

Chức năng của Chatbot hiện còn một số giới hạn, bao gồm việc chỉ cho phép sử dụng 10.000 yêu cầu văn bản mỗi tháng trong năm đầu tiên; nếu vượt quá số lượng này, người dùng sẽ phải trả phí theo hình thức “Pay as you go” Ngoài ra, Chatbot cũng gặp khó khăn trong việc phản hồi các tình huống chưa được kịch bản hóa.

− Tính năng gợi ý sản phẩm mới dựa trên gợi ý theo mô tả sản phẩm

− Chức năng voucher chưa có xét ngày hết hạn

− Chưa có tính năng so sánh sản phẩm.

Hướng phát triển

− Phát triển về Chatbot: o Tự phát triển và xây dựng Chatbot riêng để huấn luyện theo tình huống thực tế của website

− Phát triển tính năng gợi ý sản phẩm: o Thêm phần gợi ý theo size và giá của sản phẩm

− Phát triển tính năng tự động xét ngày hết hạn cho voucher

− Bổ sung tính năng so sánh sản phẩm

− Nghiên cứu thêm về UI/UX tăng tính trải nghiệm cho người dùng

[1] “Spring Boot Reference Documentation”, năm 2022, https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/

[2] “Redux là gì? Hiểu rõ cơ bản cách dùng Redux”, https://topdev.vn/blog/redux- la-gi/

[3] “Clue Mediator, How to implement a line chart in react”, năm 2022, https://www.cluemediator.com/

[4] https://www.w3schools.com/bootstrap4/

[5] “Chatbot đa ngôn ngữ sử dụng Amazon Lex”, năm 2023, https://tcnducpho.edu.vn/chatbot-da-ngon-ngu-su-dung-amazon-lex/

[6] Ramya Vidiyala, “How to Build a Movie Recommendation System”, năm 2020, https://towardsdatascience.com/how-to-build-a-movie-recommendation-system- 67e321339109

[7] “What is Amazon Lex?”, https://docs.aws.amazon.com/lex/latest/dg/what- is.html

Tiêu đề	Xây Dựng Website Bán Giày Với Reactjs Và Spring Boot
Tác giả	Hoàng Quốc Việt, Nguyễn Đặng Khánh Văn
Người hướng dẫn	ThS. Lê Thị Minh Châu
Trường học	Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Đồ Án Tốt Nghiệp
Năm xuất bản	2023
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	146
Dung lượng	12,2 MB