Tìm hiểu về công nghệ React JS Asp net.core API và xây dựng website bán đồng hồ

Thông tin chung

STT HẠNG MỤC MÔ TẢ

Mục đích chung/Giới thiệu tổng quan - Tìm hiểu về công nghệ ASP.NET Core với ngôn ngữ chính là C#

- Tìm hiểu công nghệ Reactjs

- Áp dụng kiến thức vào xây dựng một trang web bán đồng hồ

Mục tiêu/Hiệu quả kỳ vọng của dự án - Cung cấp giải pháp bán hàng qua mạng hiệu quả hơn so với buôn bán truyền thống

- Hỗ trợ quản lý sản phẩm, doanh thu một cách nhanh chóng, thân thiện

- Hỗ trợ tư vấn khách hàng về thông tin sản phẩm, dịch vụ

- Giảm thiểu chi phí về mặt bằng, cơ sở vật chất

- Tiếp cận khách hàng rộng hơn

- Giảm thiểu số lượng nhân viên vận hành, quản lý

- Người quản lí cửa hàng

- Nhân viên của cửa hàng

Phạm vi dự án - Các chức năng phía khách hàng: đăng kí, đăng nhập, xem chi tiết sản phẩm, cập nhật thông tin cá nhân, mua hàng, thanh toán, quản lí đơn hàng đã mua,…

- Các chức năng phía admin và nhân viên: quản lí đơn hàng, quản lí tài khoản khách hàng, quản lí sản phẩm, xem thống kê,…

Các milestone - Thiết kế cơ sở dữ liệu: 22/9/2021

- Thiết kế giao diện trang khách hàng: 3/10/2021

- Thiết kế giao diện trang nhân viên, quản trị viên: 13/10/2021

- Xây dựng các api quản lý sản phẩm: 3/10/2021

- Xây dựng các api thanh toán Stripe:

- Liên kết client và backend bằng api:

- Tích hợp api thanh toán Zalo pay, chatbot Facebook: 19/3/2022

- Thêm tính năng đánh giá, text full search: 9/4/2022

- Thêm tính năng đề xuất sản phẩm liên quan: 16/4/2022

- Tracking người dùng, đề xuất sản phẩm cho người dùng: 7/5/2022

Mục đích, nhiệm vụ của đề tài

Mục đích

- Tìm hiểu về công nghệ ASP.NET Core với ngôn ngữ chính là C#

Nhiệm vụ

- Tìm hiểu về ASP.NET Core

- Tìm hiểu về các xây dựng một trang web bán đồng hồ qua các tài liệu trên internet

- Phát triển trang web bán đồng hồ với các chức năng: mua bán đồng hồ, quản lý thương hiệu, quản lý tài khoản, quản lý đồng hồ, quản lý đơn hàng, đăng nhập, đăng ký, khôi phục mật khẩu.

Phương pháp nghiên cứu

- Đầu tiên chúng em tìm hiểu từ lý thuyết với những tài liệu về ASP.NET Core, lớp học trực tuyến cũng như những video hướng dẫn trên youtube

- Thực hiện những đoạn code nhỏ cơ bản dần làm quen với cách lập trình mới

- Tham khảo những trang web thương mại trên internet đặc biệt là những trang bán đồng hồ để ứng dụng vào trang web của mình

- Lên kế hoạch xây dựng trang web bán đồng hồ:

 Liệt kê chức năng cần thực hiện

 Thiết kế cơ sở dữ liệu và nhập liệu

 Tiến hành thiết kế giao diện

 Kiểm thử và chỉnh sửa

Trong thời gian thực hiện trang web bán đồng hồ, nếu có thắc mắc gì nhóm sẽ tham khảo nguồn tài liệu từ internet và giáo viên hướng dẫn cố gắng hoàn thiện trang web dù còn nhiều hạn chế.

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

- Về lý thuyết: Hiểu được về thành phần, cấu trúc, cách thức hoạt động của ASP.NET Core, Reactjs

- Về thực hành: Xây dựng một trang web bán đồng hồ sử dụng công nghệ ASP.NET Core API dùng làm server và client sử dụng công nghệ Reactjs với giao diện chức năng dễ sử dụng cho người dùng và giao diện quản lý Admin đơn giản

CƠ SỞ LÝ THUYẾT

Ngôn ngữ C#

