Đồ án: Tìm hiểu ReactJS và Xây dựng Website Bán Đồ Gia Dụng (Lê Thanh Tuấn)

Báo cáo đồ án xây dựng website bán đồ gia dụng bằng ReactJS và NodeJS. Tài liệu phân tích, thiết kế, triển khai đầy đủ chức năng. Tải tham khảo ngay.

• Tác giả: Lê Thanh Tuấn
• Người hướng dẫn: Thạc Sĩ Huỳnh Hồ Thị Mộng Trinh
• Trường học: Trường Đại Học Công Nghệ Thông Tin, Đại Học Quốc Gia Thành Phố Hồ Chí Minh
• Chuyên ngành: Công Nghệ Phần Mềm
• Đề tài: Tìm Hiểu Reactjs Và Xây Dựng Website Bán Đồ Gia Dụng
• Loại tài liệu: Đồ án
• Năm xuất bản: 2022
• Địa điểm: Thành Phố Hồ Chí Minh

Tóm tắt

I. Giới Thiệu Về Đồ Án ReactJS Website Bán Đồ Gia Dụng

Đồ án ReactJS: Xây dựng Website Bán Đồ Gia Dụng là một dự án học tập toàn diện nhằm giúp sinh viên nắm vững kiến thức về thư viện ReactJS và ứng dụng thực tế vào phát triển ứng dụng web thương mại điện tử. Đề tài này được thực hiện tại Trường Đại Học Công Nghệ Thông Tin, Đại Học Quốc Gia TP. Hồ Chí Minh với sự hướng dẫn của ThS. Huỳnh Hồ Thị Mộng Trinh. Dự án tập trung vào xây dựng website bán đồ gia dụng hoàn chỉnh với giao diện thân thiện, chức năng quản lý sản phẩm, giỏ hàng, và hệ thống thanh toán. Đây là cơ hội để sinh viên thực hành các kiến thức đã học và phát triển kỹ năng lập trình web hiện đại.

1.1. Lý Do Chọn Đề Tài

ReactJS là thư viện JavaScript hàng đầu hiện nay được sử dụng rộng rãi trong phát triển ứng dụng web. Chọn đề tài xây dựng website bán đồ gia dụng giúp sinh viên hiểu rõ quy trình phát triển ứng dụng thương mại điện tử thực tế. Dự án này kết hợp frontend ReactJS với backend NodeJS, Express, và MongoDB, tạo nên một hệ thống web toàn diện từ giao diện người dùng đến xử lý dữ liệu phía máy chủ.

1.2. Mục Tiêu Đề Tài

Mục tiêu chính của đề tài là xây dựng một website thương mại điện tử hoàn chỉnh bán đồ gia dụng. Cụ thể, sinh viên cần phát triển giao diện thân thiện và dễ sử dụng cho khách hàng, hệ thống quản lý sản phẩm hiệu quả cho quản trị viên, giỏ hàng, thanh toán trực tuyến, và chức năng đánh giá sản phẩm. Ngoài ra, đề tài cũng giúp sinh viên nắm rõ các kiến thức cấu trúc web, REST API, quản lý state với Redux.

II. Công Nghệ Sử Dụng Trong Đồ Án

Website bán đồ gia dụng được xây dựng dựa trên các công nghệ web hiện đại và phổ biến. Phía frontend sử dụng ReactJS - một thư viện JavaScript mạnh mẽ giúp xây dựng giao diện người dùng động và tương tác. Phía backend sử dụng NodeJS kết hợp với framework Express để xử lý các yêu cầu từ phía client. Cơ sở dữ liệu sử dụng MongoDB - một cơ sở dữ liệu NoSQL linh hoạt. Ngoài ra, dự án còn sử dụng Redux để quản lý state toàn cục, Axios để gọi API, và Firebase cho các dịch vụ bổ trợ. Sự kết hợp này tạo nên một hệ thống web đầy đủ và hiệu quả.

2.1. Tính Năng Nổi Bật Của ReactJS

ReactJS nổi bật với Virtual DOM giúp tối ưu hiệu suất khi cập nhật giao diện. Nó cung cấp component-based architecture cho phép tái sử dụng mã code dễ dàng. JSX syntax làm cho việc viết code trực quan và dễ hiểu hơn. ReactJS hỗ trợ one-way data binding, giúp quản lý dữ liệu rõ ràng và dễ debug. Ngoài ra, ecosystem phong phú với nhiều thư viện bổ trợ như Redux, React Router, và Axios giúp phát triển ứng dụng nhanh chóng và hiệu quả.

