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

1. Lý do chọn đề tài và bối cảnh thực tiễn

Trong bối cảnh công nghệ thông tin phát triển liên tục, thương mại điện tử đã trở thành phương thức mua bán tất yếu trong đời sống xã hội. Nhu cầu tiếp cận sản phẩm nhanh chóng, nắm bắt chính xác giá cả và mẫu mã của người tiêu dùng đòi hỏi các đơn vị kinh doanh phải đầu tư xây dựng các nền tảng bán hàng trực tuyến có đầy đủ tính năng hỗ trợ.

Đối với các hệ thống kinh doanh thiết bị công nghệ, việc vận hành cửa hàng truyền thống bộc lộ nhiều trở ngại như: chi phí mặt bằng và trang trí lớn, giới hạn về khoảng cách địa lý khiến khách hàng ở xa khó tiếp cận, khó khăn trong việc thu thập ý kiến đóng góp, cũng như việc quản lý thông tin khách hàng, sản phẩm, đơn hàng trên giấy tờ dễ dẫn đến sai lệch. Đồng thời, việc duy trì một hệ thống bán hàng trực tuyến cũng đối mặt với nhiều rủi ro thực tế: sự cố máy chủ và tên miền, nguy cơ bảo mật, tình trạng nghẽn hệ thống khi lưu lượng truy cập tăng đột biến, hiện tượng cơ sở dữ liệu thiếu đồng bộ dẫn đến tràn dữ liệu, và chi phí duy trì hệ thống.

Để giải quyết các vấn đề trên và bắt kịp xu hướng phát triển công nghệ web, đề tài lựa chọn nghiên cứu và ứng dụng bộ đôi công nghệ ExpressJS và NextJS nhằm phát triển một website bán đồ điện tử tiện lợi, tối ưu trải nghiệm người dùng và hỗ trợ quản trị vận hành.

2. Mục tiêu và nhiệm vụ nghiên cứu

  • Mục đích: Nghiên cứu ứng dụng ExpressJS, NextJS và tìm hiểu sự ảnh hưởng của các công nghệ này đến sự phát triển của ngành lập trình web hiện nay; nâng cao mức độ hiểu biết chuyên sâu về nền tảng công nghệ đã lựa chọn.
  • Nhiệm vụ cụ thể (được đánh số theo văn bản):
    1. Tìm hiểu framework ExpressJS và NextJS.
    2. Tuân thủ đầy đủ 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, viết mã nguồn có chú thích rõ ràng.
    3. Phát triển ứng dụng web hoàn chỉnh 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ê số liệu và quản lý/lập thành viên.

3. Đối tượng và phạm vi nghiên cứu

  • Đối tượng nghiên cứu: Quy trình phân tích, thiết kế và xây dựng hệ thống website thương mại điện tử chuyên ngành thiết bị điện tử (điện thoại, tivi, máy ảnh); nghiên cứu sâu về cơ chế hoạt động của ReactJS, NextJS, NodeJS, ExpressJS và cơ sở dữ liệu MongoDB.
  • Phạm vi khảo sát: Khảo sát thực tế các mô hình website thương mại điện tử tiêu biểu tại Việt Nam gồm: Thế Giới Di Động, Lazada, Tiki và Nguyễn Kim.
  • Thời gian thực hiện: Từ ngày 24/02/2020 đến ngày 01/07/2020.
  • Đơn vị thực hiện: Khoa Đào tạo Chất lượng cao, Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh.

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

Khóa luận xây dựng trên nền tảng ngăn xếp công nghệ JavaScript toàn diện (Full-stack JavaScript), tận dụng tính đồng bộ ngôn ngữ giữa client và server:

