Xây dựng website bán sản phẩm công nghệ sử dụng Golang và ReactJS

Khóa luận xây dựng website bán sản phẩm công nghệ bằng Golang và ReactJS Trường ĐH Sư phạm Kỹ thuật TP.HCM

• Tác giả: Hoàng Nhựt Khánh Ngân
• Người hướng dẫn: TS. Lê Văn Vinh
• 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 sản phẩm công nghệ sử dụng Golang và ReactJS
• Loại tài liệu: Khóa luận tốt nghiệp
• Năm xuất bản: 2024
• Địa điểm: Hồ Chí Minh

Tóm tắt

I. Tổng quan đề tài website bán sản phẩm công nghệ tại ĐH SPKT TPHCM

Đề tài nghiên cứu được thực hiện tại Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh bởi nhóm sinh viên Khoa Công nghệ Thông tin dưới sự hướng dẫn của Tiến sĩ Lê Văn Vinh. Mục tiêu trọng tâm là thiết kế nền tảng thương mại điện tử chuyên biệt cho các thiết bị kỹ thuật số. Thị trường công nghệ đòi hỏi website phải xử lý danh mục sản phẩm phức tạp. Nền tảng cần quản lý thông số kỹ thuật đa dạng cùng lưu lượng truy cập cao. Dự án lựa chọn kết hợp hai công nghệ tiêu biểu gồm Golang cho phía máy chủ và ReactJS cho phía máy khách. Sự kết hợp này mang lại giải pháp cân bằng giữa năng lực xử lý dữ liệu và trải nghiệm người dùng tương tác cao. Hệ thống thương mại điện tử đáp ứng đầy đủ chu trình mua sắm từ duyệt danh mục, tra cứu chi tiết linh kiện đến quản lý đơn hàng. Kiến trúc hướng dịch vụ giúp dự án đạt tính mô-đun hóa cao, dễ dàng bảo trì và mở rộng trong tương lai. Đồ án thể hiện năng lực ứng dụng công nghệ hiện đại vào bài toán thực tiễn của sinh viên tốt nghiệp ngành công nghệ phần mềm.

1.1. Bối cảnh và mục tiêu khóa luận tốt nghiệp

Ngành bán lẻ công nghệ trực tuyến tại Việt Nam phát triển nhanh chóng. Khách hàng đòi hỏi tốc độ tải trang cao và thông tin sản phẩm chuẩn xác. Những website truyền thống thường gặp khó khăn khi số lượng người truy cập tăng đột biến. Khóa luận tốt nghiệp tại ĐH SPKT TPHCM tập trung nghiên cứu giải pháp khắc phục hạn chế này. Mục tiêu chính là xây dựng một hệ thống bán hàng vận hành ổn định. Ứng dụng cung cấp đầy đủ nghiệp vụ thương mại điện tử hiện đại. Nền tảng hỗ trợ tìm kiếm sản phẩm thông minh, gợi ý linh kiện và theo dõi tình trạng đơn hàng thời gian thực. Đề tài chứng minh khả năng áp dụng lý thuyết công nghệ phần mềm vào môi trường kinh doanh thực tế.

1.2. Phạm vi và các đối tượng sử dụng hệ thống

Phạm vi đồ án tập trung vào sàn thương mại điện tử chuyên kinh doanh thiết bị kỹ thuật số. Hệ thống phân định rõ ràng hai nhóm tác nhân chính gồm khách hàng và quản trị viên. Khách hàng vãng lai có thể duyệt danh mục, xem cấu hình máy tính và tìm kiếm sản phẩm. Người dùng có tài khoản được sử dụng tính năng giỏ hàng, danh sách yêu thích và so sánh thông số kỹ thuật. Khách hàng dễ dàng tạo đơn hàng, thanh toán trực tuyến và đánh giá chất lượng sản phẩm. Quản trị viên nắm quyền điều hành toàn bộ dữ liệu nghiệp vụ. Phân hệ quản trị bao gồm quản lý kho hàng, danh mục thương hiệu, đơn hàng và các chiến dịch khuyến mãi. Hệ thống tự động gửi email xác nhận ngay sau khi khách hàng hoàn tất đặt hàng.

II. Phân tích thách thức hiệu năng khi xây dựng website bán công nghệ

Website thương mại điện tử trong ngành công nghệ đối mặt với nhiều rào cản kỹ thuật khắt khe. Dữ liệu phần cứng máy tính và điện thoại chứa hàng chục thuộc tính chi tiết. Việc hiển thị và lọc danh mục đòi hỏi tài nguyên tính toán lớn từ cả phía máy chủ lẫn trình duyệt. DOM thực biểu diễn giao diện web dưới dạng cây cấu trúc. Mỗi khi dữ liệu thay đổi, trình duyệt buộc phải vẽ lại phần tử cùng toàn bộ nhánh con liên quan. Thao tác này tiêu tốn nhiều thời gian và gây sụt giảm tốc độ khung hình. Nếu giao diện chứa hàng nghìn linh kiện, hiện tượng trễ phản hồi xuất hiện rõ rệt. Ngoài ra, lưu lượng người truy cập tăng đột ngột trong các đợt khuyến mãi dễ gây nghẽn cổ chai cơ sở dữ liệu. Nguy cơ lỗi xử lý giao dịch hoặc chậm phản hồi API vượt mức cho phép luôn đe dọa sự ổn định của hệ thống. Những thách thức này đòi hỏi kiến trúc phần mềm phải tách biệt độc lập giữa tầng giao diện và tầng logic dữ liệu. Việc tối ưu hóa quy trình kết xuất giao diện trở thành yếu tố quyết định sự hài lòng của người dùng.

2.1. Hạn chế về tốc độ render của DOM thực

DOM đại diện cho cấu trúc cây tài liệu trên trang web. Khi người dùng thao tác lọc sản phẩm công nghệ hoặc chuyển đổi trang, cây DOM cần cập nhật trạng thái liên tục. Cơ chế hoạt động của DOM thực buộc trình duyệt vẽ lại phần tử thay đổi cùng toàn bộ các nút con phụ thuộc. Hành động render lặp đi lặp lại tạo ra gánh nặng xử lý lớn cho phần cứng người dùng. Trình duyệt dễ bị đóng băng khi danh mục hiển thị đồng thời hàng trăm thiết bị cùng thông số kỹ thuật phức tạp. Trải nghiệm duyệt web trở nên giật lag và giảm khả năng giữ chân khách hàng. Đây là hạn chế kỹ thuật lớn nhất mà các nền tảng thương mại truyền thống gặp phải.

2.2. Các yêu cầu phi chức năng nghiêm ngặt

