Khóa luận tốt nghiệp 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

23 Trong những năm gần đây, với sự nâng cao chất lượng cuộc sống con người, phụ kiện, đặc biệt là giày Giờ đây, giày không chỉ là phụ kiện đi lại mà còn dùng để kinh doanh, trao đổi khi các hãng thời trang ra mắt những đôi giày giới hạn.

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

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

Mục tiêu đề tài

58L8L8LMục tiêu chính của đề tài: nhóm chúng em 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à mang lại giá trị kinh doanh cho cửa hàng Tạo ra một trải nghiệm mua sắm giày trực tuyến tốt cho khách hàng, đảm bảo tính bảo mật và an toàn và cung cấp đầy đủ thông tin về sản phẩm giúp khách hàng dễ dàng lựa chọn sản phẩm phù hợp.

58L8L9Các mục tiêu cụ thể bao gồm:

23 Khảo sát phân tích các website bán giày hiện có, xác định những yếu tố cần có của một website kinh doanh giày trực tuyến.

58L8L8LTạo ra một hệ thống quản lý khách hàng, doanh thu, sản phẩm, đơn hàng, cho người quản trị dễ dàng quản lý Đảm bảo tính chính xác của những đơn hàng cũng như các thông tin của sản phẩm, doanh thu,khách hàng,

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

23 Xây dựng website với giao diện đơn giản, dễ sử dụng và thân thiện với khách hàng.

58L8L8LCung cấp thông tin đầy đủ và chi tiết về các sản phẩm giày bao gồm mô tả sản phẩm, hình ảnh, kích cỡ, giá cả với số lượng sẵn có để khách hàng có thể đặt mua trực tuyến hoặc tham khảo trước khi đến cửa hàng mua sắm.

23 Cung cấp thông tin chi tiết cho khách hàng về những đơn hàng họ đã đặt.

58L8L8LĐảm bảo tính bảo mật và an toàn cho khách hàng khi mua hàng trực tuyến và thanh toán online bằng cách sử dụng phương thức an toàn và tiện lợi.

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

58L8L8LDữ liệu các cửa hàng, các sản phẩm giày

23 Dữ liệu của khách hàng

23 Front-end: HTML, CSS, Bootstrap, Javascript, ReactJS

58L8L8LGần gũi và dễ dàng sử dụng đối với khách hàng.

23 Dễ dàng quản lý các nhân viên và khách hàng.

58L8L8LDễ dàng nâng cấp và bảo trì hệ thống.

23 Yêu cầu từ phía người dùng:

58L8L8LHệ thống đăng nhập an toàn và bảo mật.

23 Chức năng tìm kiếm đa dạng dễ dàng.

58L8L8LQuản lý tài khoản nhân viên và khách hàng dễ dàng

58L8L9Ước lượng thời gian hoàn thành:

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

58L8L9Nếu có lỗi trong thời gian bảo trì thì phía bên nhóm sẽ được bên công ty dịch vụ hỗ trợ tùy tình huống thì nhóm sẽ có thể phải chịu toàn bộ trách nhiệm.

58L90Sau 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.

58L91Phía công ty (khách hàng) không chấp nhận nếu sản phẩm chậm 20 ngày, sản phẩm không đáp ứng đủ các chức năng yêu cầu cũng như hệ thống chạy chậm, báo lỗi cho công ty và khách hàng.

58L92Khi 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.

23 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.

24 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

58L8L8LTừ khóa tìm kiếm: web giày sneaker

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

23 Đây là website chuyên bán giày sneaker Khi vào trang web, có thể thấy được trang nổi bật với hình banner khá lớn kèm theo phần tìm theo từ khóa.

24 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

58L8L8LKéo xuống phía dưới có thể thấy các sản phẩm được bán được phân chia theo từng danh mục Ngoài hiển thị sản phẩm thì còn hiển thêm các thông tin như: khuyến mãi, giá tiền, đánh giá của các sản phẩm.

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

23 Đi vào phần chi tiết sản phẩm thì website làm khá hài hòa, đơn giản nhưng lại rất tinh tế, dễ sử dụng cũng như dễ nhìn Ngoài ra, trang chi tiết này đáp ứng đầy đủ các tính năng cơ bản cần có như nút thêm vào giỏ hàng, nút mua ngay, thông tin sản phẩm Bên cạnh đó còn có chức năng tìm giày theo size,

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

58L8L8LKhi 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

23 Khi bấm vào nút đặt hàng thì giỏ hàng hiện tại sẽ hiện ra và khách hàng có thể thực hiện các thao tác cơ bản như thêm số lượng, xóa sản phẩm ngay trên đây Sau đó có thể bấm nút ‘đặt hàng’ để đến trang đặt hàng và thanh toán hoặc nút ‘mua tiếp’ để tiếp tục mua hàng.

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

58L8L8LĐến trang đặt hàng và thanh toán thì có thể thấy trang khá đơn giản nhưng lại rất dễ dùng Có thể nhìn thông tin giỏ hàng bên phải và điền các thông tin cơ bản để mua hàng bên trái, sau đó nhấn vào nút ‘tiếp tục đến phương thức thanh toán’ Cuối cùng là nhấn vào 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

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

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

58L8L8LLà website chuyên bán giày sneaker của được thanh điều hướng đến các mục giày

Xshop Khi vào trang web, ta thấy khác nhau

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

