Đồ án tốt nghiệp: Phát triển website bán đồ điện tử với NextJS, ExpressJS

Tham khảo đồ án tốt nghiệp xây dựng website bán đồ điện tử bằng NextJS, ExpressJS và MongoDB. Tài liệu gồm báo cáo và source code chi tiết cho sinh viên.

• Tác giả: Nguyễn Văn Lành
• Người hướng dẫn: TS. Lê Văn Vinh
• 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: Tìm Hiểu ExpressJS, NextJS Và Phát Triển Website Bán Đồ Điện Tử
• Loại tài liệu: Đồ án tốt nghiệp
• Năm xuất bản: 2020
• Địa điểm: Thành Phố Hồ Chí Minh

Tóm tắt

I. Giới thiệu về Đồ án Website Bán Đồ Điện Tử

Đồ án website bán đồ điện tử là một dự án thương mại điện tử toàn diện được phát triển bằng công nghệ NextJS và ExpressJS. Dự án này được thực hiện bởi các sinh viên khoa Công Nghệ Thông Tin, Trường Đại học Sư phạm Kỹ Thuật Thành phố Hồ Chí Minh. Website hoạt động như một nền tảng e-commerce chuyên nghiệp, cung cấp giao diện thân thiện và responsive design để hoạt động trên nhiều thiết bị khác nhau. Hệ thống được chia thành hai phần chính: phía người dùng (frontend) và phía quản trị (backend). Mục tiêu của đồ án là xây dựng một nền tảng bán hàng điện tử đầy đủ với các chức năng từ hiển thị sản phẩm đến xử lý thanh toán và quản lý đơn hàng một cách hiệu quả.

1.1. Mục Đích và Ý Nghĩa của Đồ án

Mục đích chính của đồ án là tìm hiểu và ứng dụng các công nghệ NextJS và ExpressJS trong xây dựng ứng dụng web thực tế. Đồ án giúp sinh viên nắm vững kiến thức về full-stack development, từ thiết kế giao diện responsive đến xây dựng API backend mạnh mẽ. Ngoài ra, đồ án cũng thể hiện khả năng quản lý dữ liệu sử dụng MongoDB và triển khai các chức năng e-commerce phức tạp như giỏ hàng, thanh toán và quản lý đơn hàng.

1.2. Phạm Vi và Công Nghệ Sử Dụng

Đồ án bao gồm frontend, backend và database được xây dựng hoàn toàn trên công nghệ JavaScript. Frontend sử dụng NextJS kết hợp với Bootstrap 4 để tạo giao diện responsive và tối ưu SEO. Backend được phát triển bằng ExpressJS, một framework Node.js nhẹ và linh hoạt. Database sử dụng MongoDB, một NoSQL database phù hợp cho dữ liệu không có cấu trúc cố định, giúp tăng tính linh hoạt và mở rộng của hệ thống.

II. Các Công Nghệ Lõi trong Phát Triển Đồ án

Đồ án sử dụng một stack công nghệ hiện đại được lựa chọn một cách kỹ lưỡng để phù hợp với yêu cầu của ứng dụng thương mại điện tử. NextJS là một framework React mạnh mẽ hỗ trợ server-side rendering (SSR) và static site generation (SSG), giúp cải thiện hiệu suất và SEO. ExpressJS cung cấp một kiến trúc middleware linh hoạt, cho phép xây dựng API RESTful một cách hiệu quả. MongoDB là một document-oriented database cho phép lưu trữ dữ liệu JSON một cách tự nhiên. Sự kết hợp của ba công nghệ này tạo thành một hệ thống hoàn chỉnh, có khả năng mở rộng và dễ bảo trì.

2.1. NextJS Framework Frontend Tối Ưu

NextJS là một framework React được xây dựng dựa trên ReactJS, cung cấp nhiều tính năng nâng cao như SSR, SSG, API routes. Lý do chọn NextJS là vì khả năng tối ưu hiệu suất thông qua code splitting tự động, hỗ trợ incremental static regeneration, và built-in SEO optimization. NextJS giúp website có thời gian tải nhanh hơn, cải thiện ranking SEO, và cung cấp developer experience tuyệt vời với hot reload và zero-config setup.

