Xây dựng website thương mại điện tử về bán quần áo

Đồ án tốt nghiệp xây dựng website thương mại điện tử bán quần áo MERN Stack tại ĐH Sư phạm Kỹ thuật TP.HCM

• Tác giả: Lã Quý Quân
• Người hướng dẫn: ThS. Nguyễn Minh Đạo
• 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 thương mại điện tử về bán quần áo
• Loại tài liệu: Khóa luận tốt nghiệp
• Năm xuất bản: 2025
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Tổng quan website thương mại điện tử bán quần áo tại ĐH SPKT

Thị trường thương mại điện tử Việt Nam đang tăng trưởng mạnh mẽ. Nhu cầu mua sắm thời trang qua internet ngày càng phổ biến. Sinh viên và người tiêu dùng trẻ ưu tiên giao dịch trực tuyến vì tính tiện lợi. Đề tài tốt nghiệp tại Trường Đại học Sư phạm Kỹ thuật TP.HCM tập trung nghiên cứu mô hình kinh doanh này. Dự án hướng đến việc thiết kế và lập trình website bán quần áo hoàn chỉnh. Nền tảng thương mại điện tử giúp doanh nghiệp tối ưu chi phí vận hành mặt bằng. Doanh nghiệp dễ dàng tiếp cận khách hàng trên diện rộng. Khách hàng có thể tìm kiếm mẫu mã trang phục nhanh chóng. Thao tác đặt mua diễn ra thuận tiện mọi lúc mọi nơi. Dự án đáp ứng các tiêu chuẩn kỹ thuật hiện đại của ngành công nghệ thông tin. Các quy trình từ hiển thị hàng hóa đến thanh toán đều được tự động hóa. Đề tài khẳng định năng lực ứng dụng kiến thức vào bài toán thực tiễn của sinh viên kỹ thuật. Đây là bước chuẩn bị vững chắc cho môi trường làm việc chuyên nghiệp.

1.1. Bối cảnh nghiên cứu đề tài tại ĐH Sư phạm Kỹ thuật TP.HCM

Khoa Công nghệ Thông tin tại ĐH Sư phạm Kỹ thuật TP.HCM luôn chú trọng thực hành. Sinh viên cần áp dụng lý thuyết để giải quyết nhu cầu thực tế. Ngành bán lẻ thời trang hiện nay đòi hỏi chuyển đổi số mạnh mẽ. Các cửa hàng truyền thống gặp khó khăn khi mở rộng thị trường. Chi phí vận hành mặt bằng và nhân sự ngày càng tăng cao. Xây dựng website bán hàng trực tuyến trở thành giải pháp tất yếu. Dự án nghiên cứu chi tiết quy trình mua sắm thời trang. Nhóm đề tài phân tích sâu hành vi của người tiêu dùng trực tuyến. Mục tiêu trọng tâm là tạo ra hệ thống ổn định và bảo mật cao. Nền tảng hỗ trợ doanh nghiệp tối ưu chi phí và tăng trưởng doanh thu.

1.2. Mục tiêu phát triển hệ thống bán quần áo trực tuyến

Mục tiêu hàng đầu của hệ thống là cung cấp trải nghiệm mua sắm mượt mà. Giao diện người dùng cần đạt tính thẩm mỹ cao và dễ thao tác. Khách hàng dễ dàng tìm kiếm sản phẩm theo kích thước, màu sắc và mức giá. Website cần xử lý hàng trăm giao dịch mua hàng cùng một thời điểm. Tốc độ phản hồi của trang web luôn được duy trì ở mức tối ưu. Về phía người quản trị, hệ thống cung cấp công cụ kiểm soát kho hàng chặt chẽ. Đơn hàng được tiếp nhận, xử lý và cập nhật trạng thái theo thời gian thực. Hệ thống tự động hoàn lại số lượng tồn kho khi phát sinh yêu cầu hủy đơn. Nền tảng giúp cửa hàng giảm thiểu tối đa sai sót trong quản lý tồn kho và kinh doanh.

II. Phân tích bài toán thương mại điện tử bán quần áo thực tế

Kinh doanh thời trang trực tuyến đặt ra nhiều thách thức về mặt kỹ thuật. Dữ liệu sản phẩm quần áo rất phức tạp. Mỗi mặt hàng có nhiều thuộc tính đi kèm như kích cỡ, màu sắc và chất liệu. Số lượng hàng tồn kho thay đổi liên tục theo từng biến thể. Nếu hệ thống xử lý dữ liệu chậm trễ, tình trạng quá bán sẽ xảy ra. Điều này gây mất uy tín nghiêm trọng đối với khách hàng. Bên cạnh đó, luồng xử lý đơn hàng đòi hỏi sự chính xác cao. Người mua cần xem lại lịch sử đơn hàng bất kỳ lúc nào. Họ cũng cần hủy đơn hàng khi đơn còn ở trạng thái chờ duyệt. Lúc này, hệ thống phải tự động hoàn lại số lượng sản phẩm vào kho. Phiếu giảm giá đã sử dụng cũng cần được phục hồi ngay lập tức. Ngoài ra, sự đồng thời của nhiều người truy cập tạo áp lực lớn lên máy chủ. Nền tảng cần cơ chế xử lý bất đồng bộ để tránh nghẽn mạng. Việc phân tích kỹ lưỡng các ca sử dụng giúp loại bỏ lỗi phát sinh trong thực tế vận hành.

2.1. Phân tích ca sử dụng quản lý và tra cứu đơn hàng

Ca sử dụng xem danh sách và chi tiết đơn hàng giữ vai trò trọng tâm. Khách hàng đăng nhập vào hệ thống qua tài khoản cá nhân. Người dùng di chuyển đến mục quản lý hồ sơ trên thanh điều hướng. Hệ thống sẽ hiển thị toàn bộ danh sách đơn đặt hàng kèm trạng thái chi tiết. Khi người dùng bấm xem chi tiết, thông tin từng sản phẩm được trích xuất đầy đủ. Màn hình thể hiện rõ số lượng, đơn giá và địa chỉ nhận hàng. Nếu xảy ra lỗi kết nối máy chủ, thông báo lỗi xuất hiện ngay lập tức. Thiết kế này giúp người mua nắm bắt hành trình gói hàng minh bạch. Quy trình này củng cố lòng tin và giảm tải áp lực cho nhân viên chăm sóc khách hàng.

2.2. Vấn đề đồng bộ tồn kho và hủy đơn đặt hàng

Quy trình hủy đơn đặt hàng đòi hỏi tính toàn vẹn dữ liệu nghiêm ngặt. Khi khách hàng bấm lệnh hủy đơn, hệ thống phải xác thực điều kiện hợp lệ. Đơn hàng chỉ được phép hủy khi chưa chuyển sang trạng thái vận chuyển. Ngay khi lệnh hủy được kích hoạt, máy chủ thực hiện các cập nhật liên hoàn. Hệ thống tự động cộng lại số lượng sản phẩm vào kho dữ liệu. Số lượng phiếu giảm giá đã dùng cũng được hoàn trả về tài khoản. Trạng thái đơn hàng lập tức chuyển đổi thành trạng thái đã hủy. Toàn bộ chuỗi thao tác này diễn ra theo cơ chế giao dịch an toàn. Nếu xảy ra sự cố kỹ thuật, hệ thống tự động quay về trạng thái ban đầu để bảo vệ dữ liệu.