Thành phần kiến trúc Công nghệ áp dụng Đặc tính kỹ thuật cốt lõi theo văn bản
Front-end UI & Framework NextJS (xây dựng trên ReactJS), Bootstrap 4 - Hỗ trợ Server-Side Rendering (SSR) cải thiện tải trang và tối ưu SEO.
- Định tuyến tự động theo thư mục pages (Automatic Routing).
- Tách mã tự động (Zero setup), nạp lại mã nóng (Hot code reloading), CSS-in-JS.
- Sử dụng Virtual DOM và cú pháp JSX của ReactJS; ràng buộc dữ liệu kết hợp mô hình điều phối.
Back-end Server ExpressJS (chạy trên môi trường NodeJS) - Chạy trên nền NodeJS với cơ chế Event-driven, Non-blocking I/O, V8 engine.
- Kiến trúc hỗ trợ mô hình MVC, định nghĩa RESTful API.
- Quản lý định tuyến rõ ràng (app.method(path, handle)).
- Tích hợp 5 loại Middleware: cấp ứng dụng, cấp router, xử lý lỗi, tích hợp sẵn, và bên thứ ba.
Cơ sở dữ liệu MongoDB (NoSQL) - Cơ sở dữ liệu NoSQL hướng tài liệu (Document JSON).
- Schema linh hoạt, không sử dụng ràng buộc khóa cứng/join như RDBMS, tối ưu hóa tốc độ ghi (Insert) và xử lý dữ liệu lớn, thời gian thực.
  • Phương pháp nghiên cứu thực tế:
    • Phương pháp nghiên cứu tài liệu: Thu thập, tổng hợp và phân tích tài liệu kỹ thuật tiếng Việt và tiếng Anh về JavaScript runtime, NextJS, ExpressJS và MongoDB.
    • Phương pháp khảo sát hiện trạng: Khảo sát đối sánh giao diện, tính năng (giỏ hàng, thanh toán, catalog, chăm sóc khách hàng, chatbot) của 4 website thương mại điện tử lớn.
    • Phương pháp phân tích và thiết kế hệ thống hướng đối tượng: Xây dựng lược đồ Use Case, mô tả 16 kịch bản Use Case chi tiết, thiết kế lược đồ lớp (Class Diagram), lược đồ quan hệ thực thể (ERD).
    • Phương pháp thực nghiệm - phát triển phần mềm: Lập trình hiện thực hóa các chức năng phía Client và Server, sau đó thực hiện kiểm thử chức năng (Functional Testing).

Thiết kế và triển khai hệ thống

1. Kiến trúc và cơ chế xử lý

Hệ thống được tổ chức tách biệt giữa tầng hiển thị và tầng dịch vụ backend:

  • Tầng Client (NextJS): Xử lý giao diện người dùng theo nguyên tắc Responsive (tương thích trên nền tảng máy tính, máy tính bảng và điện thoại di động). Tận dụng khả năng Server Rendering để tối ưu hiển thị danh mục, chi tiết sản phẩm và hỗ trợ SEO.
  • Tầng Server (ExpressJS): Đóng vai trò cung cấp RESTful API, quản lý các tuyến đường (routes), điều hướng dữ liệu và thực thi logic nghiệp vụ thông qua chuỗi Middleware liên tiếp kết thúc bằng các hàm xử lý phản hồi (req, res, next).
  • Tầng Dữ liệu (MongoDB): Lưu trữ các collection phi quan hệ dưới dạng Document, đảm bảo tốc độ đọc/ghi dữ liệu của các giao dịch đơn hàng.
+-------------------------------------------------------------+
|                      NGƯỜI DÙNG / ADMIN                     |
+-------------------------------------------------------------+
                              |
                     (HTTP/HTTPS Requests)
                              v
+-------------------------------------------------------------+
|              TẦNG FRONTEND (NextJS, Bootstrap 4)            |
| - Giao diện Responsive (Web, Mobile, Tablet)                |
| - Server-Side Rendering (SSR) & Routing tự động             |
| - Tích hợp Login (Facebook, Google) & Chat Messenger        |
+-------------------------------------------------------------+
                              |
                     (RESTful API Calls)
                              v
+-------------------------------------------------------------+
|               TẦNG BACKEND (ExpressJS on NodeJS)            |
| - Router & Controllers (app.method(path, handle))           |
| - Chuỗi xử lý Middleware (App, Router, Error, 3rd-party)    |
| - Xử lý nghiệp vụ: Đơn hàng, Tài khoản, Sản phẩm, Thống kê  |
+-------------------------------------------------------------+
                              |
                    (Mongoose / MongoDB Driver)
                              v
+-------------------------------------------------------------+
|                   CƠ SỞ DỮ LIỆU (MongoDB)                   |
| - Collections: Product, User, Order, Order Detail,          |
|   Category, Supplier, Slide, Info                           |
+-------------------------------------------------------------+

2. Thiết kế cơ sở dữ liệu

Hệ thống thiết kế 8 bảng dữ liệu (collection) phục vụ đầy đủ các chức năng nghiệp vụ:

  1. Product: Lưu thông tin chi tiết sản phẩm điện tử, giá, mô tả, hình ảnh, video clip, liên kết danh mục và nhà cung cấp.
  2. User: Quản lý tài khoản khách hàng, nhân viên và quản trị viên, thông tin đăng nhập, phân quyền.
  3. Order: Lưu thông tin tổng quát về đơn đặt hàng, trạng thái xử lý, ngày đặt, thông tin giao nhận.
  4. Order Detail: Chi tiết các mặt hàng, số lượng, đơn giá trong từng đơn hàng cụ thể.
  5. Category: Danh mục phân loại các thiết bị điện tử (điện thoại, tivi, máy ảnh...).
  6. Supplier: Quản lý thông tin các nhà cung cấp sản phẩm.
  7. Slide: Lưu trữ và điều phối hình ảnh banner, slide trình diễn khuyến mãi ngoài trang chủ.
  8. Info: Lưu trữ các thông tin chung về cấu hình, chính sách và liên hệ của website.

