Đề tài xây dựng website bán đồ công nghệ với microservices

Bởi vì sự tiện lợi, giá cả rõ ràng, vận chuyển đơn hàng ngày càng nhanh chóng hơn, các cửa hàng kinh doanh luôn nhận thấy được tiềm năng của việc tiếp thị và bán hàng online.Đặc biệt đối

GIỚI THIỆU ĐỀ TÀI

Tên đề tài

Tên của đề tài là “Xây dựng website bán đồ công nghệ với Microservices”.

Mô tả đề tài

GearShop là website chuyên hỗ trợ quản lý hàng hóa và cung cấp giải pháp bán hàng trực tuyến dành cho các cửa hàng công nghệ Với GearShop, khách hàng có thể dễ dàng khám phá và mua sắm các sản phẩm công nghệ đa dạng như laptop, màn hình, chuột, bàn phím, cũng như các thiết bị bàn ghế thông minh Đây là nền tảng lý tưởng để quản lý và phát triển cửa hàng công nghệ của bạn một cách hiệu quả.

GearShop là một website cung cấp các chức năng phục vụ hai nhóm người dùng chính: quản lý cửa hàng và khách hàng Đối với quản lý, hệ thống hỗ trợ quản lý phân loại sản phẩm, thương hiệu, phiên bản, nhập hàng, quản lý đơn hàng, khuyến mãi, hệ thống người dùng và thống kê dữ liệu Đối với khách hàng, các tính năng gồm xem danh sách sản phẩm theo loại và thương hiệu, lọc và sắp xếp sản phẩm, xem chi tiết sản phẩm, quản lý giỏ hàng, hồ sơ cá nhân và thông tin tài khoản khi đăng nhập Được xây dựng trên kiến trúc microservices, GearShop nâng cao tính mở rộng và ổn định hệ thống, khắc phục những hạn chế của kiến trúc monolithic truyền thống.

Lý do chọn thiết kế Website trên kiến trúc microservices

1.3.1 Lý do khách quan Đầu tiên đó chính là sự phát triển của mạng Internet, đã bắt đầu nhen nhóm về microservice từ những năm 2004, nhưng chưa quá nổi bật Nhưng đến những năm gần đây với sự bùng nổ của công nghệ với Smartphone, Wifi v v dẫn đến việc con người ngày càng tiếp cận với các dịch vụ công nghệ nhiều hơn, nhiều business công nghệ xuất hiện nhằm đáp ứng nhu cầu hiện nay Thay vì trước đây chỉ có những hệ thống nhỏ, với những trang tin tức, thông tin, với lượng truy cập và tương tác không

Trong bối cảnh 18+ quá lớn, các lĩnh vực như mạng xã hội, fintech và công nghệ phát triển không ngừng nhằm đáp ứng nhu cầu ngày càng tăng của người dùng Các dịch vụ này đòi hỏi sự đổi mới và mở rộng liên tục để thích ứng với xu hướng thị trường nhanh chóng và giữ vững vị trí cạnh tranh Việc phát triển nhanh chóng của các nền tảng số là chìa khóa để đáp ứng tốt hơn mong đợi của khách hàng trong thời đại số hóa hiện nay.

Do đó, sự bất lợi và những nhược điểm của Monolith bắt đầu xuất hiện

Một số nhược điểm của Monolith như:

Kiến trúc microservice có thể giải quyết được tất cả nhược điểm đó tuy nhiên cũng có một số nhược điểm như:

- Data Sharing và Data Consistency

Nhóm nhận thấy rằng việc sử dụng kiến trúc monolith trong dự án hạn chế khả năng mở rộng và tái sử dụng hệ thống về lâu dài Do đó, họ mong muốn thử thách bản thân bằng cách áp dụng các kiến trúc, công nghệ mới, xu hướng hiện đại để nâng cao trình độ chuyên môn và kiến thức công nghệ của đội nhóm.

Công nghệ sử dụng

• Website bán hàng: Vue, Vuex, thư viện UI Vuetify

• Website quản lý: React Js, dva, umi, thư viện UI Ant design

• Framework: Spring Boot, Spring Cloud, Zipkin

• Chrome, React tool dev, Vue tool dev

CƠ SỞ LÝ THUYẾT

Tổng quan về Microservices

Microservices là phương pháp phát triển phần mềm nổi bật giúp xây dựng các mô-đun đơn chức năng với giao diện và hoạt động rõ ràng, hỗ trợ các thành phần tồn tại và mở rộng độc lập Lợi ích của kiến trúc Microservices bao gồm khả năng mở rộng linh hoạt, giảm thiểu phức tạp mã nguồn và tối ưu hóa quá trình phát triển hệ thống phần mềm.

Người dùng tương tác với hệ thống thông qua API Gateway, nơi các dịch vụ trong hệ thống được đăng ký với Discovery Server để đảm bảo khả năng mở rộng và phân tán Khi nhận được yêu cầu từ khách hàng, API Gateway sẽ chuyển tiếp request đến Discovery Server để xác định các dịch vụ phù hợp cần xử lý Sau đó, yêu cầu sẽ được gửi tới các dịch vụ tương ứng để xử lý và trả về kết quả phù hợp, đảm bảo hiệu quả và hiệu suất cho hệ thống.

Gateway đóng vai trò là cổng truyền tin giữa người dùng và máy chủ, hoạt động như một điểm truy cập duy nhất để đảm bảo kiểm soát và quản lý dữ liệu hiệu quả Ngoài ra, gateway còn tích hợp các chức năng quan trọng như xác thực người dùng (Authentication), ghi nhận hoạt động (Logging), lưu trữ tạm thời dữ liệu (Caching), bảo mật (Security) và nhiều tính năng nhẹ nhàng khác nhằm tối ưu hóa trải nghiệm người dùng và bảo vệ hệ thống Việc sử dụng gateway giúp hệ thống vận hành ổn định, an toàn hơn, đồng thời hỗ trợ các nghiệp vụ liên quan một cách linh hoạt và hiệu quả.

Trong kiến trúc Microservices, số lượng dịch vụ cần xử lý lớn và vị trí của chúng có thể thay đổi nhanh chóng do đặc tính phát triển linh hoạt của hệ thống Để đảm bảo xác định chính xác vị trí của các dịch vụ trong quá trình hoạt động, giải pháp hiệu quả là sử dụng Service Registry Điều này giúp quản lý dịch vụ một cách linh hoạt và tối ưu hơn trong môi trường Microservices.

Service Registry giữ các thực thể microservices cùng với địa chỉ của chúng, cho phép người dùng dễ dàng tìm kiếm các dịch vụ đang hoạt động và vị trí của chúng Các microservices đăng ký với Service Registry khi bắt đầu chạy và hủy đăng ký khi tắt, đảm bảo thông tin luôn được cập nhật chính xác Để truy tìm các microservices hiện có và địa chỉ của chúng, ta cần áp dụng quy trình khám phá dịch vụ, trong đó có hai mô hình chính là Client-side Discovery và Server-side Discovery, phù hợp với các kiến trúc hệ thống khác nhau và tối ưu hóa quá trình tương tác giữa các dịch vụ.

Trong mô hình này, Client hoặc API Gateway truy vấn Service Registry để lấy thông tin địa điểm của một thực thể dịch vụ Quá trình này đòi hỏi Client hoặc API Gateway phải thực hiện logic tìm kiếm dịch vụ bằng cách gọi vào Service Registry để lấy dữ liệu chính xác và cập nhật nhất.

This approach involves the client or API Gateway sending requests to a designated component, such as a Load Balancer This component then consults the Service Registry to determine the locations of various microservices This setup ensures efficient routing and discovery of microservices within the architecture.

Docker

Docker is a platform designed for developers and sysadmins to develop, deploy, and run applications using containers It enables the creation of isolated and independent environments, known as containers, for launching and developing applications Deploying an application is seamless—simply run the Docker container on any server, and the application will start immediately, ensuring quick and efficient deployment.

• Không như máy ảo Docker start và stop chỉ trong vài giây

• Bạn có thể khởi chạy container trên mỗi hệ thống mà bạn muốn

• Container có thể build và loại bỏ nhanh hơn máy ảo

Thiết lập môi trường làm việc dễ dàng chỉ với một lần cấu hình duy nhất, giúp bạn không phải cài đặt lại dependencies mỗi khi thay đổi máy hoặc có người mới tham gia dự án Bạn chỉ cần chia sẻ file cấu hình đó để đảm bảo mọi thành viên đều có môi trường làm việc nhất quán và tiết kiệm thời gian cài đặt lần đầu.

• Nó giữ cho word-space của bạn sạch sẽ hơn khi bạn xóa môi trường mà ảnh hưởng đến các phần khác

Tổng quan về Spring Boot

Spring Boot là một dự án phát triển dựa trên ngôn ngữ Java trong hệ sinh thái Spring framework, giúp đơn giản hóa quá trình phát triển ứng dụng Java Nó cho phép lập trình viên tập trung vào xây dựng các chức năng kinh doanh của ứng dụng mà không cần lo lắng về cấu hình phức tạp Nhờ Spring Boot, việc phát triển và triển khai ứng dụng trở nên nhanh chóng, dễ dàng hơn, nâng cao hiệu quả làm việc của các nhà phát triển.

• Phát triển web một cách đơn giản và nhanh chóng

• Có tính quản trị cao

• Dễ dàng ứng dụng Spring và các sự kiện

• Có thể cấu hình ở bên ngoài và tạo ra những tệp thuộc tính

Tổng quan về Postgres SQL

PostgreSQL là hệ quản trị cơ sở dữ liệu quan hệ và đối tượng miễn phí, mã nguồn mở, hiện đại nhất hiện nay Với khả năng mở rộng cao và tuân thủ các tiêu chuẩn kỹ thuật, PostgreSQL được thiết kế để xử lý đa dạng khối lượng công việc lớn, phù hợp từ máy tính cá nhân đến kho dữ liệu hoặc dịch vụ web nhiều người dùng đồng thời.

• Cung cấp nhiều kiểu dữ liệu: PostgreSQL cung cấp đa dạng kiểu dữ liệu như nguyên hàm, cấu trúc, hình học,

