Xây dựng website kinh doanh về lĩnh vực thời trang

Đồ án tốt nghiệp: Xây dựng website kinh doanh về lĩnh vực thời trang - ĐH Sư phạm Kỹ thuật TP.HCM

• Tác giả: Lê Minh Quang
• Người hướng dẫn: TS. Mai Anh Thơ
• 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 kinh doanh về lĩnh vực thời trang
• Loại tài liệu: Khóa luận tốt nghiệp
• Năm xuất bản: 2025
• Địa điểm: Hồ Chí Minh

Tóm tắt

I. Tổng quan đồ án website thời trang ĐH Sư phạm Kỹ thuật TP

Đề tài khóa luận tốt nghiệp ngành Công nghệ Thông tin tại Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh tập trung vào lĩnh vực bán lẻ thời trang số. Đề tài do nhóm sinh viên Lê Minh Quang, Ngô Nguyên Bảo và Võ Trường Vỹ thực hiện dưới sự hướng dẫn khoa học của Tiến sĩ Mai Anh Thơ. Ngành thời trang trực tuyến đòi hỏi tính linh hoạt cao. Khách hàng luôn mong muốn trải nghiệm thị giác ấn tượng cùng tốc độ phản hồi tức thì. Tuy nhiên, nhiều doanh nghiệp vừa và nhỏ vẫn gặp rào cản khi triển khai hạ tầng số. Đề tài giải quyết bài toán chuyển đổi số thông qua việc xây dựng một hệ thống website hoàn chỉnh. Nền tảng tích hợp đầy đủ quy trình thương mại từ quản lý kho, trưng bày sản phẩm đến thanh toán trực tuyến. Khóa luận đáp ứng các tiêu chuẩn đào tạo kỹ sư công nghệ của nhà trường. Sản phẩm vừa có giá trị học thuật vừa sở hữu tiềm năng thương mại hóa rõ nét. Mô hình kiến trúc phân lớp mang lại độ ổn định cao trong suốt quá trình vận hành liên tục.

1.1. Bối cảnh và mục tiêu nghiên cứu đề tài

Sự bùng nổ của thương mại điện tử tạo áp lực cạnh tranh lớn cho ngành bán lẻ thời trang. Khách hàng ngày càng ưu tiên mua sắm qua Internet nhờ tính tiện lợi. Tuy nhiên, chi phí thuê mặt bằng vật lý liên tục tăng cao. Các giải pháp bán hàng truyền thống bộc lộ nhiều điểm nghẽn nghiêm trọng. Mục tiêu cốt lõi của đề tài là kiến tạo website bán hàng chuyên nghiệp, hiện đại và chuẩn hóa. Hệ thống hướng đến mục tiêu giảm thiểu chi phí quản lý vận hành. Nền tảng đồng thời cung cấp giao diện trực quan, thân thiện cho mọi nhóm khách hàng. Đề tài tập trung tối ưu hóa thời gian xử lý đơn hàng tự động. Đây là cơ sở thực tiễn để nâng cao doanh số bán hàng bền vững.

1.2. Phạm vi và đối tượng thực hiện khóa luận

Khóa luận xác định rõ phạm vi nghiên cứu xoay quanh mô hình thương mại bán lẻ trực tuyến. Đối tượng áp dụng trực tiếp là các cửa hàng và chuỗi thời trang quy mô vừa. Hệ thống triển khai hai phân hệ tương tác chính gồm người tiêu dùng và ban quản trị. Khách hàng được hỗ trợ tìm kiếm trang phục, kiểm tra tồn kho và thanh toán nhanh. Quản trị viên theo dõi đơn hàng, cập nhật biến thể sản phẩm và thống kê doanh thu theo thời gian thực. Giới hạn kỹ thuật của dự án tập trung vào môi trường web đa nền tảng. Đề tài không mở rộng sang ứng dụng di động bản địa nhằm đảm bảo tính tập trung chuyên sâu. Toàn bộ quy trình thử nghiệm diễn ra nghiêm ngặt trong khuôn khổ khoa học.

II. Phân tích bài toán website thời trang ĐH Sư phạm Kỹ thuật TP

Khảo sát thực trạng cho thấy nhiều trang web thời trang hiện nay mắc phải những sai lầm nghiêm trọng trong thiết kế kiến trúc. Giao diện người dùng thường rườm rà và tải chậm. Quy trình đăng ký tài khoản bắt buộc qua nhiều bước gây phiền hà cho người mua sắm. Cơ chế đăng nhập truyền thống dựa hoàn toàn vào tên tài khoản và mật khẩu đơn thuần khiến tỷ lệ chuyển đổi sụt giảm. Bên cạnh đó, các thao tác quản trị cơ sở dữ liệu sản phẩm thủ công tiêu tốn nhiều thời gian của nhân viên. Vấn đề bảo mật dữ liệu cũng là điểm yếu phổ biến tại các hệ sinh thái thương mại quy mô nhỏ. Mật khẩu lưu trữ dạng chuỗi thông thường dễ bị tấn công mạng xâm nhập. Việc đồng bộ hóa kho hàng khi có nhiều giao dịch phát sinh đồng thời thường xuyên dẫn đến tình trạng sai lệch số lượng. Khách hàng dễ rơi vào trạng thái đặt hàng ảo do dữ liệu tồn kho cập nhật chậm trễ. Đồ án nhận diện chính xác các lỗ hổng này nhằm đề xuất phương án kỹ thuật toàn diện, đảm bảo tính khả dụng cao và bảo vệ toàn vẹn thông tin.

2.1. Hạn chế từ mô hình quản trị thương mại điện tử cũ

Các nền tảng bán hàng thời trang cũ bộc lộ nhiều nhược điểm vận hành lớn. Khách vãng lai đối mặt với quá nhiều rào cản thông tin trước khi chọn món đồ ưng ý. Chức năng tìm kiếm sản phẩm hoạt động thiếu chính xác do thuật toán lọc danh mục sơ sài. Khách hàng không thể kiểm tra lịch sử xem đồ hoặc danh sách yêu thích một cách trực quan. Việc tương tác giữa người mua và người bán thường bị gián đoạn vì thiếu công cụ nhắn tin trực tiếp. Về phía quản trị, việc thống kê doanh thu và kiểm soát màu sắc sản phẩm vẫn làm thủ công. Tình trạng này dẫn đến sai sót số liệu đơn hàng và thất thoát tài chính đáng tiếc.

2.2. Yêu cầu chức năng và phi chức năng của hệ thống

