Bối cảnh và vấn đề nghiên cứu

  • Lý do chọn đề tài

    • Trong bối cảnh hiện đại, công nghệ thông tin phát triển nhanh và nhu cầu cập nhật tin tức ngày càng cao, việc xây dựng một trang web thương mại điện tử xem tin tức đáp ứng nhu cầu người dùng “xem tin tức mọi lúc, mọi nơi” được xem là cần thiết.
    • Đề tài lựa chọn hai công nghệ hiện đại NestJS và NextJS (được các công ty công nghệ ưa chuộng) để triển khai ứng dụng, nhằm khám phá tiềm năng của chúng trong phát triển website tin tức.

  • Mục tiêu và câu hỏi/nhiệm vụ nghiên cứu

    1. Mục tiêu: Nghiên cứu và ứng dụng NestJS, NextJS vào việc thiết kế và xây dựng một website thương mại điện tử xem tin tức.
    2. Nhiệm vụ:
      • Tìm hiểu kiến trúc và tính năng của NestJS, NextJS.
      • Thiết kế và phát triển các chức năng chính: xem tin, tạo bài viết, tìm kiếm, đăng nhập/đăng xuất, quản trị nội dung.
      • Xây dựng hệ thống back‑end, front‑end và cơ sở dữ liệu, đồng thời triển khai unit test tự động bằng Cypress.

  • Đối tượng, phạm vi nghiên cứu

    • Đối tượng: Hệ thống web thương mại điện tử chuyên cung cấp tin tức (cả nội dung và giao diện người dùng).
    • Phạm vi:
      • Thời gian thực hiện: từ 24/02/2023 (ngày nhận đề tài) đến 29/05/2023 (ngày nộp đề tài).
      • Địa điểm: Trường Đại học Sư phạm Kỹ thuật TP. Hồ Chí Minh, ngành Công nghệ thông tin.
      • Phạm vi chức năng bao gồm: front‑end (NextJS, Bootstrap 4), back‑end (NestJS), cơ sở dữ liệu MySQL, và các tính năng phụ (đăng nhập Google/Facebook, quản trị, thống kê).

Cơ sở lý thuyết và phương pháp

  • Khung lý thuyết, khái niệm, mô hình

    • ReactJS – thư viện JavaScript cho UI (SPA).
    • NextJS – framework hỗ trợ Server‑Side Rendering cho React, cung cấp routing, static exporting, CSS‑in‑JS.
    • NodeJS – môi trường chạy JavaScript trên server (event‑driven, non‑blocking I/O).
    • NestJS – framework NodeJS dựa trên TypeScript, hỗ trợ kiến trúc module, controller, provider.
    • MySQL – hệ quản trị cơ sở dữ liệu quan hệ (SQL).
    • Design Pattern – cấu trúc mã back‑end được tổ chức theo các pattern (module, provider, controller).
    • Mobile‑First / Process Web App – hướng thiết kế trải nghiệm người dùng trên thiết bị di động trước.

  • Phương pháp nghiên cứu

    • Nghiên cứu tài liệu: Thu thập và đọc tài liệu tiếng Anh/Việt về NestJS, NextJS, React, MySQL.
    • Phân tích‑tổng hợp: Đánh giá các tính năng, lựa chọn công nghệ phù hợp.
    • Thiết kế hệ thống: Lược đồ Use‑case, thiết kế lớp, mô hình dữ liệu (ERD, Database Diagram).
    • Phát triển: Viết mã nguồn theo mô hình Duck folder structure (front‑end) và module‑based (back‑end).
    • Kiểm thử: Viết unit test và testcase tự động bằng Cypress.
    • Triển khai: Deploy back‑end, front‑end và database lên server.

  • Nguồn dữ liệu

    • Tài liệu chính thức của NestJS, NextJS, ReactJS.
    • Các bài viết, blog, video hướng dẫn trên internet (tài liệu tiếng Anh/Việt).
    • Mã nguồn và cấu trúc dự án do nhóm sinh viên tự viết.

Nội dung chính theo từng chương