• Bảo đảm toàn vẹn dữ liệu: Dữ liệu trong PostgreSQL luôn được đảm bảo tính toàn vẹn

PostgreSQL cung cấp tính năng thiết lập linh hoạt, cho phép người dùng tùy chỉnh danh mục từ cơ bản đến nâng cao nhằm tối ưu hóa tốc độ truy cập dữ liệu Hệ quản trị này còn hỗ trợ thống kê trên nhiều cột khác nhau, giúp nâng cao khả năng phân tích và xử lý dữ liệu hiệu quả Ngoài ra, PostgreSQL còn đi kèm với nhiều tùy chỉnh và cấu hình khác để phù hợp với từng nhu cầu của người dùng.

• Chức năng bảo mật: PostgreSQL hỗ trợ xây dựng hàng rào bảo mật, xác thực mạnh

• Khả năng mở rộng: Người dùng có thể thực hiện mở rộng hệ thống qua các phức thức lưu trữ, kết nối cơ sở dữ liệu

• Chức năng tìm kiếm văn bản: PostgreSQL cung cấp tính năng tìm kiếm văn bản đầy đủ, hệ thống hóa ký tự theo cách khoa học.

Tổng quan về Json Web Token (JWT)

JWT, viết tắt của JSON Web Token, là phương tiện đại diện cho việc truyền dữ liệu giữa server và client Đây là một tiêu chuẩn mở (RFC 7519) giúp xác minh thông tin một cách an toàn giữa các bên Client-Server dưới dạng JSON object.

Các chuỗi thông tin dạng JSON sẽ được mã hoá thành các chuỗi ký tự không có trật tự rõ ràng, giúp bảo vệ tính bảo mật và gây khó hiểu cho người đọc Tuy nhiên, thông tin này vẫn đảm bảo tính xác thực và đáng tin cậy nhờ vào khả năng ký điện tử (digitally signed) JWT (JSON Web Token) có thể được ký bằng secret (sử dụng thuật toán HMAC) hoặc cặp khóa công khai/private (sử dụng chuẩn RSA hoặc ECDSA), giúp đảm bảo tính toàn vẹn và xác thực của dữ liệu trong các giao dịch trực tuyến.

JWT là một chuỗi gồm ba phần được phân tách bằng dấu chấm (.), bao gồm Object Header dạng JSON đã được mã hóa Base64, Payload Object dạng JSON cũng được mã hóa Base64, và Signature cho URI cũng được mã hóa Base64.

JWT là lựa chọn hàng đầu cho chuyển đổi trong môi trường HTTP và HTML nhờ kích thước nhỏ gọn hơn so với SAML, vì JSON ngắn gọn hơn nhiều so với XML, giúp tối ưu hóa hiệu suất và giảm thiểu dung lượng dữ liệu truyền tải.

Bộ phân tích cú pháp JSON được sử dụng phổ biến trong hầu hết các ngôn ngữ lập trình nhờ khả năng tạo ra bản đồ trực tiếp tới các đối tượng, giúp quá trình làm việc trở nên dễ dàng hơn.

JWT là phương pháp xác thực phổ biến, dễ xử lý và được sử dụng rộng rãi trên nhiều nền tảng internet Nhờ khả năng dễ dàng xử lý trên mọi thiết bị, đặc biệt là các thiết bị di động kết nối internet, JWT giúp người dùng truy cập và xác thực một cách thuận tiện và nhanh chóng trên mọi thiết bị.

JWT có thể thực hiện ký an toàn và bí mật bằng cách sử dụng cặp khóa public/private dưới dạng chứng chỉ X.509 và thuật toán HMAC, đảm bảo tính bảo mật của dữ liệu Trong khi đó, mã SAML cũng sử dụng cặp khóa này, nhưng việc ký XML trong SAML có thể tạo ra các lỗ hổng bảo mật, dẫn đến nguy cơ bị đánh cắp thông tin.

PHÂN TÍCH ĐẶC TẢ YÊU CẦU

Mô tả yêu cầu

Bảng 3.1 Yêu cầu chức năng

Nhóm chức năng Chức năng Mô tả

Khách hàng Đăng ký tài khoản

Khách hàng có thể đăng ký tài khoản bằng email để dễ dàng sử dụng các chức năng và ưu đãi của website

Xác thực tài khoản bằng email

Sau khi khách hàng đăng ký tài khoản, hệ thống sẽ gửi email xác thực đến hòm thư của người dùng để xác nhận đăng ký thành công Sau khi xác thực, khách hàng có thể đăng nhập vào tài khoản để sử dụng các dịch vụ và chức năng của hệ thống một cách an toàn và tiện lợi.

Khách hàng có thể chọn quên mật khẩu, một email sẽ được gửi đến hòm thư khách hàng, theo đường link và đặt lại mật khẩu mới

Chỉnh sửa thông tin tài khoản

Khách hàng có thể chỉnh sửa thông tin cá nhận cũng như mật khẩu tài khoản của mình

Xem lịch sử mua hàng

Khách hàng có thể theo dõi chi tiết danh sách chi tiết các đơn hàng mình đã đặt

Khách hàng có thể chọn các sản phẩm và đưa vào giỏ hàng để thuận tiện cho việc mua sắm Đặt hàng

Chức năng đặt hàng hỗ trợ cả hai đối tượng khách hàng đã có tài khoản và chưa có tài khoản

- Đối với các khách hàng đã có tài khoản: Yêu cầu đặt hàng sẽ được chuyển thẳng tới cho phía quản lý

Đối với khách hàng chưa có tài khoản, khách hàng cần cung cấp đầy đủ thông tin cá nhân như số điện thoại và địa chỉ Nhân viên hỗ trợ sẽ liên hệ trực tiếp để xác nhận thông tin, đảm bảo quy trình đăng ký thuận lợi và nhanh chóng.

Quản lý sản phẩm Nhân viên quản lý có thể các thực hiện các chức năng thêm, sửa, xóa sản phẩm

Quản lý biến thể sản phẩm

Nhân viên quản lý có thể thực hiện các chức năng thêm, sửa xoá các biến thể của sản phẩm đó

Quản lý thể loại Nhân viên quản lý có thể các thực hiện các chức năng thêm, sửa, xóa thể loại

Nhân viên quản lý có thể các thực hiện các chức năng thêm, sửa, xóa thương hiệu

Quản lý mã giảm giá

Nhân viên quản lý có thể thực hiện các chức năng thêm, sửa, xóa mã giảm giá nhằm đảm bảo hoạt động khuyến mãi diễn ra thuận lợi và linh hoạt Bên cạnh đó, họ cũng chịu trách nhiệm quản lý đơn hàng bằng cách xem xét và cập nhật trạng thái đơn hàng kịp thời, giúp tối ưu quá trình vận hành và nâng cao trải nghiệm khách hàng.

29 trạng thái của đơn hàng Nếu đơn hàng của tài khoản chưa đăng ký thì nhân viên sẽ gọi điện xác nhận

Quản lý nhập hàng Nhân viên có thể xem, thêm hoặc xoá chi đơn nhập hàng

Admin có thể thêm, sửa, xoá tài khoản cho nhân viên Ngoài ra admin có thể xem chi tiết, vô hiệu hoá tài khoản khách hàng

Hệ thống cung cấp các biểu đồ và số liệu trực quan giúp nhân viên quản lý dễ dàng theo dõi tình hình kinh doanh của cửa hàng Với chức năng xuất file Excel, việc phân tích và báo cáo dữ liệu trở nên thuận tiện hơn, hỗ trợ quản lý đưa ra các quyết định chính xác và kịp thời.

3.1.2 Yêu cầu phi chức năng

Tính bảo mật là yếu tố hàng đầu trong việc bảo vệ dữ liệu người dùng, đảm bảo an toàn trước các cuộc tấn công từ bên ngoài Các hệ thống cần kiểm soát vận hành chặt chẽ và giảm thiểu tối đa rủi ro rò rỉ thông tin thông qua các chức năng xác thực người dùng như đăng nhập và đăng ký.

− Tính tiện dụng: Phần mềm có giao diện đẹp mắt, dễ sử dụng và tiện lợi trong việc mua sắm online và quản lý của nhân viên

− Tính hiệu quả: Đảm bảo tốc độ xử lý ổn định, có thể lưu một lượng lớn dữ liệu, tránh xảy ra lỗi ngoại lệ

− Tính tương thích: Ứng dụng có thể chạy ổn định và tương thích với nhiều nền tảng hệ điều hành khác nhau

Phân tích Use case

Hình 3.1 Sơ đồ use case quản lý

Bảng 3.2 Danh sách Actor quản lý

STT Tên Actor Ý nghĩa/Ghi chú

1 Nhân viên Tài khoản được cấp bởi Admin

2 Admin Tài khoản gốc của phần mềm

Bảng 3.3 Danh sách use-case quản lý

STT Tên Use-case Ý nghĩa/Ghi chú

1 Đăng nhập Thể hiện chức năng đăng nhập của phần mềm

2 Đăng xuất Thể hiện chức năng đăng xuất của phần mềm

3 Quản lý tài khoản cá nhân

Thể hiện các chức năng quản lý tài khoản cá nhân (Thay đổi thông tin cá nhân, đổi mật khẩu)

4 Quản lý phân loại Thể hiện các chức năng quản lý phân loại (tìm kiếm, sắp xếp, tạo mới, chỉnh sửa, xóa)

Thể hiện các chức năng quản lý thương hiệu (tìm kiếm, sắp xếp, tạo mới, chỉnh sửa, xóa)

6 Quản lý sản phẩm, phiên bản

Thể hiện các chức năng quản lý sản phẩm, phiên bản (tìm kiếm, sắp xếp, tạo mới, chỉnh sửa, xóa)

7 Quản lý đơn hàng Thể hiện các chức năng quản lý đơn hàng (tìm kiếm, sắp xếp, thay đổi trạng thái, xóa, xuất hóa đơn)

8 Quản lý nhập hàng Thể hiện các chức năng quản lý đơn hàng (tìm kiếm, sắp xếp, thêm mới, xóa, xuất phiếu nhập)