Hệ thống phân định ranh giới chức năng rõ ràng cho ba nhóm đối tượng người dùng. Khách vãng lai được phép duyệt xem danh mục, đọc bài viết và tìm kiếm mặt hàng. Thành viên chính thức sở hữu các quyền nâng cao như quản lý địa chỉ giao hàng, lưu sản phẩm yêu thích và thanh toán hóa đơn. Họ cũng có thể trò chuyện với người bán hoặc tương tác trực tiếp cùng chatbot thông minh. Quản trị viên nắm quyền kiểm soát toàn diện kho hàng, phân loại sản phẩm, sửa bài viết và xem biểu đồ kinh doanh. Về yêu cầu phi chức năng, hệ thống đòi hỏi tính khả dụng vượt trội và cơ sở dữ liệu dung lượng lớn. Mật khẩu bắt buộc mã hóa hash an toàn tuyệt đối.

III. Giải pháp công nghệ website thời trang ĐH Sư phạm Kỹ thuật TP

Để giải quyết triệt để các hạn chế trên, đề tài áp dụng các công nghệ lập trình web tiên tiến nhất. Trọng tâm phía giao diện là thư viện ReactJS kết hợp mô hình thành phần độc lập. Cách tiếp cận này giúp mã nguồn phân tách mạch lạc và dễ dàng bảo trì. Các thành viên trong nhóm lập trình có thể xây dựng từng module mà không gây xung đột mã nguồn. Cơ chế Virtual DOM tối ưu hóa tốc độ kết xuất trang web vượt trội so với các kỹ thuật render DOM truyền thống. Phía máy chủ và cơ sở dữ liệu được tổ chức theo chuẩn kiến trúc dịch vụ hiện đại. Cơ chế mã hóa băm mật khẩu trước khi lưu trữ ngăn chặn rủi ro rò rỉ dữ liệu cá nhân. Mô hình phân quyền truy cập nghiêm ngặt đảm bảo tài khoản quản trị và khách hàng hoạt động độc lập, minh bạch. Hệ thống giao tiếp qua các giao thức truyền tải dữ liệu an toàn. Nhờ đó, nền tảng luôn duy trì sự ổn định ngay cả trong các đợt cao điểm khuyến mãi với lượng truy cập lớn.

3.1. Ứng dụng thư viện ReactJS tối ưu giao diện người dùng

ReactJS đóng vai trò xương sống trong việc xây dựng giao diện ứng dụng phía người dùng. Cấu trúc chia nhỏ giao diện thành các Component độc lập mang lại tính tái sử dụng rất cao. Mỗi thành phần đại diện cho một khối chức năng cụ thể như thanh điều hướng, giỏ hàng hoặc thẻ trưng bày trang phục. Thuật toán so sánh Virtual DOM chỉ cập nhật những phần tử có sự biến đổi dữ liệu thực tế. Cơ chế này loại bỏ hoàn toàn việc vẽ lại toàn bộ cây DOM tốn kém tài nguyên trình duyệt. Tốc độ chuyển trang và hiển thị danh mục thời trang diễn ra gần như tức thì. Trải nghiệm người dùng nhờ đó trở nên mượt mà, liền mạch và chuyên nghiệp.

3.2. Thiết kế cơ sở dữ liệu và bảo mật thông tin tài khoản

Hệ thống cơ sở dữ liệu được thiết kế tối ưu nhằm lưu trữ dung lượng lớn thông tin kinh doanh. Các bảng dữ liệu phân định rõ ràng giữa người dùng, danh mục sản phẩm, biến thể màu sắc và đơn hàng. Để nâng cao tính bảo mật, toàn bộ mật khẩu người dùng đều trải qua thuật toán băm mật mã trước khi lưu vào database. Giải pháp này ngăn chặn nguy cơ giải mã dữ liệu trái phép nếu xảy ra sự cố bảo mật mạng. Bên cạnh đó, hệ thống tích hợp các cơ chế kiểm tra tính hợp lệ của dữ liệu đầu vào. Các phiên đăng nhập duy trì qua chuỗi token an toàn, hỗ trợ người mua giao dịch thuận tiện và tự tin.

IV. Kết quả ứng dụng website thời trang ĐH Sư phạm Kỹ thuật TP

Khóa luận tốt nghiệp của sinh viên Trường Đại học Sư phạm Kỹ thuật TP.HCM đã hoàn thành xuất sắc các mục tiêu nghiên cứu đặt ra. Website kinh doanh thời trang vận hành ổn định trên môi trường thử nghiệm thực tế. Tốc độ tải trang phản hồi nhanh chóng dưới 2 giây đối với mọi thao tác duyệt sản phẩm và tra cứu hóa đơn. Người tiêu dùng dễ dàng thực hiện quy trình mua sắm từ bước chọn lựa trang phục đến khâu xác nhận thanh toán. Giao diện quản trị cung cấp đầy đủ các biểu đồ thống kê đơn hàng và kiểm soát kho chính xác. Kết quả nghiên cứu chứng minh tính đúng đắn của việc ứng dụng công nghệ thành phần hiện đại vào bán lẻ thời trang. Hệ thống giải quyết tốt bài toán kinh doanh số cho các doanh nghiệp quy mô vừa và nhỏ. Sản phẩm không chỉ đáp ứng yêu cầu học thuật của hội đồng chấm đồ án mà còn có khả năng triển khai thực địa ngay lập tức. Đây là nền móng vững chắc để nhóm tác giả tiếp tục nghiên cứu và mở rộng giải pháp trong tương lai.

4.1. Hiệu quả vận hành thực tế của nền tảng bán hàng

Quá trình thử nghiệm thực địa cho thấy nền tảng đạt hiệu năng xử lý rất ấn tượng. Tỷ lệ lỗi phát sinh trong toàn bộ quy trình thanh toán ghi nhận ở mức tối thiểu. Giao diện trực quan giúp khách mua hàng thao tác nhanh chóng và giảm thiểu các bước trung gian không cần thiết. Người bán dễ dàng cập nhật thông tin biến thể màu sắc, kích thước và giá cả chỉ trong vài giây. Báo cáo thống kê đơn hàng được xuất tự động, giúp chủ shop nắm bắt doanh số kịp thời. Hệ thống đảm bảo tính liên tục của dữ liệu và phục vụ hàng trăm phiên duyệt đồng thời mà không bị giật lag.

4.2. Hướng mở rộng tính năng thương mại điện tử tương lai

Để gia tăng giá trị thương mại, hệ thống có thể mở rộng thêm nhiều tính năng đột phá. Hướng đi ưu tiên tiếp theo là tích hợp thuật toán trí tuệ nhân tạo để gợi ý trang phục theo sở thích cá nhân của từng khách hàng. Dự án cũng có thể xây dựng ứng dụng di động đa nền tảng để gia tăng độ phủ sóng thị trường. Việc tích hợp cổng thanh toán trực tuyến qua ví điện tử và thẻ quốc tế sẽ giúp đa dạng hóa phương thức chi trả. Ngoài ra, việc bổ sung chatbot tự động hỗ trợ chăm sóc khách hàng 24/7 sẽ nâng tầm dịch vụ. Những cải tiến này sẽ hoàn thiện hệ sinh thái bán lẻ thời trang toàn diện.