III. Giải pháp công nghệ xây dựng website bán quần áo hiện đại

Đề tài áp dụng kiến trúc phần mềm phân tầng hiện đại. Phía giao diện người dùng sử dụng thư viện ReactJS. Phía máy chủ vận hành trên nền tảng NodeJS mạnh mẽ. NodeJS sử dụng mô hình đơn luồng kết hợp với cơ chế non-blocking I/O. Nhờ đó, máy chủ xử lý hàng ngàn kết nối đồng thời với hiệu suất cao. Mức tiêu thụ bộ nhớ được tối ưu triệt để so với kiến trúc đa luồng truyền thống. Lập trình viên chia sẻ cùng mã nguồn JavaScript giữa máy khách và máy chủ. Thời gian xây dựng và bảo trì phần mềm nhờ vậy được rút ngắn đáng kể. Phía giao diện, ReactJS chia nhỏ màn hình thành các component độc lập. Cấu trúc component cho phép tái sử dụng mã nguồn linh hoạt. Dữ liệu giữa các phần được đồng bộ tự động và nhanh chóng. Cơ chế Virtual DOM của ReactJS giúp tăng tốc độ phản hồi trang web. Nhờ sự kết hợp này, toàn bộ hệ thống bán quần áo vận hành mượt mà ngay cả khi lượng người dùng tăng cao.

3.1. Ứng dụng NodeJS xây dựng dịch vụ máy chủ hiệu năng cao

NodeJS là nền tảng máy chủ hướng sự kiện bất đồng bộ. Nền tảng này sử dụng công cụ thực thi mã JavaScript tốc độ cao. Hệ thống thương mại điện tử tận dụng ưu thế non-blocking I/O để xử lý yêu cầu song song. Khi khách hàng đặt mua hoặc hủy đơn, máy chủ xử lý dữ liệu mà không làm gián đoạn các luồng khác. Kiến trúc này giải quyết triệt để vấn đề quá tải bộ nhớ trên máy chủ. Ngoài ra, hệ sinh thái NPM cung cấp hàng ngàn gói mở rộng tiêu chuẩn. Các thư viện bảo mật, giải mã và quản lý phiên làm việc tích hợp rất dễ dàng. NodeJS tạo nền tảng vững chắc cho hệ thống bán lẻ quần áo vận hành liên tục.

3.2. Thiết kế giao diện phản hồi nhanh với ReactJS

ReactJS đóng vai trò xây dựng lớp giao diện tương tác người dùng. Thư viện phân chia giao diện thành Function Component và Class Component rõ ràng. Mỗi thành phần như thanh tìm kiếm, thẻ sản phẩm hay giỏ hàng đều hoạt động độc lập. Khi dữ liệu sản phẩm thay đổi, ReactJS chỉ cập nhật thành phần tương ứng trên màn hình. Trang web không cần tải lại toàn bộ nội dung sau mỗi hành động của khách hàng. Trải nghiệm duyệt xem quần áo vì vậy trở nên liền mạch và chuyên nghiệp. Thiết kế đáp ứng tốt trên cả máy tính lẫn thiết bị di động. Khách hàng dễ dàng thao tác lọc kích cỡ và đặt hàng trong thời gian ngắn nhất.

IV. Đánh giá ứng dụng thực tiễn đề tài bán quần áo tại ĐH SPKT

Đề tài tốt nghiệp xây dựng website thương mại điện tử bán quần áo đã hoàn thành xuất sắc các mục tiêu đề ra. Hệ thống giải quyết trọn vẹn bài toán vận hành bán lẻ trong kỷ nguyên số. Sự phối hợp giữa ReactJS và NodeJS chứng minh hiệu quả kỹ thuật vượt trội. Ứng dụng đáp ứng các tiêu chuẩn bảo mật, tính linh hoạt và khả năng chịu tải tốt. Khách hàng nhận được trải nghiệm mua hàng nhanh chóng, tiện lợi và an toàn. Doanh nghiệp sở hữu công cụ quản trị đơn hàng và tồn kho chính xác. Kết quả nghiên cứu khẳng định chất lượng đào tạo gắn liền với thực tiễn tại Đại học Sư phạm Kỹ thuật TP.HCM. Sinh viên ngành công nghệ thông tin đã thể hiện năng lực làm chủ công nghệ mới. Trong tương lai, hệ thống có thể tích hợp thêm trí tuệ nhân tạo để gợi ý phối đồ cá nhân hóa. Nền tảng cũng sẵn sàng mở rộng các cổng thanh toán quốc tế và dịch vụ vận chuyển thông minh.

4.1. Khả năng ứng dụng thực tế cho cửa hàng thời trang

Mô hình website có tính ứng dụng cao cho các doanh nghiệp thời trang vừa và nhỏ. Chi phí xây dựng và bảo trì hệ thống ở mức hợp lý. Giao diện trực quan giúp chủ cửa hàng tiếp quản hệ thống dễ dàng mà không cần kiến thức kỹ thuật sâu. Quy trình xử lý đơn hàng rõ ràng giảm thiểu nguy cơ thất thoát hàng tồn kho. Khách hàng có thể trải nghiệm mua sắm đồng bộ và ổn định trên mọi nền tảng. Hệ thống hỗ trợ đắc lực việc phân tích doanh số và xu hướng thời trang. Đây là nền tảng số hóa thiết thực, giúp các thương hiệu quần áo nâng cao năng lực cạnh tranh trên thị trường thương mại điện tử hiện đại.

4.2. Định hướng nâng cấp và mở rộng tính năng tương lai

Trong các giai đoạn phát triển tiếp theo, hệ thống có thể bổ sung thêm nhiều phân hệ thông minh. Giải pháp học máy hỗ trợ dự đoán xu hướng thời trang của người dùng. Chức năng phòng thử đồ ảo sử dụng công nghệ thực tế ảo tăng cường tạo sức hút lớn. Ngoài ra, kiến trúc dịch vụ microservices có thể thay thế để tăng khả năng mở rộng quy mô. Hệ thống sẽ dễ dàng chịu tải khi lượng người dùng cùng lúc lên tới hàng trăm nghìn lượt. Việc kết nối trực tiếp với các đơn vị vận chuyển hỗ trợ tính cước phí tự động. Hệ thống báo cáo thống kê chuyên sâu giúp tối ưu chiến lược quảng bá thương hiệu quần áo hiệu quả.

Nội dung chính

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