9 Quản lý tài khoản Thể hiện các chức năng quản lý tài khoản (tìm kiếm, sắp xếp, thêm mới, xóa, vô hiệu hóa tài khoản)

Thể hiện các chức năng quản lý khuyến mãi (tìm kiếm, sắp xếp, thêm mới, chỉnh sửa, xóa)

11 Thống kê Thể hiện các chức năng xem thông tin kinh doanh

(xem thu, chi, sản phẩm bán chạy theo bộ lọc, xuất file Excel)

3.2.1.4 Đặc tả Use-case a Đăng nhập

Bảng 3.4 Đặc tả use-case đăng nhập (quản lý)

Tên chức năng Đăng nhập

Tóm tắt Chức năng đăng nhập vào hệ thống

Dòng sự kiện chính 1 Người dùng điền tên đăng nhập, mật khẩu

2 Người dùng nhấn chọn button “Đăng nhập”

3 Hệ thống tiếp nhận và xác thực nếu đúng thông tin

4 đăng nhập màn hình sẽ được chuyển tới trang chủ. Dòng sự kiện khác Nếu như xác thực thành công phần mềm sẽ tiến hành tải các dữ liệu để đưa ra các màn hình

Yêu cầu đặc biệt Không có

Trạng thái hệ thống trước khi thực hiện use-case

Màn hình đang ở trang đăng nhập

Trạng thái hệ thống sau khi thực hiện use-case

Chuyển tới trang chủ nếu như xác thực thành công Đưa ra cảnh báo nếu như người dùng điền sai thông tin

33 Điểm mở rộng Không có b Đăng xuất

Bảng 3.5 Đặc tả use-case đăng xuất (quản lý)

Tên chức năng Đăng xuất

Tóm tắt Chức năng đăng xuất của hệ thống

Dòng sự kiện chính 1 Người dùng click chọn vào hình đại diện trên góc phải màn hình

2 Người dùng click chọn vào “Đăng xuất”

3 Phần mềm chuyển về màn hình đăng nhập Dòng sự kiện khác Không có

Người dùng đã đăng nhập vào hệ thống

Trạng thái hệ thống sau khi thực hiện use-case Đăng xuất và chuyển tới trang đăng nhập Điểm mở rộng Không có

Bảng 3.6 Đặc tả use-case chỉnh sửa thông tin (quản lý)

Tên chức năng Chỉnh sửa thông tin

Tóm tắt Chức năng chỉnh sửa thông tin cá nhân của hệ thống

2 Người dùng chọn “chỉnh sửa thông tin” Sẽ xuất hiện popup để người dùng chỉnh sửa thông tin cá nhân bao gồm: Tên hiển thị, email, số điện thoại, ảnh đại diện Phần mềm có những ràng buộc về số điện thoại, email, cũng như độ dài của tên hiển thị

3 Sau khi chỉnh sửa xong người dùng nhấn “Lưu” để tiến hành lưu lại hoặc nhấn “Esc” trên bàn phím để thoát Dòng sự kiện khác Xuất hiện cái Alert thông báo khi người dùng thao tác sai Yêu cầu đặc biệt Không có

Sau khi thực hiện use-case, hệ thống sẽ tự động cập nhật giao diện, hình ảnh và thông tin tài khoản trên màn hình chính, giúp người dùng trải nghiệm mới mẻ và thuận tiện hơn Quá trình này diễn ra nhanh chóng, đảm bảo mọi thay đổi được phản ánh chính xác trên giao diện người dùng Hiện tại, hệ thống không có điểm mở rộng liên quan đến trạng thái hệ thống sau khi cập nhật Việc cập nhật tự động này nâng cao hiệu quả quản lý và tối ưu trải nghiệm người dùng trên ứng dụng.

Bảng 3.7 Đặc tả use-case đổi mật khẩu (quản lý)

Tên chức năng Đổi mật khẩu

Tóm tắt Chức năn đổi mật khẩu của hệ thống

2 Nếu người dùng nhấn “đổi mật khẩu” thì sẽ xuất hiện popup “ĐỔI MẬT KHẨU”, người dùng tiến hành nhập mật khẩu cũ và 2 lần mật khẩu mới, 2 lần nhập phải trùng khớp nhau, mật khẩu mới phải khác với mật khẩu cũ

3 Sau khi điền đủ thông tin người dùng nhấn “Lưu thay đổi” để thay đổi mật khẩu hoặc nhấn “Esc” trên bàn phím để thoát Dòng sự kiện khác Xuất hiện các Alert thông báo nếu người dùng nhập sai

Yêu cầu đặc biệt Mật khẩu mới phải khác mật khẩu cũ, 2 lần nhập mật khẩu mới phải trùng khớp nhau

Sau khi đổi thành công phần mềm vẫn duy trì đăng nhập hiện tại Điểm mở rộng Không có

36 e Quản lý phân loại sản phẩm

Bảng 3.8 Đặc tả use-case quản lý phân loại sản phẩm (quản lý)

Tên chức năng Quản lý phân loại sản phẩm

Tóm tắt Thực hiện các chức năng tìm kiếm, sắp xếp, tạo mới phân loại, chỉnh sửa và xóa phân loại

Dòng sự kiện chính 1 Sắp xếp: Khi người dùng ấn vào mũi tên lên xuống ở cột

“ID” thì phân loại sẽ được sắp xếp tăng dần hoặc giảm giần theo ID

2 Tìm kiếm: Khi người dùng nhấn vào icon “Search” ở cột

“Tên phân loại” sẽ xuất hiện thanh tìm kiếm Người dùng tiến hành nhập từ khóa, sau đó nhấn icon “Search” hoặc

“Filter” để tìm kiếm phân loại

3.1 Người dùng nhấn vào Button “Tạo mới” để chuyển tiếp sang trang tạo mới phân loại

3.2 Người dùng điền vào tên phân loại, hình ảnh, mô tả, tìm kiếm và lựa chọn các thuộc tính cho phân loại của mình

3.3 Nhấn “Hoàn tất” để lưu lại hoặc nhấn “Hủy” để hủy thao tác

4.1 Người dùng nhấn vào icon “Edit” trên dòng của phân loại muốn chỉnh sửa để chuyển sang trang chỉnh sửa

4.2 Người dùng tiến hành cập nhật hình ảnh, tên phân loại, mô tả

5.1 Người dùng nhấn vào icon “delete” trên dòng phân loại muốn xóa để xóa phân loại

5.2 Người dùng xác nhận lại bằng popup để xóa

Dòng sự kiện khác Xuất hiện các thông báo lỗi nếu người dùng thao tác sai Yêu cầu đặc biệt Không có

Danh sách phân loại cũ

Cập nhật lại danh sách khi có thay đổi Điểm mở rộng Không có f Quản lý thương hiệu sản phẩm

Bảng 3.9 Đặc tả use-case quản lý thương hiệu sản phẩm (quản lý)

Tên chức năng Quản lý thương hiệu sản phẩm

Tóm tắt Thực hiện các chức năng tìm kiếm, sắp xếp, tạo mới phân loại, chỉnh sửa và xóa thương hiệu

Khi người dùng nhấn vào mũi tên lên xuống tại cột “ID”, hệ thống sẽ sắp xếp thương hiệu theo thứ tự tăng hoặc giảm dần dựa trên giá trị của ID Việc này giúp người quản trị dễ dàng quản lý và tìm kiếm thương hiệu một cách nhanh chóng, nâng cao hiệu quả công việc Áp dụng chức năng sắp xếp này cũng thúc đẩy tối ưu hóa SEO bằng cách duy trì dữ liệu có cấu trúc rõ ràng và dễ phân tích.

2 Tìm kiếm: Khi người dùng nhấn vào icon “Search” ở cột “Tên thương hiệu” sẽ xuất hiện thanh tìm kiếm Người dùng tiến hành nhập từ khóa, sau đó nhấn icon “Search” hoặc “Filter” để tìm kiếm thương hiệu

3.1 Người dùng nhấn vào Button “Tạo mới” để popup tạo mới thương hiệu

3.2 Người dùng điền vào tên thương hiệu, hình ảnh, mô tả của mình

3.3 Nhấn “Hoàn tất” để lưu lại hoặc nhấn “Esc” trên bàn phím để hủy thao tác

4.1 Người dùng nhấn vào icon “Edit” trên dòng của phân loại muốn chỉnh sửa để mở popup chỉnh sửa

4.2 Người dùng tiến hành cập nhật hình ảnh, tên thương hiệu, mô tả

5.1 Người dùng nhấn vào icon “delete” trên dòng thương hiệu muốn xóa để xóa thương hiệu

Dòng sự kiện khác Xuất hiện các thông báo lỗi nếu người dùng thao tác sai

Danh sách thương hiệu cũ

Cập nhật lại danh sách khi có thay đổi Điểm mở rộng Không có g Quản lý sản phẩm, phiên bản

Bảng 3.10 Đặc tả use-case quản lý sản phẩm, phiên bản (quản lý)

Tên chức năng Quản lý sản phẩm, phiên bản

Tóm tắt Thực hiện các chức năng tìm kiếm, sắp xếp, tạo mới sản phẩm, chỉnh sửa và xóa sản phẩm, chỉnh sửa và xóa phiên bản

“ID” thì sản phẩm sẽ được sắp xếp tăng dần hoặc giảm giần theo ID

“Tên thương hiệu” sẽ xuất hiện thanh tìm kiếm Người dùng

40 tiến hành nhập từ khóa, sau đó nhấn icon “Search” hoặc

“Filter” để tìm kiếm sản phẩm

3.1 Người dùng nhấn vào button “Tạo mới” để chuyển tới trang tạo mới sản phẩm

3.2 Người dùng tiến hành điền các thông tin chính của sản phẩm: Tên sản phẩm, loại sản phẩm, thương hiệu, mô tả sản phẩm, hình ảnh sản phẩm

3.3 Sau khi lựa chọn phân loại, người dùng nhấn vào button “Thêm phiên bản” để thêm phiên bản cho sản phẩm

