xây dựng website thương mại điện tử về đồ secondhand

Đối với người quản lý: - Khả năng tra cứu, cập nhật, thống kê, và báo cáo về sản phẩm, nhà sản xuất, thông tin khách hàng, hóa đơn, thuế được thực hiện một cách thuận tiện.. ₋ Có nhiều

TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Trong bối cảnh thị trường kinh doanh ngày nay, sự cạnh tranh ngày càng trở nên khốc liệt, và hầu hết các doanh nghiệp, đặc biệt là các công ty lớn đều đặt sự ưu tiên cao vào việc cung cấp dịch vụ tốt nhất cho khách hàng

Trên con đường phát triển kinh doanh trong thế kỷ 21, thương mại điện tử đã trở thành một xu hướng phổ biến, với chi phí thấp hơn và hiệu quả cao hơn so với kinh doanh truyền thống Sự tiện lợi của việc truyền tải thông tin sản phẩm qua Internet, kết hợp với dịch vụ giao hàng tận nơi và các phương thức thanh toán linh hoạt từ tiền mặt đến các ví điện tử, đã tạo ra một môi trường mua sắm thuận lợi

Chính vì lẽ đó, xuất hiện các trang web chuyên bán đồ secondhand trực tuyến, mang lại cho người tiêu dùng khả năng mua sắm quần áo đã qua sử dụng mọi nơi mà không cần phải di chuyển đến nơi cụ thể Nhận thức được nhu cầu này, nhóm của chúng em đã quyết định lựa chọn đề tài “Xây dựng website thương mại điện tử về đồ secondhand.” Mục tiêu của chúng em là tạo ra một trang web có tính ứng dụng cao trong thực tế, kết hợp với việc học hỏi và áp dụng kiến thức về sử dụng NodeJS trong quá trình phát triển trang web

-Tìm hiểu kỹ về NodeJS và ReactJS cùng các thư viện hỗ trợ xây dựng website -Tìm hiểu cách xây dựng Website với NodeJS để áp dụng vào đồ án

- Sử dụng Framework ReactJS để xây dựng phần giao diện của website

- Sử dụng NodeJS để xây dựng hệ thống APIs xử lí các yêu cầu của người dùng

- Sử dụng hệ quản trị cơ sở dữ liệu MongoDB để lưu trữ dữ liệu của website

Ý NGHĨA THỰC TIỄN CỦA ĐỀ TÀI

Việc "Phát triển Website thương mại điện tử chuyên bán đồ secondhand" trong thời đại thương mại điện tử ngày càng phát triển mang lại nhiều ý nghĩa đối với cả người sử dụng (người bán và người mua) và cá nhân sinh viên trong nhóm như sau: Đối với người sử dùng (người bán và người mua):

- Tạo ra sự tiện lợi cho cả người tiêu dùng và người bán hàng khi tham gia hoạt động mua bán, đồng thời giảm chi phí về mặt bằng cho người bán

- Hỗ trợ người tiêu dùng có được giá cả và hình ảnh sản phẩm một cách chính xác, giúp họ dễ dàng tham khảo giá cả

- Tăng cường khả năng quản lý sản phẩm, giúp người quản lý dễ dàng hơn trong việc theo dõi và quản lý hàng tồn kho

- Cung cấp khả năng thống kê sản phẩm bán chạy, giúp người quản lý tối ưu hóa hoạt động sản xuất kinh doanh Đối với người quản lý:

- Khả năng tra cứu, cập nhật, thống kê, và báo cáo về sản phẩm, nhà sản xuất, thông tin khách hàng, hóa đơn, thuế được thực hiện một cách thuận tiện Đối với cá nhân sinh viên trong nhóm:

- Tạo ra một trang web thân thiện và hiệu quả hơn trong việc mua bán và quản lý sản phẩm quần áo đã qua sử dụng trên môi trường Internet

- Hoàn thành thành công đề tài, đồng thời làm chủ thêm công nghệ mới, mở ra nhiều cơ hội trong sự nghiệp và cuộc sống của bản thân

PHÂN CÔNG

Bảng 1 Phân công công việc

Thành viên Công việc Hoàn thành

Lâm Tâm Như - Thiết kế chức năng của người mua và người bán

Trần Hữu Khánh Vy - Thiết kế chức năng của admin

CƠ SỞ LÝ THUYẾT

KIẾN TRÚC HỆ THỐNG

Hệ thống kiến trúc cho trang web mà nhóm em sử dụng là kiến trúc ứng dụng ReactJS + NodeJS + MongoDB, là một kiến trúc phổ biến được sử dụng trong phát triển ứng dụng web hiện đại Kiến trúc này kết hợp các công nghệ mạnh mẽ để tạo ra một hệ thống có hiệu suất cao, linh hoạt và dễ bảo trì

Các thành phần trong kiến trúc:

- ReactJS là một thư viện JavaScript phổ biến và mạnh mẽ để xây dựng giao diện người dùng (UI) cho ứng dụng web, tập trung vào việc xây dựng các thành phần giao diện tái sử dụng và sử dụng mô hình dựa trên các thành phần, giúp tạo ra giao diện người dùng tương tác và linh hoạt

- Node.js là một nền tảng server-side được xây dựng trên JavaScript Engine của Google Chrome, cụ thể là V8 Engine Ryan Dahl là người sáng lập và phát triển Node.js, và phiên bản mới nhất của nó là v0.10.36

- MongoDB là một dạng phần mềm cơ sở dữ liệu sử dụng mã nguồn mở NoSQL

Nó có thể hỗ trợ trên nhiều nền tảng khác nhau và được thiết kế với mục đích hướng đến đối tượng, có hiệu suất cao cùng với tính khả dụng tốt và dễ dàng mở rộng

Với kiến trúc này, phần front-end được xây dựng bằng ReactJS và phần back- end được xây dựng bằng NodeJS để cung cấp các API và xử lý logic.MongoDB được sử dụng làm cơ sở dữ liệu để lưu trữ và truy xuất dữ liệu của trang web

Kiến trúc này cung cấp sự phân chia rõ ràng giữa phần giao diện người dùng và phần xử lý logic, đảm bảo tính mở rộng và bảo trì dễ dàng, cho phép phát triển độc lập giữa front-end và back-end

Node.js là một nền tảng được xây dựng trên thời gian chạy JavaScript của Chrome, giúp việc xây dựng các ứng dụng mạng nhanh chóng và có khả năng mở rộng

Sử dụng kiến trúc hướng sự kiện event-driven và không chặn (non-blocking), Node.js

20 trở nên nhẹ nhàng và hiệu quả, đặc biệt phù hợp cho các ứng dụng real-time với lượng dữ liệu lớn chạy trên các thiết bị phân tán

Là một môi trường chạy mã nguồn mở và đa nền tảng, Node.js thường được sử dụng để phát triển các ứng dụng mạng Node.js cung cấp một thư viện đa dạng bao gồm nhiều mô-đun JavaScript khác nhau, giúp đơn giản hóa quá trình phát triển ứng dụng web sử dụng Node.js ở mức độ lớn.

CÁC CÔNG NGHỆ SỬ DỤNG

