Đồ án Kỹ thuật: tốt nghiệp xây dựng website đấu giá trực tuyến sử dụng

Đồ án nghiên cứu tốt nghiệp xây dựng website đấu giá trực tuyến sử dụng công nghệ mern stack, áp dụng công nghệ tiên tiến, tối ưu giải pháp kỹ thuật cho bài toán kỹ thuật.

• Tác giả: Đỗ Hoàng Anh
• Người hướng dẫn: TS. Nguyễn Thanh Phước
• 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
• Đề tài: Xây Dựng Website Đấu Giá Trực Tuyến Sử Dụng Công Nghệ MERN Stack
• Loại tài liệu: Graduation project
• Năm xuất bản: 2020
• Địa điểm: Ho Chi Minh City

Tóm tắt

I. Giới thiệu về Đồ án Tốt nghiệp Xây dựng Website Đấu giá

Đồ án tốt nghiệp xây dựng website đấu giá là một dự án học tập toàn diện được thực hiện bởi các sinh viên ngành Công nghệ Thông tin tại Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh. Đây là một ứng dụng thương mại điện tử hiện đại kết hợp giữa công nghệ lập trình tiên tiến và mô hình kinh doanh đấu giá trực tuyến. Dự án được xây dựng dựa trên nhu cầu thực tế của thị trường, nhằm tạo ra một nền tảng mới cho người tiêu dùng có thể mua bán và đấu giá sản phẩm trực tuyến một cách hiệu quả và an toàn. Mục tiêu chính là phát triển một ứng dụng web hoàn chỉnh với các chức năng cơ bản và nâng cao, từ đó deploy lên môi trường thực tế để phục vụ người dùng.

1.1. Bối cảnh và Ý tưởng Dự án

Trong bối cảnh dịch COVID-19 hoành hành, xu hướng thương mại điện tử ngày càng phổ biến. Nhóm sinh viên nhận thấy rằng các website e-commerce hiện tại chủ yếu sử dụng mô hình buôn bán truyền thống, chưa có sự đổi mới trong cách giao dịch. Vì vậy, nhóm quyết định xây dựng một nền tảng đấu giá trực tuyến để tạo ra sân chơi mới, giúp người tiêu dùng thuận buôn vừa bán và tìm được những sản phẩm ưa thích với giá cạnh tranh nhất.

1.2. Đối tượng và Ứng dụng

Website đấu giá trực tuyến này được thiết kế dành cho tất cả người dùng có nhu cầu mua bán sản phẩm qua mạng. Ứng dụng cung cấp các chức năng như đăng nhập, đăng ký, tạo sản phẩm đấu giá, tham gia đấu giá, xem lịch sử giao dịch, thanh toán trực tuyến và đánh giá người bán. Đây là một giải pháp thương mại điện tử toàn diện phù hợp với nhu cầu hiện đại của người dùng Việt Nam.

II. Công Nghệ MERN Stack trong Xây dựng Website Đấu giá

MERN Stack là một bộ công nghệ mạnh mẽ được sử dụng để phát triển website đấu giá trực tuyến trong đồ án này. MERN là viết tắt của MongoDB, ExpressJS, ReactJS, NodeJS - bốn công nghệ mã nguồn mở liên quan đến JavaScript. Sự kết hợp của MERN Stack cho phép nhóm sinh viên xây dựng một ứng dụng web full-stack hoàn chỉnh, từ phía máy chủ (backend) đến phía người dùng (frontend). Công nghệ này được chọn vì khả năng mở rộng cao, hiệu suất tốt, cộng đồng hỗ trợ lớn, và thích hợp cho các dự án e-commerce quy mô trung bình.

2.1. Các Thành phần của MERN Stack

MongoDB là cơ sở dữ liệu NoSQL dùng để lưu trữ dữ liệu sản phẩm, người dùng và lịch sử đấu giá. ExpressJS là framework backend giúp xây dựng RESTful API. ReactJS là thư viện frontend tạo giao diện người dùng tương tác cao. NodeJS là môi trường thực thi JavaScript phía máy chủ. Cộng lại, MERN Stack cung cấp một môi trường phát triển toàn diện cho website đấu giá trực tuyến.

2.2. Ưu Điểm của MERN Stack