3.4 Người dùng nhập vào: mã nhập hàng, tên phiên bản, hình ảnh phiên bản, giá bán và các thuộc tính của phiên bảng được quy định theo phân loại

3.5 Sau khi điền đầy đủ thông tin người dùng nhấn “Hoàn tất” để lưu lại hoặc “Hủy” để hủy thao tác

4.1 Người dùng nhấn vào icon “Edit” trên dòng sản phẩm muốn chỉnh sửa, phần mềm sẽ chuyển đến trang chỉnh sửa sản phẩm

4.2 Người dùng chỉnh sửa các thông tin của sản phẩm như: Tên sản phẩm, thương hiệu, hình ảnh, mô tả

4.3 Người dùng nhấn “Hoàn tất” để lưu lại hoặc nhấn

“Hủy” để hủy thao tác

5.1 Người dùng nhấn vào icon “delete” trên dòng sản phẩm muốn xóa để xóa sản phẩm

6.1 Người dùng chọn icon “eyes” của sản phẩm muốn xem chi tiết

6.2 Người dùng nhấn vào icon “Edit” trên dòng phiên bản muốn chỉnh sửa, phần mềm sẽ chuyển đến trang chỉnh sửa phiên bản

6.3 Người dùng chỉnh sửa các thông tin của phiên bản

6.4 Người dùng nhấn “Hoàn tất” để lưu lại hoặc nhấn

“Hủy” để hủy thao tác

7.1 Người dùng chọn icon “eyes” của sản phẩm muốn xem chi tiết

7.2 Người dùng nhấn vào icon “delete” trên dòng sản phẩm muốn xóa để xóa sản phẩm

Yêu cầu đặc biệt Phải lựa chọn phân loại trước khi tạo phiên bản, mỗi sản phẩm cần có ít nhất một phiên bản

Danh sách sản phẩm cũ

Cập nhật lại danh sách khi có thay đổi Điểm mở rộng Không có h Quản lý đơn hàng

Bảng 3.11 Đặc tả use-case quản lý đơn hàng (quản lý)

Tên chức năng Quản lý đơn hàng

Tóm tắt Thực hiện các chức năng tìm kiếm, sắp xếp, chỉnh sửa trạng thái đơn hàng, thanh toán, xem chi tiết, xuất hóa đơn và xóa đơn hàng

Khi người dùng nhấn vào mũi tên lên hoặc xuống trong cột “ID”, hệ thống sẽ tự động sắp xếp các đơn hàng theo thứ tự tăng dần hoặc giảm dần dựa trên ID của từng đơn hàng This feature giúp quản lý đơn hàng dễ dàng, nhanh chóng và hiệu quả hơn.

2 Tìm kiếm: Khi người dùng nhấn vào icon “Search” ở cột “Tên khách hàng” sẽ xuất hiện thanh tìm kiếm Người dùng tiến hành nhập từ khóa, sau đó nhấn icon “Search” hoặc “Filter” để tìm kiếm đơn đặt hàng

3 Cập nhật trạng thái đơn hàng:

3.1 Người dùng click vào trạng thái hiện tại ở cột

3.2 Người dùng lựa chọn trạng thái mới cho đơn hàng

*Lưu ý: Đơn hàng có trạng thái Cancle thì không thể chuyển status được

4 Cập nhật trạng thái thanh toán:

3.1 Người dùng click vào trạng thái hiện tại ở cột

3.2 Người dùng lựa chọn trạng thái mới cho đơn hàng

*Lưu ý: Đơn hàng có trạng thái Cancle thì không thể chuyển status được

5 Xem chi tiết và xuất hóa đơn:

5.1 Người dùng nhấn vào icon “eyes” ở đơn hàng muốn xem chi tiết để mở ra popup xem chi tiết đơn hàng 5.2 Người dùng nhất “Export” để xuất hóa đơn

6.1 Người dùng nhấn vào icon “delete” trên dòng đơn hàng muốn xóa để xóa đơn hàng

Danh sách đơn hàng cũ

Danh sách đơn hàng mới cập nhật theo chỉnh sửa của người dùng Điểm mở rộng Không có

Bảng 3.12 Đặc tả use-case quản lý nhập hàng (quản lý)

Tên chức năng Quản lý nhập hàng

Tóm tắt Thực hiện các chức năng sắp xếp, tìm kiếm, tạo mới, xem chi tiết và xuất đơn nhập

“ID” thì đơn nhập sẽ được sắp xếp tăng dần hoặc giảm giần theo ID

“Người nhập” sẽ xuất hiện thanh tìm kiếm Người dùng tiến hành nhập từ khóa, sau đó nhấn icon “Search” hoặc “Filter” để tìm kiếm đơn nhập

3.1 Người dùng nhấn vào “Tạo mới” để chuyển tới trang tạo mới đơn nhập hàng

3.2 Người dùng điền thông tin mô tả của đơn nhập hàng

3.3 Người dùng tìm kiếm sản phẩm để nhập hàng, khi click chọn sản phẩm sẽ xuất hiện popup để người dùng lựa chọn phiên bản

3.4 Người dùng nhập vào đơn giá nhập hàng và số lượng nhập

3.5 Người dùng nhấn “Thêm mới” để lưu đơn hàng hoặc nhấn “Hủy” để hủy thao tác

4 Xem chi tiết và xuất đơn nhập:

4.1 Người dùng nhấn vào icon “eyes” để xem chi tiết đơn nhập

4.2 Người dùng nhấn “Export” để xuất đơn nhập

Dòng sự kiện khác Không có

Yêu cầu đặc biệt Sản phẩm nhập phải tồn tại trong hệ thống

Danh sách đơn nhập cũ

Cập nhật lại danh sách khi có thay đổi Điểm mở rộng Không có j Quản lý tài khoản

Bảng 3.13 Đặc tả use-case quản lý tài khoản (quản lý)

Tên chức năng Quản lý tài khoản

Chức năng quản lý tài khoản bao gồm xử lý các tài khoản khách hàng và nhân viên, giúp tìm kiếm và sắp xếp dữ liệu tài khoản một cách dễ dàng Quản trị viên có thể vô hiệu hóa tài khoản khách hàng khi cần thiết, cũng như tạo mới hoặc xóa bỏ các tài khoản nhân viên để duy trì hệ thống an toàn và cập nhật Việc quản lý tài khoản hiệu quả là yếu tố quan trọng giúp nâng cao trải nghiệm người dùng và đảm bảo hoạt động kinh doanh diễn ra liên tục, an toàn.

“ID” thì đơn nhập sẽ được sắp xếp tăng dần hoặc giảm giần theo ID

Trong quá trình tìm kiếm, tên khách hàng hoặc tên nhân viên sẽ xuất hiện trên thanh tìm kiếm Người dùng nhập từ khóa phù hợp và nhấn icon “Search” hoặc “Filter” để dễ dàng lọc và tìm kiếm tài khoản nhanh chóng.

3 Vô hiệu hóa tài khoản khách hàng:

Người dùng nhấn vào switch trên dòng của khách hàng mà muốn khóa tài khoản, trạng thái xanh là khóa

4 Thêm tài khoản nhân viên:

4.1 Người dùng nhấn “Thêm nhân viên” để chuyển tới trang tạo tài khoản cho nhân viên

4.2 Người dùng điền các thông tin của nhân viên mới vào

4.3 Nhấn hoàn tất để tạo tài khoản mới hoặc nhấn “Hủy” để hủy thao tác

5 Xóa tài khoản nhân viên:

5.1 Người dùng nhấn vào icon “delete” trên dòng nhân viên muốn xóa để xóa tài khoản

Danh sách tài khoản cũ

Cập nhật lại danh sách tài khoản nếu như có thay đổi Điểm mở rộng Không có k Quản lý khuyến mãi

Bảng 3.14 Đặc tả use-case quản lý khuyến mãi (quản lý)

Tên chức năng Quản lý khuyến mãi

Tóm tắt Thực hiện các chức năng sắp xếp, tìm kiếm, tạo mới, chỉnh sửa khuyến mãi

Dòng sự kiện chính đề cập đến chức năng sắp xếp trong hệ thống, cho phép người dùng nhấn vào mũi tên lên hoặc xuống để thay đổi thứ tự của các khuyến mãi theo các tiêu chí như tăng dần hoặc giảm dần Việc này giúp người dùng dễ dàng xem xét và quản lý các khuyến mãi một cách thuận tiện và hiệu quả hơn Tính năng sắp xếp theo cột này cải thiện trải nghiệm người dùng bằng cách cung cấp khả năng tùy chỉnh sắp xếp dữ liệu linh hoạt, phù hợp với nhu cầu quản lý và theo dõi các chiến dịch khuyến mãi.

“Mã” sẽ xuất hiện thanh tìm kiếm Người dùng tiến hành nhập từ khóa, sau đó nhấn icon “Search” hoặc “Filter” để tìm kiếm khuyến mãi

3.1 Người dùng nhấn vào Button “Tạo mới” để chuyển tiếp sang trang tạo mới khuyến mãi

3.2 Người dùng điền vào tên mã, thời gian áp dụng, giá trị, số lượng, hóa đơn tối thiểu, mô tả

4.1 Người dùng nhấn vào icon “Edit” trên dòng của khuyến mãi muốn chỉnh sửa để chuyển sang trang chỉnh sửa

4.2 Người dùng tiến hành cập nhật tên mã, thời gian áp dụng, giá trị, số lượng, hóa đơn tối thiểu, mô tả

5.1 Người dùng nhấn vào icon “delete” trên dòng khuyến mãi muốn xóa để xóa khuyến mãi

Danh sách khuyến mãi cũ

Danh sách khuyến mãi mới Điểm mở rộng Không có l Thống kê

Bảng 3.15 Đặc tả use-case thống kê (quản lý)

Tên chức năng Thống kê

Tóm tắt Thực hiện chức năng xem thông tin của cửa hàng theo tháng, xuất file thống kê

Dòng sự kiện chính 1 Người dùng lựa chọn thời gian xem thống kê

2 Nhấn xem để xem thông tin thống kê

3 Màn hình sẽ hiển thị các thông tin của cửa hang như:

