Xây dựng website đấu giá trực tuyến sử dụng công nghệ mern stack

TỔNG QUAN

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

Với sự phát triển mạnh mẽ của công nghệ thông tin và Internet, thương mại điện tử đang bùng nổ, tạo ra nhiều cơ hội cho doanh nghiệp như Amazon và Alibaba Thương mại điện tử giúp doanh nghiệp cắt giảm chi phí và mở rộng thị trường quốc tế, đồng thời cải thiện chất lượng dịch vụ và kết nối với khách hàng Website trở thành kênh kinh doanh hiệu quả và tiết kiệm cho các doanh nghiệp Việt Nam, giúp quảng bá hình ảnh và tìm kiếm khách hàng toàn cầu Để có một website thương mại điện tử hiện đại, doanh nghiệp cần thiết kế các module chức năng như cung ứng hàng hóa, quản trị khách hàng và thanh toán, kết hợp với công nghệ tiên tiến Nghiên cứu và khảo sát các mô hình thiết kế website thương mại điện tử là cần thiết để tối đa hóa hoạt động sản xuất kinh doanh.

Đấu giá trực tuyến tại Việt Nam vẫn còn là một khái niệm mới mẻ và chưa được nhiều người chú ý so với các trang thương mại điện tử thông thường Tuy nhiên, chức năng đấu giá có tiềm năng lớn, vì hầu hết các website thương mại điện tử lớn đều tích hợp tính năng này, cùng với nhiều nhóm đấu giá trên Facebook có hàng chục ngàn thành viên Trong việc thiết kế giao diện, do sự hạn chế của các trang web đấu giá hiện có, chúng tôi đã tạo ra một giao diện tương tự như các trang bán hàng, nhưng đã tinh chỉnh để phù hợp và thu hút người dùng hơn.

Nhóm chúng em quyết định chọn MERN STACK cho dự án của mình vì một thành viên đã có kinh nghiệm tiếp cận công nghệ này trong quá trình thực tập, đặc biệt là với Reactjs Việc sử dụng MERN STACK giúp chúng em dễ dàng tương tác và hỗ trợ lẫn nhau trong quá trình phát triển.

Giới thiệu sản phẩm

Sản phẩm của chúng tôi, được phát triển bằng công nghệ MERN STACK, đáp ứng đầy đủ các yêu cầu cơ bản của một trang web đấu giá trực tuyến Người dùng có thể dễ dàng đăng sản phẩm để đấu giá, tùy chỉnh bước giá và thời gian đấu giá theo nhu cầu của mình Điều này tạo ra sự thoải mái và linh hoạt, giúp người dùng tiếp cận trang web một cách dễ dàng và hiệu quả nhất.

Ngôn ngữ lập trình JavaScript đã trở thành một trong những ngôn ngữ phổ biến nhất trên thế giới trong những năm gần đây, đặc biệt là trong lĩnh vực lập trình web, bên cạnh HTML và CSS Khi nói đến JavaScript, không thể không nhắc đến bộ công cụ MERN STACK, bao gồm MongoDB, ExpressJS, ReactJS và NodeJS, giúp lập trình viên xây dựng ứng dụng web full stack từ backend đến frontend một cách hiệu quả.

Hệ thống website đấu giá của chúng tôi hiện tập trung vào các mặt hàng điện tử, nhưng có khả năng điều chỉnh và mở rộng để phục vụ đấu giá nhiều loại sản phẩm đa dạng hơn, bao gồm quần áo, giày dép, xe cộ và các đồ dùng khác theo nhu cầu của người dùng.

Mục tiêu đề tài

Để xây dựng một trang web đấu giá hiệu quả, việc nắm vững nghiệp vụ cơ bản của các trang web hiện có là rất quan trọng Chúng tôi cần khảo sát hiện trạng để hiểu rõ các chức năng và luồng xử lý của các trang web lớn, từ đó phát triển các tính năng hoàn thiện Điều này sẽ giúp tối ưu hóa trải nghiệm người dùng, đảm bảo rằng hệ thống hoạt động mượt mà và đáp ứng nhu cầu của người dùng.

- Tìm hiểu về công nghệ đang được sử dụng cho trang web MERN STACK

MERN STACK là công nghệ chủ yếu được sử dụng để xây dựng hệ thống, được phát triển hoàn toàn bằng ngôn ngữ JavaScript Các thành phần chính của MERN STACK bao gồm MongoDB, một cơ sở dữ liệu noSQL phổ biến, thường kết hợp với Mongoose để đơn giản hóa việc giao tiếp; ExpressJS, một web framework chạy trên Node.js, cung cấp nhiều tính năng như routing, middlewares và template engines; và ReactJS, một thư viện JavaScript thiết kế giao diện người dùng (UI) cho cả nền tảng Web và Mobile.

Chương 1: Tổng quan 3 dụng React Js có thể đem lại trải nghiệm tốt cho người dùng, cũng như khả năng Hot Reload giúp bạn lập trình nhanh hơn o NodeJS: Là một nền tảng được xây dựng trên V8 JavaScript Engine – trình thông dịch thực thi mã JavaScript, giúp xây dựng các ứng dụng web một cách đơn giản và dễ dàng mở rộng

- Tích hợp phương thức thanh toán trực tuyến PayPal

Thanh toán trực tuyến là yếu tố then chốt trong hệ thống thương mại điện tử, giúp hoàn thiện hóa giao dịch hoàn toàn trên Internet Phương thức này mang lại sự nhanh chóng, tiện lợi và tiết kiệm thời gian cho người tiêu dùng.

- Triển khai ứng dụng trong môi trường thực tế

Triển khai ứng dụng trong môi trường thực tế có nghĩa là ứng dụng đã được đưa ra thế giới bên ngoài và tiếp cận với người dùng Tuy nhiên, việc triển khai này đối mặt với nhiều thách thức, đặc biệt là các vấn đề liên quan đến bảo mật, khả năng lưu trữ và sức chịu tải của trang web Hiện tại, chúng tôi vẫn chưa đủ khả năng để tối ưu và xử lý hiệu quả những vấn đề này.

Chúng em sẽ triển khai trang web lên môi trường thực tế để thu thập trải nghiệm và kiến thức mới Cụ thể, backend sẽ được triển khai trên Heroku, trong khi frontend sẽ được triển khai trên Firebase.

Cấu trúc khóa luận

GIỚI THIỆU VỀ CÔNG NGHỆ

Công nghệ MERN STACK là gì?

MERN STACK là nguyên bộ combo open source các công nghệ đều liên quan đến JavaScript hot nhất hiện nay: MongoDB, ExpressJS, ReactJS, NodeJS

