đồ án 2 shop quần áo online tích hợp gợi ý sản phẩm

Nắm bắt được nhu cầu đó, nhóm chúng em quyết định xử lí vấn đề nghiệp vụ của các doanh nghiệp thời trang may mặc với công nghệ Web, tích hợp hệ thống gợi ý sản phẩm nhằm hỗ trợ khách hàn

KIẾN THỨC NỀN TẢNG

Typescript

TypeScript là một dự án mã nguồn mở được phát triển bởi Microsoft, nó có thể được coi là một phiên bản nâng cao của Javascript bởi việc bổ sung tùy chọn kiểu tĩnh và lớp hướng đối tượng mà điều này không có ở Javascript TypeScript có thể sử dụng để phát triển các ứng dụng chạy ở client-side (Angular2) và server-side (NodeJS)

Tại sao nên sử dụng TypeScript?

- Dễ phát triển dự án lớn: Với việc sử dụng các kỹ thuật mới nhất và lập trình hướng đối tượng nên TypeScript giúp chúng ta phát triển các dự án lớn một cách dễ dàng

- Nhiều Framework lựa chọn: Hiện nay các Javascript Framework đã dần khuyến khích nên sử dụng TypeScript để phát triển, ví dụ như AngularJS 2.0 và Ionic 2.0

- Hỗ trợ các tính năng của Javascript phiên bản mới nhất: TypeScript luôn đảm bảo việc sử dụng đầy đủ các kỹ thuật mới nhất của Javascript, ví dụ như version hiện tại là ECMAScript 2015 (ES6)

- Là mã nguồn mở: TypeScript là một mã nguồn mở nên bạn hoàn toàn có thể sử dụng mà không mất phí, bên cạnh đó còn được cộng đồng hỗ trợ

- TypeScript là Javscript: Bản chất của TypeScript là biên dịch tạo ra các đoạn mã javascript nên ban có thê chạy bất kì ở đâu miễn ở đó có hỗ trợ biên dịch Javascript Ngoài ra bạn có thể sử dụng trộn lẫn cú pháp của Javascript vào bên trong TypeScript, điều này giúp các lập trình viên tiếp cận TypeScript dễ dàng hơn.

Node.js

Nodejs được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa Kỳ Đây là một nền tảng (platform) phát triển độc lập dựa trên V8 JavaScript engine Đây là một trình thông dịch thực thi mã JavaScript cho phép tạo

14 các ứng dụng web như video clip và diễn đàn, đặc biệt có thể mở rộng nhanh chóng và dễ dàng cũng như thu hẹp phạm vi hoạt động của các trang mạng mạng xã hội Đây được xem là một lợi thế khi NodeJS có thể hoạt động trên nhiều nền tảng hệ điều hành khác nhau, từ Windows, Linux đến OS X NodeJS cung cấp một thư viện phong phú dưới dạng các mô-đun Javascript khác nhau giúp đơn giản hóa việc lập trình và giảm thiểu thời gian cần thiết Ý tưởng chính của Node js là sử dụng non – blocking, nhanh chóng định tuyến đầu vào/ đầu ra dữ liệu thông qua các tác vụ thời gian thực Bởi vì Node js có khả năng mở rộng nhanh chóng và có thể xử lý một số lượng lớn các kết nối đồng thời với thông lượng cao

Hầu hết các ứng dụng web truyền thống sử dụng tài nguyên hệ thống không hiệu quả khi các yêu cầu tạo ra các luồng xử lý yêu cầu mới và tiêu tốn khá nhiều bộ nhớ hệ thống Vì vậy giải pháp mà NodeJS đưa ra chính là sử dụng luồng đơn có tên tiếng anh là Single – Threaded, đây là sự kết hợp non – blocking I/ O để thực hiện các yêu cầu, điều này cho phép nó hỗ trợ hàng chục hàng nghìn kết nối đồng thời Ưu và nhược điểm của NodeJS

- IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời

- Sử dụng JavaScript – một ngôn ngữ lập trình dễ học

- Chia sẻ cùng code ở cả phía client và server

- NPM (Node Package Manager) và module Node đang ngày càng phát triển mạnh mẽ

- Cộng đồng hỗ trợ tích cực

- Cho phép stream các file có kích thước lớn

- Không có khả năng mở rộng, vì vậy không thể tận dụng lợi thế mô hình đa lõi trong các phần cứng cấp server hiện nay

- Khó thao tác với cơ sở dữ liệu quan hệ

- Mỗi callback sẽ đi kèm với rất nhiều callback lồng nhau khác

- Cần có kiến thức tốt về JavaScript

- Không phù hợp với các tác vụ đòi hỏi nhiều CPU.

ReactJS

React (ReactJs hay React.js) là 1 thư viện JavaScript mã nguồn mở được phát triển bởi đội ngũ kỹ sư đến từ Facebook; nó được giới thiệu vào năm 2011, cho đến nay là đã được hơn 10 năm Nguyên lý xây dựng của React dựa trên components (component-based approach), có thể tái sử dụng và phù hợp với ứng dụng 1 trang (Single Page Application – SPA) React giúp lập trình viên xây dựng giao diện người dùng dựa trên JSX (môt cú pháp mở rộng của JavaScript), tạo ra các DOM ảo (virtual DOM) để tối ưu việc render 1 trang web

ReactJs sau khi ra đời đã cho thấy sự phù hợp của nó trong việc phát triển các ứng dụng Web với nhiều chức năng được tích hợp Nó đã tạo thành 1 xu thế, 1 hình mẫu phát triển website với nhiều chức năng, khả năng tương tác đa dạng với người dùng Hiện tại sau hơn 10 năm phát triển thì React vẫn đang chiếm vị trí số 1 trong các thư viện Front-end hiện tại

.NET là một nền tảng nguồn mở để xây dựng các ứng dụng trên máy tính để bàn, web và thiết bị di động có thể chạy nguyên bản trên bất kỳ hệ điều hành nào Hệ thống NET bao gồm các công cụ, thư viện và ngôn ngữ hỗ trợ phát triển phần mềm hiện đại, có quy mô linh hoạt và hiệu năng cao Một cộng đồng nhà phát triển hoạt động tích cực trong việc duy trì và hỗ trợ nền tảng NET

Nói một cách dễ hiểu, nền tảng NET là phần mềm có thể thực hiện những tác vụ sau:

- Dịch mã ngôn ngữ lập trình NET thành hướng dẫn mà thiết bị máy tính có thể xử lý

- Cung cấp các tiện ích để phát triển phần mềm hiệu quả Ví dụ: nó có thể tìm thời gian hiện tại hoặc in văn bản trên màn hình

- Xác định một tập gồm các loại dữ liệu để lưu trữ thông tin như văn bản, số và ngày tháng trên máy tính Ưu điểm của NET:

- Dễ phát triển: Các nhà phát triển thích sử dụng NET vì nền tảng này chứa nhiều công cụ giúp họ làm việc dễ dàng hơn Ví dụ: nhờ sử dụng bộ Visual Studio, các nhà phát triển có thể viết mã nhanh hơn, cộng tác hiệu quả, đồng thời kiểm thử và sửa mã của họ một cách hiệu quả Khả năng tái sử dụng mã giữa các kiểu triển khai giúp giảm chi phí phát triển

- Ứng dụng hiệu năng cao: Các ứng dụng NET cung cấp thời gian phản hồi nhanh hơn và đòi hỏi công suất điện toán thấp hơn Những ứng dụng này sở hữu các biện pháp bảo mật tích hợp mạnh mẽ và thực hiện hiệu quả các tác vụ phía máy chủ như truy cập cơ sở dữ liệu

- Hỗ trợ cộng đồng: NET là nền tảng nguồn mở, tức là bất kỳ ai cũng có thể truy cập để tự do sử dụng, đọc và sửa đổi NET Một cộng đồng gồm các nhà phát triển hoạt động tích cực trong việc duy trì và cải thiện phần mềm NET .NET Foundation là tổ chức phi lợi nhuận độc lập, được thành lập để hỗ trợ cộng đồng NET Tổ chức này cung cấp các tài nguyên học tập, dự án NET nguồn mở và nhiều sự kiện khác nhau dành cho các nhà phát triển NET.

SQL

Ngôn ngữ truy vấn có cấu trúc (SQL) là một ngôn ngữ lập trình phục vụ việc lưu trữ và xử lý thông tin trong cơ sở dữ liệu quan hệ Cơ sở dữ liệu quan hệ lưu trữ thông tin dưới dạng bảng có các hàng và cột đại diện cho những thuộc tính dữ liệu và nhiều mối quan hệ khác nhau giữa các giá trị dữ liệu Bạn có thể sử dụng các câu lệnh SQL

17 để lưu trữ, cập nhật, loại bỏ, tìm kiếm và truy xuất thông tin từ cơ sở dữ liệu Bạn cũng có thể sử dụng SQL để duy trì và tối ưu hóa hiệu suất cơ sở dữ liệu