Chương 1: Tổng quan

  • Trình bày lý do chọn đề tài, mục tiêu và nhiệm vụ nghiên cứu.
  • Giới thiệu phương pháp nghiên cứu và kết quả đạt được (website tin tức trực tuyến sử dụng NestJS và NextJS).

Chương 2: Cơ sở lý thuyết

  • Giới thiệu chi tiết ReactJS, NextJS, NodeJS, NestJS, MySQL.
  • Phân tích ưu nhược điểm của mỗi công nghệ và lý do chọn NodeJS và NestJS cho back‑end, NextJS cho front‑end.

Chương 3: Khảo sát hiện trạng và xác định yêu cầu

  • Khảo sát các website tin tức phổ biến (vnexpress, zingnews, kenh14) để rút ra các chức năng chuẩn.
  • Xác định yêu cầu người dùng (độ ổn định, tốc độ, giao diện thân thiện, đăng ký thành viên, bảo mật) và yêu cầu doanh nghiệp (cập nhật liên tục, thống kê).
  • Lược đồ Use‑case và mô tả chi tiết chức năng (bảng 3.1‑3.15).

Chương 4: Phân tích và thiết kế hệ thống

  • Phân tích hệ thống: chức năng front‑end và back‑end.
  • Thiết kế kiến trúc:
    • Lược đồ lớp (Class Diagram) cho NestJS modules.
    • ERD và Database Diagram cho MySQL (bảng người dùng, bài viết, tag, thống kê).
  • Thiết kế giao diện: các trang chính (trang chủ, chi tiết bài viết, đăng nhập, quản trị).

Chương 5: Cài đặt và kiểm thử

  • Cài đặt môi trường: NodeJS 14+, NestJS 9.0, NextJS 13, MySQL.
  • Triển khai mã nguồn: cấu trúc folder “Duck” cho front‑end, module‑based cho back‑end.
  • Kiểm thử: viết unit test và automation test bằng Cypress; báo cáo kết quả (bảng 5.1).

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

  • Tổng kết các kết quả đạt được và đóng góp (xem phần “Kết quả và đóng góp”).
  • Đề xuất hướng nghiên cứu tiếp (cải thiện UI/UX, mở rộng tính năng mobile, tích hợp AI đề xuất tin tức).

Kết quả và đóng góp

  • Kết quả chính: Hoàn thiện một website thương mại điện tử xem tin tức hoạt động trên nền NextJS 13 (front‑end) và NestJS 9.0 (back‑end), kết nối MySQL để lưu trữ dữ liệu.
  • Chức năng quan trọng (được liệt kê trong bản tóm tắt):
    • Xem danh mục, chi tiết bài viết, tìm kiếm, thêm bài viết.
    • Đăng nhập/đăng xuất (tài khoản, Google, Facebook).
    • Quản trị người dùng, bài viết, tag, thống kê.
    • Automation test bằng Cypress.
  • Giải pháp/kiến nghị:
    • Áp dụng Design Pattern trong NestJS, cấu trúc “Duck” cho NextJS, hỗ trợ Mobile‑First để nâng cao trải nghiệm trên thiết bị di động.
    • Tích hợp Automation Test để giảm rủi ro lỗi khi thay đổi chức năng.
  • Đóng góp so với nghiên cứu trước:
    • Sử dụng NextJS 13 và NestJS 9.0 – các phiên bản mới nhất được coi là “công nghệ dẫn đầu”.
    • Áp dụng Design Pattern và Duck folder structure – ít xuất hiện trong các đề tài sinh viên trước đây.
    • Kết hợp Cypress để tự động hoá kiểm thử front‑end, một thực tiễn chưa phổ biến trong các đồ án tương tự.

Hạn chế và hướng nghiên cứu tiếp

  • Hạn chế:
    • Tài liệu dự án chưa mô tả chi tiết toàn diện (được ghi nhận trong phiếu nhận xét).
    • Giao diện UI/UX “chưa được chỉnh chu, tỉ mỉ” và chưa có bước đột phá so với các website tin tức hiện có.
  • Hướng nghiên cứu tiếp:
    • Cải thiện UI/UX dựa trên nguyên tắc Design System và User Testing.
    • Mở rộng tính năng AI đề xuất tin tức dựa trên hành vi người dùng.
    • Tối ưu hoá hiệu năng server và database cho lưu lượng truy cập cao.