Nội dung chính

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

Trong bối cảnh thương mại điện tử phát triển mạnh mẽ, người tiêu dùng ngày càng chuyển dịch sang hình thức mua sắm trực tuyến nhờ tính tiện lợi và tốc độ tiếp cận nhanh chóng. Mặc dù thị trường thời trang trực tuyến tại Việt Nam rất sôi động, các giá trị trang phục truyền thống dân tộc – đặc biệt là cổ phục như áo dài, áo nhật bình, áo tấc hay trang phục qua các triều đại lịch sử – vẫn chưa được khai thác bài bản trên các nền tảng số. Hiện trạng thực tế cho thấy các sản phẩm cổ phục mang tính di sản văn hóa cao nhưng thiếu kênh tiếp cận chuyên biệt có chiều sâu về tư vấn quy chuẩn trang phục, nguồn gốc lịch sử cũng như cách phối hợp phụ kiện hiện đại. Đồng thời, sự phát triển của công nghệ thông tin và trí tuệ nhân tạo (AI) trong cuộc Cách mạng Công nghiệp 4.0 mở ra khả năng tự động hóa quy trình tư vấn và cá nhân hóa trải nghiệm người dùng, thay thế các phương thức bán lẻ thủ công.

Xuất phát từ thực tiễn trên, đề tài khóa luận "Xây dựng Website kinh doanh về lĩnh vực thời trang" do nhóm 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 thực hiện, tập trung vào hai nhóm nhiệm vụ cụ thể:

1. Nhiệm vụ lý thuyết: Nghiên cứu và tìm hiểu các công nghệ nền tảng bao gồm NestJS, ReactJS, Redux, Hooks, cơ sở dữ liệu MongoDB, cổng thanh toán VNPay, giao thức truyền thông WebSocket, cùng các công nghệ AI gồm LangChain, mô hình ngôn ngữ lớn Gemini (Google Generative AI) và OpenAI để xây dựng trợ lý ảo (Chatbot).
2. Nhiệm vụ thực hành:
   • Thiết kế giao diện người dùng (UI/UX) cho cả hai phân hệ khách hàng và quản trị viên bằng ReactJS, React-Redux, Redux Toolkit và Axios.
   • Xây dựng hệ thống giao diện lập trình ứng dụng (RESTful API) phía máy chủ bằng framework NestJS theo kiến trúc module hóa.
   • Thiết kế và triển khai mô hình lưu trữ cơ sở dữ liệu phi quan hệ với MongoDB và thư viện Mongoose.
   • Tích hợp giao thức WebSocket nhằm xử lý thông báo và cập nhật dữ liệu thời gian thực giữa máy khách và máy chủ.
   • Tích hợp cổng thanh toán trực tuyến VNPay phục vụ giao dịch điện tử.
   • Xây dựng hệ thống Chatbot thông minh bằng LangChain kết hợp mô hình Gemini để tư vấn và giải đáp thắc mắc của người dùng.
   • Tích hợp dịch vụ đám mây Cloudinary để tối ưu hóa lưu trữ hình ảnh sản phẩm.
   • Ứng dụng Nodemailer kết hợp thư viện Google APIs (OAuth2Client) để thực hiện chức năng gửi email xác thực và thông báo tự động.

Đối tượng nghiên cứu của đề tài là nhu cầu tìm kiếm, mua sắm thời trang cổ phục trực tuyến và các giải pháp công nghệ kỹ thuật phục vụ việc phát triển một nền tảng thương mại điện tử chuyên biệt. Phạm vi nghiên cứu được giới hạn từ ngày 06/01/2025 đến ngày 14/05/2025, bao gồm hai phân hệ nghiệp vụ chính: phân hệ người dùng (tìm kiếm, duyệt sản phẩm, giỏ hàng, thanh toán, tương tác với chatbot AI, gửi đánh giá, theo dõi đơn hàng) và phân hệ quản trị viên (quản lý danh mục, sản phẩm, đơn hàng, kho hàng, mã giảm giá, bài viết, tài khoản và thống kê doanh thu).

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

Khóa luận được xây dựng dựa trên các nền tảng lý thuyết và công nghệ kỹ thuật phần mềm hiện đại:

• Công nghệ phía Front-end: Ứng dụng thư viện mã nguồn mở ReactJS (phát triển bởi Facebook từ năm 2013), hoạt động dựa trên cơ chế DOM ảo (Virtual DOM) để so sánh trạng thái và cập nhật giao diện mà không phải render lại toàn bộ trang. Hệ thống áp dụng cú pháp JSX, phân tách giao diện thành các thành phần độc lập (Function Components kết hợp Hooks được giới thiệu từ ReactJS 16.8). Thư viện Redux Toolkit được triển khai dựa trên kiến trúc Flux và nguyên lý ba trụ cột của Redux (nguồn dữ liệu tin cậy duy nhất trong một Store, trạng thái chỉ đọc thông qua Action, và biến đổi trạng thái qua các hàm thuần túy Reducer) nhằm quản lý trạng thái tập trung của toàn bộ ứng dụng. Thư viện Axios đảm nhiệm việc gửi các yêu cầu HTTP kết nối với backend.
• Công nghệ phía Back-end: Framework NestJS chạy trên nền Node.js, hỗ trợ ngôn ngữ TypeScript và kết hợp các mô hình lập trình hướng đối tượng (OOP), lập trình hàm (FP) và lập trình phản ứng hàm (FRP). NestJS tổ chức mã nguồn chặt chẽ theo cấu trúc Module, Controller và Provider (Service), tạo điều kiện cho việc phát triển các RESTful API có khả năng mở rộng và dễ bảo trì.
• Cơ sở dữ liệu: Hệ quản trị cơ sở dữ liệu hướng tài liệu MongoDB được lựa chọn nhờ cấu trúc schema linh hoạt và tốc độ truy vấn cao. Tầng ứng dụng giao tiếp với cơ sở dữ liệu thông qua Mongoose – thư viện lập trình hướng đối tượng Object Document Mapper (ODM), hỗ trợ định nghĩa schema, thực hiện ràng buộc dữ liệu, ánh xạ document và tích hợp plugin xóa mềm (soft delete).
• Cơ chế xác thực và bảo mật: Sử dụng thư viện JSON Web Token (JWT) để mã hóa thông tin nhận thực người dùng gồm 3 phần (header, payload, signature) với thuật toán mã hóa HS256, áp dụng mã bí mật JWT_ACCESS_TOKEN_SECRET và thiết lập thời gian hết hạn (expiresIn) cho accessToken. Mật khẩu người dùng được băm (hash) trước khi ghi vào cơ sở dữ liệu.
• Giao tiếp thời gian thực: Triển khai giao thức WebSocket hoạt động trên tầng truyền vận TCP, thiết lập kênh giao tiếp hai chiều (bi-directional) toàn song công với độ trễ thấp phục vụ tính năng thông báo và trao đổi tin nhắn giữa người dùng với quản trị viên.
• Trợ lý ảo thông minh (Chatbot AI): Khung ứng dụng LangChain kết hợp mô hình ngôn ngữ lớn Gemini (Google Generative AI) từ Google. Hệ thống sử dụng bộ nhớ đệm hội thoại (BufferMemory) để lưu trữ ngữ cảnh trao đổi, áp dụng Prompt Template để định hình phản hồi và cơ chế tool calling hỗ trợ kết nối với API hoặc cơ sở dữ liệu nội bộ.
• Phương pháp nghiên cứu: Đề tài sử dụng phương pháp khảo sát hiện trạng thực tế thông qua việc phân tích điểm mạnh, điểm yếu của các hệ thống thương mại điện tử đang vận hành (SixDO và EGA Style); phương pháp phân tích và thiết kế hệ thống hướng đối tượng thông qua sơ đồ Use Case, đặc tả Use Case, sơ đồ tuần tự (Sequence Diagram); và phương pháp kiểm thử chức năng (Functional Testing / Black-box Testing) theo kịch bản kiểm thử mẫu.