Ngôn ngữ truy vấn có cấu trúc (SQL) là một ngôn ngữ truy vấn phổ biến thường được sử dụng trong tất cả các loại ứng dụng Các nhà phân tích và phát triển dữ liệu tìm hiểu và sử dụng SQL do ngôn ngữ này tích hợp hiệu quả với nhiều ngôn ngữ lập trình khác nhau Ví dụ: họ có thể nhúng truy vấn SQL với ngôn ngữ lập trình Java để xây dựng ứng dụng xử lý dữ liệu hiệu năng cao có các hệ thống cơ sở dữ liệu SQL chính như Oracle hoặc MS SQL Server SQL cũng khá dễ tìm hiểu do nó sử dụng những từ khóa tiếng Anh phổ biến trong các câu lệnh.

Entity Framework Core

Entity framework được phát triển từ năm 2008 bởi Microsoft Hiểu một cách đơn giản, entity framework là một thư viện ORM (Object Relational Mapping) hay một framework làm việc cùng cơ sở dữ liệu do microsoft khuyến nghị giúp phản xạ quan hệ đối tượng qua lại giữa các object của một chương trình, bảng cơ sở dữ liệu, bản ghi, Bằng cách cung cấp cơ chế tự động hoá các hoạt động liên quan đến CSDL cho các doanh nghiệp mà việc lưu trữ, truy cập dữ liệu và xây dựng ứng dụng đơn giản và dễ dàng Đặc điểm cơ bản của Entity Framework

- Để có thể hiểu rõ hơn về Entity framework và ứng dụng được Entity framework linh hoạt trong công việc thì việc tìm hiểu thêm về các đặc điểm cơ bản của nó là không thể nào thiếu được

- Dưới đây là ba đặc điểm cơ bản và quan trọng mà một lập trình viên nên biết đến và hiểu rõ khi sử dụng Entity framework

- Bằng một lớp con của DBContent mà tất cả các cơ sở dữ liệu đều được hiển thị Bạn hoàn toàn có thể tự động thực hiện hay can thiệp vào những thao tác như thể hiện object mà bạn xây dựng trên mỗi hàng hay thể hiện thuộc tính của object ở mỗi cột

- Với Entity framework, bạn có thể truy vấn dữ liệu sử dụng LINQ mà không cần đến SQL Điều này giúp dễ dàng hơn khi thực hiện các truy vấn CRUD từ code C# với các class

- Khả năng thực hiện các thao tác với cấu trúc dữ liệu nhanh chóng và đơn giản như tạo bảng, thay đổi cấu trúc bảng, tạo cơ sở dữ liệu mà không bị mất dữ liệu nhờ công cụ Migration.

ML NET

ML.NET là thư viện máy học Mã nguồn mở và chạy cross-platform (Windows, Linux, macOS) của Microsoft Ta có thể lập trình được thư viện này trên các nền tảng như Desktop, Web, hay build các Service Nó được đánh giá là mạnh mẽ có thể làm được những gì một số thư viện khác làm được (chẳng hạn như scikit-learn viết bằng Python) và làm được những thứ mà thư viện khác không làm được Với việc sở hữu các nền tảng công nghệ mạnh mẽ nhất, khách hàng sẵn có trải rộng khắp thế giới nên ML.NET được kỳ vọng rất lớn sẽ tạo ra được cơn sốt về công nghệ liên quan tới máy học viết bằng C#/F# và tạo ra thị trường lao động ở phân khúc này là rất khả thi

Theo thông tin từ hãng thì ML.NET bắt đầu khởi động từ 05/2018 và hiện nay bản chạy ổn định là 1.7.0 (tính tới 02/2022), và Microsoft cùng cộng đồng đang tiếp tục bổ sung tính năng cũng như cải tiến hiệu suất của các giải thuật

Linh hồn của ML.NET là một mô hình học máy (machine learning model) Mô hình này chỉ định các bước cần thiết để chuyển đổi dữ liệu đầu vào của ta thành các kết quả dự đoán của mô hình, nó tùy vào giải thuật mà chúng ta lựa chọn Với ML.NET,

Ta có thể tùy chỉnh mô hình bằng cách lựa chọn các thuật toán machine learning của ML.NET (dĩ nhiên nó phải lệ thuộc vào bài toán ta muốn làm là gì để chọn giải thuật cho phù hợp) hoặc ta cũng có thể import các mô hình của TensorFlow hay ONNX đã được đào tạo trước để sử dụng Ngoài ra ML.NET cũng cung cấp hàm cho ta lưu mô hình để tái sử dụng cũng như chia sẻ model cho cộng đồng.

PostgreSQL

PostgreSQL là một hệ quản trị cơ sở dữ liệu quan hệ – đối tượng, được phát triển bởi Khoa Điện toán, Đại học California – Hoa Kỳ dựa trên Postgres bản 4.2 Chương trình này đã mở đường cho nhiều khái niệm về hệ quản trị dữ liệu thương mại sau này Ban đầu, hệ quản trị được thiết kế để chạy trên các nền tảng tương tự như Unix Sau này, PostgreSQL được điều chỉnh trở nên linh động và chạy trên nhiều nền tảng khác nhau như Windows, Mac OS X, Solaris với nhiều tính năng và đặc điểm nổi bật PostgreSQL là mã nguồn mở miễn phí, được xây dựng theo chuẩn SQL99 Người dùng có thể tự do sử dụng, chỉnh sửa và phân bổ PostgreSQL theo nhiều hình thức khác nhau

So với nhiều hệ quản trị cơ sở dữ liệu khác, PostgreSQL không quá yêu cầu về công tác bảo trì bởi tính ổn định cao, có thể phát triển nhiều ứng dụng khác nhau với chi phí tương đối thấp

MACHINE LEARNING: ML NET

Khái niệm ML NET

ML NET, được phát triển bởi Microsoft, là một thư viện mã nguồn mở và đa nền tảng về máy học Nó cung cấp công cụ và khung làm việc để thực hiện các nhiệm vụ liên quan đến máy học trên các hệ điều hành như Windows, Linux và macOS ML NET không chỉ có khả năng thực hiện các nhiệm vụ tương tự như scikit-learn trong Python, mà còn mang lại những tính năng đặc biệt mà các thư viện khác không có Thư viện này hỗ trợ đa dạng các bài toán máy học, bao gồm:

- Phân loại (Classification): Phân loại các dữ liệu vào các nhóm hoặc lớp khác nhau, ví dụ như phân loại cảm xúc tích cực hoặc tiêu cực từ phản hồi của khách hàng

- Gom cụm (Clustering): Phân chia dữ liệu thành các nhóm dựa trên đặc trưng tương tự, chẳng hạn như gom cụm khách hàng theo hành vi mua sắm

- Hồi quy (Regression)/Dự đoán giá trị liên tục (Predict continuous values): Dự đoán giá trị liên tục dựa trên dữ liệu có sẵn, như dự đoán giá nhà hoặc giá taxi từ lịch sử giao dịch

- Phát hiện bất thường (Anomaly Detection): Phát hiện các điểm dữ liệu bất thường hoặc không tuân theo quy tắc thông thường, như phát hiện giao dịch gian lận trong ngành ngân hàng

- Khuyến nghị (Recommendations): Tạo ra các gợi ý sản phẩm hoặc nội dung phù hợp cho người dùng dựa trên thông tin sẵn có, ví dụ như gợi ý sản phẩm dựa trên sở thích của khách hàng khi mua sắm trực tuyến

- Dữ liệu chuỗi thời gian (Time series/sequential data): Dự báo và phân tích dữ liệu theo chuỗi thời gian, chẳng hạn như dự báo thời tiết hoặc doanh số bán sản phẩm theo thời gian

- Phân loại hình ảnh (Image classification): Phân loại hình ảnh vào các lớp khác nhau dựa trên nội dung

- Phát hiện đối tượng (Object detection): Phát hiện và xác định vị trí của đối tượng trong hình ảnh.

Quy trình hoạt động

Hình 3.1: Mô hình hoạt động ML.Net (Nguồn: learn.microsoft.com)

Mô tả chi tiết các bước:

- Bước 1: ML.NET cung cấp thư viện để nạp và tự động mô hình hóa dữ liệu thành mô hình hướng đối tượng Tại bước này, chúng ta thực hiện việc load dữ liệu và chia thành tập huấn luyện (dùng cho bước 3) và tập kiểm tra (dùng cho bước 4)

Dữ liệu được lưu vào IDataView.

Hệ thống gợi ý sản phẩm

- Bước 2: Định rõ quy trình hoạt động để trích xuất đặc trưng và áp dụng thuật toán học máy tương ứng Dựa vào mục đích bài toán máy học, ta sử dụng các giải thuật như Binary classification, Multiclass classification, Regression Đối tượng tạo ra ở bước này là IEstimator

- Bước 3: Sử dụng phương thức Fit() của IEstimator để huấn luyện mô hình Kết quả của phương thức Fit() là một mô hình có kiểu ITransformer, được huấn luyện trên tập huấn luyện từ bước 1