2.2. Lợi Ích Của NodeJS Và Express

NodeJS cho phép sử dụng JavaScript cả ở phía server, tạo sự thống nhất trong lập trình. Express framework giúp xây dựng REST API nhanh chóng với cú pháp đơn giản. Nó hỗ trợ middleware, routing, error handling một cách hiệu quả. NodeJS có hiệu suất cao với event-driven, non-blocking I/O, phù hợp cho các ứng dụng web đòi hỏi xử lý nhiều yêu cầu đồng thời. Sự kết hợp NodeJS + Express tạo nên một backend mạnh mẽ, linh hoạt và dễ bảo trì.

III. Phân Tích Các Chức Năng Chính

Dự án website bán đồ gia dụng bao gồm hai phần chức năng chính: phía admin (quản trị) và phía customer (khách hàng). Phía admin cung cấp các tính năng quản lý sản phẩm, danh mục, tài khoản, đơn hàng và báo cáo thống kê. Phía customer cho phép đăng ký, đăng nhập, tìm kiếm, xem thông tin sản phẩm, thêm vào giỏ hàng, đặt hàng, và đánh giá sản phẩm. Mỗi chức năng được thiết kế dựa trên use-case diagram chi tiết, đảm bảo hệ thống hoạt động logically và đáp ứng toàn bộ nhu cầu người dùng. Kiến trúc này giúp phân tách rõ ràng trách nhiệm giữa các vai trò khác nhau.

3.1. Các Chức Năng Quản Trị Admin

Admin panel cung cấp dashboard quản lý toàn diện cho website. Chức năng quản lý sản phẩm cho phép thêm, sửa, xóa và tìm kiếm sản phẩm chi tiết. Quản lý danh mục giúp tổ chức sản phẩm theo loại. Quản lý tài khoản kiểm soát quyền truy cập người dùng. Duyệt đơn hàng theo dõi các đơn hàng từ khách hàng. Thống kê báo cáo hiển thị doanh thu, sản phẩm bán chạy, và đánh giá sản phẩm từ khách hàng. Tất cả chức năng được tích hợp với database MongoDB để lưu trữ dữ liệu an toàn và hiệu quả.

3.2. Các Chức Năng Cho Khách Hàng

Giao diện khách hàng cung cấp trải nghiệm mua sắm trực tuyến dễ dàng. Chức năng đăng ký và đăng nhập bảo mật tài khoản người dùng. Tìm kiếm sản phẩm giúp khách hàng nhanh chóng tìm thấy sản phẩm mong muốn. Xem thông tin sản phẩm chi tiết, bao gồm giá, mô tả, hình ảnh. Giỏ hàng cho phép thêm, xóa, cập nhật số lượng. Đặt hàng và thanh toán trực tuyến. Đánh giá sản phẩm sau khi mua hàng để giúp khách hàng khác tham khảo và quyết định.

IV. Kết Quả Đạt Được Và Hướng Phát Triển

Đồ án ReactJS: Xây dựng Website Bán Đồ Gia Dụng đã đạt được những kết quả đáng kể trong việc phát triển một ứng dụng web thương mại điện tử hoàn chỉnh. Giao diện responsive design hoạt động tốt trên các thiết bị khác nhau. Hệ thống quản lý sản phẩm, giỏ hàng, và đơn hàng hoạt động ổn định và hiệu quả. API REST được thiết kế tốt, xử lý dữ liệu nhanh chóng. Dự án còn có hướng phát triển rõ ràng cho tương lai như tích hợp thanh toán online nâng cao, hỗ trợ đa ngôn ngữ, machine learning cho gợi ý sản phẩm. Sinh viên đã nắm vững quy trình phát triển web modern và kỹ năng lập trình thực tế.

4.1. Những Kết Quả Đạt Được