23 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 Đi sâu vào từng hãng giày mà cửa hàng bán, ta thấy được trang web sử dụng phông màu trắng Thanh ngang là các doanh mục về các hang giày, thanh dọc bên trái là danh mục sản phẩm Nội dung của các là các mẫu giày Nike mà ta đang chọn.

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

Khi bấm vào chi tiết từng sản phẩm, ta thấy được các hình ảnh của đôi giày mà ta chọn, cũng như các thông tin cho khách hang như người dùng, giới thiệu sản phẩm, giá cả Phía bên phải là các nút bấm mua hang, 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 các thông tin và đôi giày, khách hàng sẽ tiến hành mua sản phẩm bằng cách bấm nút “Mua ngay” Ta sẽ được chuyển đến trang giỏ hàng, ở đây sẽ hiển thị các sản phẩm mà ta muốn mua Phía bên dưới là phần khách hàng nhập mã giảm giá của cửa hàng để nhận được các ưu đãi Cuối cùng, khách hàng sẽ tiến hành thanh toán.

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

58L8L8LTừ khóa tìm kiếm: web giày sneaker

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

23 Đây là website chuyên bán giày sneaker Khi vào trang web, có thể thấy được trang nổi bật với hình banner khá lớn kèm theo phần tìm theo từ khóa.

24 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

58L8L8LKéo xuống phía dưới có thể thấy các sản phẩm được bán được phân chia theo từng danh mục Ngoài hiển thị sản phẩm thì còn hiển thêm các thông tin như: khuyến mãi, giá tiền, đánh giá của các sản phẩm.

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

23 Đi vào phần chi tiết sản phẩm thì website làm khá hài hòa, đơn giản nhưng lại rất tinh tế, dễ sử dụng cũng như dễ nhìn Ngoài ra, trang chi tiết này đáp ứng đầy đủ các tính năng cơ bản cần có như nút thêm vào giỏ hàng, nút mua ngay, thông tin sản phẩm Bên cạnh đó còn có chức năng tìm giày theo size,

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

58L8L8LKhi 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

23 Khi bấm vào nút đặt hàng thì giỏ hàng hiện tại sẽ hiện ra và khách hàng có thể thực hiện các thao tác cơ bản như thêm số lượng, xóa sản phẩm ngay trên đây Sau đó có thể bấm nút ‘đặt hàng’ để đến trang đặt hàng và thanh toán hoặc nút ‘mua tiếp’ để tiếp tục mua hàng.

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

58L8L8LĐến trang đặt hàng và thanh toán thì có thể thấy trang khá đơn giản nhưng lại rất dễ dùng Có thể nhìn thông tin giỏ hàng bên phải và điền các thông tin cơ bản để mua hàng bên trái, sau đó nhấn vào nút ‘tiếp tục đến phương thức thanh toán’ Cuối cùng là nhấn vào 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

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

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

58L8L8LLà website chuyên bán giày sneaker của được thanh điều hướng đến các mục giày

Xshop Khi vào trang web, ta thấy khác nhau

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

23 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 Đi sâu vào từng hãng giày mà cửa hàng bán, ta thấy được trang web sử dụng phông màu trắng Thanh ngang là các doanh mục về các hang giày, thanh dọc bên trái là danh mục sản phẩm Nội dung của các là các mẫu giày Nike mà ta đang chọn.

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

Khi bấm vào chi tiết từng sản phẩm, ta thấy được các hình ảnh của đôi giày mà ta chọn, cũng như các thông tin cho khách hang như người dùng, giới thiệu sản phẩm, giá cả Phía bên phải là các nút bấm mua hang, 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 các thông tin và đôi giày, khách hàng sẽ tiến hành mua sản phẩm bằng cách bấm nút “Mua ngay” Ta sẽ được chuyển đến trang giỏ hàng, ở đây sẽ hiển thị các sản phẩm mà ta muốn mua Phía bên dưới là phần khách hàng nhập mã giảm giá của cửa hàng để nhận được các ưu đãi Cuối cùng, khách hàng sẽ tiến hành thanh toán.

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

Lúc này, sẽ điều hướng đến trang thanh toán Sau khi điền các thông tin cần thiết để giao hàng, khách hàng sẽ tiến hành thanh toán online hoặc là thanh toán trực tiếp khi nhận Sau đó, cửa hàng sẽ xác nhận và bắt đầu chuẩn bị hàng cho khách hàng.

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

Nhận xét: Trang web được thiết kế bắt mắt, có đầy đủ các chức năng cần thiết cho khách hàng để sử dụng Bố cục rõ ràng, dễ tìm kiếm.

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 trang web được thiết kế với tông màu trắng là màu chủ đạo, phía bên dưới là các hình ảnh quảng cáo cho sản phẩm mới của Nike ví dụ như giày, quần áo, sản phẩm dụng cụ thể thao.Thanh điều hướng của trang web được chia thành các loại dành cho nam, nữ, trẻ em, … Phía góc trái là ô tìm kiếm và giỏ hàng.

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

Phía cuối của trang web hiển thị một số doanh mục sản phẩm đặc trưng của Nike. Cuối cùng là các thông tin cần thiết cho khách hàng như tìm các cửa hàng, trợ giúp giải quyết các vấn đề, các thông tin, điều khoản cũng như thông tin liên lạc, …

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