MERN Stack mang lại nhiều ưu điểm thiết thực cho dự án. Thứ nhất, toàn bộ ứng dụng sử dụng ngôn ngữ JavaScript, giúp tiết kiệm thời gian học tập. Thứ hai, ReactJS cung cấp giao diện responsive và hiệu suất cao cho người dùng. Thứ ba, MongoDB cung cấp tính linh hoạt cao trong lưu trữ dữ liệu. Cuối cùng, NodeJS cho phép xử lý requests đồng thời hiệu quả, tối ưu cho ứng dụng e-commerce có lưu lượng cao.

III. Các Chức Năng Chính của Ứng dụng Đấu giá

Website đấu giá trực tuyến được thiết kế với các chức năng toàn diện để đáp ứng nhu cầu của cả người mua và người bán. Chức năng cơ bản bao gồm đăng ký tài khoản, đăng nhập, tạo sản phẩm để đấu giá, tham gia đấu giá sản phẩm, xem lịch sử đấu giá, thanh toán trực tuyến. Ngoài ra, ứng dụng còn hỗ trợ các chức năng nâng cao như hệ thống đánh giá người bán dựa trên các sản phẩm đã bán, nhiều cách thức đấu giá khác nhau. Tất cả các chức năng này được tích hợp thông qua giao diện người dùng thân thiện được xây dựng bằng ReactJS, đảm bảo trải nghiệm người dùng mượt mà và tối ưu.

3.1. Chức Năng Đăng nhập và Quản lý Tài khoản

Người dùng có thể tạo tài khoản mới hoặc đăng nhập vào ứng dụng bằng email và mật khẩu. Hệ thống sử dụng JWT (JSON Web Token) để bảo mật phiên đăng nhập. Sau khi đăng nhập, người dùng có quyền tạo sản phẩm đấu giá, tham gia đấu giá, xem lịch sử giao dịch, cập nhật thông tin cá nhân và quản lý các sản phẩm của mình một cách dễ dàng.

3.2. Chức Năng Đấu giá và Thanh toán

Chức năng đấu giá cho phép người dùng đặt giá cao hơn cho sản phẩm yêu thích trong thời gian quy định. Hệ thống tự động cập nhật giá cao nhất và thông báo cho những người tham gia. Khi kết thúc đấu giá, người trúng được hỗ trợ thanh toán trực tuyến an toàn thông qua các cổng thanh toán. Chức năng này đảm bảo tính công bằng và minh bạch trong toàn bộ quá trình giao dịch.

IV. Quá Trình Phát triển và Kết quả Đạt được

Quá trình phát triển website đấu giá trực tuyến diễn ra trong môi trường đặc biệt do dịch COVID-19. Nhóm sinh viên phải làm việc online và trao đổi với giảng viên hướng dẫn qua các nền tảng số. Mục tiêu ban đầu là hoàn thiện ứng dụng ở mức cao nhất có thể với các chức năng cơ bản và nâng cao. Tuy nhiên, kết quả cuối cùng cho thấy nhóm đã hoàn thành được khoảng 70% mục tiêu đề ra, bao gồm các chức năng cơ bản như đăng nhập, đăng ký, đấu giá, thanh toán và deploy ứng dụng online qua Heroku. Mặc dù chưa triển khai đầy đủ các chức năng nâng cao và chưa tối ưu hóa hoàn toàn, đây vẫn là một ứng dụng web thương mại điện tử có tính khả thi cao.

4.1. Thách Thức trong Quá trình Phát triển

Nhóm gặp phải nhiều thách thức trong quá trình phát triển, chủ yếu liên quan đến dịch bệnh COVID-19. Việc gặp gỡ trực tiếp với giảng viên hướng dẫn gần như không thể, buộc team phải làm việc hoàn toàn trên môi trường ảo. Bên cạnh đó, việc tối ưu hóa hiệu suất ứng dụng và triển khai các chức năng nâng cao đòi hỏi nhiều thời gian và kinh nghiệm. Tuy nhiên, với sự hỗ trợ của giảng viên hướng dẫn, nhóm đã vượt qua những khó khăn này.

4.2. Kết quả và Hướng Phát triển Tương lai