Dự án đã hoàn thành toàn bộ yêu cầu chức năng được đề ra ban đầu. Giao diện người dùng được thiết kế đẹp mắt, trực quan và thân thiện. Hệ thống backend xử lý dữ liệu nhanh, chính xác và an toàn. Quản lý state với Redux giúp ứng dụng hoạt động ổn định. Sinh viên đã hiểu sâu về ReactJS, NodeJS, Express, MongoDB. Kinh nghiệm làm việc theo nhóm được nâng cao thông qua phân công công việc và quản lý thời gian hợp lý.

4.2. Hướng Phát Triển Trong Tương Lai

Trong tương lai, dự án có thể tích hợp thanh toán online như Stripe, PayPal. Hỗ trợ đa ngôn ngữ để phục vụ khách hàng quốc tế. Tối ưu hiệu suất với caching, CDN. Thêm chức năng chatbot AI hỗ trợ khách hàng 24/7. Phát triển mobile app cho iOS/Android. Machine learning để gợi ý sản phẩm cá nhân hoá. Analytics nâng cao để hiểu rõ hành vi khách hàng. Những cải tiến này sẽ giúp website cạnh tranh tốt hơn trong thị trường thương mại điện tử.

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

CHƯƠNG I: GIỚI THIỆU CHUNG 1. Đề tài - Tên đề tài: Tìm hiểu Reactjs và xây dựng website bán đồ gia dụng - Công nghệ sử dụng: • Frontent: Reactjs, Axios, Redux • Backent: NodeJs - Cơ sở dữ liệu: MongoDB, Firebase 2. Lý do chọn đề tài Trong thời kì công nghệ ngày càng phát triển, Internet được ứng dụng ở khắp mọi nơi thì nhu cầu mua sắm trang thiết bị gia dụng của mọi người cũng thay đổi. Từ đó, nhóm quyết định xây dựng một trang web bán đồ gia dụng để đáp ứng như cầu tìm hiểu, lựa chọn và mua sắm các thiết bị gia dụng cho gia đình.

Ngoài ra, để xây dựng giao diện website linh động thì nhóm đã tìm hiểu và quyết định chọn công nghệ Reactjs, một công nghệ lập trình giao diện mới và được đông đảo lập trình viên sử dụng để phát triển phần mềm. Tóm tắt đề tài Website bán hàng gia dụng được xây dựng để đáp ứng như cầu tìm hiểu, lựa chọn và mua sắm của mọi gia đình. Mục tiêu đề tài - Xây dựng một trang web từ công nghệ Reactjs với cách chức năng cơ bản đáp ứng được nhu cầu người dùng. Bên cạnh đó, học hỏi thêm nhiều công nghệ và kiến thức mới về lập trình website, API, Services.

- Tìm hiểu được công nghệ thích hợp xây dựng ứng dụng. - Hoàn thành được báo cáo môn học. Phương pháp nghiên cứu - Nghiên cứu các Website có sẵn trên thị trường, nhận xét được ưu khuyết điểm của các Website đó. - Nghiên cứu các tài liệu đặc tả về các Website tương tự như Website https://www.com/, https://www.com/, … - Tìm hiểu các công nghệ mới trên thị trường, nhận xét và chọn ra những công nghệ thích hợp để xây dựng website.

- Tiếp tục phát triển Website từ môn học Đồ án 1 và phát triển website cho quản trị viên. Ý nghĩa và hướng của đề tài 6. Về mặt tài liệu - Sử dụng nguồn tài liệu tham khảo về Reactjs, NodeJs, MongoDB. - Có tài liệu đặc tả use-case, sơ đồ lớp, tuần tự, mô hình thiết kế giao diện.

Về mặt sản phẩm - Tạo ra website mua sắm với một số tính năng cơ bản - Chức năng phù hợp với tình hình thực tế và dễ sử dụng. CHƯƠNG II: CÔNG NGHỆ LIÊN QUAN 1. Giới thiệu • ReactJS là một thư viện JavaScript được tạo ra để xây dựng giao diện người dùng có khả năng tương tác tốt và nhanh chóng cho các ứng dụng web và di động. Nó là một thư viện mã nguồn mở, xây dựng dựa trên các component, giao diện người dùng chỉ chịu trách nhiệm cho tầng view của ứng dụng.

• Nó được sử dụng bởi các công ty lớn, đã thành lập và các công ty mới thành lập như: Netflix, Airbnb, Instagram và New York Times. ReactJS mang lại nhiều lợi thế cho các lập trình viên, khiến nó trở thành một lựa chọn tốt hơn so với các Framework khác như Angular. • Trong kiến trúc Model View Controller (MVC), tầng view chịu trách nhiệm về giao diện của ứng dụng. ReactJS được tạo ra bởi Jordan Walke, một kỹ sư phần mềm tại Facebook.