Tiếp theo chọn vào doanh mục một sản phẩm của Nike, ví dụ như đôi Nike Air Force 1 Bố cục của trang web được chia thành hai phần, bên trái là các hình ảnh của sản phẩm, bên phải là các thông tin về kích thước, tên sản phẩm cũng như là các thông tin đánh giá sản phẩm, đặt hàng… Đặc biệt, ở một số sản phẩm, khách hàng có thể thiết kế lại sản phẩm theo ý thích.

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

Sau khi bấm vào đặt hàng, sẽ hiện ra thông báo mà sản phẩm ta cần đặt Tiếp theo sẽ là các thông tin về giỏ hàng và báo giá sản phẩm Cuối cùng là điền các thông tin của khách hàng và tiến hành đặt sản phẩm.

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

Nhận xét: Trang web được thiết kế không chỉ là dành cho các sản phẩm giày của Nike mà còn có các sản phẩm đa dạng hơn của hàng như quần áo, dụng cụ thể thao, … Đặc biệt, một chi tiết rất hay là thiết kế theo ý thích của khách hàng ở một số loại giày Cuối cùng, chỉ dẫn đến đặt hàng cũng rất dễ dàng để 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 7L.5 7L.5 7L.5 3 giayxshop.vn 8L 8L 8L 2

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

React JS 18L

ReactJS là thư viện Javascript được xây dựng bởi các kỹ sư của Facebook, đang được rất nhiều công ty nổi tiếng sử dụng để phát triển các sản phẩm của họ như Yahoo, Airbnb và tất nhiên là trong nội tại Facebook, Instagram Nó phù hợp với các dự án lớn có tính mở rộng hơn là các dự án nhỏ.

Một trong những điểm mạnh nữa của ReactJS là virtual DOM – thứ nằm ẩn bên trong mỗi view và là lí do khiến cho React đạt được hiệu năng tốt Khi một view yêu cầu gọi, tất cả mọi thứ sẽ được đưa vào trong một bản sao ảo của DOM Sau khi việc gọi hoàn thành, React tiến hành một phép so sánh giữa DOM ảo và DOM thật, và thực hiện những thay đổi được chỉ ra trong phép so sánh trên.

Redux là một thư viện Javascript giúp tạo ra thành một lớp quản lý trạng thái của ứng dụng Redux được xây dựng dựa trên nền tảng tư tưởng của ngôn ngữ Elm và kiến trúc Flux do Facebook giới thiệu Do vậy Redux thường là bộ đôi kết hợp hoàn hảo với React Tuy nhiên hoàn toàn có thể sử dụng với các framework khác như Angular, 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 sẽ nhận dữ liệu từ phía máy chủ (backend), hay nhận những thao tác của người dùng (nhập, click,…), tất cả những thứ này chúng ta gọi đó là trạng thái của ứng dụng Nếu biết được trạng thái của ứng dụng tại một thời điểm nào đó, chúng ta sẽ biết vào thời điểm đó ứng dụng đã nhận dữ liệu nào,những thao tác nào đã được người dùng truyền lên.

Redux được xây dựng dựa trên 3 nguyên lý như sau:

Trạng thái (state) của toàn bộ ứng dụng được lưu trong trong 1 store duy nhất là 1 Object mô hình tree

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

Chỉ có 1 cách duy nhất để thay đổi trạng thái (state) đó là tạo ra một action(là 1 object mô tả những gì xảy ra) Để chỉ rõ trạng thái (state) tree được thay đổi bởi 1 action chúng ta phải viết 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:

Store: Là nơi quản lý trạng thái (state), có thể truy cập để lấy trạng thái (state) ra, update state hiện có, và listener để nhận biết xem có thay đổi gì không, và cập nhật qua views.

Actions : nó là một pure object định nghĩa hai thuộc tính lần lượt là type: kiểu của action và payload: giá trị tham số mà action creator truyền lên.

Reducers: Khác với actions có chức năng là mô tả những thứ gì đã xảy ra, nó không chỉ rõ state nào của response thay đổi, mà việc này là do reducers đảm nhiệm, nó là nơi xác định state sẽ thay đổi như thế nào, sau đó trả ra một state mới.

View: Hiển thị dữ liệu được cung cấp bởi Store

Redux giúp chúng ta xây dựng một STORE thay vì lưu trữ toàn bộ dữ liệu tại một component thì chúng ta sẽ lưu nó tại store của redux, và nếu có thay đổi,đơn giản là chúng ta sẽ thông qua redux và thay đổi dữ liệu trong store.

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

Viết đầy đủ là Javascript Syntax Extension hay Javascript XML JSX là ngôn ngữ kết hợp giữa HTML và JS JSX là ngôn ngữ tham chiếu sử dụng khi làm một react app Nó không bắt buộc nhưng sử dụng sẽ dễ dàng hơn.

Thành phần là một phần của giao diện người dùng (UI) được tách biệt, độc lập và có thể tái sử dụng Các thành phần khác nhau là để xây dựng giao diện người dùng hoàn chỉnh Một thành phần giống như một hàm mà ta có thể gọi bất cứ lúc nào cần trong ứng dụng web.

Functional Components: dựa theo cú pháp function của JS (function thông thường hoặc là arrow) như hình ở trên là ví dụ cho trường hợp này.

Class Component: dựa theo cú pháp của cú pháp class của JS, trường hợp này khó sử dụng hơn và dần được thay thế bởi functional components

Một DOM ảo như là một bản copy của DOM thật tồn tại trong bộ nhớ và mỗi thành phần trong DOM ảo là một bản copy của một thành phần DOM thật.

