Xây dựng website bán hàng phụ liệu thủ công cho doanh nghiệp LTHANDMADE

Đồ án xây dựng website bán phụ liệu thủ công cho doanh nghiệp LTHANDMADE - ĐH SPKT TP.HCM

• Tác giả: Lê Minh Tài
• Người hướng dẫn: ThS. Nguyễn Trần Thi Văn
• 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 bán hàng phụ liệu thủ công cho doanh nghiệp LTHANDMADE
• Loại tài liệu: Khóa luận tốt nghiệp
• Năm xuất bản: 2024
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Tổng quan về xây dựng website bán phụ liệu thủ công LTHANDMADE

Ngành kinh doanh phụ liệu thủ công đòi hỏi khả năng quản lý danh mục sản phẩm đa dạng và phức tạp. Doanh nghiệp LTHANDMADE cần một kênh phân phối kỹ thuật số độc lập nhằm mở rộng quy mô tiếp cận thị trường. Dự án xây dựng website bán phụ liệu thủ công cho doanh nghiệp LTHANDMADE thiết lập một hệ thống thương mại điện tử hoàn chỉnh. Nền tảng kết nối trực tiếp nhà sản xuất với nhóm khách hàng cá nhân và các đại lý bán lẻ. Đề tài ứng dụng kiến trúc Client-Server hiện đại, mang lại tính ổn định cao trong vận hành. Giao diện trực quan giúp khách hàng tra cứu nguyên liệu nhanh chóng. Hệ sinh thái số hóa quy trình tiếp nhận đơn hàng, hỗ trợ theo dõi công nợ và lưu trữ lịch sử mua hàng chuẩn xác. Dự án không chỉ giải quyết bài toán tiếp thị trực tuyến mà còn tạo tiền đề cho hoạt động thương mại hóa cá nhân hóa. Các chuẩn mực công nghệ được áp dụng đồng bộ nhằm bảo đảm an toàn dữ liệu và tối ưu hóa năng suất bán hàng.

1.1. Bối cảnh thị trường phụ liệu thủ công

Thị trường sản phẩm thủ công mỹ nghệ ghi nhận tốc độ tăng trưởng nhanh trong giai đoạn chuyển đổi số. Nhu cầu tìm kiếm nguyên phụ liệu chất lượng như len sợi, hạt cườm, vải vóc gia tăng mạnh mẽ. Khách hàng cá nhân lẫn xưởng may gia công đều ưu tiên mua sắm qua các kênh trực tuyến thuận tiện. Phương thức bán lẻ truyền thống qua cửa hàng vật lý bộc lộ nhiều rào cản địa lý. Việc thiếu vắng một không gian trưng bày sản phẩm trực tuyến toàn diện làm suy giảm năng lực cạnh tranh của các đơn vị phân phối. Doanh nghiệp cần đổi mới mô hình bán buôn kết hợp bán lẻ số hóa để tối đa hóa doanh thu và củng cố vị thế.

1.2. Mục tiêu nghiên cứu và phát triển hệ thống

Nghiên cứu tập trung xây dựng một hệ thống bán lẻ trực tuyến hoàn chỉnh cho đơn vị LTHANDMADE. Mục tiêu trọng tâm là tối ưu hóa trải nghiệm duyệt danh mục và đặt mua phụ liệu. Hệ thống đồng thời cung cấp công cụ quản trị kho vận, giảm thiểu tình trạng tồn kho ảo hoặc thất thoát đơn hàng. Đề tài áp dụng các tiêu chuẩn công nghệ mới để hỗ trợ chiến lược quảng bá tiếp thị trực tuyến. Khả năng tự động hóa quy trình nghiệp vụ giúp tiết kiệm thời gian xử lý giao dịch. Giải pháp công nghệ hướng đến sự ổn định, sẵn sàng mở rộng quy mô khi lượng truy cập tăng đột biến trong các mùa kinh doanh cao điểm.

II. Phân tích bài toán quản lý website phụ liệu thủ công LTHANDMADE

Doanh nghiệp bán lẻ phụ liệu thủ công thường đối mặt với thách thức quản lý kho phức tạp. Số lượng mã sản phẩm đa dạng về kích thước, màu sắc và chất liệu gây khó khăn trong khâu kiểm kê. Phương pháp ghi chép thủ công dễ dẫn đến sai sót số liệu đơn hàng và thất thoát tài sản. Tình trạng chênh lệch tồn kho thực tế và sổ sách làm chậm tiến độ giao hàng cho khách. Bên cạnh đó, quá trình xử lý đơn hàng phân tán trên nhiều mạng xã hội tiêu tốn nhân lực trực tổng đài. Doanh nghiệp thiếu công cụ báo cáo tập trung để theo dõi doanh thu và xu hướng tiêu dùng theo thời gian thực. Khách hàng gặp trở ngại khi tìm kiếm sản phẩm phù hợp do thiếu bộ lọc chi tiết. Rủi ro rò rỉ dữ liệu cá nhân trong các giao dịch trực tuyến cũng là rào cản lớn. Việc thiếu hệ thống xác thực tài khoản chặt chẽ khiến website dễ bị tấn công dữ liệu và phát sinh đơn hàng ảo.

2.1. Hạn chế trong quy trình vận hành thủ công

Vận hành kinh doanh bằng sổ sách hoặc bảng tính đơn giản bộc lộ nhiều điểm nghẽn nghiêm trọng. Nhân viên phải cập nhật trạng thái đơn hàng thủ công qua nhiều kênh liên lạc khác nhau. Tốc độ xác nhận đơn hàng chậm trễ làm giảm mức độ hài lòng của người mua. Khâu đóng gói thường xảy ra nhầm lẫn chủng loại do mã phụ liệu quá nhiều chi tiết nhỏ. Việc kiểm đếm tồn kho định kỳ tốn nhiều thời gian và làm gián đoạn bán hàng. Doanh nghiệp khó dự đoán chính xác lượng vật tư cần nhập thêm cho từng thời điểm. Sự thiếu liên kết giữa các bộ phận dẫn đến lãng phí chi phí vận hành đáng kể.

2.2. Yêu cầu bảo mật và trải nghiệm người dùng

Hệ thống thương mại điện tử hiện đại đòi hỏi tiêu chuẩn bảo mật dữ liệu nghiêm ngặt. Người mua hàng trực tuyến quan tâm hàng đầu đến an toàn thông tin thanh toán cá nhân. Nếu không có cơ chế mã hóa mật khẩu và token xác thực, hệ thống dễ bị tấn công mạng. Bên cạnh đó, trải nghiệm giao diện người dùng quyết định tỷ lệ hoàn tất đơn hàng. Giao diện phức tạp hoặc tốc độ tải trang chậm khiến khách hàng nhanh chóng rời bỏ nền tảng. Khách hàng cũng yêu cầu khả năng tương tác trực tiếp và nhận phản hồi tức thì về đặc tính phụ liệu. Do đó, việc xây dựng website phải giải quyết triệt để cả hai khía cạnh này.