Hình 2.1: MEARN STACK 2.1.1 MongoDB là gì?

- MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql và được hàng triệu người sử dụng

Chương 2: Giới thiệu về công nghệ 6

MongoDB là một cơ sở dữ liệu dạng tài liệu, trong đó dữ liệu được lưu trữ dưới dạng document kiểu JSON, khác với cấu trúc bảng của cơ sở dữ liệu quan hệ, giúp tăng tốc độ truy vấn một cách đáng kể.

Trong CSDL quan hệ, bảng là khái niệm cơ bản để lưu trữ dữ liệu, như trong MySQL hay SQL Server Ngược lại, MongoDB sử dụng khái niệm collection thay vì bảng để tổ chức dữ liệu.

- So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng với row, MongoDB sẽ dùng các document thay cho row trong RDBMS

- Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định

- Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB

MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON, cho phép mỗi collection có kích thước và các document khác nhau Điều này mang lại sự linh hoạt trong việc lưu trữ dữ liệu, giúp người dùng dễ dàng thêm mới thông tin mà không gặp phải giới hạn.

Dữ liệu trong MongoDB không yêu cầu sự ràng buộc lẫn nhau và không hỗ trợ join như trong hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) Điều này cho phép quá trình chèn, xóa hoặc cập nhật dữ liệu diễn ra nhanh chóng mà không cần kiểm tra các ràng buộc dữ liệu như trong RDBMS.

MongoDB nổi bật với khả năng mở rộng dễ dàng thông qua tính năng mở rộng ngang (Horizontal Scalability) Hệ thống sử dụng khái niệm cluster, bao gồm các node chứa dữ liệu có khả năng giao tiếp với nhau Để mở rộng hệ thống, người dùng chỉ cần thêm một node mới vào cluster.

- Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn thông tin đạt hiệu suất cao nhất

Khi có một truy vấn dữ liệu, bản ghi sẽ được lưu vào bộ nhớ RAM, giúp tăng tốc độ truy vấn cho lần tiếp theo mà không cần truy cập ổ cứng.

MongoDB mang lại hiệu năng cao với tốc độ truy vấn (tìm kiếm, cập nhật, chèn, xóa) nhanh hơn nhiều so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) Các thử nghiệm cho thấy, với một lượng dữ liệu lớn, tốc độ chèn của MongoDB có thể nhanh gấp 100 lần so với MySQL.

Một trong những ưu điểm nổi bật của MongoDB chính là sự linh hoạt trong việc không có các tính chất ràng buộc như trong hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) Tuy nhiên, điều này cũng trở thành nhược điểm, vì người dùng cần phải thao tác một cách cẩn thận để tránh các lỗi không mong muốn.

Dữ liệu lưu trữ dưới dạng key-value tiêu tốn bộ nhớ, vì các collection chỉ khác nhau ở giá trị, dẫn đến việc lặp lại key Hơn nữa, việc không hỗ trợ join khiến cho tình trạng dư thừa dữ liệu trở nên dễ xảy ra.

Khi thực hiện các thao tác insert, update hoặc remove bản ghi, MongoDB không ngay lập tức cập nhật dữ liệu xuống ổ cứng mà sẽ thực hiện ghi toàn bộ dữ liệu thay đổi từ RAM sau 60 giây Điều này có thể trở thành nhược điểm lớn, vì có nguy cơ mất dữ liệu trong các tình huống như mất điện.

Express.js là một framework nhỏ nhưng linh hoạt, được xây dựng trên nền tảng Node.js, cung cấp những tính năng mạnh mẽ cho việc phát triển ứng dụng web và di động.

- Và hơn hết, các Framework nổi tiếng của NodeJS hiện nay đều sử dụng ExpressJS như một core function, chẳng hạn: MERN, SailsJS, MEAN,

- Root: Chứa các file như packages.json, webpack, và một file root(.js) chứa toàn bộ project

- Views: Chứa view/engine template cho ứng dụng

- Controller: o Nhận request và gửi lên server (thông qua models) sau đó trả lại response

Chương 2: Giới thiệu về công nghệ 8 o Controllers tương tác với cả views và models

- Models: o Chứa các schema tương ứng với các trường dữ liệu trên server o models chỉ tương tác với controller

- Public: Các file tĩnh như css, img, js

Middleware là các hàm trung gian giúp tiền xử lý và lọc các yêu cầu (request) trước khi gửi phản hồi (response) đến người dùng Chỉ những yêu cầu đáp ứng đủ điều kiện mới được phép tiếp tục xử lý trong chương trình.

ReactJS là một thư viện mã nguồn mở được phát triển bởi Facebook, nhằm tạo ra các ứng dụng web hấp dẫn với tốc độ nhanh và hiệu quả cao Thư viện này giúp tối ưu hóa mã hóa, mang lại trải nghiệm người dùng mượt mà và ấn tượng.

Mục đích chính của ReactJS là đảm bảo rằng các website sử dụng nó hoạt động mượt mà, nhanh chóng và có khả năng mở rộng cao, đồng thời dễ dàng trong việc triển khai.

Công nghệ DOM ảo, hay còn gọi là Virtual DOM, giúp cải thiện hiệu năng cho ứng dụng bằng cách chỉ thay đổi node gốc khi có sự thay đổi trạng thái, từ đó tái cấu trúc toàn bộ DOM tree mà không cần phải xử lý lại tất cả các phần tử Điều này giúp tăng tốc độ xử lý và tối ưu hóa hiệu suất cho các ứng dụng sử dụng React JS.

RESTful API là gì

REST, viết tắt của Representational State Transfer, là một chuẩn web dựa trên kiến trúc sử dụng giao thức HTTP Nó xử lý tài nguyên, trong đó mỗi thành phần là một tài nguyên có thể truy cập qua các giao diện chung bằng cách sử dụng các phương thức HTTP chuẩn Chuẩn REST lần đầu tiên được giới thiệu bởi Roy Fielding vào năm 2000.

Một REST Server cung cấp chế độ truy cập đến các nguồn tài nguyên, trong khi REST Client thực hiện việc truy cập và sửa đổi chúng thông qua các phương thức HTTP Mỗi nguồn tài nguyên được xác định bởi một URI, và REST sử dụng nhiều định dạng biểu diễn khác nhau cho các nguồn tài nguyên, với JSON là định dạng phổ biến nhất.

2.2.2 Các phương thức HTTP được sử dụng trong REST

HTTP định nghĩa 9 phương thức chính để thực hiện các yêu cầu giữa các hệ thống, bao gồm GET, HEAD, POST, PUT, PATCH, DELETE, CONNECT, OPTIONS và TRACE Trong bài viết này, nhóm thực hiện sẽ tập trung vào việc sử dụng các phương thức này để thêm, xóa, cập nhật và đọc tài nguyên.