Đồ án tốt nghiệp tại ĐH SPKT TPHCM đặt ra chuẩn mực phi chức năng rất cụ thể nhằm bảo đảm tính sẵn sàng. Thời gian phản hồi của các cổng giao tiếp API phải duy trì dưới 5 giây. Tỉ lệ xảy ra sự cố kỹ thuật trong quá trình vận hành phải kiểm soát nghiêm ngặt dưới 5%. Hệ thống yêu cầu độ chính xác dữ liệu giao dịch với tỉ lệ sai số không vượt quá 0.05%. Mọi tương tác thay đổi cơ sở dữ liệu đều bắt buộc thực hiện qua giao thức POST nhằm tăng cường bảo mật. Ứng dụng phải tương thích hoàn hảo trên các trình duyệt hiện đại phổ biến. Ngoài ra, kiến trúc phần mềm phải giữ tính tiến hóa cao để dễ dàng tích hợp các tính năng kinh doanh mới.

III. Giải pháp công nghệ Golang và ReactJS cho sàn thương mại điện tử

Để giải quyết triệt để các bài toán hiệu năng, nhóm nghiên cứu lựa chọn mô hình phân tách độc lập giữa frontend và backend. Phía máy khách sử dụng thư viện ReactJS với cơ chế Virtual DOM đột phá. Virtual DOM duy trì bản sao ảo của cây giao diện trong bộ nhớ. Mỗi thay đổi dữ liệu chỉ kích hoạt thuật toán so sánh khác biệt. Hệ thống chỉ cập nhật chính xác các nút giao diện bị biến đổi lên DOM thực. Kỹ thuật này giảm thiểu tối đa hoạt động render không cần thiết, giúp giao diện vận hành mượt mà. Ở tầng xử lý logic và dữ liệu, ngôn ngữ Golang được chọn làm nền tảng máy chủ. Golang nổi bật với khả năng biên dịch trực tiếp sang mã máy và mô hình xử lý đa luồng Goroutine tiêu tốn rất ít bộ nhớ. Máy chủ Golang cung cấp các API tốc độ cao, xử lý hàng nghìn yêu cầu đồng thời mà không nghẽn tài nguyên. Hệ quản trị cơ sở dữ liệu PostgreSQL đảm bảo tính toàn vẹn và nhất quán của giao dịch tài chính. Nhờ đó, sàn thương mại Etterath đạt được hiệu năng cao và độ trễ phản hồi cực thấp.

3.1. Ứng dụng ReactJS và cơ chế Virtual DOM

Giao diện ứng dụng được chia nhỏ thành các Component độc lập và có tính tái sử dụng cao. Mỗi thành phần như thẻ sản phẩm, bộ lọc giá hay thanh tìm kiếm đều đóng gói logic riêng biệt. Khi dữ liệu sản phẩm biến động, ReactJS tự động xây dựng cây Virtual DOM mới. Thuật toán phân biệt tiến hành đối soát cây mới với cây trước đó để tìm ra sự khác biệt. Hệ thống chỉ thực hiện cập nhật cục bộ trên DOM thực tại những vị trí có thay đổi. Giải pháp này loại bỏ hoàn toàn việc tải lại toàn bộ trang web. Tốc độ tương tác tăng cao, mang lại trải nghiệm mượt mà và liền mạch cho khách hàng mua sắm.

3.2. Xây dựng dịch vụ backend với Golang và Postgres

Tầng backend sử dụng Golang để xây dựng các RESTful API nhẹ và có tốc độ phản hồi cực nhanh. Ngôn ngữ này biên dịch mã nguồn trực tiếp sang mã nhị phân, giúp tối ưu hóa việc sử dụng bộ nhớ CPU. Khả năng đồng thời thông qua Goroutine cho phép máy chủ tiếp nhận hàng nghìn kết nối mà không làm trễ tác vụ khác. Cơ sở dữ liệu quan hệ PostgreSQL đảm bảo tính toàn vẹn dữ liệu cho các bảng thông tin phức tạp. Hệ thống thiết lập chính sách sao lưu định kỳ mỗi tháng một lần nhằm bảo đảm an toàn dữ liệu tuyệt đối. Ngoài ra, dịch vụ nền tự động gửi email thông báo chi tiết đơn hàng cho khách hàng ngay sau mỗi giao dịch thanh toán thành công.

IV. Kết luận và ứng dụng thực tiễn của đồ án tốt nghiệp ĐH SPKT TPHCM

Đồ án tốt nghiệp tại Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh đã chứng minh tính hiệu quả của mô hình kết hợp Golang và ReactJS. Ứng dụng thương mại điện tử đáp ứng xuất sắc các tiêu chuẩn phi chức năng khắt khe ban đầu. Thời gian phản hồi hệ thống luôn duy trì ở mức dưới 5 giây. Tỉ lệ lỗi trong quá trình chạy thử nghiệm được kiểm soát dưới 5%, đồng thời tỉ lệ sai số nghiệp vụ không vượt quá 0.05%. Việc áp dụng thành công kiến trúc hiện đại giúp website xử lý trơn tru các luồng nghiệp vụ mua bán phức tạp của ngành công nghệ. Sản phẩm có giá trị thực tiễn cao, sẵn sàng phục vụ nhu cầu kinh doanh của các doanh nghiệp bán lẻ thiết bị số. Ngoài ra, mã nguồn dự án đóng vai trò tài liệu tham khảo giá trị cho sinh viên khóa sau thuộc Khoa Công nghệ Thông tin. Hướng phát triển tiếp theo bao gồm tích hợp cổng thanh toán trực tuyến đa kênh và áp dụng trí tuệ nhân tạo để gợi ý sản phẩm cá nhân hóa.

4.1. Đánh giá kết quả thực nghiệm hệ thống

Quá trình thử nghiệm thực tế khẳng định website vận hành ổn định trong nhiều kịch bản sử dụng. Giao diện người dùng trên nền ReactJS phản hồi nhanh, chuyển trang mượt mà mà không gặp tình trạng chớp nháy màn hình. Backend viết bằng Golang duy trì mức tiêu thụ RAM và CPU ở ngưỡng rất thấp. Thời gian đáp ứng các truy vấn dữ liệu phức tạp dao động trong khoảng từ 100 đến 300 mili-giây, thấp hơn nhiều so với giới hạn trần 5 giây. Hệ thống bảo đảm tính toàn vẹn của dữ liệu giỏ hàng và danh sách sản phẩm. Những kết quả kiểm thử này chứng minh tính khả thi của giải pháp kiến trúc đề xuất.

4.2. Khả năng mở rộng và hướng phát triển đề tài