Reactjs là một thư viện Javascript mã nguồn mở hỗ trợ xây dựng các thành phần giao diện nhanh gọn và tiện lợi Bình thường các lập trình viên sẽ nhúng javascript vào code HTML thông qua các attribute như AngularJS nhưng với Reactjs làm việc như một thư viện cho phép nhúng HTML vào javascript thông qua JSX Qua đó bạn có thể dễ dàng lồng các đoạn HTML vào trong JSX làm cho các component dễ hiểu và dễ sử dụng hơn

 Components (thành phần): React cho phép bạn tạo ra các thành phần độc lập, dễ dàng quản lý và có thể tái sử dụng Mỗi component có thể chứa mã HTML, CSS và

JavaScript riêng biệt Có 2 loại component chính là Class component và Function component

 Virtual DOM (DOM ảo): React tạo ra một bản sao ảo của DOM và so sánh với trạng thái trong component của DOM thực (real DOM), sau đó cập nhật những phần khác biệt, thay vì phải cập nhật toàn bộ DOM thực mỗi khi có thay đổi

 Single-Page Applications (SPA): React tích hợp tốt với các thư viện định tuyến (routing) và quản lý trạng thái của ứng dụng nên thích hợp với việc phát triển các SPA

 Hệ sinh thái đa dạng: Với nhiều thư viện và công cụ bổ sung như React Router, Redux, Material-UI,…

1.2.2.2 Cách thức hoạt động và ưu điểm của Reactjs

- ReactJS giúp cho việc viết các đoạn code Javascript sẽ trở nên dễ dàng hơn vì nó sử dụng một cú pháp đặc biệt đó chính là cú pháp JSX Thông qua JSX cho phép nhúng code HTML và Javascript

- ReactJS cho phép Developer phá vỡ những cấu tạo UI phức tạp thành những component độc lập Dev sẽ không phải lo lắng về tổng thể ứng dụng web, giờ đây Developer dễ dàng chia nhỏ các cấu trúc UI/UX phức tạp thành từng component đơn giản hơn

- Đi kèm với ReactJS là rất nhiều các công cụ phát triển giúp cho việc debug code một cách dễ dàng hơn

- Một trong những ưu điểm nữa của ReactJS đó là sự thân thiện với SEO Hầu như các JS Frameworks không thân thiện với các tìm kiếm mặc dù đã được cải thiện nhiều nhưng dưới sự hỗ trợ của các render dữ liệu trả về dưới dạng web page giúp cho SEO chuẩn hơn

 Cách thức hoạt động của Reactjs:

- Khởi tạo ứng dụng React với các lệnh khởi tạo và một component gốc để xây dựng giao diện người dùng cần có kiến thức cơ bản về AI và các mô hình ngôn ngữ lớn

- Xây dựng component độc lập, thể hiện cho một phần cụ thể của giao diện Mỗi component là một hàm JavaScript tạo ra một phần tử HTML

- Khi người dùng tương tác với ứng dụng React, cụ thể là trạng thái trong một component bất kỳ nào thay đổi, React sẽ gọi hàm render() và đồng thời một cây Elements mới được tạo ra Nó được gọi là Virtual DOM

- React chạy thuật toán diffing để xác định những thay đổi trong DOM ảo, so sánh nó với DOM hiện tại để tìm ra sự khác biệt khi trạng thái trong component thay đổi

- Cập nhật những thay đổi ở những nơi cần thiết của DOM thực (real DOM) thay vì phải cập nhật toàn bộ

- Hiển thị website với trạng thái mới với các mục cập nhật được thêm vào UI

Node.js là một nền tảng được xây dựng trên thời gian chạy JavaScript của Chrome, giúp việc xây dựng các ứng dụng mạng nhanh chóng và có khả năng mở rộng Sử dụng kiến trúc hướng sự kiện event-driven và không chặn (non-blocking), Node.js

23 trở nên nhẹ nhàng và hiệu quả, đặc biệt phù hợp cho các ứng dụng real-time với lượng dữ liệu lớn chạy trên các thiết bị phân tán

Là một môi trường chạy mã nguồn mở và đa nền tảng, Node.js thường được sử dụng để phát triển các ứng dụng mạng Node.js cung cấp một thư viện đa dạng bao gồm nhiều mô-đun JavaScript khác nhau, giúp đơn giản hóa quá trình phát triển ứng dụng web sử dụng Node.js ở mức độ lớn

1.1.2.1 Ưu và nhược điểm của NodeJS Ưu điểm:

- I/O hướng sự kiện không đồng bộ: Cho phép nhà phát triển xử lý nhiều yêu cầu cùng lúc mà không ảnh hưởng đến hiệu suất

- Ngôn ngữ JavaScript dễ học: Sử dụng JavaScript, một ngôn ngữ lập trình dễ học và phổ biến

- Chia sẻ code ở cả phía Server và Client: Khả năng chia sẻ mã nguồn giữa phía Server và Client

- Node Package Manager (NPM) và module Node phát triển mạnh mẽ: Hệ thống quản lí gói NPM và module Node ngày càng phát triển mạnh mẽ, hỗ trợ quá trình phát triển

- Xử lí file lớn bằng Stream: Có khả năng xử lí các file có kích thước lớn thông qua việc sử dụng stream

- Hạn chế khả năng mở rộng: Nodejs có hạn chế trong khả năng mở rộng, không tận dụng được lợi thế của các phần cứng server đa lõi hiện đại

- Nodejs gặp khó khăn khi thao tác với các cơ sử dữ liệu quan hệ

- Callback lồng nhau nhiều: Mỗi callback thường đi kèm với nhiều callback lồng nhau khác, làm tăng độ phức tạp của mã nguồn

- Yêu cầu kiến thức tốt về JavaScript: Sử dụng Nodejs đòi hỏi nhà phát triển phải có kiến thức sâu rộng về JavaScript

- Nodejs không thích hợp cho các nhiệm vụ yêu cầu nhiều CPU

MongoDB là một dạng phần mềm cơ sở dữ liệu sử dụng mã nguồn mở NoSQL

Nó có thể hỗ trợ trên nhiều nền tảng khác nhau và được thiết kế với mục đích hướng đến đối tượng MongoDB hoạt động dựa vào các khái niệm Collection và Document Đồng thời, nó có hiệu suất cao cùng với tính khả dụng tốt và dễ dàng mở rộng

KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA CHỨC NĂNG

KHẢO SÁT HIỆN TRẠNG

Link trang web: https://muaban.net/

Muaban là website rao vặt trực tuyến uy tín hàng đầu tại Việt Nam Trang web chính thức được hoạt động từ năm 2006 và là một trong những trang mua bán đồ cũ giá siêu rẻ

- Trang đăng nhập/đăng ký

- Trang chủ hiển thị danh mục sản phẩm, tìm kiếm, tin tức và sản phẩm nổi bật

- Trang chi tiết sản phẩm thể hiện chi tiết và thông tin liên hệ với người bán

- Trang lưu các sản phẩm yêu thích Ưu điểm:

- Thiết kế giao diện đơn giản, dễ tương tác và sử dụng

- Sản phẩm được thể hiện đầy đủ hình ảnh và thông tin chi tiết