- GET: dùng để truy xuất dữ liệu và không sửa đổi thông tin theo bất kì cách nào

- POST: dùng để tạo ra một đối tượng mới trong cơ sở dữ liệu

- PATCH: dùng để cập nhật một phần thông tin của đối tượng được yêu cầu

- DELETE: dùng để xóa đối tượng được yêu cầu

- Khả năng mở rộng cao nhờ sự tách biệt giữa các thành phần

- Sử dụng được cho nhiều nền tảng khác nhau mobile, web…

- Giao tiếp giữa các thành phần được định nghĩa rõ ràng, dễ hiểu

- Khả năng thay đổi linh hoạt, không phụ thuộc vào một loại dữ liệu nhất định

JSON Web Token (JWT) là gì?

JSON Web Token (JWT) là một tiêu chuẩn mở (RFC 7519) cho phép truyền tải thông tin an toàn giữa các bên thông qua một đối tượng JSON Thông tin trong JWT có thể được xác thực và đảm bảo tính tin cậy nhờ vào chữ ký của nó, được mã hóa bằng HMAC hoặc RSA.

Hình 2.6: Cách hoạt động của JWT

Những đặc điểm nổi bật của JWT:

JWT có kích thước nhỏ, cho phép truyền qua URL, giao thức POST, hoặc nhét vào HTTP Header, giúp tăng tốc độ truyền tải Dưới đây là hướng dẫn cách truyền token vào HTTP Header bằng Bearer Schema.

Payload là phần chứa toàn bộ thông tin cần thiết, như dữ liệu người dùng, giúp giảm thiểu việc truy vấn cơ sở dữ liệu nhiều lần.

Hình 2.7: Thành phần của JWT

Header của token bao gồm hai phần chính: loại token, mặc định là JWT, cho biết đây là một Token JWT, và thuật toán mã hóa được sử dụng, có thể là HMAC SHA256 (HS256) hoặc RSA.

Payload trong JWT chứa các claims, là những biểu thức liên quan đến thực thể như người dùng và các metadata phụ trợ Có ba loại claims chính trong Payload: claims reserved, public và private Claims reserved bao gồm các metadata được định nghĩa trước, trong đó một số là bắt buộc và số còn lại nên tuân theo để đảm bảo JWT hợp lệ Claims public là những claims được cộng đồng công nhận và sử dụng rộng rãi Cuối cùng, claims private là các claims tự định nghĩa, không trùng với claims reserved và public, được tạo ra để chia sẻ thông tin giữa hai bên đã thỏa thuận và thống nhất trước đó.

Chữ ký (Signature) trong JWT là một chuỗi được mã hóa từ header và payload kết hợp với một chuỗi bí mật Vì Signature bao gồm cả header và payload, nó có thể được sử dụng để kiểm tra tính toàn vẹn của dữ liệu trong quá trình truyền tải.

Heroku là gì

Heroku là nền tảng đám mây PaaS (Platform as a Service) giúp lập trình viên xây dựng, triển khai, quản lý và mở rộng ứng dụng một cách dễ dàng.

Nó rất linh hoạt và dễ sử dụng, mang đến một phương thức đơn giản để tiếp cận người dùng Giải pháp này cho phép các nhà phát triển tập trung vào việc cải tiến sản phẩm mà không cần lo lắng về việc quản lý máy chủ hay phần cứng.

- Có thể dùng miễn phí cho nhiều ngôn ngữ: Nodejs, PHP, Python, Kotlin,…

- Cung cấp Database, SSL miễn phí, hỗ trợ mạnh làm việc team cũng như liên kết với Github một cách đơn giản

- Việc miễn phí sẽ chỉ có giới hạn là 550 giờ mỗi tháng Nếu muốn tăng lên 1000 giờ thì bạn cần cài đặt phương thức thanh toán trên đó

ỨNG DỤNG ĐẤU GIÁ TRỰC TUYẾN

THIẾT KẾ HỆ THỐNG

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

Bảng 1: Yêu cầu chức năng của Guest

Tạo tài khoản ôFunctionalằ Status: Approved Priority: Hight Difficulty: Low

Cho phép Guest tạo tài khoản Đăng nhập ôFunctionalằ Status: Approved Priority: Hight Difficulty: Low

Cho phép Guest đăng nhập vào ứng dụng

Xem trang chủ ôFunctionalằ Status: Approved Priority: Hight Difficulty: Medium

Cho phép Guest xem trang chủ của ứng dụng Bao gồm:

- Xem một số sản phẩm sắp hết hạn

- Xem một số sản phẩm theo từng loại sản phẩm (điện thoại, máy tính,…)

Xem danh sách sản phẩm ôFunctionalằ Status: Approved Priority: Hight Difficulty: Medium

Cho phép Guest xem toàn bộ sản phẩm mà người dùng đã chọn ở trang chủ Bao gồm:

- Xem một số sản phẩm sắp hết hạn, có phân trang

- Xem một số sản phẩm theo từng loại sản phẩm (điện thoại, máy tính,…), có phân trang

Xem chi tiết sản phẩm ôFunctionalằ Status: Approved Priority: Hight Difficulty: Medium

Chương 4: Thiết kế hệ thống 19

Cho phép khách hàng xem thông tin chi tiết về sản phẩm bao gồm tên sản phẩm, hình ảnh, giá hiện tại, bước giá, giá mua ngay, mô tả sản phẩm và danh sách những người đang đặt giá cho sản phẩm đó.

Bảng 2: Yêu cầu chức năng của User

Xem trang chủ (giống với Guest)

Xem danh sách sản phẩm (giống với Guest)

Xem chi tiết sản phẩm (giống với Guest)

Tạo sản phẩm đấu giá ôFunctionalằ Status: Approved Priority: Hight Difficulty: Low

Users can create products for auction by entering all necessary information Each product can include a maximum of four images The auction status is set to "Approved," with a high priority and medium difficulty level.

Cho phép User thực hiện đấu giá sản phẩm mà họ mong muốn Giá đấu sẽ bằng chính giá hiện tại của sản phẩm cộng thêm bước giá

Thực hiện mua sản phẩm ngay lập tức ôFunctionalằ Status: Approved Priority: Hight Difficulty: Low

Cho phép người dùng ngay lập tức mua được ngay sản phẩm

Xem danh sách sản phẩm đã tạo ôFunctionalằ Status: Approved Priority: Hight Difficulty: Low

Cho phép User xem lại, theo dõi các sản phẩm mà mình đã tạo