2.2. ExpressJS Framework Backend Mạnh Mẽ

ExpressJS là một lightweight framework cho Node.js, được sử dụng để xây dựng API server cho đồ án. ExpressJS cung cấp routing system mạnh mẽ, middleware pattern linh hoạt, và hỗ trợ nhiều HTTP methods (GET, POST, PUT, DELETE). Đặc biểu là ExpressJS cho phép dễ dàng xử lý request/response, quản lý session, xác thực người dùng, và kết nối cơ sở dữ liệu. Framework này là lựa chọn tối ưu cho developing RESTful APIs.

2.3. MongoDB NoSQL Database Linh Hoạt

MongoDB là một NoSQL database lưu trữ dữ liệu dưới dạng JSON documents, rất phù hợp với JavaScript ecosystem. MongoDB cung cấp tính linh hoạt cao vì không yêu cầu schema cố định, cho phép dễ dàng thay đổi cấu trúc dữ liệu khi cần. Hệ quản trị dữ liệu MongoDB hỗ trợ indexing, aggregation pipelines, và horizontal scaling thông qua sharding, giúp ứng dụng mở rộng theo thời gian.

III. Chức Năng và Tính Năng của Website

Website bán đồ điện tử cung cấp một bộ chức năng toàn diện để phục vụ cả người dùng và quản trị viên. Phía người dùng, website cung cấp khả năng duyệt sản phẩm, tìm kiếm, xem chi tiết hình ảnh, mô tả và video về sản phẩm. Người dùng có thể thêm sản phẩm vào giỏ hàng, thanh toán trực tuyến, và quản lý lịch sử đơn hàng của mình. Website hỗ trợ đăng nhập qua tài khoản cá nhân, Google, hoặc Facebook. Phía quản trị, website cung cấp dashboard quản lý các đơn hàng, sản phẩm, danh mục, nhà cung cấp, tài khoản người dùng, và xem thống kê kinh doanh chi tiết.

3.1. Chức Năng Phía Người Dùng

Người dùng có thể duyệt danh mục sản phẩm, tìm kiếm sản phẩm theo tiêu chí khác nhau, và xem chi tiết sản phẩm với hình ảnh chất lượng cao, mô tả chi tiết, và video thuyết minh. Website có giỏ hàng động cho phép người dùng cập nhật số lượng, xóa sản phẩm, và tính toán giá tự động. Người dùng có thể thanh toán qua nhiều phương thức, quản lý profile cá nhân, xem lịch sử đơn hàng, và theo dõi trạng thái giao hàng real-time.

3.2. Chức Năng Phía Quản Trị Viên

Quản trị viên có dashboard tổng hợp để xem tất cả thông tin quan trọng của website. Các chức năng chính bao gồm quản lý đơn hàng (xem, cập nhật trạng thái, hủy), quản lý sản phẩm (thêm, sửa, xóa, cập nhật hình ảnh), quản lý danh mục, quản lý nhà cung cấp, quản lý tài khoản người dùng, và xem thống kê bán hàng chi tiết (doanh thu, số đơn, sản phẩm bán chạy nhất).

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

Đồ án đã thành công xây dựng một platform e-commerce đầy đủ chức năng, chứng minh khả năng ứng dụng công nghệ modern trong phát triển ứng dụng web thực tế. Website hoạt động ổn định trên các thiết bị khác nhau nhờ responsive design, có hiệu suất cao nhờ tối ưu hóa NextJS, và dễ quản lý nhờ giao diện admin trực quan. Đồ án cũng thể hiện kiến thức toàn diện về full-stack development, từ frontend design, backend API, database management đến deployment. Hướng phát triển tương lai bao gồm tích hợp AI cho gợi ý sản phẩm, thanh toán vệ tinh, push notification, và mobile app native.

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

Đồ án đã thực hiện thành công tất cả các yêu cầu chức năng được đề ra, từ hiển thị sản phẩm đến xử lý đơn hàng và thanh toán. Website có giao diện đẹp, responsive, tối ưu SEO giúp cải thiện ranking trên công cụ tìm kiếm. Hệ thống quản trị được thiết kế trực quan, dễ sử dụng, giúp quản trị viên tiết kiệm thời gian quản lý. Đồ án cũng thể hiện kỹ năng technical solid của nhóm sinh viên về modern web development technologies.

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