Vì vậy, bất cứ khi nào thay đổi xảy ra, React sẽ cập nhật DOM và sau đó so sánh DOM ảo mới / cập nhật này với cái trước đó và tìm ra những gì được thay đổi, và sau đó nó cập nhật chỉ một phần của DOM thực cần đã thay đổi để giữ cho cả DOM (ảo và thực) giống nhau.

Viết tắt cho Properties Props như là thuộc tính(attributes) của HTML nhưng cho React Components Nó là một object chứa hết những attributes với các cặp key-value được truyền vào ở nơi gọi nó.

Hook là các hàm có một số mục đích được xác định trước Các hook đã được thêm vào trong React 16.8L Hooks cho phép các thành phần chức năng sử dụng các tính năng của class components có thể được sử dụng trong class components.

Ba loại hook thông dụng nhất là:

State Hook: State là một đối tượng React tích hợp được sử dụng để chứa / lưu trữ dữ liệu hoặc thông tin thuộc về components Mỗi khi state thay đổi thì component sẽ được rerender

Effect Hook: Effect Hook cho phép thực hiện các side effect trong các function components Ví dụ về side effect là data fetching ,storing data, v.v.

Context Hook: Giúp ta có thể truy cập data/ state ở toàn bộ react app

Thông qua props theo chiều từ parent component xuống child component.

Chiều ngược lại gọi là lift the state up hoặc sử dụng Context.

Spring Boot

Spring Boot là một dự án phát triển bởi JAV (ngôn ngữ java) trong hệ sinh thái Spring framework Nó giúp cho các lập trình viên chúng ta đơn giản hóa quá trình lập trình một ứng dụng với Spring, chỉ tập trung vào việc phát triển business cho ứng dụng.

Một số tính năng nổi bật của Spring Boot đó là:

Tạo ra các ứng dụng Spring mang tính độc lập.

Nhúng trực tiếp Tomcat mà không cần phải triển khai ra file WAR.

Starter dependency giúp cho việc chạy cấu hình Maven trở nên đơn giản hơn.

Tự động chạy cấu hình Spring khi cần thiết.

Không sinh code cấu hình, đồng thời không yêu cầu phải cấu hình bằng XML.

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

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

Các thành phần được sử dụng để thiết kế:

Dịch vụ Amazon Web Service: Amazon Lex, Amazon Lambda.

Dùng AWS Lambda để làm môi trường lập trình.

Lex là nơi nhận dữ liệu vào từ người dùng và hiển thị dữ liệu thông qua văn bản sau khi được xử lý bởi Amazon Lambda.

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

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

Các yếu tố cơ bản liên quan đến việc thiết kế các luồng tương tác là cách nói, ý định và vị trí Cách thức các yếu tố này được xác định bao gồm:

Utterances (Phát ngôn): Đây là những câu hỏi mẫu mà người dùng có thể hỏi các chatbot Dữ liệu đào tạo này đã giúp Lex hiểu phạm vi của những câu hỏi ngôn ngữ tự nhiên Ngoài ra, khả năng học sâu cho phép Lex suy diễn từ các biến thể đã cho của câu hỏi, và mở rộng vốn từ vựng để hiểu các biến thể mới hơn của câu hỏi.

Intent (ý định): Lex được đào tạo để phân tách từng dữ liệu theo một mục đích cơ bản.

Slots (giá trị bổ sung): Đây là những giá trị bổ sung cho những phát ngôn hoặc ý định cụ thể Chúng cần thiết cho các câu hỏi cần dữ liệu bổ sung, để có thể trả lời chính xác.

Huấn luyện dữ liệu xung quanh các giá trị bổ sung, khả năng hoán vị và kết hợp của các giá trị bổ sung cũng được đưa vào Amazon Lex Điều này cho phép chatbot xác định chính xác các câu hỏi và cũng phát hiện ra các giá trị bổ sung mới khi chúng xảy ra.

Chi phí: Kể từ ngày bắt đầu sử dụng Amazon Lex, chúng ta có thể xử lý miễn phí lên tới 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 sử dụng các thuật toán huấn luyện để xây dựng các mô hình NLU hiệu quả Mặc dù các chi tiết cụ thể của thuật toán huấn luyện không được công bố công khai, quá trình huấn luyện trong Amazon Lex thường bao gồm các bước sau: o Chuẩn bị dữ liệu huấn luyện: Tập dữ liệu huấn luyện được chuẩn bị với các ví dụ từ người dùng đã được gắn nhãn với các ý định (intents) và các 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

Xử lý dữ liệu đầu vào: Dữ liệu đầu vào được tiền xử lý để chuẩn hóa, loại bỏ ký tự đặc biệt và các bước tiền xử lý khác để chuẩn bị cho quá trình huấn luyện.

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”, “to”,

“San Francisco”, “on” và “July 10 th ”.

Xây dựng mô hình NLU: Amazon Lex sử dụng các thuật toán học máy, bao gồm cả mạng neural, để xây dựng mô hình NLU Các thuật toán này học cách nhận biết các mẫu và mối quan hệ trong dữ liệu huấn luyện để dự đoán ý định và trích xuất thông tin từ đầu vào người dùng.

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

“BookFlight” 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.

Trích xuất thông tin: Thuật toán xác định và trích xuất các thông tin liên quan từ đầu vào của người dùng Trong trường hợp này, nó nhận ra các thông tin “Departure City” là “New York”, “Destination City” là