Thiết kế và triển khai

Hệ thống được thiết kế theo mô hình kiến trúc phân tầng (Client-Server phân tách độc lập):

• Kiến trúc tầng Client: Xây dựng bằng ReactJS, cấu trúc gồm các trang chức năng (Home, Cửa hàng, Chi tiết sản phẩm, Giỏ hàng, Thanh toán, Tài khoản, Lịch sử sản phẩm đã xem, Sản phẩm yêu thích, Kho voucher, Tin tức bài viết) và giao diện quản trị riêng biệt (Bảng thống kê hệ thống, Quản lý sản phẩm, Quản lý người dùng, Quản lý đơn hàng, Quản lý kho hàng nhập/xuất, Quản lý mã giảm giá). Giao diện được thiết kế mẫu qua công cụ Figma trước khi chuyển giao thành mã nguồn.
• Kiến trúc tầng Server: NestJS khởi tạo các module chuyên biệt: UsersModule, CartsModule, LikeProductsModule, RolesModule, AuthModule, ProductsModule, OrdersModule. Cơ chế phụ thuộc được cấu hình thông qua PassportModule và JwtModule.registerAsync. Endpoint tiếp nhận yêu cầu đàm thoại thông minh được định tuyến qua /ask để AI Agent xử lý và phản hồi.
• Thiết kế cơ sở dữ liệu MongoDB: Cơ sở dữ liệu bao gồm các tập dữ liệu (collections) cốt lõi như db_user, db_blog, db_cart, db_blogcategory, db_brand, db_coupon, db_review, db_product, db_order. Lược đồ user tích hợp các trường tham chiếu trực tiếp đến collection sản phẩm và mã khuyến mãi:
  • purchasedProducts: Mảng chứa các ObjectId liên kết với bảng Product để ghi nhận các mặt hàng người dùng đã mua.
  • recentViewProducts: Mảng chứa các ObjectId liên kết với Product lưu vết sản phẩm vừa xem.
  • coupons: Mảng đối tượng nhúng chứa _id (liên kết bảng Coupon), trạng thái isActive, tên name, mã code code, và thời hạn hết hạn couponExpired.
• Dịch vụ tích hợp ngoại vi:
  • Cổng VNPay: Cung cấp API xử lý thanh toán không dùng tiền mặt.
  • Cloudinary: Tiếp nhận và lưu trữ tệp hình ảnh sản phẩm được tải lên từ client, phân phối qua CDN.
  • Google OAuth2 & Nodemailer: Cấu hình Client ID, Client Secret và Refresh Token thu thập từ Google Cloud Console (APIs & Services) lưu trong biến môi trường .env, phục vụ tự động hóa gửi email thông báo mã xác thực (OTP) hoặc xác nhận đơn hàng.

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

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

Chương 1 hệ thống hóa toàn bộ các nền tảng công nghệ được áp dụng trong đề tài. Nội dung phân định rõ hai thành phần: Front-end (ReactJS, các khái niệm Props, State, Function Component, Class Component, React Hooks, và thư viện quản lý trạng thái Redux/Redux Toolkit) và Back-end (NestJS, cơ chế module, provider, controller, hệ thống Mongoose ODM cho MongoDB, chuẩn JSON Web Token mã hóa HS256, dịch vụ gửi email Nodemailer kết hợp Google OAuth2, giao thức kết nối thời gian thực WebSocket). Phần cuối của chương giới thiệu giải pháp tích hợp các công nghệ NestJS, LangChain và mô hình ngôn ngữ lớn Gemini để kiến tạo một chatbot đàm thoại có khả năng ghi nhớ ngữ cảnh bằng BufferMemory và mở rộng hành vi thông qua tool calling.

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

Chương này thực hiện khảo sát chi tiết hiện trạng hai website thương mại điện tử trong nước là SixDO (sixdo.vn) và EGA Style (ega-style.com), chỉ ra các ưu điểm và hạn chế cụ thể để làm cơ sở xây dựng yêu cầu hệ thống:

Tiêu chí phân tích	Website SixDO (sixdo.vn)	Website EGA Style (ega-style.com)
Giao diện & Trang chủ	Phong cách tối giản, tông màu be - đen làm nổi bật sản phẩm; bố cục gọn gàng. Hạn chế: thanh header tương tác kém, thiếu bộ lọc và không gợi ý sản phẩm tiềm năng.	Bố cục đa dạng nội dung (danh mục, khuyến mãi, tin tức, feedback). Hạn chế: thanh header chưa sắp xếp khoa học, trang chủ quá nhiều thông tin gây rối cho người dùng mới.
Tìm kiếm & Chi tiết sản phẩm	Chi tiết sản phẩm đầy đủ thông tin màu sắc, size, gợi ý liên quan. Hạn chế: thiếu bộ lọc chi tiết (giá, thương hiệu), khách hàng không thể tương tác bình luận, đánh giá.	Hỗ trợ tìm kiếm theo cây danh mục 3 mức hoặc thanh tìm kiếm nhanh; có tính năng xem nhanh và đánh giá. Hạn chế: mô tả chi tiết sản phẩm chưa sâu.
Quy trình đặt hàng	Hỗ trợ đa dạng phương thức (COD, thanh toán online). Hạn chế: thiếu chức năng theo dõi tình trạng đơn hàng và hủy đơn hàng.	Cho phép chọn ngày/giờ giao hàng. Hạn chế: chỉ hỗ trợ COD, chuyển hướng sang hệ thống bên thứ ba (Haravan) để đặt hàng, không cho phép hủy đơn.
Tài khoản & Xác thực	Đăng ký bắt buộc quét mã QR tải ứng dụng điện thoại (không làm được trên web); đăng nhập truyền thống, ít thuận tiện; đôi khi xảy ra tình trạng giật, reload trang.	Đăng nhập bằng tên đăng nhập/mật khẩu truyền thống; chính sách đăng ký chưa rõ ràng; phiên đăng nhập thỉnh thoảng bị tự động đăng xuất không rõ nguyên nhân.