III. Giải pháp xây dựng website bán phụ liệu thủ công LTHANDMADE

Dự án triển khai mô hình kiến trúc Client-Server dựa trên nền tảng công nghệ MERN stack mạnh mẽ. Phía máy khách sử dụng thư viện ReactJS kết hợp Ant Design và Headless UI nhằm tạo giao diện trực quan. Thư viện Redux JS quản lý trạng thái ứng dụng đồng bộ, giúp giỏ hàng hoạt động mượt mà. Hệ thống máy chủ vận hành trên nền tảng NodeJS và ExpressJS, xử lý logic nghiệp vụ và định tuyến API nhanh chóng. Cơ sở dữ liệu phi quan hệ MongoDB lưu trữ linh hoạt danh mục phụ liệu thủ công đa dạng. Khâu bảo mật thông tin được đảm bảo nhờ thuật toán Bcrypt mã hóa mật khẩu và thư viện Jwt-decode. Hệ thống xác thực danh tính người dùng thông qua liên kết xác thực gửi qua thư điện tử. Dịch vụ Stripe được tích hợp để giả lập thanh toán thẻ trực tuyến an toàn. Đáng chú ý, dự án tích hợp chatbot thông minh sử dụng API từ OpenAI GPT-4.0 để tư vấn sản phẩm tự động suốt ngày đêm.

3.1. Kiến trúc công nghệ và thư viện hỗ trợ

Kiến trúc phần mềm kết hợp nhiều thư viện chuyên dụng để tối ưu hóa hiệu năng website. Axios chịu trách nhiệm gửi các yêu cầu bất đồng bộ từ giao diện người dùng đến máy chủ. Thư viện Joi hỗ trợ xác thực dữ liệu đầu vào nghiêm ngặt trước khi ghi nhận vào hệ thống. Lodash cung cấp các hàm xử lý mảng và đối tượng phức tạp với hiệu năng cao. Thư viện Moment chuẩn hóa việc phân tích cú pháp và định dạng hiển thị ngày giờ giao dịch. Giao diện trang bị i18n nhằm cung cấp khả năng chuyển đổi đa ngôn ngữ linh hoạt cho người mua. Thư viện Chart hỗ trợ trực quan hóa số liệu kinh doanh trên bảng điều khiển quản trị.

3.2. Tính năng tự động hóa và hỗ trợ AI thông minh

Quy trình bán hàng được tự động hóa tối đa để nâng cao năng suất phục vụ khách hàng. Hệ thống tự động gửi thư điện tử kích hoạt tài khoản và xác nhận chi tiết đơn hàng mới. Trợ lý ảo chatbot vận hành dựa trên công nghệ OpenAI GPT-4.0 hỗ trợ giải đáp thắc mắc chuyên sâu. Khách hàng dễ dàng tra cứu cách phối màu len hoặc lựa chọn phụ kiện hạt cườm phù hợp. Chức năng phân tích biểu đồ giúp ban quản lý nắm bắt biến động tồn kho và doanh số từng thời kỳ. Quy trình xử lý đơn hàng diễn ra khép kín, giảm thiểu đáng kể các sai sót phát sinh từ con người.

IV. Kết luận và ứng dụng website bán phụ liệu thủ công LTHANDMADE

Dự án xây dựng thành công website bán phụ liệu thủ công đáp ứng đầy đủ yêu cầu quản trị của LTHANDMADE. Nền tảng chứng minh tính thực tiễn cao khi kết nối hiệu quả giữa trải nghiệm khách hàng và quản lý doanh nghiệp. Việc áp dụng công nghệ MERN stack mang lại cấu trúc phần mềm mở, bảo đảm tính ổn định và bảo mật cao. Hệ thống giúp doanh nghiệp cắt giảm chi phí nhân sự quản lý đơn hàng truyền thống. Doanh thu bán lẻ phụ liệu thủ công ghi nhận tiềm năng tăng trưởng nhờ mở rộng phạm vi tiếp cận trực tuyến. Nền tảng là bước đệm vững chắc cho các mô hình kinh doanh bán buôn bán lẻ cá thể hóa trong thời đại số. Các công cụ phân tích và báo cáo trực quan hỗ trợ chủ doanh nghiệp đưa ra quyết định kinh doanh chính xác. Dự án khẳng định giá trị ứng dụng của công nghệ thông tin trong việc chuyển đổi số các ngành nghề thủ công mỹ nghệ.

4.1. Hiệu quả thực tiễn cho doanh nghiệp LTHANDMADE

Nền tảng thương mại điện tử giúp LTHANDMADE chuẩn hóa toàn diện quy trình kiểm soát nguồn hàng. Chủ cơ sở quản lý chính xác lượng tồn kho và cập nhật tình trạng đơn hàng tự động. Thời gian giải quyết một giao dịch được rút ngắn đáng kể so với phương thức trao đổi thủ công trước đây. Hệ thống thống kê doanh thu theo thời gian thực giúp người quản lý hoạch định nhập hàng tối ưu. Khách hàng nhận được sự phục vụ liên tục nhờ trợ lý AI phản hồi tự động. Môi trường số hóa tạo lợi thế cạnh tranh bền vững cho thương hiệu phụ liệu trên thị trường. Đồng thời, chi phí vận hành kho bãi và tiếp thị được tối ưu hóa rõ rệt qua từng tháng hoạt động.

4.2. Hướng phát triển và mở rộng trong tương lai

Hệ thống có tiềm năng phát triển mạnh mẽ để phục vụ các mục tiêu kinh doanh dài hạn. Hướng nghiên cứu tiếp theo bao gồm việc tích hợp các cổng thanh toán nội địa phổ biến như VNPay và MoMo. Đội ngũ kỹ thuật có thể xây dựng ứng dụng di động đa nền tảng để gia tăng độ tiện dụng. Thuật toán gợi ý sản phẩm cá nhân hóa bằng học máy sẽ giúp nâng cao tỷ lệ chuyển đổi đơn hàng. Doanh nghiệp cũng có thể mở rộng mô hình sàn giao dịch liên kết với nhiều xưởng sản xuất phụ liệu khác. Việc nâng cấp hạ tầng liên tục bảo đảm tính linh hoạt và khả năng chịu tải của trang web.

Nội dung chính

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