“San Francisco” và “Travel Date” là “July 10th”Tinh chỉnh mô hình: Sau khi mô hình NLU được xây dựng, nó được tinh chỉnh và cải thiện bằng cách huấn luyện trên các tập dữ liệu lớn

Chương 2: Cơ sở lý thuyết hơn và thực hiện việc điều chỉnh tham số mô hình để đạt được hiệu suất tốt nhất. Đánh giá mô hình: Mô hình NLU được đánh giá bằng cách sử dụng tập dữ liệu kiểm tra độc lập Việc đánh giá này giúp đảm bảo rằng mô hình hoạt động chính xác và có hiệu suất cao trên các dữ liệu mới. Bằng cách nhận dạng ý định và trích xuất thông tin, thuật toán NLU cho phép Amazon Lex tạo ra các phản hồi phù hợp hoặc thực hiện các hành động liên quan dựa trên yêu cầu của người dùng.

AWS Lambda là một nền tảng điện toán không có máy chủ, có thể chạy mã để đáp ứng với các trình kích hoạt sự kiện Nó cũng tự động quản lý tất cả các tài nguyên cần thiết để quản lý và mở rộng mã của người dùng. Ý định của người dùng (intent) và các giá trị bổ sung (slot) được thu thập bởi Amazon Lex là yếu tố kích hoạt cho Lambda Dựa trên intent và slot được thu thập, Lambda sẽ kích hoạt để xử lý thông tin thu thập từ đó phản hồi cho người dùng một câu trả lời thích hợp 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.

Ví dụ: nếu một người xem một bộ phim, hệ thống sẽ gợi ý ra những bộ phim có nội dung tương tự như là “mô tả phim”, “diễn viên” Với phương pháp này, dữ liệu đưa vào để xây dựng thuật toán sẽ là thành phần của một bộ phim

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ể hiểu được các ký tự và từ Vậy nên, khi làm việc với dữ liệu kiểu text, chúng ta cần biểu diễn dưới dạng là các con số để máy tính có thể hiểu được.

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

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

Countvectorizer làm cho kiểu dữ liệu dạng text có thể dễ dàng được sử dụng trực tiếp trong các mô hình của học máy và học sâu Như là phân loại văn bản (text classification)

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: Stop words là những từ trong bất kỳ ngôn ngữ nào mà không có nhiều nghĩa trong một câu Những từ này có thể được loại bỏ mà không làm thay đổi của câu.

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 đo lường sự tương đồng giữa các vector, có thể đo bằng các tính góc cosine giữa các vector. Ngoài ra, có thể tính bằng công thức:

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

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

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

Mục đích của dự án xây dựng chương trình cung cấp dịch vụ du lịch, thiết kế trang web dễ sử dụng có nhiều tính năng linh hoạt như: o Về phí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í.

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.

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àngQuản lý sản phẩm

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

User ● 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

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

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 Xem, thêm, sửa hình ảnh của sản phẩm 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

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

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

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

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.

Brief Cho phép admin, mod quản lý giày trên hệ thống, có thể thêm

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.

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]

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

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

Description 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

Description 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]

Thêm size 4.1 Điền thông tin cần thiết. mới 4.2 Bấm chọn ‘Save Create’.

Chỉnh sửa 4.1 Bấm chọn biểu tượng chỉnh sửa của size để tự động điền thông size 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

Brief Cho phép admin, mod quản lý hình ảnh của mỗi sản phẩm, có thể

Description 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

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

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

Thêm hình ảnh 3.1 Bấm chọn ‘Add Image’ để hiển thị khung chứa ảnh. mới

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

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

Hình ảnh hiển thị trong khung ảnh [A2] Bấm nút ‘Save’ để lưu thay đổi.

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

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

Xác nhận đơn 3.2.1 Bấm chọn ‘Shipping’. hàng

Hoàn tất đơn 3.2.1 Bấm chọn ‘Complete’. hàng.

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

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

Description 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.

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

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

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.

[E1] Thông tin bị thiếu hoặc không hợp lệ sẽ xuất hiện thông báo. [E2] Thông tin không hợp lệ sẽ thông báo cập nhật không thành công và quay về bước 2

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

Name Thay đổi mật khẩu

Brief 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

[E1] Thông tin bị thiếu hoặc không đúng định dạng sẽ thông báo lỗi. [E2] 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 Form thanh toán paypal hiển thị

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

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

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

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

[E2] 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.

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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.

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

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

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

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 4.1 Bấm chọn ‘Monthly Revenue By Year’ hiển thị tháng theo năm 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 4.1 Bấm chọn ‘Statistics By Month’ hiển thị biểu đồ tháng 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 4.1 Bấm chọn ‘Statistics By Date’ hiển thị biểu đồ ngày 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

Brief Giúp admin, mod quản lý danh mục voucher đang có của cửa hàng,

Description 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

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

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

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

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

[A2] 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

Brief Giúp admin, mod quản lý các giao dịch online của cửa hàng, có thể

Description thêm tiến hành hoàng tiền các đơn hàng thanh toán online đã hủy.

Chương 4: Phân tích hệ thống Đăng nhập thành công với tài khoản có quyền admin, mod.

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

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

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 3.1 Bấm vào nút “start date” để chọn ngày băt thị giao dịch đầ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 đã 3.1 Bấm vào nút “Refund” hủy 3.2 Hộp xác nhận hiện ra

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