Tính năng nổi bật của ReactJs: - JSX – JavaScript Syntax Extension: JSX như tên gọi của nó, là một phần mở rộng cú pháp cho JavaScript. Nó được sử dụng với ReactJS để mô tả giao diện người dùng trông như thế nào. Bằng cách sử dụng JSX, chúng ta có thể viết các cấu trúc HTML trong cùng một tệp chứa mã JavaScript. Điều này làm cho mã dễ hiểu và dễ gỡ lỗi hơn, vì nó tránh việc sử dụng các cấu trúc DOM JavaScript phức tạp.

- Virtual DOM: Virtual DOM là một định dạng dữ liệu của JavaScript, với khối lượng nhẹ và được dùng để thể hiện nội dung của DOM – Document Object Model – Mô hình Đối tượng Tài liệu tại một thời điểm nhất định nào đó. Khi trạng thái của một đối tượng thay đổi, VDOM chỉ thay đổi đối tượng đó trong DOM thực thay vì cập nhật tất cả các đối tượng. - Performance: ReactJS sử dụng VDOM, giúp các ứng dụng web chạy nhanh hơn nhiều so với những ứng dụng được phát triển với các Framework front-end khác. - Redux: Redux là một phần cực kỳ quan trọng trong ReactJS.

Bản thân của ReactJS không sở hữu các module chuyên dụng nhằm để xử lý dữ liệu. Vì thế, ReactJS được triển khai một cách độc lập và chia nhỏ View thành những component nhỏ khác nhau, điều này sẽ giúp cho việc quản lý dễ dàng hơn, các thành phần sẽ liên kết chặt chẽ với nhau hơn. - One-way Data Binding - Component: ReactJS được xây dựng xoay quanh các component, trong khi đó, các Framework khác dùng template. Để tạo ra một component có đầy đủ những đặc tính, bạn chỉ cần sử dụng phương thức createClass dùng để nhận một tham số mô tả đặc tính.

Lý do sử dụng Dễ dàng tạo các ứng dụng động: ReactJS giúp tạo các ứng dụng web động dễ dàng hơn vì nó yêu cầu ít mã hóa hơn và cung cấp nhiều chức năng hơn, trái ngược với JavaScript, nơi việc viết mã thường trở nên phức tạp rất nhanh. Cải thiện hiệu năng với Virtual DOM: ReactJS cho phép người dùng xây dựng các Virtual DOM và host chúng trong bộ nhớ. Ưu điểm này sẽ giúp Vitural thay đổi ngay khi DOM thực tế có sự thay đổi. Cập nhật liên tục giúp các ứng dụng tránh tình trạng bị gián đoạn.

Người dùng sử dụng liên tục, website ổn định giúp doanh thu duy trì và tăng trưởng vượt bậc. Các component có thể tái sử dụng: • Các thành phần là các khối xây dựng của bất kỳ ứng dụng ReactJS nào và một ứng dụng đơn lẻ thường bao gồm nhiều thành phần. • Các thành phần này có logic và điều khiển của chúng, và chúng có thể được sử dụng lại trong toàn bộ ứng dụng, do đó làm giảm đáng kể thời gian phát triển của ứng dụng. Giới thiệu NodeJs là một nền tảng (platform) phát triển độc lập dựa trên V8 JavaScript engine.

Đây là một trình thông dịch thực thi mã JavaScript cho phép tạo các ứng dụng web như video clip và diễn đàn, đặc biệt có thể mở rộng nhanh chóng và dễ dàng cũng như thu hẹp phạm vi hoạt động của các trang mạng mạng xã hội. Đây được xem là một lợi thế khi NodeJS có thể hoạt động trên nhiều nền tảng hệ điều hành khác nhau, từ Windows, Linux đến OS X. NodeJS cung cấp một thư viện phong phú dưới dạng các mô-đun Javascript khác nhau giúp đơn giản hóa việc lập trình và giảm thiểu thời gian cần thiết.2 Tính năng nổi bật của NodeJs NodeJS được dùng để thiết kế, xây dựng một ứng dụng mạng mở rộng. Khi bạn mong muốn ứng dụng web của mình hỗ trợ kết nối nhiều người dùng hơn, thì bạn cần thêm nhiều máy chủ.