Cấu trúc hệ thống được thiết kế theo dạng module hóa cao độ, tạo điều kiện thuận lợi cho việc nâng cấp. Trong giai đoạn tiếp theo, hệ thống có thể chuyển đổi sang kiến trúc Microservices để nâng cao khả năng chịu tải. Đội ngũ phát triển có thể tích hợp thêm các cổng thanh toán điện tử như VNPay, MoMo và ZaloPay. Nền tảng cũng hướng đến việc ứng dụng thuật toán học máy nhằm gợi ý các linh kiện công nghệ tương thích theo thói quen mua sắm. Việc bổ sung cơ chế kiểm soát tồn kho tự động theo thời gian thực sẽ hoàn thiện năng lực vận hành. Mô hình này mở ra tiềm năng thương mại hóa mạnh mẽ cho các doanh nghiệp bán lẻ kỹ thuật số.

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 sản phẩm công nghệ sử dụng Golang và ReactJS" được thực hiện bởi nhóm sinh viên Hoàng Nhựt Khánh Ngân, Lê Hoàng Mai Ngân và Nguyễn Thanh Minh Đức dưới sự hướng dẫn của TS. Lê Văn Vinh tại Bộ môn 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. Khóa luận được giao ngày 04/03/2024 và hoàn thành nghiệm thu vào ngày 10/07/2024 (thuộc khóa đào tạo 2019 – 2023).

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

Trong bối cảnh cuộc Cách mạng công nghiệp lần thứ tư, công nghệ thông tin đã trở thành nền tảng và động lực phát triển then chốt trong mọi lĩnh vực kinh tế - xã hội. Nhu cầu giao dịch, mua sắm nhanh chóng, tiện lợi của người tiêu dùng gia tăng thúc đẩy các nền tảng thương mại điện tử phát triển mạnh mẽ. Website thương mại điện tử đóng vai trò là phương tiện kết nối trực tiếp, thu hẹp khoảng cách địa lý giữa doanh nghiệp và khách hàng toàn cầu, đồng thời đóng vai trò là kênh xây dựng nhận diện thương hiệu, truyền tải thông điệp, tối ưu trải nghiệm và tiếp nhận phản hồi từ người dùng. Nhận thức được nhu cầu thực tiễn đó, nhóm tác giả đã lựa chọn nghiên cứu và xây dựng một hệ thống website thương mại điện tử chuyên biệt cho ngành hàng sản phẩm công nghệ.

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

Mục tiêu nghiên cứu của đồ án được văn bản phân định rõ thành mục tiêu tổng quát và các mục tiêu cụ thể:

1. Mục tiêu chính: Tìm hiểu và áp dụng các kiến thức chuyên ngành đã tích lũy nhằm xây dựng hoàn thiện một ứng dụng web thương mại điện tử phục vụ nhu cầu tiếp cận khách hàng và giao dịch trực tuyến của doanh nghiệp.
2. Mục tiêu cụ thể:
   • Nghiên cứu và ứng dụng thực hành hai công nghệ chính là thư viện ReactJS cho tầng giao diện (Front-End) và ngôn ngữ Golang cho tầng xử lý nghiệp vụ (Back-End).
   • Thiết kế và hiện thực hóa hệ thống đáp ứng đầy đủ các nhóm yêu cầu chức năng cho hai đối tượng người dùng chính: Khách hàng (đăng ký, quản lý tài khoản, xem chi tiết, lọc/tìm kiếm, giỏ hàng, đặt hàng, so sánh sản phẩm, danh sách yêu thích, đánh giá/bình luận, lịch sử đơn hàng) và Quản trị viên (quản lý người dùng, sản phẩm, danh mục loại sản phẩm, nhãn hàng, đơn hàng, chương trình giảm giá, mã giảm giá, tồn kho).
   • Đảm bảo các chỉ số phi chức năng: giao diện trực quan, tốc độ tải và phản hồi của API đạt ngưỡng dưới 5 giây, tỉ lệ lỗi hệ thống dưới 5%, tỉ lệ sai số giao dịch dưới 0.05%, bảo mật phân quyền với JSON Web Token.

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

• Đối tượng nghiên cứu:
  • Khảo sát các tính năng, cấu trúc giao diện và hạn chế thực tế của 5 website thương mại điện tử lớn trong nước và quốc tế (Thế giới di động, FPT Shop, CellphoneS, Newegg, BestBuy).
  • Nhu cầu giao dịch mua sắm thiết bị công nghệ trực tuyến của khách hàng cá nhân.
  • Các công nghệ phát triển phần mềm gồm: ngôn ngữ lập trình Golang, kiến trúc RESTful API, hệ quản trị cơ sở dữ liệu quan hệ PostgreSQL, thư viện ReactJS, công cụ quản lý trạng thái Redux, giao thức xác thực JSON Web Token (JWT) và môi trường phát triển Visual Studio Code.
• Phạm vi nghiên cứu:
  • Không gian và nghiệp vụ: Xây dựng giải pháp phần mềm dạng Web Application (tên định danh sản phẩm trong nhiệm vụ: Etterath) bán lẻ sản phẩm công nghệ. Hệ thống bao quát toàn bộ luồng nghiệp vụ từ đăng ký, duyệt sản phẩm, so sánh thông số kỹ thuật, quản lý giỏ hàng, áp dụng giảm giá, thanh toán, quản lý đơn hàng của khách hàng đến quy trình vận hành, thống kê danh mục, quản lý kho và xử lý đơn hàng của quản trị viên.
  • Thời gian thực hiện: Từ tháng 03/2024 đến tháng 07/2024.

---

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

Khung lý thuyết và công nghệ nền tảng

Hệ thống được thiết kế 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:

• Tầng giao diện người dùng (Front-End): Ứng dụng thư viện ReactJS (phiên bản kế thừa kiến trúc mã nguồn mở của Facebook phát triển từ năm 2013). Khung lý thuyết tập trung vào mô hình ứng dụng đơn trang (Single Page Application - SPA), cơ chế DOM ảo (Virtual DOM) nhằm giảm thiểu việc tái kết xuất toàn bộ cây DOM thực, cú pháp mở rộng JavaScript XML (JSX), phân tách giao diện dựa trên Component (gồm Function Component và Class Component), cơ chế truyền nhận dữ liệu qua Props và kiểm soát trạng thái nội bộ bằng State. Vòng đời thành phần (Component Life Cycle) được phân tích qua 3 giai đoạn: Khởi tạo (Mounting: constructor, render, componentDidMount), Cập nhật (Updating: componentDidUpdate) và Hủy bỏ (Unmounting: componentWillUnmount). Ngoài ra, hệ thống tích hợp Redux để quản trị trạng thái tập trung.
• Tầng dịch vụ máy chủ (Back-End): Sử dụng ngôn ngữ lập trình Golang (Go do Google phát triển từ năm 2007) để xây dựng hệ thống API theo chuẩn kiến trúc RESTful. Lý thuyết Golang khai thác mô hình xử lý đồng thời dựa trên Goroutines và Channels, cơ chế biên dịch trực tiếp sang mã máy, kiểu tĩnh, cú pháp khai báo rút gọn :=, mô hình hướng đối tượng dựa trên Struct và Interface thay cho hệ thống phân cấp Class truyền thống, cùng cơ chế tự động dọn rác bộ nhớ (Garbage Collection).
• Hệ quản trị cơ sở dữ liệu: PostgreSQL (hệ quản trị cơ sở dữ liệu quan hệ - đối tượng RDBMS phát triển từ dự án POSTGRES 4.2 tại Đại học California, Berkeley). Hệ thống tận dụng các tính năng nâng cao như điều khiển đồng thời đa phiên bản (MVCC), ghi nhật ký trước (Write-Ahead Logging - WAL), khôi phục dữ liệu tại một thời điểm (Point-In-Time-Recovery - PITR), hỗ trợ các kiểu dữ liệu phong phú (JSON/JSONB, UUID, mảng, kiểu hình học) và các cơ chế ràng buộc toàn vẹn dữ liệu chặt chẽ (Primary Key, Foreign Key, Unique, Check Constraint).
• Cơ chế xác thực và bảo mật: Công nghệ JSON Web Token (JWT) được áp dụng để xác thực không lưu trạng thái (stateless authentication) và phân quyền kiểm soát luồng truy cập API giữa các nhóm người dùng (Guest, Customer, Admin).

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