Trong tương lai, đồ án có thể mở rộng bằng cách tích hợp AI/ML cho hệ thống gợi ý sản phẩm, phát triển mobile app bằng React Native hoặc Flutter, triển khai payment gateway cho nhiều phương thức thanh toán, thêm real-time chat support, tối ưu hóa SEO nâng cao, và sử dụng cache strategies để cải thiện performance. Ngoài ra, có thể phát triển analytics dashboard chi tiết hơn và triển khai trên cloud platforms như AWS, Google Cloud để tăng khả năng mở rộng.

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

Chương 1: TỔNG QUAN 1. Lý do chọn đề tài Hiện nay với một cuộc sống hiện đại, tất cả các ngành đều phát triển nhanh chóng. Đặc biệt là ngành công nghệ thông tin, mỗi ngày, mỗi tuần có biết bao nhiêu công nghệ mới, ứng dụng mới được nghiên cứu và phát triển để phục vụ con người. Một trong những ứng dụng mà ai trong chúng ta cũng đã sử dụng qua đó là trang web.

Cụ thể, trong đề tài này là trang web bán hàng. Với nhu cầu mua sắm ngày càng cao, việc làm sao để cho người dùng có thể tiếp cận với các sản phẩm nhanh chóng, cũng như các thông tin giá cả, mẫu mã chính xác của từng sản phẩm thì đòi hỏi chủ doanh nghiệp phải đầu tư một trang web với đầy đủ các tính năng hỗ trợ người dùng. Để xây dựng một trang web thì có rất nhiều ngôn ngữ có thể làm được như: java, php, C#. Và trong thời gian học tập tại trường, nhóm chúng em đã được các thầy, cô giới thiệu về các ngôn ngữ khác nhau và được thực hành về chúng.

Ở đề tài này nhóm em sẽ sử dụng ExpressJs và NextJs, là những công nghệ đang được các công ty sử dụng nhiều và đang dần bùng nổ trong giới lập trình web. Ứng dụng ExpressJS và NextJS vào để tài wedsite bán hàng sẽ giúp cho việc mua bán hàng hóa trực tuyến một cách tiện lợi và nhanh chóng, khách hàng sẽ mua sắm mọi lúc mọi nơi chỉ với vài thao tác đơn giản trên website. Mục đích, nhiệm vụ của đề tài 1. Mục đích Đề tài tập trung nghiên cứu ứng dụng ExpressJS, NextJS và sự ảnh hưởng của nó đến sự phát triển của ngành lập trình web hiện nay.

Hơn nữa việc nghiên cứu về nó sẽ giúp nhóm em hiểu rõ hơn về ngôn ngữ lập trình mà nhóm đã chọn. Nhiệm vụ 1 + Tìm hiểu ExpressJS và NextJS. + Tuân thủ nghiệp vụ của một lập trình viên: Giải quyết vấn đề, tiếp nhận ý kiến khách hàng, làm việc nhóm, code có chú thích. + Phát triển ứng dụng web với các chức năng: mua bán sản phẩm, thêm sản phẩm mới, thống kê, lập thành viên.

Phương pháp nghiên cứu Trong quá trình thực hiện, nhóm em đã nghiên cứu nhiều tài liệu tiếng anh cũng như tiếng việt ở trên mạng về công nghệ nhóm đã chọn, tìm hiểu về cách thức hoạt động. Sau khi tìm hiểu và nghiên cứu về công nghệ trên, nhóm em tiến hành viết mã cho đề tài theo các bước, vận dụng vào thực tế để làm ra một sản phẩm website bán hàng hoàn thiện. Kết quả đạt được Một trang web bán hàng sử dụng ExpressJS và NextJS.1 Trang web bán hàng 2 Front end: Sử dụng Framwork của ReactJS là NextJS. Các giao diện tương tác với người dùng như trang chủ, thêm sản phẩm, chi tiết sản phẩm, thống kê, thanh toán sản phẩm, xóa sản phẩm, thêm sản phẩm, trang admin, giỏ hàng.