Trong bối cảnh chuyển đổi số và sự phát triển mạnh mẽ của thương mại điện tử, lĩnh vực kinh doanh sản phẩm thời trang, đặc biệt là thời trang trẻ em, chứng kiến nhu cầu gia tăng nhanh chóng về tính tiện lợi, an toàn chất liệu và cập nhật xu hướng. Theo tác giả đề tài, các bậc phụ huynh hiện đại đối mặt với áp lực thời gian lớn, đòi hỏi các nền tảng mua sắm trực tuyến phải cung cấp trải nghiệm tìm kiếm nhanh chóng, phân loại chi tiết và quy trình thanh toán minh bạch. Tuy nhiên, nhiều nền tảng bán lẻ trực tuyến hiện hành của các doanh nghiệp vừa và nhỏ (SMEs) cũng như các dự án khởi nghiệp tại Việt Nam vẫn còn tồn tại các rào cản như: giao diện chưa tối ưu cho việc chọn kích cỡ/biến thể, thiếu tính năng tư vấn phối đồ an toàn cho trẻ nhỏ, tốc độ tải trang chậm hoặc hạn chế trong các phương thức thanh toán và quản lý đơn hàng.

Xuất phát từ thực trạng trên, đề tài "Xây dựng website thương mại điện tử về bán quần áo" do sinh viên Lã Quý Quân và Cao Hoàng Anh thực hiện (dưới sự hướng dẫn của ThS. Nguyễn Minh Đạo tại Khoa Công nghệ Thông tin, Trường Đại học Sư phạm Kỹ thuật TP.HCM) đặt ra mục tiêu xây dựng một nền tảng bán lẻ quần áo chuyên biệt. Các nhiệm vụ nghiên cứu cụ thể bao gồm:

1. Khảo sát thực trạng quy trình nghiệp vụ và giao diện của các website thương mại điện tử thời trang thực tế tại Việt Nam.
2. Tìm hiểu, đánh giá và ứng dụng bộ công nghệ MERN Stack (MongoDB, ExpressJS, ReactJS, NodeJS), thư viện quản lý trạng thái Redux và kiến trúc RESTful API.
3. Phân tích chi tiết các yêu cầu chức năng và phi chức năng đối với ba nhóm tác nhân: Khách vãng lai (Guest), Người dùng đã đăng ký (User), và Quản trị viên (Admin).
4. Thiết kế cơ sở dữ liệu phi quan hệ, mô hình hóa các luồng nghiệp vụ thông qua hệ thống sơ đồ Use Case, Sequence Diagram và Activity Diagram.
5. Xây dựng và kiểm thử các tính năng chuyên biệt: quản lý tối đa 2 biến thể cho mỗi sản phẩm (màu sắc, kích cỡ), tìm kiếm sản phẩm theo chiều sâu, gợi ý trang phục phối cùng theo giới tính của trẻ, quản lý phiếu giảm giá có thời hạn sử dụng và tích hợp cổng thanh toán trực tuyến PayPal song song với hình thức COD.

Đối tượng nghiên cứu của khóa luận là các hoạt động và quy trình kỹ thuật trong việc thiết kế, xây dựng website thương mại điện tử chuyên ngành quần áo, tập trung vào kiến trúc tương tác, tối ưu hóa giao diện và quy trình thanh toán. Khách thể nghiên cứu là các website bán lẻ thời trang đang vận hành tại Việt Nam. Phạm vi nghiên cứu được xác định rõ:

• Phạm vi không gian: Khảo sát và ứng dụng giải pháp cho các doanh nghiệp vừa và nhỏ, doanh nghiệp khởi nghiệp trong lĩnh vực thời trang tại thị trường Việt Nam.
• Phạm vi thời gian: Đề tài được phát triển từ tiểu luận chuyên ngành, thực hiện trong 4 tháng từ ngày 19/08/2024 đến ngày 10/12/2024.
• Phạm vi nội dung: Tập trung vào việc xây dựng hệ thống phần mềm hoàn chỉnh gồm trang bán hàng cho khách hàng và trang quản trị backend, tối ưu hóa các tính năng chọn biến thể, giỏ hàng, áp mã giảm giá và đối soát đơn hàng.

---

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

Khóa luận thiết lập nền tảng lý thuyết dựa trên khái niệm Technical Stack (ngăn xếp công nghệ) trong phát triển phần mềm hiện đại, so sánh các mô hình công nghệ phổ biến:

Technical Stack	Các công nghệ thành phần cấu thành
MERN Stack	MongoDB, ExpressJS, ReactJS, NodeJS
MEAN Stack	MongoDB, ExpressJS, Angular, NodeJS
LAMP Stack	Linux, Apache, MySQL, PHP
WISA Stack	Windows, IIS, SQL Server, ASP.NET

Nhóm tác giả lựa chọn MERN Stack làm kiến trúc chủ đạo nhờ mô hình ba lớp (Three-tier Architecture) đồng nhất ngôn ngữ JavaScript và định dạng trao đổi dữ liệu JSON giữa Client và Server:

• MongoDB: Hệ quản trị cơ sở dữ liệu NoSQL hướng tài liệu (Document-oriented). Dữ liệu được lưu trữ dưới dạng BSON trong các Collection thay vì cấu trúc bảng cố định như cơ sở dữ liệu quan hệ, cho phép linh hoạt mở rộng thuộc tính sản phẩm mà không cần định nghĩa lại toàn bộ cấu trúc bảng. Đồ án sử dụng công cụ MongoDB Compass làm giao diện đồ họa (GUI) để quản lý dữ liệu, chỉ mục (Index) và kiểm tra hiệu năng truy vấn.
• ExpressJS: Framework chạy trên nền tảng NodeJS, cung cấp hệ thống định tuyến (Routing) nâng cao, các lớp phần mềm trung gian (Middleware) phục vụ xác thực người dùng và hỗ trợ tổ chức mã nguồn theo mô hình MVC (Model-View-Controller).
• ReactJS: Thư viện JavaScript xây dựng giao diện người dùng theo cơ chế Single Page Application (SPA). ReactJS vận hành dựa trên Virtual DOM (DOM ảo), cú pháp JSX, hệ thống Hooks và cấu trúc phân rã thành các Function Component/Class Component độc lập nhằm tái sử dụng mã nguồn và giảm tải việc kết xuất lại giao diện trực tiếp.
• NodeJS: Môi trường thực thi JavaScript đa nền tảng dựa trên V8 JavaScript Engine của Google Chrome, vận hành theo mô hình đơn luồng (Single-Threaded) kết hợp cơ chế vào/ra không chặn (Non-blocking I/O) và vòng lặp sự kiện (Event Loop), cho phép xử lý đồng thời lượng lớn kết nối với độ trễ thấp.
• Redux: Thư viện quản lý trạng thái tập trung (State Management) dựa trên kiến trúc Flux của Facebook, kiểm soát luồng dữ liệu một chiều nghiêm ngặt thông qua ba thành phần: Actions (đối tượng chứa type và payload), Reducers (hàm thuần túy tính toán state mới) và Store (nơi lưu trữ trạng thái toàn cục của ứng dụng).