- Bước 4: Đánh giá chất lượng của mô hình sau khi huấn luyện Thông thường, kết quả dự đoán của mô hình cần được kiểm tra và cải tiến Việc này thường được thực hiện bằng cách so sánh kết quả dự đoán với thực tế

- Bước 5: Lưu mô hình đã đánh giá để sử dụng lại mà không cần chuẩn bị lại dữ liệu và huấn luyện File mô hình được lưu mặc định với đuôi zip

- Bước 6: Load mô hình đã được lưu ở bước 5 Sau khi tải, mô hình sẽ được chuyển đổi thành đối tượng ITransformer thông qua hàm Load()

- Bước 7: Sử dụng hàm CreatePredictionEngine().Predict() để dự đoán kết quả của chương trình bằng mô hình đã huấn luyện.Gợi ý sản phẩm

3.3 Hệ thống gợi ý sản phẩm

Matrix Factorization là một phương pháp tiếp cận khác của Collaborative Filtering trong lĩnh vực gợi ý, dựa trên "kỹ thuật phân rã ma trận" Ý tưởng chính của phương pháp này là phân rã một ma trận lớn X thành hai ma trận nhỏ hơn là W và H, sao cho có thể tái tạo lại X từ hai ma trận nhỏ này với độ chính xác cao, tức là X ≈ WHT

Hình 3.2: Hình minh hoạ thuật toán Matrix Factorization (Nguồn: developers.google.com) Trong bước này, items và users được đặt vào cùng một không gian thuộc tính ẩn, với ma trận W ∈ R|U|∗K mô tả user và ma trận H ∈ R∣I∣∗K mô tả item Áp dụng vào bài toán gợi ý, mục tiêu là tìm vector w tương ứng với mỗi user, sao cho ratings đã biết của user đó cho item (y) có thể xấp xỉ với: y ≈ xw

Với utility matrix Y (đã được điền hết giá trị), chúng ta cố gắng xấp xỉ Y bằng tích của hai ma trận con X và W Kích thước của cả hai ma trận này đều được giả định nhỏ hơn rất nhiều so với số users và items (M và N), và cả hai đều có bậc không vượt quá K Ưu điểm của Matrix Factorization bao gồm giảm thời gian tính toán trong quá trình đào tạo, giảm kích thước của bộ dữ liệu, và khả năng giúp người dùng khám phá những sở thích mới Tuy nhiên, phương pháp này cũng đối mặt với nhược điểm như không thể xử lý các mặt hàng mới và có thể dẫn đến đầu ra đề xuất bị sai lệch dựa trên mức độ phổ biến của các sản phẩm

Model được xây dựng với ý tưởng là những người dung có độ tuổi giống nhau sẽ có xu hướng mua những món đồ giống nhau Model gồm có ba thuộc tính chính là số tuổi của người dung, id của sản phẩm và id của người dung tương ứng với Age, UserId, ProductId

Trong học máy, các cột được sử dụng để đưa ra dự đoán được gọi là Feature và cột có giá trị dự đoán được trả về được gọi là Label

Vì mục đích là dự đoán người dung có mua sản phẩm đó hay không, vậy cột purchase là Label đại diện cho hành động của người dung có mua sản phẩm Ba cột UserId, ProductId, Age đều là các Feature được sử dụng để dự đoán Label

Do mô hình sử dụng bộ dữ liệu tự chuẩn bị nên các thông số chưa được chính xác cũng như phản ánh đúng hiệu suất của hệ thống gợi ý Các chỉ số thu được khi chạy mô hình là:

- RootMeanSquaredError (RMS hoặc RMSE): có giá trị trong khoảng 1 đến 2 Đây là giá trị được sử dụng để đo lường sự khác biệt giữa các giá trị dự đoán của mô hình và các giá trị quan sát được của tập dữ liệu thử nghiệm Về mặt kỹ thuật, nó là căn bậc hai của trung bình cộng bình phương của các sai số Nó càng thấp thì mô hình càng tốt

- RSquared: có giá trị khoảng 0.3, số liệu này cho biết mức độ phù hợp của dữ liệu với một mô hình Phạm vi từ 0 đến 1 Giá trị 0 có nghĩa là dữ liệu là ngẫu nhiên hoặc không thể phù hợp với mô hình Giá trị 1 có nghĩa là mô hình khớp chính xác với dữ liệu

Hình 3.3: Hình ảnh hiển thị kết quả của hệ thống gợi ý theo độ tuổi

Dự báo doanh thu

3.4.1 Thuật toán Singular Spectrum Analysis (SSA)

Singular Spectrum Analysis (SSA) là một phương pháp phân tích chuỗi thời gian thông qua việc phân tách chuỗi thành các thành phần chính Các thành phần này đại diện cho các khía cạnh quan trọng của tín hiệu như xu hướng, nhiễu, tính thời vụ, và các yếu tố khác Sau đó, chúng được tái tạo để dự báo giá trị trong tương lai, làm cho SSA trở thành một công cụ quan trọng trong phân tích chuỗi thời gian, đặc biệt là trong lĩnh vực khí hậu, khí tượng và địa vật lý Ưu điểm:

- Độ chính xác cao: SSA cung cấp độ chính xác cao trong việc dự đoán dựa trên dữ liệu quá khứ Điều này làm cho thuật toán trở thành một công cụ mạnh mẽ để dự báo doanh thu cửa hàng và các biến thời gian khác

- Dự đoán trung hạn và ngắn hạn: Thuật toán có xu hướng tốt trong việc dự đoán trong thời gian ngắn, tuy nhiên, độ chính xác giảm khi thời gian dự đoán tăng lên

26 Điều này có nghĩa là SSA có hạn chế khi áp dụng cho dự đoán trung hạn hoặc dự đoán xa trong tương lai

- Không dự đoán được ảnh hưởng của các yếu tố bên ngoài: Do dự đoán của SSA dựa chủ yếu vào tính toán từ dữ liệu quá khứ, nó không thể hiệu quả trong việc dự đoán ảnh hưởng của các yếu tố bên ngoài Các sự kiện hay biến động không dự kiến từ môi trường hay ngữ cảnh không thể được dự đoán đúng mức

Mô hình được xây dựng với ý tưởng hệ thống dự báo sẽ tự động lấy dữ liệu mới và cả dự liệu cũ ở đầu tháng mới để dự báo số lượng sản phẩm bán ra cho từng ngày ở đầu tháng Các lớp dữ liệu sẽ được mô hình như sau:

- ModelInput chứa các cột sau:

● TotalSold: Tổng số lượng sản phẩm bán được ngày hôm đó

- Lớp ModelOutput chứa các cột sau:

● ForecastedSales: Các giá trị dự đoán cho khoảng thời gian dự báo

● LowerBoundSales: Các giá trị tối thiểu được dự đoán cho giai đoạn dự báo

● UpperBoundSales: Các giá trị tối đa được dự đoán cho khoảng thời gian dự báo

3.4.3 Đánh giá mô hình Để đánh giá được mô hình, hệ thống sẽ sử dụng bộ dữ liệu có tính chất tương tự để đánh giá mô hình Kết quả thu được là:

Mean Absolute Error: giá trị thuộc từ khoảng 500 đến 700

Root Mean Squared Error: giá trị thuộc khoảng 700 đến 800

27 Hình 3.4: Hình Màn hình hiển thị kết quả dự báo cho từng sản phẩm

THIẾT KẾ HỆ THỐNG

Kiến trúc hệ thống: Microservices Architecture

Nền tảng cả kiến trúc microservices là xây dựng một ứng dụng mà ứng dụng này là tổng hợp của nhiều services nhỏ và độc lập có thể chạy riêng biệt, phát triển và triển khai độc lập

Ta có thể giải quyết các vấn đề của ứng dụng một khối bằng kiến trúc microservices (nhiều dịch vụ nhỏ) Ý tưởng là chia nhỏ ứng dụng lớn ra thành các dịch vụ nhỏ kết nối với nhau

Mỗi dịch vụ nhỏ thực hiện một tập các chức năng chuyên biệt như quản lý đơn hàng, quản lý khách hàng Mỗi dịch vụ là một ứng dụng nhỏ có kiến trúc đa diện lõi là business logic kết nối ra các adapter khác nhau Một số dịch vụ nhỏ lộ ra giao tiếp lập trình API cho dịch vụ nhỏ khác hay ứng dụng client gọi tới Khi vận hành, mỗi dịch vụ nhỏ được chạy trong một máy ảo hoặc Docker container Ưu điểm:

• Cho phép dễ dàng continuous delivery và deployment các ứng dựng lớn, phức tạp:

- Cải thiện khả năng bảo trì - mỗi service tương đối nhỏ do đó dễ hiểu và thay đổi hơn

- Khả năng testing dễ dàng hơn - các services nhỏ hơn và nhanh hơn để test

- Khả năng triển khai tốt hơn – các services có thể được triển khai độc lập

- Cho phép các services được phát triển bởi những team khác nhau Mỗi team có thể phát triển, thử nghiệm, triển khai và mở rộng quy mô dịch vụ của mình một cách độc lập với tất cả các team khác