Chương 4: Phân tích hệ thống quay về bước 2

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

Brief 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 3.1 Nhập từ khóa “Find shoe by category” danh mục 3.2 Nhập tên danh mục.

Tìm kiếm giày theo 3.1 Nhập từ khóa “Find shoe by name” tên 3.2 Nhập tên giày.

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.

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

Brief Giúp admin, mod quản lý danh mục sản phẩm đang có của cửa

Description 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’

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

Thêm danh mục 3.1 Bấm chọn ‘New Category’ để hiển thị form điền thông mới tin

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

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

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 68L

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

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 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

CHƯƠNG 5: THIẾT KẾ HỆ THỐNG 5.1 Thiết kế database

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 Int8L 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

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

8L 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 Int8L Primary Key Id của ảnh

3 product_id Int8L 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

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

8L status varchar Trạng thái ảnh

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

1 id Int8L Primary Key Id

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

5 order_id Int8L Foreign key Id của đơn hàng

6 product_id Int8L Foreign 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 Int8L Primary Key Id

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

7L wish_list_id Int8L Foreign key Id của wish list

5.1.2.5 product_infors(id, size, amount, product_id)

1 id Int8L 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 Int8L 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

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

8L 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 Int8L Foreign key Id của danh mục

1 id Int8L 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 Int8L 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

7L email varchar Email người dùng

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

10 account_id Int8L Foreign key Id của tài khoản

5.1.2.9 wish_lists(id, user_id, amount_item)

1 id Int8L Primary Key Id của wish list

2 user_id Int8L Foreign 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

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 bao gồm các thông tin cơ bản như là tên, tuổi, giới tính, số điện thoại,… của người dùng Người dùng có thể cập nhật thông tin cá nhân hoặc thay đổi mật khẩu.

Bước 1: Nhập hoặc sửa đổi thông tin cá nhân ở form ‘Edit Profile’

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

Bước 1: Bấm nút ‘Change Password’ để form nhập password hiện tại và password mới hiện ra.

Bước 2: Nhập nhập password hiện tại và password mới,

Bước 3: Bấm nút ‘Save Changes’ để 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:

Bước 1: Nhập văn bản vào ô input

Bước 1: Bấm ‘Edit’ để hiển thị form chỉnh sửa

Bước 2: Chỉnh sửa nội dung bình luận

Bước 3: Bấm ‘Save’ để cập nhật hoặc ‘Cancel’ để hủy

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: (đã đăng nhập vào hệ thống)

Bước 3: Bấm nút ‘Add to cart’ để thêm sản phẩm vào giỏ hàng

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’

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: Những đơn hàng có trạng thái ‘Waiting’ sẽ được phép hủy 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

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 về tài khoản paypal của cửa hàng, xem thống kê giao dịch trong khoảng thời gian 30 ngày, có thể hoàn tiền những đơn hàng thanh toán paypal đã hủy

Xem thống kê giao dịch (Mặc định là 7L ngày trước từ ngày hiện tại)

Bấm chọn ‘Start date’ để chọn ngày bắt đầu

Bấm chọn ‘End Date’ để chọn ngày kết thúc

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

Bước 2: Hộp xác nhận hiển thị

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: o Bước 1: Bấm chọn vào biểu tượnng chỉnh sửa để xem thông tin chi tiết và chỉnh sửa tài khoản. o Bước 2: Chỉnh sửa thông tin o Bước 3: Bấm nút ‘Save Changes’ để cập nhật

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

Hiển thị danh sách sản phẩm, cho phép người quản trị có thể 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, quản lý size và hình ảnh của sản phẩm

Lọc sản phẩm theo danh mục:

Bước 1: Bấm chọn vào mục select ‘All’ để hiển thị danh sách danh mục Bước 2: Bấm chọn danh mục để lọc sản phẩm theo danh mục

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

Bước 1: Bấm chọn nút ‘New Product’

Bước 2:Nhập thông tin yêu cầu

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ước 1: Bấm chọn vào biểu tượng chỉnh sửa

Bước 2: Chỉnh sửa thông tin

Bước 3: Bấm chọn ‘Save Changes’ để cập nhật

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

Chỉnh sửa size Bấm chọn biểu tượng chỉnh sửa để chỉnh sửa giày 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:

Bước 1: Bấm chọn biểu tượng ảnh để quản lý ảnh của sản phẩm

Bước 2: Bấm chọn ‘Add image’ để thêm ảnh mới hoặc bấm chọn biểu tượng chỉnh sửa để thay đổi ảnh

Bước 3: Xuất hiện nút ‘Browse’

Bước 4: Bấm nút ‘Browse’ để chọn hình ảnh

Bước 5: Bấm ‘Save’ để lưu hoặc ‘Cancel’ để hủy.

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.

Bước 1: Bấm chọn nút ‘New Voucher’ để thêm voucher mới

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

Xem thông tin chi tiết và chỉnh sửa voucher:

Bước 1: Bấm chọn vào biểu tượng chỉnh sửa

Bước 2: Chỉnh sửa thông tin

Bước 3: Bấm 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:

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 của đơn hàng:

Bước 1: Bấm chọn vào mục select ở cột status để hiển thị danh mục trạng thái

Bước 2: Bấm chọn trạng thái để cập nhật trạng thái đơ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Ử 107L

Chuẩn bị 107L

Visual Studio Code cho code Front 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 Front 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 107L

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