Xem danh sách sản phẩm đã đấu giá ôFunctionalằ Status: Approved Priority: Hight Difficulty: Low

Cho phép User xem lại, theo dõi các sản phẩm mà mình đã đấu giá

Xem thông tin cá nhân ôFunctionalằ Status: Approved Priority: Hight Difficulty: Low

Cho phép User xem lại thông tin cá nhân của bản thân

Thanh toán sản phẩm ôFunctionalằ Status: Approved Priority: Hight Difficulty: Medium

Người dùng có thể cung cấp thêm thông tin để thực hiện thanh toán sản phẩm Nếu chỉ nhập địa chỉ, ứng dụng sẽ mặc định thanh toán theo hình thức COD Bên cạnh đó, người dùng cũng có tùy chọn thanh toán qua ví điện tử PayPal.

Rating người bán ôFunctionalằ Status: Approved Priority: Medium Difficulty: Medium

Cho phép User đánh giá người dùng khác thông qua hóa đơn sản phẩm Mỗi hóa đơn thì User sẽ chỉ đánh giá được một lần

Thông báo ôFunctionalằ Status: Approved Priority: Medium Difficulty: Medium

Cho phép User nhận được thông báo khi đấu giá thành công sản phẩm Đăng xuất ôFunctionalằ Status: Approved Priority: Hight Difficulty: Low

Cho phép User đăng xuất tài khoản Sau khi đăng xuất thì token, thông tin của User sẽ bị xóa

Bảng 3: Yêu cầu chức năng Admin Đăng nhập admin ôFunctionalằ Status: Approved Priority: Hight Difficulty: Low

Cho phép Admin đăng nhập với tài khoản đã có sãn

Xem thống kê ôFunctionalằ Status: Approved Priority: Hight Difficulty: Low

Cho phép Admin xem thống kê doanh thu của ứng dụng

Quản lý tài khoản ôFunctionalằ Status: Approved Priority: Hight Difficulty: Low

Cho phép Admin xem danh sách toàn bộ thông tin tài khoản Có thể xóa tài khoản nếu thấy cấn thiết

Quản lý sản phẩm ôFunctionalằ Status: Approved Priority: Hight Difficulty: Low

Cho phép Admin xem danh sách thông tin toàn bộ sản phẩm, duyệt những sản phẩm hợp lệ để show trên trang web ứng dụng

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

Bảng 4: Yêu cầu phi chức năng

Khả năng mở rộng ôFunctionalằ Status: Proposed Priority: Medium Difficulty: High

Có khả năng mở rộng thêm các chức năng mới

Giao diện ôFunctionalằ Status: Approved Priority: High Difficulty: High

Giao diện dễ nhìn, dễ sử dụng

Authorization ôFunctionalằ Status: Approved Priority: Hight Difficulty: Low

Xác thực người dùng Hệ thống phân quyền cho người dùng và lưu lại token khi người dùng đăng nhập vào hệ thống

Thiết kế sơ đồ use case

Hình 4.1: Sơ đồ Use Case

Bảng 5: Use case đăng nhập

Tên use case Đăng nhập

Tóm tắt Usecase bắt đầu khi một người dùng muốn đăng nhập vào hệ thống

Dòng sự kiện chính 1 Người dùng chọn chức năng “Đăng nhập”

2 Hệ thống yêu cầu người dùng nhập tài khoản, mật khẩu

3 Người dùng nhập tài khoản, mật khẩu

4 Hệ thống kiểm tra tài khoản, mật khẩu được nhập và cho phép người dùng đăng nhập vào hệ thống

5 Usecase kết thúc Dòng sự kiện phụ 1 Người dùng nhập sai tài khoản hoặc mật khẩu

2 Hệ thống đưa cho phép người dùng nhập lại, hệ thống trở về đầu dòng sự kiện chính

Các yêu cầu đặc biệt Không có Điều kiện tiên quyết Có tài khoản trong hệ thống

Hậu điều kiện Nếu Người dùng đăng nhập thành công, hệ thống cung cấp quyền tương ứng cho actor Ngược lại trạng thái hệ thống không thay đổi

Bảng 6: Use case đăng kí

Tên use case Đăng kí

Tóm tắt Usecase bắt đầu khi một người dùng muốn tạo tài khoản

Dòng sự kiện chính 1 Người dùng chọn chức năng “Đăng ký”

2 Hệ thống hiển thị và yêu cầu người dùng điền các thông tin sau: họ tên, tài khoản, email, số điện thoại, ngày sinh, giới tính, địa chỉ

3 Người dùng điền đầy đủ các thông tin trên, đồng ý “Đăng ký” với các điều khoản hệ thống đưa ra

4 Hệ thống kiểm tra tính hợp lệ của các thông tin: a Họ tên, tài khoản, email, số điện thoại, b Tài khoản chỉ bao gồm các ký tự là chữ cái hoặc số, dấu chấm, gạch dưới, không được có các ký tự đặc biệt

Chương 4: Thiết kế hệ thống 25 c Tài khoản, Họ Tên không phản cảm, không có ý nghĩa bậy bạ không có khoảng trắng

5 Hệ thống lưu thông tin xuống CSDL

6 Usecase kết thúc Dòng sự kiện phụ 1 Tài khoản đã tồn tại.-> Hệ thống yêu cầu người dùng chọn tài khoản khác

2 Email hoặc Số điện thoại đã tồn tại.-> Hệ thống yêu cầu người dùng kiểm tra Email hoặc Số điện thoại Nếu người dùng đã đăng ký, vui lòng chọn chức năng “Khôi phục tài khoản”

3 Người dùng chưa nhập đầy đủ thông tin.-> Hệ thống yêu cầu người dùng nhập đầy đủ thông tin

4 Thông tin về họ, tên, email, số điện thoại ngày sinh, giới tính, chỗ ở hiện nay không hợp lệ.-> Hệ thống yêu cầu người dùng khai báo chính xác, kèm theo hướng dẫn giúp người dùng thực hiện Các yêu cầu đặc biệt Không có Điều kiện tiên quyết Có tài khoản trong hệ thống

Hậu điều kiện Kết thúc usecase: Nếu thành công, người dùng tạo tài khoản thành công và trở thành thành viên của hệ thống

Hệ thống cập nhật cơ sở dữ liệu cho phép người dùng đăng nhập để tham gia đấu giá hoặc đăng sản phẩm cho người khác đấu giá Tuy nhiên, trạng thái của hệ thống sẽ không thay đổi trong quá trình này.

Bảng 7: Use case xem trang chủ

Tên use case Xem trang chủ

Tóm tắt Usecase bắt đầu khi người dùng đăng nhập hay mở trang web lên