Khóa luận kết hợp đồng bộ các phương pháp kỹ thuật phần mềm:

1. Phương pháp khảo sát và phân tích so sánh hiện trạng: Khảo sát thực nghiệm trên 5 website thương mại điện tử hoạt động thực tế để rút ra các ưu điểm cần học hỏi và hạn chế cần khắc phục.
2. Phương pháp mô hình hóa và đặc tả yêu cầu: Sử dụng ngôn ngữ mô hình hóa thống nhất UML để xây dựng sơ đồ trường hợp sử dụng (Use Case Diagram), bảng đặc tả Use Case chi tiết và sơ đồ tuần tự (Sequence Diagram) cho 14 chức năng trọng yếu.
3. Phương pháp thiết kế dữ liệu: Thiết kế lược đồ thực thể kết hợp (ERD) và chuyển hóa thành cấu trúc bảng/tập dữ liệu (Collections/Tables) trong cơ sở dữ liệu quan hệ.
4. Phương pháp kiểm thử phần mềm: Thực hiện kiểm thử hộp đen (Black-box testing) cho kiểm thử chức năng và đo lường các tiêu chí kỹ thuật cho kiểm thử phi chức năng.

Nền tảng khảo sát	Ưu điểm ghi nhận	Hạn chế ghi nhận
Thế giới di động	Phân loại khoa học, tốc độ phản hồi nhanh, bài viết hỗ trợ phong phú, thông tin phản hồi rõ ràng.	Giao diện quá nhiều banner màu sắc gây rối mắt; hình thức thanh toán/trả góp thủ tục phức tạp; chưa có live chat.
FPT Shop	Bố cục dễ dùng, hình ảnh phong phú, hỗ trợ tính năng so sánh sản phẩm, tư vấn trực tiếp qua Zalo.	Hệ thống dễ nghẽn giờ cao điểm; bước xuất hóa đơn dễ bị treo; tốc độ nâng cấp hệ thống chưa kịp quy mô cửa hàng.
CellphoneS	Có khung giờ Flashsale, không có quảng cáo khó chịu, hỗ trợ chat tư vấn trực tiếp, giao hàng nhanh.	Danh mục sản phẩm chưa thật sự bao quát, thông số kỹ thuật chưa làm nổi bật, nhiều banner gây rối mắt.
Newegg	Cung cấp hơn 3 triệu sản phẩm, mô tả chi tiết, hỗ trợ đa ngôn ngữ, công cụ tìm kiếm và so sánh mạnh mẽ.	Giao diện trang chi tiết sản phẩm chia quá nhiều tiểu mục nhỏ gây rối mắt cho người dùng.
BestBuy	Bố cục khoa học, thông số chi tiết, có tính năng so sánh và lưu lịch sử so sánh sản phẩm, hỗ trợ sửa chữa.	Hạn chế theo vùng miền và ngôn ngữ, chính sách giá khắt khe, chưa tối ưu cho các nhà bán lẻ nhỏ.

---

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

Kiến trúc phần mềm và ngăn xếp công nghệ

Hệ thống được xây dựng theo mô hình phân tách độc lập Client - Server thông qua giao diện lập trình ứng dụng RESTful API:

• Tầng Client (Front-End): Viết bằng ReactJS kết hợp Redux, định tuyến các trang ứng dụng đơn (SPA), gửi các yêu cầu bất đồng bộ (Asynchronous HTTP Requests) qua các phương thức HTTP (GET, POST, PUT, DELETE) tới máy chủ.
• Tầng Server (Back-End): Viết bằng Golang, tiếp nhận các yêu cầu HTTP, kiểm tra mã xác thực JWT trong phần tiêu đề (Header), thực thi logic nghiệp vụ qua các hàm xử lý định tuyến và truy vấn dữ liệu.
• Tầng lưu trữ dữ liệu (Database): Cài đặt trên PostgreSQL, chịu trách nhiệm lưu trữ cấu trúc, duy trì toàn vẹn quan hệ và thực thi các truy vấn nghiệp vụ.

Cấu trúc cơ sở dữ liệu

Cơ sở dữ liệu của đồ án được đặc tả chi tiết thành 28 bảng/tập dữ liệu (Collections/Tables), bao quát toàn bộ quy trình thương mại điện tử:

Nhóm chức năng dữ liệu	Tên bảng / Collection trong hệ thống
Người dùng và Bảo mật	users, addresses, user_addresses, countries, wallets, transactions, refresh_sessions, otp_sessions
Sản phẩm và Thuộc tính	products, product_items, brands, categories, product_images, variations, variation_options, product_configurations
Giỏ hàng và Tương tác	carts, cart_items, wish_lists
Khuyến mãi và Giảm giá	offers, offer_products, offer_categories, coupons, coupon_users
Đơn hàng và Thanh toán	shop_orders, payment_methods, order_statuses, order_returns

Quy trình kiểm thử và các thông số kỹ thuật

Quá trình kiểm định chất lượng phần mềm được thiết lập dựa trên bảng chỉ số yêu cầu phi chức năng:

• Thời gian phản hồi API: Toàn bộ các API xử lý giao dịch và truy vấn dữ liệu được yêu cầu và đo lường đạt tốc độ phản hồi dưới 5 giây.
• Tính an toàn của dữ liệu: Mọi tương tác làm biến động trạng thái hoặc thay đổi cơ sở dữ liệu bắt buộc phải sử dụng phương thức HTTP POST.
• Độ tin cậy và chính xác: Tỉ lệ phát sinh lỗi hệ thống trong quá trình vận hành kiểm thử được khống chế ở mức dưới 5%; tỉ lệ sai số dữ liệu đối soát không vượt quá 0.05%.
• Sao lưu và truyền thông: Thiết lập tiến trình sao lưu định kỳ cơ sở dữ liệu với tần suất 1 tháng một lần; cấu hình module tự động gửi email thông báo xác nhận đơn hàng đến hộp thư của khách hàng ngay sau khi thao tác đặt hàng hoàn tất.

---

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

Chương 1: Phần mở đầu