Tổng đơn bán, doanh thu, tổng đơn nhập, biểu đồ chi tiết theo ngay, top sản phẩm bán chạy

4 Khi ngươi dùng nhấn vao nút xuất Excel thì bảng mô tả chi tiết mua bán theo từng ngày sẽ được xuất ra excel Dòng sự kiện khác Không có

Không có Điểm mở rộng Không có

Hình 3.2 Sơ đồ use-case website

Bảng 3.16 Danh sách Actor (website)

STT Tên Actor Ý nghĩa/Ghi chú

1 Khách hàng chưa có tài khoản

Người mua hàng của hệ thống

2 Khách hàng đã có tài khoản

Người mua hàng của hệ thống

Bảng 3.17 Danh sách use case (website)

STT Tên Use-case Ý nghĩa/Ghi chú

1 Xem sản phẩm theo phân loại

Liệt kê danh sách sản phẩm theo phân loại

2 Xem sản phẩm theo thương hiệu

Liệt kê sản phẩm theo thương hiệu

3 Xem thông tin chi tiết sản phẩm

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

4 Quản lý giỏ hàng Thể hiện các chức năng quản lý giỏ hàng (chỉnh sửa, xóa) Thêm khuyến mãi

5 Đặt hàng Hiển thị thông tin người nhận và đặt hàng

6 Chỉnh sửa thông tin tài khoản

Chỉnh sửa thông tin người dùng

7 Đổi mật khẩu Đổi mật khẩu

8 Lịch sử đặt hàng Hiển thị danh sách đặt hàng

9 Đăng ký Thể hiện chức năng đăng ký, đăng ký tài khoản người dùng

10 Đăng nhập Thể hiện chức năng đăng nhập

11 Quên mật khẩu Quên mật khẩu

12 Xác thực email Người dùng xác thực tài khoản của email

3.2.2.4 Đặc tả Use Case a Xem sản phẩm theo phân loại

Bảng 3.18 Đặc tả use case xem sản phẩm theo phân loại (website)

Tên chức năng Xem sản phẩm theo phân loại

Tóm tắt Thực hiện chức năng xem danh sách sản phẩm theo phân loại, lọc, sắp xếp, tìm kiếm sản phẩm

Dòng sự kiện chính 1 Xem:

Người dùng nhân chọn vào phẩn danh mục, sau đó chọn phân loại để xem danh sách sản phẩm của phân loại đó

Người dùng kéo thanh silde để chọn khoảng giá, nhấn mở các tag và lựa chọn các tag

Nhấn vào “bộ lọc” để lọc sản phẩm hoặc tắt chế độ lọc

Người dùng lựa chọn các radio ở phía trên danh sách sản phẩm để sặp xếp sản phẩm

Người dùng nhân vào tìm kiếm, nhập từ khóa và nhấn Enter để tìm kiếm sản phẩm

Dòng sự kiện khác Xuất hiện thông báo “Không có kết quả” nếu danh sách rỗng Yêu cầu đặc biệt Không có

Không có Điểm mở rộng Không có b Xem sản phẩm theo thương hiệu

Bảng 3.19 Đặc tả use case xem sản phẩm theo thương hiệu (website)

Tên chức năng Xem sản phẩm theo thương hiệu

Tóm tắt Thực hiện chức năng xem danh sách sản phẩm theo thương hiệu, lọc, sắp xếp, tìm kiếm sản phẩm

Người dùng nhân chọn vào phẩn danh mục, sau đó chọn phân loại để xem danh sách sản phẩm của phân loại đó

Người dùng kéo thanh silde để chọn khoảng giá

Nhấn vào “bộ lọc” để lọc sản phẩm hoặc tắt chế độ lọc

Người dùng lựa chọn các radio ở phía trên danh sách sản phẩm để sặp xếp sản phẩm

Người dùng nhân vào tìm kiếm, nhập từ khóa và nhấn Enter để tìm kiếm sản phẩm

Dòng sự kiện khác Xuất hiện thông báo “Không có kết quả” nếu danh sách rỗng Yêu cầu đặc biệt Không có

Không có Điểm mở rộng Không có c Xem chi tiết sản phẩm

Bảng 3.20 Đặc tả use case xem chi tiết sản phẩm (website)

Tên chức năng Xem chi tiết sản phẩm

Tóm tắt Thự hiện chức năng hiển thị thông tin chi tiết sản phẩm, lựa chọn phân loại, thêm sản phẩm vào đơn

Người dùng dễ dàng chọn vào sản phẩm hiển thị trên danh sách để truy cập trang chi tiết sản phẩm Ngoài ra, khách hàng có thể nhấp để xem thêm hình ảnh của sản phẩm, giúp đánh giá đầy đủ hơn trước khi đưa ra quyết định mua hàng.

Mặc định người dùng sẽ được xem thông số của phiên bản đầu tiên

Người dùng có thể nhấn chọn các phiên bản khác để xem các thông số của phiên bản khác

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

Người dùng nhấn vào button “+” hoặc “-” để tăng giảm số lượng

Nhấn vào “Thêm vào giỏ hàng để thêm phiên bản vào giỏ”

Dòng sự kiện khác Xuất hiện thông báo thêm thành công hoặc thông báo sản phẩm đã tồn tại trong giỏ Yêu cầu đặc biệt Không có

Không có Điểm mở rộng Không có d Quản lý giỏ hàng

Bảng 3.21 Đặc tả use case giỏ hàng (website)

Tên chức năng Quản lý giỏ hàng

Tóm tắt Thực hiện chức năng tăng giảm số lượng, xóa sản phẩm, thêm khuyến mãi

Dòng sự kiện chính 1 Chỉnh sửa giỏ hàng:

Người dùng nhấn “+” hoặc “-” trên từng sản phẩm để tăng hoặc giảm số lượng sản phẩm đó Người dùng nhấn “x” để xóa sản phẩm khỏi giỏ hàng

2 Thêm, xóa khuyến mãi Người dùng nhập vào mã khuyến mãi sau đó nhấn Enter Để xóa mã khuyến mãi người dùng nhấn vào dấu

“X” trong phần nhập mã để xóa khuyến mãi

3 Người dùng nhấn “Check out” để đi tới trang đặt hàng

Dòng sự kiện khác Người dùng nhấn vào hình ảnh trên mỗi sản phẩm sẽ chuyển tới trang xem chi tiết sản phẩm đó

Yêu cầu đặc biệt Để có thể thêm khuyến mãi người dùng bắt buộc phải đăng nhập vào hệ thống

Không có Điểm mở rộng Không có e Đặt hàng

Bảng 3.22 Đặc tả use case đặt hàng (website)

Tên chức năng Đặt hàng

Tóm tắt Thực hiện chức năng quản lý thông tin người nhận hàng và đặt hàng

Dòng sự kiện chính Sau khi nhấn Đặt hàng từ giỏ hàng, bạn sẽ được chuyển tiếp tới trang đặt hàng

THIẾT KẾ HỆ THỐNG

Kiến trúc hệ thống BackEnd

4.1.1 Mô tả kiến trúc hệ thống microservices

Hình 4.1 Mô tả kiến trúc hệ thống microservices

API Gateway: Ở đây API Gateway được sử dụng là Spring cloud gateway Gateway có trách nhiệm sau đây:

• Routing: chuyển hướng các request tới các services khác

• Prefilter: tiền xử lý các request đến, có thể loại bỏ, ngăn chặn hoặc thêm / bớt các trường trong header, giải mã token

• Authentication - Authorization: API Gateway được phối hợp với user- service chuyên quản lý người dùng, xác thực, phân quyền

Eureka Server giúp các dịch vụ có thể giao tiếp trực tiếp với nhau một cách dễ dàng hơn, tăng tính linh hoạt và khả năng mở rộng của hệ thống Nó điều hướng các yêu cầu từ API Gateway, đảm bảo luồng dữ liệu được xử lý mượt mà và hiệu quả Ngoài ra, Eureka Server chịu trách nhiệm đăng ký các dịch vụ mới và định tuyến các yêu cầu đến đúng dịch vụ mục tiêu, nâng cao hiệu suất và khả năng quản lý của hệ thống API.

Product service: Chịu trách nhiệm chính cho luồng xử lí liên quan tới sản phẩm, phiên bản, phân loại và thương hiệu

User service: Chịu trách nhiệm xác thực tài khoản, quản lí các tài khoản

Order service: Chịu trách nhiệm cho việc đặt hàng, cũng như cập nhật hàng trong kho

Import service: Chịu trách nhiệm cho việc nhập hàng, cũng như cập nhật hàng trong kho

Distributed tracing: Sử dụng Spring Cloud Sleuth với Zipkin, để theo dõi luồng đi của request trong hệ thống, để giải quyết các vấn đề nếu phát sinh

4.1.2 Mô tả kiến trúc hệ thống của các services

Hình 4.2 Kiến trúc hệ thống - BackEnd

Phần mềm được thiết kế theo kiến trúc N-tier:

DTO (Data Transfer Object) là các lớp đóng gói dữ liệu dùng để truyền thông tin giữa client và server, giúp tối ưu hóa quá trình trao đổi dữ liệu Mục đích chính của DTO là giảm thiểu lượng thông tin không cần thiết, từ đó nâng cao hiệu quả truyền tải Đồng thời, việc sử dụng DTO còn giúp tăng cường bảo mật dữ liệu, hạn chế lộ thông tin nhạy cảm trong quá trình trao đổi giữa các hệ thống.

The Presentation Layer is the topmost tier of an application responsible for handling HTTP requests, managing user authentication, and converting JSON data to Java objects and vice versa, ensuring seamless communication between users and the underlying system.

Lớp Business chịu trách nhiệm xử lý các nghiệp vụ chính của dự án, đảm bảo tính đúng đắn của dữ liệu và logic thông qua các lệnh kiểm tra phù hợp.

- Persistence Layer: Nó bao gồm tất cả các xử lý về thao tác với database như lưu trữ, cập nhật, truy vấn hoặc xoá dữ liệu