Dòng sự kiện chính Người dùng có thể thấy được thông tin, giao diện chính của trang web

Dòng sự kiện phụ Không có

Các yêu cầu đặc biệt Không có Điều kiện tiên quyết Phải đăng nhập vào hệ thống

Hậu điều kiện Kết thúc usecase, người dùng xem được sản phẩm và có thể thao tác để tiến tới thao tác xem danh sách sản phẩm

4.3.2.4 Use case xem danh sách sản phẩm

Bảng 8: Use case xem danh sách sản phẩm

Tên use case Xem danh sách sản phẩm

Tóm tắt Usecase bắt đầu khi người dùng muốn xem danh sách sản phẩm

Dòng sự kiện chính 1 Người dùng có nhu cầu lựa chọn sản phẩm

2 Hệ thống cho phép người dùng xem danh sách sản phẩm

3 Người dùng chọn danh sách muốn xem theo danh mục hoặc có thể là những sản phẩm sắp hết thời gian đấu giá

4 Hệ thống hiển thị danh sách sản phẩm

Các yêu cầu đặc biệt Không có Điều kiện tiên quyết Không có

Hậu điều kiện Kết thúc usecase, người dùng xem được danh sách sản phẩm mong muốn

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

Bảng 9: Use case xem chi tiết sản phẩm

Tên use case Xem chi tiết sản phẩm

Tóm tắt Usecase mô tả các cách người dùng xem thông tin sản phẩm

Dòng sự kiện chính 1 Người dùng chọn sản phẩm muốn xem

2 Hệ thống hiển thị chi tiết sản phẩm bao gồm các thông tin: tên sản phẩm, hình ảnh sản phẩm, thông tin chi tiết sản phẩm, tình trạng sản phẩm, giá hiện tại, bước giá, thời gian kết thúc đấu giá, và danh sách các phiên đấu giá của trước đó của sản phẩm

Các yêu cầu đặc biệt Không có Điều kiện tiên quyết Không có

Hậu điều kiện Kết thúc usecase, người dùng xem được thông tin chi tiết sản phẩm

Bảng 4.10: Use case quản lý tài khoản

Tên use case Quản lý thông tin tài khoản

Tóm tắt Usecase mô tả các cách người dùng xem thông tin tài khoản

Dòng sự kiện chính 1 Người dùng bấm vào chọn thông tin cá nhân

2 Hệ thống hiển thị thông tin cá nhân của người dùng

3 Người dùng có thể chỉnh sửa thông tin cá nhận của bản thân

Hậu điều kiện Kết thúc usecase, người dùng xem, chỉnh sửa được thông tin của bản thân

Bảng 4.11: Use case quản lý sản phẩm

Tên use case Quản lý sản phẩm đăng bán

Tóm tắt Usecase mô tả các cách người dùng đăng bán sản phẩm hoặc theo dõi, xem lại sản phẩm mình đã đăng

Dòng sự kiện chính 1 Thành viên chọn chức năng “Đăng sản phẩm”.

2 Hệ thống hiển thị giao diện đăng sản phẩm cho thành viên điền thông tin

3 Thành viên điền các thông tin của sẩn phẩm cần đăng

4 Hệ thống kiểm tra tính hợp lệ của các thông tin Thành viên đã điền vào

5 Hệ thống cho phép Thành viên đăng hình ảnh sản phẩm, tối đa 4 hình ảnh

6 Thành viên đồng ý “Hoàn Tất”

7 Hệ thống lưu sản phẩm và đặt sản phẩm ở trạng thái “Chưa đấu giá”, phải đợi admin duyệt xem sản phẩm có hợp lệ

8 Nếu hợp lí sản phẩm sẽ được đăng lên để mọi người khác đấu giá

9 Người dùng có thể chọn xem lại sản phẩm đã đăng để có thể theo dõi tình hình cũng như giá hiện tại của sản phẩm

Hậu điều kiện Không có

Bảng 4.12: Use case đấu giá sản phẩm

Tên use case Đấu gia sản phẩm

Tóm tắt Usecase bắt đầu khi thành viên muốn tham gia đấu giá sản phẩm

Dòng sự kiện chính 1 Thành viên chọn đấu giá sản phẩm

2 Hệ thống cập nhật “giá hiện tại” theo bước giá mà người đăng bán đã đặt và thành viên, người ra giá hiện tại xuống CSDL và hiện lên trên bảng các phiên đấu giá của sản phẩm

Các yêu cầu đặc biệt Không có Điều kiện tiên quyết Thành viên đã đăng nhập vào hệ thống

Hậu điều kiện Kết thúc usecase: Thành viên đặt giá thành công

Bảng 4.13: Use case theo dõi sản phẩm

Tên use case Theo dõi sản phẩm

Tóm tắt Usecase mô tả cách người dùng theo dõi các sản phẩm mình đã đấu giá

Dòng sự kiện chính 1 Thành viên chọn xem lại lịch sử phiên đấu giá

2 Người dùng có thể thấy toàn bộ sản phẩm mình đã đang đấu giá, theo dõi giá hiện tại của sản phẩm

Các yêu cầu đặc biệt Không có

Chương 4: Thiết kế hệ thống 30 Điều kiện tiên quyết Thành viên đã đăng nhập vào hệ thống Sản phẩm đó còn đang được đấu giá

4.3.2.10 Mua sản phẩm ngay lập tức

Bảng 4.14: Use case mua sản phẩm ngay

Tên use case Mua sản phẩm ngay lập tức

Tóm tắt Usecase mô tả cách người dùng nhấn nút mua sản phẩm ngay lập tức

Dòng sự kiện chính 1 Thành viên nhấn nút mua sản phẩm ngay lập tức

2 Chuyển tới trang thanh toán để xử lý hóa đơn người dùng

Bảng 4.15: Use case đánh giá

Tên use case Đánh giá

Tóm tắt Usecase mô tả cách mà người dùng đánh giá người đang sản phẩm thông qua hóa đơn

Dòng sự kiện chính 1 Thành viên vào trang xem lại lịch sử hóa đơn

2 Nhấp vào hóa đơn và chọn số sao để đánh giá người đăng bán sản phẩm đó

3 Rating người bán sẽ bằng trung bình số sao người đó có được trên từng hóa đơn

Để đánh giá hóa đơn, thành viên cần đăng nhập vào hệ thống và đảm bảo rằng hóa đơn chưa được đánh giá trước đó Mỗi hóa đơn chỉ được phép đánh giá một lần.

Bảng 4.16: Use case thanh toán

Tên use case Thanh toán

Tóm tắt Usecase mô tả cách mà người thanh toán sản phẩm

Dòng sự kiện chính 1 Thành viên vào trang thanh toán sản phẩm