- Mua bán, trao đổi tất cả các loại mặt hàng: bất động sản, xe máy, ôtô, điện tử điện máy, văn phòng, đồ gia dụng, các mặt hàng linh tinh khác,…

- Ngoài ra còn có chức năng tìm kiếm được các thông tin việc làm, các dịch vụ tư vấn hỗ trợ, dịch vụ sửa chữa cần thiết…

- Một số chức năng chưa được hoàn thiện như đăng nhập bằng các tài khoản xã hội khác

- Người tiêu dùng phải liên hệ trực tiếp với người bán thông qua số điện thoại

- Chưa có chức năng đánh giá và lọc sản phẩm

Link trang web: https://sieuthihangcu.com/

Sieuthihangcu là trang web đem lại cho người dùng cơ hội mua sắm hàng cũ với mức giá thấp Những sản phẩm tại đây vẫn giữ được vẻ ngoài nguyên vẹn cùng chất lượng không hề

28 thua kém hàng mới Tại trang mua bán đồ cũ này, có lượng hàng hóa vô cùng đa dạng, có thể dễ dàng tìm được sản phẩm ưng ý, với mức giá cạnh tranh

- Trang chủ thể hiện danh mục sản phẩm, tìm kiếm, danh sách các sản phẩm mới và bán chạy

- Trang đăng nhập/đăng ký

- Trang thông tin chi tiết sản phẩm và chức năng đặt hàng

- Trang thanh toán và đặt hàng sản phẩm

- Trang thông tin cá nhân Ưu điểm:

- Dễ thực hiện tương tác với trang web

- Có chức năng tư vấn khách hàng

- Có nhiều chức năng: ký gửi/mua hàng, đánh giá sản phẩm,…

- Phần giao diện của trang web chưa bắt mắt, thu hút

- Không thể đăng nhập thông qua các tài khoản mạng xã hội khác

Link trang web: https://vinasave.com/

Vinasave là một trong những trang mua bán đồ cũ online uy tín hiện nay, có thể thanh lý đồ cũ hay tìm mua đồ đã qua sử dụng trên trang web này, dễ dàng tìm thấy những món hàng cũ từ quần áo, giày dép đến những món đồ công nghệ, các loại phương tiện di chuyển, thậm chí là bất động sản… Ưu điểm:

₋ Tốc độ tải trang nhanh, dễ dàng tương tác với trang web

₋ Có nhiều phân loại sản phẩm cho người tiêu dùng lựa chọn

₋ Trang web đáp ứng đầy đủ các chức năng cơ bản về mua hàng đối với người tiêu dùng

₋ Màu sắc của trang khá đơn giản, chưa thu hút

₋ Cần phải liên hệ, nhận báo giá từ người bán

₋ Chưa có chức năng đăng nhập thông qua các tài khoản mạng xã hội

PHÂN TÍCH YÊU CẦU

- Giao diện trực quan, dễ sử dụng cho người dùng

- Hiển thị trang chủ với các sản phẩm dễ quan sát, có giá cả rõ ràng

- Cung cấp chức năng tìm kiếm sản phẩm và xem thông tin chi tiết của sản phẩm

- Cho phép khách hàng đăng ký tài khoản người dùng trên hệ thống

2.2.2 Yêu cầu của người mua

- Cho phép người mua xem và thay đổi thông tin liên quan đến tài khoản cá nhân

- Hình thức thanh toán phải đảm bảo tính chính xác và bảo mật

- Yêu cầu thông tin về sản phẩm phải đầy đủ và chi tiết

- Hiển thị thông tin về đơn hàng một cách rõ ràng và chi tiết

- Cung cấp khả năng tìm kiếm nhanh chóng để thuận tiện cho việc mua sắm

- Cho phép người mua theo dõi trạng thái và chi tiết của các đơn hàng đã đặt

2.2.3 Yêu cầu của người bán

- Cho phép đăng tin bán sản phẩm

- Cập nhật thông tin hàng hóa trực tuyến: Dễ dàng cập nhật và thay đổi hình ảnh, thông tin chi tiết, và giá cả của các mặt hàng trực tuyến

- Quản lý, lưu trữ và tạo báo cáo về thông tin của đơn hàng, bao gồm trạng thái như đang chờ xác nhận, đang giao hàng, v.v

- Cho phép thay đổi thông tin liên quan đến tài khoản cá nhân

2.2.4 Yêu cầu của quản trị viên

- Quản lí chung: Quản lí thông tin liên quan đến khách hàng, sản phẩm và các khía cạnh khác của hệ thống

- Quản lí khách hàng: Lưu trữ thông tin cá nhân của từng khách hàng để dễ dàng quản lí và tương tác

- Quản lí sản phẩm: Xác nhận, quản lý các bài đăng bán sản phẩm hợp lệ

PHÂN TÍCH CHỨC NĂNG

Bảng 2.1: Chức năng của khách

1 Đăng ký Đăng ký tạo tài khoản người dùng

2 Xem/Tìm kiếm sản phẩm Tìm kiếm, xem danh sách, chi tiết sản phẩm

2.3.1.2 Chức năng của người mua

Bảng 2.2: Chức năng của người mua

Tên chức năng Mô tả

1 Đăng nhập Đăng nhập vào hệ thống

2 Đăng xuất Đăng xuất khỏi hệ thống

3 Tạo mật khẩu mới Tạo mật khẩu mới chỉ với email, khi quên mật khẩu

4 Quản lý tài khoản cá nhân Xem, sửa thông tin cá nhân

5 Quản lý giỏ hàng Xem, thêm, cập nhật sản phẩm trong giỏ hàng

6 Đặt hàng/ Thanh toán Đặt hàng và thanh toán đơn hàng

7 Phản hồi, đánh giá Phản hồi, đánh giá sản phẩm

8 Thanh toán Chọn phương thức thanh toán

9 Đánh giá sản phẩm Đánh giá các sản phẩm đã đặt với 2 tiêu chí là số sao và bình luận về sản phẩm

10 Theo dõi đơn hàng Xem lịch sử mua hàng, theo dõi trạng thái

11 Tìm kiếm Tìm kiếm sản phẩm theo từ khóa

2.3.1.3 Chức năng của người bán

Bảng 2 3: Chức năng của người bán

3 Quản lý đơn hàng Xem, cập nhật trạng thái, theo dõi trạng thái các đơn hàng của cửa hàng

4 Quản lý sản phẩm của cửa hàng

Xem, thêm, sửa thông tin sản phẩm của cửa hàng

5 Quản lý loại sản phẩm của cửa hàng

Xem, thêm, xóa, sửa loại sản phẩm của cửa hàng

7 Quản lý đánh giá sản phẩm của cửa hàng

Xem, thêm, xóa, sửa đánh giá sản phẩm của cửa hàng

2.3.1.4 Chức năng của quản trị viên

Bảng 2 4: Chức năng của quản trị viên

3 Quản lý sản phẩm Xác nhận, xóa các thông tin sản phẩm của người bán

4 Quản lý tài khoản người dùng của cửa hàng

Xem, thêm, xóa, sửa tài khoản người dùng của cửa hàng