Đề tài "Xây dựng website bán hàng phụ liệu thủ công cho doanh nghiệp LTHANDMADE" được thực hiện bởi sinh viên Lê Minh Tài (MSSV: 20149058) và Trần Thị Phương Linh (MSSV: 20110126), chuyên ngành Công nghệ phần mềm, Khoa Công nghệ Thông tin, Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh, dưới sự hướng dẫn của ThS. Nguyễn Trần Thi Văn và phản biện của TS. Huỳnh Xuân Phụng (khóa học 2020 – 2024).

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

Trong bối cảnh kinh tế số và thị trường mua sắm trực tuyến phát triển mạnh mẽ, việc thiết lập kênh bán hàng qua internet là yêu cầu cấp thiết giúp doanh nghiệp mở rộng quy mô từ địa phương ra toàn quốc và quốc tế. Doanh nghiệp LT HandMade hoạt động trong lĩnh vực cung cấp nguyên phụ liệu thủ công mỹ nghệ. Đối với ngành hàng này, việc quản lý số lượng lớn các chủng loại phụ liệu, thành phần chi tiết và danh mục sản phẩm đòi hỏi một nền tảng chuyên biệt. Ngoài chức năng mua sắm, doanh nghiệp cần một không gian số hóa linh hoạt, cho phép tùy chỉnh danh mục ngành hàng, phân tích số liệu kinh doanh và tạo lập môi trường cộng đồng để khách hàng chia sẻ kinh nghiệm làm đồ thủ công. Vì vậy, nhóm tác giả đã lựa chọn xây dựng website thương mại điện tử chuyên biệt mang tên LT HandMade.

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

Mục tiêu tổng quát của đề tài là xây dựng hoàn chỉnh một nền tảng bán hàng trực tuyến phục vụ người tiêu dùng cuối và hỗ trợ công tác quản trị kinh doanh cho doanh nghiệp LT HandMade. Các nhiệm vụ cụ thể được xác định bao gồm:

1. Xây dựng quy trình tự động hóa các nghiệp vụ: tự động gửi thư điện tử, quản lý đơn hàng và hỗ trợ chăm sóc khách hàng nhằm giảm thiểu sai sót thủ công.
2. Thiết lập công cụ báo cáo và phân tích số liệu kinh doanh, hỗ trợ người quản trị đưa ra quyết định dựa trên dữ liệu vận hành thực tế.
3. Phát triển cửa hàng trực tuyến với đầy đủ tính năng thương mại điện tử: danh mục sản phẩm, giỏ hàng, đặt hàng, quản lý đơn hàng cá nhân và thanh toán trực tuyến.
4. Xây dựng nền tảng giao tiếp và tương tác khách hàng thông qua phân hệ diễn đàn cộng đồng, bài viết chia sẻ kinh nghiệm và hệ thống chatbot hỗ trợ tự động bằng trí tuệ nhân tạo (OpenAI API ChatGPT-4.0).
5. Thực thi các biện pháp bảo mật dữ liệu, mã hóa thông tin nhạy cảm và kiểm soát phân quyền người dùng.

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

• Đối tượng nghiên cứu:
  • Khách hàng cuối: Hành vi mua sắm phụ liệu thủ công trực tuyến, nhu cầu trải nghiệm giao diện và bảo mật giao dịch.
  • Chủ doanh nghiệp và người quản lý LT HandMade: Yêu cầu về quản trị kho hàng phụ liệu, theo dõi vận chuyển, quản lý khách hàng và phân tích báo cáo doanh thu.
  • Công nghệ phần mềm: Nghiên cứu các giải pháp kỹ thuật xây dựng ứng dụng web hiện đại và tích hợp dịch vụ trí tuệ nhân tạo.
• Phạm vi nghiên cứu:
  • Không gian: Áp dụng trực tiếp cho mô hình kinh doanh và quản lý của doanh nghiệp LT HandMade trên môi trường web dành cho máy tính (desktop).
  • Thời gian thực hiện: 15 tuần, từ ngày 09/09/2024 đến ngày 22/12/2024.

---

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

Khung công nghệ và thư viện kỹ thuật

Hệ thống được phát triển theo mô hình Client - Server sử dụng kiến trúc MERN Stack với ngôn ngữ lập trình JavaScript làm nền tảng chủ đạo:

• ReactJS: Thư viện giao diện người dùng mã nguồn mở, hoạt động dựa trên mô hình thành phần (Components - Functional và Class Components), cơ chế Virtual DOM giúp tối ưu hiệu năng render, cú pháp JSX và luồng dữ liệu một chiều (One-Way Data Binding), kết hợp React Router để quản lý điều hướng.
• NodeJS & ExpressJS: Môi trường thực thi JavaScript phía máy chủ trên nền tảng V8 Engine, áp dụng mô hình xử lý bất đồng bộ I/O không chặn (Non-blocking I/O), kiến trúc hướng sự kiện (Event-Driven) đơn luồng nhưng có thể mở rộng thông qua tiến trình con (child processes) và hệ sinh thái thư viện npm.
• MongoDB: Hệ quản trị cơ sở dữ liệu hướng tài liệu (NoSQL Document-Oriented), lưu trữ dữ liệu dưới dạng BSON (Binary JSON), cấu trúc linh hoạt theo Collection, hỗ trợ cơ chế Indexing, sao chép dữ liệu (Replication) và phân mảnh (Sharding).
• Các thư viện và API bổ trợ:
  • Quản lý trạng thái và giao tiếp dữ liệu: Redux JS (quản lý state ứng dụng), Axios (thực hiện HTTP request).
  • Giao diện và trải nghiệm: Ant-design, Headless UI, Heroicons, Animate, Chart (vẽ biểu đồ thống kê), i18next (hỗ trợ hiển thị đa ngôn ngữ Việt - Anh).
  • Xử lý dữ liệu và logic hệ thống: Lodash, Moment (xử lý ngày giờ), Body-parser, Cookie-parser, Joi (xác thực dữ liệu đầu vào).
  • Bảo mật: Jwt-decode, Bcrypt (mã hóa mật khẩu).
  • Dịch vụ tích hợp: Cổng thanh toán giả lập Stripe, trợ lý ảo thông minh sử dụng API mở của ChatGPT-4.0 từ OpenAI.

Phương pháp nghiên cứu và nguồn dữ liệu