2 Nếu muốn thanh toán trực tuyến thì nhấp chọn thanh toán bằng thẻ hoặc PayPal, còn nếu thanh toán khi nhận hàng thì có thể ấn submit thanh toán luôn

Các yêu cầu đặc biệt Không có Điều kiện tiên quyết Thành viên đã đăng nhập vào hệ thống Nhập đầy đủ thông tin địa chỉ cần thiết

Bảng 4.17: Use case đăng xuất

Tên use case Đăng xuất

Tóm tắt Usecase mô tả chức năng đăng xuất

Dòng sự kiện chính 1 Người dùng bấm đăng xuất khỏi trang web

Token của người dùng sau đó sẽ bị xóa

Bảng 4.18: Use case thống kê doanh thu

Tên use case Thống kê doanh thu

Tóm tắt Usecase bắt đầu khi Admin đăng nhập thành công

Dòng sự kiện chính 1 Admin khi vào trang có thể xem thống kê doanh thu của trang web

Các yêu cầu đặc biệt Không có Điều kiện tiên quyết Admin đã đăng nhập vào hệ thống

Bảng 4.19: Use case quản lý sản phẩm Admin

Tên use case Quản lý sản phẩm

Tóm tắt Usecase bắt đầu khi Admin ấn vào nút bấm sản phẩm trên Sidebar

Dòng sự kiện chính 1 Admin khi ấn vào nút bấm sản phẩm

2 Show toàn bộ sản phẩm có trên trang web

3 Admin có thể chọn những sản phẩm chưa được bày bán để duyệt sản phẩm và cho sản phẩm đó

Chương 4: Thiết kế hệ thống 33 đăng trên trang web

4.3.2.15 Xem thông tin người dùng

Bảng 4.20: Use case xem thông tin người dùng

Tên use case Xem thông tin người dùng

Tóm tắt Usecase bắt đầu khi Admin ấn vào nút bấm user trên

Dòng sự kiện chính 1 Admin khi ấn vào nút bấm user

2 Show toàn bộ user có trên trang web, tuy nhiên mật khẩu sẽ bị hash

Một số lược đồ Activity chính

4.4.3 Activity xem danh sách sản phẩm

Hình 4.4: Activity xem danh sách sản phẩm

4.4.4 Activity xem chi tiết sản phẩm

Hình 4.5: Activity xem chi tiết sản phẩm 4.4.5 Activity đăng sản phẩm

Hình 4.6: Activity đăng sản phẩm

Hình 4.8: Activity duyệt sản phẩm

Một số lược đồ tuần tự chính

4.5.1 Lược đồ tuần tự chức năng đăng nhập

Hình 4.9: Lược đồ đăng nhập

4.5.2 Lược đồ tuần tự chức năng đăng kí

Hình 4.10: Lược đồ đăng kí

4.5.3 Lược đồ tuần tự chức năng xem danh sách sản phẩm

Hình 19: Lược đồ xem danh sách sản phẩm 4.5.4 Lược đồ tuần tự chức năng xem chi tiết sản phẩm

Hình 4.11: Lược đồ xem chi tiết sản phẩm

4.5.5 Lược đồ tuần tự chức năng đăng sản phẩm

Hình 4.12: Lược đồ đăng sản phẩm

4.5.6 Lược đồ tuần tự chức năng đặt giá

Mô hình dữ liệu quan hệ

Hình 4.14: Mô hình quan hệ dữ liệu

Trong dữ liệu được lưu trữ, mỗi sản phẩm chỉ thuộc một người dùng và một người dùng có thể tạo nhiều sản phẩm

Trong dữ liệu được lưu trữ, mỗi phiên đấu giá chỉ thể hiện cho một sản phẩm nhưng mỗi sản phẩm có thể có nhiều phiên đấu giá

Trong dữ liệu được lưu trữ, mỗi phiên đấu giá chỉ thể hiện cho một người dùng nhưng một người dùng có thể đấu giá nhiều lần

Trong dữ liệu được lưu trữ, mỗi hóa đơn chỉ thuộc một người dùng và một người dùng có thể có nhiều hóa đơn

Trong dữ liệu được lưu trữ, mỗi hóa đơn chỉ điền cho một người bán và mỗi người bán có thể bán nhiều sản phẩm

Trong dữ liệu được lưu trữ, mỗi hóa đơn chỉ điền cho một sản phẩm và một sản phẩm cũng chỉ cho một hóa đơn

Trong dữ liệu được lưu trữ, mỗi hóa đơn chỉ điền cho một địa chỉ và mỗi địa chỉ chỉ dành cho một hóa đơn

Thiết kế giao diện hệ thống

Bảng 4.21: Mô tả màn hình chính

Chức năng Mô tả chức năng

Chương 4: Thiết kế hệ thống 48 Đang đấu giá Hiển thị danh sách các sản phẩm đang đấu giá và các sản phẩm đang bán (nếu chưa đăng nhập sẽ bị chuyển qua trang đăng nhập) Đăng nhập Chuyển qua trang Đăng nhập để đăng nhập tài khoản Đăng kí Chuyển qua trang Đăng ký để đăng ký tài khoản mới

Sell now Đăng sản phẩm mình muốn đấu giá (nếu chưa đăng nhập sẽ bị chuyển qua trang đăng nhập)

Giới thiệu Hướng dẫn người dùng cách thức đăng sản phẩm, đấu giá…

Tên các loại sản phẩm

Chuyển vào trang xem tất cả các sản phẩm

Expire Hiển thị 5 sản phẩm có thời gian gần hết hạn nhất

Laptop Hiển thị 5 sản phẩm của laptop

Mobile Hiển thị 5 sản phẩm của điện thoại

Watch Hiển thị 5 sản phẩm của đồng hồ thông minh

Tablet Hiển thị 5 sản phẩm của tablet

Accessory Hiển thị 5 sản phẩm của phụ kiện

Camera Hiển thị 5 sản phẩm của máy chụp hình

Trang chủ Tải lại trang chủ

Hình 4.16: Màn hình đăng nhập

Hình 4.16.1: Modal đăng nhập bằng Google

Hình 4.16.2: Màn hình đăng nhập bằng Facebook

Bảng 4.22: Mô tả màn hình đăng nhập

Chức năng Mô tả chức năng Đăng nhập Người dùng truy cập hệ thống bằng tài khoản (user): tên đăng nhập và password.

Thông báo Thông báo nếu người sử dụng nhập sai thông tin sẽ nhận được thông báo sai username hoặc password

Create new account Đăng ký tài khoản truy cập hệ thống đấu giá trực tuyến nếu chưa có. Đăng nhập bằng