• Giảm thiểu rủi ro: Nếu có lỗi trong một service thì chỉ có service đó bị ảnh hưởng Các services khác sẽ tiếp tục xử lý các yêu cầu Trong khi đó, một thành phần hoạt động sai của kiến trúc một khối có thể làm ảnh hưởng toàn bộ hệ thống

• Dễ dàng thay đổi sử dụng các công nghệ mới: Khi triển khai các services bạn có thể lựa chọn nhiều công nghệ mới Tương tự khi có thay đổi lớn đối với các services hiện có bạn có thể dễ dàng thay đổi công nghệ

• Các nhà phát triển phải đối phó với sự phức tạp của việc tạo ra một hệ thống phân tán:

- Cần implement việc communication giữa các inter-services

- Handle partial failure là rất phức tạp vì một luồng xử lý cần đi qua nhiều services

- Việc thực hiện các requests trải rộng trên nhiều services khó khăn hơn, điều này cũng đòi hỏi sự phối hợp cẩn thận giữa các teams

- Khó khăn trong việc đảm bảo toàn vẹn CSDL nếu triển khai theo kiến trúc cơ sở dữ liệu phân vùng

• Triển khai và quản lý microservices nếu làm thủ công theo cách đã làm với ứng dụng một khối phức tạp hơn rất nhiều

• Phải xử lý sự cố khi kết nối chậm, lỗi khi thông điệp không gửi được hoặc thông điệp gửi đến nhiều đích đến vào các thời điểm khác nhau

Chi tiết các thành phần trong hệ thống

STT Thành phần Chi tiết

Cung cấp một giao diện cho người dùng thực hiện các thao tác nhập/xuất dữ liệu Đồng thời, trong lúc sử dụng, thông báo cho người dùng nếu có lỗi xảy ra

2 API Gateway Tiếp nhận yêu cầu từ giao diện người dùng, kiểm tra tính đúng đắn theo ràng buộc và điều hướng

30 đến services để xử lí

3 Microservices Xử lí và trả lời các yêu cầu từ API Gateway

4 Cơ sở dữ liệu Lưu trữ toàn bộ dữ liệu liên quan đến thông tin cửa hàng

Bảng 4.1: Bảng chi tiết các thành phần trong hệ thống

Thiết kế sơ đồ lớp

Hình 4.1: Sơ đồ lớp

ĐẶC TẢ USE-CASE

Sơ đồ Use-case

Hình 5.1: Sơ đồ Use-case

Danh sách các tác nhân

Tác nhân Mô tả tác nhân Ghi chú

Khách hàng Là người dùng có hoặc không có tài khoản cá nhân, truy cập hệ thống để mua hàng

Quản lý Là người dùng có tài khoản nội bộ, truy cập để thực hiện các công việc quản lý hoạt động của cửa hàng

Hệ thống gợi ý đề xuất sản phẩm tương tự người dùng đã xem hoặc đã mua

Bảng 5.1: Danh sách các tác nhân

Danh sách Use-case

ID Tên Use case Mô tả Chức năng Ghi chú

UC004 Xem danh mục sản phẩm

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

UC006 Tìm kiếm sản phẩm

UC007 Thêm vào giỏ hàng

UC011 Nhập thông tin giao hàng

UC012 Xem lịch sửa mua hàng

UC013 Xem chính sách vận chuyển

UC014 Quản lý thông tin tài khoản

UC015 Cập nhật thông tin tài khoản

UC017 Quản lý hoá đơn

UC018 Xem hoá đơn đã thanh toán

UC019 Xem hoá đơn chưa thanh toán

UC020 Xem danh sách đơn hàng đang vận chuyển

UC021 Hoàn thành đơn hàng

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

UC023 Xem đơn hàng đả hoàn thành

UC024 Xem đơn hàng đang đợi

UC025 Xem đơn hàng đã huỷ

UC026 Xem báo cáo thống kê

UC027 Quản lý danh mục

UC031 Thêm bộ sưu tập

UC032 Sửa bộ sưu tập

UC033 Xoá bộ sưu tập

UC034 Quản lý sản phẩm

UC037 Cập nhật sản phẩm

Bảng 5.2: Danh sách Use-case

Đặc tả Use-case

Description Use Case cho phép người dùng đăng nhập vào hệ thống

Actor Khách hàng, người bán

Trigger Khi người bán truy cập vào trang web lần đầu

Khi khách hàng đã có tài khoản và muốn đăng nhập vào hệ thống

Người dùng phải có tài khoản đăng nhập Người dùng phải có kết nối internet

Người dùng đăng nhập ứng dụng thành công

Basic flow 1 Người dùng chọn vào button “Đăng nhập”

2 Người dùng nhập tên đăng nhập và mật khẩu

3 Hệ thống xác thực thành công và quay trở lại trang chủ

3a Hệ thống xác thực không thành công và hiển thị thông báo 3a1 Người dùng chọn button “Xác nhận”

Use Case dừng lại 3a2 Người dùng chọn “Quên mật khẩu”

Use Case tiếp tục Use Case UC-1.1

Bảng 5.3: Use-case Đăng nhập

Description Use Case cho phép người dùng đăng kí tài khoản mới

Trigger Người dùng muốn đăng kí tài khoản với hệ thống

Người dùng phải có kết nối internet

Người dùng nhận được tài khoản đăng nhập cá nhân

Basic flow 1 Người dùng chọn vào button “Đăng kí”

2 Nhập các thông tin cần thiết (email, tài khoản, mật khẩu )

3 Hệ thống tiến hành xác thực email

4 Hệ thống xác thực thành công và quay trở lại trang chủ Alternative flow

2a Tên người dùng hoặc email đã tồn tại 2a1 Hệ thống thông báo lỗi, yêu cầu người dùng nhập lại thông tin Use case quay lại bước 2

4a Hệ thống xác thực không thành công và hiển thị thông báo 4a1 Người dùng chọn button “Xác nhận”

Use Case dừng lại Non-

Mật khẩu người dùng phải được hash bằng MD5

Bảng 5.4: Use-case Đăng kí

Description Use Case cho phép người dùng đặt lại mật khẩu tài khoản của mình Priority Must have

Trigger Khi người dùng quên mật khẩu hoặc đăng nhập không thành công vào hệ thống

1 Người dùng phải có tài khoản hợp lệ đã được đăng kí

2 Người dùng có quyền truy cập đến email cá nhân sử dụng đăng ký tài khoản

3 Người dùng phải có kết nối internet

Người dùng thiết lập mật khẩu mới thành công

Basic flow 1 Người dùng nhập email cá nhân sử dụng đăng kí tài khoản

2 Hệ thống gửi email xác nhận về hòm thư cá nhân

3 Người dùng truy cập vào hòm thư cá nhân và xác thực người dùng

4 Hệ thống xác thực thành công, đặt lại mật khẩu người dùng là số điện thoại của người dùng

5 Hệ thống ghi nhận thay đổi vào cơ sở dữ liệu

3 Hệ thống gửi email xác thực không thành công, người dùng không nhận đc email

3.1 Người dùng chọn button “Xác nhận”

Use Case dừng lại 3.2 Người dùng chọn “Gửi lại email”

Use Case tiếp tục bước 2

Thời gian hiệu lực 2 phút đối với email xác thực

Bảng 5.5: Use-case Quên mật khẩu

Name Đặt mua sản phẩm

Description Use Case diễn tả cách người dùng đặt mua quần áo trên hệ thống Priority Must have

Trigger Khi khách hàng muốn đặt mua một số sản phẩm trong cửa hàng

Người dùng đã thêm một số sản phẩm vào giỏ hàng

Post- conditions Đơn hàng được tạo thành công

Basic flow 1 Người dùng chọn vào button hình giỏ hàng bên góc phải màn hình để đến màn hình giỏ hàng

2 Người dùng kiểm tra thông tin về đơn hàng như số lượng sản phẩm, tên, địa chỉ người nhận, số điện thoại

3 Người dùng nhập mã giảm giá và nhấn kiểm tra

4 Mã giảm giá hợp lệ

5 Người dùng tiếp tục chọn hình thức thanh toán

6 Người dùng chọn hình thức thanh toán thanh toán khi nhận hàng

7 Người dùng bấm thanh toán

8 Hệ thống hiển thị thanh toán thành công và chuyển qua màn hình hiển thị thông tin chi tiết đơn hàng

6a Người dùng chọn hình thức thanh toán chuyển khoản ngân hàng

7a Người dùng bấm thanh toán

8a Hệ thống hiển thị thanh toán thành công và chuyển qua màn hình hiển thị thông tin chi tiết đơn hàng

9a Người dùng tiến hành quét mã ngân hàng để chuyển tiền

4b Mã giảm giá không hợp lệ

Use case tiếp tục ở bước 5

Thao tác đặt hàng nhanh chóng Đơn hàng phải được tạo nhanh và không xảy ra lỗi

Bảng 5.6: Use-case Đặt mua sản phẩm