Chương 1 thiết lập toàn bộ cơ sở đề dẫn của đề tài nghiên cứu. Tác giả luận giải tính cấp thiết của thương mại điện tử trong thời đại số, nhấn mạnh vai trò của website bán hàng trực tuyến như một công cụ tiếp cận hàng triệu khách hàng toàn cầu và tối ưu chi phí vận hành. Mục tiêu tổng quát và các mục tiêu cụ thể được lượng hóa rõ ràng từ khâu làm chủ công nghệ ReactJS, Golang, PostgreSQL đến việc hiện thực hóa đầy đủ các tính năng cho Khách hàng và Quản trị viên. Chương này cũng phân định cụ thể đối tượng, phạm vi nghiên cứu và ý nghĩa thực tiễn của đề tài trong việc tạo ra sản phẩm mẫu ứng dụng thực tế.

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

Chương 2 trình bày có hệ thống các lý thuyết công nghệ được lựa chọn sử dụng trong đồ án:

• Phát triển Front-End: Trình bày bản chất thư viện ReactJS, phân tích cơ chế tối ưu hiệu năng của Virtual DOM thông qua thuật toán so sánh cây DOM để giảm thiểu tái kết xuất (re-render). Làm rõ cú pháp JSX, cấu trúc Component, phân biệt biến Props (dữ liệu truyền từ ngoài vào) và State (trạng thái nội tại có thể biến đổi), cùng các mốc trong vòng đời thành phần Component Life Cycle (Mounting, Updating, Unmounting).
• Phát triển Back-End: Giới thiệu ngôn ngữ Golang với ưu điểm vượt trội về hiệu năng nhờ Goroutines và Channels trong xử lý đồng thời, quản lý rác bộ nhớ tự động, cú pháp tinh gọn và thời gian biên dịch mã nguồn nhanh. Đồng thời, tác giả khách quan chỉ ra các mặt hạn chế của Golang như thiếu hỗ trợ Generics (tại thời điểm khảo sát), thư viện hỗ trợ chưa phong phú bằng Java hay Python, việc quản lý rác có thể gây trễ tức thời trong một số trường hợp và thiếu tính kế thừa hướng đối tượng dạng Class truyền thống.
• Hệ trị cơ sở dữ liệu PostgreSQL: Phân tích nguồn gốc xuất xứ từ Berkeley, phân loại hệ thống RDBMS hướng đối tượng, giới thiệu hệ thống kiểu dữ liệu phong phú (JSON, mảng, hình học), các cơ chế kiểm soát đồng thời MVCC, kỹ thuật bảo mật SCRAM-SHA-256, khả năng mở rộng với sharding/replication và nhật ký phục hồi thảm họa WAL/PITR.

Chương 3: Khảo sát hiện trạng và mô hình hóa yêu cầu

Chương 3 là phần trọng tâm về kỹ thuật phần mềm của đồ án, tích hợp thiết kế, cài đặt và kiểm thử:

• Khảo sát hiện trạng: Tiến hành phân tích sâu 5 nền tảng TMĐT (Thế giới di động, FPT Shop, CellphoneS, Newegg, BestBuy) về giao diện, tính năng so sánh, giỏ hàng, thanh toán và dịch vụ khách hàng; từ đó rút ra bài học kinh nghiệm về việc tập trung vào nhu cầu người dùng cụ thể, giao diện tinh gọn, không lạm dụng banner gây rối mắt.
• Xác định yêu cầu: Lập bảng chi tiết 25 yêu cầu chức năng nghiệp vụ của người dùng và hệ thống, phân chia vai trò giữa khách vãng lai (Guest), khách hàng có tài khoản (Customer) và quản trị viên (Admin). Xác lập bảng yêu cầu phi chức năng gồm 9 tiêu chí kỹ thuật.
• Mô hình hóa Use Case và Lược đồ tuần tự: Đặc tả Use Case bằng bảng cho từng chức năng; xây dựng sơ đồ tuần tự (Sequence Diagram) cho 14 quy trình tương tác: Đăng ký, Đăng nhập, Đăng xuất, Tìm kiếm sản phẩm, Lọc sản phẩm, Xem chi tiết sản phẩm, Thêm vào CompareList, Quản lý giỏ hàng, Đặt hàng, Quản lý đơn hàng (Customer), Cập nhật tài khoản cá nhân, Quản lý người dùng, Quản lý sản phẩm, Quản lý chương trình giảm giá (Admin).
• Thiết kế cơ sở dữ liệu và giao diện: Trình bày lược đồ thực thể kết hợp (ERD), mô tả cấu trúc chi tiết của 28 bảng dữ liệu/Collections. Hiện thực và mô tả chi tiết giao diện cho hai phân hệ: Phía khách hàng (Trang chủ, Chi tiết sản phẩm, Sản phẩm yêu thích, So sánh sản phẩm, Lọc, Giỏ hàng, Đặt hàng, Lịch sử mua hàng, Mã giảm giá...) và Phía quản trị viên (Trang chủ quản trị, Quản lý người dùng, Quản lý sản phẩm, Quản lý biến thể sản phẩm - variant/options, Quản lý nhãn hàng, Quản lý danh mục, Quản lý mã và chương trình giảm giá, Quản lý đơn hàng).
• Cài đặt và kiểm thử phần mềm: Xác định cấu hình tài nguyên hệ thống, môi trường phần cứng, phần mềm; xây dựng quy trình kiểm thử hộp đen cho từng ca kiểm thử chức năng và kiểm tra các tiêu chí phi chức năng đã đề ra.

---

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

Kết quả đạt được

Khóa luận đã hoàn thành toàn bộ các mục tiêu đặt ra theo đề cương nhiệm vụ được giao:

• Xây dựng thành công ứng dụng web thương mại điện tử hoàn chỉnh mang tên Web Application Thương mại Etterath với đầy đủ 2 phân hệ khách hàng và quản trị viên.
• Hiện thực hóa 25 chức năng nghiệp vụ theo bảng yêu cầu, bao gồm các tính năng nâng cao như: so sánh sản phẩm công nghệ (CompareList), danh sách yêu thích (WishList), quản lý biến thể mặt hàng theo phiên bản (product items, variations, variation options), quản lý phiếu giảm giá (coupons) và chương trình khuyến mãi (offers).
• Thiết kế và chuẩn hóa thành công cấu trúc cơ sở dữ liệu gồm 28 bảng dữ liệu trên PostgreSQL, đảm bảo liên kết chặt chẽ và ràng buộc toàn vẹn dữ liệu.
• Đạt được các chỉ số kỹ thuật phi chức năng trong quá trình kiểm thử:
  • Tốc độ phản hồi của hệ thống API đạt dưới 5 giây.
  • Tỉ lệ lỗi vận hành được kiểm soát dưới 5%.
  • Tỉ lệ sai số trong quá trình xử lý giao dịch đạt mức dưới 0.05%.
  • Tích hợp thành công chức năng tự động gửi email thông tin xác nhận đơn hàng khi khách hàng hoàn tất giao dịch đặt hàng và cơ chế lập lịch sao lưu dữ liệu mỗi tháng một lần.