Back end: Sử dụng Framwork của NodeJS là ExpressJS. 3 Chương 2: CƠ SỞ LÝ THUYẾT 2. Giới thiệu về ReactJS 2. ReactJS là gì? - Reactjs được tạo ra bởi Jordan Walke, một kỹ sư phần mềm làm việc cho Facebook.

React lần đầu tiên được triển khai trên newsfeed Facebook vào năm 2011 và trên Instagram. - Là một library Javascript để xây dựng giao diện người dùng (UI) giành riêng cho các trang Single Page Application (SPA). - React cho phép các nhà phát triển tạo ra các ứng dụng web lớn có thể thay đổi dữ liệu mà không cần tải lại trang. Mục đích chính của React là nhanh, có thể mở rộng và đơn giản.

Nó chỉ hoạt động trên giao diện người dùng trong ứng dụng. Điều này tương ứng để xem trong mẫu MVC. Nó có thể được sử dụng với sự kết hợp của các thư viện hoặc khung công tác JavaScript khác, chẳng hạn như Angular JS trong MVC. Các tính năng của ReactJS - JSX: Trong React, thay vì sử dụng JavaScript thông thường để tạo khuôn mẫu, nó sử dụng JSX.

JSX là JavaScript đơn giản cho phép trích dẫn HTML và sử dụng các cú pháp thẻ HTML này để hiển thị các thành phần con. Cú pháp HTML được xử lý thành các lệnh gọi JavaScript của React Framework. Cũng có thể viết bằng JavaScript cũ thuần túy. - React Native: React có các thư viện riêng được Facebook công bố vào năm 2015, cung cấp kiến trúc phản ứng cho các ứng dụng gốc như IOS, Android và UPD.

- Virtual Document Object Model: React tạo bộ đệm cấu trúc dữ liệu trong bộ nhớ để tính toán các thay đổi được thực hiện và sau đó cập nhật trình duyệt. Điều này cho phép một tính năng đặc biệt cho phép lập trình viên mã hóa như thể toàn bộ trang 4 được hiển thị trên mỗi thay đổi trong đó thư viện phản ứng chỉ hiển thị các thành phần thực sự thay đổi.1 Mô tả Virtual DOM trong ReactJs 2. Tại sao nên sử dụng ReactJS? - Render phía Server giúp cải thiện việc tải trang và tối ưu trong SEO. - Tính đơn giản: ReactJS chỉ đơn giản là nắm bắt ngay lập tức.

Cách tiếp cận dựa trên thành phần, vòng đời được xác định rõ và sử dụng JavaScript đơn giản giúp React rất đơn giản để tìm hiểu, xây dựng một web chuyên nghiệp (và các ứng dụng di động) và hỗ trợ nó. React sử dụng một cú pháp đặc biệt gọi là JSX cho phép trộn HTML với JavaScript. Đây không phải là một yêu cầu; Nhà phát triển vẫn có thể viết bằng JavaScript đơn giản nhưng JSX dễ sử dụng hơn nhiều. 5 - Dễ học: Bất cứ ai có kiến thức cơ bản trước đây về lập trình đều có thể dễ dàng hiểu React trong khi Angular và Ember được gọi là ’Ngôn ngữ cụ thể của miền, ngụ ý rằng rất khó để học chúng.

Để học Reactjs chỉ cần kiến thức cơ bản về CSS và HTML. - Ràng buộc dữ liệu (Data Binding): React kết hợp với Redux để kiểm soát luồng dữ liệu đến các thành phần thông qua một điểm kiểm soát - bộ điều phối. Việc gỡ lỗi các thành phần độc lập của các ứng dụng ReactJS lớn dễ dàng hơn. - Khả năng kiểm tra (Test ability): Các ứng dụng ReactJS là siêu dễ dàng để kiểm tra.

Các khung nhìn React có thể được coi là các hàm của trạng thái, vì vậy có thể thao tác với trạng thái chúng ta chuyển sang dạng xem ReactJS và xem đầu ra (output) và các hành động ( triggered actions), sự kiện (events), functions. Giới thiệu về NextJS 2. NextJS là gì? - Là một framework nhỏ gọn giúp xây dựng ứng dụng Single Page App - Server Side Rendering với ReactJs một cách dễ dàng. Tại sao sử dụng NextJS? - Server Rendering: Với Next.js, việc hiển thị máy chủ các ứng dụng React chưa bao giờ dễ dàng hơn, bất kể dữ liệu đến từ đâu.