• Phương pháp khảo sát hiện trạng: Khảo sát thực tế ba website thương mại điện tử chuyên ngành đồ thủ công, quà tặng và văn phòng phẩm tại Việt Nam để làm căn cứ xác định yêu cầu nghiệp vụ: Tiệm tạp hóa nhà May (tiemtaphoanhamay.vn), Crabit NoteBuck! (crabitnotebuck.vn), và Thiên Long (thienlong.vn).
• Phương pháp mô hình hóa phần mềm: Phân tích và mô hình hóa bằng ngôn ngữ UML, xây dựng các sơ đồ Use Case, Activity Diagram (sơ đồ hoạt động) và Sequence Diagram (sơ đồ tuần tự) cho từng ca sử dụng.
• Phương pháp thiết kế dữ liệu: Xây dựng sơ đồ quan hệ thực thể (ERD) và danh mục bảng chi tiết theo NoSQL MongoDB.
• Nguồn dữ liệu: Yêu cầu vận hành thực tế từ doanh nghiệp LT HandMade và dữ liệu đặc tả hệ thống của các trang web tham chiếu.

---

Thiết kế và triển khai

Hệ thống được thiết kế theo cấu trúc phần mềm hướng dịch vụ web hiện đại, phân tách rõ ràng giữa tầng hiển thị và tầng xử lý nghiệp vụ/dữ liệu.

Kiến trúc tổng thể và cơ sở dữ liệu

• Kiến trúc Client - Server: Phía máy khách (ReactJS) giao tiếp với máy chủ ứng dụng (NodeJS/ExpressJS) thông qua các điểm cuối RESTful API bằng giao thức HTTP/HTTPS được đóng gói bởi Axios.
• Mô hình hóa dữ liệu (ERD): Hệ thống phân tách cấu trúc thực thể thành các nhóm quan hệ tương ứng với các tác nhân:
  • Nhóm thực thể Khách hàng/Thành viên: Lưu trữ thông tin tài khoản (Account), hồ sơ cá nhân, địa chỉ, giỏ hàng, thông tin thanh toán và lịch sử giao dịch.
  • Nhóm thực thể Nghiệp vụ sản phẩm: Phân loại danh mục (Category), sản phẩm (Product), thành phần chi tiết của sản phẩm (Component/Variant) và thuộc tính nguyên phụ liệu.
  • Nhóm thực thể Đơn hàng & Quản trị: Trạng thái đơn đặt hàng, chi tiết đơn mua, biểu đồ doanh thu, cấu hình banner quảng cáo và nội dung diễn đàn cộng đồng.

Các phân hệ giao diện chính

Hệ thống được hiện thực hóa với hai phân hệ giao diện rõ rệt:

1. Giao diện Khách và Thành viên: Trang chủ, thanh điều hướng Header, trang danh mục sản phẩm, trang chi tiết sản phẩm (lựa chọn phân loại, số lượng, thêm giỏ hàng/mua ngay), trang giỏ hàng, quy trình thanh toán qua Stripe, trang quản lý đơn hàng cá nhân, biểu mẫu đăng ký/đăng nhập, trang diễn đàn cộng đồng, trang hoạt động cộng đồng và khung cửa sổ Chatbot AI.
2. Giao diện Quản trị viên (Admin): Menu điều hướng quản trị, bảng thông số điều hành (Dashboard thống kê), giao diện quản lý tài khoản và phân quyền, giao diện quản lý đơn đặt hàng và cập nhật trạng thái đơn, giao diện quản lý danh mục loại sản phẩm, giao diện quản lý sản phẩm và thành phần sản phẩm, giao diện quản trị nội dung cộng đồng và quản lý biểu ngữ quảng cáo.

Kiểm thử hệ thống

Nhóm nghiên cứu tiến hành kiểm thử toàn diện trên hai khía cạnh:

• Kiểm thử chức năng: Xây dựng bảng kịch bản kiểm thử (Test checklist) bao quát toàn bộ 20 ca sử dụng từ đăng ký, đăng nhập, tìm kiếm, đặt hàng, xử lý giỏ hàng đến các chức năng quản trị.
• Kiểm thử an toàn bảo mật:
  • Xác thực người dùng: Kiểm tra tính hợp lệ của JSON Web Token (JWT), thời hạn phiên và mã hóa mật khẩu người dùng bằng thuật toán Bcrypt.
  • Kiểm thử phòng chống XSS (Cross-Site Scripting): Đánh giá khả năng xử lý, lọc bỏ các chuỗi mã JavaScript độc hại trong các trường nhập liệu văn bản (form đăng ký, ô tìm kiếm, bình luận diễn đàn).
  • Kiểm thử phòng chống CSRF (Cross-Site Request Forgery): Kiểm tra cơ chế quản lý Cookie an toàn và tính toàn vẹn của các yêu cầu gửi đến máy chủ.

---

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 việc số hóa mô hình bán lẻ phụ liệu thủ công cho doanh nghiệp LT HandMade; xác định đối tượng nghiên cứu gồm người quản lý, bộ phận tiếp thị, nhân viên kho và người tiêu dùng; phạm vi nghiên cứu chuyên biệt về mặt nghiệp vụ và kỹ thuật trong 15 tuần; nêu bật ý nghĩa khoa học và thực tiễn cùng 3 kết quả dự kiến cần đạt được.

CHƯƠNG 1. CƠ SỞ LÝ THUYẾT

Tập trung làm rõ lý thuyết nền tảng về ngăn xếp công nghệ MERN:

• Phân tích chi tiết thư viện ReactJS: Khái niệm, ưu điểm của Functional Components và Class Components, cơ chế hoạt động của Virtual DOM giúp tối ưu quá trình render, cú pháp JavaScript XML (JSX) và tính tương thích với React Native.
• Phân tích môi trường NodeJS: Nền tảng V8 Engine của Google Chrome, các đặc điểm then chốt như Non-blocking I/O, mô hình kiến trúc Event-Driven, cơ chế Single-threaded và hệ quản lý gói npm.
• Phân tích hệ quản trị cơ sở dữ liệu MongoDB: Cấu trúc tài liệu BSON, tổ chức Collection, gán Document ID tự động, khả năng đánh Index, mở rộng ngang (Horizontal Scaling), cơ chế Replication và Sharding.
• Luận giải tính ưu việt khi phối hợp MERN Stack: Xuyên suốt ngôn ngữ JavaScript từ máy khách đến máy chủ, tương thích dữ liệu dạng JSON/BSON và năng lực hỗ trợ xử lý dữ liệu thời gian thực.

CHƯƠNG 2. KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

Phần này tiến hành đánh giá chi tiết 3 website thực tế làm cơ sở đặc tả yêu cầu:

Tiêu chí khảo sát	Tiệm tạp hóa nhà May	Crabit NoteBuck!	Thiên Long
Thanh Header/Menu	Tìm kiếm, liên hệ, tài khoản, giỏ hàng, phân loại	Tìm kiếm, liên hệ, giỏ hàng, tài khoản, phân loại	Tìm kiếm, liên hệ, giỏ hàng, tài khoản, menu ngành hàng
Trang chủ	Slide nổi bật, sản phẩm tiêu biểu, bài đăng blog	Slide bộ sưu tập, quầy thông báo, chính sách vận chuyển	Danh sách sản phẩm, slide sự kiện, ưu đãi, sản phẩm mới
Trang chi tiết sản phẩm	Thông tin, chọn loại, số lượng, mua ngay, sản phẩm liên quan	Thông tin, số lượng, voucher, sản phẩm tương tự, đã xem	Mô tả, chọn loại, số lượng, đánh giá sản phẩm, sản phẩm cùng loại
Khối nội dung phụ trợ	Chuyên mục kiến thức thủ công, workshop	Đăng ký thành viên qua email, theo dõi đổi trả	Cẩm nang ưu đãi, phân loại hội viên, hỗ trợ hotline

Từ kết quả khảo sát, chương 2 xác lập hệ thống yêu cầu gồm 3 bảng phân loại:

1. Yêu cầu nghiệp vụ: Gồm 20 chức năng chia theo 3 nhóm tác nhân (Khách, Thành viên, Quản trị viên), bao gồm chức năng Landing page đa ngôn ngữ (VI + EN), Diễn đàn người dùng (đăng bài, bình luận, thả cảm xúc), Chatbot AI và Dashboard quản lý doanh thu.
2. Yêu cầu hệ thống: Cơ chế phân quyền chi tiết cho 3 vai trò; Xác thực người dùng (đảm bảo tính duy nhất một tài khoản gắn liền với một vai trò); Quản lý và xử lý ngoại lệ/thông báo lỗi.
3. Yêu cầu phi chức năng: Gồm 4 tiêu chí cốt lõi: Tính dễ sử dụng; Tính đúng đắn (thông tin chính xác, hợp lệ, tuân thủ khuôn khổ pháp luật); Khả năng mở rộng quy mô hệ thống; Khả năng bảo mật thông tin (không chia sẻ dữ liệu cho bên thứ ba).

CHƯƠNG 3. MÔ HÌNH HOÁ YÊU CẦU

Xây dựng mô hình hóa chức năng bằng hệ thống sơ đồ UML:

• Thiết lập lược đồ Use Case tổng quát cho Quản trị viên, Khách và Thành viên.
• Đặc tả chi tiết 19 Use Case nghiệp vụ kèm theo Biểu đồ hoạt động (Activity Diagram) và Biểu đồ tuần tự (Sequence Diagram), tiêu biểu như ca sử dụng UC.01 (Chức năng đăng ký):

Thuộc tính Use Case	Nội dung đặc tả (Trích xuất từ UC.01 - Đăng ký)
Mã Use Case	UC.01
Đối tượng tác động	Khách (người dùng chưa đăng nhập)
Tiền điều kiện	Truy cập thành công vào website LT HandMade; tài khoản muốn tạo chưa tồn tại
Hậu điều kiện	Tài khoản được tạo thành công và kích hoạt qua liên kết email
Luồng sự kiện cơ bản	1. Nhấn biểu tượng tài khoản trên thanh menu. 2. Chọn tab "Đăng ký". 3. Nhập email, họ tên, số điện thoại, mật khẩu, xác nhận mật khẩu (địa chỉ không bắt buộc). 4. Nhấn "Đăng ký". 5. Hệ thống gửi thư xác thực. 6. Người dùng kích hoạt qua liên kết trong email. 7. Hệ thống hoàn tất kích hoạt.
Ràng buộc dữ liệu vào	Mật khẩu trên 8 ký tự, gồm số, chữ hoa, chữ thường và ký tự đặc biệt; email nhận mã duy nhất; liên kết kích hoạt mới nhất có hiệu lực, liên kết cũ bị hủy.

• Danh sách các ca sử dụng còn lại được đặc tả chi tiết gồm: Đăng nhập, Đăng xuất, Xem sản phẩm, Tìm sản phẩm, Thêm vào giỏ hàng, Quản lý giỏ hàng, Thanh toán đơn hàng, Quản lý đơn hàng cá nhân, Cộng đồng, Cập nhật thông tin, Đổi mật khẩu, Quên mật khẩu, Quản lý tài khoản, Quản lý đơn hàng, Quản lý loại sản phẩm, Quản lý sản phẩm, Quản lý thành phần sản phẩm, Quản lý cộng đồng, Quản lý quảng cáo.

CHƯƠNG 4. THIẾT KẾ HỆ THỐNG

Trình bày thiết kế trực quan thông qua danh mục bảng mô tả chi tiết từng thành phần giao diện người dùng và quản trị viên; cấu hình kết nối cơ sở dữ liệu MongoDB; thiết lập môi trường Back-end (ExpressJS) và Front-end (ReactJS); quy trình kiểm thử chức năng và đánh giá an toàn hệ thống (JWT, Bcrypt, XSS, CSRF).

PHẦN KẾT LUẬN

Tổng kết các kết quả đạt được sau 15 tuần thực hiện trên ba phương diện nghiệp vụ, công nghệ và kỹ năng mềm; tổng hợp danh mục chức năng hoàn thành; phân tích ưu điểm, nhược điểm hiện tại và xác định các hướng nghiên cứu mở rộng trong tương lai.

---

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

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

• Về mặt nghiệp vụ: Nhóm tác giả hoàn thành việc số hóa quy trình kinh doanh phụ liệu thủ công cho doanh nghiệp LT HandMade, thiết lập hệ thống bán hàng khép kín từ khâu trưng bày, tìm kiếm sản phẩm, quản lý giỏ hàng đến thanh toán và tra cứu đơn cá nhân. Phân hệ quản trị cho phép theo dõi doanh thu thông qua biểu đồ trực quan, quản trị tài khoản, kiểm soát trạng thái đơn hàng và tùy chỉnh linh hoạt danh mục, thành phần sản phẩm.
• Về mặt công nghệ:
  • Ứng dụng thành công ngăn xếp MERN Stack (ReactJS, NodeJS, ExpressJS, MongoDB), đảm bảo tính đồng bộ mã nguồn bằng ngôn ngữ JavaScript.
  • Tích hợp cổng thanh toán trực tuyến mô phỏng thông qua Stripe API.
  • Tích hợp thành công trợ lý ảo tư vấn tự động ứng dụng OpenAI API của ChatGPT-4.0.
  • Hỗ trợ giao diện đa ngôn ngữ (Tiếng Việt và Tiếng Anh) thông qua thư viện i18next.
  • Triển khai cơ chế bảo mật xác thực với Bcrypt, mã hóa token bằng Jwt-decode, kiểm tra phòng chống tấn công XSS và CSRF.