Người dùng truy cập hệ thống bằng tài khoản Google Khi click sẽ hiển thị modal để nhập tài khoản google

Chương 4: Thiết kế hệ thống 51 Đăng nhập bằng

Người dùng truy cập hệ thống bằng tài khoản Facebook Khi click sẽ hiển thị modal để nhập tài khoản facebook

4.7.3 Màn hình đắng kí tài khoản

Hình 4.17: Màn hình đăng kí Bảng 4.23: Mô tả màn hình đăng kí tài khoản

Chức năng Mô tả chức năng Đăng ký tài khoản Người dùng đăng ký tài khoản truy cập hệ thống nếu chưa có.

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

Thông báo User already registered nếu tài khoản đã tồn tại Thông báo Something went wrong nếu bạn nhập sai thông tin

4.7.4 Màn hình danh sách sản phẩm

Hình 4.18: Màn hình danh sách sản phẩm

Hình 4.18.1: Modal danh sách các màn hình cá nhân

Hình 4.18.2: Modal hiển thị các thông báo

Bảng 4.24: Mô tả màn hình danh sách sản phẩm

Hiển thị thông báo của người dùng (nếu chưa đăng nhập thì thông báo sẽ trống)

Thông tin tài khoản - Profile: chuyển sang trang thông tin của người dùng (nếu chưa đăng nhập thì chuyển về trang đăng nhập)

- History: chuyển sang trang lịch sử những đơn hàng của người dùng (nếu chưa đăng nhập thì chuyển về trang đăng nhập)

- Home: chuyển về trang chủ

- Log out: đăng xuất khỏi tài khoản hiện tại và chuyển về trang chủ (nếu chưa đăng nhập thì chuyển về trang chủ)

Expired Hiển thị danh sách tất cả các tài khoản theo thứ tự thời gian đấu giá còn lại tăng dần

Hiển thị danh sách tất cả các sản phẩm đấu giá theo loại sản phẩm được chọn

Các sản phẩm Chọn sản phẩm nào sẽ chuyển vào trang thông tin chi tiết của sản phẩm đó

Phân trang Chọn số trang để coi thêm các sản phẩm

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

Hình 4.19: Màn hình chi tiết sản phẩm Bảng 4.25: Mô tả màn hình chi tiết sản phẩm

Hiển thị hình ảnh đầu tiên của sản phẩm Chọn những hình ảnh còn lại để có thể coi rõ hơn về kiểu dáng của sản phẩm

Hiển thị tên, giá hiện tại của sản phẩm, giá để có thể lấy luôn sản phẩm, mô tả và bước giá của sản phẩm

Hiển thị thời gian còn lại của phiên đấu giá

Thông tin người đang bỏ giá

Hiển thị tên người đặt giá cùng số tiền đặt Để tham gia đấu giá, người dùng cần đặt giá sản phẩm bằng giá hiện tại cộng thêm bước giá Nếu người dùng chưa đăng nhập, hệ thống sẽ chuyển hướng về trang đăng nhập Sau khi nhấn nút, bảng thông tin về người đang bỏ giá sẽ được cập nhật theo thời gian thực mà không cần tải lại trang.

Mua luôn Cho người dùng mua ngay sản phẩm nếu muốn mua ở mức giá mua ngay của người đăng

Làm mới Reload lại trang

4.7.6 Màn hình đăng sản phẩm

Hình 4.20: Màn hình đăng sản phẩm Bảng 4.26: Mô tả màn hình đăng sản phẩm

Hiển thị các textbox yêu cầu điền thông tin của sản phẩm, thông tin đấu giá của sản phẩm cần đăng

Thông báo Thông báo thiếu thông tin chỗ bị thiếu thông tin

Thông báo đăng sản phẩm thành công Đăng hình Cho phép người dùng đăng 1 hoặc nhiều tấm hình của sản phẩm

Submit Xác nhận người đăng đã cọc tiền và điền đầy đủ thông tin trước khi đăng sản phẩm đấu giá

Paypal Bắt buộc người bán phải đặt cọc tiền thông qua chuyển khoản bằng

Paypal trước khi đăng bán đấu giá để tránh bán hàng gian dối sẽ mất tiền đã đặt cọc

Để ngăn chặn tình trạng bán hàng gian dối, người bán được yêu cầu phải đặt cọc tiền thông qua chuyển khoản bằng thẻ trước khi tiến hành đăng bán đấu giá Việc này giúp bảo vệ quyền lợi của cả hai bên và đảm bảo rằng số tiền đặt cọc sẽ không bị mất.

4.7.7 Màn hình đang đấu giá - theo dõi đấu giá

Hình 4.21: Màn hình đang đấu giá - theo dõi đấu giá

Bảng 4.27: Mô tả màn hình lịch sử đấu giá

Chức năng "Đang theo dõi" cho phép người dùng xem thông tin về các sản phẩm mà họ đã đặt giá, trong khi chức năng "Đang đấu giá" hiển thị thông tin của các sản phẩm hiện đang trong quá trình đấu giá.

Trở lại Chuyển về trang chủ

Các sản phẩm đang theo dõi/ đấu giá

Chuyển qua trang thông tin chi tiết của sản phẩm đang đặt giá

Hình 4.22: Màn hình thanh toán

Bảng 4.28: Mô tả màn hình thanh toán

Submit Điền đầy đủ thông tin và submit nếu bạn muốn thanh toán trực tiếp khi nhận hàng Sau đó chuyển về trang

Paypal Click paypal sẽ hiển thị màn hình đăng nhập của

Paypal sau khi đăng nhập và thanh toán xong nút paypal sẽ biến mất

TDebit or Credit Card Click sẽ hiện thị phần điền thông tin thanh toán thẻ sau khi thanh toán xong sẽ biến mất

Thank you Chuyển về trang chủ

4.7.9 Màn hình thông tin người dùng – hóa đơn – xác nhận thanh toán - lịch sử

Hình 4.23: Màn hình thông tin người dùng – hóa đơn – xác nhận thanh toán - lịch sử

Hình 4.23.1: Trạng thái nút lưu

Hình 4.23.2: Modal đánh giá đơn hàng

Hình 4.23.3: Modal thay đổi mật khẩu

Bảng 4.29: Mô tả màn hình thông tin người dùng

Thông tin người dùng Hiển thị tên người dùng, địa chỉ, số điện thoại, số sao đánh giá,…

Chỉnh sửa (hình bút chì) Chỉnh sửa thông tin của chỗ được chọn và chuyển nút chỉnh sửa thành nút lưu

Lưu (hình ) Lưu thông tin được thay đổi và chuyển nút lưu thành nút sửa

Trở lại Chuyển trở về trang chủ