2.3.2.1 Xác định các Actor và Usecase

- Tìm kiếm/xem sản phẩm

- Quản lý đánh giá sản phẩm

- Quản lý tài khoản người dùng

- Quản lý loại sản phẩm

Bảng 2 6: Đặc tả Usecase "Đăng ký"

Goal Đăng ký tạo tài khoản người dùng

Post-conditions Nếu thành công, sẽ có tài khoản mới được tạo

Nếu thất bại, hiển thị thông báo thất bại

Main Flow Use case bắt đầu khi người dùng thực hiện chức năng cần xác thực quyền truy cập của hệ thống

1 Người dùng truy cập vào website

2 Người dùng chọn chức năng Đăng ký

3 Hệ thống chuyển hướng tới trang đăng ký tài khoản

4 Người dùng nhập đầy đủ thông tin tài khoản cần thiết

5 Người dùng bấm nút Đăng ký

6 Hệ thống yêu cầu xác thực email bằng mã OTP

7 Người dùng kiểm tra email và nhập mã OTP

8 Người dùng bấm nút gửi

9 Hệ thống thông báo đăng ký tài khoản thành công

Alternative 9a Hệ thống hiển thị lỗi và yêu cầu người dùng nhập lại

Exception 8b Thông tin tài khoản không hợp lệ, email hoặc số điện thoại đăng ký đã tồn tại

Bảng 2 7: Đặc tả Usecase "Đăng nhập"

Goal Đăng nhập vào hệ thống

Actors Người mua (Customer), Quản trị viên (Admin)