Giải pháp và kiến nghị của nhóm tác giả

• Tách bạch rõ ràng giữa tầng hiển thị (ReactJS) và tầng dịch vụ (Golang RESTful API) giúp mã nguồn dễ bảo trì, thuận tiện nâng cấp và mở rộng trong tương lai.
• Sử dụng JWT để giải quyết bài toán xác thực phân quyền giúp giảm tải gánh nặng lưu trữ phiên (session) trên máy chủ.
• Học tập ưu điểm từ các trang TMĐT lớn (FPT Shop, Newegg) để bổ sung tính năng so sánh trực quan thông số kỹ thuật giữa các thiết bị công nghệ, đồng thời tinh giản giao diện để tránh tình trạng rối mắt do quá nhiều banner quảng cáo như Thế giới di động hay CellphoneS.

Đóng góp của đề tài

• Cung cấp một mô hình thực nghiệm hoàn chỉnh về việc kết hợp giữa ngôn ngữ lập trình hiệu năng cao Golang và thư viện Front-End phổ biến ReactJS trong bài toán xây dựng hệ thống thương mại điện tử.
• Chuẩn hóa tài liệu phân tích thiết kế hệ thống bán hàng công nghệ từ khâu khảo sát thực tế, mô hình hóa Use Case, vẽ sơ đồ tuần tự đến thiết kế chi tiết 28 bảng quan hệ trong cơ sở dữ liệu.

---

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

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

Dựa trên phạm vi nghiên cứu và nội dung phân tích trong đồ án, hệ thống còn tồn tại một số điểm giới hạn:

• Các hình thức thanh toán trực tuyến và tích hợp cổng thanh toán bên thứ ba chuyên sâu chưa được mở rộng toàn diện (chủ yếu tập trung vào cấu trúc phương thức thanh toán và ví nội bộ).
• Khả năng tương tác hỗ trợ khách hàng theo thời gian thực (như module live chat trực tuyến hoặc chatbot tự động) chưa được xây dựng, tương tự như hạn chế đã chỉ ra ở các trang web khảo sát ban đầu.
• Chưa triển khai các giải pháp kiến trúc phân tán nâng cao của PostgreSQL như phân vùng bảng (sharding) hoặc phân tán dữ liệu đa máy chủ (replication) trên môi trường thực tế quy mô lớn.

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

Văn bản đồ án đề xuất các định hướng nghiên cứu và nâng cấp trong tương lai:

• Mở rộng và tích hợp thêm nhiều cổng thanh toán điện tử phổ biến trong nước và quốc tế để đa dạng hóa phương thức thanh toán.
• Phát triển hệ thống tương tác và chăm sóc khách hàng trực tuyến (live chat trực tiếp hoặc hệ thống phản hồi tự động).
• Tối ưu hóa hiệu năng máy chủ và nâng cao tính sẵn sàng của cơ sở dữ liệu thông qua việc áp dụng kỹ thuật replication và cân bằng tải khi quy mô người dùng tăng cao.
• Phát triển ứng dụng trên thiết bị di động (Mobile Application) dựa trên nền tảng API hiện có.

---

Giá trị tham khảo

Báo cáo khóa luận là tài liệu tham khảo kỹ thuật hữu ích đối với sinh viên chuyên ngành Công nghệ thông tin, Kỹ thuật phần mềm và các nhà phát triển hệ thống:

• Đối tượng phù hợp: Sinh viên thực hiện đồ án tốt nghiệp, môn học phân tích thiết kế hệ thống thông tin hoặc các lập trình viên đang bắt đầu tìm hiểu việc tích hợp giữa Golang và ReactJS.
• Các phần nội dung có giá trị tham khảo cao:
  • Chương khảo sát hiện trạng: Cung cấp góc nhìn thực tế, chi tiết về ưu điểm và nhược điểm chức năng/giao diện của 5 nền tảng TMĐT hàng đầu (Thế giới di động, FPT Shop, CellphoneS, Newegg, BestBuy).
  • Quy trình đặc tả Use Case và Sơ đồ tuần tự: Cung cấp mẫu đặc tả nghiệp vụ bài bản cho 14 chức năng cốt lõi của một hệ thống bán lẻ.
  • Lược đồ thực thể kết hợp (ERD) và cấu trúc 28 Collections/Bảng dữ liệu: Bản thiết kế cơ sở dữ liệu mẫu rất chi tiết cho bài toán sản phẩm có nhiều biến thể (variations), quản lý giỏ hàng, chương trình giảm giá đa dạng và phân quyền người dùng.

---

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

1. Khóa luận sử dụng các công nghệ chính nào để xây dựng hệ thống website?
Hệ thống sử dụng thư viện ReactJS kết hợp Redux ở tầng Front-End để tạo giao diện ứng dụng đơn trang (SPA). Tầng Back-End được xây dựng bằng ngôn ngữ lập trình Golang cung cấp các dịch vụ RESTful API. Hệ quản trị cơ sở dữ liệu được sử dụng là PostgreSQL, và công nghệ JSON Web Token (JWT) được áp dụng để xác thực và phân quyền.

2. Đồ án khảo sát cụ thể những website thương mại điện tử nào để rút ra kinh nghiệm thiết kế?
Nhóm tác giả đã tiến hành khảo sát và phân tích ưu - nhược điểm của 5 website thương mại điện tử gồm: Thế giới di động, FPT Shop, CellphoneS (trong nước) cùng Newegg và BestBuy (quốc tế).

3. Cơ sở dữ liệu của hệ thống được thiết kế với quy mô bao nhiêu bảng/collections và bao gồm những nhóm nào?
Cơ sở dữ liệu của hệ thống bao gồm 28 bảng/collections, bao quát 5 nhóm thực thể chính: Nhóm người dùng và bảo mật (users, addresses, wallets, transactions, sessions...); Nhóm sản phẩm và thuộc tính (products, product_items, brands, categories, variations...); Nhóm giỏ hàng và danh sách yêu thích (carts, cart_items, wish_lists); Nhóm khuyến mãi (offers, coupons...); và Nhóm đơn hàng - thanh toán (shop_orders, payment_methods, order_statuses, order_returns).

4. Các chỉ số kỹ thuật phi chức năng mà hệ thống cam kết và kiểm thử đạt được là gì?
Hệ thống đặt ra và kiểm thử thành công các chỉ số: tốc độ phản hồi của API đạt dưới 5 giây; tỉ lệ phát sinh lỗi hệ thống dưới 5%; tỉ lệ sai số nghiệp vụ dưới 0.05%; các tương tác làm thay đổi dữ liệu đều áp dụng phương thức HTTP POST; hệ thống có cơ chế sao lưu dữ liệu mỗi tháng 1 lần và tự động gửi email chi tiết đơn hàng cho khách hàng khi đặt hàng thành công.