Nhưng điều này sẽ làm tăng chi phí máy chủ, chi phí lưu lượng và nhân công. Ngoài ra, việc dùng nhiều máy chủ sẽ khiến các tài nguyên phải được chia sẻ giữa tất cả các máy chủ. Chính vì vậy, NodeJS đã thay đổi cách kết nối với máy chủ. Điều này giúp mỗi kết nối chỉ tạo ra một sự kiện đang chạy trong tiến trình của NodeJS, thay vì tạo một chuỗi hệ điều hành mới cho mỗi kết nối.

Điều này giúp ứng dụng website mở rộng dễ dàng mà không hề gặp lỗi hay trở ngại gì. Để làm được nhiệm vụ như trên, NodeJS sở hữu rất nhiều tính năng nổi trội. Một trong những những tính năng quan trọng nhất của NodeJS là: • Không đồng bộ và hướng sự kiện: Tất cả các API của thư viện NodeJS đều không đồng bộ. • Rất nhanh: NodeJS được xây dựng trên JavaScript V8 của Google Chrome.

Vì thế, thư viện NodeJS thực thi mã với tốc độ cực nhanh. • Là nền tảng Single Threaded nhưng có khả năng mở rộng cao. • No Buffering: các ứng dụng của NodeJS không đệm bất kỳ dữ liệu nào bao giờ, chúng chỉ xuất dữ liệu trong khối. • License: NodeJS phát hành theo giấy phép của MIT.

Lý do sử dụng NodeJs - Node.js có tốc độ rất nhanh: Đó là một yêu cầu khá quan trọng khi bạn là một startup đang cố gắng tạo ra một sản phẩm lớn và muốn đảm bảo có thể mở rộng nhanh chóng, đáp ứng được một lượng lớn người dùng khi trang web của bạn phát triển lên. - Chia sẻ cùng code ở cả phía client và server. - NPM(Node Package Manager) và module Node đang ngày càng phát triển mạnh mẽ. - Cộng đồng hỗ trợ tích cực.

- Cho phép stream các file có kích thước lớn 3. Giới thiệu 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. Các Collection trong MongoDB có cấu trúc cực kỳ linh hoạt. Điều này cho phép dữ liệu không cần thiết phải tuân theo bất kỳ một dạng cấu trúc nào. Vì thế, MongoDB có thể lưu trữ những dữ liệu có cấu trúc đa dạng và phức tạp.

Dữ liệu trong MongoDB được lưu bằng định dạng kiểu JSON.2 Tính năng nổi bật của MongoDB • Truy vấn ad hoc: Đây được xem là tính năng tốt nhất của MongoDB. Nó có tác dụng giúp các trường truy vấn phạm vi, kết hợp cùng việc tìm kiếm biểu thức nhằm trả về kết quả tài liệu cụ thể với kích thước nhất định. Ngoài ra, các trường dùng trong MongoDB còn được dùng để lập chỉ mục chính, phụ. • Nhân rộng MongoDB cung cấp Replica Set cho phép nhân 2 hoặc nhiều bản sao của dữ liệu.

Đồng thời, mỗi bản sao lại đóng vai trò chính và phụ. - Khi nhân rộng, toàn bộ dữ liệu khi ghi và đọc được thực hiện trên bản sao chính. - Bản sao thứ cấp sẽ dùng bản sao tích hợp để có thể duy trì các bản sao dữ liệu. Trong trường hợp có bất kỳ bản sao chính nào bị thất bại thì Replica set sẽ chọn một bản sao thứ cấp để thay thế làm bản sao chính tiếp theo.

Trong quá trình nhân rộng, Replica thứ cấp được tùy ý chọn các hoạt động nhưng dữ liệu cuối cùng vẫn phải tuân theo mặc định. • Cân bằng tải MongoDB sử dụng Sharding nhằm chia tỷ lệ theo chiều ngang và xác định dữ liệu phân phối trong collection. Điều này giúp người dùng có thể chọn một Shard key. Nói tóm lại, MongoDB cân bằng tải bằng cách dựa vào các Shard key để chia dữ liệu thành các phạm vi và phân phối đồng đều.