3. Phân hệ chức năng chi tiết

  • Phân hệ Người dùng (Front-end):
    • Xem danh mục sản phẩm, tìm kiếm sản phẩm qua khung tìm kiếm.
    • Xem chi tiết hình ảnh, bài viết mô tả, video clip giới thiệu sản phẩm, xem nhanh sản phẩm.
    • Quản lý giỏ hàng, thực hiện quy trình đặt hàng và thanh toán trực tuyến.
    • Đăng ký thành viên (xác thực qua email kích hoạt), đăng nhập/đăng xuất bằng tài khoản hệ thống hoặc tài khoản Google, Facebook; đổi mật khẩu.
    • Quản lý hồ sơ cá nhân (profile), theo dõi lịch sử và chi tiết các đơn đặt hàng cá nhân.
    • Tích hợp khung hỗ trợ chăm sóc khách hàng thông qua Facebook Messenger.
  • Phân hệ Quản trị (Back-end/Admin):
    • Quản trị đơn hàng: Tiếp nhận, theo dõi trạng thái, xem chi tiết và xử lý đơn đặt hàng.
    • Quản lý danh mục (Category) và Quản lý nhà cung cấp (Supplier): Thêm mới, cập nhật, xóa.
    • Quản lý sản phẩm (Product): Thêm sản phẩm mới, chỉnh sửa thông tin, cập nhật kho, xóa sản phẩm.
    • Quản lý tài khoản (User): Phân cấp quản lý nhân viên và khách hàng, tạo tài khoản, khóa hoặc chỉnh sửa thông tin.
    • Quản trị nội dung website: Cập nhật thông tin chung (Info), điều chỉnh slide và banner quảng cáo.
    • Xem báo cáo và các số liệu thống kê vận hành.

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

Chương 1: Tổng quan

Trình bày bối cảnh chuyển dịch số hóa trong kinh doanh bán lẻ, sự bùng nổ của thương mại điện tử và nhu cầu xây dựng trang web bán thiết bị điện tử. Xác định mục tiêu nghiên cứu công nghệ ExpressJS, NextJS; phân công nhiệm vụ cụ thể cho các thành viên. Nêu rõ phương pháp tiếp cận từ lý thuyết đến triển khai mã nguồn và tổng kết các kết quả đạt được ban đầu của đề tài.

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

Đi sâu vào phân tích cơ chế hoạt động và ưu điểm của từng công nghệ trong ngăn xếp phần mềm:

  • ReactJS: Trình bày lịch sử phát triển từ năm 2011 bởi Jordan Walke tại Facebook; cơ chế Virtual DOM tối ưu hóa việc render; cú pháp JSX; cơ chế liên kết dữ liệu với Redux.
  • NextJS: Phân tích các ưu điểm như Server Rendering, khả năng xuất trang tĩnh (Static Exporting), styled-jsx, định tuyến tự động dựa trên cấu trúc tập tin, cơ chế Hot code reloading và Dynamic Components.
  • NodeJS: Giới thiệu nền tảng JavaScript runtime phát triển từ năm 2009 trên nền V8 Engine của Google, cơ chế đơn luồng (single-thread), kiến trúc hướng sự kiện (event-driven) và non-blocking I/O.
  • ExpressJS: Cấu trúc ứng dụng (app.js, package.json, các thư mục routes, view, public), cách thức định danh Router (app.method(path, handle)), và vai trò điều phối luồng của 5 nhóm Middleware.
  • MongoDB & NoSQL: Khái niệm NoSQL, cấu trúc Document JSON, khả năng mở rộng quy mô, tốc độ xử lý các thao tác ghi dữ liệu lớn so với hệ quản trị cơ sở dữ liệu quan hệ (RDBMS).

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

Khảo sát thực tế các tính năng của 4 website bán hàng lớn (Nguyễn Kim, Thế Giới Di Động, Lazada, Tiki). Phân tích chi tiết yêu cầu người dùng (giao diện ổn định, không giật lag, thanh toán an toàn, bảo mật thông tin) và yêu cầu phía doanh nghiệp (cập nhật sản phẩm liên tục, quản lý đơn hàng, thông tin khuyến mãi).