Phương pháp nghiên cứu thực tế được triển khai bao gồm:

1. Phương pháp nghiên cứu tài liệu: Thu thập, phân tích tài liệu kỹ thuật về JavaScript Full-stack, cơ chế truyền thông ngầm AJAX, giao thức RESTful API và tài liệu nghiệp vụ thương mại điện tử.
2. Phương pháp chuyên gia: Tiếp nhận tư vấn kỹ thuật, phản biện định kỳ từ giảng viên hướng dẫn (ThS. Nguyễn Minh Đạo) và các giảng viên Khoa Đào tạo chất lượng cao - Trường Đại học Sư phạm Kỹ thuật TP.HCM.
3. Phương pháp làm việc nhóm và phân rã kế hoạch: Tiến trình thực hiện chia làm 6 giai đoạn rõ ràng:
   • 19/08 - 10/09/2024: Khảo sát thực tế, thu thập yêu cầu, thiết kế kiến trúc hệ thống ban đầu.
   • 10/09 - 10/10/2024: Xây dựng cơ sở dữ liệu và thiết kế giao diện cho trang quản trị (Admin) và trang bán hàng (Shop).
   • 11/10 - 28/10/2024: Lập trình xây dựng hệ thống API đợt 1 cho các module cốt lõi.
   • 29/10 - 15/11/2024: Tiếp tục mở rộng các API xử lý nghiệp vụ đơn hàng, giỏ hàng và voucher.
   • 16/11 - 30/11/2024: Tối ưu hóa hiệu suất website, sửa lỗi phát sinh trong môi trường thử nghiệm.
   • 01/12 - 08/12/2024: Chạy thử toàn bộ luồng nghiệp vụ với tập dữ liệu giả định, hiệu chỉnh lỗi hệ thống và hoàn thiện báo cáo khóa luận.

Nguồn dữ liệu của đề tài gồm dữ liệu phân tích hiện trạng từ 3 website bán lẻ quần áo tại Việt Nam và cơ sở dữ liệu mẫu do nhóm tự tạo phục vụ mục đích kiểm thử hệ thống.

---

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

Khảo sát hiện trạng website thực tế

Nhóm tác giả đã tiến hành khảo sát và đánh giá ưu, nhược điểm của ba nền tảng thương mại điện tử thời trang đang hoạt động trên thị trường Việt Nam làm cơ sở định hình chức năng:

Website khảo sát	Ưu điểm ghi nhận	Nhược điểm tồn tại
John Henry	Giao diện đơn giản, dễ thao tác; tính năng tìm kiếm theo sở thích đa dạng; hiệu năng vận hành ổn định, ít độ trễ.	Thiếu kênh liên hệ và hỗ trợ trực tuyến trực tiếp với cửa hàng.
Babymall & Family	Giao diện màu vàng bắt mắt; đa dạng chức năng hỗ trợ; danh mục sản phẩm phân vùng rõ ràng, dễ định hướng.	Phương thức đăng ký tài khoản còn hạn chế, chưa hỗ trợ đăng ký qua số điện thoại hoặc tài khoản Google.
Yame	Hình ảnh sản phẩm rõ ràng, trực quan; bộ lọc và công cụ tìm kiếm đa dạng; tích hợp nhiều phương thức thanh toán.	Tốc độ trang web còn độ trễ (delay); bảng màu nền chưa làm nổi bật sản phẩm.

Phân tích yêu cầu và phân quyền tác nhân

Hệ thống được thiết kế hướng tới việc giải quyết các nhược điểm khảo sát trên, phân định quyền hạn thông qua ba tác nhân (Actors):

• Guest (Khách vãng lai): Thực hiện xem danh mục sản phẩm, xem chi tiết sản phẩm kèm biến thể và gợi ý trang phục phối cùng, tìm kiếm sản phẩm theo từ khóa, lọc theo mức giá và mức giảm giá, thực hiện đăng ký tài khoản mới.
• User (Người dùng đã đăng nhập): Thực hiện đầy đủ quyền hạn của Guest; bổ sung các chức năng đăng nhập, đăng xuất, quên mật khẩu (gửi link đặt lại qua email); quản lý giỏ hàng (thêm, cập nhật số lượng, xóa); áp dụng phiếu giảm giá (voucher); tiến hành đặt hàng; chọn phương thức thanh toán (COD hoặc trực tuyến qua PayPal); quản lý lịch sử đơn hàng; hủy đơn hàng khi chưa xử lý (hệ thống tự động hoàn lại số lượng tồn kho và phiếu giảm giá); gửi đánh giá sản phẩm sau khi đơn hàng hoàn tất.
• Admin (Quản trị viên): Đăng nhập vào trang quản trị; quản lý danh mục sản phẩm (thêm, sửa, xóa); quản lý thông tin sản phẩm và cấu hình tối đa 2 biến thể kèm giá và số lượng kho tương ứng; quản lý tài khoản người dùng (cập nhật trạng thái kích hoạt/khóa tài khoản, phân quyền, xóa tài khoản); quản lý và kiểm duyệt chi tiết đơn đặt hàng; quản lý phiếu giảm giá (thiết lập mã, giá trị, hạn mức, ngày bắt đầu và ngày kết thúc).

Thiết kế kiến trúc và mô hình tương tác

Hệ thống triển khai theo kiến trúc RESTful API. Quá trình trao đổi dữ liệu giữa giao diện ReactJS và máy chủ ExpressJS sử dụng định dạng JSON thông qua các phương thức chuẩn HTTP (GET, POST, PUT, DELETE).

Nhóm tác giả xây dựng 16 sơ đồ tuần tự (Sequence Diagram) và 5 sơ đồ hoạt động (Activity Diagram) để chi tiết hóa các kịch bản nghiệp vụ phức tạp:

• Xác thực và phân quyền: Quy trình đăng nhập thông thường bằng tài khoản nội bộ và tích hợp đăng nhập qua tài khoản Google OAuth. Kịch bản quên mật khẩu xác thực thông qua email và mã token khôi phục.
• Xử lý giỏ hàng và đặt hàng: Quá trình kiểm tra số lượng tồn kho theo từng biến thể sản phẩm trước khi thêm vào giỏ. Khi áp dụng voucher, hệ thống kiểm tra đồng thời điều kiện giá trị đơn hàng tối thiểu và hiệu lực thời gian của mã.
• Thanh toán PayPal: Người dùng chuyển hướng sang cổng thanh toán quốc tế của PayPal; sau khi PayPal xác thực tài khoản và trừ tiền thành công, hệ thống gửi phản hồi bất đồng bộ (Webhook/Callback) về máy chủ để cập nhật trạng thái đơn hàng sang "Đã thanh toán" và điều hướng người dùng quay lại website.
• Xử lý hủy đơn: Luồng hoạt động cho phép người dùng hủy các đơn hàng chưa chuyển giao vận chuyển, tự động thực hiện phép toán hoàn trả số lượng biến thể sản phẩm về kho dữ liệu và phục hồi quyền sử dụng phiếu giảm giá cho tài khoản.