- Static Exporting: Không cần phải học một framework mới. Xuất một trang web tĩnh với Next.js dễ dàng như một lệnh đơn. - CSS in JS: Next.js đi kèm với style-jsx đi kèm, nhưng nó cũng hoạt động với mọi giải pháp CSS-in-JS. - Zero setup: Tự động tách mã, định tuyến dựa trên hệ thống tập tin, tải lại mã nóng và kết xuất phổ quát.

- Fully extensible: Hoàn toàn kiểm soát Babel và Webpack. Máy chủ có thể tùy chỉnh, định tuyến và các plugin tiếp theo. 6 - Ready for production: Tối ưu hóa cho kích thước xây dựng nhỏ hơn, biên dịch dev nhanh hơn và hàng tá cải tiến khác. - Hot code reloading: Sẽ tự động tải trang khi phát hiện bất cứ thay đổi nào.

- Automatic Routing: Các file, URL được đưa vào hệ thống trong thư mục pages sẽ được tự động map với project mà không cần thêm bất kỳ config nào. - Ecosystem Compatibility: Hoạt động tốt với hệ sinh thái của Javascript , Nodejs, Reactjs. - Dynamic Components: Có thể import các modules và React Component một cách linh hoạt. Giới thiệu về NodeJS 2.

NodeJS là gì? - Node.js là một JavaScript runtime được build dựa trên Chrome’s V8 JavaScript engine.js sử dụng mô hình event-driven, non-blocking I/O khiến nó trở nên nhẹ và hiệu quả. - V8 engine là một JavaScript engine mã nguồn mở chạy trên các trình duyệt Chrome, Opera và Vivaldi. - 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ỳ. - 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ể. Những ứng dụng viết bằng NodeJS - Websocket server: Các máy chủ web socket như là Online Chat, Game Server… - Fast File Upload Client: là các chương trình upload file tốc độ cao. 7 - Ad Server: Các máy chủ quảng cáo.

- Cloud Services: Các dịch vụ đám mây. - RESTful API: đây là những ứng dụng mà được sử dụng cho các ứng dụng khác thông qua API. - Any Real-time Data Application: bất kỳ một ứng dụng nào có yêu cầu về tốc độ thời gian thực. Micro Services: Ý tưởng của micro services là chia nhỏ một ứng dụng lớn thành các dịch vụ nhỏ và kết nối chúng lại với nhau.

Nodejs có thể làm tốt điều này. Lý do chọn NodeJS? - Các ứng dụng Nodejs được viết bằng javascript, ngôn ngữ này là một ngôn ngữ khá thông dụng. Theo tác giả của ngôn ngữ Javascript, Ryan Dahl: “Javascript có những đặc tính mà làm cho nó rất khác biệt so với các ngôn ngữ lập trình động còn lại, cụ thể là nó không có khái niệm về đa luồng, tất cả là đơn luồng và hướng sự kiện.” - Nodejs chạy đa nền tảng phía Server, sử dụng kiến trúc hướng sự kiện Event- driven, cơ chế non-blocking I/O làm cho nó nhẹ và hiệu quả. - Có thể chạy ứng dụng Nodejs ở bất kỳ đâu trên máy Mac – Window – Linux, hơn nữa cộng đồng Nodejs rất lớn và hoàn toàn miễn phí.

Các bạn có thể thấy cộng đồng Nodejs lớn như thế nào tại đây, các package đều hoàn toàn free: https://www.com/ - Các ứng dụng NodeJS đáp ứng tốt thời gian thực và chạy đa nền tảng, đa thiết bị. Giới thiệu về Framework ExpressJS 2. ExpressJS là gì? - 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ề các package hỗ trợ: Expressjs có vô số các package hỗ trợ nên không phải lo lắng khi làm việc với Framework này.

- Về performance: Express cung cấp thêm về các tính năng (feature) để dev lập trình tốt hơn. Chứ không làm giảm tốc độ của NodeJS.