• Về mặt kỹ năng mềm: Rèn luyện kỹ năng phân tích thiết kế hệ thống phần mềm bằng chuẩn UML, kỹ năng lập trình web hiện đại và làm việc nhóm trong thời gian biểu 15 tuần.

Đóng góp so với các hệ thống hiện trạng

So với ba nền tảng được khảo sát (Tiệm tạp hóa nhà May, Crabit NoteBuck!, Thiên Long vốn chỉ tập trung thuần túy vào bán lẻ sản phẩm), website LT HandMade đem lại các điểm cải tiến:

• Tích hợp phân hệ diễn đàn cộng đồng ngay trên website thương mại điện tử, cho phép thành viên đăng bài, bình luận và bày tỏ cảm xúc nhằm tăng mức độ gắn kết khách hàng.
• Ứng dụng mô hình trí tuệ nhân tạo (ChatGPT-4.0) vào hệ thống chăm sóc khách hàng tự động, hỗ trợ giải đáp thắc mắc người dùng ngay trên giao diện web.
• Cho phép quản trị viên tùy biến sâu các cấu trúc danh mục và thành phần chi tiết của ngành hàng phụ liệu trực tiếp từ bảng điều khiển quản trị.

---

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

Hạn chế của đề tài

Theo tự đánh giá của nhóm tác giả, đồ án còn tồn tại các giới hạn sau:

• Khung thời gian thực hiện bị giới hạn trong 15 tuần cùng nền tảng kiến thức thực tế của sinh viên còn hạn chế trong việc triển khai một dự án phần mềm doanh nghiệp quy mô lớn.
• Thiết kế giao diện hiện tại chủ yếu tập trung tối ưu hóa cho màn hình máy tính (desktop), chưa phát triển ứng dụng di động độc lập hoặc tinh chỉnh responsive toàn diện trên các thiết bị màn hình nhỏ.
• Chức năng thanh toán trực tuyến hiện dừng lại ở mức độ giả lập qua Stripe Sandbox, chưa kết nối trực tiếp với các cổng thanh toán nội địa phổ biến tại Việt Nam.

Hướng phát triển tiếp theo

• Phát triển phiên bản ứng dụng di động đa nền tảng (sử dụng React Native dựa trên nền tảng ReactJS sẵn có) để nâng cao trải nghiệm mua sắm trên điện thoại thông minh.
• Hoàn thiện tích hợp các cổng thanh toán trực tuyến chính thức tại Việt Nam (như VNPay, MoMo, ZaloPay).
• Nâng cấp và đào tạo chuyên sâu mô hình Chatbot AI dựa trên dữ liệu sản phẩm nội bộ của LT HandMade nhằm đưa ra các gợi ý tư vấn chuẩn xác hơn cho từng kỹ thuật làm đồ thủ công.
• Tối ưu hóa hiệu năng cơ sở dữ liệu MongoDB thông qua cơ chế sharding nâng cao khi lượng tài liệu và người dùng tăng trưởng mạnh.

---

Giá trị tham khảo

Báo cáo khóa luận tốt nghiệp này có giá trị tham khảo thiết thực cho các đối tượng sau:

• Sinh viên ngành Công nghệ phần mềm và Công nghệ thông tin: Là tài liệu tham khảo chi tiết về quy trình xây dựng đồ án tốt nghiệp chuyên ngành phần mềm, từ việc khảo sát thực tế, phân tích yêu cầu nghiệp vụ đến mô hình hóa toàn diện bằng hệ thống biểu đồ UML (Use Case, Activity, Sequence Diagrams).
• Lập trình viên phát triển web với MERN Stack: Cung cấp mẫu thiết kế hệ thống thực tế kết hợp ReactJS, NodeJS, ExpressJS và MongoDB; cách tổ chức thư viện bổ trợ (Redux, Axios, Ant-design, i18next, Bcrypt, Joi) và quy trình tích hợp API của bên thứ ba (Stripe, OpenAI ChatGPT-4.0).
• Doanh nghiệp vừa và nhỏ ngành hàng bán lẻ thủ công: Cung cấp mô hình tham chiếu về việc chuyển đổi số gian hàng, quản lý danh mục phụ liệu đặc thù và giải pháp xây dựng cộng đồng khách hàng trung thành trên nền tảng web.

---

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

1. Hệ thống website LT HandMade sử dụng công nghệ cốt lõi nào cho phía Front-end và Back-end?
Website được phát triển trên kiến trúc MERN Stack với ngôn ngữ lập trình JavaScript. Phía Front-end sử dụng thư viện ReactJS kết hợp Redux quản lý trạng thái, Ant-design và Headless UI thiết kế giao diện; phía Back-end xây dựng trên nền tảng NodeJS với framework ExpressJS và hệ quản trị cơ sở dữ liệu NoSQL MongoDB.

2. Trợ lý ảo tư vấn khách hàng trên website được triển khai bằng giải pháp kỹ thuật nào?
Hệ thống chatbot hỗ trợ khách hàng được xây dựng bằng cách tích hợp trực tiếp API mở (Open API) của mô hình ChatGPT-4.0 do OpenAI cung cấp, cho phép phản hồi tự động các thắc mắc của người dùng trên giao diện web.

3. Đề tài đã khảo sát những hệ thống thực tế nào để đưa ra yêu cầu chức năng?
Nhóm tác giả đã tiến hành khảo sát và phân tích hiện trạng giao diện, quy trình mua sắm và tính năng phụ trợ của 3 trang web thực tế tại Việt Nam gồm: Tiệm tạp hóa nhà May (tiemtaphoanhamay.vn), Crabit NoteBuck! (crabitnotebuck.vn), và Thiên Long (thienlong.vn).

4. Quy trình đăng ký tài khoản mới (Use Case UC.01) yêu cầu những thông tin và ràng buộc gì?
Người dùng phải cung cấp email, họ tên, số điện thoại, mật khẩu và xác nhận mật khẩu (địa chỉ không bắt buộc). Mật khẩu phải có độ dài trên 8 ký tự, bao gồm chữ hoa, chữ thường, chữ số và ký tự đặc biệt. Sau khi gửi thông tin, hệ thống gửi email kích hoạt và người dùng phải xác thực thông qua liên kết mới nhất được gửi đến hộp thư.

5. Hệ thống đã tiến hành những bài thử nghiệm bảo mật nào?
Hệ thống đã triển khai thử nghiệm trên ba phương diện bảo mật: kiểm tra cơ chế xác thực người dùng bằng mã hóa mật khẩu Bcrypt và định danh qua JSON Web Token (JWT); kiểm tra phòng chống tấn công chèn mã độc Cross-Site Scripting (XSS); và kiểm tra ngăn chặn tấn công giả mạo yêu cầu Cross-Site Request Forgery (CSRF).

---

Kết luận