---

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

Phần Mở đầu

Trình bày tính cấp thiết của đề tài trong bối cảnh mua sắm trực tuyến cho trẻ em. Xác lập 9 mục tiêu phát triển hệ thống bao gồm: quản lý 2 biến thể sản phẩm, nâng cấp cổng thanh toán, tối ưu tìm kiếm theo chiều sâu, xây dựng cơ chế gợi ý sản phẩm theo giới tính, và bổ sung hỗ trợ khách hàng. Xác định rõ đối tượng, phạm vi không gian, thời gian và phương pháp tiếp cận.

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

Hệ thống hóa toàn bộ kiến thức lý thuyết về Technical Stack và bộ công nghệ MERN. Làm rõ nguyên lý hoạt động của kiến trúc ba lớp:

• Phân tích chi tiết MongoDB về mô hình Document BSON và vai trò quản lý của công cụ trực quan MongoDB Compass.
• Phân tích ExpressJS ở khả năng xây dựng máy chủ nhanh, thiết lập middleware, xử lý lỗi và tổ chức theo mô hình MVC.
• Trình bày cơ chế Virtual DOM, Hooks và Component của ReactJS giúp giải quyết bài toán tải lại trang của các trang web truyền thống.
• Làm rõ mô hình đơn luồng bất đồng bộ của NodeJS dựa trên V8 Engine giúp xử lý hàng ngàn kết nối đồng thời mà không bị nghẽn (Non-blocking I/O).
• Giải thích chi tiết cơ chế hoạt động của Redux với bộ ba Actions - Reducers - Store trong việc kiểm soát trạng thái ứng dụng.

Chương 2: Khảo sát và phân tích yêu cầu

Tổng hợp kết quả khảo sát thực tế tại 3 website thời trang (John Henry, Babymall & Family, Yame). Chuyển hóa các phát hiện thực tế thành danh mục yêu cầu kỹ thuật:

• Lập bảng đặc tả yêu cầu chức năng chi tiết cho 3 tác nhân: bảng chức năng của Guest (5 chức năng), User (15 chức năng) và Admin (14 chức năng).
• Xây dựng 2 lược đồ Use Case tổng quát cho Module End-User và Module Admin.
• Đặc tả chi tiết 16 trường hợp sử dụng (Use Case Specs) gồm Use Case ID, Tên, Mô tả ngắn, Tác nhân, Điều kiện kích hoạt, Điều kiện tiên quyết, Điều kiện sau khi thực hiện, Luồng sự kiện chính (Main Flow), Luồng sự kiện thay thế (Alternative Flow) và Luồng sự kiện ngoại lệ (Exception Flow).

Chương 3: Thiết kế hệ thống

Chuyển hóa toàn bộ yêu cầu thành bản thiết kế kỹ thuật hoàn chỉnh:

• Đặc tả cấu trúc cơ sở dữ liệu (Database Description) cho các thực thể: Người dùng, Danh mục, Sản phẩm (kèm biến thể), Giỏ hàng, Đơn đặt hàng và Phiếu giảm giá.
• Mô hình hóa tương tác thông qua 16 biểu đồ Sequence và 5 biểu đồ Activity cho các nghiệp vụ xác thực, quản lý giỏ hàng, áp dụng voucher, thanh toán trực tuyến và hủy đơn hàng.
• Thiết kế giao diện chi tiết: Phân hệ Admin gồm các màn hình đăng nhập, thanh điều hướng Navbar, quản lý người dùng, thêm người dùng, quản lý danh mục, quản lý đơn hàng, chi tiết đơn hàng, quản lý sản phẩm, thêm sản phẩm biến thể, và quản lý voucher. Phân hệ User gồm các màn hình đăng ký, đăng nhập, trang chủ đa phân vùng, trang hiển thị danh mục, chi tiết sản phẩm kèm bộ chọn biến thể/phối đồ, giỏ hàng, và đặt hàng.

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

Báo cáo quá trình hiện thực hóa hệ thống phần mềm dựa trên các công cụ lập trình và thư viện mã nguồn mở. Trình bày bảng danh mục công cụ, công nghệ sử dụng và bảng kết quả kiểm thử chức năng (Functional Testing) cho từng kịch bản nghiệp vụ: luồng đăng ký/đăng nhập, luồng giỏ hàng, luồng đặt hàng và thanh toán PayPal, cùng các ngoại lệ mạng và lỗi nhập liệu.

Phần Kết luận

Tổng kết mức độ hoàn thành so với mục tiêu đề ra ban đầu, phân tích các ưu điểm đạt được về mặt giao diện và tính năng, chỉ ra các hạn chế kỹ thuật hiện tại và vạch rõ lộ trình phát triển tiếp theo của hệ thống.

---

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

Khóa luận đã hoàn thành toàn bộ khối lượng công việc được giao theo đúng kế hoạch đề cương, đạt được các kết quả cụ thể:

1. Xây dựng hoàn chỉnh nền tảng web thương mại điện tử bán quần áo: Hệ thống vận hành theo mô hình Single Page Application (SPA), tách biệt hoàn toàn giữa giao diện người dùng (ReactJS) và dịch vụ xử lý nghiệp vụ máy chủ (NodeJS, ExpressJS).
2. Hiện thực hóa đầy đủ 3 nhóm tác nhân và 34 chức năng nghiệp vụ: Bao gồm 5 chức năng cho Khách vãng lai, 15 chức năng cho Khách hàng thành viên và 14 chức năng quản trị cho Quản trị viên, toàn bộ đều vượt qua quá trình kiểm thử chức năng.
3. Quản lý biến thể sản phẩm linh hoạt: Cho phép thiết lập và quản lý tối đa 2 biến thể riêng biệt trên mỗi mã sản phẩm (như phân loại theo màu sắc và kích cỡ), gắn liền với thông tin giá bán và số lượng tồn kho độc lập cho từng biến thể.
4. Tích hợp đa dạng phương thức thanh toán: Vận hành thành công cả hai phương thức thanh toán là COD (thanh toán khi nhận hàng) và thanh toán trực tuyến qua cổng PayPal với cơ chế xử lý callback xác nhận thanh toán tự động.
5. Cơ chế quản lý khuyến mãi và vận hành đơn hàng chặt chẽ: Xây dựng hệ thống quản lý phiếu giảm giá có thiết lập ngày bắt đầu và kết thúc; tích hợp quy trình hủy đơn hàng có khả năng tự động hoàn lại số lượng tồn kho và hoàn trả mã giảm giá đã dùng.

Về mặt đóng góp và giải pháp kỹ thuật so với các hệ thống khảo sát thực tế:

• Khắc phục nhược điểm hạn chế hình thức đăng ký của Babymall & Family bằng cách tích hợp chức năng đăng nhập/đăng ký thông qua Google OAuth bên cạnh tài khoản email truyền thống.
• Bổ sung kênh tương tác hỗ trợ khách hàng mà website John Henry còn thiếu thông qua việc chuẩn bị hạ tầng chat box trực tuyến trên hệ thống.
• Khắc phục tình trạng trễ (delay) trong quá trình duyệt sản phẩm của website Yame nhờ việc ứng dụng Virtual DOM của ReactJS kết hợp quản lý trạng thái tập trung Redux, giúp dữ liệu giỏ hàng và danh mục được cập nhật tức thì phía client mà không cần tải lại toàn bộ trang web.

---

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

Dựa trên nội dung khóa luận và phạm vi thực hiện trong khoảng thời gian 4 tháng, hệ thống còn tồn tại một số hạn chế:

• Dữ liệu kiểm thử: Hệ thống mới chỉ được chạy thử nghiệm trên môi trường cục bộ (Localhost) với tập dữ liệu giả định do nhóm tác giả khởi tạo, chưa được đưa vào vận hành thực tế với lưu lượng truy cập lớn để kiểm chứng sức chịu tải của hệ thống máy chủ.
• Giới hạn biến thể sản phẩm: Cơ sở dữ liệu và giao diện quản trị mới hỗ trợ cấu hình tối đa 2 thuộc tính biến thể cho mỗi sản phẩm, chưa cho phép mở rộng không giới hạn các thuộc tính phức tạp hơn (như chất liệu, kiểu dáng, hoa văn).
• Hạn chế cổng thanh toán trực tuyến: Hệ thống mới chỉ tích hợp cổng thanh toán quốc tế PayPal, chưa tích hợp các cổng thanh toán điện tử nội địa thông dụng tại thị trường Việt Nam (như MoMo, ZaloPay, VNPay).

Hướng phát triển tiếp theo được nhóm tác giả xác định bao gồm:

1. Mở rộng khả năng tạo biến thể sản phẩm không giới hạn thuộc tính, nâng cấp thuật toán tìm kiếm theo chiều sâu để tối ưu hóa bộ lọc thuộc tính sản phẩm.
2. Hoàn thiện và kích hoạt module chat box trực tuyến ứng dụng công nghệ truyền thông thời gian thực WebSocket (hoặc Socket.io) nhằm kết nối trực tiếp giữa nhân viên tư vấn và khách hàng.
3. Tích hợp thêm các giải pháp thanh toán điện tử nội địa thông qua API của các ví điện tử và cổng thanh toán tại Việt Nam.
4. Xây dựng thuật toán gợi ý sản phẩm nâng cao, phân tích sâu hơn dữ liệu giới tính, độ tuổi của trẻ và hành vi mua sắm trong quá khứ để cá nhân hóa danh mục đề xuất phối đồ.

---

Giá trị tham khảo

Báo cáo khóa luận cung cấp tài liệu tham khảo thực tiễn có giá trị đối với:

• Sinh viên ngành Công nghệ thông tin và Kỹ thuật phần mềm: Là tài liệu tham khảo tiêu biểu về cấu trúc của một đồ án tốt nghiệp kỹ sư CNTT định hướng xây dựng ứng dụng web, từ khâu khảo sát nghiệp vụ, phân tích yêu cầu, thiết kế kiến trúc đến kiểm thử hệ thống.
• Lập trình viên full-stack định hướng MERN: Mô hình tổ chức mã nguồn, cách thức phân tách rõ ràng giữa Client (ReactJS, Redux) và Server (NodeJS, ExpressJS), cùng phương thức xây dựng RESTful API kết nối cơ sở dữ liệu MongoDB là những mẫu thiết kế có tính ứng dụng cao.
• Doanh nghiệp vừa và nhỏ, startup thời trang: Cung cấp tài liệu phân tích nghiệp vụ và quy trình xử lý đơn hàng, quản lý biến thể hàng hóa, quản lý mã voucher và tích hợp cổng thanh toán trực tuyến, có thể làm cơ sở triển khai giải pháp bán hàng trực tuyến với chi phí vận hành hợp lý.

Các phần nội dung đáng tham khảo nhất trong văn bản gồm: hệ thống 16 bảng đặc tả chi tiết Use Case (đầy đủ các kịch bản ngoại lệ Exception Flow về lỗi server, sai lệch dữ liệu) và hệ thống sơ đồ tuần tự (Sequence Diagram) mô tả chi tiết quy trình xử lý thanh toán PayPal và hủy đơn hàng hoàn tồn kho.

---

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

1. Đồ án sử dụng ngăn xếp công nghệ (Technical Stack) nào để phát triển hệ thống?
Đồ án sử dụng bộ công nghệ MERN Stack, bao gồm: MongoDB (cơ sở dữ liệu NoSQL hướng tài liệu), ExpressJS (framework backend xây dựng trên NodeJS), ReactJS (thư viện frontend xây dựng Single Page Application) và NodeJS (môi trường thực thi JavaScript phía máy chủ). Ngoài ra, hệ thống tích hợp thêm thư viện Redux để quản lý trạng thái tập trung và công cụ trực quan MongoDB Compass để quản lý cơ sở dữ liệu.

2. Quy trình xử lý của hệ thống diễn ra như thế nào khi người dùng thực hiện hủy một đơn hàng đã đặt?
Khi người dùng chọn chức năng hủy đơn hàng tại trang quản lý đơn cá nhân, hệ thống sẽ tiến hành kiểm tra thông tin và điều kiện của đơn. Nếu hợp lệ, hệ thống tự động cộng lại số lượng sản phẩm tương ứng vào kho dữ liệu biến thể, phục hồi lại số lượng và hiệu lực của phiếu giảm giá (nếu đơn hàng có áp dụng voucher), sau đó chuyển đổi trạng thái của đơn hàng sang "Đã hủy" và xuất thông báo thành công cho người dùng.

3. Hệ thống hỗ trợ quản lý tối đa bao nhiêu biến thể cho mỗi sản phẩm quần áo?
Theo đặc tả mục tiêu và thiết kế của đề tài, hệ thống cho phép tạo và quản lý tối đa 2 biến thể riêng biệt cho mỗi mã sản phẩm (thông thường là màu sắc và kích cỡ), với giá bán và số lượng tồn kho được thiết lập riêng cho từng biến thể đó.

4. Khách hàng có thể thực hiện thanh toán đơn hàng qua những phương thức nào trên website?
Website hỗ trợ hai phương thức thanh toán chính: thanh toán khi nhận hàng (COD) và thanh toán trực tuyến thông qua cổng thanh toán quốc tế PayPal. Khi chọn PayPal, người dùng sẽ được chuyển hướng an toàn tới giao diện của PayPal để xác thực thẻ và hoàn tất giao dịch.