Description Use Case diễn tả cách người bán quản lý đơn hàng

Trigger Khi người bán cần kiểm tra, tiếp nhận hay chuyển trạng thái đơn hàng

Người bán phải đăng nhập vào hệ thống

Phải có ít nhất một đơn hàng được tạo thành công

Các đơn hàng sẽ được tiếp nhận hay chuyển trạng thái phù hợp

Basic flow 1 Người bán chọn nút “Đơn hàng” trên thanh điều hướng bên trái màn hình

2 Người bán chọn tab “Đang chờ”

3 Người bán có thể xem thông tin đơn hàng hoặc tiến hành tìm kiếm đơn hàng theo tên khách hàng hay sắp xếp tăng giảm theo tổng tiền, ngày tạo

4 Người bán bấm nút “Vận chuyển” tương ứng với đơn hàng cần thao tác

5 Đơn hàng được chuyển trạng thái đang vận chuyển có thể xem ở tab “Tình trạng giao hàng”

2a Người bán chọn tab “Hoàn thành” hoặc “Đã hủy”

3a Người bán có thể xem thông tin đơn hàng hoặc tiến hành tìm kiếm đơn hàng theo tên khách hàng hay sắp xếp tăng giảm theo tổng tiền, ngày tạo

4b Người bán bấm nút “Hủy” tương ứng với đơn hàng cần thao tác

5b Đơn hàng sẽ được chuyển trạng thái là “Đã hủy” và có thể xem ở tab “Đã hủy”

3c1 Người dùng tiến hành tìm kiếm hay sắp xếp tăng giảm theo tổng tiền, ngày tạo

Use case tiếp tuc ở bước 4

5d Đơn hàng chuyển trạng thái thất bại

Phải xem được đầy đủ thông tin của đơn hàng

Bảng 5.7: Use-case Quản lý đơn hàng

Description Use Case mô tả thao tác tạo mới sản phẩm

Trigger Khi người bán cần thêm sản phẩm mới vào cửa hàng

Người bán phải đăng nhập vào hệ thống

Cần có đầy đủ thông tin sản phẩm cần tạo

Sản phẩm mới sẽ được thêm vào cửa hàng

Basic flow 1 Người bán chọn nút “Sản phẩm” trên thanh điều hướng bên trái màn hình

2 Người bán chọn tab “Sản phẩm”

3 Người bán có thể xem thông tin sản phẩm hoặc tiến hành tìm kiếm sản phẩm theo tên khách hàng hay sắp xếp tăng giảm theo giá tiền, lượt xem và lượt bán

4 Người bán bấm nút “Thêm mới” bên góc trái màn hình

5 Người bán tiếp tục nhập các thông tin sản phẩm và chọn bộ siêu tập, nhãn cho sản phẩm

6 Người bán chọn hình ảnh đại diện sản phẩm để hiển trị trên trang web

7 Người bán nhập các phân loại của sản phẩm như màu và số lượng kích cỡ cho từng màu

8 Người bán bấm nút “Lưu” để tạo sản phẩm

5a Người bán chọn nút “Hủy bỏ” trong cửa sổ nhập chi tiết sản phẩm

6a Người bán chọn nút “Đồng ý” trong hộp thoại xác nhận hủy thêm sản phẩm

Use case kết thúc 6b1 Người dùng tiến hành tìm kiếm hay sắp xếp tăng giảm theo tổng tiền, ngày tạo

Use case tiếp tuc ở bước 4

6c Người bán đăng hình không thành công

7c Người bán chọn thoát ra khỏi cửa sổ thêm sản phẩm

Tốc độ đăng hình nhanh chóng

Kiểm tra các dữ liệu cần thiết

Bảng 5.8: Use-case Thêm sản phẩm

Use Case Name Nhập sản phẩm

Description Use Case cho phép người dùng quản lý việc nhập sản phẩm vào kho hàng

Trigger Khi cửa hàng nhập thêm sản phẩm vào kho

1 Người dùng phải có tài khoản hợp lệ đã được đăng ký với quyền quản lý

2 Người dùng có nắm đầy đủ thông tin nhập hàng

3 Người dùng phải có kết nối internet

Post-conditions Người dùng tạo phiếu nhập hàng mới thành công

1 Người chọn Menu “Nhập hàng”

2 Người dùng chọn button “Nhập hàng” ở sản phẩm cần tạo phiếu nhập hàng

3 Người dùng nhập các thông tin cần thiết vào form (giá mỗi đơn vị, số lượng)

4 Người dùng chọn button “Đồng ý”

5 Hệ thống kiểm tra thông tin đã nhập

6 Hệ thống lưu thông tin nhập hàng vào CSDL

Exception flow 5a Hệ thống kiểm tra thông tin không thành công

5a1 Hệ thống báo lỗi 5a2 Người dùng kiểm tra thông tin Use-case quay lại bước 3

6a Hệ thống lưu thông tin không thành công.

6a1 Hệ thống báo lỗi Use-case dừng lại

Bảng 5.9: Use-case Nhập sản phẩm

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

Sơ đồ logic

Hình 6.1: Sơ đồ logic

Danh sách các quan hệ

STT Tên quan hệ Nội dung

1 Bảng account Thông tin tài khoản

2 Bảng user Thông tin người dùng

3 Bảng cart Thông tin giỏ hàng của người dùng

4 Bảng product Thông tin sản phẩm

5 Bảng product_item Thông tin sản phẩm cụ thể theo màu và kích cỡ

6 Bảng tag Thông tin nhãn sản phẩm

7 Bảng have_tag Thông tin chi tiết nhãn của mỗi sản

8 Bảng discount Thông tin các mức giảm giá

9 Bảng collection Thông tin bộ sưu tập

10 Bảng order Thông tin đơn hàng

11 Bảng order_detail Thông tin chi tiết đơn hàng

12 Bảng import Thông tin nhập hàng

13 Bảng import_detail Thông tin chi tiết nhập hàng

14 Bảng receipt Thông tin hoá đơn

15 Bảng voucher Thông tin mã giảm giá

16 Bảng daily_report Thông tin báo cáo ngày

17 Bảng monthly_report Thông tin báo cáo tháng

18 Bảng yearly_report Thông tin báo cáo năm

Bảng 6.1: Danh sách các quan hệ

THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG

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

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

Màn hình chính Hiển thị thông tin cơ bản của website, các sản phẩm bán chạy

2 Màn hình Đăng nhập

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

3 Màn hình Đăng kí Màn hình nhập liệu Đăng kí tài khoản với hệ thống

4 Màn hình Quên mật khẩu

Màn hình nhập liệu Thiết lập lại mật khẩu mới cho tài khoản

5 Màn hình Danh sách sản phẩm

Màn hình tra cứu Hiển thị danh sách sản phẩm đang bán

6 Màn hình Thông tin tài khoản

Màn hình nhập liệu, tra cứu

Hiển thị và cho phép chỉnh sửa thông tin tài khoản cá nhân

7 Màn hình Danh sách đơn hàng

Màn hình tra cứu Hiển thị lịch sử đơn hàng đã mua của tài khoản

8 Màn hình Giỏ hàng Màn hình tra cứu, nhập liệu

Hiển thị sản phẩm trong giỏ hàng, cho phép nhập thông tin cá nhân để tiến hàng đặt hàng

Màn hình tra cứu Hiển thị thông tin chuyển khoản thanh toán đơn hàng

Màn hình tra cứu Hiển thị thông tin chi tiết sản phẩm được chọn

11 Màn hình Chính sách đổi trả

Màn hình tra cứu Hiển thị thông tin chính sách đổi trả của cửa hàng

12 Màn hình Thống kê Màn hình tra cứu Hiển thị thống kê doanh thu của cửa hàng, sản phẩm bán chạy nhất

13 Màn hình Đơn hàng đang chờ

Màn hình tra cứu Hiển thị thông tin danh sách đang hàng đang chờ vận chuyển

14 Màn hình Đơn hàng đã hoàn thành

Màn hình tra cứu Hiển thị thông tin danh sách đang hàng đã hoàn thành

15 Màn hình Đơn hàng đã huỷ

Màn hình tra cứu Hiển thị thông tin danh sách đang hàng đã huỷ

16 Màn hình Nhãn Màn hình tra cứu, nhập liệu

Hiển thị danh sách nhãn sản phẩm, cho phép tạo mới và chỉnh sửa thông tin nhãn

17 Màn hình Bộ sưu tập

Màn hình tra cứu, nhập liệu

Hiển thị danh sách bộ sưu tập, cho phép tạo mới và chỉnh sửa thông tin bộ sưu tập

Hiển thị danh sách sản phẩm của cửa hàng, cho phép thêm mới và chỉnh sửa thông tin sản phẩm

19 Màn hình Tình trạng đơn hàng

Màn hình tra cứu Hiển thị danh sách đơn hàng đang được vận chuyển

20 Màn hình Hoá đơn đã thanh toán

Màn hình tra cứu Hiển thị danh sách hoá đơn đã thanh toán