- C sharp (được viết tắt C#): Là một trong những ngôn ngữ lập trình theo hướng đối tượng được phát triển và ra mắt do Anders Hejlsberg phát triển vào năm

- Ngôn ngữ này được đầu tư bởi Microsoft và còn được xem như đối thủ “nặng ký” của Java #C có sự kết hợp chặt chẽ cùng với NET Framework nhằm hỗ trợ cho việc tạo ra các ứng dụng Windows Forms hoặc WPF được trở nên dễ dàng và nhanh chóng hơn

- Cho tới hiện nay thì #C đang là một trong những ngôn ngữ được đông đảo người dùng ưu tiên sử dụng và dần trở thành ngôn ngữ lập trình phổ biến nhất trên thế giới Đặc trưng của ngôn ngữ

- Tính đơn giản: C# là một trong những loại ngôn ngữ được xây dựng dựa trên nền tảng của C++ và Java Nhờ vậy, mà chúng hầu như đều có cấu trúc chương trình khá giống nhau Mặc dù #C là ngôn ngữ “sinh sau đẻ muộn” nhưng nhờ có nhiều cải tiến mới nên rất phù hợp với mọi đối tượng lập trình viên Một số cải tiến của nó đó chính là cấu trúc được rút gọn sao cho dễ nhớ và đơn giản hơn

- #C là ngôn ngữ dễ sử dụng và có tính hiện đại cao

- Ngôn ngữ lập trình #C được các chuyên gia nhận xét là loại ngôn ngữ thuần hướng các tố tượng Nó bao gồm các tính như: Trừu tượng, đa hình, kế thừa và đóng gói

- So với những loại ngôn ngữ lập trình khác thì #C sử dụng lượng từ khóa ít hơn rất nhiều Nhờ đặc điểm này mà các lập trình viên đều thuận tiện hơn rất nhiều cho việc xây dựng lên các đối tượng dành riêng cho mình Ưu điểm của C#

- C# được đánh giá là ngôn ngữ lập trình có tính linh hoạt và nhiều ưu điểm nổi bật, cụ thể như sau:

- Quy mô của chương trình: C# thường được sử dụng để viết trên các hệ thống vi điều khiển có kích cỡ 8bit Ngoài ra, nó còn được sử dụng trong các hệ thống trên 64bit hoặc hệ thống siêu máy tính

- C# là ngôn ngữ có hiệu suất cao, có có thể chạy mượt trên mọi hệ thống giới hạn về dung lượng Bởi vì ngay từ những ngày đầu thì C# đã được thiết kế cho mục đích thay thế cho ASM trong những hệ thống có bộ nhớ hạn chế

- C# có khả năng thực hiện các thuật toán giúp hỗ trợ rất nhiều kiểu dữ liệu khác nhau cũng như việc chuyển đổi sẽ trở nên dễ dàng hơn Ngôn ngữ lập trình C# còn có khả năng cung cấp thư viện chuẩn với hàm có chức năng và công cụ toán học

- C# là ngôn ngữ sở hữu cú pháp rất sát với những suy nghĩ logic, nhờ vậy mà việc viết code sẽ được đơn giản hóa và nhanh chóng hơn

- C# là loại ngôn ngữ lập trình rất an toàn và nó không cho phép việc chuyển đổi kiểu dữ liệu để có thể giảm tránh được những vấn đề sai lệch xảy ra

- Trong C# sẽ cho kết quả trả về thuộc các hàm đa phần đều là một object Các lỗi lập trình phổ biến như: gõ nhầm tên, viết sai cấu trúc… đều sẽ được hệ thống cảnh báo luôn mà không cần phải chờ đến lúc chạy

- C# thường được đi cùng với Visual Studio và bộ đôi này được sử dụng rất nhiều cho việc xây dựng Winform, WPF, website bằng MVC.NET Hiện nay, nó ngày càng trở nên phổ biến trong việc xây dựng nền tảng cho các ứng dụng di động

- C# là chỉ chạy trên nền Windows và có cài NET Framework Nên đây được xem là nhược điểm lớn nhất của C#

- Ngoài ra, thao tác đối với phần cứng hầu hết phải dựa vào windows.

ASP.NET Core

ASP.NET Core là gì?

- ASP.NET Core là một web framework mã nguồn và được tối ưu hóa cho cloud để phát triển các ứng dụng web chạy trên nhiều nền tảng như Windows, Linux và Mac Hiện tại, nó bao gồm MVC framework được kết hợp các tính năng của MVC và Web API thành một web framework duy nhất

 Các ứng dụng ASP.NET Core có thể chạy trên NET Core hoặc trên NET Framework hoàn chỉnh

 Nó đã được thiết kế để cung cấp một framework tối ưu cho các ứng dụng để triển khai tới cloud hoặc chạy on-premises

 Nó bao gồm những modular với các thành phần tối thiểu, do đó bạn giữ được tính linh hoạt trong quá trình xây dựng các giải pháp của mình

 Bạn có thể phát triển và chạy các ứng dụng đa nền tảng từ ASP.NET Core trên Windows, Mac và Linux

Sơ lược về lịch sử ASP.NET Core

- ASP.NET đã được sử dụng từ nhiều năm để phát triển các ứng dụng web Kể từ đó, framework này đã trải qua một sự thay đổi tiến hóa đều đặn và cuối cùng đã đưa chúng ta đến với ASP.NET Core 1.0 hậu duệ mới gần đây nhất của nó

 ASP.NET Core không phải là phiên bản tiếp theo của ASP.NET 4.6

 Đó là một framework hoàn toàn mới, may mắn rằng nó một dự án side-by-side tương tự với mọi thứ mà chúng ta biết

 Nó thực ra được viết lại trên framework ASP.NET 4.6 hiện tại những kích thước nhỏ hơn và nhiều modular hơn Ưu điểm của ASP.NET Core

- ASP.NET Core đi kèm với những ưu điểm sau:

 ASP.NET Core có một số thay đổi kiến trúc dẫn đến modular framework nhỏ hơn

 ASP.NET Core không còn dựa trên System.Web.dll Nó dựa trên một tập hợp nhiều yếu tố của Nuget packages

 Điều này cho phép bạn tối ưu ứng dụng của mình chỉ cần những NuGet packages cần thiết

 Lợi ích của diện tích bề mặt ứng dụng nhỏ hơn thì bảo mật chặt chẽ hơn, giảm dịch vụ, cải thiện hiệu suất và giảm chi phí

- Với ASP.NET Core, bạn có thể nhận được các cải tiến sau:

 Xây dựng và chạy các ứng dụng ASP.NET Core đa nền tảng trên Windows, Mac và Linux

 Được xây dựng trên NET Core, hỗ trợ side-by-side app versioning

 Công cụ mới giúp đơn giản hóa việc phát triển web hiện đại

 Liên kết đơn các web stack như Web UI và API Web

 Cấu hình dựa trên môi trường đám mây sẵn có

 Được xây dựng dựa trên cho DI (Dependency Injection)

 Tag Helpers làm cho các Razor makeup trở nên tự nhiên hơn với HTML

 Có khả năng host trên IIS hoặc self-host

- ASP.NET Core được thiết kế để tích hợp một cách liên tục với nhiều client- side frameworks, bao gồm AngularJS, KnockoutJS và Bootstrap

Sự khác biệt quan trọng giữa ASP.NET với ASP.NET Core

Bảng 2: Sự khác nhau quan trọng giữa ASP.NET với ASP.NET Core

ASP.NET ASP.NET Core

Nền tảng đã có từ lâu Hoàn toàn được thiết kế mới

Chạy trên NET Framework Chạy trên cả NET Core và NET

Chỉ trên Windows Chạy trên tất cả các OS sử dụng NET

Nền tảng ổn định với tính năng phong phú Chưa hoàn chỉnh nhưng mong đợi sẽ hoàn chỉnh trong tương lai

WebForms được hỗ trợ Không hỗ trợ WebForms

System.web.dll cồng kềnh Nhỏ, nhẹ và module hóa

Bản quyền của Microsoft ASP.NET Core là mã nguồn mở

Reactjs

- React Js là một thư viện viết bằng javascript, dùng để xây dựng giao diện người dùng (UI) React được sử dụng rộng rãi và có hệ sinh thái đa dạng phong phú

UI tất nhiên là quan trọng, nhưng không phải là tất cả Ưu điểm

- Viết component dễ dàng hơn: React component dễ viết hơn vì nó sử dụng JSX, mở rộng cú pháp tùy chọn cho JavaScript cho phép bạn kết hợp HTML với JavaScript

- Hiệu suất tốt hơn với Virtual DOM: React cho phép xây dựng các virtual DOMs và host chúng trong bộ nhớ Nhờ vậy, mỗi khi có sự thay đổi trong DOM thực tế, thì virtual sẽ thay đổi ngay lập tức Hệ thống này sẽ ngăn DOM thực tế để buộc các bản cập nhật được liên tục Do đó, tốc độ của ứng dụng sẽ không bị gián đoạn

- Thân thiện với SEO: React cho phép bạn tạo giao diện người dùng có thể được truy cập trên các công cụ tìm kiếm khác nhau Tính năng này là một lợi thế rất lớn vì không phải tất cả các khung JavaScript đều thân thiện với SEO

- Reactjs chỉ phục vụ cho tầng View React chỉ là View Library nó không phải là một MVC framework như những framework khác Đây chỉ là thư viện của Facebook giúp render ra phần view Vì thế React sẽ không có phần Model và

Controller, mà phải kết hợp với các thư viện khác React cũng sẽ không có 2- way binding hay là Ajax

- Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại

- React khá nặng nếu so với các framework khác React có kích thước tương tương với Angular (Khoảng 35kb so với 39kb của Angular) Trong khi đó Angular là một framework hoàn chỉnh

- Khó tiếp cận cho người mới học Web

Ant design

- Ant Design đặc biệt được tạo ra cho các ứng dụng máy tính nội bộ, cam kết trải nghiệm của người dùng và các nhà thiết kế sản phẩm Những người thiết kế giao diện và thiết kế trải nghiệm cho người dùng được gọi chung là thiết kế sản phẩm, Ant Design sẽ xóa bỏ ranh giới giữa việc quản lý sản phẩm, thiết kế tương tác, thiết kế hình ảnh, phát triển giao diện và quản trị dữ liệu người dùng Nhờ việc tận dụng sự đồng nhất về đặc điểm kỹ thuật, Ant Design đơn giản hóa việc thiết kế và lập trình cho những người đang thực hiện Project, điều này sẽ giúp họ có thêm nhiều kinh nghiệm và tăng hiệu quả phát triển giao diện của sản phẩm và ứng dụng Ưu điểm

- Giá trị trong thiết kế: Ant Design cung cấp một đánh giá thực tế về các thiết kế đẹp dành cho cả các nhà thiết kế của Ant Design và những người đang sử dụng nó Đồng thời, nó xây dựng một nền tảng trên cùng các nguyên tắc và mẫu thiết kế để đưa ra hướng dẫn và giải pháp chung cho mục tiêu thiết kế được chỉ định

Generic Repository

- Trong các trường hợp khác, dự án lại đòi hỏi một cách tốt nhất để tạo ra tất cả các repository logic ở cùng một nơi Chúng ta cần tạo 1 và chỉ 1 repository cho việc thao tác với toàn bộ các class entity Vậy để giải quyết điều này chúng ta phải sử dụng Generic Repository Pattern

 Giảm thiểu sự trùng lặp code

 Đảm bảo các coder dùng chung 1 pattern

 Dễ dàng bảo trì sau này

- Unit Of Work được sử dụng để đảm bảo nhiều hành động như insert, update, delete được thực thi trong cùng một transaction thống nhất Nói đơn giản hơn, nghĩa là khi một hành động của người dùng tác động vào hệ thống, tất cả các hành động như insert, update, delete phải thực hiện xong thì mới gọi là một transaction thành công Gói tất cả các hành động đơn lẻ vào một transaction để đảm bảo tính toàn vẹn dữ liệu

Hình 1: Mô tả cấu trúc Unit of Work

FPT Recommend Flatform

- Recommendation Platform được sử dụng cho việc cung cấp các gợi ý cho khách hàng của một sản phẩm/dịch vụ để tăng trải nghiệm của khách hàng trong quá trình sử dụng Sản phẩm recommendation platform của FPT Telecom đã được tạo nên sau quá trình nghiên cứu, huấn luyện mô hình để mang lại kết quả tốt nhất cho người dùng, giúp người dùng có thể đạt được hiệu quả mong muốn trong kinh doanh.

Rasa Chatbot

- Rasa là một nền tảng chabot bao gồm:

 The Rasa Core Dialogue Engine

- Rasa NLU - một thư viện để hiểu ngôn ngữ tự nhiên (NLU) thực hiện phân loại ý định và trích xuất thực thể từ đầu vào của người dùng và giúp bot hiểu những gì người dùng đang nói

- Rasa Core - một khung chatbot với quản lý hội thoại , lấy đầu vào có cấu trúc từ NLU

- NLU và Core là độc lập và người ta có thể sử dụng NLU mà không cần Core, và ngược lại

- Rasa X : là một tool giúp chúng ta xây dựng, cải thiện và triển khai model chatbot vừa tạo

- Intent: RASA cần biết người dùng muốn gì, vì vậy cần nhận ra ý định của họ

Người dùng nói rằng : “Tôi muốn đặt bàn cho 2 người tối nay tại nhà hàng ABC” thì intent ở đây là việc đặt bàn

Entity: thực thể là để trích xuất thông tin từ đầu vào của người dùng Như ví dụ ở trên thì entity ở đây chính là thời gian và địa điểm đặt bàn

Stories : Câu chuyện xác định sự tương tác giữa người dùng và chatbot theo intent và action được thực hiện bởi bot Giống như trong ví dụ trên, bot có ý định đặt bàn và các thực thể như địa điểm, thời gian và điều đó sẽ thực hiện hành động tiếp theo từ bot

Action: Hành động về cơ bản là các hoạt động được thực hiện bởi bot hoặc yêu cầu thêm một số chi tiết để có được tất cả các thực thể hoặc tích hợp với một số API hoặc truy vấn cơ sở dữ liệu để nhận / lưu một số thông tin

MÔ TẢ YÊU CẦU

Tổng quan quy trình nghiệp vụ

Hình 2: Tổng quan quy trình nghiệp vụ

Quy trình quản lí đơn hàng

- Bước 1: Kiểm tra tất cả đơn đặt hàng

STT MÔ TẢ HOẠT ĐỘNG SẢN PHẨM/

1 Nhân viên chọn quản lí đơn hàng Nhân viên

2 Kiểm tra các đơn hàng tất cả đơn hàng cần xác nhận Nhân viên

Bước 2: Cập nhật trạng thái của đơn hàng

1 Nhân viên chọn chi tiết đơn hàng cần cập nhật Nhân viên

2 Kiểm tra các thông tin của đơn hàng Nhân viên

3 Chọn trạng thái đóng gói, vận chuyển của đơn hàng Nhân viên

Quy trình người dùng mua hàng

- Bước 1: Thêm sản phẩm vào giỏ hàng

1 Khách hàng vào xem thông tin chi tiết sản phẩm Khách hàng

2 Khách hàng chọn số lượng sản phẩm muốn thêm vào giỏ hàng Khách hàng

3 Khách hàng nhấn chọn “Add to cart” để tiến hành thêm vào giỏ hàng Khách hàng

- Bước 2: Tiến hành thanh toán sản phẩm trong giỏ hàng

1 Khách hàng nhấn mở giỏ hàng và nhấn chọn “Check out” Khách hàng

2 Khách hàng nhập các thông tin giao hàng Khách hàng

3 Khách hàng chọn voucher sử dụng Khách hàng

4 Khách hàng chọn phương thức thanh toán và hoàn thành các bước yêu cầu để thanh toán Khách hàng

Quy trình giám sát kho

- Quản trị viên đăng nhập và kiểm tra các thông tin về sản phẩm (thương hiệu, chất liệu,…) , kiểm tra thông tin đơn hàng, xem thống kê doanh thu và sản phẩm đã bán

- Xem thông tin đơn hàng

1 Đăng nhập với vai trò admin Admin

2 Chọn “Orders” để xem toàn bộ các đơn hàng Admin

3 Chọn xem chi tiết đơn hàng Admin

- Kiểm tra các thuộc tính của sản phẩm

Chọn vào các danh mục tính chất của sản phẩm (chất liệu, thương hiệu, mức độ chống nước, loại năng lượng,…)

2 Chọn thêm mới, cập nhật, hoặc xóa để quản lí các danh mục Admin

- Kiểm tra doanh thu và sản phẩm đã bán bằng thống kê theo thời gian

1 Chọn chức năng thống kê sản phẩm hoặc thống kê doanh thu Admin

2 Chọn khoảng thời gian cần thống kê Admin

3 Xem thống kê qua các biểu đồ và bảng thống kê Admin

Quy trình quản lí kho

1 Nhân viên chọn xem danh sách các sản phẩm hoặc danh sách các đơn hàng Nhân viên

2 Chọn cập nhật trạng thái đơn hàng hoặc quản lí sản phẩm Nhân viên

TỔNG QUAN

Khảo sát hiện trạng

- Link website: https://www.watchshop.com/

Hình 3: Hình ảnh website Watchshop

- Bố cục hợp lý, hấp dẫn

- Thiết kế hiện đại, phối màu rất tốt

- Chức năng lọc sản phẩm rất đầy đủ, chi tiết

- Nhiều phương thức thanh toán

- Nhiều hình ảnh minh họa

- Thông tin về sản phẩm rất đa dạng, chi tiết

- Tốc độ phản hồi nhanh

- Thay đổi tiền tệ tương ứng quốc gia

- Có chatbot hỗ trợ tư vấn

- Hỗ trợ đa ngôn ngữ

- Minimix watch shop chưa áp dụng chatbot để trả lời các phản hồi khách hàng 24/24

- Chưa đa dạng các phương thức thanh toán

- Chưa áp dụng các coupon

- Các hình ảnh minh họa sản phẩm còn hạn chế

- Giao diện website chưa đủ hấp dẫn người dùng

- Chưa hỗ trợ đa ngôn ngữ, chuyển đổi tiền tệ linh hoạt

- Chưa sử dụng captcha để hạn chế tấn công DDOS

- So với với watchshop.com, website của nhóm khá là non nớt và chỉ đáp ứng được các nhu cầu cơ bản trong thương mại điện tử Minimix watch shop – website của nhóm, chưa hỗ trợ đầy đủ các dịch vụ để khách hàng cảm thấy hài lòng, quyết định chọn mua ở Minimix

- Link website: https://donghohaitrieu.com/

Hình 4: Trang chủ website đồng hồ Hải Triều

- Hỗ trợ chat trực tiếp với nhân viên

- Hỗ trợ nhiều phương thức thanh toán: trả tiền mặt khi nhận hàng, chuyển khoản ngân hàng, thanh toán qua thẻ

- Có phần đánh giá, nhận xét rõ ràng cho từng sản phẩm giúp người mua dễ dàng tham khảo

- Có video giới thiệu sản phẩm rõ ràng hơn

- Tìm kiếm sản phẩm dễ dàng

- Có thể thực hiện mua sản phẩm khi không đăng kí tài khoản

- Phần mô tả sản phẩm rất chi tiết và có kèm theo hình ảnh

- Có hỗ trợ chương trình giảm giá, sự kiện mã giảm giá cho sản phẩm

- Khi bình luận cần phải nhập thông tin tên và tài khoản email vì không đăng kí đăng nhập

- Không thể đăng kí tài khoản là người dùng của website

- So với website đồng hồ Hải Triều, trang website của nhóm với quy mô còn nhỏ và đơn giản về cơ sở dữ liệu, các chức năng cần thiết giúp cho

25 khách hàng dễ sử dụng như mô hình thanh toán, các chức năng giảm giá, khuyến mãi thu hút người dùng, sự đa dạng về thể loại sản phẩm

- Link website: https://fridayshopping.vn/

- Hỗ trợ chat qua messenger

- Hiển thị, gợi ý các sản phẩm bán chạy, sản phẩm nổi bật, sản phẩm giảm giá

- Áp dụng phiếu giảm giá

- Thanh toán bằng tiền mặt hoặc bằng thẻ (có trả góp)

- Phần đánh giá sản phẩm

- Không thể đăng kí tài khoản

- Giao diện giỏ hàng hơi phức tạp, không hiển thị số lượng của mỗi sản phẩm trong giỏ hàng

- Không hiển thị thông báo trên biểu tượng giỏ hàng

- Bình luận sản phẩm luôn kèm theo phần đánh giá sản phẩm

- Nhập thông tin tên, địa chỉ email khi đánh giá, bình luận

- Mô hinh của trang FridaysShopping tương tự như những trang web bán đồng hồ khác trên thị trường, sẽ yêu cầu người mua nhập thông tin tài khoản email trực tiếp khi thanh toán hoặc bình luận sản phẩm mà không phải đăng kí tài khoản người dùng

Sơ đồ tổng quan

Hình 6: Sơ đồ tổng quan trang người dùng

Hình 7: Sơ đồ tổng quan trang quản lí

Ma trận quyền

- X: có quyền thực hiện chức năng

Bảng 3: Bảng ma trận quyền

STT Chức năng Khách hàng Nhân viên Quản trị viên

3 Quản lý loại năng lượng X

5 Quản lý chất liệu đồng hồ X

6 Quản lý loại kích thước X

7 Quản lý mức độ chống nước X

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

13 Xem danh sách sản phẩm X X X

17 Xem chi tiết sản phẩm X X X

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

21 Xem lịch sử mua hàng X X X

22 Phân trang danh sách sản phẩm X X X

Giả thiết và ràng buộc

Bảng 4: Giả thiết, ràng buộc, rủi ro

1 Các giả thiết của dự án

- Các thành viên đã có nền tảng kiến thức lập trình

- Các thành viên nắm vững mô hình client – server

- Các công việc đều phân chia đồng đều giữa các thành viên

- Các thành viên đều có khả năng đọc hiểu tài liệu tiếng anh

- Thiết bị phần cứng đáp ứng nhu cầu của dự án

2 Các ràng buộc của dự án

- Dự án phải hoàn thành trước 30/6/2022

- Các thành viên hoàn thành tính năng dựa theo kế hoạch

- Dự án phải được báo cáo tiến độ hằng tuần

- Dự án hỗ trợ kinh doanh, quản lý sản phẩm đồng hồ

- Các thành viên trao đổi với nhau khi gặp khó khăn

Quản lí delivery

STT MILESTONE NGÀY RA MẮT KẾT QUẢ

22/09/2021 - Mô tả cơ sở dữ liệu

2 Giao diện trang khách hàng

- Giao dện trang sản phẩm

- Trang chi tiết sản phầm

3 Thiết kế giao diện trang admin

13/10/2021 - Giao diện quản lí sản phẩm, dơn hàng, tài khoản

- Giao diện quản lí các danh mục của sản phẩm

4 Xây dựng api quản lí sản phẩm

13/10/2021 - Tương tác với database các nghiệp vụ thêm, sửa, xóa sản phẩm

5 Xây dựng api quản lí mua hàng

25/10/2021 - Tương tác với database nghiệp vụ thêm giỏ hàng, nhập địa chỉ giao hàng, thông tin đơn hàng

6 Xây dựng api thanh toán

22/10/2021 - Tương tác với database và thanh toán

Stripe để lưu thông tin thanh toán và đơn hàng

7 Gọi api quản lí tài khoản 1/11/2021 - Tương tác với database với chức năng quản lí tài khoản người dùng

- Truy vẫn database lưu thông tin tài khoản mới, cập nhật trạng thái tài khoản

8 Liên kết client và backend bằng api

14/11/2021 - Sản phẩm kết hợp giao diện và xử lí dữ liệu

- Thực hiện thành công website với các chức năng mua hàng, quản lí, thống kê

9 Deploy sản phẩm 28/11/2021 - Sử dụng website theo đường dẫn được public

10 Tích hợp thanh toán Zalopay, chatbot

19/03/2022 - Xử lí thanh toán bằng Zalopay

- Quét mã QR để thanh toán

26/03/2022 - Cơ sở dữ liệu cho chức năng mã giảm giá

- Xử lí dữ liệu và giao diện trang quản lí mã giảm giá

- Thêm thông tin mã giảm giá (nếu có) và chức năng thanh toán

12 Thêm tính năng đánh giá, full text search

09/04/2022 - Giao diện kết quả sản phẩm tỉm kiếm

- Hỗ trợ tìm kiếm theo từ khóa dễ dàng hơn

- Hỗ trợ lọc sản phẩm cải thiện chức năng tìm kiếm sản phẩm

13 Thêm tính năng đề xuất sản phẩm liên quan

16/04/2022 - Danh sách các sản phẩm liên quan đến sản phẩm người dùng đang xem

14 Tracking người dùng, đề xuất sản phẩm cho người dùng

07/05/2022 - Thống kê các sản phẩm người dùng quan tâm

- Gợi ý danh sách sản phẩm liên quan đến các sản phẩm người dùng quan tâm

18/06/2022 - Hỗ trợ hệ thống liên hệ và tìm kiếm thông tin sản phẩm, cửa hàng cho người dùng thông qua nhắn tin

Các milestone - - Thiết kế cơ sở dữ liệu: 22/9/2021

- Xây dựng các api thanh toán Stripe: 22/10/2021

- Liên kết client và backend bằng api: 13/11/2021

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

Phân tích hệ thống và danh sách chức năng

Hình 8: Cấu trúc hệ thống

4.2.1 Chức năng phía Khách hàng

Bảng 5: Chức năng phía khách hàng

STT Chức năng Mô tả

1 Đăng nhập Cho phép người dùng đăng nhập vào shop bằng tài khoản Minimix hoặc tài khoản Facebook, Google

2 Đăng ký Cho phép người dùng đăng ký tài khoản mới

3 Quên mật khẩu Cho phép người dùng lấy lại mật khẩu mới thông qua email

4 Đổi mật khẩu Cho phép người dùng cập nhật lại mật khẩu

5 Cập nhật thông tin cá nhân

Cho phép người dùng thay đổi thông tin cá nhân hiện tại

6 Đăng xuất Cho phép người dùng đăng xuất khỏi tài khoản hiện tại

7 Xem danh sách sản phẩm

Cho phép người dùng xem các sản phẩm của shop

8 Lọc sản phẩm Cho phép người dùng lọc sản phẩm theo yêu cầu

9 Tìm kiếm sản phẩm Cho phép người dùng tìm sản phẩm dựa trên dữ liệu nhập vào (full text search)

10 Giỏ hàng Cho phép khách hàng có thêm, chỉnh sửa, xóa sản phẩm trong giỏ hàng

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

Cho phép khách hàng xem thông tin chi tiết của sản phẩm

12 Bình luận Cho phép khách hàng bình luận dưới mỗi sản phẩm

13 Đặt hàng, thanh toán Cho phép khách hàng thực hiện mua hàng, thanh toán online (Stripe và ZaloPay) để đặt mua sản phẩm

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

Cho phép khách hàng xem lại thông tin chi tiết của đơn hàng

15 Xem lịch sử mua hàng

Cho phép khách hàng xem lại thông tin lịch sử mua hàng

16 Phân trang danh sách sản phẩm

Người dùng có thể chuyển trang khác để xem thêm sản phẩm

17 Sử dụng chatbot Khách hàng được tư vấn sớm nhất

18 Chọn địa chỉ trên map

Hỗ trợ người dùng có thể chọn địa chỉ trực tiếp trên bản đồ

19 Đánh giá sản phẩm Người mua hàng được đánh giá chất lượng, uy tín (bằng số lượng sao) của sản phẩm sau khi nhận hàng

Chi tiết các chức năng phía Khách hàng

- (1) Đăng nhập: Tài khoản, mật khẩu, tài khoản facebook, google o Đầu vào: Tài khoản, mật khẩu o Xử lý: Hệ thống sẽ kiểm tra các trường dữ liệu có hợp lệ trước khi gửi yêu cầu đến server o Đầu ra: Hiển thị thông báo kết quả đăng nhập

- (2) Đăng ký: Hiển thị các ô nhập liệu của hệ thống o Đầu vào: Thông tin khách hàng nhập

38 o Xử lý: Hệ thống sẽ kiểm tra các trường dữ liệu có hợp lệ trước khi gửi yêu cầu đến server o Đầu ra: Hiển thị thông báo kết quả đăng ký

- (3) Quên mật khẩu: Hiển thị ô nhập email o Đầu vào: Email o Xử lý: Hệ thống kiểm tra email có tồn tại không rồi gửi mật khẩu mới qua email o Đầu ra: Thông báo kết quả và gửi mật khẩu mới qua email

- (4) Đổi mật khẩu: Hiển thị ô mật khẩu mới và mật khẩu cũ o Đầu vào: Mật khẩu mới và mật khẩu cũ o Xử lý: Hệ thống kiểm tra mật khẩu khớp với mật khẩu người dùng nhập Nếu khớp thì thay đổi mật khẩu thành mật khẩu mới o Đầu ra: Thông báo kết quả xử lý

- (5) Cập nhật thông tin cá nhân: o Đầu vào: Các thông tin cá nhân của người dùng, avatar o Xử lý: Hệ thống cập nhật lại database o Đầu ra: Thông báo kết quả xử lý

- (6) Đăng xuất o Đầu vào: Nhấn nút đăng xuất o Xử lý: Xóa phiên làm việc hiện tại o Đầu ra: Trở về trạng thái chưa đăng nhập

- (7) Xem danh sách sản phẩm o Đầu vào: Người dùng chọn “Products” o Xử lý: Truy vấn các sản phẩm của hệ thống o Đầu ra: Hiển thị sản phẩm

- (8) Lọc sản phẩm o Đầu vào: Các yêu cầu lọc của khách hàng o Xử lý: Truy vấn sản phẩm dựa trên các tiêu chí do người dùng đề ra o Đầu ra: Hiển thị sản phẩm

- (9) Tìm kiếm sản phẩm o Đầu vào: Tên sản phẩm

39 o Xử lý: Truy vấn sản phẩm có chứa ký tự người dùng nhập o Đầu ra: Hiển thị sản phẩm

- (10) Giỏ hàng o Đầu vào: Khách hàng chọn “Choose” o Xử lý: Nếu sản phẩm không có trong giỏ hàng thì thêm sản phẩm với số lượng là 1 Nếu sản phẩm đã tồn tại trong giỏ hàng thì thêm 1 vào số lượng trong giỏ hàng Người dùng sửa số lượng sản phẩm là 0 thì sản phẩm sẽ bị xóa khỏi giỏ hàng o Đầu ra: Hiển thị sản phẩm trong giỏ hàng

- (11) Xem chi tiết o Đầu vào: Khách hàng nhấn chọn sản phẩm o Xử lý: Truy vấn sản phẩm dựa trên id o Đầu ra: Hiển thị sản phẩm

- (12) Bình luận o Đầu vào: Nội dung bình luận o Xử lý: Thêm bình luận của khách hàng vào cơ sở dữ liệu o Đầu ra: Hiển thị bình luận vừa thêm

- (13) Đặt hàng, thanh toán o Đầu vào: Thông tin về người nhận, địa chỉ, mã giảm giá (nếu có), thẻ thanh toán tài khoản Stripe hoặc quét mã QR thanh toán bằng ZaloPay o Xử lý: Thực hiện thanh toán nếu thành công thì cập nhật vào database o Đầu ra: Hiển thị view thông báo thanh toán thành công

- (14) Xem chi tiết đơn hàng o Đầu vào: Chọn “Order”, chọn “Detail” để xem chi tiết đơn hàng o Xử lý: Truy vấn thông tin chi tiết đơn hàng khách hàng đã thực hiện o Đầu ra: Hiển thị các đơn hàng

- (15) Xem lịch sử mua hàng o Đầu vào: Chọn “Order” o Xử lý: Truy vấn các đơn hàng khách hàng đã thực hiện o Đầu ra: Hiển thị các đơn hàng

40 o Đầu vào: Nội dung tin nhắn o Xử lý: Phản hồi nội dung dựa vào tin nhắn khách hàng o Đầu ra: Tin nhắn của nhân viên hoặc chatbot

- (17) Chọn địa chỉ trên bản đồ o Đầu vào: Vị trí chọn trực tiếp của khách hàng trên bản đồ o Xử lý: Xử lí dữ liệu o Đầu ra: Thông tin vị trí người dùng đã chọn

- (18) Đánh giá sản phẩm o Đầu vào: Số lượng sao người dùng đánh giá o Xử lý: Kiểm tra lưu dữ liệu vào dữ liệu o Đầu ra: Tổng trung bình sao sản phẩm đã được đánh giá

4.2.2 Chức năng phía Nhân viên, quản trị viên

Bảng 6: Chức năng phía nhân viên, quản trị viên

STT Chức năng Mô tả

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

Xem thông tin tài khoản, quản lí trạng thái hoạt động của tài khoản (khóa tài khoản)

2 Quản lý đơn hàng Xem thông tin các đơn hàng và chuyển đổi trạng thái của đơn hàng

3 Quản lý bình luận Xem các bình luận về sản phẩm, trả lời bình luận và xóa những bình luận không phù hợp

4 Quản lý sản phẩm Thêm, sửa, xóa thông tin sản phẩm trong cửa hàng

- (1) Quản lý tài khoản khách hàng: Quản lý tài khoản khách hàng, khóa hoặc mở trạng thái hoạt động của tài khoản o Đầu vào: Thông tin tài khoản khách hàng: tên, điện thoại, địa chỉ, trạng thái hoạt động

41 o Xử lý: Khi quản trị viên hoặc nhân viên chuyển đổi trạng thái hoạt động thành khóa tài khoản thì sẽ gửi yêu cầu đến server và gọi cập nhật cơ sở dữ liệu o Đầu ra: Trạng thái hoạt động của tài khoản khách hàng sẽ thay đổi, khách hàng không thể đăng nhập nếu tài khoản bị khóa

- (2) Quản lý đơn hàng: Quản lý đơn hàng bao gồm mã đơn hàng, tên người nhận, trạng thái thanh toán, địa chỉ, trạng thái đơn hàng Khi chọn chỉnh sửa thì hiển thị thêm các thông tin chi tiết của đơn hàng và cập nhật trạng thái đơn hàng o Đầu vào: Thông tin đơn hàng như mã đơn hàng, tên người nhận, địa chỉ, số điện thoại, trạng thái thanh toán, sản phẩm trong đơn hàng o Xử lý: Khi quản trị viên hoặc nhân viên chọn “Edit” để chỉnh sửa trạng thái đơn hàng và nhấn “Update” thì sẽ gửi yêu cầu đến server và cập nhật thông tin trạng thái vận chuyển của đơn hàng xuống cơ sở dữ liệu o Đầu ra: Trạng thái vận chuyển của đơn hàng được cập nhật thành công

- (3) Quản lý bình luận: Quản lý bao gồm xem tên tài khoản bình luận, tên sản phẩm được bình luận, nội dung và thời gian bình luận Quản trị viên hoặc nhân viên có thể chọn “Reply” để trả lời những bình luận cần thiết, hoặc có thể chọn những bình luận và nhấn “Delete” để xóa những bình luận o Đầu vào: Thông tin của bình luận như tên tài khoản bình luận, tên sản phẩm, nội dung và thời gian bình luận o Xử lý: Quản trị viên hoặc nhân viên có thể trả lời bình luận khi đó trả lời sẽ được lưu xuống cơ sở dữ liệu Quản trị viên, nhân viên có thể thực hiện xóa bình luận, chọn bình luận và nhấn “Delete” sẽ gửi yêu cầu xuống server và thực hiện xóa những bình luận được chọn và những bình luận liên quan o Đầu ra: Nội dung trả lời bình luận sẽ được lưu vào cơ sở dữ liệu và thể hiện lên trang người dùng Khi xóa thì những bình luận sẽ bị xóa khỏi cơ sở giữ liệu và không hiển thị trên trang người dùng

Thiết kế dữ liệu

4.2.2 Mô hình cơ sở dữ liệu

Hình 10: Mô hình cơ sở dữ liệu

User(Id, UserName, Password, Name, Address, State, Phone, Birthday, Avartar)

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

1 Id Id của người dùng Int PRIMARY

2 Username Tên đăng nhập của người dùng String UNIQUE

Mật khẩu dùng để đăng nhập vào website

Tên thật để thực hiện giao dịch của người dùng

6 State Trạng thái hoạt động của tài khoản Boolean

7 Phone Số đồng hồ String

9 Avatar Ảnh đại diện String

Bảng xác định vai trò của mỗi tài khoản, giám sát quyền truy cập

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

1 RoleId Id của vai trò Int

2 RoleName Tên vai trò String UNIQUE

Một tài khoản có thể có nhiều vai trò

1 UserId Id của người dùng Int FOREIGN

2 RoleId Id của vai trò Int FOREIGN

1 Id Id của sản phẩm String

2 Name Tên sản phẩm String

3 Price Giá sản phẩm Float

4 Amount Số lượng sản phẩm trong kho Int

Hình ảnh sản phẩm Byte[]

6 Description Mô tả sản phẩm String

7 BrandId Thương hiệu sản phẩm int FOREIGN

Loại đồng hồ (nam, nữ, đôi) Int

9 Material Chất liệu đồng hồ Int FOREIGN

10 WaterResista nce Độ chống nước Int FOREIGN

11 Size Kích thước mặt đồng hồ Int

Thương hiệu của sản phẩm đồng hồ

1 BrandId Id thương hiệu Int

2 Name Tên thương hiệu String

Giá trị chống nước của đồng hồ

TT Thuộc tính Diễn giải

Kiểu dữ liệu Ràng buộc Ghi chú

1 WaterId Id độ chống nước Int PRIMARY

2 WaterValue Giá trị chống nước String

Kích thước mặt đồng hồ

2 SizeValue Kích thước mặt đồng hồ Float

Bảng chất liệu đồng hồ

1 MaterialId Id chất liệu Int

2 MaterialValue Tên chất liệu String

Năng lượng đồng hồ sử dụng để hoạt động (đồng hồ cơ, đồng hồ pin, hay năng lượng mặt trời,…)

2 EnergyValue Loại năng lượng String

- Bảng hình ảnh thêm của sản phẩm: một sản phẩm được mô tả bởi nhiều hình ảnh khác nhau

2 ProductId Mã sản phẩm String FOREIGN

3 Image Đường dẫn lưu hình ảnh String

- Bảng giỏ hàng: mỗi một người mua sẽ có một giỏ hàng

- Người dùng lưu trữ sản phẩm muốn mua vào trong giỏ hàng Trong một giỏ hàng có thể có nhiều sản phẩm khác nhau

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

Id của khách hàng Int

Id của sản phẩm có trong giỏ hàng

3 Count Số lượng của sản phẩm Int

- Bảng thông tin đơn hàng đã mua của khách hàng

1 OrderId Id đơn hàng Int

2 UserId Id người mua Int

3 OrderDate Ngày đặt hàng DateTime

4 Total Tổng tiền của đơn hàng Float

5 Transaction Mã hóa đơn String

6 PaymentStatus Loại giao dịch String

7 Address Địa chỉ nhận hàng, địa chỉ khách hàng

8 Name Tên khách hàng String FOREIGN KEY

9 Phone Số đồng hồ khách hàng String

Trạng thái của đơn hàng String

11 CodeVoucher Mã giảm giá String FOREIGN KEY

- Bảng chi tiết của đơn hàng bao gồm các sản phẩm đã mua trong đơn hàng

TT Thuộc tính Diễn giải Kiểu dữ liệu

1 OrderId Id đơn hàng Int

2 ProductId Id sản phẩm String

3 Count Số lượng sản phẩm Int

4 Price Giá sản phẩm Float

5 ProductName Tên sản phẩm String

- Người dùng chọn mã giảm giá để giảm giá cho đơn mua hàng

1 VoucherId Id giảm giá Int PRIMARY

Tên phiếu giảm giá String

3 StartDate Ngày bắt đầu hiệu lực DateTime

4 EndDate Ngày kết thúc DateTime

5 Discount Số tiền giảm giá Float

6 Code Mã code giảm giá String

Trạng thái của phiếu Boolean

- Người dùng có thể bình luận về sản phẩm hay gửi thắc mắc về sản phẩm trong phần bình luận

1 Id Id bình luận Int PRIMARY KEY IDENTIT

2 UserId Id người bình luận Int FOREIGN KEY

Id sản phẩm đã bình luận String FOREGN KEY

4 Content Nội dung bình luận String

5 Date Ngày giờ bình luận DateTime

Id của comment được trả lời Int FOREIGN KEY

7 State Trạng thái của bình luận Int

- Người dùng được đánh giá đơn hàng (số sao) khi nhận hàng thành công

TT Thuộc tính Diễn giải

Kiểu dữ liệu Ràng buộc Ghi chú

1 UserId Id người bình luận Int PRIMARY KEY,

Id sản phẩm đã bình luận String

3 Value Giá trị đánh giá Int

Ngày giờ tắt đánh giá DateTime

5 IsRated Đã đánh giá Boolean

- Bảng lưu lại thông tin những sản phẩm người dùng quan tâm để thực hiện đề xuất sản phẩm cho người dùng

Id nhận dạng người dùng String PRIMARY KEY,

2 ProductId Id sản phẩm String PRIMARY KEY,

3 ClickCart Số lần nhấn thêm vào giỏ hàng Int

Thời gian trong trang chi tiết sản phẩm

Số lần mua sản phẩm Boolean

6 ClickDetail Số lần nhấn xem chi tiết sản phẩm Int

ĐẶC TẢ CÁC CHỨC NĂNG

Chức năng đăng nhập

Bảng 25: Bảng use case Đăng nhập

Use Case No UC_01 Use case version 1.0

Use case name Đăng nhập

Author Lê Trần Đức Huy

 Khách hàng đã có tài khoản của Minimix hoặc có tài khoản Facebook, Google

 UseCase giúp khách hàng đăng nhập để có thể mua hàng

 Khách hàng đăng nhập thành công

 Khách hàng truy cập trang đăng nhập và nhấn đăng nhập hoặc nhấn nút Login with Facebook, Login with Google

 Khách hàng nhập thông tin tài khoản, mật khẩu chính xác hoặc có sẵn tài khoản facebook, google

 Thành công: Khách hàng được thông báo thành công và được chuyển về trang chủ

 Thất bại: Thông báo lỗi

STEP Actor Action System Response

1 Khách hàng truy cập vào

Website Website hiển thị giao diện trang chủ

2 Click “Login” Hiển thị trang đăng nhập

3 Nhập tài khoản, mật khẩu Chuyển về trang chủ hoặc thông báo lỗi xảy ra

Hình 11: Lược đồ hoạt động Đăng nhập

Hình 12: Lược đồ tuần tự Đăng nhập

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

Bảng 26: Giao diện trang Đăng nhập

STT Tên Mô tả chi tiết

1 Username Nhập tên đăng nhập

3 Forgot your password Lấy lại mật khẩu

4 Sign in Gửi yêu cầu đăng nhập

5 Register Chuyển sang giao diện đăng ký

Hình 14: Giao diện đăng nhập Admin

Bảng 27: Mô tả giao diện đăng nhập Admin

Stt Tên Mô tả chi tiết

1 Tên đăng nhập Nhập tên đăng nhập

2 Mật khẩu Nhập mật khẩu

3 Đăng nhập Nhấn để đăng nhập với quyền Admin

BR01 Lần đầu đăng nhập bằng google, facebook, email phải được kiểm tra tồn tại Email đã tồn tại sẽ thông báo đăng nhập thất bại Đối với phương thức đăng nhập bình thường, kiểm tra username và password

Chức năng đăng ký

Bảng 28: Bảng usecase Đăng kí

Use case name Đăng ký

 UseCase giúp khách hàng tạo tài khoản

 Khách hàng đăng ký thành công

 Khách hàng truy cập trang đăng ký và nhấn đăng ký

BR02 Username: chiều dài tối thiểu 6 kí tự, chiều dài tối đa 15 kí tự

Email: chiều dài tối đa 80 kí tự Password: chiều dài tối thiểu 6 kí tự, chiều dài tối đa 15 kí tự

Có trường xác nhận mật khẩu Email trường duy nhất

 Khách hàng nhập thông tin được yêu cầu

 Thành công: Thông báo đăng ký thành công

2 Click “Register” Hiển thị trang đăng ký

Khách hàng nhập thông tin được yêu cầu Thông báo lỗi hoặc thông báo đăng ký thành công [Exception 1] [Exception 2]

No Actor Action System Response

1 Tài khoản đã tồn tại Thông báo lỗi

2 Email đã tồn tại Thông báo lỗi

Hình 15: Lược đồ hoạt động Đăng kí

Hình 16: Lược đồ tuần tự Đăng kí

Bảng 28: Giao diện trang Đăng ký

3 Phone number Nhập số đồng hồ

4 Your password Nhập mật khẩu

5 Confirm password Nhập mật khẩu lần nữa

6 Register Gửi yêu cầu đăng ký

Chức năng quên mật khẩu

Bảng 29: Bảng usecase Quên mật khẩu

Use case name Quên mật khẩu

 UseCase giúp khách hàng lấy lại mật khẩu

 Khách hàng có thể đăng nhập bằng mật khẩu mới

 Khách hàng chọn “Forgot password”

 Thành công: Email nhận được mật khẩu mới và khách hàng có thể đăng nhập

Khách hàng chọn “Forget password”

Hiển thị input nhập email dùng đăng ký tài khoản

2 Nhập email Hiển thị thông báo đã gửi password

1 Email không tồn tại trong database Thông báo lỗi

Hình 18: Lược đồ hoạt động Quên mật khẩu

Hình 19: Lược đồ tuần tự Quên mật khẩu

5.3.4 Giao diện Quên mật khẩu

Giao diện quên mật khẩu

Hình 20: Trang Quên mật khẩu

Bảng 47: Giao diện trang Quên mật khẩu

2 Submit Gửi yêu cầu lấy lại mật khẩu

3 Cancel Quay lại màn hình đăng nhập

BR03 Sử dụng email để khách hàng lấy mật khẩu mới

- Nghiệp vụ thay đổi mật khẩu

BR04 Khách hàng cần đăng nhập và sử dụng mật khẩu hiện tại để có thể đổi mật khẩu mới

Chức năng thanh toán

Bảng 30: Bảng usecase Thanh toán

Use case name Thanh toán

 UseCase giúp khách hàng thanh toán sản phẩm trong giỏ hàng

 Khách hàng thanh toán thành công

 Chọn thanh toán bằng Stripe hoặc ZaloPay

 Khách hàng đã đăng nhập, có sản phẩm trong giỏ hàng

 Thành công: Hiển thị thông báo thanh toán thành công

 Thất bại: Không hiển thị thông báo lỗi

Khách hàng chọn “Check out” ở giỏ hàng Hiển thị form nhập thông tin

2 Cập nhật thông tin cần thiết: địa chỉ, nhập mã giảm giá (nếu có)

Hiển thị các thông tin: tên, địa chỉ, số điện thoại, các chương trình giảm giá

3 Chọn “Continue Shipping” Hiển thị form thông tin thanh toán

4 Nhập thông tin yêu cầu

5 Chọn phương thức thanh toán:

Hiển thị form nhập thông tin tài khoản Stripe hoặc quét mã thanh toán bằng ZaloPay

Chọn Payment hoặc dùng thiết bị để quét mã thực hiện thanh toán bằng ZaloPay

Hiển thị thông báo thành công nếu thanh toán thành công

1 Thông tin không hợp lệ Thông báo lỗi

2 Tài khoản không đủ số dư Thông báo lỗi

Hình 21: Lược đồ hoạt động thanh toán Stripe

Hình 23: Lược đồ tuần tự Thanh toán Stripe

5.4.4 Giao diện trang thanh toán

Hình 25: Giao diện giỏ hàng

Bảng 31: Giao diện giỏ hàng

2 Số lượng Nhập số lượng muốn điều chỉnh

3 Subtotal Tổng tiền trong giỏ hàng

4 Check out Chuyển sang giao diện check out

1 Name Nhập tên người nhận hàng

2 Address Nhập địa chỉ nhận hàng

3 Phone Nhập số đồng hồ người nhận

4 Thông tin về giỏ hàng Hiển thị các sản phẩm trong giỏ và tổng tiền

5 Continue shipping Chuyển sang giao diện nhập thẻ thanh toán

6 Bản đồ Hiển thị địa điểm trên bản đồ dựa vào địa chỉ

7 Ô nhập code voucher Nhập code của voucher để giảm giá

8 Danh sách voucher Hiển thị các voucher có thể sử dụng

Bảng 33: Giao diện Thanh toán

2 Phương thức vận chuyển Mặc định phương thức vận chuyển là Standard

3 Các phương thức thanh toán

Sử dụng stripe hoặc zalo pay để thanh toán hóa đơn

4 Nhập thông tin thẻ Chỉ hiển thị khi chọn phương thức thanh toán bằng stripe

BR05 Để bắt đầu đặt hàng, giỏ hàng phải có sản phẩm Sau khi nhấn , tiếp tục nhấn Check out, đối với người dùng đã cập nhật đầy đủ thông tin cá nhân, các thông tin giao hàng sẽ được tự đồng điền dựa vào thông tin người dùng, ngược lại, người dùng có thể tự nhập thông tin giao hàng Nếu khách hàng sử dụng voucher, tổng số tiền phải trả sẽ trừ đi giá trị của voucher

Sau đó, người dùng có thể chọn phương thức thanh toán Zalo pay hoặc Stripe

- Stripe: người dùng nhập thông tin thẻ để thanh toán

- Zalo pay: người dùng sử dụng điện thoại để quét mã QR

Cách hoạt động Stripe: khi người dùng chọn Stripe, server sẽ tạo một yêu cầu thanh toán dựa vào giỏ hàng, gửi yêu cầu thanh toán đó cho người dùng Nếu người dùng nhập thông tin thẻ hợp lệ và thanh toán thành công, thông báo server thanh toán thành công, server tạo thông tin về order và thông tin chi tiết order

Cách hoạt động Zalo pay: khi người dùng chọn Zalo pay, server sẽ tạo url chứa QR code thanh toán dựa trên giỏ hàng và gửi url cho trình duyệt người dùng Trình duyệt tự động chuyển tiếp url thanh toán, sau khi khách hàng quét mã thanh toán thành công, Zalo sẽ gửi thông báo để server Minimix tạo thông tin về order và thông tin chi tiết order

Chức năng thêm giỏ hàng

Bảng 34: Bảng usecase Thêm giỏ hàng

Use case name Thêm giỏ hàng

 UseCase giúp khách hàng có thể thêm sản phẩm vào giỏ hàng

 Khách hàng thêm sản phẩm vào giỏ hàng thành công

 Khách hàng chọn Choose ở trên hình ảnh sản phẩm hoặc chọn Add to cart

 Khách hàng đã đăng nhập

 Thành công: Giỏ hàng cập nhật sản phẩm vừa thêm

 Thất bại: Giỏ hàng không cập nhật

2 Click “Products” Hiển thị danh sách sản phẩm

3 Chọn “Choose” ở thẻ sản phẩm Thêm sản phẩm với số lượng 1 [Exception

4 Giỏ hàng cập nhật sản phẩm Hiển thị thông tin về sản phẩm

1 Khách hàng truy cập vào Website Website hiển thị giao diện trang chủ

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

4 Nhập số lượng Nếu nhập vượt quá số lượng tồn kho sẽ bị chuyển thành số lượng tối đa mà shop cung cấp

5 Nhấn “Add to cart” Thêm sản phẩm với số lượng tùy chọn [Exception 1]

6 Giỏ hàng cập nhật sản phẩm Hiển thị thông tin về sản phẩm

1 Số lượng vượt quá lượng tồn kho Giỏ hàng không cập nhật

Hình 28: Lược đồ hoạt động Thêm giỏ hàng

Hình 29: Lược đồ tuần tự Giỏ hàng

5.5.4 Giao diện thêm giỏ hàng

- Giao diện xem sản phẩm

Bảng 35: Giao diện Xem sản phẩm

1 Sort by Sắp xếp theo thứ tự lựa chọn

3 Prices Chọn giới hạn giá sản phẩm

5 Select Tiến hành lọc sản phẩm

6 Reset Xóa các điều kiện lọc

- Giao diện chi tiết sản phẩm

Hình 31: Trang chi tiết sản phẩm

Bảng 36: Giao diện chi tiết sản phẩm

1 Hình ảnh minh họa Hình ảnh sản phẩm, nhấn để phóng to hình ảnh

3 Số lượng Nhập số lượng sản phẩm muốn thêm vào giỏ

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

5 Thông tin chi tiết sản phẩm

6 Reviews Nhấn để xem bình luận

7 Đánh giá sao Thể hiện đánh giá của các khách hàng đã mua và sử dụng sản phẩm

8 Gợi ý các sản phẩm liên quan

Các sản phẩm tương tự với sản phẩm đang xem

Hình 32: Giao diện giỏ hàng Bảng 37: Giao diện giỏ hàng

2 Số lượng Nhập số lượng muốn điều chỉnh

3 Subtotal Tổng tiền trong giỏ hàng

4 Check out Chuyển sang giao diện check out

BR06 Lưu trữ giỏ hàng dưới cơ sở dữ liệu, đăng nhập mới có thể thêm sản phẩm vào giỏ hàng Có 2 cách thêm sản phẩm vào giỏ hàng:

- Cách 1: Nhấn Choose ở mỗi sản phẩm, sẽ tự động thêm sản phẩm với sô lượng 1

- Cách 2: Thêm sản phẩm ở trang chi tiết sản phẩm, nhập số lượng và nhấn Add to cart để thêm

Khi thêm sản phẩm kiểm tra số lượng tồn kho đủ để cung cấp, nếu không đủ thêm sản phẩm vào giỏ hàng thất bại Sau khi thêm, khách hàng có thể điều chỉnh số lượng sản phẩm khi nhấn biểu tượng giỏ hàng Khi số lượng sản phẩm về 0 sẽ được tự động xóa khỏi giỏ hàng

Thêm sản phẩm đã tồn tại trong giỏ hàng thì số lượng sản phẩm trong giỏ hàng sẽ được cập nhật lại.

Chức năng bình luận

Bảng 38: Bảng usecase Bình Luận

Use case name Bình luận

 UseCase giúp khách hàng để lại bình luận dưới mỗi sản phẩm

 Khách hàng bình luận thành công, hiển thị bình luận dưới sản phẩm

 Khách hàng nhập bình luận và chọn “Add comment”

 Thành công: Bình luận hiển thị ở phần Reviews

1 Khách hàng truy cập vào Website Website hiển thị giao diện trang chủ

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

4 Chọn “Reviews” Hiển thị các review

5 Nhập nội dung bình luận

6 Nhấn “Add comment” Bình luận hiển thị ở phần Reviews

Hình 33: Lược đồ hoạt động Bình luận

Hình 34: Lược đồ tuần tự Bình luận

5.6.4 Giao diện Chức năng bình luận

Hình 35: Giao diện Chức năng bình luận

BR07 Khách hàng đã đăng nhập có thể bình luận, phản hồi dưới mỗi sản phẩm

Mỗi bình luận thể hiện thời gian, hình đại diện, tên, nội dung bình luận

Phản hồi bình luận của người khác bằng cách nhấn Reply to ở bình luận tương ứng.

Chức năng thay đổi thông tin

Bảng 39: Bảng usecase Thay đổi thông tin

Use case name Thay đổi thông tin

 UseCase thay đổi thông tin cá nhân, sẽ được điền tự động khi mua hàng

 Khách hàng có thể thay đổi thông tin cá nhân

 Thành công: Thông báo thành công

1 Khách hàng chọn “Profile” Hiển form nhập thông tin cá nhân

2 Nhấn Submit Hiển thị thông báo thành công

1 Dữ liệu nhập không hợp lệ Thông báo lỗi

Hình 36: Lược đồ hoạt động Thay đổi thông tin

Hình 37: Lược đồ tuần tự Thay đổi thông tin

5.7.4 Giao diện Cập nhật thông tin

- Giao diện cập nhật thông tin

Hình 38: Trang cập nhật thông tin

Bảng 40: Giao diện Cập nhật thông tin

1 Name Nhập tên người dùng

2 Address Nhập địa chỉ người dùng

4 Phone Nhập số đồng hồ người dùng

6 Submit Gửi yêu cầu thay đổi thông tin

7 Change password Chuyển sang giao diện thay đổi mật khẩu

9 Chọn địa chỉ trên map

Nhấn vị trí trên map sẽ nạp địa chỉ vào ô address

BR08 Người dùng nhập tất cả thông tin yêu cầu để hoàn thành cập nhật thông tin

Chức năng xem lịch sử mua hàng

Bảng 41: Bảng usecase Lịch sử mua hàng

Use case name Lịch sử mua hàng

 UseCase giúp khách hàng xem lại các đơn hàng đã thực hiện

 Khách hàng có thể xem lại các đơn hàng đã thực hiện (nếu có)

 Thành công: Hiển thị các đơn hàng đã thực hiện

1 Khách hàng chọn “Orders” Hiển thị các đơn hàng đã thực hiện

2 Khách hàng chọn Detail Hiển thị thông tin chi tiết về đơn hàng

Hình 39: Lược đồ hoạt động Xem lịch sử mua hàng

Hình 40: Lược đồ tuần tự Xem lịch sử mua hàng

5.8.4 Giao diện Lịch sử mua hàng

- Giao diện lịch sử mua hàng

Hình 41: Trang lịch sử mua hàng

Bảng 42: Giao diện Lịch sử mua hàng

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

- Giao diện đơn hàng chi tiết

Hình 42: Trang chi tiết đơn hàng

Bảng 43: Giao diện đơn hàng chi tiết

1 Bill from Thông tin về người nhận, đơn hàng, voucher sử dụng

2 Bill to Thông tin của shop

3 Sản phẩm Liệt kê các sản phẩm của đơn hàng

4 Total Tổng tiền đã sử dụng voucher nếu có

Chức năng quản lí tài khoản khách hàng

Bảng 44: Chức năng quản lí tài khoản khách hàng

Use case name Quản lí tài khoản khách hàng

 Nhân viên, quản trị viên

 UseCase thay đổi trạng thái hoạt động của tài khoản (khóa hoặc mở tài khoản)

 Nhân viên hoặc quản trị viên có thể khóa và mở khóa tài khoản khách hàng

 Nhân viên, quản trị viên chọn “User Account”

 Nhân viên, quản trị viên đã đăng nhập

 Thành công: thay đổi icon khóa tài khoản

Nhân viên, quản trị viên đăng nhập vào tài khoản

Hiển thị trang chủ trang nhân viên hoặc quản trị viên

2 Chọn “User Account” Hiển thị trang quản lí tài khoản khách hàng với danh sách các tài khoản

Chọn biểu tượng khóa đối với tài khoản muốn đổi trạng thái hoạt động

Biểu tượng khóa sẽ thay đổi mở khóa hoặc khóa tài khoản

Hình 43: Lược đồ hoạt động Quản lí tài khoản khách hàng

Hình 44: Lược đồ tuần tự Quản lí tài khoản khách hàng

5.9.4 Giao diện Quản lí tài khoản khách hàng

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

Bảng 45: Mô tả giao diện quản lý tài khoản

1 Khung tìm kiếm Nhập thông tin tìm kiếm

2 Tìm kiếm Nhấn để tìm kiếm tài khoản

3 Sửa trạng thái Nhấn để khóa hoặc mở tài khoản

4 Phân trang Nhấn để chuyển trang xem các tài khoản khác

BR09 Quản lí trạng thái hoạt động của tài khoản người dùng

Chức năng quản lí tài khoản nhân viên

Bảng 46: Chức năng thêm tài khoản nhân viên

Use case name Thêm tài khoản nhân viên

 UseCase thay đổi trạng thái của các đơn hàng

 Nhân viên hoặc quản trị viên có thể cập nhật trạng thái của các đơn hàng

 Nhân viên, quản trị viên chọn “Orders”

 Thành công: cập nhật trạng thái đã thay đổi của đơn hàng, thông báo thành công

2 Chọn “Orders” Hiển thị trang quản lí đơn hàng

3 Chọn “Edit” đối với đơn hàng muốn thay đổi trạng thái Hiển thị form chi tiết đơn hàng

4 Chọn trạng thái muốn cập nhật cho đơn hàng

Trạng thái được chọn sẽ chuyển màu đen

5 Chọn “Update” Hiển thị thông báo thành công

Hình 46: Lược đồ hoạt động Tạo tài khoản nhân viên

Hình 47: Lược đồ tuần tự Tạo tài khoản nhân viên

5.10.4 Giao diện Quản lí tài khoản nhân viên

Hình 48: Giao diện quản lí tài khoản nhân viên

BR10 Đăng nhập với chức danh quản trị viên

Nhập thông tin tạo một tài khoản nhân viên mới

Chức năng quản lí đơn hàng

Bảng 47: Chức năng quản lí đơn hàng

Use case name Quản lí đơn hàng

 UseCase thay đổi trạng thái của các đơn hàng

 Nhân viên hoặc quản trị viên có thể cập nhật trạng thái của các đơn hàng

 Nhân viên, quản trị viên chọn “Orders”

 Thành công: cập nhật trạng thái đã thay đổi của đơn hàng, thông báo thành công

2 Chọn “Orders” Hiển thị trang quản lí đơn hàng

3 Chọn “Edit” đối với đơn hàng muốn thay đổi trạng thái Hiển thị form chi tiết đơn hàng

4 Chọn trạng thái muốn cập nhật cho đơn hàng

Trạng thái được chọn sẽ chuyển màu đen

5 Chọn “Update” Hiển thị thông báo thành công

Hình 49: Lược đồ hoạt động Quản lí đơn hàng

Hình 50: Lược đồ tuần tự Quản lí đơn hàng

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

Bảng 48: Mô tả giao diện quản lý đơn hàng

Hiển thị danh sách các đơn hàng

Nhấn để sang trang chi tiết đơn hàng và cập nhật trạng thái đơn hàng

Hình 52: Giao diện sửa trạng thái đơn hàng và chi tiết đơn hàng

Bảng 49: Mô tả giao diện sửa trạng thái đơn hàng và chi tiết đơn hàng

1 Trạng thái đơn hàng Chọn trạng thái đơn hàng

2 Lưu Nhấn để cập nhật đơn hàng

BR11 Đăng nhập với chức danh nhân viên

Xem thông tin các đơn đặt hàng Chỉnh sửa trạng thái đơn hàng để phù hợp tiến độ giao hàng

Chức năng thống kê theo sản phẩm

Bảng 50: Thống kê theo sản phẩm

Use case name Thống kê theo sản phẩm

 UseCase xem thống kê các sản phẩm bán chạy nhất theo tháng hoặc theo năm

 Quản trị viên xem thông tin thống kê các sản phẩm bán chạy nhất theo tháng hoặc năm để nắm bắt tình hình kinh doanh

 Quản trị viên chọn “Statistic”, chọn “Products”

 Quản trị viên đã đăng nhập

 Thành công: hiển thị biểu đồ thống kê và bảng thống kê theo thời gian đã chọn

Quản trị viên đăng nhập vào tài khoản

2 Chọn “Statistic” Mở rộng hai lựa chọn “Turn Over” và

3 Chọn “Products” Hiển thị form thống kê theo sản phẩm

4 Chọn thời gian thống kê theo tháng hoặc theo năm Thời gian hiển thị như đã chọn

Hiển thị biểu đồ thống kê các sản phẩm đã bán chạy theo thời gian và bảng thống kê chi tiết các sản phẩm đó

Hình 53: Lược đồ hoạt động Thống kê theo sản phẩm

Hình 54: Lược đồ tuần tự Thống kê theo sản phẩm

5.12.4 Giao diện Thống kê theo sản phẩm

Hình 55: Giao diện thống kê theo sản phẩm

Bảng 51: Mô tả giao diện thống kê doanh thu theo tháng

1 Chọn loại thời gian Chọn loại thời gian thống kê trong tháng hoặc trong năm

2 Thời gian thống kê Chọn thời gian thống kê

3 Nút thống kê Nhấn để thực hiện vẽ biểu đồ và bảng thống kê

4 Biểu đồ thống kê Thống kê các sản phẩm đã bán trong thời gian chọn

5 Bảng thống kê Thống kê theo bảng

Hình 56: : Giao diện thống kê doanh thu theo thời gian

Bảng 52: Giao diện thống kê doanh thu theo thời gian

1 Chọn loại thời gian Chọn loại thời gian thống kê ngày tháng năm

2 Thời gian thống kê Chọn thời gian bắt đầu và thời gian kết thúc

3 Nút thống kê Nhấn để thực hiện vẽ biểu đồ và bảng thống kê

4 Biểu đồ thống kê Thống kê doanh thu trong khoảng thời gian chọn

5 Bảng thống kê Thống kê theo bảng

BR12 Đăng nhập với vai trò quản trị viên

Thống kê doanh thu theo thời gian

- Người dùng chọn thời gian cần được thống kê

- Hệ thống sẽ thống kê doanh thu trong khoảng thời gian đã nhập Thống kê bán sản phảm theo thời gian

- Người dùng nhập thời gian (tháng hoặc năm) để thống kê sản phẩm bán nhiều của cửa hàng

Chức năng quản lí đồng hồ

Bảng 53: Thêm đồng hồ mới

Use case name Thêm đồng hồ mới

 Quản trị viên, nhân viên

 UseCase thực hiện việc thêm một sản phẩm đồng hồ mới vào cửa hàng

 Quản trị viên, nhân viên thêm sản phẩm đồng hồ mới

 Quản trị viên, nhân viên chọn “Products”

 Quản trị viên, nhân viên đã đăng nhập

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

Quản trị viên đăng nhập vào tài khoản

2 Chọn “Products” Hiển thị trang quản lý sản phẩm

3 Chọn “Add” Hiển thị trang thêm sản phẩm mới

Nhập các thông tin của sản phẩm mới ( tên, loại, thương hiệu, mô tả, hình ảnh…)

Hiển thị các thông tin nhập

5 Chọn “Submit” Thông báo thành công

1 Không nhập dữ liệu bắt buộc

Bảng 54: Chỉnh sửa thông tin sản phẩm đồng hồ

Use case name Chỉnh sửa thông tin sản phẩm đồng hồ

 UseCase thực hiện việc chỉnh sửa thông tin sản phẩm đồng hồ

 Quản trị viên, nhân viên chỉnh sửa thông tin sản phẩm

 Quản trị viên, nhân viên chọn “Products”, chọn “Edit”

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

1 Quản trị viên đăng nhập vào tài khoản

Hiển thị trang chỉnh sửa sản phẩm, hiển thị thông tin sản phẩm đang chỉnh sửa

Cập nhật các thông tin của sản phẩm ( tên, loại, thương hiệu, mô tả, hình ảnh…)

Hiển thị các thông tin nhập

5 Chọn “Submit” Thông báo cập nhật thành công

1 Không nhập dữ liệu bắt buộc

Use case name Xóa sản phẩm

 UseCase thực hiện việc xóa sản phẩm đồng hồ khỏi website

 Quản trị viên, nhân viên xóa sản phẩm đồng hồ khỏi website

 Quản trị viên, nhân viên chọn “Products”

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

1 Quản trị viên đăng nhập vào tài khoản

3 Chọn các sản phẩm muốn xóa trong danh sách

Những sản phẩm được chọn được thêm nền đen

5 Chọn “Delete” Thông báo cập nhật thành công

1 Sản phẩm đã được mua

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

Hình 57: Lược đồ hoạt động Thêm đồng hồ mới

Hình 58: Lược đồ hoạt động Chỉnh sửa sản phẩm

Hình 59: Lược đồ hoạt động Xóa sản phẩm

Hình 60: Lược đồ tuần tự Thêm sản phẩm

Hình 61: Lược đồ tuần tự Chỉnh sửa sản phẩm

Hình 62: Lược đồ tuần tự Xóa sản phẩm

5.13.4 Giao diện Quản lí đồng hồ

Hình 63: Giao diện quản lý đồng hồ Bảng 56: Mô tả giao diện quản lý đồng hồ

1 Khung tìm kiếm Nhập thông tin tìm kiếm

2 Tìm kiếm Nhấn để tìm kiếm theo đồng hồ

3 Lọc theo giới tính Nhấn để mở chọn lọc theo đồng hồ nam và nữ

4 Thêm đồng hồ Nhấn để chuyển sang trang thêm đồng hồ

5 Xóa đồng hồ Nhấn để thực hiện xóa các đồng hồ được chọn

6 Chọn đồng hồ xóa Chọn những đồng hồ muốn thực hiện xóa

7 Chỉnh sửa Nhấn để chuyển sang trang chỉnh sửa đồng hồ

Hình 64: Giao diện thêm đồng hồ Bảng 57: Mô tả giao diện thêm đồng hồ

1 Tên đồng hồ Nhập tên đồng hồ

2 Phân loại giới tính Chọn loại đồng hồ nam hoặc nữ

Nhập số lượng đồng hồ có trong kho

4 Giá đồng hồ Nhập giá kinh doanh đồng hồ

5 Thương hiệu Chọn thương hiệu cho đồng hồ

6 Mã đồng hồ Nhập số mã sản phẩm cho đồng hồ

7 Chất liệu Chọn chất liệu cho đồng hồ

8 Năng lượng Chọn năng lượng đồng hồ sử dụng

9 Kích thước Chọn kích thước cho đồng hồ

10 Độ chống nước Chọn mức độ chống nước của đồng hồ

11 Mô tả sản phẩm Nhập thông tin mô tả cho đồng hồ

12 Hình ảnh Hiển thị hình ảnh của đồng hồ

13 Nút thêm hình ảnh Nhấn để mở hộp thoại chọn hình ảnh cho đồng hồ

14 Nút thêm các hình phụ

Nhấn để mở hộp thoại chọn hình ảnh cho đồng hồ (có thể chọn nhiều hình ảnh cùng lúc)

15 Nút thêm sản phẩm mới

Nhấn để thực hiện lưu thông tin sản phẩm đồng hồ mới vào danh sách bán của cửa hàng

Hình 65: Giao diện sửa đồng hồ

Bảng 58: Mô tả giao diện sửa đồng hồ

1 Tên đồng hồ Nhập tên đồng hồ

2 Phân loại giới tính Chọn loại đồng hồ nam hoặc nữ

3 Số lượng trong kho Nhập số lượng đồng hồ có trong kho

4 Giá đồng hồ Nhập giá kinh doanh đồng hồ

5 Thương hiệu Chọn thương hiệu cho đồng hồ

6 Chất liệu Chọn chất liệu cho đồng hồ

7 Năng lượng Chọn năng lượng đồng hồ sử dụng

8 Kích thước Chọn kích thước cho đồng hồ

9 Độ chống nước Chọn mức độ chống nước của đồng hồ

10 Mô tả sản phẩm Nhập thông tin mô tả cho đồng hồ

11 Hình ảnh Hiển thị hình ảnh của đồng hồ

12 Nút thêm hình ảnh Nhấn để mở hộp thoại chọn hình ảnh cho đồng hồ

13 Nút thêm hình ảnh phụ Nhấn sẽ xóa toàn bộ hình ảnh phụ hiện tại để thêm hình ảnh mới

14 Xóa một hình ảnh phụ chỉ định

Nhấn để xóa hình ảnh đó khỏi danh sách

15 Nút chỉnh sửa sản phẩm Nhấn để thực hiện lưu thông tin sản phẩm đồng hồ đã chỉnh sửa

BR013 Bao gồm các chức năng quản lí căn bản một sản phẩm (thêm mới, cập nhật, xóa) Nhập các thông tin cần thiết khi thêm mới hoặc chỉnh sửa sản phẩm Khi xóa sản phẩm sẽ kiểm tra các ràng buộc với đơn hàng.

Chức năng tìm kiếm và lọc sản phẩm

Bảng 59: Tìm kiếm và lọc sản phẩm

Use case name Sử dụng chatbot

 Khách hàng sử dụng trang web

 UseCase cho phép người dùng sử chat bot để giao tiếp với nhân viên trực tuyến hoặc giao tiếp với chatbot đã được huấn luyện

 Tư vấn, hỗ trợ khách hàng sớm nhất có thể

 Khách hàng nhấn mở nút chatbot

 Khách hàng nhập nội dung muốn trao đổi vào nhấn gửi

 Thành công: Giao diện cập nhật tin nhắn của khách hàng, sau đó sẽ hiển thị trả lời của chatbot

Khách hàng nhấn nút chatbot ở góc phải dưới màn hình

Hiển thị cửa sổ chat

2 Nhập nội dung muốn trao đổi và gửi

Hiển thị tin nhắn vừa gửi, sau đó hiển thị nội dung trả lời của chatbot hoặc trả lời của nhân viên

Hình 66: Lược đồ hoạt động Tìm kiếm và lọc sản phẩm

Hình 67: Lược đồ tuần tự Tìm kiếm và lọc sản phẩm

5.14.4 Giao diện Tìm kiếm và lọc sản phẩm

Bảng 60: Giao diện Xem sản phẩm

1 Sort by Sắp xếp theo thứ tự lựa chọn

3 Prices Chọn giới hạn giá sản phẩm

5 Select Tiến hành lọc sản phẩm

6 Reset Xóa các điều kiện lọc

BR14 Khách hàng chọn các tùy chọn lọc sau đó nhấn Select để thực hiện lọc:

- Điều kiện giữa tùy chọn là AND

- Kết quả sau khi lọc sẽ được phân trang (mỗi trang 8 sản phẩm)

BR15 Khách hàng nhập từ khóa vào ô tìm kiếm:

- Sử dụng kỹ thuật text full search, debounce là 0.5s

- Tìm kiếm theo tên sản phẩm, nhãn hiệu, mô tả sản phẩm

- Danh sách các sản phẩm hiển thị dạng dropdown box Khi ấn Enter ô tìm kiếm:

- Kết quả tìm kiếm sẽ được phân trang (mỗi trang 8 sản phẩm)

Sử dụng chatbot

Use case name Tìm kiếm và lọc sản phẩm

 UseCase cho phép khách hàng sử dụng từ khóa, các tùy chọn có sẵn để tìm sản phẩm mong muốn

 Hiển thị danh sách sản phẩm phù hợp với nhu cầu khách hàng

 Khách hàng nhấn Products trên thanh điều hướng

 Khách hàng nhập nội dung tìm kiếm hoặc chọn các điều kiện để lọc sản phẩm

 Thành công: Hiển thị danh sách sản phẩm đáp ứng mong muốn của khách hàng

1 Khách hàng nhập nội dung tìm kiếm

Giao diện hiển thị popup tên các sản phẩm chứa từ khóa

2 Chọn điều kiện lọc có sẵn rồi nhấn nút Select Hiển thị các sản phẩm có phân trang

Hình 69: Lược đồ hoạt động Sử dụng chatbot

Hình 70: Lược đồ tuần tự Sử dụng chatbot

- Facebook chatbot chủ yếu trả lời 1 vài câu hỏi được tạo sẵn và nhân viên có thể giao tiếp với khách hàng thông qua Facebook chatbot

- Rasa chatbot được huấn luyện với dữ liệu do nhóm thiết kế có khả năng trao đổi với khách hàng một cách tự nhiên, cung cấp một số thông tin về nhu cầu khách hàng Khách hàng nhập nội dung muốn nhắn, chatbot sẽ tự động phản hồi dựa vào dữ liệu được huấn luyện.

Recommend sản phẩm

Bảng 62: Mô tả usecase Recommend

Use case name Chức năng gợi ý sản phẩm

 UseCase cho phép gợi ý sản phẩm liên quan những sản phẩm khách hàng quan tâm

 Hiển thị danh sách sản phẩm phù hợp với nhu cầu khách hàng

 Thành công: Hiển thị danh sách sản phẩm gợi ý liên quan đến khách hàng hoặc sản phẩm

 Thất bại: Không hiển thị sản phẩm

1 Khách hàng truy cập vào website bán hàng

Trên trang chủ hệ thống sẽ gợi ý những sản phẩm mà khách hàng quan tâm

2 Người dùng chọn vào xem chi tiết một sản phẩm

Hệ thống hiển thị các sản phẩm liên quan đến sản phẩm được xem

Hình 71: Lược đồ hoạt động Recommend theo người dùng

Hình 72: Lược đồ hoạt động Recommend theo sản phẩm

Hình 73: Lược đồ tuần tự Recommend theo sản phẩm

Hình 74: Lược đồ tuần tự Recommend theo người dùng

5.16.4 Giao diện Recommend sản phẩm

Hình 75: Giao diện Recommend sản phẩm

BR17 Sử dụng dịch vụ recommend của fpt để gợi ý các sản phảm tương đồng với sản phẩm khách hàng đang xem

Sử dụng dịch vụ recommend của fpt để gợi ý các sản phẩm đã được người dùng khác quan tâm thông qua dữ liệu thu thập từ người dùng

Đánh giá sản phẩm

Bảng 63: Chức năng đánh giá sản phẩm

Use case name Chức năng đánh giá

 Khách hàng sử dụng trang web, đã mua sản phẩm

 UseCase cho phép khách hàng đánh giá (bằng sao) với những sản phẩm đã mua trong một khoảng thời gian nhất định.

 Khách hàng đánh giá sản phẩm bằng sao

 Khách hàng chọn xem chi tiết các mặt hàng đã mua thành công và thực hiệu đánh giá

 Khách hàng khách hàng đã mua sản phẩm thành công, trong khoảng thời gian cho phép đánh giá và chưa đánh giá sản phẩm của đơn hàng này

 Thành công: Hiển thị số sao đánh giá

1 Khách hàng chọn xem chi tiết các sản phẩm đã mua và nhận hàng

Giao diện chi tiết sản phẩm và hiển thị “Rate now”

2 Người dùng chọn số sao muốn đánh giá Hiển thị số sao và đã đánh giá và lưu vào cơ sở dữ liệu

Hình 76: Lược đồ hoạt động Chức năng đánh giá sản phẩm

Hình 77: Lược đồ tuần tự

5.17.4 Giao diện Đánh giá sản phẩm

BR18 Sau khi người dùng thực hiện mua hàng thành công, người dùng có thể tham gia đánh giá sao cho sản phẩm, thời hạn là 7 ngày từ sau khi mua hàng

Sau khi đánh giá, số sao của sản phẩm là trung bình số sao của các lượt đánh giá

Nếu người dùng mua một sản phẩm liên tục và chưa thực hiện đánh giá cho các lần mua trước đó, thì khách hàng chỉ có thể đánh giá cho lần mua gần nhất

QUẢN LÍ DỰ ÁN VÀ TIẾN ĐỘ

Quản lí rủi ro

- Nhằm hỗ trợ, thúc đẩy phần mềm hoàn thành đúng thời hạn, bảo đảm chất lượng Việc quản lý rủi ro sẽ góp phần ngăn chặn những hiện tượng gây ảnh hưởng tiêu cực đến dự án

Rủi ro Ảnh hưởng Mô tả

Dự án Tính năng yêu cầu vượt quá khả năng để có thể hoàn thành trong thời gian làm dự án

Dự án Các thiết bị hỗ trợ lập trình, máy tính, laptop có khả năng bị hư hỏng trì hoãn tiến độ công việc Tính năng phức tạp

Dự án Nhiều tính năng có độ phức tạp cao làm mất thời gian và nhiều tài nguyên Xung đột nội bộ Dự án Các thành viên trong đội có thể có nhiều mâu thuẫn trong đời sống và có thể ảnh hưởng đến dự án Tìm hiểu công nghệ mới

Dự án và sản phẩm

Các thành viên sẽ phải cần thêm hơn thời gian so với dự tính để tìm hiểu thêm về công nghệ mới

Rủi ro Xác suất xảy ra Mức độ ảnh hưởng

Kiến thức hạn hẹp nên nhiều giai đoạn bị trì hoãn

Hư hỏng phần cứng Trung bình Nghiêm trọng

Tính năng phức tạp Cao Nghiêm trọng

Xung đột nội bộ Trung bình Nghiêm trọng

Tìm hiểu công nghệ mới

6.1.3 Phương án xử lí dự kiến

Kiến thức hạn hẹp Tra cứu google, stackoverflow, hỏi giảng viên

Hư hỏng phần cứng Nhanh chóng sửa chữa và thông báo với các thành viên khác để tìm giải pháp hợp lý Tính năng phúc tạp Trao đổi với khách hàng về việc thêm thời gian, cũng như cần đầu tư nghiên cứu thêm để có thể hoàn thành tính năng đó Xung đột nội bộ Cần có những buổi họp chung của đội, để từng cá nhân nêu ra nguyên nhân và mức độ của sự việc, nhằm tìm cách giải quyết để hoàn thành xong dự án

Công nghệ mới Thông báo cho nhóm để tìm hiểu đã có thành viên nào từng sử dụng công nghệ đấy, nếu chưa thì có thể ước lượng thời gian tìm hiểu để điều chỉnh kế hoạch

Kế hoạch quản lí

- Dự án được chia làm 3 giai đoạn 1.0, 1.1, 2.0

- Giai đoạn 1.0 từ bắt đầu từ ngày 12/9/2021 đến ngày 22/9/2021, cần phải hoàn thành các nhiệm vụ: nghiên cứu chức năng của hệ thống, xây dựng CSDL, các ràng buộc liên quan

- Giai đoạn 1.1 từ ngày 23/9/2021 đến ngày 28/11/2021, các nhiệm vụ gồm: hoàn thành thiết kế giao diện, gọi api xử lí các chức năng cơ bản của hệ thống, liên kết client và server bằng api

- Giai đoạn 2.0 từ ngày 19/3/2022 đến ngày 18/6/2022: cập nhật các chức năng mới, cải tiến các chức năng cũ của hệ thống

Bảng 64: Bảng mô tả nhiệm vụ

STT Yêu cầu Giải thích

1 Xây dựng CSDL Thiết kế database các ràng buộc

2 Giao diện trang khách hàng

Thiết kế giao diện trang chủ, trang sản phẩm, trang thanh toán,…

3 Thiết kế giao diện trang admin

Thiết kế giao diện các trang quản lí (sản phẩm, đơn hàng, thương hiệu, thống kê,…)

4 Xây dựng api quản lí sản phẩm

Viết các api truy vấn, xử lí nghiệp vụ với database đối với sản phẩm

5 Xây dựng api quản lí mua hàng

Viết api xử lí dữ liệu với chức năng liên quan đến mua hàng

6 Xây dựng api thanh toán Stripe

7 Gọi api quản lí tài Các api quản lí thông tin người dùng, quản lí

156 khoản tài khoản khách hàng, nhân viên

8 Liên kết client và backend bằng api

Liên kết truyền dữ liệu, phản hồi giữa phần client (frontend – giao diện người dùng) và server (xử lí dữ liệu)

Thêm thanh toán khi mua hàng bằng Zalopay

Thêm nhắn tin với trang website thông qua facebook

11 Thêm tính năng voucher Đưa ra chương trình mã giảm giá cho đơn hàng

12 Thêm tính năng đánh giá, full text search

Người dùng có thể đánh giá (sao) cho sản phẩm khi đã mua hàng thành công

Tìm kiếm sản phẩm theo từ khóa

13 Thêm tính năng đề xuất sản phẩm liên quan Thực hiện đề xuất, gợi ý các sản phẩm liên quan đến sản phẩm người dùng đang xem

14 Tracking người dùng, đề xuất sản phẩm cho người dùng

Thu thập dữ liệu sản phẩm người dùng quan tâm và thực hiện đề xuất những sản phẩm tương tự

15 Xây dựng rasa chatbot Xây dựng hệ thống chatbot tự động, đáp ứng nhu cầu tìm hiểu thêm thông tin cơ bản về

16 Kiểm thử Kiểm tra lỗi

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

Cài đặt

 SQL Server – Cơ sở dữ liệu

 GitHub – Quản lý source code

 Bước 1: git clone -b deploy https://github.com/NguyenDucHoa/WatchWebsite_TLCN.git

 Bước 2: Mở file WatchWebsite_TLCN.sln trong folder WatchWebsite_TLCN Cấu hình sslPort là 44336 trong file launchSetting.json (nếu port khác 44336)

 Bước 3: Run project  Hoàn thành run backend

 Bước 4: Mở folder client bằng Visual studio code

 Bước 5: Mở Terminal  npm install  npm start  Hoàn thành run frontend

 Bước 6: Mở folder rasa-chatbot bằng Visual studio code

 Bước 7: Mở Terminal -> rasa run enable-api cors "*"

 Bước 8: Mở Terminal khác -> rasa run actions

 Bước 9: Hoàn thành cài đặt và run Có thể sử dụng

 Visual studio 2019 (đã cài đặt gói ASP.NET and web development)

 Android link: https://docs.zalopay.vn/downloads/zalopay- sandbox/android/ZaloPay-sandbox-react-release-v6.10.0.apk

 Ios link: https://stcstg.zalopay.com.vn/ps_res/ios/enterprise/sandboxmer/6.8.2/install.ht ml

 Vào đường dẫn: https://sbmc.zalopay.vn/apps: Tài khoản 0925226173, Mật khẩu Z@lopay123

 Chính sửa thông tin app có id là 2553

 App Callback Url điền https://kltn- watchwebsite.herokuapp.com/api/zalopay/callback

 App Redirect Url điền https://minimix-watch-shop.surge.sh/orderHistory

Đường dẫn trang quản trị viên, nhân viên

 Link: https://minimix-watch-shop.surge.sh/secretroute/login

 Tài khoản quản trị viên: admin – password: admin

 Tài khoản nhân viên: – password:

Đường dẫn website

 Link: https://minimix-watch-shop.surge.sh

Kiểm thử

Bảng 65: Test Case hệ thống

Username hợp lệ, Password hợp lệ

Người dùng chọn chức năng đăng nhập http://minim ix-watchshop.surge.s h/login

123 Đăng nhập thành công Đăng nhập thành công

Username không hợp lệ, Password hợp lệ

Người dùng chọn chức năng đăng nhập

Thông báo đăng nhập không thành công

Username hợp lệ, Password không hợp lệ

Username không hợp lệ, Password không hợp lệ

Thông báo người dùng nhập Userna me, Passw ord

Thông báo người dùng nhập Userna me, Passwor d

Người dùng chọn chức năng Quên mật khẩu

Hiển thị thông báo gửi mail thành công

Người dùng chọn chức năng Quên mật khẩu

Thông báo email không hợp lệ

Người dùng đã đăng nhập

Hiển thị bình luận vừa thêm

Nội dung chỉ là các khoảng trắng

Disabl e nút Add comm ent

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

Thêm sản phẩm chưa có trong giỏ hàng

"Choose" trên hình ảnh sản phẩm

Thông báo số sản phẩm trong giỏ hàng tăng 1

Thêm sản phẩm đã có trông giỏ hàng

Người dùng đã đăng nhập, có sản phẩm

Số sản phẩm trong giỏ hàng không

Số sản phẩm trong giỏ hàng không tăng, số

162 trong giỏ hàng ảnh sản phẩm tăng, số lượng sản phẩm đó tăng thêm 1 lượng sản phẩm đó tăng thêm 1

Nhập số lượng lớn hơn 0 và không vượt quá số lượng trong kho

Sản phẩm được thêm vào giỏ hàng với số lượng là 2

Nhập số lượng vượt quá số sản phẩm trong kho

2 Xem chi tiêt sản phẩm

Số lượng đổi thành số lượng

4 Nhấn "Add to cart" có trong kho của sản phẩm có trong kho của sản phẩm

Không nhập thông tin card Đăng nhập và có sản phẩm trong giỏ hàng

Không thể nhấn nút "Pay now"

Nhập số card thanh toán sai Đăng nhập và có sản phẩm trong giỏ hàng

"Your card numbe r is incom plete."

"Your card number is incompl ete."

Nhập thời hạn sai Đăng nhập và có sản phẩm trong giỏ hàng

Không nhập số CVC Đăng nhập và có sản phẩm trong giỏ hàng

Thông báo chưa nhập số CVC

Không nhập mã ZIP Đăng nhập và có sản phẩm trong giỏ hàng

Thông báo chưa nhập mã ZIP

Nhập thông tin card đầy đủ Đăng nhập và có sản phẩm trong giỏ hàng

Hiện trang thông báo thanh toán thành công

Không nhập nội dung Đăng nhập admin

Tên là các khoảng trắng Đăng nhập admin

3 Nhấn Submit khoảng trắng) thất bại thêm thất bại

Add brand không chọn hình ảnh Đăng nhập admin

Không chọn hình ảnh Tên:

Nhập thông tin đầy đủ Đăng nhập admin

Thông báo lưu thành công

Nhập thông tin không khớp với dữ liệu Đăng nhập admin

2 Nhập thông tin tìm kiếm

3 Chọn tìm kiếm hoặc nhấn enter

Bảng danh sách tài khoản khách hàng trống

Nhập thông tin giống với kết quả Đăng nhập admin

Hiển thị danh sách tài khoản có thông tin

Hiển thị danh sách tài khoản có thông tin "Duc Huy"

Nhập thông tin giống một phần kết quả Đăng nhập admin

Hiển thị dánh sách tài khoản có thông tin chứa

Nhập thông tin có độ dài lớn Đăng nhập admin

"qưertyuio pqwertyuio pqwertyuio pqwertyuio pqwertyuio pqwertyuio pqwertyuio p"

Hiển thị danh sách chứa thông tin tìm kiếm

Nhập thông tin chữ hoa, chữ thường Đăng nhập admin

"Huy" không phân biệt hoa

"Huy" không phân biệt hoa thường

Không nhập giá trị Đăng nhập admin

Hiển thị tất cả tài khoản

Tìm kiếm bởi dấu cách Đăng nhập admin

Hiển thị tất cả tài khoản

Ưu điểm

4 Đề nghị cho bảo vệ hay không?

Tp Hồ Chí Minh, ngày tháng năm 2022

Giáo viên hướng dẫn ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh phúc

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên sinh viên: Nguyễn Đức Hòa MSSV: 18110290

Họ và tên sinh viên: Lê Trần Đức Huy MSSV: 18110292

Ngành: Công nghệ thông tin

Tên đề tài: Tìm hiểu công nghệ ReactJs, ASP NET core api và xây dựng website bán đồng hồ

Họ và tên giáo viên phản biện: TS Lê Vĩnh Thịnh

1 Về nội dung đề tài và khối công việc thực hiện:

4 Đề nghị cho bảo vệ hay không?

Tp Hồ Chí Minh, ngày tháng năm 2022

Trường ĐH Sư Phạm Kỹ Thuật TP.HCM

Khoa: Công Nghệ Thông Tin ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP

Họ và Tên SV thực hiện 1: Nguyễn Đức Hòa MSSV: 18110290

Họ và Tên SV thực hiện 2: Lê Trần Đức Huy MSSV: 18110292

Thời gian làm luận văn: Từ: 10/03/2022 Đến: 20/06/2022

Chuyên ngành: Công nghệ phần mềm

Tên đề tài: Tìm hiểu công nghệ ReactJs, ASP NET core api và xây dựng website bán đồng hồ

GV hướng dẫn: TS Huỳnh Xuân Phụng

Nhiệm vụ của đề tài:

1 Tìm hiểu công nghệ ASP.NET CORE

2 Tìm hiểu công nghệ ReactJS

3 Xây dựng website bán đồng hồ Đề cương viết luận văn:

MỤC LỤC LỜI CẢM ƠN PHỤ LỤC BẢNG PHỤ LỤC HÌNH

1 Lý do chọn đề tài 3

3 Mục đích, nhiệm vụ của đề tài 6

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 8

Ngôn ngữ C# là gì? 8 Đặc trưng của ngôn ngữ 8 Ưu điểm của C# 8

ASP.NET Core là gì? 9

Sơ lược về lịch sử ASP.NET Core 10 Ưu điểm của ASP.NET Core 10

Sự khác biệt quan trọng giữa ASP.NET với ASP.NET Core 11

Reactjs là gì? 12 Ưu điểm 12

Ant design là gì? 13 Ưu điểm 13

CHƯƠNG 2: MÔ TẢ YÊU CẦU 17

2.1 Tổng quan quy trình nghiệp vụ 17

2.2 Quy trình quản lí đơn hàng 17

2.3 Quy trình người dùng mua hàng 18

2.4 Quy trình giám sát kho 19

2.5 Quy trình quản lí kho 20

3.4 Giả thiết và ràng buộc 29

CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 35

4.2 Phân tích hệ thống và danh sách chức năng 35

4.2.1 Chức năng phía Khách hàng 36

4.2.2 Chức năng phía Nhân viên, quản trị viên 40

4.2.3 Chức năng phía Quản trị viên 42

4.2.2 Mô hình cơ sở dữ liệu 46

CHƯƠNG 5: ĐẶC TẢ CÁC CHỨC NĂNG 60

5.3 Chức năng quên mật khẩu 69

5.3.4 Giao diện Quên mật khẩu 72

5.4.4 Giao diện trang thanh toán 77

5.5 Chức năng thêm giỏ hàng 82

5.5.4 Giao diện thêm giỏ hàng 85

5.6.4 Giao diện Chức năng bình luận 93

5.7 Chức năng thay đổi thông tin 94

5.7.4 Giao diện Cập nhật thông tin 97

5.8 Chức năng xem lịch sử mua hàng 99

5.8.4 Giao diện Lịch sử mua hàng 101

5.9 Chức năng quản lí tài khoản khách hàng 102

5.9.4 Giao diện Quản lí tài khoản khách hàng 105

5.10 Chức năng quản lí tài khoản nhân viên 105

5.10.4 Giao diện Quản lí tài khoản nhân viên 109

5.11 Chức năng quản lí đơn hàng 110

5.12 Chức năng thống kê theo sản phẩm 115

5.12.4 Giao diện Thống kê theo sản phẩm 118

5.13 Chức năng quản lí đồng hồ 121

5.13.4 Giao diện Quản lí đồng hồ 130

5.14 Chức năng tìm kiếm và lọc sản phẩm 134

5.14.4 Giao diện Tìm kiếm và lọc sản phẩm 137

5.16.4 Giao diện Recommend sản phẩm 147

5.17.4 Giao diện Đánh giá sản phẩm 151

CHƯƠNG 6: QUẢN LÍ DỰ ÁN VÀ TIẾN ĐỘ 152

6.1.3 Phương án xử lí dự kiến 153

CHƯƠNG 7: CÀI ĐẶT VÀ KIỂM THỬ 157

7.2 Đường dẫn trang quản trị viên, nhân viên: 159

1 Những kết quả đạt được 168

LỜI CẢM ƠN Được sự phân công khoa Công Nghệ Thông Tin, Trường Đại Học Sư Phạm Kỹ Thuật TPHCM, sau hơn bốn tháng chúng em đã hoàn thành Khóa luận tốt nghiệp Công nghệ phần mềm năm 2022

Em xin chân thành cảm ơn Thầy – Huỳnh Xuân Phụng, người đã tận tình giảng dạy, chi tiết để em có đủ kiến thức và vận dụng chúng vào bài Khóa luận tốt nghiệp này Mặc dù thầy bận công tác nhưng không ngần ngại chỉ dẫn chúng em, định hướng đi cho em, để chúng em hoàn thành tốt nhiệm vụ

Tuy nhiên vì kiến thức chuyên môn còn hạn chế và bản thân còn thiếu sót nhiều kinh nghiệm thực tiễn nên nội dung của báo cáo không tránh khỏi những sai sót, chúng em rất mong nhận sự góp ý, chỉ bảo và phê bình từ phía Thầy hướng dẫn – Huỳnh Xuân Phụng và Thầy phản biện – TS Lê Vĩnh Thịnh để bài khóa luận tốt nghiệp được hoàn thiện hơn

Nhóm thực hiện xin chân thành cảm ơn

Nhóm sinh viên thực hiện:

Website thương mại điện tử đã không còn quá xa lạ với mọi người nhất là trong thời đại công nghệ phát triển như hiện nay Vì sao web thương mại điện tử lại được ưa chuộng đến thế? Đầu tiên không thể không nhắc đến sự tiện lợi, bạn có thể mua hàng mọi lúc mọi nơi qua đồng hồ và được vận chuyển đến tận nhà mà không cần phải đi đến cửa hàng Trên những web thương mại điện tử đa phần đều thể hiện rõ hàng hình ảnh, giá cả, thông tin sản phẩm rất chi tiết rõ ràng và xử lý đơn hàng cũng rất nhanh và chính xác Điều đó tạo cho khách hàng sự hài lòng, thoải mái khi mua hàng

Với lí do đó, nhóm em quyết định chọn đề tài xây dựng một trang web thương mại điện tử, cụ thể là một trang web bán đồng hồ Trang web cơ bản có đủ những chức năng chính như đăng ký, đăng nhập, đặt hàng, khôi phục mật khẩu, tìm kiếm, quản lý của admin dù còn nhiều hạn chế

Website có một số chức năng:

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

 Chức năng recommend sản phẩm

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

Những công cụ được sử dụng:

 Giao diện: HTML, CSS, JavaScript

 Cơ sở dữ liệu: SQL Server

 Recommend sản phẩm: FPT Recommend

Bảng 1: Bảng lịch sử cập nhật 1

Bảng 2: Sự khác nhau quan trọng giữa ASP.NET với ASP.NET Core 11

Bảng 3: Bảng ma trận quyền 28

Bảng 4: Giả thiết, ràng buộc, rủi ro 29

Bảng 5: Chức năng phía khách hàng 36

Bảng 6: Chức năng phía nhân viên, quản trị viên 40

Bảng 7: Chức năng phía Quản trị viên 42

Bảng 25: Bảng use case Đăng nhập 60

Bảng 26: Giao diện trang Đăng nhập 63

Bảng 27: Mô tả giao diện đăng nhập Admin 63

Bảng 28: Giao diện trang Đăng ký 68

Bảng 29: Bảng usecase Quên mật khẩu 69

Bảng 30: Bảng usecase Thanh toán 73

Bảng 31: Giao diện giỏ hàng 79

Bảng 33: Giao diện Thanh toán 80

Bảng 34: Bảng usecase Thêm giỏ hàng 82

Bảng 35: Giao diện Xem sản phẩm 86

Bảng 36: Giao diện chi tiết sản phẩm 87

Bảng 37: Giao diện giỏ hàng 89

Bảng 38: Bảng usecase Bình Luận 90

Bảng 39: Bảng usecase Thay đổi thông tin 94

Bảng 40: Giao diện Cập nhật thông tin 98

Bảng 41: Bảng usecase Lịch sử mua hàng 99

Bảng 42: Giao diện Lịch sử mua hàng 101

Bảng 43: Giao diện đơn hàng chi tiết 102

Bảng 44: Chức năng quản lí tài khoản khách hàng 102

Bảng 45: Mô tả giao diện quản lý tài khoản 105

Bảng 46: Chức năng thêm tài khoản nhân viên 106

Bảng 47: Chức năng quản lí đơn hàng 110

Bảng 48: Mô tả giao diện quản lý đơn hàng 114

Bảng 49: Mô tả giao diện sửa trạng thái đơn hàng và chi tiết đơn hàng 114

Bảng 50: Thống kê theo sản phẩm 115

Bảng 51: Mô tả giao diện thống kê doanh thu theo tháng 119

Bảng 52: Giao diện thống kê doanh thu theo thời gian 120

Bảng 53: Thêm đồng hồ mới 121

Bảng 54: Chỉnh sửa thông tin sản phẩm đồng hồ 122

Bảng 56: Mô tả giao diện quản lý đồng hồ 130

Bảng 57: Mô tả giao diện thêm đồng hồ 131

Bảng 58: Mô tả giao diện sửa đồng hồ 133

Bảng 59: Tìm kiếm và lọc sản phẩm 135

Bảng 60: Giao diện Xem sản phẩm 138

Bảng 62: Mô tả usecase Recommend 143

Bảng 63: Chức năng đánh giá sản phẩm 148

Bảng 64: Bảng mô tả nhiệm vụ 155

Bảng 65: Test Case hệ thống 159

Hình 1: Mô tả cấu trúc Unit of Work 15Hình 2: Tổng quan quy trình nghiệp vụ 17Hình 3: Hình ảnh website Watchshop 22Hình 4: Trang chủ website đồng hồ Hải Triều 24Hình 5: Trang web FridaysShopping 25Hình 6: Sơ đồ tổng quan trang người dùng 26Hình 7: Sơ đồ tổng quan trang quản lí 28Hình 8: Cấu trúc hệ thống 36Hình 9: Sơ đồ ERD 45Hình 10: Mô hình cơ sở dữ liệu 46Hình 11: Lược đồ hoạt động Đăng nhập 61Hình 12: Lược đồ tuần tự Đăng nhập 62Hình 13: Giao diện trang đăng nhập 62Hình 14: Giao diện đăng nhập Admin 63Hình 15: Lược đồ hoạt động Đăng kí 66Hình 16: Lược đồ tuần tự Đăng kí 67Hình 17: Trang đăng kí 68Hình 18: Lược đồ hoạt động Quên mật khẩu 71Hình 19: Lược đồ tuần tự Quên mật khẩu 72Hình 20: Trang Quên mật khẩu 72Hình 21: Lược đồ hoạt động thanh toán Stripe 75Hình 22: Thanh toán ZaloPay 76Hình 23: Lược đồ tuần tự Thanh toán Stripe 77Hình 24: Thanh toán ZaloPay 77Hình 25: Giao diện giỏ hàng 78Hình 26: Trang Checkout 79Hình 27: Trang thanh toán 80Hình 28: Lược đồ hoạt động Thêm giỏ hàng 84Hình 29: Lược đồ tuần tự Giỏ hàng 85Hình 30: Xem sản phẩm 86Hình 31: Trang chi tiết sản phẩm 87Hình 32: Giao diện giỏ hàng 89Hình 33: Lược đồ hoạt động Bình luận 92Hình 34: Lược đồ tuần tự Bình luận 93Hình 35: Giao diện Chức năng bình luận 93Hình 36: Lược đồ hoạt động Thay đổi thông tin 96Hình 37: Lược đồ tuần tự Thay đổi thông tin 97Hình 38: Trang cập nhật thông tin 98Hình 39: Lược đồ hoạt động Xem lịch sử mua hàng 100Hình 40: Lược đồ tuần tự Xem lịch sử mua hàng 101Hình 41: Trang lịch sử mua hàng 101

Hình 42: Trang chi tiết đơn hàng 102 Hình 43: Lược đồ hoạt động Quản lí tài khoản khách hàng 104 Hình 44: Lược đồ tuần tự Quản lí tài khoản khách hàng 104 Hình 45: Giao diện quản lý tài khoản 105 Hình 46: Lược đồ hoạt động Tạo tài khoản nhân viên 108 Hình 47: Lược đồ tuần tự Tạo tài khoản nhân viên 109 Hình 48: Giao diện quản lí tài khoản nhân viên 109 Hình 49: Lược đồ hoạt động Quản lí đơn hàng 112 Hình 50: Lược đồ tuần tự Quản lí đơn hàng 113 Hình 51: Giao diện quản lý đơn hàng 113 Hình 52: Giao diện sửa trạng thái đơn hàng và chi tiết đơn hàng 114 Hình 53: Lược đồ hoạt động Thống kê theo sản phẩm 117 Hình 54: Lược đồ tuần tự Thống kê theo sản phẩm 118 Hình 55: Giao diện thống kê theo sản phẩm 119 Hình 56: : Giao diện thống kê doanh thu theo thời gian 120 Hình 57: Lược đồ hoạt động Thêm đồng hồ mới 126 Hình 58: Lược đồ hoạt động Chỉnh sửa sản phẩm 127 Hình 59: Lược đồ hoạt động Xóa sản phẩm 128 Hình 60: Lược đồ tuần tự Thêm sản phẩm 129 Hình 61: Lược đồ tuần tự Chỉnh sửa sản phẩm 129 Hình 62: Lược đồ tuần tự Xóa sản phẩm 130 Hình 63: Giao diện quản lý đồng hồ 130 Hình 64: Giao diện thêm đồng hồ 131

Hình 65: Giao diện sửa đồng hồ 133Hình 66: Lược đồ hoạt động Tìm kiếm và lọc sản phẩm 136Hình 67: Lược đồ tuần tự Tìm kiếm và lọc sản phẩm 137Hình 68: Xem sản phẩm 138Hình 69: Lược đồ hoạt động Sử dụng chatbot 141Hình 70: Lược đồ tuần tự Sử dụng chatbot 142Hình 71: Lược đồ hoạt động Recommend theo người dùng 145Hình 72: Lược đồ hoạt động Recommend theo sản phẩm 146Hình 73: Lược đồ tuần tự Recommend theo sản phẩm 146Hình 74: Lược đồ tuần tự Recommend theo người dùng 147Hình 75: Giao diện Recommend sản phẩm 147Hình 76: Lược đồ hoạt động Chức năng đánh giá sản phẩm 150Hình 77: Lược đồ tuần tự 151

Bảng 1: Bảng lịch sử cập nhật

Date Version Author Reviewer Approver Change Description

Huy GVHD GVHD Deploy sản phẩm

Huy GVHD GVHD Tích hợp thanh toán Zalo pay, tích hợp chat bot Facebook

Huy GVHD GVHD Thêm tính năng sử dụng voucher

Thêm chức năng đánh giá sản phẩm

Tạo QR code cho sản phẩm Tích hợp tìm kiếm (text full search) theo nhãn hiệu, tên sản phẩm, mô tả

Sửa lỗi zalo Đề xuất sản phẩm liên quan Thêm nhiều hình ảnh cho mỗi sản phẩm

Tracking người dùng, sử dụng dữ liệu tracking để đề xuất sản phẩm Sửa lỗi giao diện trang admin

21/5/2022 4.1.0 Huy Hòa Hòa Chọn địa chỉ trên bản đồ

Huy Hòa, Huy Hòa, Huy Xây dựng rasa chatbot và tích hợp vào website

1 Lý do chọn đề tài

- Với sự phát triển như hiện nay, công nghệ thông tin có một vai trò vô cùng quan trọng

Nó có mặt ở hầu hết các lĩnh vực như kinh tế, giáo dục, y học, an ninh đời sống… mỗi lĩnh vực sẽ có một vị trí riêng Sản phẩm của công nghệ thông tin trong đời sống là rất nhiều có thể kể đến như robot, bảo mật, trang web thương mại điện tử… được xây dựng nhằm đáp ứng nhu cầu của con người Chính vì công nghệ thông tin quan trọng, phát triển không ngừng mà đòi hỏi lập trình viên phải không ngừng học hỏi, trau dồi kiến thức, nâng cao kỹ năng và luôn cập nhật những công nghệ mới

- Tính đến năm 2021, đã có hàng loạt ngôn ngữ lập trình gắn liền với các công nghệ được ra đời PHP, Python, Java, C#, C++ vẫn là những ngôn ngữ có sức ảnh hưởng lớn trong ngành lập trình

- Cập nhật tình hình như trên, ở bài Khóa luận tốt nghiệp này, em quyết định sử dụng ngôn ngữ C# với công nghệ ASP.NET core và Reactjs để xây dựng một trang web bán đồng hồ giúp cho khách hàng có thể mua ở mọi lúc mọi nơi, tiện lợi, dễ dàng, nhanh chóng

Mục đích chung/Giới thiệu tổng quan - Tìm hiểu về công nghệ ASP.NET Core với ngôn ngữ chính là C#

Mục tiêu/Hiệu quả kỳ vọng của dự án - Cung cấp giải pháp bán hàng qua mạng hiệu quả hơn so với buôn bán truyền thống

- Hỗ trợ quản lý sản phẩm, doanh thu một cách nhanh chóng, thân thiện

- Hỗ trợ tư vấn khách hàng về thông tin sản phẩm, dịch vụ

- Giảm thiểu chi phí về mặt bằng, cơ sở vật chất

- Tiếp cận khách hàng rộng hơn

- Giảm thiểu số lượng nhân viên vận hành, quản lý

- Người quản lí cửa hàng

- Nhân viên của cửa hàng

Phạm vi dự án - Các chức năng phía khách hàng: đăng kí, đăng nhập, xem chi tiết sản phẩm, cập nhật thông tin cá nhân, mua hàng, thanh toán, quản lí đơn hàng đã mua,…

- Các chức năng phía admin và nhân viên: quản lí đơn hàng, quản lí tài khoản khách hàng, quản lí sản phẩm, xem thống kê,…

Các milestone - Thiết kế cơ sở dữ liệu: 22/9/2021

- Xây dựng các api thanh toán Stripe:

- Liên kết client và backend bằng api:

3 Mục đích, nhiệm vụ của đề tài

- Tìm hiểu về công nghệ ASP.NET Core với ngôn ngữ chính là C#

- Tìm hiểu về ASP.NET Core

- Tìm hiểu về các xây dựng một trang web bán đồng hồ qua các tài liệu trên internet

- Phát triển trang web bán đồng hồ với các chức năng: mua bán đồng hồ, quản lý thương hiệu, quản lý tài khoản, quản lý đồng hồ, quản lý đơn hàng, đăng nhập, đăng ký, khôi phục mật khẩu

- Đầu tiên chúng em tìm hiểu từ lý thuyết với những tài liệu về ASP.NET Core, lớp học trực tuyến cũng như những video hướng dẫn trên youtube

- Thực hiện những đoạn code nhỏ cơ bản dần làm quen với cách lập trình mới

- Tham khảo những trang web thương mại trên internet đặc biệt là những trang bán đồng hồ để ứng dụng vào trang web của mình

- Lên kế hoạch xây dựng trang web bán đồng hồ:

 Liệt kê chức năng cần thực hiện

 Thiết kế cơ sở dữ liệu và nhập liệu

 Tiến hành thiết kế giao diện

 Kiểm thử và chỉnh sửa

Trong thời gian thực hiện trang web bán đồng hồ, nếu có thắc mắc gì nhóm sẽ tham khảo nguồn tài liệu từ internet và giáo viên hướng dẫn cố gắng hoàn thiện trang web dù còn nhiều hạn chế

- Về lý thuyết: Hiểu được về thành phần, cấu trúc, cách thức hoạt động của ASP.NET Core, Reactjs

- Về thực hành: Xây dựng một trang web bán đồng hồ sử dụng công nghệ ASP.NET Core API dùng làm server và client sử dụng công nghệ Reactjs với giao diện chức năng dễ sử dụng cho người dùng và giao diện quản lý Admin đơn giản

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

- C sharp (được viết tắt C#): Là một trong những ngôn ngữ lập trình theo hướng đối tượng được phát triển và ra mắt do Anders Hejlsberg phát triển vào năm

Nhược điểm

- Chưa ngăn spam bình luận, lọc bình luận nội dung nhạy cảm

- Chưa có chức năng yêu thích

- Chưa tối ưu tối ưu hóa tốc độ phản hồi

Định dạng
Số trang	195
Dung lượng	14,1 MB