Dựa trên kết quả khảo sát, chương xác định các yêu cầu chức năng cho 3 nhóm đối tượng: Khách vãng lai (xem trang chủ, xem bài viết, tìm kiếm và xem sản phẩm, đăng ký tài khoản); Thành viên (đăng nhập, quên/đổi mật khẩu, cập nhật thông tin cá nhân, quản lý giỏ hàng, đặt hàng, thanh toán trực tuyến, theo dõi đơn hàng, lưu sản phẩm yêu thích, xem lịch sử sản phẩm đã xem, nhận thông báo, đánh giá sản phẩm, chat với người bán và chat với trợ lý ảo AI); Quản trị viên (quản lý người dùng, sản phẩm, danh mục, kho hàng, lịch sử nhập/xuất kho, đơn hàng, mã giảm giá, bài viết, xem thống kê báo cáo). Yêu cầu phi chức năng tập trung vào việc băm mật khẩu bảo mật, đảm bảo tính khả dụng với tốc độ truy xuất nhanh và khả năng lưu trữ lớn của MongoDB.

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

Chương 3 trình bày chi tiết kết quả mô hình hóa yêu cầu hệ thống. Phần mô hình hóa bao gồm lược đồ Use Case tổng quát cho khách vãng lai, người dùng đã đăng ký và quản trị viên, đi kèm các bảng đặc tả Use Case chi tiết (xem trang chủ, đăng nhập, đăng xuất, đăng ký, quên mật khẩu, xem bài viết, tìm kiếm sản phẩm, xem chi tiết sản phẩm, xem đánh giá). Hành vi tương tác của hệ thống được mô tả bằng 12 lược đồ tuần tự (Sequence Diagram) gồm: Đăng ký, Đăng xuất, Đăng nhập, Quên mật khẩu, Sửa trang cá nhân, Thêm sản phẩm yêu thích, Đặt hàng, Sử dụng mã giảm giá, Đánh giá, Quản lý giỏ hàng, Xóa sản phẩm khỏi giỏ hàng, Chỉnh sửa sản phẩm trong giỏ hàng. Phần cơ sở dữ liệu mô tả cấu trúc các bảng thuộc tính chung và các collection chính. Cuối chương là thiết kế chi tiết giao diện trên môi trường web với hơn 30 màn hình được minh họa cho cả khách hàng và ban quản trị.

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

Chương 4 mô tả môi trường công cụ cài đặt ứng dụng và tiến hành quy trình kiểm thử hệ thống. Tác giả xây dựng kế hoạch kiểm thử chức năng bao gồm 22 bảng kịch bản kiểm thử chi tiết (từ Bảng 24 đến Bảng 45) nhằm kiểm chứng toàn bộ các luồng xử lý: kiểm thử đăng ký, đăng nhập, quên mật khẩu, xác thực mã OTP, tìm kiếm sản phẩm, thêm sản phẩm vào giỏ hàng, đánh giá sản phẩm, thêm sản phẩm yêu thích, xem lịch sử sản phẩm đã đặt, cập nhật thông tin cá nhân, hiển thị sản phẩm, hiển thị bài viết, thu thập ý kiến người dùng, đặt hàng, áp mã giảm giá, so sánh sản phẩm, quản lý sản phẩm, quản lý người dùng, quản lý thương hiệu, quản lý danh mục, quản lý đơn hàng, quản lý mã giảm giá và quản lý bài viết.

Phần Kết luận

Phần kết luận tổng hợp lại toàn bộ các kết quả đạt được về mặt nắm bắt công nghệ và triển khai sản phẩm thực tế, đánh giá các ưu nhược điểm còn tồn tại của hệ thống, và đề ra định hướng phát triển hoàn thiện đồ án trong tương lai.

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

Khóa luận đã hoàn thành các mục tiêu đề ra theo kế hoạch công tác từ tháng 01/2025 đến tháng 05/2025:

• Kết quả xây dựng phần mềm: Xây dựng thành công một hệ thống website thương mại điện tử chuyên ngành thời trang (tập trung vào trang phục truyền thống Việt Nam) với đầy đủ hai phân hệ độc lập. Phía máy khách (ReactJS) sở hữu giao diện đầy đủ các phân trang từ hiển thị sản phẩm, bộ lọc, giỏ hàng, thanh toán đến trung tâm tài khoản người dùng và thanh công cụ quản trị. Phía máy chủ (NestJS) vận hành hệ thống API module hóa, xử lý dữ liệu với cơ sở dữ liệu MongoDB.
• Khắc phục các hạn chế từ khảo sát thực tế:
  • Khắc phục nhược điểm của website SixDO bằng việc cho phép người dùng đăng ký trực tiếp trên giao diện website (không ép buộc quét mã tải app di động), cung cấp tính năng đánh giá/bình luận sản phẩm, hỗ trợ tra cứu lịch sử và trạng thái đơn hàng.
  • Khắc phục nhược điểm của website EGA Style bằng việc tích hợp quy trình thanh toán trực tiếp trên hệ thống qua cổng VNPay thay vì chuyển hướng sang nền tảng bên thứ ba, cung cấp đồng thời phương thức thanh toán điện tử lẫn COD.
  • Triển khai thành công tính năng giao tiếp thời gian thực bằng WebSocket giúp tương tác trao đổi thông tin giữa khách hàng và quản trị viên, đồng thời cập nhật tức thời các thông báo hệ thống.
  • Tích hợp thành công mô hình ngôn ngữ lớn Gemini thông qua LangChain vào ứng dụng NestJS, tạo ra Chatbot hỗ trợ người dùng tìm kiếm sản phẩm và giải đáp thông tin liên quan đến trang phục tự động trên nền tảng web.
  • Hoàn thành bộ kịch bản kiểm thử chức năng đồ sộ với 22 bảng kiểm thử (từ kiểm thử xác thực, OTP, giỏ hàng, khuyến mãi đến toàn bộ phân hệ quản trị), xác nhận tính chính xác của các luồng nghiệp vụ.

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