Lớp Cơ sở dữ liệu có thể gồm nhiều hệ thống quản lý dữ liệu khác nhau, cho phép các thao tác liên quan đến dữ liệu được thực hiện đồng bộ trên nhiều server cơ sở dữ liệu Điều này giúp tối ưu hóa khả năng mở rộng, đảm bảo tính sẵn sàng cao và tăng cường khả năng quản lý dữ liệu phức tạp trong hệ thống.

66 4.1.3 Mô tả thành phần trong hệ thống

Hình 4.3 Cấu trúc Folder - BackEnd

- Mỗi module sẽ bao gồm các thành phần

Bảng 4.1 Mô tả thành phần hệ thống BackEnd – 1

- Ngoài ra còn có một số thành phần chung như:

Bảng 4.2 Mô tả thành phần hệ thống BackEnd - 2

STT Thành Phần Diễn Giải

1 config Dùng để cấu hình các dependency và các chức năng để hệ thống hoạt động được

2 common Chứa những chức năng hay thường dùng

Mô tả kiến trúc FrontEnd

4.2.1 Phía hệ thống quản lý

Hình 4.4 Cấu trúc folder phía quản lý

Bảng 4.3 Mô tả thành phần hệ thống phía quản lý

Assets Chứa các phần static trên Front-End

Components Chứa các components có khả năng tái sử dụng

Pages Chứa các components là các màn hinh hiển thị

Models Nơi chứa global state

Services Nơi thực hiện gọi API

Wrappers Authentication của phần mềm

Hình 4.5 Cấu trúc folder phía website

Bảng 4.4 Mô tả thành phần hệ thống phía website

Assets Chứa các phần static trên Front-End

Components Chứa các components có khả năng tái sử dụng Views Chứa các components là các màn hinh hiển thị Store Nơi chứa global state

Services Nơi thực hiện gọi API

Plugins Config request của phẩn mềm

THIẾT KẾ CƠ SỞ DỮ LIỆU

Sơ đồ dữ liệu Product Service

5.1.1 Danh sách các bảng dữ liệu

Bảng 5.1 Dach sách các bảng dữ liệu Product Service

STT Tên Bảng dữ liệu Diễn giải

1 BRAND Thông tin thương hiệu

2 CATEGORY Thông tin loại sản phẩm

3 ATTRIBUTE Thông tin thuộc tính sản phẩm

4 TAG Thông tin các thẻ của thuộc tính

5 CATEGORY_ATTRIBUTE Thông tin các thuộc tính có trong loại sản phẩm

6 PRODUCT Thông tin sản phẩm

7 VARIANT Thông tin các biến thể của sản phẩm

8 VARIANT_ATTRIBUTE Thông tin các thuộc tính có trong biến thể sản phẩm

5.1.2 Mô tả từng bảng dữ liệu

STT Thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải

1 brand_id INT Id của bảng

2 brand_name VARCHAR Không được trùng tên Tên thương thiệu

3 brand_desc VARCHAR Mô tả thương hiệu

4 brand_link VARCHAR URL dẫn đến thương hiệu

5 img_url VARCHAR Hình ảnh của thương hiệu

6 active_flag VARCHAR Cờ trạng thái

1 category_id INT Id của bảng

2 category_name VARCHAR Không được trùng tên

3 category_desc VARCHAR Mô tả loại sản phẩm

4 category_link VARCHAR URL dẫn đến loại sản phẩm

5 img_url VARCHAR Hình ảnh của thương hiệu

7 parent_id INT Id của thể loại cha

1 attribute_id INT Id của bảng

2 attribute_name VARCHAR Không được trùng tên

3 attribute_icon VARCHAR Icon của thuộc tính

1 tag_id INT Id của bảng

2 tag_name VARCHAR Không được trùng tên

3 attribute_id INT Id của thuộc tính chứa nó

1 category_id INT Id của của thể loại

2 attribute_id INT Id của thuộc tính

1 product_id INT Id của bảng

2 product_name VARCHAR Tên sản phẩm

3 brand_id INT Id của thương hiệu

4 category_id INT Id của thể loại

5 product_desc VARCHAR Mô tả sản phẩm

6 product_link VARCHAR URL dẫn đến sản phẩm

1 variant_id INT Id của bảng

2 sku VARCHAR Không được trùng Mã sku của sản phẩm

3 price INT Lớn hơn hoặc bằng 0 Giá sản phẩm

4 variant_name INT Không được trùng Tên của biến thể

5 variant_desc VARCHAR Mô tả biến thể

6 img_url VARCHAR Hình ảnh biến thể

7 quantity INT Lớn hơn hoặc bằng 0

Số lượng sản phẩm còn trong kho

8 product_id INT Id của sản phẩm

1 Variant_id INT Id của biến thể

2 Attribute_id INT Id của thuộc tính

3 value INT Giá trị của thuộc tính trong biến thể

4 description VARCHAR Mô tả của thuộc tính trong biến thể

5 tag_id INT Id của tag

Sơ đồ dữ liệu Import Service

Bảng 5.10 Danh sách bảng dữ liệu Import Service

1 IMPORT Thông tin cơ bản của hóa đơn nhập hàng

2 IMPORT_DETAIL Thông tin chi tiết của sản phẩm nhập

1 import_id INT Id của bảng

2 import_desc INT Mô tả phiếu nhập

3 total_price INT Lớn hơn hoặc bằng 0

Tổng giá trị phiếu nhập

4 created_at VARCHAR Thời điểm tạo phiếu

5 user_id INT Người tạo phiếu nhập

1 import_id INT Id của phiếu nhập

2 variant_id INT Id của biến thể

4 unit_price INT Lớn hơn hoặc bằng 0 Đơn giá nhập

Sơ đồ dữ liệu Order Service

Bảng 5.13 Danh sách bảng dữ liệu Order Service

1 VOUCHER Thông tin các khuyến mãi

2 ORDERS Thông tin cơ bản của các đơn hàng

3 ORDERS_DETAIL Thông tin chi tiết của sản phẩm bán

1 voucher_id INT Id của bảng

2 voucher_name VARCHAR Không được trùng

3 voucher_desc VARCHAR Mô tả mã giảm giá

4 voucher_value INT Lớn hơn hoặc bằng 0

Giá trị mã giảm giá

5 valid_date DATE Ngày hiệu nghiệm

6 expiration_date DATE Phải sau valid_date

7 amount INT Lớn hơn hoặc bằng 0

Số lượng mã giảm giá

8 capped_at INT Lớn hơn hoặc bằng 0

1 order_id INT Id của bảng

2 user_id VARCHAR Không được trùng

3 voucher_id VARCHAR Mô tả mã giảm giá

4 order_status INT Lớn hơn hoặc bằng 0

Giá trị mã giảm giá

5 payment_status DATE Ngày hiệu nghiệm

6 total_price DATE Phải sau valid_date

7 amount INT Lớn hơn hoặc bằng 0

Số lượng mã giảm giá

8 capped_at INT Lớn hơn hoặc bằng 0

10 delivery_address VARCHAR Địa chỉ giao hàng

11 phone_number VARCHAR Số điện thoại người nhận

12 reciptient_name VARCHAR Tên người nhận

1 order_id INT Id của đơn hàng

2 variant_id INT Id của biến thể

4 unit_price INT Lớn hơn hoặc bằng 0 Đơn giá lúc đặt hàng

Sơ đồ dữ liệu User Service

Bảng 5.17 Danh sách bảng dữ liệu User Service

1 USER Thông tin các người dùng trong hệ thống

2 ROLE Thôn tin phân quyền của người dùng

3 VERIFICATION_TOKEN Thông tin mã xác thực

4 PASSWORD_RESET_TOKEN Thông tin mã xác thực cho phần đổi mật khẩu

1 user_id INT Id của bảng

2 role_id INT Id của loại quyền

3 username VARCHAR Không được trùng

4 email VARCHAR Không được trùng

6 image VARCHAR Ảnh đại diện

11 phone_no VARCHAR Số điện thoại

STT Thuộc tính Kiểu dữ liệu

1 role_id INT Id của bảng

2 role_name VARCHAR Không được trùng

3 role_desc VARCHAR Mô tả

1 id INT Id của bảng

2 token VARCHAR Không được trùng

3 expiry_date TIMESTAMP Thời gian token hết hạn

4 user_id INT Id người dùng

Bảng 5.21 Bảng PASSWORD_RESET_TOKEN

1 id INT Id của bảng

2 token VARCHAR Không được trùng

3 expiry_date TIMESTAMP Thời gian token hết hạn

4 user_id INT Id người dùng

THIẾT KẾ GIAO DIỆN

Phía hệ thống quản lý

6.1.1 Sơ đồ các màn hình

Hình 6.1 Sơ đồ các màn hình (quản lý)

6.1.2 Danh sách các màn hình

Bảng 6.1 Danh sách các màn hình

STT Màn hình Loại màn hình Chức năng

Màn hình tra cứu, chỉnh sửa

Hiển thị danh sách phân loại, tìm kiếm, sắp xếp, xóa phân loại

2 Thêm phân loại Màn hình nhập liệu

Hiển thị danh sách thương hiệu, tìm kiếm, sắp xếp, xóa thương hiệu

Hiển thị danh sách sản phẩm, tìm kiếm, sắp xếp, xóa, xem chi tiết sản phẩm

Hiển thị danh sách đơn hàng, tìm kiếm, sắp xếp, xóa

12 Xem chi tiết đơn hàng

Hiển thị thông tin chi tiết hóa đơn

13 Màn hình xuất hóa đơn

Xuất thông tin đơn hàng sang file PDF

Hiển thị danh sách nhập hàng, tìm kiếm, sắp xếp, xóa

16 Xem chi tiết đơn nhập

Hiển thị thông tin chi tiết đơn nhập

17 Màn hình xuất đơn nhập

Xuất thông tin dơn nhập qua file PDF

18 Quản lý tài khoản khách hàng

Hiển thị danh sách tài khoản nhân viên, tìm kiếm

19 Quản lý tài khoản nhân viên

Hiển thị danh sách tài khoản nhân viên, tìm kiếm

Tạo mới tài khoản cho nhân viên

Hiển thị danh sách khuyến mãi

24 Thống kê Màn hình hiển thị, tra cứu