5. Nhóm tác giả đã khảo sát những website thực tế nào và rút ra điểm yếu gì từ các nền tảng đó?
Nhóm đã khảo sát 3 website: John Henry (nhược điểm: không có tính năng liên hệ trực tiếp với cửa hàng), Babymall & Family (nhược điểm: phương thức đăng ký tài khoản còn hạn chế, chưa hỗ trợ đăng ký qua Google/số điện thoại) và Yame (nhược điểm: trang web còn độ trễ trong thao tác và màu nền chưa làm nổi bật sản phẩm).

---

Kết luận

Khóa luận tốt nghiệp "Xây dựng website thương mại điện tử về bán quần áo" của sinh viên Lã Quý Quân và Cao Hoàng Anh đã hoàn thành mục tiêu xây dựng một nền tảng thương mại điện tử hoàn chỉnh dựa trên nền tảng MERN Stack và kiến trúc RESTful API. Hệ thống giải quyết tốt các bài toán nghiệp vụ bán lẻ thời trang thông qua việc phân quyền ba tác nhân, quản lý 2 biến thể sản phẩm, tích hợp thanh toán PayPal và xử lý tự động quy trình hoàn trả voucher khi hủy đơn hàng. Công trình là tài liệu tham khảo có giá trị học thuật và ứng dụng thực tiễn cao cho sinh viên chuyên ngành phần mềm cũng như các đơn vị phát triển giải pháp thương mại điện tử quy mô vừa và nhỏ.

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

Chương 1: CƠ SỞ LÝ THUYẾT 1. Giới thiệu về MongoDB 1. Định nghĩa về MongoDB Hình 1. Định nghĩa MongoDB MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở [2], thuộc loại NoSQL và được hàng triệu người dùng lựa chọn sử dụng trên toàn thế giới MongoDB là một database hướng tài liệu (document) [2], vì dữ liệu được lưu trữ trong document có kiểu là JSON thay vì lưu trữ dưới dạng bảng như CSDL quan hệ nên việc truy vấn được thực hiện rất nhanh chóng Với CSDL quan hệ chúng ta có khái niệm bảng[2], trái ngược với cơ sở dữ liệu quan hệ như MySQL hay SQL Server sử dụng các bảng để lưu trữ dữ liệu, trong MongoDB chúng ta sử dụng khái niệm "collection" thay vì "bảng".

Các collection trong MongoDB được thiết kế linh hoạt [2], không yêu cầu tuân thủ một cấu trúc cụ thể cho việc lưu trữ dữ liệu. Việc lưu trữ các thông tin liên quan cùng nhau trong MongoDB cho phép thực hiện truy vấn nhanh chóng thông qua ngôn ngữ truy vấn của nó. Định nghĩa MongoDB Compass MongoDB Compass là một giao diện đồ họa (GUI) dành cho MongoDB [3], giúp người dùng tối ưu hóa luồng dữ liệu lưu trữ mà không cần phải hiểu rõ về cú pháp truy vấn MongoDB. Bằng cách tìm kiếm dữ liệu trong môi trường trực quan, Compass GUI cung cấp các công cụ để cải thiện hiệu suất, quản lý chỉ mục, và triển khai xác thực tài liệu.

KHÓA LUẬN TỐT NGHIỆP Trang 6 PHẦN NỘI DUNG Chương 1: CƠ SỞ LÝ THUYẾT 1. Vai trò Trong MongoDB, dữ liệu được tổ chức và lưu trữ trong các collections [4], tương đương với các bảng trong cơ sở dữ liệu quan hệ. Mỗi collection có thể chứa nhiều tài liệu (documents) với cấu trúc dữ liệu không cố định. Trong MongoDB, mỗi collection chứa các tài liệu (documents) có dữ liệu được lưu trữ.

Mỗi tài liệu có thể bao gồm nhiều trường (fields), mỗi trường đều có tên và giá trị riêng. Các tài liệu (documents) trong MongoDB được tạo thành từ các trường (fields), mỗi trường là một cặp key-value trong tài liệu, tương tự như các cột trong cơ sở dữ liệu quan hệ. Giá trị của các trường có thể thuộc loại dữ liệu BSON như double, string, boolean,. MongoDB cung cấp hỗ trợ cho việc tạo index cho các trường dữ liệu trong collection, nhằm tăng hiệu suất truy vấn.

Nó cũng hỗ trợ sao chép dữ liệu giữa các nút (node) trong một cluster, nâng cao tính bảo mật và độ tin cậy của hệ thống 1. Giới thiệu về ExpressJS 1. Định nghĩa ExpressJS Hình 1. Định nghĩa ExpressJS ExpressJS là một framework được phát triển trên nền tảng của Nodejs [5].

Nó cung cấp công cụ tuyệt vời để thiết kế web hoặc mobile. ExpressJS hỗ trợ các method HTTP và middleware tạo ra các API vô cùng mạnh mẽ và dễ dàng sử dụng. Vì ExpressJS là một framework phát triển ứng dụng web trên NodeJS [5], các lập trình viên có thể sử dụng mã đã có sẵn để xây dựng các ứng dụng web đơn trang (SPA), đa trang hoặc kết hợp cả hai. Ngoài ra, ExpressJS còn cung cấp một kiến trúc MVC (Model-View-Controller) hữu ích để tổ chức các ứng dụng web phía máy chủ.

KHÓA LUẬN TỐT NGHIỆP Trang 7 PHẦN NỘI DUNG Chương 1: CƠ SỞ LÝ THUYẾT 1. Một số tính năng của ExpressJS - ExpressJS có thể giúp phát triển máy chủ nhanh [5] hơn bằng việc cung cấp các tính năng phổ biến của Nodejs dưới dạng hàm có thể tái sử dụng. Ngoài ra, ExpressJS cũng đóng vai trò là phần mềm trung gian, giúp tổ chức các chức năng khác nhau của ứng dụng. - ExpressJS cũng cung cấp một cơ chế định tuyến nâng cao [5] có thể giúp duy trì vững trạng thái của trang web.

Nó cũng cung cấp các công cụ tạo khuôn mẫu [5] cho phép các nhà phát triển tạo được nội dung động trên các trang web này bằng việc bắt đầu xây dựng các mẫu HTML ở phía máy chủ. - Gỡ lỗi là yếu tố quan trọng để phát triển các ứng dụng web và ExpressJS [5] cung cấp cơ chế giúp xác định chính xác phần ứng dụng web có lỗi, giúp cho quá trình gỡ lỗi trở nên dễ dàng hơn. Vai trò của ExpressJS - Rất dễ học bởi vì các lập trình viên front-end đã biết về Javascript nên không cần phải học một ngôn ngữ mới - Giúp cho việc phát triển back-end dễ dàng hơn khi sử dụng ExpressJS - ExpressJS rất đơn giản để tuỳ chỉnh và sử dụng theo yêu cầu - Hỗ trợ phát triển theo mô hình MVC, đây là mô hình phổ biến cho việc lập trình web hiện nay - Thiết lập các lớp trung gian để trả về các yêu cầu HTTP - Định nghĩa bộ định tuyến cho phép sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL - Cho phép trả về các trang HTML dựa trên các tham số 1. Giới thiệu về ReactJS 1.