Pre-conditions Đã có tài khoản trong hệ thống/tài khoản mạng xã hội (Facebook,

Post-conditions Nếu đăng nhập thành công, hệ thống sẽ chuyển hướng đến trang tương ứng với vai trò của người đăng nhập

Nếu đăng nhập thất bại, hiển thị thông báo lỗi

Main Flow 1 Người dùng truy cập vào website

2 Người dùng chọn chức năng Đăng nhập

3 Hệ thống chuyển hướng tới trang đăng nhập tài khoản

4 Người dùng nhập tài khoản email và mật khẩu

5 Người dùng bấm nút Đăng nhập

7 Hệ thống chuyển hướng tới trang chủ đối với Customer, trang đơn hàng đối với Shipper, hoặc trang quản lý đối với Admin

Exception 6a Email không hợp lệ, mật khẩu không chính xác

Bảng 2 8: Đặc tả Usecase "Đăng xuất"

Goal Đăng xuất tài khoản khỏi hệ thống website

Actors Người mua (Customer), Quản trị viên (Admin)

Pre-conditions Nếu đăng xuất thành công, chuyển hướng về trang chủ

Nếu đăng xuất thất bại, hiển thị thông báo lỗi

Main Flow Nếu đăng xuất thành công, chuyển hướng về trang chủ

Nếu đăng xuất thất bại, hiển thị thông báo lỗi

Alternative 1 Người dùng trỏ vào biểu tượng tài khoản, hiển thị dropdown

2 Người dùng chọn chức năng Đăng xuất

3 Đăng xuất thành công, hệ thống chuyển hướng tới trang chủ

2.3.3.4 Xem/Tìm kiếm sản phẩm

Bảng 2 9: Đặc tả Usecase "Xem/Tìm kiếm sản phẩm"

Name Xem/Tìm kiếm sản phẩm

Goal Tìm kiếm/Xem sản phẩm

Actors Tìm kiếm, xem danh sách, chi tiết sản phẩm

Post-conditions Nếu thành công, hiển thị danh sách sản phẩm, theo từ từ khóa, theo loại sản phẩm (category) và bộ lọc theo giá, thương hiệu, kích thước (filter)

Nếu thất bại, thông báo lỗi hoặc thông báo không tìm thấy sản phẩm nào

Main Flow 1 Người dùng truy cập vào hệ thống website

2 Người dùng chọn chức năng tìm kiếm theo sản phẩm trên thanh tìm kiếm

3 Người dùng nhập từ khóa

4 Người dùng nhấn Enter (hoặc bấm nút hình kính lúp)

5 Hệ thống thay đổi danh sách sản phẩm, hiển thị danh sách sản phẩm theo từ khóa

6 Người dùng chọn nút next (hoặc previous, số trang bất kỳ) ở phần phân trang để xem trang tiếp theo (trang trước đó, hoặc trang theo số trang)

7 Chọn vào một sản phẩm, chuyển đến trang chi tiết sản phẩm tương ứng

Bảng 2.9: Đặc tả Usecase "Quản lý tài khoản"

Name Quản lý tài khoản

Goal Chỉnh sửa thông tin cá nhân, ảnh đại diện người dùng,đổi mật khẩu

Pre-conditions Đã đăng nhập tài khoản vào hệ thống

Post-conditions Nếu chỉnh sửa thành công, thông tin cá nhân được cập nhật

Nếu chỉnh sửa thất bại, hiển thị thông báo lỗi và không cập nhật

Main Flow 1 Người dùng chọn tài khoản của tôi

2 Hệ thống chuyển hướng đến trang quản lý tài khoản

3 Người dùng thay đổi thông tin cá nhân

4 Người dùng bấm nút Lưu

5 Hệ thống thông báo cập nhật thành công

Bảng 2.10: Đặc tả Usecase "Đổi mật khẩu"

Goal Đổi mật khẩu của người dùng

Post-conditions Nếu đổi mật khẩu thành công, thông báo thành công

Nếu đổi mật khẩu thất bại, thông báo lỗi

Main Flow 1 Người dùng chọn đổi mật khẩu

2 Hệ thống chuyển hướng đến trang đổi mật khẩu

3 Người dùng nhập lại mật khẩu cũ, mật khẩu mới và xác nhận mật khẩu mới

4 Người dùng bấm nút Đổi

5 Hệ thống thông báo đổi mật khẩu thành công

Exception 3a Mật khẩu cũ không chính xác

Bảng 2.11: Đặc tả Usecase "Theo dõi đơn hàng"

Name Theo dõi đơn hàng

Goal Xem lịch sử toàn bộ đơn hàng, theo dõi đơn hàng

Main Flow 1 Người dùng chọn biểu tượng đơn hàng

2 Hệ thống chuyển hướng đến trang theo dõi đơn hàng

3 Người dùng bấm vào đơn hàng để xem chi tiết đơn hàng

4 Hệ thống hiển thị chi tiết đơn hàng

Bảng 2.12: Đặc tả Usecase "Quản lý giỏ hàng"

Name Quản lý giỏ hàng

Goal Thêm sản phẩm vào giỏ hàng, thay đổi số lượng sản phẩm, hoặc xóa sản phẩm khỏi giỏ hàng

Actors Khách (Guest), Người mua (Customer)

Post-conditions Nếu thành công, các chức năng như thêm sản phẩm, thay đổi số lượng hay xóa sản phẩm khỏi giỏ hàng hoạt động tốt Nếu thất bại, không chức năng nào hoạt động

Main Flow 1 Người dùng tìm và nhấn vào sản phẩm muốn thêm

2 Hệ thống chuyển hướng người dùng tới trang chi tiết sản phẩm

3 Người dùng bấm nút Thêm vào giỏ hàng

4 Hệ thống thông báo thêm thành công, giỏ hàng được cập nhật

5 Người dùng bấm nút giỏ hàng trên thanh điều hướng

6 Hệ thống chuyển hướng đến trang giỏ hàng, danh sách các sản phẩm được hiển thị

7 Chọn nút cộng (+) hoặc trừ (-) để thay đổi số lượng sản phẩm

8 Chọn nút hình thùng rác để xóa sản phẩm khỏi giỏ hàng

Bảng 2.13: Đặc tả Usecase "Đặt hàng/thanh toán"

Name Đặt hàng/thanh toán

Goal Cho phép người dùng thanh toán và đặt hàng các sản phẩm trong giỏ hàng

Post-conditions Nếu đặt hàng thành công, đơn hàng được tạo

Nếu đặt hàng thất bại, thông báo lỗi

Main Flow 1 Người dùng truy cập vào hệ thống website

2 Người dùng chọn nút giỏ hàng trên thanh điều hướng

3 Hệ thống chuyển hướng đến trang giỏ hàng

4 Người dùng bấm nút Thanh toán

5 Hệ thống chuyển hướng đến trang Thanh toán

6 Người dùng điền hoặc chọn đẩy đủ các thông tin cần thiết (tên, số điện thoại, địa chỉ)

7 Người dùng bấm nút Đặt hàng

8 Hệ thống tạo đơn hàng

Bảng 2.14: Đặc tả Usecase "Đánh giá"

Goal Cho phép người dùng đánh giá chung về cửa hàng

Pre-conditions Đã đăng nhập vào hệ thống

Post-conditions Nếu thành công, đánh giá sẽ được gửi về cửa hàng

Nếu thất bại, thông báo lỗi

Main Flow 1 Người dùng trỏ vào biểu tượng tài khoản

3 Hệ thống chuyển hướng tới trang đánh giá

4 Người dùng nhập thông tin cần thiết để đánh giá

5 Người dùng bấm nút Gửi

6 Đánh giá, phản hồi thành công

Bảng 2.15: Đặc tả UseCase "Quản lý sản phẩm"

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

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

Pre-conditions Đã đăng nhập hệ thống

Post-conditions Nếu thành công, hiển thị danh sách sản phẩm

Main Flow 1 Người bán truy cập vào website

2 Người bán sử dụng tài khoản để đăng nhập

3 Hệ thống chuyển hướng tới trang quản lý

4 Người bán chọn chức năng Sản phẩm

5 Hệ thống chuyển hướng tới trang quản lý sản phẩm

6 Người bán chọn nút thêm

7 Hệ thống chuyển hướng tới trang thêm sản phẩm

8 Người bán nhập các thông tin cần thiết của sản phẩm mới

9 Hệ thống tạo mới sản phẩm thành công

10 Hệ thống chuyển hướng về trang quản lý sản phẩm

Alternative 6a Người bán chọn nút sửa

7a Hệ thống chuyển hướng tới trang sửa sản phẩm 8a Người bán nhập các thông tin cần thay đổi của sản phẩm 9a Hệ thống thay đổi sản phẩm thành công

2.3.3.12 Quản lý loại sản phẩm

Bảng 2.16: Đặc tả Usecase "Quản lý loại sản phẩm"

Name Quản lý loại sản phẩm

Goal Quản lý loại sản phẩm của cửa hàng

Actors Quản Trị Viên (Admin)

Post-conditions Nếu thành công, hiển thị danh sách loại sản phẩm

Main Flow 1 Admin truy cập vào website

2 Admin sử dụng tài khoản admin để đăng nhập

4 Admin chọn chức năng Loại sản phẩm

5 Hệ thống chuyển hướng tới trang quản lý loại sản phẩm

6 Admin chọn Next (hoặc Previous, hoặc trang bất kỳ) để xem trang tiếp theo (hoặc trang trước, hoặc trang tương ứng)

8 Hệ thống chuyển hướng tới trang thêm loại sản phẩm

9 Admin nhập các thông tin cần thiết của loại sản phẩm mới

10 Hệ thống tạo mới loại sản phẩm thành công

11 Hệ thống chuyển hướng về trang quản lý loại sản phẩm

Alternative 7a Admin chọn nút sửa

8a Hệ thống chuyển hướng tới trang sửa loại sản phẩm 9a Admin nhập các thông tin cần thay đổi của loại sản phẩm 10a Hệ thống thay đổi loại sản phẩm thành công

Exception 2a Tài khoản hoặc mật khẩu không chính xác

Bảng 2.17: Đặc tả Usecase "Quản lý người dùng"

Name Quản lý người dùng

Goal Quản lý người dùng của cửa hàng

Actors Quản Trị Viên (Admin)

Post-conditions Nếu thành công, hiển thị danh sách người dùng

Main Flow 1 Admin truy cập vào website

2 Admin sử dụng tài khoản admin để đăng nhập

4 Admin chọn chức năng Người dùng

5 Hệ thống chuyển hướng tới trang quản lý người dùng

6 Admin chọn Next (hoặc Previous, hoặc trang bất kỳ) để xem trang tiếp theo (hoặc trang trước, hoặc trang tương ứng)

8 Hệ thống chuyển hướng tới trang thêm người dùng

9 Admin nhập các thông tin cần thiết của người dùng

10 Hệ thống tạo mới tài khoản người dùng thành công

11 Hệ thống chuyển hướng về trang quản lý

Alternative 7a Admin chọn nút sửa vai trò

8a Hệ thống hiển thị list các vai trò để admin chọn 9a Admin chọn vai trò

10a Hệ thống thay đổi vai trò của người dùng thành công Exception 2a Tài khoản hoặc mật khẩu không chính xác

Bảng 2.18: Đặc tả Usecase "Quản lý đơn hàng"

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

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

Post-conditions Nếu thành công, hiển thị danh sách các đơn hàng của người bán

4 Người bán chọn chức năng Đơn hàng

5 Hệ thống chuyển hướng tới trang quản lý đơn hàng

6 Người bán chọn Next (hoặc Previous, hoặc trang bất kỳ) để xem trang tiếp theo (hoặc trang trước, hoặc trang tương ứng)

7 Người bán chọn cập nhật trạng thái đơn hàng ở phần dropdown (nút này sẽ tồn tại với các trạng thái đơn hàng)

8 Hệ thống cập nhật trạng thái đơn hàng thành công

9 Hệ thống chuyển hướng về trang quản lý đơn hàng

2.3.3.15 Quản lý đánh giá sản phẩm

Bảng 2.19: Đặc tả Usecase "Quản lý đánh giá sản phẩm"

Name Quản lý đánh giá

Goal Quản lý đánh giá chung của cửa hàng

Pre-conditions Đã đăng nhập vào hệ thống

Post-conditions Nếu thành công, hiển thị danh sách các đánh giá của khách hàng

4 Người bán chọn chức năng Đánh giá

5 Hệ thống chuyển hướng tới trang quản lý đánh giá

6 Người bán chọn Next (hoặc Previous, hoặc trang bất kỳ) để xem trang tiếp theo (hoặc trang trước, hoặc trang tương ứng)

7 Hệ thống hiển thị các đánh giá của khách hàng

Bảng 2.20: Đặc tả Usecase "Xác nhận sản phẩm"

Name Xác nhận sản phẩm

Goal Xác nhận các sản phẩm hợp lệ

Actors Quản trị viên (Admin)

Pre-conditions Đã đăng nhập vào tài khoản hệ thống

Post-conditions Nếu xác nhận thành công, sản phẩm sẽ được đăng lên trang sản phẩm Nếu xác nhận thất bại, thông báo lỗi

1.Admin chọn quản lý sản phẩm 2.Hệ thống chuyển hướng đến trang quản lý sản phẩm 3.Admin bấm vào sản phẩm để xem chi tiết sản phẩm 4.Admin nhấn xác nhận sản phẩm

5 Hệ thống sẽ thực hiện đăng sản phẩm lên cho người bán

1 Hệ thống thông báo thất bại

2 Quay lại bước 1 ở luồng cơ bản nếu muốn tiếp tục xác nhận

Luồng mở rộng Không có

THIẾT KẾ HỆ THỐNG

LƯỢC ĐỒ TUẦN TỰ

3.1.4 Chức năng “Xem/Tìm kiếm sản phẩm”

Hình 3 4: Sequence "Xem/Tìm kiếm sản phẩm"

3.1.5 Chức năng “Đổi mật khẩu”

Hình 3 5: Sequence "Đổi mật khẩu"

3.1.6 Chức năng “Quản lý tài khoản”

Hình 3 6: Sequence "Quản lý tài khoản"

3.1.7 Chức năng “Theo dõi đơn hàng”

Hình 3 7: Sequence "Theo dõi đơn hàng"

3.1.9 Chức năng “Đặt hàng/Thanh toán”

3.1.10 Chức năng “Đánh giá sản phẩm”

Hình 3 10: Sequence "Đánh giá sản phẩm"

3.1.11 Chức năng “Quản lý người dùng”

Hình 3 11: Sequence "Quản lý người dùng" 3.1.12 Chức năng “Quản lý sản phẩm”

Hình 3.12: Sequence "Quản lý sản phẩm" 3.1.13 Chức năng “Quản lý đơn hàng”

Hình 3.13: Sequence "Quản lý đơn hàng"

3.1.14 Chức năng “Quản lý loại sản phẩm”

Hình 3.14: Sequence "Quản lý loại sản phẩm"

3.1.15 Chức năng “Quản lý đánh giá sản phẩm”

Hình 3.15: Sequence "Quản lý đánh giá sản phẩm"

PHẦN GIAO DIỆN

STT Tên Loại Vai trò

1 Username Text field Nhập tên người dùng

2 Email Text field Nhập email của tài khoản

3 Password Text field Nhập password của tài khoản

4 Confirm password Text field Nhập lại password

5 Đăng ký Button Nhấn đăng ký

3 Đăng nhập Button Nhấn đăng nhập

1 Logo Link Khi nhấn sẽ chuyển đến trang chủ

2 Tìm kiếm Text field Nhập từ khóa để tìm kiếm sản phẩm

3 Giỏ hàng Button Nhấn nào để chuyển đến trang giỏ hàng

4 Tài khoản Button Nhấn để chuyển đến trang thông tin người dùng

5 Kênh người bán Button Nhấn vào để chuyển đến trang người bán

1 Sản phẩm Card Khi nhấn sẽ chuyển đến trang chi tiết sản phẩm

2 Yêu thích Icon Nhấn để thêm vào yêu thích

3 Xem thêm Button Nhấn để xem thêm sản phẩm

4 Danh mục sản phẩm Link Xem các sản phẩm theo danh mục

2 Bộ lọc Sidebar Hiển thị các thuộc tính lọc khi người dùng chọn lọc sẽ hiển thị sản phẩm tương ứng

3 Sắp xếp Dropdown Người dung chọn kiểu sắp xếp sản phẩm muốn xem

4 Phân trang Pagination Phân trang

1 Tên sản phẩm Text Hiển thị tên sản phẩm

2 Giá Text Hiển thị giá sản phẩm

3 Màu sắc Radio button Chọn màu sắc cho sản phẩm muốn mua

4 Size Radio button Chọn size cho sản phẩm muốn mua

5 Số lượng Button Chọn số lượng sản phẩm muốn mua

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

7 Mua ngay Button Tiến hành đặt hàng, thanh toán

8 Hình ảnh Image Hiển thị hình ảnh của sản phẩm

Text Hiển thị thông tin người bán

10 Thông tin chi tiết Text Hiển thị thông tin chi tiết sản phẩm

11 Đánh giá sản phẩm Item Hiển thị đánh giá của sản phẩm bởi khách hàng

12 Sản phẩm liên quan Card Hiển thị danh sách các sản phẩm gợi ý

13 Yêu thích Icon Thêm sản phẩm vào yêu thích

14 Xem cửa hàng Button Khi nhấn sẽ chuyển đến trang cửa hàng

15 Theo dõi Button Nhấn để theo dõi cửa hàng

1 Avatar Image Hình đại diện của cửa hàng

2 Tên cửa hàng Text Hiển thị tên cửa hàng

3 Theo dõi Button Nhấn để theo dõi cửa hàng

4 Thông tin cửa hàng Text Hiển thị thông tin cửa hàng

5 Sản phẩm Card Hiển thị tất cả sản phẩm của cửa hàng

6 Đánh giá Item Hiển thị đánh giá của khách hàng

1 Sản phẩm Item Hiển thị sản phẩm muốn thanh toán

2 Ô chọn đặt hàng Checkbox Người dùng tích vào sản phẩm muốn đặt mua

3 Số lượng Button Thay đổi số lượng sản phẩm trong giỏ hàng

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

5 Xoá tất cả Button Xoá tất cả sản phẩm người dùng tích vào khỏi giỏ hàng

6 Hóa đơn Text Hiển thị chi tiết hóa đơn

7 Mua hàng Button Chuyển hướng đến trang đặt hàng

1 Sản phẩm đặt hàng Item Hiển thị sản phẩm sẽ đặt hang

Text Hiển thị thông tin nhận hàng

3 Thay đổi thông tin nhận hàng

Modal Hiển thị modal chọn địa chỉ nhận hàng

4 Mã giảm giá Modal Hiển thị modal chọn mã giảm giá

Radio button Chọn phương thức thanh toán

6 Hoá đơn Text Hiển thị giá tiền cần thanh toán

7 Đặt hàng Button Xác nhận đặt hàng

3.2.1.10 Thay đổi địa chỉ giao hàng

1 Địa chỉ Radio button Chọn địa chỉ người dùng muốn giao hàng

2 Hủy Button Nhấn để hủy chọn địa chỉ

3 Xác nhận Button Nhấn để xác nhận địa chỉ đã chọn

1 Voucher Radio button Chọn voucher

2 Hủy Button Nhấn để hủy chọn

3 Xác nhận Button Nhấn để xác nhận voucher đã chọn

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

Text Hiển thị thông báo đặt hàng thành công

2 Trang chủ Button Khi nhấn sẽ chuyển đến trang chủ

3 Đơn mua Button Nhấn để xem các đơn hàng đã đặt mua

1 Đơn hàng Item Hiển thị thông tin cơ bản của đơn hàng, khi nhấn sẽ chuyển đến trang chi tiết đơn hàng

2 Huỷ Button Nhấn để hủy đơn hàng (nếu đơn hàng chưa hoàn thành)

3 Đánh giá Button Nhấn để hiện modal đánh giá đơn hàng (nếu đơn hàng đã giao thành công)

1 Mã đơn hàng Text Chọn voucher

2 Trạng thái đơn hàng Text Nhấn để hủy chọn

Text Nhấn để xác nhận voucher đã chọn

4 Thông tin chi tiết Text Hiển thị hình thức giao hàng, hình thức thanh toán, ngày nhận hàng

5 Sản phẩm Item Hiển thị sản phẩm đã đặt mua

1 Đánh giá Radio button Chọn số điểm đánh giá

2 Nhận xét Text field Thêm nhận xét

3 Huỷ Button Nhấn để huỷ

4 Lưu Button Nhấn để lưu đánh giá

1 Địa chỉ Item Hiển thị địa chỉ

2 Cập nhật Button Nhấn để hiển modal cập nhật địa chỉ

3 Xoá Button Nhấn để hiện modal xác nhận xoá địa chỉ

4 Thiết lập mặc định Button Nhấn để chọn địa chỉ làm địa chỉ mặc định

5 Thêm địa chỉ Button Nhấn để hiển thị modal them địa chỉ

1 Tên Text field Nhập tên

2 Số điện thoại Text field Nhập số điện thoại

3 Tỉnh/Thành phố Select Chọn tỉnh/thành phố

4 Quận/Huyện Select Chọn quận/huyện

5 Phường/Xã Select Chọn phường/xã

6 Địa chỉ Text field Nhập địa chỉ

7 Loại địa chỉ Radio button Chọn loại địa chỉ

8 Đặt làm địa chỉ mặc định

Checkbox Chọn làm địa chỉ mặc định

9 Hủy Button Nhấn để hủy thay đổi thông tin

10 Lưu Button Nhấn để lưu thông tin

1 Tên Text field Nhập tên

3 Tỉnh/Thành phố Select Chọn tỉnh/thành phố

4 Quận/Huyện Select Chọn quận/huyện

5 Phường/Xã Select Chọn phường/xã

6 Địa chỉ Text field Nhập địa chỉ

7 Loại địa chỉ Radio button Chọn loại địa chỉ

8 Hủy Button Nhấn để hủy thay đổi thông tin

9 Lưu Button Nhấn để lưu thông tin

1 Email Text field Hiển thị email tài khoản

2 Tên đăng nhập Text field Nhập tên đăng nhập

4 Họ & Tên Text field Nhập họ và tên

5 Avatar tài khoản Image Hiển thị avatar tài khoản

6 Chọn ảnh Button Nhấn để chọn ảnh khác

7 Lưu thay đổi Button Nhấn để lưu thông tin

1 Mật khẩu cũ Text field Nhập mật khẩu cũ

2 Mật khẩu mới Text field Nhập mật khẩu mới

3 Xác nhận mật khẩu mới

Text field Nhập lại mật khẩu mới

4 Lưu thay đổi Button Nhấn để lưu thông tin

2 Yêu thích Icon Nhấn để xoá sản phẩm khỏi danh sách yêu thích

1 Tên cửa hàng Text field Nhập tên cửa hàng

5 Confirm password Text field Nhập lại password

6 Đăng ký Button Nhấn đăng ký

1 Trang chủ li Hiển thị trang dashboard

2 Sản phẩm li Hiển thị trang quản lý sản phẩm

3 Đơn hàng li Hiển thị trang quản lý đơn hàng

4 Mã giảm giá li Hiển thị trang quản lý mã giảm giá

5 Hồ sơ shop li Hiển thị trang thông tin cửa hàng

6 Địa chỉ li Hiển thị trang quản lý địa chỉ

1 Doanh thu Card Doanh thu của shop

2 Đơn hàng Card Số lượng đơn hàng của shop

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

4 Đơn chưa xử lý Table Danh sách đơn hàng chưa xử lý

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

2 Cập nhật Button Nhấn để chỉnh sửa sản phẩm

3 Ẩn Button Nhấn để ẩn sản phẩm

4 Ô chọn sản phẩm Checkbox Nhấn để chọn sản phẩm muốn xoá

5 Xoá Button Khi nhấn sẽ hiện modal xác nhận xoá sản phẩm

1 Hình ảnh Image Nhập hình ảnh của sản phẩm

2 Tên sản phẩm Text field Nhập tên sản phẩm

3 Ngành hàng Select Chọn ngành hàng

4 Mô tả Textarea Nhập mô tả sản phẩm

5 Thương hiệu Select Chọn thương hiệu

6 Phân loại hàng Text field Nhập các phân loại sản phẩm (tối đa 2 phân loại)

7 Danh sách phân loại hàng

Table Nhập giá tiền, số lượng của từng phân loại

8 Thông tin khác Text field Nhập các thông tin khác của sản phẩm

9 Hủy Button Nhấn để hủy thêm sản phẩm

10 Lưu Button Nhấn để lưu sản phẩm

1 Trạng thái đơn hàng Tab Hiển thị các trạng thái đơn hàng, khi người dùng chọn 1 trạng thái các đơn

97 hàng tương ứng với trạng thái đã chọn sẽ hiển thị

2 Danh sách đơn hàng Table Hiển thị danh sách đơn hàng theo trạng thái

3 Xác nhận Button Nhấn để thay đổi trạng thái đơn hàng

4 Huỷ Button Nhấn để huỷ đơn

5 Tìm kiếm Text field Tìm kiếm đơn hàng theo mã đơn hàng (hoặc tên khách hàng, tên sản phẩm)

1 Danh sách voucher Table Hiển thị danh sách voucher

2 Sửa Button Nhấn để chỉnh sửa

3 Rheem Button Khi nhấn sẽ hiện modal thêm sản phẩm

4 Ô chọn voucher Checkbox Nhấn để chọn voucher muốn xoá

5 Xoá Button Khi nhấn sẽ hiện modal xác nhận xoá

6 Tìm kiếm Text field Nhập mã giảm giá để muốn tìm

1 Tên mã giảm giá Text field Nhập tên mã giảm giá

2 Thời gian sử dụng Date picker Chọn thời gian giảm giá

3 Mức giảm Text field Nhập giá trị voucher

4 Đơn tối thiểu Text field Nhập đơn giá tối thiểu để được áp dụng voucher

5 Số lượng Text field Nhập số lượng áp dụng voucher

6 Hủy Button Nhấn để hủy thêm voucher

7 Lưu Button Nhấn để lưu voucher

1 Trang chủ li Hiển thị trang dashboard

2 Sản phẩm li Hiển thị trang quản lý sản phẩm

3 Cửa hàng li Hiển thị trang quản lý cửa hàng

4 Phân loại li Hiển thị trang quản lý phân loại

Table Hiển thị danh sách người dùng

2 Khoá/Mở khoá Button Nhấn để khoá/mở khoá tài khoản

3 Filter Dropdown Nhấn để lọc người dùng theo trạng thái

4 Ô chọn người dùng Checkbox Nhấn để chọn người dùng muốn xoá

1 Danh sách cửa hàng Table Hiển thị danh sách sản phẩm

2 Xem cửa hàng Button Nhấn để xem chi tiết cửa hàng

4 Ô chọn cửa hàng Checkbox Nhấn để chọn cửa hàng muốn xoá

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

2 Duyệt Button Nhấn để duyệt sản phẩm

3 Vi phạm Button Nhấn để báo sản phẩm vi phạm (không được đăng bán)

4 Ẩn/Hiện Button Nhấn để ẩn/hiện sản phẩm

1 Tên phân loại Link Nhấn để xem chi tiết

2 Ô chọn phân loại Checkbox Nhấn để chọn phân loại

1 Tên phân loại Text field Nhập tên phân loại

2 Phân loại cha Select Chọn phân loại cha

3 Hình ảnh Image Nhập hình ảnh phân loại

4 Lưu Button Nhấn để lưu

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

CÀI ĐẶT

- Cài đặt Node.js và ReactJS

- Sử dụng Visual Studio Code

- Tải source code của project về máy

- Giải nén và mở file source code của phần back-end trên Visual Studio Code

- Chạy lệnh npm install để cài đặt các thư viện cần thiết

- Chạy lệnh npm start để khởi chạy phần back-end

- Giải nén và mở file source code của phần front-end trên Visual Studio Code

- Chạy lệnh npm install để cài đặt các thư viện cần thiết

- Chạy lệnh npm start để khởi chạy phần front-end.

KIỂM THỬ

Bảng 4.1: Kiểm thử các chức năng của khách và người dùng

STT Mô tả Các bước thực hiện Kết quả mong đợi

1 Kiểm thử chức năng Đăng ký

- Nhập email, mật khẩu và xác nhận mật khẩu

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

Thông báo đăng ký thành công Đạt

2 Kiểm thử chức năng đăng nhập

Trang web sẽ chuyển đến trang chủ

Trang web sẽ chuyển đến trang chủ Đạt

- Nhập các thông tin cá nhân

Thông báo lưu thành công

Thông báo lưu thành công Đạt

4 Kiểm thử chứ năng Đặt hàng

- Chọn sản phẩm muốn mua

- Bấm thêm vào giỏ hàng

Thông báo thêm vào giỏ hàng thành công

Thông báo thêm vào giỏ hàng thành công Đạt

- Nhấn vào giỏ hàng và chọn sản phẩm muốn thanh toán

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

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

- Nhấn chọn đơn hàng cần theo dõi

Hiển thị trạng thái của đơn hàng

Hiển thị trạng thái của đơn hàng Đạt

Bảng 4.2: Kiểm thử chức năng phía người bán và quản trị viên

STT Mô tả Các bước thực hiện Kết quả mong đợi

1 Kiểm thử chức năng đăng bán sản phẩm

- Điền các thông tin của sản phẩm, hình ảnh

Thông báo thêm sản phẩm thành công

Thông báo hiển thêm sản phẩm thành công Đạt

2 Kiểm thử chức năng chỉnh sửa sản phẩm

- Nhập thông tin cần chỉnh sửa

Thông báo cập nhật sản phẩm thành công

Thông báo cập nhật sản phẩm thành công Đạt

3 Kiểm thử chức năng xóa sản phẩm

- Nhấn vào sản phẩm cần xóa

Thông báo xóa sản phẩm thành công

Thông báo xóa sản phẩm thành công Đạt

4 Kiểm thử chức năng chỉnh sửa trạng thái đơn hàng

- Nhấn vào một đơn hàng

- Chọn trạng thái của đơn hàng

Trạng thái đơn hàng thay đổi đúng

Trạng thái đơn hàng thay đổi đúng Đạt

PHẦN KẾT LUẬN

KẾT QUẢ ĐẠT ĐƯỢC

Nghiên cứu về những công nghệ như Node.js, React.js, MongoDB áp dụng vào việc xây dựng trang web bán đồ secondhand

Nắm bắt và áp dụng các công cụ thiết kế Web hiện đại

Thiết kế Web động và tổ chức cơ sở dữ liệu một cách hiệu quả

Hiểu rõ về các dịch vụ trên Internet, đặc biệt là Web

Phát triển giao diện người dùng thân thiện và dễ sử dụng

Cung cấp khả năng tra cứu mặt hàng khi khách hàng có nhu cầu tìm kiếm sản phẩm Cho phép khách hàng thực hiện đặt hàng qua mạng một cách thuận tiện

Tiếp nhận và cập nhật thông tin liên quan đến hàng secondhand, khách hàng, người bán, và đơn đặt hàng

5.1.3 Hướng phát triển đề tài

- Tích hợp hệ thống thanh toán qua các ví điện tử

- Đăng nhập bằng các tài khoản mạng xã hội

- Xây dựng hệ thống tối ưu hơn để khách hàng có thể mua sắm qua mạng một cách tiện lợi hơn

- Cung cấp khả năng theo dõi và quản lý thông tin chi tiết hơn về đơn hàng của khách hàng

- Chúng em cam kết tiếp tục phát triển và nâng cấp đồ án để đáp ứng những yêu cầu cao hơn của khách hàng

Trong bối cảnh mạng máy tính phát triển không ngừng, việc thiết kế và triển khai các ứng dụng để phục vụ người dùng trở nên ngày càng quan trọng Trong ngữ cảnh này, ý tưởng về việc tạo ra một trang web thương mại điện tử chuyên về đồ secondhand, mặc dù không mới, nhưng vẫn là một đề tài rất phổ biến và thu hút nhiều sự quan tâm

Với kiến thức nền tảng đã được học ở trường và bằng sự nỗ lực của mình, chúng em đã hoàn thành đề tài “Xây dựng Website thương mại điện tử về đồ secondhand” Trong quá trình thực hiện đề tài này, chúng em đã cố gắng hết sức để nghiên cứu, xây dựng, và triển khai chương trình Tuy nhiên, do thời gian hạn chế, có thể có những thách thức chưa được giải quyết hoàn toàn Nhóm chúng em hi vọng nhận được sự thông cảm và góp ý từ thầy để đề tài của nhóm chúng em được hoàn thiện hơn Chúng em xin chân thành cảm ơn Thầy! Một lần nữa chúng em xin chân thành cảm ơn thầy Nguyễn Hữu Trung đã tận tình giúp đỡ nhóm em trong suốt thời gian thực hiện đề tài này Em xin chân thành cảm ơn thầy!

Tiêu đề	Xây Dựng Website Thương Mại Điện Tử Về Đồ Secondhand
Tác giả	Lâm Tâm Như, Trần Hữu Khánh Vy
Người hướng dẫn	ThS. Nguyễn Hữu Trung
Trường học	Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
Chuyên ngành	Công nghệ Thông tin
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2024
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	106
Dung lượng	10,02 MB