Thay đổi mật khẩu Hiển thị modal thay đổi mật khẩu để đặt lại mật khẩu

Hóa đơn hiển thị tên sản phẩm, số sao đánh giá, số tiền hiện tại và trạng thái của các sản phẩm đã được xác nhận thanh toán Đối với những sản phẩm chưa được đánh giá, khi người dùng nhấp vào, sẽ xuất hiện modal để đánh giá đơn hàng.

Modal đánh giá Sau khi đánh giá sẽ xuất hiện thông báo “Đánh giá đơn hàng thành công! Cảm ơn bạn!” và khóa đánh giá lại

Xác nhận thanh toán hiển thị thông tin gồm tên sản phẩm, số tiền đấu giá và trạng thái của các sản phẩm đã được đấu giá thành công Để xác nhận thanh toán, hãy chọn sản phẩm mong muốn và nhấn nút xác nhận.

Lịch sử Thông tin của những sản phẩm do tài khoản đó đã đăng lên đấu giá

Xác nhận Chuyển qua trang thanh toán của sản phẩm đó

4.7.10 Màn hình đăng nhập admin

Hình 4.24: Màn hình đăng nhập Admin Bảng 4.30: Mô tả màn hình đăng nhập Admin

Login Đăng nhập tài khoản admin

Username Password Nhập username và password đã được cung cấp

4.7.11 Màn hình quản lý Admin

Hình 4.25: Màn hình quản lý user

Hình 4.26: Màn hình quản lý sản phẩm

Hình 4.26.1: Modal hình ảnh chi tiết sản phẩm

Hình 4.27: Màn hình quản lý hóa đơn

Hình 4.27.1: Modal thanh toán người bán

Hình 4.28: Màn hình duyệt sản phẩm

Hình 4.29: Màn hình thống kê doanh thu Bảng 4.31: Mô tả tổng quan màn hình trang Admin

Quản lý user Xem thông tin tài khoản người dùng

Khóa Khóa những tài khoản có đánh giá thấp hơn 3 sao

Quản lý sản phẩm Thông tin tất cả các sản phẩm đang bán Chọn vào sản phẩm sẽ hiển thị hiển thị Modal thông tin sản phẩm

Modal thông tin sản phẩm

Hiển thị tất cả hình ảnh về sản phẩm Click chọn hình ảnh để hiển thị lớn hơn

Quản lý hóa đơn Thông tin tất cả các hóa đơn đã xác nhận thanh toán

Khi chọn vào đơn hàng có trạng thái “Hết hạn đổi” thì hiển thị modal thanh toán

Khi chọn vào đơn hàng có trạng thái “Đã nhận hàng” thì cho phép nút Hủy bỏ được click

Hủy bỏ Khi click sẽ hủy bỏ đơn hàng đó và đổi trạng thái thành

Duyệt sản phẩm Thông tin tất cả các sản phẩm đã được người dùng đăng đấu giá

Duyệt Khi click sẽ cho phép sản phẩm đấu giá được đăng lên

Thống kê doanh thu Chọn năm để hiển thị số tiền doanh thu của từng tháng trong năm đó

Chương 5: Kết quả, thực nghiệm và phân tích 72

KẾT QUẢ, THỰC NGHIỆM, PHÂN TÍCH

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

Về cơ bản, nhóm em đã tìm hiểu được:

- Tổng quan về công nghệ MEARN STACK, định nghĩa, cấu trúc cũng như cách hoạt động

- Hiểu được về cách thi triển xây dung website thông qua RESTful API

- Sử dụng Heroku để deploy backend và Firebase để deploy ứng dụng phía frontend

- Biết thêm một số kiến thức về thương mại điện tử, đấu giá trực tuyến và các loại hình thanh toán trực tuyến phổ biến – thanh toán bằng PayPal

Xây dựng một trang web đấu giá trực tuyến sử dụng công nghệ MEARN STACK, với các chức năng chính như đăng nhập hệ thống, đăng ký tài khoản, và đăng sản phẩm để người khác tham gia đấu giá Trang web cũng cho phép các thành viên tham gia đấu giá và quản lý các phiên đấu giá mà họ đã tham gia.

Ưu điểm

- Ứng dụng đơn giản dễ sử dụng

- Khả năng bảo trì, mở rộng dễ dàng và nhanh chóng

- Có áp dụng thanh toán bằng ví PayPal để người dùng có nhiều chọn lựa khi thanh toán

- Áp dụng công nghệ mới

- Giao diện cơ bản, dễ nhận diện.

Nhược điểm

- Chưa áp dụng real-time kiến cho sản phẩm còn nhiều bất cập

- Sản phẩm còn nhiều chỗ chưa hoàn thiện hoàn toàn

- Giao diện còn nhiều thiếu xót, chưa được bắt mắt

- Ứng dụng quản lý còn thiếu xót chưa hoàn chỉnh

- Nghiệp vụ làm việc còn đơn giản chưa có nhiều gợi ý cho khách hàng đặt lịch

- Vẫn có khả năng tồn tại lỗi

Chương 5: Kết quả, thực nghiệm và phân tích 73

Thực nghiệm

Về thực nghiệm, ứng dụng đã được triển khai tới người dùng đầu cuối thành công Website đấu giá trực tuyến hiện đang public tại địa chỉ:

AK AUCTION (webapp-4bf67.web.app)

Phân tích

Các thông số khi ứng dụng được deploy:

Hình 5.1: Thông số của MongoDB Atlas

Hình 5.2: Thông số của Firebase

Chương 6: Kết luận và hướng phát triển 74

Tiêu đề	Xây Dựng Ứng Dụng Đấu Giá Trực Tuyến Sử Dụng Công Nghệ MERN STACK
Thể loại	đồ án tốt nghiệp

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

Tài liệu tham khảo	Loại	Chi tiết
[1] MEARN STACK là gì? https://viblo.asia/p/gioi-thieu-mern-stack-bWrZnv4vZxw	Link
[2] MongoDB là gì? https://topdev.vn/blog/mongodb-la-gi/	Link
[3] Express là gì? https://topdev.vn/blog/express-js-la-gi/	Link
[4] React là gì? https://www.hostinger.vn/huong-dan/react-la-gi-va-no-hoat-dong-nhu-the-nao/	Link
[5] NodeJS là gì? https://freetuts.net/nodejs-la-gi-584.html [6] Heroku là gì? https://topdev.vn/blog/heroku-la-gi/	Link
[7] RESTful API là gì? https://movan.vn/rest-api-gioi-thieu-rest-api/	Link
[8] JWT là gì? https://techmaster.vn/posts/33959/khai-niem-ve-json-web-token	Link