Khóa luận tốt nghiệp "Xây dựng website bán hàng phụ liệu thủ công cho doanh nghiệp LTHANDMADE" của hai tác giả Lê Minh Tài và Trần Thị Phương Linh đã giải quyết trọn vẹn bài toán số hóa quy trình kinh doanh nguyên phụ liệu thủ công trong thời gian 15 tuần. Đề tài vận dụng hiệu quả kiến trúc công nghệ MERN Stack hiện đại, kết hợp thành công các giải pháp thanh toán trực tuyến qua Stripe và trí tuệ nhân tạo ChatGPT-4.0 nhằm nâng cao trải nghiệm người dùng. Báo cáo đồ án được xây dựng khoa học với hệ thống mô hình hóa UML và đặc tả kỹ thuật chi tiết, trở thành tài liệu tham khảo có giá trị cao cho sinh viên kỹ thuật phần mềm và các nhà phát triển ứng dụng thương mại điện tử.

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

PHẦN MỞ ĐẦU 1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI Việc xây dựng một website bán hàng và chuyển đối số cho doanh nghiệp là một nhiệm vụ cực kỳ cấp thiết trong thời đại công nghệ ngày nay. Trong bối cảnh thị trường ngày càng cạnh tranh và người tiêu dùng ngày càng chú trọng đến trải nghiệm mua sắm trực tuyến, việc có một gian hàng trực tuyến không chỉ là lợi thế mà còn là yếu tố quyết định đến sự thành công của doanh nghiệp. Ngoài ra, một trang web bán hàng mở rộng phạm vi thị trường của doanh nghiệp, cho phép tiếp cận khách hàng không chỉ ở cấp địa phương mà còn ở mức quốc tế.

Đồng thời, khả năng theo dõi và phân tích thông tin từ website cung cấp dữ liệu quý báu để doanh nghiệp hiểu rõ hơn về nhu cầu và mong muốn của khách hàng. Nhờ đó, doanh nghiệp có thể điều chỉnh chiến lược kinh doanh, nâng cao chất lượng sản phẩm và dịch vụ để đáp ứng đúng đắn nhu cầu thị trường. Ngoài ra, việc tích hợp thêm tính năng cộng đồng sẽ giúp xây dựng một nền tảng khách hàng vững chắc cho doanh nghiệp cũng như là cầu nối giúp đưa website cũng như doanh nghiệp phát triển mạnh hơn trong phân khúc khách hàng cùng ngành. Hơn thế nữa, LT mang đến một môi trường số hóa linh hoạt với khả năng tùy chỉnh danh mục và thuộc tính ngành hàng trực tiếp trên website, giúp doanh nghiệp dễ dàng điều chỉnh theo từng lĩnh vực kinh doanh.

LT hỗ trợ khách hàng trên mọi chặng đường phát triển doanh nghiệp và đáp ứng linh hoạt nhu cầu của mọi ngành hàng mà doanh nghiệp hướng tới. Tóm lại, việc tạo dựng một website bán hàng không chỉ là một bước quan trọng mà còn là một chiến lược đầu tư thông minh, giúp doanh nghiệp vươn lên trong thế giới kinh doanh ngày nay. Đó là lý do nhóm quyết định xây dựng website LT HandMade – Một website bán phụ liệu thủ công cho doanh nghiệp. ĐỐI TƯỢNG NGHIÊN CỨU Đề tài hướng đến nghiên cứu một loạt đối tượng quan trọng trong hệ thống kinh doanh trực tuyến.

Đối tượng chính của nghiên cứu bao gồm các doanh nghiệp và chủ Trang 1 PHẦN MỞ ĐẦU doanh nghiệp có ý định phát triển mô hình bán hàng trực tuyến, tập trung vào người quản lý website và marketing, những người giữ vai trò quan trọng trong việc xây dựng chiến lược trực tuyến và thu hút khách hàng. Ngoài ra, đề tài cũng xem xét người tiêu dùng và khách hàng, nhằm đánh giá hành vi mua sắm trực tuyến và thu thập phản hồi về trải nghiệm người dùng. LT HandMade được xây dựng là một môi trường mua sắm trực tuyến nhầm số hóa hoạt động kinh doanh của doanh nghiệp và kết nối với khách hàng một cách thông minh hơn. PHẠM VI NGHIÊN CỨU Đề tài tập trung vào việc nghiên cứu và phát triển một trang web chuyên biệt để hỗ trợ kinh doanh của doanh nghiệp LT HandMade.

Phạm vi nghiên cứu bao gồm: ● Chủ doanh nghiệp và người quản lý: o Nghiên cứu, xác định yêu cầu và mong muốn của chủ doanh nghiệp và người quản lý LT HandMade đối với trang web. o Nghiên cứu về cách hệ thống có thể giúp nhân viên và người quản lý kho LT HandMade dễ dàng theo dõi và quản lý lượng lớn phụ liệu thủ công một cách hiệu quả. o Xem xét các yêu cầu đặc biệt của LT HandMade và tùy chỉnh chức năng trang web để đáp ứng nhu cầu cụ thể của doanh nghiệp, bao gồm quản lý đơn đặt hàng, theo dõi vận chuyển và quản lý khách hàng. ● Khách hàng cuối: o Nghiên cứu tập trung vào khách hàng thực sự của LT HandMade.

Phân tích, nắm bắt nhu cầu mua sắm, sở thích và mong muốn của họ để tạo ra một trang web thân thiện và đáp ứng nhu cầu khách hàng. o Tập trung vào triển khai biện pháp bảo mật mạnh mẽ để bảo vệ thông tin cá nhân của khách hàng và giao dịch thanh toán trực tuyến. ● Công nghệ và phần mềm: o Nghiên cứu các công nghệ và phần mềm phù hợp với mục đích xây dựng trang thương mại số hóa cho cửa hàng. o Phân tích các tính năng cấp thiết của đề tài, các tính năng đặc biệt , tính năng tối quan trọng và khả năng hệ thống dữ liệu của đề tài.