Chương này xây dựng Lược đồ Use Case tổng thể và chi tiết hóa 16 bảng kịch bản Use Case bao gồm: Quản lý khách hàng, Quản lý nhân viên, Quản lý sản phẩm, Thêm khách hàng, Thêm nhân viên, Thêm sản phẩm, Đăng ký thành viên, Mua sản phẩm, Đổi trả sản phẩm, Cập nhật khách hàng, Cập nhật nhân viên, Cập nhật sản phẩm, Chăm sóc khách hàng, Thanh toán online, Quản lý đơn hàng, Khách hàng cập nhật thông tin.

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

Chi tiết hóa cấu trúc hệ thống:

  • Phân tích chức năng phía Frontend và Backend.
  • Xây dựng Lược đồ lớp (Class Diagram) và Lược đồ quan hệ dữ liệu (ERD/Database Diagram).
  • Chi tiết hóa 8 cấu trúc dữ liệu: Product, User, Order, Order Detail, Category, Supplier, Slide, Info.
  • Thiết kế chi tiết giao diện với 30 bảng mô tả và hình ảnh thiết kế tương ứng (từ bảng 4.11 đến 4.40): các trang quản trị (đăng nhập admin, quản lý/thêm/sửa nhân viên, khách hàng, danh mục, nhà cung cấp, sản phẩm, đơn hàng, slide) và các trang người dùng (trang chủ, danh mục sản phẩm, xem nhanh, chi tiết sản phẩm kèm video, giỏ hàng, thanh toán, tài khoản, lịch sử hóa đơn, khung tìm kiếm).

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

Mô tả cấu trúc tổ chức mã nguồn của phân hệ Front-end và Back-end. Triển khai cài đặt hệ thống trên môi trường máy chủ và tiến hành kiểm thử các chức năng chính thông qua Bảng kiểm thử sản phẩm (Bảng 5.1).

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

Đánh giá tổng kết mức độ hoàn thành nhiệm vụ của đồ án, chỉ ra các đóng góp thực tế trong việc làm chủ công nghệ NextJS và ExpressJS, đồng thời vạch ra các hướng tiếp tục hoàn thiện phần mềm trong tương lai.

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

1. Kết quả chính đạt được

  • Xây dựng hoàn chỉnh website thương mại điện tử chuyên ngành đồ điện tử có khả năng chạy đa nền tảng (Web, Mobile, Tablet) nhờ thiết kế Responsive.
  • Hoàn thiện 100% các nhóm chức năng cho 3 nhóm đối tượng (Khách hàng, Nhân viên, Quản trị viên):
    • Phía khách hàng: Xem danh mục, tìm kiếm, xem chi tiết/hình ảnh/video sản phẩm, giỏ hàng, đặt hàng, thanh toán trực tuyến, đăng ký/đăng nhập qua Google/Facebook/tài khoản thường, đổi trả hàng, tương tác hỗ trợ qua Messenger.
    • Phía quản trị: Quản lý toàn diện dữ liệu sản phẩm, danh mục, nhà cung cấp, người dùng, slide quảng cáo, tiếp nhận và xử lý đơn đặt hàng, theo dõi số liệu thống kê.
  • Tích hợp thành công mô hình Server-Side Rendering thông qua NextJS, giúp tối ưu tốc độ nạp trang ban đầu và cấu trúc website thân thiện với các công cụ tìm kiếm.

2. Giải pháp và kiến nghị đề xuất từ tác giả

  • Đối với các rủi ro vận hành hạ tầng thương mại điện tử: Đề xuất tăng cường kinh phí bảo trì, đăng ký tên miền bảo mật cao, thuê/nhập máy chủ có tốc độ xử lý cao, duy trì đội ngũ nhân lực chất lượng cao và hợp tác với các đơn vị uy tín để trao đổi kinh nghiệm.
  • Đảm bảo tuân thủ nghiêm ngặt các quy định pháp luật của nhà nước về thương mại điện tử, đăng ký chứng chỉ kinh doanh trực tuyến và thực hiện nghĩa vụ thuế thu nhập.

3. Đóng góp về mặt học thuật và kỹ thuật

  • Cung cấp tài liệu khảo sát, phân tích nghiệp vụ và kịch bản Use Case chi tiết (16 kịch bản hoàn chỉnh) cho bài toán thương mại điện tử.
  • Hiện thực hóa mô hình kết hợp Full-stack JavaScript hiện đại: NextJS (ReactJS) ở tầng giao diện, ExpressJS (NodeJS) ở tầng dịch vụ và MongoDB ở tầng dữ liệu, làm tài liệu tham khảo thực tế cho việc ứng dụng kiến trúc này trong các dự án phần mềm tương tự.