Dựa trên các phân tích kỹ thuật và nội dung tự đánh giá trong văn bản khóa luận:

• Hạn chế:
  • Việc sử dụng NestJS và TypeScript đòi hỏi quy trình cấu hình ban đầu phức tạp hơn so với các framework Node.js truyền thống (như Express hoặc Koa), có thể tạo ra mã nguồn cồng kềnh đối với các chức năng đơn giản.
  • Về mặt hiệu năng, do NestJS xây dựng trên nền tảng bọc ngoài Express (hoặc Fastify) nên tốc độ xử lý chưa đạt mức tối ưu tuyệt đối so với việc sử dụng trực tiếp các thư viện bậc thấp.
  • Hệ thống phụ thuộc vào tính sẵn sàng của các dịch vụ bên thứ ba như cổng thanh toán VNPay, hạ tầng lưu trữ đám mây Cloudinary, dịch vụ gửi thư của Google và API mô hình Gemini.
• Hướng phát triển:
  • Tiếp tục tối ưu hóa hiệu năng truy vấn dữ liệu trên cơ sở dữ liệu MongoDB và cải tiến cấu hình middleware trong NestJS.
  • Mở rộng tập dữ liệu mẫu và hoàn thiện các kịch bản tương tác chuyên sâu hơn cho Chatbot AI trong việc tư vấn quy chuẩn cổ phục truyền thống Việt Nam.
  • Bổ sung và nâng cao các thuật toán gợi ý sản phẩm mang tính cá nhân hóa cao hơn dựa trên lịch sử xem hàng (recentViewProducts) và lịch sử mua hàng (purchasedProducts) đã được thiết kế sẵn trong lược đồ cơ sở dữ liệu.

Giá trị tham khảo

Báo cáo khóa luận là tài liệu tham khảo có giá trị học thuật và ứng dụng thực tiễn rõ ràng:

• Đối tượng tham khảo: Sinh viên chuyên ngành Công nghệ phần mềm, Công nghệ thông tin, Hệ thống thông tin hoặc các lập trình viên đang nghiên cứu xây dựng các nền tảng thương mại điện tử hoàn chỉnh từ đầu.
• Nội dung đáng tham khảo:
  • Phương pháp phân tích và khảo sát thực nghiệm hệ thống thương mại điện tử thực tế có cấu trúc so sánh đối chiếu rõ ràng.
  • Mô hình tích hợp kiến trúc hiện đại Full-stack JavaScript/TypeScript: Front-end sử dụng ReactJS kết hợp Redux Toolkit, Back-end sử dụng NestJS kết nối Mongoose/MongoDB.
  • Cấu hình kỹ thuật mẫu cho các dịch vụ ngoại vi phổ biến: JWT (thuật toán HS256), OAuth2Client Google kết hợp Nodemailer, tích hợp giao thức truyền thông hai chiều WebSocket.
  • Kiến trúc tích hợp mô hình ngôn ngữ lớn (Gemini) vào hệ thống web thông qua khung điều phối LangChain với bộ nhớ đệm BufferMemory và tool calling.
  • Phương pháp đặc tả Use Case, thiết kế lược đồ tuần tự (Sequence Diagram) và hệ thống bảng kịch bản kiểm thử chức năng chi tiết cho một dự án phần mềm tốt nghiệp.

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

1. Khóa luận giải quyết các nhược điểm nào của các website thương mại điện tử đã khảo sát (SixDO và EGA Style)?

Qua khảo sát tại Chương 2, nhóm tác giả chỉ ra SixDO bắt buộc người dùng quét mã QR tải ứng dụng di động để đăng ký tài khoản, thiếu chức năng đánh giá sản phẩm và không có tính năng theo dõi trạng thái đơn hàng. Website EGA Style chỉ có thanh toán COD, chuyển hướng đơn hàng sang bên thứ ba (Haravan), và phiên đăng nhập không ổn định. Khóa luận giải quyết triệt để các vấn đề này bằng cách: cho phép đăng ký trực tiếp trên website kèm xác thực OTP qua email, xây dựng chức năng đánh giá và bình luận sản phẩm, hỗ trợ quản lý vòng đời đơn hàng, và tích hợp cổng thanh toán trực tuyến VNPay song song với COD ngay trong hệ thống.

2. Trợ lý ảo (Chatbot AI) trong hệ thống được xây dựng bằng những công nghệ nào và hoạt động ra sao?

Chatbot được xây dựng bằng sự kết hợp giữa framework NestJS, khung điều phối LangChain và mô hình ngôn ngữ lớn Gemini (Google Generative AI). Hệ thống định tuyến yêu cầu qua endpoint /ask. LangChain đảm nhiệm việc quản lý mẫu câu hỏi/trả lời (Prompt Template), duy trì ngữ cảnh các câu hỏi trước đó thông qua bộ nhớ đệm hội thoại (BufferMemory), và sử dụng cơ chế tool calling để gọi đến các API hoặc truy vấn dữ liệu sản phẩm trong hệ thống, từ đó tạo ra phản hồi tự nhiên và phù hợp với yêu cầu tìm kiếm của người dùng.

3. Cơ chế bảo mật và xác thực người dùng trong hệ thống được cấu hình như thế nào?

Hệ thống sử dụng mật khẩu được băm trước khi lưu trữ vào cơ sở dữ liệu MongoDB. Cơ chế xác thực sử dụng chuẩn JSON Web Token (JWT) thông qua JwtModule trong NestJS. Mã truy cập (accessToken) được mã hóa bằng thuật toán HS256 với khóa bảo mật JWT_ACCESS_TOKEN_SECRET và thiết lập thời hạn hiệu lực qua signOptions: { expiresIn: ... }. Dịch vụ xác thực được tích hợp chặt chẽ với PassportModule, AuthService, LocalStrategy và JwtStrategy.

4. Collection người dùng (db_user) trong MongoDB được thiết kế lưu trữ các thông tin chuyên biệt nào phục vụ cá nhân hóa?

Trong cấu hình Mongoose schema của collection user, ngoài các thông tin tài khoản cơ bản, hệ thống thiết kế các trường dữ liệu chuyên biệt gồm: trường purchasedProducts (mảng chứa các ObjectId liên kết với bảng Product lưu danh sách sản phẩm đã mua), trường recentViewProducts (mảng các ObjectId lưu danh sách sản phẩm người dùng vừa xem), và trường coupons (mảng đối tượng nhúng chứa _id mã giảm giá, trạng thái kích hoạt isActive, tên mã name, mã code code, và ngày hết hạn couponExpired).

5. Giao thức WebSocket được nhóm tác giả tích hợp vào hệ thống nhằm mục đích gì?