Xuất hiện các thông tin khi chọn từ ngày này đến ngày kia

6.1.3.1 Màn hình quản lý phân loại

Hình 6.2 Màn hình quản lý phân loại Bảng 6.2 Bảng mô tả màn hình quản lý phân loại

STT Tên Kiểu Ý nghĩa Ghi chú

1 idSortBtn Button Sắp xếp tăng giảm phân loại

2 searchBtn Button Tìm kiếm theo tên phân loại

3 createBtn Button Chuyến tới trang tạo mới phân loại

4 editBtn Button Chuyển tới trang chỉnh sửa phân loại

5 delBtn Button Xóa phân loại

6.1.3.2 Màn hình thêm phân loại

Hình 6.3 Màn hình thêm phân loại Bảng 6.3 Bảng mô tả màn hình thêm phân loại

1 viewImage Image Hiển thị hình ảnh của phân loại

2 uploadBtn Button Upload hình ảnh phân loại

3 name Textfield Tên phân loại

4 description Textfield Mô tả phân loại

5 attributes List tag Hiển thị danh sách thuộc tính của phân loại

6 addBtn Button Thêm thuộc tính

7 cancelBtn Button Chuyển về trang quản lý phân loại

8 completeBtn Button Tạo mới phân loại

6.1.3.3 Màn hình chỉnh sửa phân loại

Hình 6.4 Màn hình chỉnh sửa phân loại Bảng 6.4 Bảng mô tả màn hình chỉnh sửa phân loại

1 viewImage Image Hiển thị hình ảnh của phân loại

2 resetBtn Button Reset hình ảnh của phiên bản

3 uploadBtn Button Upload hình ảnh mới của phân loại

4 name Textfield Tên phân loại

5 description Textfield Mô tả phân loại

6 cancelBtn Button Chuyển về trang quản lý phân loại

7 completeBtn Button Cập nhật phân loại

6.1.3.4 Màn hình quản lý thương hiệu

Hình 6.5 Màn hình quản lý thương hiệu Bảng 6.5 Bảng mô tả màn hình quản lý thương hiệu

1 sortBtn Button Sắp xếp thương hiệu tăng, giảm dần theo id

2 searchBtn Button Tìm kiếm thương hiệu

3 createBtn Button Mở popup tạo mới thương hiệu

4 editBtn Button Mở popup chỉnh sửa thương hiệu

5 delBtn Button Xóa thương hiệu

6.1.3.5 Màn hình tạo mới thương hiệu

Hình 6.6 Màn hình tạo mới thương hiệu Bảng 6.6 Bảng mô tả màn hình tạo mới thương hiệu

1 image Image Hiển thị hình ảnh thương hiệu

2 uploadBtn Button Upload hình ảnh thương hiệu

4 name Textfield Tên thương hiệu

5 description Textfield Mô tả thương hiệu

6 completeBtn Button Tạo thương hiệu

6.1.3.6 Màn hình chỉnh sửa thương hiệu

Hình 6.7 Màn hình chỉnh sửa thương hiệu

Bảng 6.7 Bảng mô tả màn hình chỉnh sửa thương hiệu

1 image Image Hiển thị hình ảnh thương hiệu

2 resetBtn Button Reset hình ảnh thương hiệu

3 uploadBtn Button Upload hình ảnh thương hiệu

4 cancelBtn Button Hủy thao tác, tắt popup

5 name Textfield Tên thương hiệu

6 description Textfield Mô tả thương hiệu

7 completeBtn Button Lưu thay đổi

6.1.3.7 Màn hình quản lý sản phẩm

Hình 6.8 Màn hình quản lý sản phẩm Bảng 6.8 Bảng mô tả màn hình quản lý sản phẩm

1 sortBtn Button Sắp xếp sản phẩm tăng, giảm theo Id

2 searchBtn Button Tìm kiếm sản phẩm

3 createBtn Button Chuyển tới trang tạo mới sản phẩm

4 viewBtn Button Xem chi tiết sản phẩm

5 editBtn Button Chuyển tới trang chỉnh sửa sản phẩm

6 delBtn Button Xóa sản phẩm

6.1.3.8 Màn hình tạo mới sản phẩm

Hình 6.9 Màn hình tạo mới sản phẩm Bảng 6.9 Bảng mô tả màn hình tạo mới sản phẩm

1 productName Textfield Tên sản phẩm

2 category Autocomplete Loại sản phẩm

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

5 productImage Dragger Hình ảnh sản phẩm

6 addVariantBtn Button Thêm phiên bản

7 delVariantBtn Button Xóa phiên bản

8 variantSKU Textfield Mã nhập hàng

9 VariantName Textfield Tên phiên bản

11 attributeValue Textfield Thông tin thuộc tính

12 attributeTag Select Tag của thuộc tính

13 variantUploadBtn Button Upload hình ảnh phiên bản

14 cancelBtn Button Hủy thao tác, trở về màn hình quản lý sản phẩm

15 completeBtn Button Tạp mới sản phẩm

6.1.3.9 Màn hình chỉnh sửa sản phẩm

Hình 6.10 Màn hình chỉnh sửa sản phẩm Bảng 6.10 Bảng mô tả màn hình chỉnh sửa sản phẩm

1 image Image Hiển thị hình ảnh sản phẩm

2 resetBtn Button Reset hình ảnh sản phẩm

3 uploadBtn Button Upload hình ảnh sản phẩm

4 name Textfield Tên sản phẩm

5 brand AutoComplete Thương hiệu sản phẩm

6 description Textfield Mô tả sản phẩm

8 completeBtn Button Lưu thao tác

6.1.3.10 Màn hình chỉnh sửa phiên bản

Hình 6.11 Màn hình chỉnh sửa phiên bản

Bảng 6.11 Bảng mô tả màn hình chỉnh sửa phiên bản

1 image Image Hiển thị hình ản phiên bản

2 resetBtn Button Reset hình ảnh phiên bản

3 uploadBtn Button Upload hình ảnh phiên bản

4 nameVariant Textfield Tên phiên bản

5 priceVariant Numberfield Giá bán phiên bản

6 quantityVariant Numberfield Số lượng tồn kho (chỉ xem)

7 attributeValue Textfield Giá trị của thuộc tính

8 attributeTag Select Tag của thuộc tính

9 cancelBtn Button Hủy thao tác, chuyển về màn hình quản lý sản phẩm

10 completeBtn Button Lưu thao tác

6.1.3.11 Màn hình quản lý đơn hàng

Hình 6.12 Màn hình quản lý đơn hàng

Bảng 6.12 Bảng mô tả màn hình quản lý đơn hàng

1 sortIdBtn Button Sắp xếp danh sách theo

2 searchBtn Button Tìm kiếm hóa đơn theo khách hàng

3 orderStatusSelect Select Thay đổi status đơn hàng

4 paymentStatusSelect Select Thay đổi status thanh toán

5 eyesBtn Button Xem chi tiết đơn hàng

6 delBtn Button Xóa đơn hàng

6.1.3.12 Màn hình xem chi tiết đơn hàng

Bảng 6.13 Bảng mô tả màn hình xem chi tiết đơn hàng

2 exportBtn Button Chuyển đến trang xuất hóa đơn 6.1.3.13 Màn hình xuất hóa đơn

Bảng 6.14 Bảng mô tả màn hình xuất hoá đơn

1 exportBtn Button Xuất file Exel

6.1.3.14 Màn hình quản lý nhập hàng

Hình 6.13 Màn hình quản lý nhập hàng

Bảng 6.15 Bảng mô tả màn hình quản lý nhập hàng

1 sortIdBtn Button Sắp xếp danh sách theo Id

2 searchBtn Button Tìm kiếm đơn nhập theo gmail

3 sortValueBtn Button Sắp xếp danh sách theo giá trị

4 createBtn Button Chuyển tới trang tạo mới đơn nhập

5 eyesBtn Button Xem chi tiết đơn nhập

6.1.3.15 Màn hình tạo mới đơn nhập

Hình 6.14 Màn hình tạo mới đơn nhập

Bảng 6.16 Bảng mô tả màn hình tạo mới đơn nhập

1 usernameField TextField Hiển thị tên người nhập Chỉ xem

2 dateField TextField Hiển thị thông tin ngày nhập

3 descField TextField Nhập mô tả nhập hàng

4 search AutoComplete Tìm kiếm sản phẩm

5 delBtn Button Xóa sản phẩm khỏi danh sách

6 importPriceField TextField Nhập giá nhập hàng

7 quantityField TextField Nhập số lượng hàng

Màn hình xem chi tiết đơn nhập

Hình 6.15 Màn hình xem chi tiết đơn nhập Bảng 6.17 Bảng mô tả màn hình xem chi tiết đơn nhập

2 exportBtn Button Chuyển tới trang in hóa đơn

6.1.3.16 Màn hình xuất đơn nhập

Bảng 6.18 Bảng mô tả màn hình xuất đơn nhập

1 exportBtn Button Xuất file PDF

Hình 6.16 Màn hình xuất đơn nhập Hình 6.16 Màn hình xuất đơn nhập 1 Hình 6.16 Màn hình xuất đơn nhập Hình 6.16 Màn hinh xuất đơn nhập

6.1.3.17 Màn hình quản lý tài khoản khách hàng

Hình 6.17 Màn hình quản lý tài khoản khách hàng Bảng 6.19 Bảng mô tả màn hình quản lý tài khoản

1 sortIdBtn Button Sắp xếp danh sách theo

2 switchStatus Switch Mở, khóa tài khoản khách hàng 6.1.3.18 Màn hình quản lý tài khoản nhân viên

Hình 6.18 Màn hình quản lý tài khoản nhân viên

Bảng 6.20 Bảng mô tả màn hình quản lý nhân viên

1 SortIdBtn Button Sắp xếp danh sách theo Id

2 createBtn Button Chuyển tới trang tạo mới nhân viên

3 delBtn Button Xóa tài khoản

6.1.3.19 Màn hình tạo mới tài khoản nhân viên

Hình 6.19 Màn hình tạo mới tài khoản nhân viên

Bảng 6.21 Bảng mô tả màn hình tạo mới tài khoản nhân viên