Ứng dụng website đấu giá trực tuyến được deploy thành công trên nền tảng Heroku, cho phép người dùng truy cập từ bất kỳ đâu. Nhóm đã tích lũy kiến thức sâu về MERN Stack, RESTful API, database design. Hướng phát triển tương lai bao gồm thêm các chức năng nâng cao, cải thiện giao diện, tối ưu SEO, và mở rộng quy mô để ứng dụng có thể phục vụ hàng nghìn người dùng đồng thời.

Trích đoạn nội dung tài liệu

Chương 1: Tổng quan 3 Báo cáo đồ án tốt nghiệp CHƯƠNG 2: GIỚI THIỆU VỀ CÔNG NGHỆ 2. 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.1 MongoDB là gì? Hình 2.1 Khái niệm - 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ệ 5 Báo cáo đồ án tốt nghiệp - MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ trong document kiểu JSON thay vì dạng bảng như CSDL quan hệ nên truy vấn sẽ rất nhanh. - Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như MySQL hay SQL Server.) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng ta sẽ dùng khái niệm là collection thay vì bảng.

- 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.2 Ưu điểm - Do MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ có các kích cỡ và các document khác nhau, linh hoạt trong việc lưu trữ dữ liệu, nên bạn muốn gì thì cứ insert vào thoải mái. - Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau, không có join như trong RDBMS nên khi insert, xóa hay update nó không cần phải mất thời gian kiểm tra xem có thỏa mãn các ràng buộc dữ liệu như trong RDBMS.

- MongoDB rất dễ mở rộng (Horizontal Scalability). Trong MongoDB có một khái niệm cluster là cụm các node chứa dữ liệu giao tiếp với nhau, khi muốn mở rộng hệ thống ta chỉ cần thêm một node vớ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 được cached lên bộ nhớ Ram, để phục vụ lượt truy vấn sau diễn ra nhanh hơn mà không cần phải đọc từ ổ cứng. - Hiệu năng cao: Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanh hơn hẳn so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS).

Với một lượng dữ liệu đủ lớn thì thử nghiệm cho thấy tốc độ insert của MongoDB có thể nhanh tới gấp 100 lần so với MySQL.3 Nhược điểm Chương 2: Giới thiệu về công nghệ 6 Báo cáo đồ án tốt nghiệp - Một ưu điểm của MongoDB cũng chính là nhược điểm của nó. MongoDB không có các tính chất ràng buộc như trong RDBMS nên khi thao tác với mongoDB thì phải hết sức cẩn thận. - Tốn bộ nhớ do dữ liệu lưu dưới dạng key-value, các collection chỉ khác về value do đó key sẽ bị lặp lại. Không hỗ trợ join nên dễ bị dữ thừa dữ liệu.

- Khi insert/update/remove bản ghi, MongoDB sẽ chưa cập nhật ngay xuống ổ cứng, mà sau 60 giây MongoDB mới thực hiện ghi toàn bộ dữ liệu thay đổi từ RAM xuống ổ cứng điêù này sẽ là nhược điểm vì sẽ có nguy cơ bị mất dữ liệu khi xảy ra các tình huống như mất điện.2 ExpressJS là gì? Hình 2.1 Khái niệm - Express js là một Framework nhỏ, nhưng linh hoạt được xây dựng trên nền tảng của Nodejs. Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile. - 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,.2 Thành phần - Root: Chứa các file như packages. 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ệ 7 Báo cáo đồ án tốt nghiệp 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 được dùng để tiền xử lý, lọc các request trước khi trả về response cho người dùng. Nếu các request thỏa điều kiện thì mới cho chương trình chạy tiếp.3 ReactJs là gì? Hình 2.1 Khái niệm - ReactJS được hiểu nôm na là một thư viện trong đó có chứa nhiều JavaScript mã nguồn mở và cha đẻ của ReactJS đó chính là một ông lớn với cái tên ai cũng biết đó chính là Facebook.

Mục đích của việc tạo ra ReactJS là để tạo ra những ứng dụng website hấp dẫn với tốc độ nhanh và hiệu quả cao với những mã hóa tối thiểu. - Mục đích chủ chốt của ReactJS đó chính là mỗi website khi đã sử dụng ReactJS thì phải chạy thật mượt thật nhanh và có khả năng mở rộng cao và đơn giản thực hiện. - Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng. Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý.