---

Kết luận

Đồ án tốt nghiệp "Xây dựng website bán sản phẩm công nghệ sử dụng Golang và ReactJS" của nhóm tác giả tại Trường Đại học Sư phạm Kỹ thuật TP.HCM đã giải quyết trọn vẹn bài toán xây dựng nền tảng thương mại điện tử hoàn chỉnh cho lĩnh vực thiết bị công nghệ. Bằng việc kết hợp hiệu quả giữa ReactJS ở tầng giao diện và Golang ở tầng xử lý dịch vụ cùng cơ sở dữ liệu quan hệ PostgreSQL chuẩn hóa 28 bảng dữ liệu, nhóm nghiên cứu đã hiện thực hóa 25 yêu cầu chức năng nghiệp vụ đáp ứng đầy đủ các tiêu chuẩn kiểm thử kỹ thuật. Công trình là tài liệu tham khảo có giá trị học thuật và kỹ thuật thực tiễn cao cho sinh viên ngành Công nghệ thông tin trong việc nghiên cứu và triển khai các dự án phần mềm hướng dịch vụ.

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 Ngày nay, công nghệ thông tin được coi là ngành quyền lực bậc nhất với hàng loạt ứng dụng trong mọi lĩnh vực của đời sống, kinh tế và xã hội. Đặc biệt, ở thời kỳ Cách mạng 4.0 thì công nghệ thông tin càng khẳng định được tầm quan trọng của mình - vừa là nền tảng, vừa là động lực để bắt kịp đà phát triển của thế giới. Cùng với đó, nhu cầu mua bán một cách nhanh chóng và hiệu quả của con người ngày càng tăng cao.

Từ đó, những website thương mại điện tử dần trở nên phổ biến trong cuộc sống và nó đã trở thành phương tiện nhanh chóng nhất để doanh nghiệp tiếp cận nhanh nhất với người tiêu dùng. Một trong những lợi ích lớn nhất của thương mại điện tử đó là khả năng tiếp cận với hàng triệu khách hàng trên toàn thế giới. Với một website thương mại điện tử, doanh nghiệp có thể bán sản phẩm và dịch vụ của mình không chỉ trong khu vực địa phương mà còn trên toàn cầu. Điều này mở ra một thị trường tiềm năng rộng lớn, giúp doanh nghiệp tăng trưởng quy mô hoạt động và thu hẹp khoảng cách về địa lý.

Tăng trải nghiệm mua sắm thuận tiện và linh hoạt. Website thương mại điện tử đóng vai trò như bộ mặt thương hiệu trên môi trường internet, nơi doanh nghiệp có thể truyền tải thông điệp, giá trị và hình ảnh thương hiệu đến khách hàng một cách rõ ràng và mạnh mẽ. Doanh nghiệp có thể tạo dựng nhận diện thương hiệu thông qua thiết kế website, logo, thông tin sản phẩm. Việc tương tác trực tiếp với khách hàng qua các kênh trực tuyến cũng giúp doanh nghiệp hiểu rõ nhu cầu, thu thập phản hồi và cải thiện thương hiệu một cách hiệu quả.

Xuất phát từ những nhu cầu thực tế được phân tích ở trên, nhóm thực hiện đề tài nhận thấy được vai trò to lớn của website thương mại điện tử trong cuộc sống. Do đó, nhóm quyết định chọn đề tài “Xây dựng website bán sản phẩm công nghệ sử dụng Golang và ReactJS”. MỤC TIÊU CỦA ĐỀ TÀI Mục tiêu chính của đề tài: Tìm hiểu và áp dụng các kiến thức đã học, đã nghiên cứu để xây dựng và hoàn thiện một website Thương mại điện tử cho phép doanh nghiệp tiếp cận người tiêu dùng một cách nhanh chóng và hiệu quả. Mục tiêu cụ thể của đề tài: Áp dụng và thực hành các công nghệ cụ thể là ReactJS và Golang vào đồ án.

Xây dựng một website thương mại điện tử đạt được các yêu cầu cơ bản sau: - Yêu cầu chức năng:  Phía khách hàng: ➢ Đăng ký. ➢ Cập nhật tài khoản. ➢ Xem chi tiết sản phẩm. ➢ Lọc/Tìm kiếm sản phẩm.

➢ Thêm/xóa/cập nhật số lượng sản phẩm trong giỏ hàng. ➢ So sánh sản phẩm ➢ Thêm sản phẩm vào danh sách yêu thích. ➢ Xem lịch sử mua hàng ➢ Xem chi tiết đơn hàng. ➢ Thay đổi mật khẩu.

➢ Cập nhật tài khoản cá nhân. ➢ Bình luận sản phẩm  Phía nhà quản trị: ➢ Đăng nhập. ➢ Quản lý người dùng. ➢ Quản lý sản phẩm.

10 ➢ Quản lý loại sản phẩm. ➢ Quản lý tài khoản cá nhân. ➢ Thay đổi mật khẩu. ➢ Quản lý chương trình giảm giá.

➢ Quản lý nhãn hàng. ➢ Quản lý số lượng sản phẩm nhập kho - Yêu cầu phi chức năng:  Giao diện trực quan, dễ thao tác và thân thiện với người dùng.  Hình ảnh sản phẩm chất lượng.  Tốc độ tải trang nhanh.

 Hệ quản trị đơn giản dễ sử dụng. ĐỐI TƯỢNG NGHIÊN CỨU Đề tài nghiên cứu và phân tích ưu điểm, hạn chế về giao diện và chức năng của các website thương mại điện tử ở trong nước và quốc tế. Đồng thời nghiên cứu nhu cầu thực tế của mỗi người trong việc sử dụng website thương mại điện tử, để từ đó rút ra mục tiêu chính của đề tài. Ngoài ra, nhóm thực hiện cũng nghiên cứu các công nghệ để có thể áp dụng vào việc xây dựng hệ thống, bao gồm: - Nghiên cứu framework Golang, Restful API để xây dụng các APIs hỗ trợ cho việc truy xuất và thao tác với dữ liệu một cách chính xác và nhanh chóng.

- Nghiên cứu và tìm hiểu môi trường lập trình Visual Code. - Nghiên cứu về cơ sở dữ liệu Postgres để lưu trữ dữ liệu. - Nghiên cứu về các thư viện JavaScript để xây dựng giao diện người dùng cụ thể là: ReactJS, framework hỗ trợ - Redux và cùng với một số thư viện khác. - Tìm hiểu và nghiên cứu công nghệ Json Web Token để bảo mật cho hệ thống và kiểm soát tất cả các luồng dữ liệu ra vào.