21 Màn hình Hoá đơn chưa thanh toán

Màn hình tra cứu Hiển thị danh sách hoá đơn chưa thanh toán

22 Màn hình Giảm giá Màn hình tra cứu, nhập liệu

Hiển thị danh sách các mức giảm giá của cửa hàng, cho phép thêm

51 mới và chỉnh sửa thông tin mức giảm giá

23 Màn hình Voucher Màn hình tra cứu, nhập liệu

Hiển thị danh sách voucher của cửa hàng, cho phép thêm mới và chỉnh sửa thông tin voucher

Màn hình tra cứu Hiển thị thông tin chính sách của cửa hàng

Màn hình tra cứu Hiển thị danh sách khách hàng đã tạo tài khoản của cửa hàng

Hiển thị danh sách sản phẩm và số lượng tồn kho, cho phép tạo mới phiếu nhập hàng

27 Màn hình Lịch sử nhập hàng

Màn hình tra cứu Hiển thị danh sách lịch sử nhập hàng Bảng 7.1: Danh sách các màn hình

Sơ đồ liên kết các màn hình

Hình 7.1: Sơ đồ liên kết các màn hình

Mô tả chi tiết các màn hình

Hình 7.2: Giao diện Navigation Bar trước đăng nhập

Hình 7.3: Giao diện Navigation Bar sau đăng nhập

STT Tên đối tượng Loại Ý nghĩa

1 Nút Trang chủ Button Điều hướng về Trang chủ

2 Nút Sản phẩm Button Mở trang Danh sách sản phẩm

3 Nút giỏ hàng Button Mở trang giỏ hàng

4 Tìm kiếm Input Tìm kiếm sản phẩm theo tên

5 Nút người dùng Button Mở rộng lựa chọn người dùng trên

Navigation Bar (đăng nhập, đăng kí) Sau đăng nhập

6 Nút người dùng Button Mở rộng lựa chọn người dùng trên

Navigation Bar (xem thông tin cá nhân, lịch sử mua hàng, đăng xuất)

Bảng 7.2: Danh sách các thành phần Navigation Bar

54 Hình 7.4: Giao diện màn hình Trang chủ

1 Bán chạy nhất ListItem Hiển thị danh sách sản phẩm bán chạy nhất

2 Xem nhiều nhất ListItem Hiển thị danh sách sản phẩm được nhiều người xem nhất

3 Xem chi tiết Button Mở trang chi tiết sản phẩm tương ứng của sản phẩm đã chọn

4 Giới thiệu chung Layout Hiển thị hình ảnh cơ bản của cửa hàng, một số thông tin khuyến mãi, sản phẩm nổi bật

Bảng 7.3: Danh sách các thành phần giao diện màn hình Trang chủ

7.3.3 Màn hình Danh sách sản phẩm:

Hình 7.5: Giao diện màn hình Danh sách sản phẩm

1 Màu sắc Checkbox Lọc sản phẩm theo các tiêu chí được chọn

2 Kích cỡ Checkbox Lọc sản phẩm theo các tiêu chí được chọn

3 Sản phẩm Card Hiển thị tên sản phẩm, hình ảnh, giá cả

4 Xem chi tiết Button Mở trang chi tiết sản phẩm tương ứng của sản phẩm đã chọn Bảng 7.4: Danh sách các thành phần giao diện màn hình Danh sách sản phẩm

7.3.4 Màn hình Chi tiết sản phẩm:

58 Hình 7.6: Giao diện màn hình Chi tiết sản phẩm

1 Màu sắc RadioButton Nút chọn màu sắc muốn mua

2 Kích cỡ RadioButton Nút chọn kích cỡ muốn mua

3 Số lượng Input Ô nhập số lượng sản phẩm muốn mua

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

5 Mua ngay Button Thêm sản phẩm vào giỏ hàng và điều hướng tới trang giỏ hàng

6 Có thể bạn sẽ thích ItemList Hiển thị danh sách các sản phẩm liên quan được hệ thống gợi ý Bảng 7.5: Danh sách các thành phần giao diện màn hình Chi tiết sản phẩm

Hình 7.7: Giao diện màn hình Giỏ hàng

1 Thông tin sản phẩm Card Hiển thị thông tin cơ bản của

61 những sản phẩm trong giỏ hàng

2 Số lượng Input Ô nhập số lượng sản phẩm muốn mua

3 Email Input Ô nhập email người dùng

4 Họ Input Ô nhập họ người dùng

5 Tên Input Ô nhập tên người dùng

6 Địa chỉ Input Ô nhập địa chỉ giao hàng

7 Số điện thoại Input Ô nhập số điện thoại người nhập hàng

8 Voucher Input Ô nhập mã giảm giá

9 Kiểm tra Button Nút chọn kiểm tra tính hợp lệ của mã giảm giá và tính toán lại giá trị đơn hàng

Select Ô chọn phương thức thanh toán đơn hàng

11 Đặt hàng Button Nút chọn xác nhận đặt hàng, điều hướng đến trang xác nhận

Bảng 7.6: Danh sách các thành phần giao diện màn hình Giỏ hàng

Hình 7.8: Giao diện màn hình Thanh toán

1 Đặt hàng thành Layout Hiển thị thông tin đơn hàng đã

2 Về trang chủ Button Nút điều hướng về Trang chủ

3 Chi tiết đơn hàng ItemList Hiển thị danh sách sản phẩm đã đặt của đơn hàng

Layout Hiển thị mã QR chuyển khoản, thông tin tài khoản thanh toán, nội dung chuyển khoản

Bảng 7.7: Danh sách các thành phần giao diện màn hình Thanh toán

7.3.7 Màn hình Thông tin cá nhân:

Hình 7.9: Giao diện màn hình Thông tin cá nhân

1 Ảnh đại diện Image Hiển thị hình ảnh đại diện của tài khoản

2 First Name Input Ô nhập tên của chủ tài khoản

3 Last Name Input Ô nhập họ của chủ tài khoản

4 Address Input Ô nhập địa chỉ của chủ tài khoản

5 Phone Number Input Ô nhập số điện thoại của chủ tài khoản

6 Password Input Ô nhập mật khẩu mới của tài khoản

7 Hiện mật khẩu Button Nút chọn hiển thị/ẩn mật khẩu

8 Cập nhật thông tin Button Nút chọn xác nhận cập nhật thông tin đã nhập Bảng 7.8: Danh sách các thành phần giao diện màn hình Thông tin cá nhân

7.3.8 Màn hình Danh sách đơn hàng:

Hình 7.10: Giao diện màn hình Danh sách đơn hàng

1 Đơn hàng Layout Hiển thị thông tin cơ bản của đơn hàng đã đặt

2 Xem chi tiết Button Nút chọn điều hướng đến trang

67 chi tiết đơn hàng Bảng 7.9: Danh sách các thành phần giao diện màn hình Danh sách đơn hàng

7.3.9 Màn hình Chi tiết đơn hàng:

Hình 7.11: Giao diện màn hình Chi tiết đơn hàng

1 Quay lại Button Nút chọn điều hướng trở lại trang

2 Thông tin đơn hàng Layout Hiển thị thông tin chi tiết của đơn hàng, thông tin sản phẩm đã đặt, thông tin người nhận hàng

Bảng 7.10: Danh sách các thành phần giao diện màn hình Chi tiết đơn hàng

7.3.10 Màn hình Chính sách đổi trả:

Hình 7.12: Giao diện màn hình Chính sách đổi trả

1 Chính sách đổi trả Layout Hiển thị thông tin chính sách đổi trả

Bảng 7.11: Danh sách các thành phần giao diện màn hình Chính sách đổi trả

Hình 7.13: Giao diện màn hình Đăng nhập

1 Email đăng nhập Input Ô nhập email tài khoản cần đăng

2 Mật khẩu Input Ô nhập mật khẩu tài khoản đăng nhập tương úng

3 Đăng nhập Button Nút chọn đăng nhập vào trang web

4 Đăng ký ngay Button Nút điều hướng đến trang đăng kí tài khoản

5 Quên mật khẩu Button Nút chọn điều hướng đến trang

Quên mật khẩu Bảng 7.12: Danh sách các thành phần giao diện màn hình Đăng nhập

Hình 7.14: Giao diện màn hình Đăng kí

1 Họ Input Ô nhập họ người dùng muốn đăng kí tài khoản

2 Tên Input Ô nhập tên người dùng muốn đăng kí tài khoản

3 Số điện thoại Input Ô nhập số điện thoại người dùng

73 muốn đăng kí tài khoản

4 Email Input Ô nhập địa chỉ email người dùng muốn đăng kí tài khoản

5 Mật khẩu Input Ô nhập mật khẩu tài khoản muốn đăng kí

6 Địa chỉ Input Ô nhập địa chỉ người dùng muốn đăng kí tài khoản

7 Đăng kí Button Nút chọn xác nhận đăng kí tài khoản

9 Đăng nhập ngay Button Nút chọn điều hướng đến trang Đăng nhập Bảng 7.13: Danh sách các thành phần giao diện màn hình Đăng kí