Giao thức WebSocket được thiết lập chạy trên tầng TCP nhằm cung cấp kênh giao tiếp hai chiều với độ trễ thấp và khả năng xử lý lỗi tốt. Trong hệ thống, WebSocket được sử dụng chuyên biệt cho hai tác vụ thời gian thực: tính năng trao đổi tin nhắn trực tiếp giữa khách hàng với người quản trị (chat) và tính năng đẩy thông báo cập nhật dữ liệu tức thì giữa máy chủ và giao diện người dùng.

Kết luận

Khóa luận tốt nghiệp "Xây dựng Website kinh doanh về lĩnh vực thời trang" của nhóm sinh viên Trường Đại học Sư phạm Kỹ thuật TP.HCM đã nghiên cứu và triển khai thành công một giải pháp thương mại điện tử hoàn chỉnh hướng tới việc bảo tồn và thương mại hóa cổ phục truyền thống Việt Nam. Bằng việc kết hợp kiến trúc kỹ thuật hiện đại gồm ReactJS, NestJS, MongoDB, WebSocket và tích hợp AI thông qua LangChain cùng mô hình Gemini, sản phẩm đáp ứng đầy đủ các yêu cầu nghiệp vụ mua bán trực tuyến lẫn hỗ trợ tư vấn tự động. Toàn bộ quy trình phân tích, thiết kế lược đồ, cấu trúc cơ sở dữ liệu và kế hoạch kiểm thử chức năng được trình bày mạch lạc, tạo nên một tài liệu kỹ thuật có giá trị tham khảo thiết thực cho các dự án phát triển phần mềm ứng dụng tương tự.

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

PHẦN MỞ ĐẦU 3. PHẠM VI NGHIÊN CỨU Đề tài “Xây dựng Website kinh doanh trong lĩnh vực thời trang” tập trung vào việc nghiên cứu, thiết kế và triển khai một nền tảng thương mại điện tử phục vụ cho hoạt động bán hàng trực tuyến trong ngành thời trang. Phạm vi nghiên cứu được xác định rõ ràng nhằm đảm bảo tính khả thi và phù hợp với thời gian, nguồn lực thực hiện, cụ thể như sau: - Trải nghiệm người dùng (UX): Nghiên cứu và xây dựng giao diện thân thiện, dễ sử dụng, giúp người dùng có thể dễ dàng tìm kiếm, duyệt và mua sắm các sản phẩm thời trang. - Hiệu suất và tích hợp công nghệ: nghiên cứu về việc tích hợp NestJS ở phía backend và ReactJS ở phía frontend nhằm tối ưu hóa hiệu suất hoạt động của trang web, đảm bảo khả năng xử lý dữ liệu nhanh chóng và giao diện tương tác mượt mà.

- Quản lý sản phẩm và đơn hàng: Tạo các tính năng quản lý sản phẩm, lịch sử đơn hàng, giúp người quản trị có thể dễ dàng cập nhật và quản lý thông tin. - Bảo mật và thanh toán trực tuyến: Đề tài hướng đến việc đảm bảo an toàn thông tin người dùng thông qua cơ chế xác thực bằng JSON Web Token (JWT), đồng thời tích hợp cổng thanh toán VnPay để hỗ trợ người dùng thanh toán đơn hàng trực tuyến một cách tiện lợi và bảo mật. Website được chia thành 2 phần chính, bao gồm: - Dành cho quản trị viên (Admin) thực hiện các nghiệp vụ quản lý, bao gồm: + Quản lý sản phẩm và loại sản phẩm + Quản lý đơn hàng + Quản lý mã giảm giá + Quản lý bài viết + Quản lý kho hang + Quản lý người dùng và tài khoản + Thống kê báo cáo doanh thu + Thống kê kho hang + Chat với người bán 3 PHẦN MỞ ĐẦU - Dành cho người dùng bao gồm các nghiệp vụ sau: + Đăng ký/ Đăng nhập/ Quên mật khẩu + Tìm kiếm sản phẩm + Xem danh sách sản phẩm và đặt hàng + Xem giỏ hàng + Thanh toán và theo dõi đơn hàng + Chỉnh sửa thông tin cá nhân + Chat với người bán + Chat với Chatbot + Đánh giá sản phẩm + Xem thông báo + Xem lịch sử sản phẩm đã xem 4. MỤC TIÊU CỦA ĐỀ TÀI Đề tài “Xây dựng Website kinh doanh trong lĩnh vực thời trang” hướng đến mục tiêu thiết kế và triển khai một nền tảng thương mại điện tử chuyên biệt cho ngành thời trang, nhằm hỗ trợ cả người dùng cuối (khách hàng) và người quản trị hệ thống (quản trị viên).

Về phía người dùng xây dựng được một website bán hang thời trang với giao diện thân thiện và tiện lợi với các tính năng cơ bản về đặt hàng, thanh toán và các hỗ trợ khác cho người dùng, chat với người bán, chatbot, đánh giá sản phẩm, gợi ý sản phẩm mang tính cá nhân hóa. Về phía quản trị xây dựng được nơi quản lý, theo dõi các tài nguyên, dữ liệu của hệ thống: như thống kê, quản lý tài khoản, quản lý sản phẩm, quản lý loại sản phẩm, quản lý tài khoản người dùng, chat với người mua. Ý NGHĨA VÀ KHOA HỌC THỰC TIỄN Ý nghĩa khoa học: Đề tài góp phần ứng dụng các công nghệ hiện đại như ReactJS, NestJS, Redux, WebSocket và chatbot vào xây dựng hệ thống thương mại điện tử, từ đó nâng cao hiểu biết và khả năng áp dụng mô hình lập trình hiện đại trong thực tiễn. 4 PHẦN MỞ ĐẦU Ý nghĩa thực tiễn: Hệ thống giúp người bán thời trang dễ dàng quản lý sản phẩm, đơn hàng và khách hàng; đồng thời mang đến trải nghiệm mua sắm tiện lợi, nhanh chóng, an toàn cho người dùng, góp phần thúc đẩy hoạt động kinh doanh trực tuyến.

5 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. KIẾN TRÚC HỆ THỐNG Hình 1. Kiến trúc thành phần ứng dụng Ứng du ̣ng gồ m hai thành phầ n chính: Front-end: Sử dụng ReactJS với ngôn ngữ lập trình JavaScript, áp dụng khái niệm Virtual DOM để tối ưu hóa hiệu suất của ứng dụng. ReactJS cho phép xây dựng giao diện thông qua các thành phần (component) độc lập, giúp quản lý và tái sử dụng mã dễ dàng hơn.