Giá trị tham khảo

  • Đối tượng: Sinh viên ngành Công nghệ thông tin, Kỹ thuật phần mềm, các nhà nghiên cứu và thực hành phát triển web application.
  • Phần đáng tham khảo:
    • Chương 2 – Tổng quan lý thuyết về React, NextJS, NodeJS, NestJS, MySQL.
    • Chương 4 – Thiết kế kiến trúc hệ thống, ERD, lớp diagram.
    • Chương 5 – Cài đặt môi trường, cấu trúc dự án, quy trình automation testing bằng Cypress.

Câu hỏi thường gặp

  1. Dự án sử dụng những công nghệ nào ở front‑end và back‑end?

    • Front‑end: NextJS 13 (framework của ReactJS) + Bootstrap 4.
    • Back‑end: NestJS 9.0 (framework NodeJS) + MySQL cho CSDL.

  2. Các chức năng chính mà website cung cấp cho người dùng là gì?

    • Xem danh mục và chi tiết bài viết, tìm kiếm, thêm bài viết mới, quản lý profile, đăng nhập/đăng xuất (tài khoản, Google, Facebook).

  3. Có những công cụ kiểm thử nào được áp dụng trong dự án?

    • Cypress được dùng để viết unit test và automation test cho các chức năng front‑end.

  4. Kiến trúc thư mục front‑end được tổ chức như thế nào?

    • Sử dụng “Duck folder structure”, một boilerplate mới cho dự án NextJS, tách rõ các domain (pages, components, services, utils).

  5. Dự án có hỗ trợ quản trị nội dung không?

    • Có. Trang quản trị cho phép quản lý người dùng, bài viết, tag, thống kê và các thao tác thêm/sửa/xóa tương ứng (xem các bảng 3.1‑3.15).

Kết luận

Đồ án “Xây dựng trang web thương mại điện tử xem tin tức” đã thành công trong việc áp dụng NestJS và NextJS để tạo ra một nền tảng web tin tức đáp ứng các chức năng cơ bản và một số tính năng nâng cao (mobile‑first, automation testing). Mặc dù còn hạn chế về tài liệu chi tiết và giao diện người dùng, dự án đã đóng góp những kiến trúc và phương pháp phát triển hiện đại có thể được khai thác và mở rộng trong các nghiên cứu và dự án thực tiễn tiếp theo.

Thiết kế và triển khai

Kiến trúc tổng thể

  • Front‑end: NextJS 13 → SSR + SPA, các trang được tổ chức trong thư mục pages/ và components/ theo Duck folder structure.
  • Back‑end: NestJS 9.0 → Module‑Controller‑Provider, các tính năng API (REST) được khai báo trong các module (AuthModule, PostsModule, UsersModule, …).
  • Database: MySQL → Các bảng users, posts, tags, statistics (xem Bảng 3.1‑3.16).

Công nghệ chính

Thành phần Công nghệ Phiên bản
Front‑end NextJS 13
Front‑end Bootstrap 4
Back‑end NestJS 9.0
Runtime NodeJS ≥14
CSDL MySQL 8.x
Kiểm thử Cypress 12.x

Quy trình triển khai

  1. Cài đặt môi trường (npm install, cấu hình .env cho DB).
  2. Phát triển Back‑end: xây dựng các controller, service, entity (TypeORM).
  3. Phát triển Front‑end: tạo các page (/, /posts/[id], /admin/...) và component tái sử dụng.
  4. Kiểm thử: viết script Cypress kiểm tra luồng đăng nhập, tạo bài viết, quản trị.
  5. Deploy: Đẩy source lên server, cấu hình NGINX làm reverse proxy, kết nối tới MySQL đã triển khai.

Kiểm thử tự động (Cypress) – Bảng 5.1 liệt kê các testcase, trong đó có:

  • Đăng nhập thành công/ thất bại.
  • Tạo bài viết mới và xác nhận xuất hiện trong danh sách.
  • Xóa bài viết và kiểm tra không còn trong DB.

Kết quả kiểm thử: Tất cả các testcase chính đều pass, chứng minh tính ổn định của các chức năng cốt lõi.