Front 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ử 107L

Kiểm thử hộp trắng là phương pháp kiểm tra cấu trúc bên trong của phần mềm Kỹ thuật này lấy dữ liệu thử nghiệm từ mã của chương trình và kiểm tra toàn diện mã đã phát triển Người kiểm tra chọn đầu vào để thực hiện các đường dẫn thông qua mã và xác định đầu ra thích 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 kiểm thử thuật giải chức năng Mục tiêu của phương pháp kiểm thử luồng điều khiển là đảm bảo mọi đường thi hành của đơn vị phần mềm cần kiểm thử đều chạy đúng.

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ả có được và 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 miêu tả giải thuật giúp chúng ta dễ dàng thấy các thành phần của giải thuật và mối quan hệ trong việc thực hiện các thành phần này.

Gồm hai loại: 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:

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.

Phân tích dòng dữ liệu và xây dựng đồ thị dòng điều khiển tương ứng.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ử đời sống từng biến dữ liệu.

Lập báo cáo kết quả để phản hồi. Đồ thị dòng dữ liệu:

Là một trong nhiều phương pháp miêu tả các kịch bản đời sống khác nhau của các biến.

Gồm hai loại: 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:

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

Là một phương pháp kiểm thử phần mềm được thực hiện mà tester không biết được cấu tạo bên trong của hệ thống phần mềm giống như một chiếc hộp đen chỉ nhìn được từ bên ngoài.

Quy trình kiểm thử hộp đen bao gồm:

Phân tích đặc tả của HTPM

Dùng một kỹ thuật định nghĩa các test case xác định

Kỹ thuật phân lớp tương đương

Kỹ thuật phân tích các giá trị biên

Kỹ thuật dùng các bảng quyết định

Kỹ thuật kiểm thử các bộ n thần kỳ

Kỹ thuật dùng bảng chuyển trạng thái

Kỹ thuật phân tích vùng miền

Kỹ thuật dựa trên đặc tả use case

Kỹ thuật dùng lược đồ quan hệ nhân quả

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ử

Chương 6: Cài đặt và 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=7L

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ả