Hạn chế và hướng phát triển

  • Hạn chế được ghi nhận:
    • Việc tích hợp trí tuệ nhân tạo/chatbot tự động tương tác nâng cao với khách hàng là công việc phức tạp, đồ án hiện mới dừng lại ở mức độ tích hợp plugin hỗ trợ Messenger trực tuyến.
    • Kinh nghiệm thực tiễn và trình độ lý luận của nhóm tác giả trong bước đầu tiếp cận các công nghệ mới còn có những điểm giới hạn nhất định.
  • Hướng phát triển:
    • Nâng cấp và tích hợp hệ thống Chatbot thông minh tự động tư vấn sản phẩm cho khách hàng 24/7.
    • Tiếp tục tối ưu hóa hiệu năng cơ sở dữ liệu MongoDB và mở rộng các giải pháp bảo mật nâng cao cho hệ thống thanh toán và dữ liệu người dùng.

Giá trị tham khảo

Đồ án là tài liệu tham khảo hữu ích cho:

  • Sinh viên ngành Công nghệ thông tin, Kỹ thuật phần mềm: Đặc biệt là những người đang nghiên cứu phát triển ứng dụng web bằng ngăn xếp công nghệ Full-stack JavaScript, NextJS, ReactJS, ExpressJS và cơ sở dữ liệu NoSQL MongoDB.
  • Người làm đề tài/dự án về thương mại điện tử: Có thể tái sử dụng trực tiếp cấu trúc đặc tả 16 kịch bản Use Case chi tiết tại Chương 3, thiết kế lược đồ thực thể 8 bảng dữ liệu tại Chương 4, cũng như tham khảo quy trình phân chia thư mục và xây dựng RESTful API tại Chương 5.

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

1. Khóa luận sử dụng những công nghệ cụ thể nào để xây dựng hệ thống?
Hệ thống sử dụng NextJS kết hợp Bootstrap 4 cho tầng Front-end; ExpressJS chạy trên môi trường NodeJS cho tầng Back-end; và cơ sở dữ liệu NoSQL MongoDB cho tầng lưu trữ dữ liệu.

2. Phân hệ người dùng hỗ trợ các phương thức đăng nhập và tiện ích tương tác nào?
Khách hàng có thể đăng nhập bằng tài khoản đăng ký hệ thống (có xác thực email), hoặc đăng nhập nhanh thông qua tài khoản Google hoặc Facebook. Khách hàng có thể tương tác trực tiếp với nhân viên hỗ trợ thông qua biểu tượng Messenger được tích hợp trên website.

3. Cơ sở dữ liệu của website gồm những bảng (collection) nào?
Cơ sở dữ liệu MongoDB của hệ thống gồm 8 bảng dữ liệu: Product, User, Order, Order Detail, Category, Supplier, Slide, và Info.

4. Khóa luận đã tiến hành khảo sát những website thương mại điện tử thực tế nào?
Đề tài đã tiến hành khảo sát chức năng và giao diện của 4 website bán hàng phổ biến tại Việt Nam gồm: Nguyễn Kim, Thế Giới Di Động, Lazada và Tiki.

5. Đề tài do ai hướng dẫn và được thực hiện tại đơn vị nào?
Đề tài do TS. Lê Văn Vinh hướng dẫn, được thực hiện bởi sinh viên Nguyễn Văn Lành và Lê Mạnh Hùng thuộc Khoa Đào tạo Chất lượng cao, Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh, hoàn thành vào tháng 07 năm 2020.

Kết luận

Đồ án tốt nghiệp "Tìm hiểu ExpressJs, NextJs và phát triển website bán đồ điện tử" của sinh viên Nguyễn Văn Lành và Lê Mạnh Hùng đã hoàn thành đầy đủ mục tiêu nghiên cứu lý thuyết và xây dựng sản phẩm ứng dụng. Hệ thống đã triển khai thành công một website thương mại điện tử đa nền tảng với đầy đủ các nghiệp vụ mua bán, quản trị danh mục, xử lý đơn hàng và phân quyền tài khoản dựa trên nền tảng ExpressJS, NextJS và MongoDB. Đây là tài liệu tham khảo có giá trị cao về mặt phân tích nghiệp vụ Use Case cũng như phương pháp hiện thực hóa kiến trúc Full-stack JavaScript cho sinh viên và lập trình viên ngành Công nghệ thông tin.