React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.Virtual Chương 2: Giới thiệu về công nghệ 8 Báo cáo đồ án tốt nghiệp DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật.2 Thành Phần - JSX: Là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng. - Components: Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác.

Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái. Mọi thứ React đều là component. - Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render. Prop là bất biến.

- State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI.3 Ưu điểm: - Tạo ra cho chính bản thân nó một dom ảo, đây là nơi mà các component được tồn tại trên đó. - Viết các đoạn code JS sẽ trởi 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 nghĩa là cú pháp này cho phép ta trộn được giữa code HTML và Javascript. - Thân thiện với SEO: đây là một trong những điều đặc biệt và chỉ có mỗi ReactJS đây cũng chính là vấn đề lớn của các JS Frameworks vì hầu như các JS Frameworks không thân thiện với các cổ máy tìm kiếm mặc dù đã được cải thiện nhiều. - Có nhiều công cụ phát triển là lợi ích tiếp theo của ReactJS.

Khi bạn bắt đầu một ReactJS bạn đừng quên cài đặt thêm ứng dụng mở rộng của Chrome chuyên dành cho ReactJS nhé vì nó sẽ giúp cho bạn debug code một cách dễ dàng hơn, khi bạn đã cài đặt nó xong bạn sẽ có một cái nhìn trực tiếp vào Virtual Dom và lúc đó cũng đồng nghĩa với việc là bạn đang xem một cây dom thông thường vậy. Chương 2: Giới thiệu về công nghệ 9 Báo cáo đồ án tốt nghiệp 2.4 NodeJS là gì? Hình 2.1 Khái niệm - Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng ở trên Javascript Runtime của Chrome mà chúng ta có thể xây dựng được các ứng dụng mạng một cách nhanh chóng và dễ dàng mở rộng. - Nodejs được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa Kỳ. Dù sao thì chúng ta cũng nên biết qua một chút chút lịch sử của thứ mà chúng ta đang học một chút chứ nhỉ? =)) - Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên cho tốc độ xử lý và hiệu năng khá cao.

- Nodejs tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực. - Nodejs áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất có thể.2 Ưu điểm - Chạy rất nhanh: NodeJ được xây dựng dựa vào nền tảng V8 Javascript Engine nên việc thực thi chương trình rất nhanh. - Đơn luồng nhưng khả năng mở rộng cao: - Không đệm: NodeJS không đệm bất kì một dữ liệu nào và các ứng dụng này chủ yếu là đầu ra dữ liệu. - Có giấy phép: NodeJS đã được cấp giấy phép bởi MIT License.

- Mã nguồn mở, miễn phí, chạy trên nhiều nền tảng và được viết bằng ngôn ngữ JavaScript.3 Nhược điểm Chương 2: Giới thiệu về công nghệ 10 Báo cáo đồ án tốt nghiệp - Giống như hầu hết các công nghệ mới, việc triển khai Node.js trên host không phải là điều dễ dàng.2 RESTful API là gì 2.1 Khái niệm REST là viết tắt của Representational State Tranfer. REST là một chuẩn web dựa vào các kiến trúc cơ bản sử dụng giao thức HTTP. Nó xử lí tài nguyên, nơi mà mỗi thành phần là một tài nguyên và nguồn tài nguyên này có thể được truy cập qua các giao diện chung bởi sử dụng các phương thức HTTP chuẩn. REST lần đầu tiên được giới thiệu bởi Roy Fielding năm 2000.

Về cơ bản, một REST Server cung cấp các chế độ truy cập đến nguồn tài nguyên và REST Client truy cập và sửa đổi các nguồn tài nguyên này bởi sử dụng phương thức HTTP. Ở đây mỗi nguồn tài nguyên được xác định bởi một URI. REST sử dụng các cách biểu diễn khác nhau để biểu diễn các nguồn tài nguyên như text, JSON, XML nhưng phổ biến nhất vẫn là JSON.2 Các phương thức HTTP được sử dụng trong REST HTTP định nghĩa một tập các phương thức để miêu tả các yêu cầu giữa các hệ thống với nhau để thêm, xóa, cập nhật, hoặc đơn giản là đọc một tài nguyên. Có tổng cộng 9 loại phương thức: GET, HEAD, POST, PUT, PATCH, DELETE, CONNECT, OPTIONS, TRACE.