1->2->3 (30, 10, {amount: 1, size: Error: “Not found Wish List

1->2->4->5 (5, 20, {amount: 1, size: Error: “Not found Product

(5, 15, {amount: 1, size: Error: “Not found Product 1->2->4->6->7L infor with Product id = 15

(5, 15, {amount: 10, size: Error: “Nike Air Max 27L0’s 1->2->4->6->8L->9->10 amount has size is 5.5 is 9

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

>12->13->14->15 5.5}) amount has size is 5.5 is 9

(Trường hợp sản phẩm Please choose again!” đã có trong giỏ hàng) (Giải thích: có 7L sản phẩm đã tồn tại trong giỏ hàng)

>12->13->14->16->17L (5, 15, {amount: 1, size: Trả về lineItem

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

>18L->19 (5, 14, {amount: 1, size: Trả về lineItem

(Trường hợp sản phẩm 5.5}) 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

Kịch bản 4: ~duk Kịch bản 5: ~duuuk Kịch bản 6: ~duuuk Kịch bản 7L: ~duuk Kết luận: Cả 7L kịch bản trên đều không chứa cặp đôi hoạt động nào bất thường cả.

Kịch bản 1: ~dk Kịch bản 2: ~duuk Kịch bản 3: ~duuuk Kịch bản 4: ~duuk Kịch bản 5: ~duuk Kịch bản 6: ~duuk Kịch bản 7L: ~duuk Kết luận: Trong 7L kịch bản trên, kịch bản 1 có cặp đôi dk hoạt động hơi lạ, cần lưu ý xem xét, còn 6 kịch bản còn lại không có cặp đôi nào hoạt động bất thường cả.

Kịch bản 1: ~dk Kịch bản 2: ~dk Kịch bản 3: ~duuk Kịch bản 4: ~duuuk Kịch bản 5: ~duuuk Kịch bản 6: ~duuuuuk Kịch bản 7L: ~duuuuuk Kết luận: Trong 7L kịch bản trên, kịch bản 1 và 2 có cặp đôi dk hoạt động hơi lạ, cần lưu ý xem xét, 5 kịch bản còn lại không có cặp đôi nào hoạt động bất thường cả.

Kịch bản 1: ~dkKịch bản 2: ~dk

Kịch bản 3: ~dk Kịch bản 4: ~dk Kịch bản 5: ~dk Kịch bản 6: ~dk Kịch bản 7L: ~duk Kết luận: Trong 7L kịch bản trên, kịch bản 1, 2, 3, 4, 5, 6 có cặp đôi dk hoạt động hơi lạ, cần lưu ý xem xét, còn kịch bản 7L không có cặp đôi nào hoạt động bất thường cả.

Kịch bản 1: ~k Kịch bản 2: ~dk Kịch bản 3: ~dk Kịch bản 4: ~duk Kịch bản 5: ~duuuk Kịch bản 6: ~duuuk Kịch bản 7L: ~duuuk Kết luận: Trong 7L kịch bản trên, kịch bản 1 là trường hợp ~k lạ lùng cần lưu ý xem xét, kịch bản 2, 3 có cặp đôi dk hoạt động hơi lạ cần lưu ý xem xét, còn kịch bản 4,5,6,7L không có cặp đôi nào hoạt động bất thường cả.

Kịch bản 1: ~kKịch bản 2: ~kKịch bản 3: ~dkKịch bản 4: ~duukKịch bản 5: ~duukKịch bản 6: ~duukKịch bản 7L: ~dukKết luận: Trong 7L kịch bản trên, kịch bản 1, 2 là trường hợp ~k lạ

Chương 6: Cài đặt và kiểm thử cần lưu ý xem xét, còn kịch bản 4, 5, 6, 7L không có cặp đôi nào hoạt động bất thường cả.

Kịch bản 1: ~k Kịch bản 2: ~k Kịch bản 3: ~k Kịch bản 4: ~duk Kịch bản 5: ~duk Kịch bản 6: ~duuk Kịch bản 7L: ~duk Kết luận: Trong 7L kịch bản trên, kịch bản 1, 2, 3 là trường hợp ~k lạ lùng cần lưu ý xem xét, còn kịch bản 4, 5, 6, 7L không có cặp đôi nào hoạt động bất thường cả.

Kịch bản 1: ~k Kịch bản 2: ~k Kịch bản 3: ~k Kịch bản 4: ~k Kịch bản 5: ~duk Kịch bản 6: ~dududuk Kịch bản 7L: ~dddddduk Kết luận: Trong 7L kịch bản trên, kịch bản 1, 2, 3, 4 là trường hợp ~k lạ lùng cần lưu ý xem xét, kịch bản 7L có tồn tại cặp đôi dd hơi lạ cần lưu ý xem xét, còn kịch bản 5, 6 không có cặp đôi nào hoạt động bất thường cả.

Kịch bản 1: ~kKịch bản 2: ~kKịch bản 3: ~kKịch bản 4: ~kKịch bản 5: ~dk

Kịch bản 6: ~duuk Kịch bản 7L: ~k Kết luận: Trong 7L kịch bản trên, kịch bản 1, 2, 3, 4, 5, 7L là trường hợp ~k lạ lùng cần lưu ý xem xét, kịch bản 6 không có tồn tại cặp đôi bất thường nào

Kịch bản 1: ~k Kịch bản 2: ~k Kịch bản 3: ~k Kịch bản 4: ~k Kịch bản 5: ~k Kịch bản 6: ~duk Kịch bản 7L: ~k Kết luận: Trong 7L kịch bản trên, kịch bản 1, 2, 3, 4, 5, 7L là trường hợp ~k lạ lùng cần lưu ý xem xét, kịch bản 6 không có tồn tại cặp đôi bất thường nào

Kịch bản 4: ~k Kịch bản 5: ~k Kịch bản 6: ~duk Kịch bản 7L: ~k Kết luận: Trong 7L kịch bản trên, kịch bản 1, 2, 3, 4, 5, 7L là trường hợp ~k lạ lùng cần lưu ý xem xét, kịch bản 6 không có tồn tại cặp đôi bất thường nào

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

~k lạ lùng cần lưu ý xem xét, kịch bản 6, 7L không có tồn tại cặp đôi bất thường nào

Kịch bản 2: ~k Kịch bản 3: ~k Kịch bản 4: ~k Kịch bản 5: ~k Kịch bản 6: ~duk Kịch bản 7L: ~k Kết luận: Trong 7L kịch bản trên, kịch bản 1, 2, 3, 4, 5, 7L là trường hợp ~k lạ lùng cần lưu ý xem xét, kịch bản 6 không có tồn tại 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

Trong khóa luận này, nhóm chúng em đã tìm hiểu và vận dụng các kiến thức về công nghệ React, Html, Css, Bootstrap, Spring Boot, Sql để xây dựng nên

Nhóm chúng em có xây dụng chức năng chatbot để phục vụ vài nhu cầu cơ bản cho user và guest, được xây dựng bằng dịch vụ amazon lex và lambda (python)

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 như: o Đối với khách hàng chưa đăng ký tài khoản (Guest): Đăng ký tài khoả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

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

Chatbot Đối với khách hàng đã đăng ký tài khoản (user): Đăng nhập Đăng xuất Quên mật khẩu Quản lý thông tin cá nhân Thay đổi mật khẩu

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)

Chương 7L: Tổng kết Đặ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 Đố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ý danh mục Quản lý sản phẩm 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 Quản lý voucher

Quản lý đơn hàng Xem thống kê theo ngày, theo tháng, theo năm (bảng và đồ thị)

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.

Chức năng của Chatbot còn giới hạn ở một số điểm:

Mỗi tháng được sử dụng 10000 yêu cầu văn bản trong năm đầu tiên, nếu dùng vượt quá sẽ tính phí theo hình thức “Pay as you go”

Hạn chế về chức năng phản hồi những tình huống chưa có kịch bản. 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.

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:

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.

“Spring Boot Reference Documentation”, năm 2022, https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/

“Redux là gì? Hiểu rõ cơ bản cách dùng Redux”, https://topdev.vn/blog/redux- la- gi/

“Clue Mediator, How to implement a line chart in react”, năm 2022, https://www.cluemediator.com/ https://www.w3schools.com/bootstrap4/

“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/

Ramya Vidiyala, “How to Build a Movie Recommendation System”, năm 2020, https://towardsdatascience.com/how-to-build-a-movie-recommendation- system- 67Le321339109

“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	khóa luận tốt nghiệp
Năm xuất bản	2023
Thành phố	Thành Phố Hồ Chí Minh

Định dạng
Số trang	148
Dung lượng	8,87 MB