Định nghĩa về ReactJS Hình 1. Định nghĩa React JS KHÓA LUẬN TỐT NGHIỆP Trang 8 PHẦN NỘI DUNG Chương 1: CƠ SỞ LÝ THUYẾT Facebook có xây dựng và phát triển một thư viện có tên là ReactJS chứa nhiều JavaScript mã nguồn mở [6]. Thư viện này được sử dụng để phát triển các ứng dụng web hấp dẫn, với hiệu suất cao, tốc độ tải nhanh và mã nguồn tối giản. Mỗi trang web sử dụng ReactJS cần có tốc độ và khả năng mở rộng cao, đồng thời thao tác phải đơn giản và trơn tru.

Vai trò của ReactJS ReactJS tạo ra một DOM ảo riêng để các Component tồn tại và hoạt động trên đó, giúp cải thiện hiệu suất làm việc. Việc viết mã trở nên đơn giản hơn nhờ sử dụng JSX, cho phép kết hợp code HTML và JavaScript một cách dễ dàng. ReactJS hỗ trợ nhiều công cụ phát triển thông qua các tiện ích mở rộng của Chrome được thiết kế đặc biệt cho ReactJS. Định nghĩa về Virtual DOM Virtual DOM là một thành phần quan trọng được sử dụng bởi hầu hết các framework như ReactJS.

Nó cho phép người dùng thực hiện các thay đổi trên giao diện mà không cần can thiệp trực tiếp vào DOM thực. Virtual DOM hoạt động như một mô hình (model) đồng thời cũng là một giao diện, do đó, các thay đổi ảnh hưởng đến một hoặc một số yếu tố khác trong ứng dụng. Định nghĩa Hooks Hooks là một bổ sung mới trong React 16. Hooks là những hàm cho phép kết nối React state và lifecycle vào các components sử dụng hàm 1.

Định nghĩa Component Component là một thư viện JavaScript được dùng để thiết lập các giao diện người dùng. Component sẽ giúp phân tách giao diện người dùng thành các thành phần nhỏ hơn để giúp việc quản lý và tái sử dụng trở nên đơn giản. Có 2 loại component trong ReactJS: - Function Component - Class Component KHÓA LUẬN TỐT NGHIỆP Trang 9 PHẦN NỘI DUNG Chương 1: CƠ SỞ LÝ THUYẾT 1. Giới thiệu về NodeJS 1.

Định nghĩa về NodeJS Hình 1. Định nghĩa NodeJS Node.js được phát triển từ năm 2009, được tài trợ bởi công ty Joyent có trụ sở tại California, Mỹ [7]. Đây là một nền tảng thực thi mã JavaScript để phát triển các ứng dụng web như video clip và diễn đàn.js cho phép triển khai ứng dụng một cách đơn giản và hiệu quả, hỗ trợ thu hẹp phạm vi hoạt động của các trang mạng xã hội.js chủ yếu sử dụng cơ chế non-blocking để xử lý đầu vào/đầu ra dữ liệu thông qua các tác vụ thời gian thực. Nền tảng này có khả năng mở rộng nhanh chóng và xử lý đồng thời hàng ngàn kết nối với thông lượng cao.

Đối với các ứng dụng web truyền thống, việc sử dụng tài nguyên hệ thống không hiệu quả do các yêu cầu tạo ra các luồng xử lý mới tiêu tốn nhiều bộ nhớ [7].js giải quyết vấn đề này bằng cách sử dụng mô hình đơn luồng (Single- Threaded) kết hợp với non-blocking I/O, cho phép hệ thống xử lý hàng nghìn kết nối đồng thời một cách hiệu quả. Ưu điểm của NodeJS - IO hướng sự kiện bất đồng bộ, có thể giải quyết nhiều yêu cầu đồng thời. - Sử dụng JavaScript – một ngôn ngữ lập trình dễ học, dễ dàng sử dụng. - Chia sẻ cùng code ở cả phía máy khách và máy chủ.

- NPM(Node Package Manager) và module Node đang ngày một phát triển hơn. - Cộng đồng hỗ trợ tích cực. - Cho phép stream các file có kích thước lớn [7] 1. Một số tính năng của NodeJS - Lập trình hướng sự kiện và bất đồng bộ: Tất cả API trong thư viện NodeJS sẽ bất đồng bộ, hay là không bị chặn.

Về bản chất điều này có nghĩa là một server KHÓA LUẬN TỐT NGHIỆP Trang 10 PHẦN NỘI DUNG Chương 1: CƠ SỞ LÝ THUYẾT dùng NodeJS sẽ không phải đợi một API trả về dữ liệu. Server sẽ chuyển qua API tiếp theo sau lần gọi API đó và cơ chế thông báo của Events trong NodeJS cho phép server nhận lại phản hồi từ lần gọi API trước - Cực kỳ nhanh chóng: Được phát triển trên Công cụ JavaScript V8 của Google Chrome, thư viện NodeJS có tốc độ thực thi code rất cao - Đơn luồng/Single thread nhưng có khả năng mở rộng cao: NodeJS sử dụng một mô hình luồng đơn với vòng lặp sự kiện/event. Cơ chế event cho phép máy chủ phản hồi non-blocking và cũng cho phép khả năng mở rộng cao hơn so với các server truyền thống vì hỗ trợ số lượng thread để thực hiện yêu cầu. NodeJS sử dụng một chương trình đơn luồng, cho phép chương trình có thể thực hiện tác vụ trên một số lượng yêu cầu lớn hơn so với các máy chủ truyền thống như Apache HTTP Server.

- Không có buffer: Các ứng dụng NodeJS không có vùng nhớ tạm thời (buffer) đối với bất cứ dữ liệu nào. Các ứng dụng này chỉ đơn giản là xuất dữ liệu theo khối. - License: NodeJS được phát hành theo giấy phép MIT [7] 1. Giới thiệu về Redux 1.

Định nghĩa về Redux Hình 1. Định nghĩa Redux Redux là một thư viện Javascript hỗ trợ tạo ra một lớp quản lý trạng thái của ứng dụng. Được xây dựng nền tảng tư tưởng của kiến trúc Flux mà Facebook giới thiệu, do đó Redux sẽ là bộ đôi kết hợp tuyệt vời với React (React Js và React Native). [8] KHÓA LUẬN TỐT NGHIỆP Trang 11 PHẦN NỘI DUNG Chương 1: CƠ SỞ LÝ THUYẾT 1.

Cách thức hoạt động của Redux Hình 1. Cách thức hoạt động của Redux Redux hoạt động nhờ vào 3 thành phần cơ bản: Actions, Reducers và Store. - Action: các events sẽ chuyển dữ liệu từ ứng dụng tới store. Các tác vụ được thực hiện bởi phương thức store.

Các actions là các đối tượng JavaScript và chúng cần có type nhằm chỉ rõ loại action sẽ được thực thi. Chúng cũng phải có một payload chứa dữ liệu cần được xử lý bởi action.