Công nghệ này sử dụng JSX, một cú pháp mở rộng cho phép nhúng HTML trực tiếp vào mã JavaScript, giúp việc viết và hiểu mã trở nên đơn giản, trực quan. Các giao diện phức tạp được chia nhỏ thành những component nhỏ hơn, dễ quản lý hơn, từ đó tạo nên một cấu trúc UX/UI logic và rõ ràng. Đặc biệt, ReactJS phù hợp với các ứng dụng có dữ liệu biến đổi liên tục nhờ khả năng cập nhật nhanh chóng và hiệu quả. Ngoài ra, công nghệ 6 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT này hỗ trợ việc bảo trì, nâng cấp và sửa lỗi trở nên dễ dàng, giúp tối ưu hóa quy trình phát triển ứng dụng web.

Back-end: Sử dụng NestJS, một framework mạnh mẽ xây dựng trên Node.js, kết hợp với kiến trúc module hóa và hỗ trợ TypeScript, giúp tổ chức mã nguồn rõ ràng, dễ quản lý và mở rộng. NestJS tận dụng sức mạnh của các phương thức HTTP và tích hợp middleware, giúp xây dựng các RESTful API nhanh chóng, mạnh mẽ và dễ dàng tái sử dụng. Về cơ sở dữ liệu, đồ án sử dụng MongoDB nhờ cấu trúc linh hoạt, khả năng xử lý dữ liệu tốc độ cao và dễ quản lý. NestJS tích hợp mượt mà với Mongoose, hỗ trợ mô hình hóa dữ liệu và quản lý truy vấn hiệu quả.

Ngoài ra, để hỗ trợ chức năng upload ảnh, đồ án sử dụng Cloudinary, một nền tảng lưu trữ và xử lý ảnh trực tuyến, cho phép đồng bộ hóa nhanh chóng với website. CÔNG NGHỆ PHÍA FRONT-END (REACT JS) 1. Định nghĩa React JS React JS là một thư viện JavaScript mã nguồn mở do Facebook phát triển và ra mắt vào năm 2013. Thư viện này được thiết kế để xây dựng giao diện người dùng (UI) bằng cách sử dụng các đoạn mã nhỏ, độc lập được gọi là components.

Hiện nay, React JS rất phổ biến và được ưa chuộng nhờ khả năng hỗ trợ lập trình giao diện một cách hiệu quả và linh hoạt.[1] Ưu điểm của React JS: Tái sử dụng và tổ chức component: React JS cho phép xây dựng các component độc lập và tái sử dụng chúng trong dự án, giúp tối ưu hóa thời gian phát triển. Việc kết hợp các component để tạo ra giao diện hoàn chỉnh giúp quy trình lập trình trở nên đơn giản và nhanh chóng hơn. Hiệu suất cao với Virtual DOM: Reactjs sử dụng Virtual DOM để cải thiện hiệu suất. Thay vì cập nhật toàn bộ DOM, React so sánh sự khác biệt giữa trạng thái cũ và trạng thái mới bằng thuật toán tối ưu, sau đó chỉ cập nhật những phần cần thiết.

Điều này giảm thiểu các thao tác không cần thiết trên DOM, tăng tốc độ xử lý và hiển thị giao diện. 7 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Dễ dàng phân chia công việc: Nhờ cấu trúc component, React giúp việc phân công công việc trở nên thuận tiện. Các thành viên trong nhóm có thể làm việc trên các component riêng biệt mà không lo ảnh hưởng đến mã nguồn của người khác. Dễ dàng nâng cấp và bảo trì: Reactjs cho phép dễ dàng tách riêng các component khi cần sửa lỗi hoặc nâng cấp.

Điều này giúp việc bảo trì và phát triển ứng dụng trở nên đơn giản, đảm bảo rằng những thay đổi chỉ ảnh hưởng đến phần cần thiết mà không làm gián đoạn các phần còn lại. Một số khái niệm liên quan đến React JS  Components Thành phần trong React giúp chia nhỏ giao diện người dùng (UI) thành các phần riêng biệt, dễ quản lý và có thể tái sử dụng. Chúng hoạt động tương tự như các function trong JavaScript, nhưng được thiết kế độc lập với nhiệm vụ chính là trả về mã HTML thông qua phương thức render(). Các thành phần trong React đóng vai trò hướng dẫn thư viện hiển thị nội dung lên màn hình.

Khi dữ liệu thay đổi, React sẽ tự động cập nhật và render lại các thành phần liên quan một cách chính xác và hiệu quả. Trong React, các thành phần được chia thành hai loại chính: Function Components và Class Components, mỗi loại có cách sử dụng và ưu điểm riêng phù hợp với từng nhu cầu phát triển. Thành phần của React JS 8 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Với Function Component: Function Component là một hàm thuần (Pure Function) được sử dụng để khai báo các component trong React. Ban đầu, loại component này chủ yếu được dùng để hiển thị các đoạn HTML thông qua việc render.

Tuy nhiên, Function Component không can thiệp vào vòng đời (Lifecycle) của component, vì vậy nó thường được gọi là Stateless Component.[1] Với Class Component: Class Component trong React được định nghĩa bằng cách tạo một lớp (class) trong JavaScript và mở rộng từ React. Trong Class Component, bắt buộc phải sử dụng phương thức render(), và bên trong phương thức này cần sử dụng return() để trả về giao diện hiển thị dữ liệu. Để sử dụng lại component, có thể xuất nó ra ngoài bằng từ khóa export. Mỗi Class Component có thể nhận các tham số truyền vào được gọi là props.

Các props này giúp component trả về một cấu trúc view theo hệ thống cấp bậc thông qua phương thức render(). Phương thức này sẽ trả về nội dung giao diện mà chúng ta muốn hiển thị trên màn hình. React sau đó sẽ xử lý và hiển thị nội dung dựa trên mô tả này.  Props Props (viết tắt của Properties) là một đối tượng (Object) được truyền vào các component trong React.

Mỗi component có thể nhận props và trả về một phần tử React (React element). Props cho phép các component nhận giá trị thuộc tính từ bên ngoài, đồng thời hỗ trợ giao tiếp giữa các component thông qua việc truyền dữ liệu qua lại. Khi một component cha truyền props cho component con, component con chỉ có thể đọc và sử dụng giá trị này mà không được phép chỉnh sửa trực tiếp. Cách truyền props tương tự như cách thêm thuộc tính (attributes) vào một thẻ HTML.[1] Cú pháp sử dụng như sau: 9 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Hình 3.Cú pháp props trong Class Component và Function Component.

Dữ liệu được truyền thông qua Props: Ví dụ về việc truyền dữ liệu từ component cha xuống component con trong React. Trong phương thức render() của component cha, một giá trị được truyền xuống component con thông qua props. Sau đó, trong phương thức render() của component con, giá trị nhận được từ props sẽ được sử dụng để hiển thị nội dung mà component cha đã truyền xuống.  State State là một phần quan trọng trong component của React, được biểu diễn dưới dạng một object và dùng để lưu trữ dữ liệu hoặc thông tin liên quan đến component.