Trang 2 PHẦN MỞ ĐẦU Phân tích theo đối tượng nghiên cứu sẽ giúp tập trung vào các khía cạnh cụ thể của mỗi nhóm, đồng thời đảm bảo rằng cả trải nghiệm khách hàng và quản lý doanh nghiệp đều được cân nhắc đầy đủ trong quá trình phát triển trang web. MỤC TIÊU CỦA ĐỀ TÀI Việc xây dựng một trang web bán hàng hiệu quả cho doanh nghiệp LT HandMade giúp tăng cường trải nghiệm mua sắm cho khách hàng và hỗ trợ quản lý kinh doanh. Đồng thời, xây dựng hệ thống quản lý kho, và hỗ trợ chiến lược tiếp thị trực tuyến để nâng cao hiệu suất kinh doanh của doanh nghiệp. Đây cũng là bước đệm cho phát triển thương mại onl mang tính cá thể hóa không chỉ dành cho các thương hiệu lớn mà rộng rãi hơn đến các nhà buôn bán sỉ lẻ khác.

Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN Đề tài không chỉ có ý nghĩa khoa học trong việc nghiên cứu và áp dụng các nguyên lý thiết kế giao diện, quản lý kho mà còn chú trọng vào thực tiễn để tạo ra một giải pháp có thể áp dụng ngay trong môi trường kinh doanh. Qua việc áp dụng chiến lược tiếp thị trực tuyến, đề tài hướng đến việc thu hút lượng lớn khách hàng và tối ưu hóa hiệu suất kinh doanh. Đối với chủ doanh nghiệp LT HandMade, việc áp dụng đào tạo và hỗ trợ kỹ thuật dựa trên nghiên cứu sẽ giúp họ sử dụng trang web một cách hiệu quả, đồng thời đánh giá hiệu suất liên tục dựa trên phản hồi người dùng sẽ định hình và cải thiện trải nghiệm mua sắm trực tuyến. KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC • Xây dựng được một nền tảng mua bán trực tuyến với đầy đủ các chức năng phục vụ khách hàng cuối.

Đồng thời hỗ trợ custom cho doanh nghiệp, thông qua đó số hoá linh hoạt kinh doanh của doanh nghiệp với nhiều ngành nghề. • Thiết kế giao diện website trực quan, dễ sử dụng, dùng trên máy tính Trang 3 PHẦN MỞ ĐẦU • Hiểu biết rõ hơn về việc nghiệp vụ của quản lý hàng hóa, đơn hàng, tạo đơn hàng và thanh toán trực tuyến Trang 4 ChƯƠNG 1: CƠ SỞ LÝ THUYẾT PHẦN NỘI DUNG CHƯƠNG 1. ReactJS là gì? ReactJS là một thư viện JavaScript mã nguồn mở được phát triển và duy trì bởi Facebook. Nó được sử dụng chủ yếu để xây dựng giao diện người dùng tương tác và động trong các ứng dụng web.

ReactJS tập trung vào việc tạo ra các thành phần (components) tái sử dụng và quản lý trạng thái ứng dụng một cách hiệu quả. Một số đặc điểm quan trọng của ReactJS bao gồm: • Components: React chia giao diện người dùng thành các thành phần độc lập, có thể được xây dựng và tái sử dụng một cách linh hoạt. • Virtual DOM: React sử dụng Virtual DOM để cập nhật hiệu suất bằng cách giả lập một biểu diễn ảo của DOM và chỉ cập nhật những phần thay đổi thực sự. • JavaScript XML: JSX là một cú pháp mở rộng của JavaScript, cho phép viết mã HTML trong JavaScript, giúp tạo ra mã nguồn dễ đọc và hiểu.

• One-Way Data Binding: Dữ liệu chuyển động một chiều từ thành phần cha đến thành phần con, giúp quản lý trạng thái ứng dụng một cách dễ dàng. • React Router: Thư viện này giúp quản lý điều hướng trong ứng dụng React, định rõ cách các thành phần sẽ hiển thị dựa trên URL hiện tại. ReactJS đã trở thành một công cụ phổ biến trong cộng đồng phát triển web và được sử dụng rộng rãi để xây dựng các ứng dụng web động, đặc biệt là trong các dự án lớn và phức tạp. Lý do ReactJS được sử dụng rộng rãi ReactJS trở thành một trong những thư viện JavaScript phổ biến nhất và được sử dụng rộng rãi trong cộng đồng phát triển web với nhiều lý do quan trọng.

• Một trong những lý do chính là khả năng tái sử dụng cao thông qua khái niệm "components" (thành phần). ReactJS cho phép phát triển viên xây Trang 5 ChƯƠNG 1: CƠ SỞ LÝ THUYẾT dựng các thành phần độc lập có thể tái sử dụng, giúp tăng tính linh hoạt và giảm sự lặp lại trong mã nguồn. • Virtual DOM là một ưu điểm quan trọng khác của ReactJS. Việc sử dụng Virtual DOM giúp tối ưu hóa hiệu suất bằng cách giả lập DOM thực tế và chỉ cập nhật những phần thay đổi thực sự, giảm tải cho DOM và tăng cường tốc độ làm mới giao diện người dùng.

• Mô hình ràng buộc dữ liệu một chiều của ReactJS giúp kiểm soát trạng thái ứng dụng một cách dễ dàng và hiệu quả. Thêm vào đó, JSX, cú pháp mở rộng của JavaScript, mang lại sự rõ ràng và dễ đọc trong việc xây dựng giao diện. • Cộng đồng mạnh mẽ của ReactJS với nhiều tài nguyên, từ tài liệu đến các thư viện hỗ trợ, cũng đóng vai trò quan trọng trong sự phổ biến của nó. Sự hỗ trợ và đầu tư từ các công ty lớn như Facebook, cùng với khả năng phát triển ứng dụng di động thông qua React Native, làm cho ReactJS trở thành lựa chọn ưa thích trong cộng đồng phát triển web hiện đại.

Chi tiết hơn về ReactJS • Components: "Components" (thành phần) là khối xây dựng cơ bản của giao diện người dùng, là các phần tử độc lập có thể được tái sử dụng. Mỗi thành phần có thể chứa mã HTML, logic JavaScript, và có thể quản lý trạng thái riêng của mình. Thành phần giúp tách biệt giao diện thành các phần nhỏ hơn, dễ quản lý và phát triển. Có hai loại thành phần chính trong React: • Functional Components (Thành Phần Hàm): Hình 2.

Ví dụ Functional Components Đây là thành phần được định nghĩa bằng cách sử dụng hàm JavaScript. Chúng thường chỉ nhận đầu vào (props) và trả về một đoạn mã JSX để render. Trang 6 ChƯƠNG 1: CƠ SỞ LÝ THUYẾT • Class Components (Thành Phần Lớp): Hình 2. Ví dụ về Class Components Thành phần lớp là các đối tượng JavaScript được tạo từ lớp React.

Chúng có thể có trạng thái (state) và có nhiều phương thức lifecycle mà bạn có thể sử dụng để kiểm soát quá trình render và cập nhật của thành phần. Cả hai loại thành phần đều có thể nhận đầu vào từ "props" (thuộc tính) và render ra các phần tử JSX. Sự sử dụng linh hoạt giữa các thành phần giúp tạo ra một cấu trúc ứng dụng rõ ràng và dễ bảo trì trong ReactJS.