3 passField TextField Nhập mật khẩu

4 confFeild TextField Xác nhận mật khẩu

6.1.3.20 Màn hình quản lý khuyến mãi

Hình 6.20 Màn hình quản lý khuyến mãi

Bảng 6.22 Bảng mô tả màn hình quản lý khuyến mãi

1 sortIdBtn Button Sắp xếp danh sách theo Id

2 sortValBtn Button Sắp xếp danh sách theo giá trị

3 sortQuanBtn Button Sắp xếp danh sách theo số lượng

4 createBtn Button Chuyển tới trang tạo mới khuyến mãi

5 editBtn Button Chuyển tới trang chỉnh sửa khuyến mãi

6 delBtn Button Xóa khuyến mãi

Hình 6.21 Màn hình tạo mới khuyến mãi Bảng 6.23 Bảng mô tả màn hinh tạo mới khuyến mãi

1 codeField TextField Nhập tên khuyến mãi

2 duration DatePicker Chọn thời hạn khuyến mãi

3 valueField TextField Nhập số tiền giảm

4 quantityField TextField Nhập số lượng khuyến mãi

5 minOrderField TextField Nhập giá trị tối thiểu áp dụng

6 descField TextField Nhập mô tả

6.1.3.21 Màn hình chỉnh sửa khuyến mãi

Hình 6.22 Màn hình chỉnh sửa khuyến mãi Bảng 6.24 Bảng mô tả màn hình chỉnh sửa khuyến mãi

1 idField TextField Hiển thị mã khuyến mãi Chỉ xem

2 codeField TextField Nhập tên khuyến mãi

3 duration DatePicker Chọn thời hạn khuyến mãi

4 valueField TextField Nhập số tiền giảm

5 quantityField TextField Nhập số lượng khuyến mãi

6 minOrderField TextField Nhập giá trị tối thiểu áp dụng

7 descField TextField Nhập mô tả

Bảng 6.25 Bảng mô tả màn hình thống kê

1 datepicker datepicker Lựa chọn khoản thời gian xem thống kê

2 viewBtn Button Thực hiện load dữ liệu

3 exportBtn Button Xuất bảng ra file excel

Hình 6.16 Màn hình thống kê

Phía Website

Hình 6.17 Sơ đồ màn hình website

6.2.2 Danh sách các màn hình

Bảng 6.26 Danh sách các màn hình website

STT Màn hình Loại màn hình Chức năng

1 Trang chủ Hiển thị thông tin Hiển thị mặc định danh sách sản phẩm

2 Xem sản phẩm theo thương hiệu

Màn hình hiển thị, tra cứu

Hiển thị danh sách sản phẩm theo thương hiệu

3 Xem sản phẩm theo phân loại

Màn hình hiển thị, tra cứu

Hiển thị danh sách sản phẩm theo phân loại

4 Xem giỏ hàng Màn hình nhập liệu, chỉnh sửa

Sửa xóa sản phẩm, thêm xóa khuyến mãi

Nhập thông tin người nhận hàng

Hiển thị thông tin sản phẩm, phiên bản

Hiển thi danh sách đơn hàng đã đặt

8 Thay đổi thông tin cá nhân

Màn hình hiển thị, nhập liệu

Thay đổi thông tin cá nhân

10 Đăng nhập Màn hình nhập liệu Đăng nhập vào hệ thống

11 Đăng ký Màn hình nhập liệu Đăng ký tài khoản khách hàng

12 Quên mật khẩu Màn hình nhập liệu

Màn hình nhập liệu Đặt lại mật khẩu

15 Thông tin đơn hàng điện tử Đơn hàng điện tử

Bảng 6.27 Bảng mô tả chi tiết màn hình trang chủ

1 categoryBtn Button Mở đóng Category

2 categoryItem Button Chuyển tới trang xem sản phẩm ứng với phân loại đó

3 CartBtn Button Chuyển tới giỏ hàng

4 OrderBtn Button Chuyển tới xem danh sách các đơn đặt hàng

5 userProfile Button Mở modal profile

6 brandItem Button Chuyển tới trang xem sản phẩm của thương hiệu được chọn

7 prevSlide Button Cuộn danh sách sang trái

8 nextSlide Button Cuộn danh sách sang phải

Hình 6.18 Màn hình trang chủ

6.2.3.2 Xem sản phẩm theo thương hiệu

Bảng 6.28 Bảng mô tả chi tiết màn hình xem sản phẩm theo thương hiệu

1 brandItem Button Chuyển tới trang xem sản phẩm của thương hiệu được chọn

2 filterBtn Button Bật, Tắt chế độ filter

3 rangePrice RangeSlide Lựa chọn vùng giá sản phẩm

4 searchProduct TextField Tìm kiếm sản phẩm

5 rdSort Radio Sắp xếp sản phẩm

6 productCard Custom Chuyển tới trang xem chi tiết sản phẩm

Hình 6.19 Màn hình xem sản phẩm theo thương hiệu

6.2.3.3 Xem sản phẩm theo phân loại

Bảng 6.29 Bảng mô tả chi tiết màn hình xem sản phẩm theo thương hiệu

1 categoryBtn Button Mở tắt danh sách phân loại

2 categoryItem Button Chuyển tới trang xem sản phẩm của phân loại được chọn

3 filterBtn Button Bật, Tắt chế độ filter

4 rangePrice RangeSlide Lựa chọn vùng giá sản phẩm

5 openTag Button Tắt mở thuộc tính

6 Tag Chip Lựa chọn tag

7 searchProduct TextField Tìm kiếm sản phẩm

8 rdSort Radio Sắp xếp sản phẩm

Hình 6.20 Màn hình xem sản phẩm theo thương hiệu

9 productCard Custom Chuyển tới trang xem chi tiết sản phẩm 6.2.3.4 Xem giỏ hàng

Bảng 6.30 Bảng mô tả chi tiết màn hình giỏ hàng

1 minusBtn Button Giảm số lượng sản phẩm

2 plusBtn Button Tăng số lượng sản phảm

3 delBtn Button Xóa sản phẩm khỏi giỏ hàng

4 voucher TextField Nhập mã voucher

5 chkBtrn Button Chuyển tới trang đặt hàng

Hình 6.21 Màn hình giỏ hàng

Bảng 6.31 Bảng mô tả chi tiết màn hình thông tin đặt hàng

1 Name TextField Điền tên người nhận

2 phoneNo TextField Điền số điện thoại người nhận

3 address Select Nhập địa chỉ người nhận

4 checkoutBtn Button Hòan tất đặt hàng

Hình 6.22 Màn hình thông tin đặt hàng

Bảng 6.32 Bảng mô tả chi tiết màn hình chi tiết sản phẩm

1 nextBtn Button Chuyển tới xem hình ảnh tiếp theo

2 radioVariant Radio Chọn phiên bản

3 minusBtn Button Giảm số lượng

4 plusBtn Button Tăng số lượng

5 addCartBtn Button Thêm sản phẩm vào giỏ

Hình 6.23 Màn hình chi tiết sản phẩm

Hình 6.24 Màn hình lịch sử mua hàng

Tại đây thông tin tất cả đơn hàng sẽ được hiển thị, người đùng có thể chọn đơn hàng để xem chi tiết

6.2.3.8 Thay đổi thông tin cá nhân

Hình 6.25 Màn hình thay đổi thông tin cá nhân

Bảng 6.33 Bảng mô tả chi tiết màn hình thông tin cá nhân

1 name TextField Điền tên người dùng

2 phoneNo TextField Điền số điện thoại người dùng

3 email TextField Địa chỉ Email Chỉ xem

4 birthday TextField Ngày sinh người dùng

9 saveBtn Button Lưu thay đổi

Bảng 6.34 Bảng mô tả chi tiết màn hình thay đổi mật khẩu

1 oldPass TextField Mật khẩu cũ

2 newPass TextField Mật khẩu mới

3 saveBtn Button Lưu thay đổi

Hình 6.26 Màn hình thay đổi mật khẩu

Hình 6.27 Màn hình đăng nhập Bảng 6.35 Bảng mô tả chi tiết màn hình đăng nhập

1 email TextField Email người dùng

2 password TextField Mật khẩu mới

3 login Button Thực hiện đăng nhập

4 register Label Chuyển qua tab đăng ký

5 forgotPassword Label Chuyển qua tab quên mật khẩu

Hình 6.28 Màn hình đăng ký Bảng 6.36 Bảng mô tả chi tiết màn hình đăng ký

3 confirmPassword TextField Nhập lại mật khẩu

4 register Button Thực hiện đăng ký

5 login Label Chuyển qua tab đăng nhập

Hình 6.29 Màn hình quên mật khẩu Bảng 6.37 Bảng mô tả chi tiết màn hình quên mật khẩu

2 sendMail Button Thực hiện gửi mail

3 login Label Chuyển tới tab đăng nhập

Hình 6.30 Màn hình đặt lại mật khẩu Bảng 6.38 Bảng mô tả chi tiết màn hình đặt lại mật khẩu

2 confirmPassword TextField Nhập lại mật khẩu Phải giống mật khẩu (1)

3 saveBtn Button Thực hiện thay đổi mật khẩu

6.2.3.14 Thanh toán online bằng thẻ

Hình 6.31 Màn hình thanh toán online bằng thẻ

Tại đây người dùng sẽ điền thông tin thẻ của mình để tiến hành thanh toán

6.2.3.15 Thông tin đơn hàng điện tử

Hình 6.32 Thông tin đơn hàng qua mail

Sau khi đặt hàng thông tin đơn hàng sẽ được gửi qua mail của người mua.

Tiêu đề	Xây Dựng Website Bán Đồ Công Nghệ Với Microservices
Tác giả	Phạm Tấn Khang, Bùi Minh Huy
Người hướng dẫn	ThS. Trần Thị Hồng Yến
Trường học	Trường Đại Học Công Nghệ Thông Tin - Đại Học Quốc Gia TP.HCM
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Báo Cáo Đồ Án
Năm xuất bản	2022
Thành phố	TP HCM

Định dạng
Số trang	129
Dung lượng	3,75 MB