CÔNG NGHỆ SỬ DỤNG Để thực hiện đề tài, nhóm đã tìm hiểu và sử dụng các công nghệ sau: 11 - Về phía Front-End: sử dụng framework reactJS để xây dựng và thiết kế giao diện người dùng. - Về phía Back-End: sử dụng framework Golang, Restful API để xây dựng các APIs hỗ trợ cho việc truy xuất và thao tác với dữ liệu. Sử dụng công nghệ Json Web Token để bảo mật hệ thống. - Về phía Database: sử dụng hệ quản trị cơ sở dữ liệu Postgres để lưu trữ dữ liệu người dùng.

PHẠM VI NGHIÊN CỨU Phạm vi nghiên cứu của đồ án là xây dụng website và cụ thể là xây dựng Website bán sản phẩm công nghệ sử dụng Golang và ReactJS đảm bảo khách hàng có thể đăng ký tài khoản trên trang web để có thể đăng nhập và mua hàng thành công, đảm bảo người quản trị có thể quản lý tốt cửa hàng, các sản phẩm có trong cửa hàng, quản lý đơn hàng và quản lý người dùng. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN Sau khi hoàn thiện đề tài, nhóm thực hiện đề tài sẽ rèn luyện, tiếp thu được nhiều kỹ năng và kiến thức bổ ích, đặc biệt là về những công nghệ mới đang được sử dụng hiện nay. Nâng cao tinh thần nghiên cứu và sáng tạo, cống hiến vì cộng đồng. Qua đó nhóm cũng có kinh nghiệm trong những dự án tiếp theo.

Khi sản phẩm của nhóm được áp dụng vào thực tế việc sử dụng một trang website thương mại để mang lại sự tiện lợi trong nhu cầu mua bán hàng hóa giữa người tiêu dùng và nhà cung cấp sẽ ngày càng phát triển hơn nữa. Đem lại sự tiện lợi, hiệu quả và an toàn. 12 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2. CÔNG NGHỆ PHÁT TRIỂN FRONT-END 2.

ReactJS là gì? Hình 2. ReactJS (Nguồn: https://t3h.vn/tin-tuc/jsx-trong-reactjs) ReactJS là một thư viện JavaScript mã nguồn mở được Facebook phát triển và ra mắt vào năm 2013. Thư viện này được sử dụng để xây dựng các thành phần giao diện người dùng (UI) trên website. ReactJS có một điểm nổi bật là có thể render dữ liệu ở cả phía máy chủ (server) và phía máy khách (client).

Theo trích dẫn từ tài liệu của website React thì nguyên lý xây dựng của ReactJS dựa trên components (component-based approach), có thể tái sử dụng và phù hợp với ứng dụng một trang (Single Page Application – SPA). ReactJS giúp lập trình viên xây dựng giao diện người dùng dựa trên JSX (một cú pháp mở rộng của JavaScript), tạo ra các DOM ảo (virtual DOM) để tối ưu việc render một trang web. DOM ảo là một bản sao DOM thực tế của trang web. Khi dữ liệu của ứng dụng thay đổi, ReactJS sẽ chỉ cập nhật DOM ảo.

Điều này giúp cải thiện hiệu suất của ứng dụng [2]. ReactJS được thiết kế dựa trên các thành phần UI riêng lẻ, giúp dễ dàng tái sử dụng mã và xây dựng các ứng dụng phức tạp. Không những phù hợp với đa dạng thể loại website mà còn có thể sử dụng cho cả Mobile application và thân thiện với SEO. 13 Những tính năng này đã giúp ReactJS trở thành một lựa chọn hàng đầu cho các nhà phát triển web, và hiện tại ReactJS vẫn đang chiếm vị trí số 1 trong các thư viện Front- End hiện tại.

ReactJS là một thư viện rất phổ biến và được sử dụng bởi nhiều ứng dụng web nổi tiếng, bao gồm Facebook, Instagram, Netflix, Airbnb và Uber. JSX (Nguồn: https://www.com/js/js_htmldom.asp) Theo trích dẫn từ tài liệu của website React thì JSX là viết tắt của JavaScript XML, là một cú pháp mở rộng cho JavaScript cho phép lập trình viên viết HTML trong React một cách dễ dàng. JSX được dịch sang JavaScript thông thường trong thời gian chạy mã. Nó cho phép các nhà phát triển viết HTML theo cách tự nhiên và dễ hiểu hơn [2].

Một số ưu điểm của JSX trong React: • Tối ưu hóa mã JavaScript trong quá trình biên dịch giúp tăng tốc độ ứng dụng. • JSX có thể giúp giảm thiểu thời gian phát triển ứng dụng bằng cách phát hiện lỗi sớm trong quá trình biên dịch. • JSX giúp các nhà phát triển quen thuộc với HTML viết các mẫu HTML một cách hiệu quả hơn. Virtual DOM Theo trích dẫn từ tài liệu của website React thì DOM là tên gọi tắt của Document Object Model (Mô hình Đối tượng Tài liệu), đại diện cho giao diện người dùng trong ứng dụng.

Khi giao diện người dùng thay đổi, DOM sẽ cập nhật để phản ánh sự thay đổi đó [2]. Việc thao tác quá nhiều lên DOM có thể làm giảm hiệu suất ứng dụng và khiến ứng dụng chậm hơn. DOM được biểu diễn dưới dạng cấu trúc dữ liệu cây (tree). Do đó các thay đổi và cập nhật đối với DOM diễn ra nhanh chóng.

Nhưng sau mỗi lần thay đổi thì phần tử được cập nhật và các phần tử con của nó sẽ hiển thị lại để cập nhật giao diện người dùng. Việc render và hiển thị lại là nguyên nhân khiến cho ứng dụng chậm đi. Do đó, càng có nhiều thành phần giao diện người dùng, thì các bản cập nhật DOM càng nhiều, vì chúng sẽ cần được hiển thị lại cho mỗi bản cập nhật DOM. DOM ảo là một giải pháp cho vấn đề hiệu suất của DOM thực.

DOM ảo là một bản sao ảo của DOM thực, chỉ được cập nhật khi trạng thái ứng dụng thay đổi. Điều này giúp cải thiện hiệu suất bằng cách giảm số lượng bản cập nhật DOM thực cần thiết. Khi thêm các phần tử mới vào giao diện người dùng, một DOM ảo sẽ được tạo dưới dạng cây. Mỗi phần tử là một nút trên cây này.

Khi trạng thái của bất kỳ phần tử nào thay đổi, một cây DOM ảo mới sẽ được tạo. Cây mới này sau đó được so sánh với cây DOM ảo trước đó để xác định các thay đổi cần thiết. DOM ảo sẽ tính toán phương pháp tốt nhất để thực hiện các thay đổi này đối với DOM thực. Điều này đảm bảo tối thiểu hóa hoạt động cập nhật DOM thực và cải thiện hiệu suất.

Virtual DOM (Nguồn: https://viblo.asia/p/tim-hieu-ve-virtual-dom-trong-react-bJzKm4kO59N) 15 2. Component Component trong ReactJS là các cấu trúc cốt lõi của React.