7.3.13 Màn hình Quên mật khẩu:

Hình 7.15: Giao diện màn hình Quên mật khẩu

Hình 7.16: Giao diện màn hình thông báo cập nhật mật khẩu thành công

1 Họ Input Ô nhập họ người dùng muốn

75 đăng kí tài khoản Bảng 7.14: Danh sách các thành phần giao diện màn hình Quên mật khẩu

76 Hình 7.17: Giao diện Navigation SideBar thu gọn

77 Hình 7.18: Giao diện Navigation SideBar mở rộng

1 Thống kê Menu Menu chọn điều hướng đến trang

2 Đơn hàng MenuOption Chọn hiển thị các danh mục con

3 Đang chờ Menu Menu chọn điều hướng đến trang Đơn hàng đang chờ

4 Hoàn thành Menu Menu chọn điều hướng đến trang Đơn hàng đã hoàn thành

5 Đã huỷ Menu Menu chọn điều hướng đến trang Đơn hàng đã huỷ

6 Sản phẩm MenuOption Chọn hiển thị các danh mục con

7 Nhãn Menu Menu chọn điều hướng đến Trang

8 Bộ sưu tập Menu Menu chọn điều hướng đến trang

9 Sản phẩm Menu Menu chọn điều hướng đến trang

10 Tình trạng đơn hàng Menu Menu chọn điều hướng đến trên

11 Hoá đơn MenuOption Chọn hiển thị các danh mục con

12 Đã thanh toán Menu Menu chọn điều hướng đến trang

Hoá đơn đã thanh toán

13 Chưa thanh toán Menu Menu chọn điều hướng đến trang

Hoá đơn chưa thanh toán

14 Giảm giá Menu Menu chọn điều hướng đến trang

15 Voucher Menu Menu chọn điều hướng đến trang

16 Chính sách Menu Menu chọn điều hướng đến trang

17 Khách hàng Menu Menu chọn điều hướng đến trang

18 Nhập hàng MenuOption Chọn hiển thị các danh mục con

19 Lịch sử nhập hàng Menu Menu chọn điều hướng đến trang

20 Nhập hàng Menu Menu chọn điều hướng đến trang

Nhập hàng Bảng 7.15: Danh sách các thành phần giao diện Navigation SideBar

Hình 7.19: Giao diện màn hình Thống kê

1 Đơn hàng Card Hiển thị tổng số lượng đơn hàng

2 Khách hàng mới Card Hiển thị số lượng khách hàng đăng kí tài khoản mới

3 Đánh giá tốt Card Hiển thị số lượt đánh giá tốt

4 Sản phẩm bán được Card Hiển thị số lượt sản phẩm đã bán ra

5 Biểu đồ LineChart Hiển thị biểu đồ doanh thu, chi phí, và lợi nhuận của cửa hàng

6 Bán chạy nhất Card Hiển thị thông tin cơ bản sản phẩm bán chạy nhất

7 Xem nhiều nhất Card Hiển thị thông tin cơ bản sản phẩm được xem nhiều nhất

8 Đánh giá Card Hiển thị tóm tắt đánh giá của khách hàng (đang phát triển) Bảng 7.16: Danh sách các thành phần giao diện màn hình Thống kê

7.3.16 Màn hình Đơn hàng đang chờ:

Hình 7.20: Giao diện màn hình Đơn hàng đang chờ

1 Tìm kiếm Input Ô nhập thông tin tìm kiếm đơn hàng (tên khách hàng)

2 Danh sách đơn hàng Table Hiển thị danh sách thông tin cơ bản của đơn hàng

3 Vận chuyển Button Nút chọn chuyển trạng thái đơn hàng từ đang chờ sang đang vận chuyển

4 Huỷ Button Nút chọn huỷ đơn hàng

Bảng 7.17: Danh sách các thành phần giao diện màn hình Đơn hàng đang chờ

7.3.17 Màn hình Đơn hàng đã hoàn thành:

Hình 7.21: Giao diện màn hình Đơn hàng đã hoàn thành

2 Danh sách đơn hàng Table Hiển thị danh sách thông tin cơ bản của đơn hàng Bảng 7.18: Danh sách các thành phần giao diện màn hình Đơn hàng đã hoàn thành

7.3.18 Màn hình Đơn hàng đã huỷ:

Hình 7.22: Giao diện màn hình Đơn hàng đã huỷ

2 Danh sách đơn hàng Table Hiển thị danh sách thông tin cơ bản của đơn hàng Bảng 7.19: Danh sách các thành phần giao diện màn hình Đơn hàng đã huỷ

85 Hình 7.23: Giao diện màn hình Nhãn

Hình 7.24: Giao diện form tạo nhãn

Hình 7.25: Giao diện chỉnh sửa sản phẩm

1 Tìm kiếm Input Ô nhập thông tin tìm kiếm tên nhãn

2 Danh sách nhãn Table Hiển thị danh sách thông tin cơ bản của nhãn

3 Thêm mới Button Nút chọn mở form thêm nhãn mới

4 Edit Button Nút chọn chỉnh sửa nhãn

5 Delete Button Nút chọn xoá nhãn

6 Name Input Ô nhập tên cho nhãn mới

7 Giảm giá Select Ô chọn mức giảm giá cho nhãn mới

8 Lưu Button Nút chọn lưu thông tin nhãn mới

9 Huỷ Button Nút chọn huỷ thông tin nhãn mới

10 Tên nhãn Input Ô nhập tên mới cho nhãn đang chỉnh sửa

11 Giảm giá Select Ô chọn mức giảm giá mới cho nhãn đang chỉnh sửa

12 Lưu Button Nút chọn lưu thông tin nhãn đã

13 Huỷ Button Nút chọn huỷ thông tin nhãn đã chỉnh sửa Bảng 7.20: Danh sách các thành phần giao diện màn hình Nhãn

7.3.20 Màn hình Bộ sưu tập:

Hình 7.26: Giao diện màn hình Bộ sưu tập

Hình 7.27: Giao diện form tạo bộ sưu tập

Hình 7.28: Giao diện chỉnh sửa bộ sưu tập

2 Danh sách bộ sưu tập

Table Hiển thị danh sách thông tin cơ bản của bộ sưu tập

3 Thêm mới Button Nút chọn mở form thêm bộ sưu tập mới

4 Edit Button Nút chọn chỉnh sửa bộ sưu tập

5 Delete Button Nút chọn xoá bộ sưu tập

6 Name Input Ô nhập tên cho bộ sưu tập mới

7 Giảm giá Select Ô chọn mức giảm giá cho bộ sưu tập mới

8 Lưu Button Nút chọn lưu thông tin bộ sưu tập mới

9 Huỷ Button Nút chọn huỷ thông tin bộ sưu tập mới

10 Tên bộ sưu tập Input Ô nhập tên mới cho bộ sưu tập đang chỉnh sửa

11 Giảm giá Select Ô chọn mức giảm giá mới cho bộ sưu tập đang chỉnh sửa

12 Lưu Button Nút chọn lưu thông tin bộ sưu tập đã chỉnh sửa

13 Huỷ Button Nút chọn huỷ thông tin bộ sưu tập đã chỉnh sửa Bảng 7.21: Danh sách các thành phần giao diện màn hình Bộ sưu tập

90 Hình 7.29: Giao diện màn hình Sản phẩm

91 Hình 7.30: Giao diện thông tin chi tiết sản phẩm 1

Hình 7.31: Giao diện thông tin chi tiết sản phẩm 2

1 Thêm mới Button Nút chọn mở form thêm sản phẩm mới

2 Tìm kiếm Input Ô nhập thông tin tìm kiếm sản phẩm theo tên

3 Edit Button Nút chọn mở form chỉnh sửa sản phẩm

Table Hiển thị thông tin cơ bản của sản phẩm, click chọn sản phẩm để hiển thị thông tin chi tiết

Bảng 7.22: Danh sách các thành phần giao diện màn hình Sản phẩm

7.3.22 Form tạo/chỉnh sửa sản phẩm:

Hình 7.32: Giao diện form tạo sản phẩm 1

94 Hình 7.33: Giao diện form tạo sản phẩm 2

Hình 7.34: Giao diện form chỉnh sửa sản phẩm 1

Hình 7.35: Giao diện form chỉnh sửa sản phẩm 2

1 Bộ sưu tập Select Ô chọn bộ sưu tập cho sản phẩm

2 Tên sản phẩm Input Ô nhập tên cho sản phẩm

3 Nhãn Select Ô chọn nhãn cho sản phẩm

4 Trạng thái Switch Thay đổi trạng thái ngưng bán/đang bán của sản phẩm

5 Hình ảnh Button Nút chọn mở cửa sổ chọn hình ảnh

6 Ghi chú Input Ô nhập ghi chú mô tả cho sản phẩm

7 Giảm giá Select Ô chọn mức giảm giá cho sản phẩm

8 Giá nhập Input Giá nhập hàng cho sản phẩm

9 Giá bán Input Giá bán của sản phẩm

10 Thêm màu Button Nút chọn thêm màu cho sản phẩm

11 Màu sắc Input Ô nhập tên màu cho sản phẩm

12 Số lượng Input Ô nhập số lượng cho kích cỡ của màu tương ứng

13 Xoá màu Button Nút chọn xoá màu tương ứng

14 Huỷ Button Nút chọn huỷ thông tin đã nhập

15 Lưu Button Nút chọn xác nhận lưu thông tin sản phẩm Bảng 7.23: Danh sách các thành phần giao diện form tạo/chỉnh sửa sản phẩm

7.3.23 Màn hình Tình trạng đơn hàng:

Hình 7.36: Giao diện màn hình Tình trạng đơn hàng

1 Tìm kiếm Input Ô nhập thông tin tìm kiếm đơn hàng (theo tên khách hàng)

2 Hoàn tất Button Nút chọn hoàn tất đơn hàng

3 Danh sách đơn hàng Table Hiển thị danh sách đơn hàng với thông tin cơ bản, click chọn để hiển thị chi tiết đơn hàng

4 Thông tin chi tiết đơn hàng

Layout Hiển thị thông tin chi tiết đơn hàng Bảng 7.24: Danh sách các thành phần giao diện màn hình Tình trạng đơn hàng

7.3.24 Màn hình Hoá đơn đã thanh toán:

Hình 7.37: Giao diện màn hình Hoá đơn đã thanh toán

Hình 7.38: Giao diện thông tin chi tiết hoá đơn

1 Tìm kiếm Input Ô nhập thông tin tìm kiếm hoá đơn (theo tên khách hàng)

2 Danh sách hoá đơn Table Hiển thị danh sách hoá đơn với thông tin cơ bản, click chọn để hiển thị chi tiết hoá đơn

Layout Hiển thị thông tin chi tiết hoá đơn

Bảng 7.25: Danh sách các thành phần giao diện màn hình Hoá đơn đã thanh toán

7.3.25 Màn hình Hoá đơn chưa thanh toán:

Hình 7.39: Giao diện màn hình Hoá đơn chưa thanh toán

1 Tìm kiếm Input Ô nhập thông tin tìm kiếm hoá đơn (theo tên khách hàng)

2 Danh sách hoá đơn Table Hiển thị danh sách hoá đơn với thông tin cơ bản, click chọn để hiển thị chi tiết hoá đơn

Layout Hiển thị thông tin chi tiết hoá đơn

4 Đã thanh toán Button Nút chọn xác nhận hoá đơn đã

101 thanh toán Bảng 7.26: Danh sách các thành phần giao diện màn hình Hoá đơn chưa thanh toán

Hình 7.40: Giao diện màn hình Giảm giá

Hình 7.41: Giao diện form tạo Giảm giá

Hình 7.42: Giao diện chỉnh sửa giảm giá

1 Tìm kiếm Input Ô nhập thông tin tìm kiếm tên giảm giá

2 Danh sách giảm giá Table Hiển thị danh sách thông tin cơ bản của giảm giá

3 Thêm mới Button Nút chọn mở form thêm giảm giá mới

4 Edit Button Nút chọn chỉnh sửa giảm giá

5 Delete Button Nút chọn xoá giảm giá

6 Name Input Ô nhập tên cho giảm giá mới

7 Giảm giá Select Ô chọn mức giảm giá cho giảm giá mới

8 Lưu Button Nút chọn lưu thông tin giảm giá mới

9 Huỷ Button Nút chọn huỷ thông tin giảm giá mới

10 Tên giảm giá Input Ô nhập tên mới cho giảm giá đang chỉnh sửa

11 Giảm giá Select Ô chọn mức giảm giá mới cho giảm giá đang chỉnh sửa

12 Lưu Button Nút chọn lưu thông tin giảm giá đã chỉnh sửa

13 Huỷ Button Nút chọn huỷ thông tin giảm giá đã chỉnh sửa Bảng 7.27: Danh sách các thành phần giao diện màn hình Giảm giá

104 Hình 7.43: Giao diện màn hình Voucher

Hình 7.44: Giao diện form tạo voucher

Hình 7.45: Giao diện chỉnh sửa voucher

1 Tìm kiếm Input Ô nhập thông tin tìm kiếm tên voucher

2 Danh sách voucher Table Hiển thị danh sách thông tin cơ bản của voucher

3 Thêm mới Button Nút chọn mở form thêm voucher mới

4 Edit Button Nút chọn chỉnh sửa voucher

5 Delete Button Nút chọn xoá voucher

6 Mã khuyến mãi Input Ô nhập mã cho voucher mới

7 Tên khuyến mãi Input Ô nhập tên cho voucher mới

8 Giảm giá Input Ô nhập mức giảm giá cho voucher mới

9 Ngày hết hạn DatePicker Chọn ngày hết hạn cho voucher

10 Mô tả Input Ô nhập thông tin mô tả cho voucher

11 Lưu Button Nút chọn lưu thông tin voucher mới

12 Huỷ Button Nút chọn huỷ thông tin voucher mới

13 Code Input Ô nhập mã cho voucher đang sửa

14 Tên khuyến mãi Input Ô nhập tên cho voucher đang sửa

15 Giảm giá Input Ô nhập mức giảm giá cho voucher đang sửa

16 Ngày hết hạn DatePicker Chọn ngày hết hạn cho voucher

17 Mô tả Input Ô nhập thông tin mô tả cho voucher

18 Lưu Button Nút chọn lưu thông tin voucher đang sửa

19 Huỷ Button Nút chọn huỷ thông tin voucher đang sửa Bảng 7.28: Danh sách các thành phần giao diện màn hình Voucher

7.3.28 Màn hình Chính sách (đang phát triển):

Hình 7.46: Giao diện màn hình Chính sách

1 Phạm vi áp dụng Layout Hiển thị nội dung chính sách, click để mở rộng/thu gọn

1 Cách hình thành hợp đồng

Layout Hiển thị nội dung chính sách, click để mở rộng/thu gọn

1 Giá cả và thanh toán

Layout Hiển thị nội dung chính sách, click để mở rộng/thu gọn Bảng 7.29: Danh sách các thành phần giao diện màn hình Chính sách

Hình 7.47: Giao diện màn hình Khách hàng

Hình 7.48: Giao diện màn hình Thông tin chi tiết khách hàng

Table Hiển thị danh sách khách hàng đã đăng kí tài khoản với hệ thống

2 Thông tin chi tiết khách hàng

Layout Hiển thị thông tin chi tiết khách hàng đã chọn Bảng 7.30: Danh sách các thành phần giao diện màn hình Khách hàng

7.3.30 Màn hình Lịch sử nhập hàng:

Hình 7.49: Giao diện màn hình Lịch sử nhập hàng

1 Danh sách lịch sửa Table Hiển thị lịch sử nhập hàng của cửa hàng Bảng 7.31: Danh sách các thành phần giao diện màn hình Lịch sử nhập hàng

111 Hình 7.50: Giao diện màn hình Nhập hàng

Hình 7.51: Giao diện form nhập hàng

Table Hiển thị danh sách sản phẩm để người dùng chọn sản phẩm cần nhập hàng

2 Giá nhập Input Ô nhập giá trị mỗi đơn vị hàng cần nhập

3 Số lượng Input Ô nhập số lượng hàng nhập cho kích cỡ của màu tương ứng

4 Số lượng hàng nhập Layout Hiển thị tổng số lượng hàng đã nhập

5 Thành tiền Layout Hiển thị tổng số tiền đã nhập

6 Huỷ Button Nút chọn huỷ thông tin đã nhập

7 Đồng ý Button Nút chọn xác nhận thông tin nhập hàng Bảng 7.32: Danh sách các thành phần giao diện màn hình Nhập hàng

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

Môi trường cài đặt và kiểm thử

Môi trường cài đặt: Windows / Android 11.0 hoặc hơn

- Máy tính cá nhân có các trình duyệt như Microsoft Edge, Chrome, Cốc Cốc, …

Kết quả kiểm thử

STT Tính năng Mức độ hoàn thiện Ghi chú

2 Xem, tạo, cập nhật Sản phẩm 95%

3 Xem, Tạo, Xóa, Cập nhật Nhãn 100%

4 Xem, Tạo, Xóa, Cập nhật Bộ sưu tập 100%

6 Xem báo cáo thống kê 80%

7 Cập nhật thông tin tài khoản 91% Cập nhật ảnh đại diện

8 Hệ thống gợi ý sản phẩm 100%

Bảng 8.1: Kết quả kiểm thử

Tiêu đề	Shop Quần Áo Online Tích Hợp Gợi Ý Sản Phẩm
Tác giả	Nguyễn Trí Đức, Trương Kim Điền
Người hướng dẫn	ThS. Trần Anh Dũng
Trường học	Đại Học Quốc Gia Thành Phố Hồ Chí Minh
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	báo cáo đề tài
Năm xuất bản	2024
Thành phố	Thành Phố Hồ Chí Minh

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