Đồ Án Tốt Nghiệp: Xây Dựng Website Bán Sách Cho Cửa Hàng Tâm An

Xây dựng website bán sách cho cửa hàng tâm an sử dụng công nghệ ReactJS giúp tối ưu hóa trải nghiệm người dùng và tăng doanh thu hiệu quả.

• Trường học: Trường Đại Học Công Nghệ Thông Tin
• Chuyên ngành: Công Nghệ Thông Tin
• Đề tài: Xây Dựng Website Bán Sách Sử Dụng ReactJS
• Loại tài liệu: Đồ Án Tốt Nghiệp
• Năm xuất bản: 2023
• Địa điểm: Thành Phố Hồ Chí Minh

Mục lục chi tiết

• MỞ ĐẦU
• 1. CHƯƠNG 1: KHẢO SÁT YÊU CẦU CỦA HỆ THỐNG
• 2. CHƯƠNG 2: PHÂN TÍCH YÊU CẦU CHỨC NĂNG HỆ THỐNG
• 3. CHƯƠNG 3: THIẾT KẾ CƠ SỞ DỮ LIỆU
• 4. CHƯƠNG 4: THIẾT KẾ CÁC CHỨC NĂNG CỦA HỆ THỐNG
• 5. CHƯƠNG 5: THIẾT KẾ GIAO DIỆN VÀ CÀI ĐẶT
• 6. CHƯƠNG 6: TỔNG KẾT VÀ ĐÁNH GIÁ
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Tổng quan dự án xây dựng website bán sách dùng ReactJS

Việc xây dựng website bán sách sử dụng ReactJS là một giải pháp công nghệ hiện đại, đáp ứng xu hướng thương mại điện tử đang phát triển mạnh mẽ. Sự dịch chuyển từ mô hình kinh doanh truyền thống sang trực tuyến đòi hỏi các cửa hàng phải có một nền tảng vững chắc, hiệu năng cao và mang lại trải nghiệm tốt cho người dùng. Đồ án của Ngô Chung Á Âu (2022) đã chứng minh tính khả thi và hiệu quả của việc ứng dụng thư viện ReactJS vào một project bán sách thực tế. Mục tiêu chính là tạo ra một hệ thống cho phép khách hàng xem, tìm kiếm và đặt hàng sản phẩm dễ dàng, đồng thời cung cấp cho quản trị viên công cụ để quản lý hoạt động kinh doanh. ReactJS được lựa chọn nhờ khả năng tạo ra giao diện người dùng (UI) linh hoạt, tốc độ tải trang nhanh thông qua Virtual DOM và cấu trúc dựa trên component có thể tái sử dụng. Điều này không chỉ giúp tối ưu hóa quá trình phát triển mà còn đảm bảo khả năng mở rộng hệ thống trong tương lai, một yếu tố quan trọng đối với bất kỳ website thương mại điện tử nào.

1.1. Bối cảnh và sự cần thiết của một project bán sách online

Trong bối cảnh công nghệ số, đặc biệt sau những biến động như đại dịch Covid-19, hành vi mua sắm của người tiêu dùng đã thay đổi rõ rệt. Nhu cầu mua hàng trực tuyến, bao gồm cả sách, tăng cao. Một cửa hàng sách truyền thống như Tâm An, theo khảo sát, đối mặt với hạn chế về địa lý và phương thức quản lý thủ công. Việc xây dựng một website bán hàng không chỉ giải quyết vấn đề tiếp cận khách hàng ở xa mà còn tự động hóa quy trình quản lý sản phẩm và đơn hàng. Một project bán sách online giúp cửa hàng mở rộng thị trường, tăng cường khả năng cạnh tranh và cung cấp dịch vụ tiện lợi hơn cho độc giả.

1.2. Lý do lựa chọn lập trình web React cho thương mại điện tử

Việc lựa chọn lập trình web React cho các dự án thương mại điện tử mang lại nhiều lợi thế kỹ thuật. ReactJS nổi bật với cơ chế Virtual DOM, giúp giảm thiểu số lần render lại DOM thật, từ đó cải thiện đáng kể hiệu suất và tốc độ của ứng dụng. Cấu trúc dựa trên component cho phép chia nhỏ giao diện thành các thành phần độc lập, dễ quản lý, bảo trì và tái sử dụng. Hệ sinh thái của React rất lớn mạnh với các thư viện hỗ trợ như React Router cho việc điều hướng và Redux cho state management, giúp xử lý các luồng dữ liệu phức tạp trong một ứng dụng bán hàng. Những đặc tính này làm cho ReactJS trở thành lựa chọn ưu việt để xây dựng các ứng dụng trang đơn (SPA) nhanh, mượt mà và có khả năng mở rộng tốt.

II. Phân tích yêu cầu khi xây dựng website bán sách cơ bản

Để bắt đầu xây dựng website bán sách sử dụng ReactJS, bước đầu tiên và quan trọng nhất là khảo sát và phân tích yêu cầu hệ thống một cách chi tiết. Quá trình này giúp xác định rõ các chức năng cần có và các tiêu chuẩn cần đáp ứng để hệ thống hoạt động hiệu quả. Theo tài liệu nghiên cứu, hệ thống được chia làm hai phần chính: phía khách hàng và phía quản trị viên. Mỗi bên có những yêu cầu chức năng riêng biệt nhằm đảm bảo luồng hoạt động kinh doanh được thông suốt. Ngoài ra, các yêu cầu phi chức năng như hiệu năng, tính bảo mật, và khả năng sử dụng cũng đóng vai trò then chốt trong việc quyết định sự thành công của dự án. Việc xác định đúng và đủ các yêu cầu từ ban đầu sẽ là nền tảng vững chắc cho các giai đoạn thiết kế cơ sở dữ liệu, phát triển giao diện và lập trình logic nghiệp vụ sau này, tránh được các sai sót và chi phí phát sinh không đáng có.

2.1. Yêu cầu chức năng cho người dùng và quản trị viên

Phân tích từ đồ án cho thấy, yêu cầu chức năng được định nghĩa rõ ràng. Về phía khách hàng, hệ thống phải cung cấp các tính năng cơ bản như đăng ký, đăng nhập, sửa thông tin cá nhân, tìm kiếm sách, xem danh sách sản phẩm theo chủ đề, xem chi tiết sản phẩm, và quan trọng nhất là chức năng quản lý giỏ hàng React (thêm, xóa, cập nhật) và đặt hàng. Về phía quản trị viên, các chức năng tập trung vào việc quản lý hệ thống, bao gồm: quản lý danh mục, quản lý sách (thêm, sửa, xóa), quản lý tài khoản người dùng và quản lý đơn hàng. Đây là những chức năng cốt lõi để duy trì hoạt động của một website thương mại điện tử.

2.2. Các yêu cầu phi chức năng Hiệu năng và giao diện UI UX

Bên cạnh chức năng, các yêu cầu phi chức năng quyết định chất lượng trải nghiệm người dùng. Hệ thống cần đảm bảo hoạt động ổn định, tốc độ phản hồi nhanh và đáng tin cậy. Giao diện UI/UX phải được thiết kế thân thiện, dễ sử dụng, logic và nhất quán trên toàn bộ website. Điều này giúp người dùng dễ dàng tìm kiếm thông tin và thực hiện giao dịch mà không gặp trở ngại. Về mặt kỹ thuật, ứng dụng phải có khả năng mở rộng để đáp ứng lượng truy cập tăng trong tương lai và phải tuân thủ các quy định pháp lý, không vi phạm bản quyền.

III. Hướng dẫn thiết kế Backend và cơ sở dữ liệu cho web sách

Nền tảng của một website bán sách mạnh mẽ nằm ở hệ thống backend và cơ sở dữ liệu được thiết kế tốt. Mặc dù trọng tâm của dự án là frontend với ReactJS, việc xây dựng một backend vững chắc để cung cấp dữ liệu là không thể thiếu. Một kiến trúc phổ biến và hiệu quả là sử dụng Node.js Express để xây dựng các RESTful API. Kiến trúc này cho phép frontend và backend giao tiếp một cách độc lập thông qua các endpoint API tiêu chuẩn. Về phần lưu trữ, một hệ quản trị cơ sở dữ liệu MongoDB hoặc SQL được sử dụng để mô hình hóa và lưu trữ toàn bộ dữ liệu của hệ thống, từ thông tin sản phẩm, người dùng cho đến các đơn hàng. Việc thiết kế các bảng (collections) và mối quan hệ giữa chúng một cách logic sẽ đảm bảo tính toàn vẹn dữ liệu, hiệu suất truy vấn và khả năng bảo trì hệ thống. Đây là bước quan trọng để đảm bảo quá trình xây dựng website bán sách sử dụng ReactJS diễn ra suôn sẻ.

3.1. Xây dựng RESTful API với Node.js Express cho hệ thống

Một API bán sách theo chuẩn RESTful là cầu nối giữa giao diện người dùng ReactJS và cơ sở dữ liệu. Sử dụng Node.js Express, nhà phát triển có thể tạo ra các endpoint cho mọi hoạt động nghiệp vụ: lấy danh sách sách, lấy chi tiết một sản phẩm, xử lý đăng nhập/đăng ký, quản lý giỏ hàng, và tạo đơn hàng. Mỗi endpoint tương ứng với một hành động cụ thể (GET, POST, PUT, DELETE) trên một tài nguyên (ví dụ: /api/products, /api/users). Việc tách biệt này giúp đội ngũ frontend và backend có thể làm việc song song, đồng thời giúp ứng dụng dễ dàng mở rộng hoặc tích hợp với các nền tảng khác sau này.

3.2. Mô hình hóa dữ liệu Người dùng Sách và Đơn hàng

Thiết kế cơ sở dữ liệu là xương sống của hệ thống. Trong đồ án, các thực thể chính được mô hình hóa bao gồm: USER (lưu thông tin tài khoản), CATEGORY (danh mục sách), PRODUCT (thông tin chi tiết sách), SALE_ORDER (đơn hàng), và ORDER_ITEM (chi tiết các sản phẩm trong đơn hàng). Mỗi thực thể được biểu diễn bằng một bảng với các thuộc tính rõ ràng. Ví dụ, bảng PRODUCT chứa các thông tin như tên sách, tác giả, giá, mô tả và khóa ngoại liên kết đến CATEGORY. Việc thiết lập các mối quan hệ (một-nhiều, nhiều-nhiều) giữa các bảng này một cách chính xác là cực kỳ quan trọng để đảm bảo dữ liệu nhất quán và truy vấn hiệu quả.

IV. Cách xây dựng website bán sách sử dụng ReactJS chi tiết

Giai đoạn triển khai frontend là nơi sức mạnh của ReactJS được thể hiện rõ nhất trong việc xây dựng website bán sách. Quá trình này bắt đầu bằng việc thiết lập môi trường phát triển và cấu trúc thư mục dự án một cách khoa học. Các trang chính như Trang chủ, Trang sản phẩm, Chi tiết sản phẩm, Giỏ hàng được xây dựng dưới dạng các component riêng biệt. React Router được sử dụng để quản lý việc điều hướng giữa các trang, tạo ra trải nghiệm mượt mà như một ứng dụng máy tính. Một trong những thách thức lớn nhất là quản lý trạng thái (state) của ứng dụng, đặc biệt là dữ liệu giỏ hàng và thông tin người dùng. Các công cụ như React Hooks (useState, useContext) hoặc các thư viện state management chuyên dụng như Redux được áp dụng để giải quyết vấn đề này. Cuối cùng, việc bảo mật được đảm bảo thông qua cơ chế xác thực người dùng JWT (JSON Web Tokens), giúp xác thực và phân quyền người dùng một cách an toàn.

4.1. Cấu trúc component và quản lý điều hướng với React Router

Một hướng dẫn ReactJS hiệu quả luôn bắt đầu bằng việc chia nhỏ giao diện thành các component. Ví dụ, trang danh sách sản phẩm có thể bao gồm các component con như ProductCard, FilterSidebar, và Pagination. Cách tiếp cận này giúp mã nguồn dễ đọc, dễ bảo trì và tái sử dụng. Để kết nối các trang này với nhau, React Router đóng vai trò là thư viện điều hướng chính, cho phép định nghĩa các đường dẫn (routes) cho từng component trang và xử lý việc chuyển trang mà không cần tải lại toàn bộ trình duyệt, mang lại trải nghiệm người dùng nhanh chóng.

4.2. Kỹ thuật quản lý giỏ hàng React và state management

Chức năng quản lý giỏ hàng React là một bài toán kinh điển về state management. Trạng thái của giỏ hàng (danh sách sản phẩm, số lượng, tổng tiền) cần được duy trì và truy cập từ nhiều component khác nhau (ví dụ: nút 'Thêm vào giỏ' trên trang sản phẩm và biểu tượng giỏ hàng trên thanh điều hướng). Sử dụng Context API kết hợp với React Hooks (useReducer) là một cách hiệu quả để tạo ra một state toàn cục cho giỏ hàng. Đối với các ứng dụng phức tạp hơn, Redux cung cấp một cấu trúc chặt chẽ hơn để quản lý luồng dữ liệu, giúp ứng dụng dễ dự đoán và gỡ lỗi hơn.

4.3. Tích hợp chức năng xác thực người dùng JWT an toàn

Bảo mật là yếu tố không thể xem nhẹ. Chức năng xác thực người dùng JWT là một tiêu chuẩn hiện đại. Khi người dùng đăng nhập thành công, backend sẽ cấp một token (JWT). Token này sau đó được lưu trữ ở phía client (ví dụ: trong localStorage) và được gửi kèm theo mỗi yêu cầu tới các API cần bảo vệ. Backend sẽ xác thực token này để đảm bảo người dùng có quyền truy cập vào tài nguyên tương ứng. Phương pháp này không chỉ an toàn mà còn là stateless, phù hợp với kiến trúc API hiện đại.

V. Kết quả và các chức năng chính từ source code website bán sách

Sản phẩm cuối cùng của dự án là một hệ thống website hoàn chỉnh, bao gồm hai giao diện riêng biệt cho khách hàng và quản trị viên, được xây dựng dựa trên source code website bán sách đã phát triển. Giao diện người dùng được thiết kế trực quan, cho phép thực hiện đầy đủ các nghiệp vụ từ tìm kiếm, xem thông tin đến đặt hàng. Hệ thống quản trị cung cấp một bảng điều khiển mạnh mẽ, giúp người quản lý có thể dễ dàng theo dõi và vận hành các hoạt động của cửa hàng trực tuyến. Mặc dù vẫn còn một số hạn chế, dự án đã thành công trong việc áp dụng công nghệ ReactJS để giải quyết một bài toán kinh doanh thực tế. Quy trình deploy ứng dụng React lên một máy chủ cũng được xem là bước cuối cùng để đưa sản phẩm đến với người dùng cuối, hoàn tất chu trình phát triển phần mềm.

5.1. Thiết kế giao diện UI UX thân thiện cho khách hàng

Giao diện phía khách hàng được thiết kế với tiêu chí đơn giản, sạch sẽ và tập trung vào sản phẩm. Trang chủ hiển thị các đầu sách nổi bật và danh mục chính. Chức năng tìm kiếm và lọc sản phẩm giúp người dùng nhanh chóng tìm thấy cuốn sách mong muốn. Trang chi tiết sản phẩm cung cấp đầy đủ thông tin, hình ảnh và mô tả. Quy trình thanh toán được thiết kế thành các bước rõ ràng để giảm thiểu tỷ lệ hủy đơn hàng. Toàn bộ giao diện UI/UX được xây dựng bằng các thư viện component React như Material-UI hoặc Ant Design để đảm bảo tính nhất quán và chuyên nghiệp.

5.2. Chức năng quản trị Quản lý sản phẩm đơn hàng tài khoản

Trang quản trị là trung tâm điều hành của website. Tại đây, quản trị viên có thể thực hiện các thao tác CRUD (Create, Read, Update, Delete) đối với danh mục và sách. Giao diện quản lý đơn hàng cho phép xem chi tiết từng đơn và cập nhật trạng thái (ví dụ: đang xử lý, đã giao hàng). Chức năng quản lý tài khoản cho phép xem thông tin người dùng và phân quyền, đảm bảo an ninh hệ thống. Các chức năng này giúp tự động hóa và số hóa các quy trình vốn được thực hiện thủ công trước đây.

VI. Tổng kết đánh giá và hướng phát triển website bán sách

Việc xây dựng website bán sách sử dụng ReactJS theo mô hình của đồ án đã đạt được những mục tiêu cơ bản đề ra. Sản phẩm cuối cùng đã đáp ứng được nhu cầu bán hàng trực tuyến và quản lý cơ bản của một cửa hàng sách. Quá trình thực hiện đã chứng tỏ ReactJS là một công nghệ mạnh mẽ và phù hợp cho các dự án thương mại điện tử. Tuy nhiên, như trong mọi dự án thực tế, luôn có những điểm cần cải thiện và không gian để phát triển thêm. Việc nhận diện rõ các hạn chế này là cơ sở để đề ra các hướng nâng cấp trong tương lai, giúp hệ thống trở nên hoàn thiện, chuyên nghiệp và có khả năng cạnh tranh cao hơn trên thị trường. Các cải tiến có thể tập trung vào việc nâng cao trải nghiệm người dùng, mở rộng chức năng và tối ưu hóa cho công cụ tìm kiếm.

6.1. Đánh giá ưu và nhược điểm của dự án thực tế

Ưu điểm lớn nhất của dự án là đã xây dựng thành công một hệ thống hoạt động được, áp dụng các công nghệ hiện đại và giải quyết được bài toán thực tế của cửa hàng. Tuy nhiên, nhược điểm được ghi nhận trong báo cáo là hệ thống chưa có chức năng thanh toán trực tuyến, một tính năng thiết yếu trong thương mại điện tử hiện nay. Ngoài ra, website chưa cho phép khách hàng hủy đơn hàng và chưa có các chức năng thống kê, báo cáo doanh thu cho phía quản trị, làm giảm tính chuyên nghiệp và khả năng phân tích kinh doanh.

6.2. Hướng phát triển Tích hợp thanh toán và tối ưu SEO

Để hoàn thiện sản phẩm, hướng phát triển trong tương lai là rất rõ ràng. Trước hết, cần ưu tiên tích hợp các cổng thanh toán trực tuyến phổ biến như Momo, VNPay để đa dạng hóa phương thức thanh toán cho khách hàng. Tiếp theo, cần xây dựng module thống kê, báo cáo để hỗ trợ quản trị viên ra quyết định kinh doanh. Một hướng đi quan trọng khác là tối ưu hóa SEO. Các ứng dụng ReactJS thuần (Client-Side Rendering) thường gặp khó khăn với SEO. Do đó, việc chuyển đổi hoặc áp dụng Next.js e-commerce (Server-Side Rendering) là một giải pháp chiến lược để cải thiện thứ hạng trên các công cụ tìm kiếm, thu hút thêm khách hàng tiềm năng.

Nội dung chính

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

Sự phát triển của Internet và các nền tảng thương mại điện tử đã làm thay đổi phương thức mua sắm truyền thống, đưa mua sắm trực tuyến trở thành xu thế phổ biến phục vụ nhu cầu của cả người bán và người mua. Xu hướng này càng thể hiện rõ nét hơn dưới tác động của đại dịch Covid-19. Xuất phát từ nhu cầu thực tiễn giúp độc giả tìm kiếm và mua sách tại nhà thuận tiện, tiết kiệm thời gian, đồng thời vận dụng kiến thức chuyên ngành Kỹ thuật phần mềm vào thực tế, tác giả Ngô Chung Á Âu đã thực hiện đề tài "Xây dựng website bán sách cho cửa hàng Tâm An sử dụng công nghệ ReactJS" dưới sự hướng dẫn của Th.S Ngô Thị Bích Thúy tại Trường Đại học Công nghiệp Hà Nội (2022).

Khảo sát thực tế tại Cửa hàng sách Tâm An ghi nhận các đặc điểm hoạt động như sau:

• Địa chỉ: Số 34 đường Hồ Tùng Mậu, phường Mai Dịch, quận Cầu Giấy, Hà Nội.
• Thời gian hoạt động: Bắt đầu hoạt động từ tháng 2/2020.
• Quy mô và mặt bằng: Diện tích 200 m², trong đó 2/3 diện tích dùng để trưng bày sách và 1/3 diện tích bố trí bàn ghế phục vụ độc giả đọc sách và mua sắm tại chỗ.
• Nguồn và thể loại sách: Nguồn sách nhập từ các nhà xuất bản như Nhà xuất bản Trẻ, Nhà xuất bản Kim Đồng, Nhà xuất bản Giáo Dục... Các thể loại chính gồm: chính trị, kinh tế, kỹ năng, lịch sử, văn học, nghệ thuật, truyện tranh.
• Khách hàng mục tiêu: Học sinh, sinh viên, thanh thiếu niên, nhi đồng.
• Cơ cấu nhân sự: Gồm nhân viên bán hàng kiêm thu ngân (1 vị trí), nhân viên tiếp thị, nhân viên vệ sinh, nhân viên bảo vệ kiêm giữ xe.
• Hiện trạng công nghệ: Mức độ tự động hóa dừng lại ở việc nhập và in hóa đơn từ một máy tính. Việc quản lý sản phẩm vẫn thực hiện bằng sổ sách giấy tờ, thiếu tính linh hoạt, khách hàng phải chờ đợi thanh toán và cửa hàng chưa tiếp cận được khách hàng ở khu vực xa.

Mục tiêu của đề tài:

1. Xây dựng một website giúp khách hàng xem, tìm kiếm các sản phẩm sách mà cửa hàng đang bày bán và thực hiện đặt hàng trực tuyến; hệ thống bao gồm các module dành cho khách hàng và module dành cho quản trị viên.
2. Vận dụng kiến thức đã học, rèn luyện và phát triển kỹ năng lập trình với thư viện ReactJS.

Nhiệm vụ nghiên cứu và thực hiện:

1. Khảo sát thực tiễn hoạt động và khảo sát hệ thống tại cửa hàng.
2. Phân tích và thiết kế hệ thống phần mềm.
3. Xây dựng và thiết kế cơ sở dữ liệu quan hệ.
4. Lập trình và cài đặt các module chức năng của hệ thống.

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

• Đối tượng nghiên cứu: Quy trình nghiệp vụ bán hàng, tiếp thị, quản lý tại cửa hàng sách Tâm An và hệ thống website thương mại điện tử.
• Phạm vi nghiên cứu: Xây dựng website bán hàng ở mức độ cơ bản, tập trung vào các chức năng xem sản phẩm, tìm kiếm, đặt hàng cho khách hàng và chức năng quản lý danh mục, sách, tài khoản, đơn hàng cho quản trị viên.

---

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

Đồ án tiếp cận bài toán xây dựng phần mềm thương mại điện tử dựa trên các phương pháp thu thập dữ liệu thực tế và quy trình phân tích thiết kế hệ thống hướng đối tượng:

Phương pháp thu thập dữ liệu và khảo sát:

• Quan sát trực tiếp: Ghi nhận quy trình vận hành, bố trí không gian và luồng phục vụ khách hàng tại cửa hàng sách Tâm An.
• Phỏng vấn: Trao đổi trực tiếp với người quản lý, nhân viên bán hàng kiêm thu ngân và khách hàng nhằm xác định yêu cầu nghiệp vụ.
• Nghiên cứu biểu mẫu: Thu thập, phân tích sổ sách, mẫu hóa đơn và chứng từ đang được sử dụng trong hoạt động bán hàng thủ công.

Phương pháp phân tích và thiết kế hệ thống:

• Mô hình hóa chức năng thông qua biểu đồ ca sử dụng (Use Case Diagram) và bảng đặc tả chi tiết từng ca sử dụng.
• Thiết kế động học hệ thống bằng Biểu đồ trình tự (Sequence Diagram).
• Mô hình hóa cấu trúc tĩnh bằng Biểu đồ lớp phân tích (VOPC - View of Participating Classes).
• Mô hình hóa dữ liệu quan hệ và thiết kế cấu trúc các bảng dữ liệu.

Nền tảng công nghệ và lý thuyết sử dụng:

• Ngôn ngữ TypeScript: Ngôn ngữ mã nguồn mở phát triển bởi Microsoft, là tập siêu cú pháp của JavaScript, hỗ trợ lập trình hướng đối tượng (kế thừa, đóng gói, constructor, abstract, interface), cấu trúc module hóa và tương thích chuẩn ECMAScript 2015 (ES6).
• Thư viện ReactJS: Thư viện JavaScript mã nguồn mở chuyên biệt để xây dựng giao diện người dùng theo hướng ứng dụng đơn trang (Single Page Application - SPA). Các cơ chế chính gồm: Component, Virtual DOM (tối ưu hóa re-render), cú pháp JSX (kết hợp JavaScript và XML), Props & State, One-way data binding, thư viện quản lý trạng thái tập trung Redux và React Hooks (từ phiên bản 16.8).
• Hệ quản trị cơ sở dữ liệu: Hỗ trợ triển khai trên SQL Server 2014 hoặc MySQL.

---

Thiết kế và triển khai

Hệ thống được thiết kế thành hai phân hệ độc lập: Website bán sách dành cho khách hàng và Website quản lý dành cho quản trị viên.

Yêu cầu cấu hình hệ thống

Hệ thống xác định các yêu cầu kỹ thuật tối thiểu để triển khai và vận hành:

Thành phần	Yêu cầu kỹ thuật theo văn bản
Phần cứng (Hardware)	- Bộ xử lý: 32-bit (x86) hoặc 64-bit (x64), tốc độ từ 1 GHz trở lên. - Bộ nhớ RAM: Tối thiểu 4 GB. - Dung lượng đĩa cứng: Còn trống từ 128 GB trở lên. - Trang bị thêm các thiết bị ngoại vi phục vụ vận hành hệ thống.
Phần mềm (Software)	- Hệ điều hành: Microsoft Windows 7 trở lên. - Hệ quản trị cơ sở dữ liệu: SQL Server 2014 hoặc MySQL.
Yêu cầu phi chức năng	- Hệ thống hoạt động ổn định, tốc độ xử lý nhanh, đảm bảo độ tin cậy. - Giao diện thân thiện, dễ sử dụng. - Đảm bảo tính pháp lý, quyền sở hữu của cửa hàng Tâm An và không vi phạm bản quyền.

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

Cơ sở dữ liệu của hệ thống gồm 7 bảng dữ liệu quan hệ:

Tên bảng	Mục đích lưu trữ	Các trường dữ liệu chính
USER	Lưu trữ thông tin tài khoản người dùng và quản trị viên	ID tài khoản, họ, tên, email, số điện thoại, địa chỉ, tên tài khoản, mật khẩu, vai trò, ngày tạo, ngày cập nhật.
CATEGORY	Lưu danh mục các chủ đề sách	ID danh mục, tên danh mục, mô tả, ngày tạo, ngày cập nhật.
PRODUCT	Lưu thông tin chi tiết các đầu sách	ID sách, tên sách, mô tả, giá bán, tác giả, số trang, số lượng hiện có, số lượng đã bán, ngày tạo, ngày cập nhật, ID danh mục.
PRODUCT_IMAGE	Lưu thông tin hình ảnh của sách	ID ảnh, link ảnh, ngày tạo, ngày cập nhật, ID sách.
SALE_ORDER	Lưu thông tin đơn đặt hàng	ID đơn hàng, họ tên người nhận, số điện thoại người nhận, địa chỉ người nhận, tổng tiền, ngày tạo, ngày cập nhật, ID tài khoản.
ORDER_ITEM	Lưu chi tiết từng mặt hàng trong đơn hàng	ID đơn hàng, ID sản phẩm, số lượng đặt mua.
DELIVERY	Lưu trạng thái xử lý và giao hàng của đơn	ID trạng thái đơn hàng, trạng thái đơn hàng, ID đơn hàng, ngày tạo, ngày cập nhật.

Quan hệ ràng buộc giữa các thực thể dữ liệu:

• Một danh mục (CATEGORY) chứa từ 0 đến nhiều sách (PRODUCT).
• Mỗi đầu sách (PRODUCT) có 1 hoặc nhiều hình ảnh (PRODUCT_IMAGE).
• Một tài khoản (USER) có thể tạo từ 0 đến nhiều đơn hàng (SALE_ORDER).
• Mỗi đơn hàng (SALE_ORDER) có ít nhất một chi tiết đơn hàng (ORDER_ITEM).
• Mỗi đơn hàng (SALE_ORDER) chỉ gắn với duy nhất một trạng thái giao hàng (DELIVERY).

---

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

Chương 1: Khảo sát yêu cầu của hệ thống

Chương này trình bày chi tiết kết quả khảo sát sơ bộ và khảo sát nghiệp vụ tại Cửa hàng sách Tâm An (địa chỉ 34 Hồ Tùng Mậu, thành lập 2/2020, quy mô 200 m²). Tác giả làm rõ các hạn chế trong khâu quản lý sổ sách và thanh toán thủ công, từ đó xác định danh mục yêu cầu:

• Yêu cầu chức năng phía khách hàng (8 chức năng): Đăng ký tài khoản, Đăng nhập, Sửa thông tin cá nhân, Tìm kiếm sách theo tên, Xem danh sách sách theo chủ đề, Xem chi tiết sách, Thêm sách vào giỏ hàng, Đặt hàng.
• Yêu cầu chức năng phía quản trị viên (5 nhóm chức năng): Đăng nhập hệ thống, Quản lý danh mục sách, Quản lý sách, Quản lý tài khoản người dùng, Quản lý đơn hàng.
• Yêu cầu phi chức năng và hạ tầng: Tính ổn định, tính thân thiện, yêu cầu phần cứng (CPU 1 GHz, RAM 4GB, HDD trống 128GB), phần mềm (Windows 7+, SQL Server 2014/MySQL) và tính pháp lý.

Chương 2: Phân tích yêu cầu chức năng hệ thống

Chương 2 mô hình hóa chức năng hệ thống thông qua biểu đồ ca sử dụng (Use Case) và xây dựng tài liệu đặc tả chi tiết cho toàn bộ các ca sử dụng. Mỗi ca sử dụng được đặc tả đầy đủ theo cấu trúc: mô tả tóm tắt, luồng sự kiện cơ bản, luồng sự kiện rẽ nhánh (xử lý khi nhập sai dữ liệu, tài khoản không hợp lệ hoặc lỗi mất kết nối cơ sở dữ liệu), tiền điều kiện và hậu điều kiện:

• Phân hệ khách hàng: Đặc tả chi tiết các use case Đăng ký, Đăng nhập, Sửa thông tin cá nhân, Tìm kiếm, Xem sách theo chủ đề, Xem chi tiết sách, Thêm vào giỏ hàng, Đặt hàng.
• Phân hệ quản trị: Đặc tả chi tiết các use case Quản lý danh mục (thêm, xem chi tiết, sửa, xóa), Quản lý sách (thêm, xem chi tiết, sửa, xóa), Quản lý tài khoản (xem chi tiết, cập nhật quyền người dùng/quản trị viên, xóa tài khoản), Quản lý đơn hàng (xem thông tin đơn hàng, cập nhật trạng thái đơn hàng).

Chương 3: Thiết kế cơ sở dữ liệu

Nội dung chương tập trung vào mô hình hóa dữ liệu và thiết kế chi tiết 7 bảng dữ liệu quan hệ (USER, CATEGORY, PRODUCT, PRODUCT_IMAGE, SALE_ORDER, ORDER_ITEM, DELIVERY). Tác giả xác định rõ các trường khóa chính, khóa ngoại, kiểu dữ liệu, các ràng buộc toàn vẹn và sơ đồ quan hệ liên kết giữa các bảng.

Chương 4: Thiết kế các chức năng của hệ thống

Tác giả hiện thực hóa phân tích động và tĩnh cho toàn bộ 11 ca sử dụng chính trong hệ thống. Với mỗi ca sử dụng, chương cung cấp:

• Biểu đồ trình tự (Sequence Diagram): Thể hiện trình tự tương tác giữa các đối tượng từ giao diện người dùng, bộ điều khiển đến các thực thể dữ liệu theo thời gian thực.
• Biểu đồ lớp phân tích (VOPC - View of Participating Classes): Xác định các lớp tham gia thực hiện ca sử dụng gồm lớp biên (Boundary), lớp điều khiển (Control) và lớp thực thể (Entity).

Chương 5: Thiết kế giao diện và cài đặt

Chương 5 trình bày sơ đồ điều hướng màn hình cho 2 phân hệ (Website bán sách và Website quản lý) cùng thiết kế chi tiết các màn hình giao diện thực tế:

• Giao diện phía khách hàng: Trang chủ, Đăng ký, Đăng nhập, Sửa thông tin cá nhân, Tìm kiếm, Xem sách theo chủ đề, Xem chi tiết sách, Giỏ hàng, Đặt hàng, Lịch sử đặt hàng.
• Giao diện phía quản trị viên: Đăng nhập quản trị, Quản lý danh mục (danh sách, thêm mới, xem, sửa, xóa), Quản lý sách (danh sách, thêm mới, xem, sửa, xóa), Quản lý tài khoản (danh sách, xem, cập nhật quyền, xóa), Quản lý đơn hàng (danh sách, xem chi tiết, cập nhật trạng thái).
• Cơ sở lý thuyết cài đặt: Trình bày chi tiết cú pháp, ưu điểm của ngôn ngữ TypeScript và kiến trúc thư viện ReactJS (Component, Virtual DOM, JSX, Props, State, Redux, One-way data binding, Hooks).

Chương 6: Tổng kết và đánh giá

Chương cuối tổng kết toàn bộ quá trình thực hiện đồ án, đối chiếu kết quả sản phẩm website đạt được so với mục tiêu đặt ra, đánh giá các mặt hạn chế còn tồn tại và đề xuất định hướng nâng cấp trong tương lai.

---

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

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

• Hoàn thành quyển báo cáo đồ án tốt nghiệp với đầy đủ tài liệu khảo sát, hồ sơ phân tích thiết kế hệ thống theo chuẩn UML và thiết kế cơ sở dữ liệu quan hệ.
• Xây dựng hoàn chỉnh 2 website hoạt động:
  1. Website bán hàng trực tuyến dành cho khách hàng: Cho phép đăng ký/đăng nhập, tìm kiếm sách theo tên, xem sách theo danh mục chủ đề, xem thông tin chi tiết (tác giả, giá, số trang, số lượng), thêm sách vào giỏ hàng, đặt hàng và tra cứu lịch sử mua hàng.
  2. Website quản lý dành cho quản trị viên: Thực hiện đầy đủ các chức năng quản lý danh mục sách (CRUD), quản lý đầu sách và hình ảnh kèm theo (CRUD), quản lý tài khoản và phân quyền người dùng (User/Admin), theo dõi thông tin đơn hàng và cập nhật trạng thái giao hàng.

Đóng góp tự nêu của tác giả

• Ứng dụng thành công thư viện ReactJS kết hợp ngôn ngữ TypeScript và Redux vào xây dựng hệ thống thương mại điện tử đơn trang (SPA), giúp tối ưu hiệu năng hiển thị thông qua Virtual DOM và cấu trúc module hóa dễ bảo trì.
• Giải quyết bài toán chuyển đổi phương thức kinh doanh từ thủ công tại chỗ sang mô hình kết hợp trực tuyến cho Cửa hàng sách Tâm An, đáp ứng nhu cầu mở rộng phạm vi tiếp cận khách hàng.

---

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

Hạn chế được ghi nhận trong văn bản

• Hệ thống chưa tích hợp chức năng thanh toán trực tuyến qua cổng thanh toán (chỉ xử lý nghiệp vụ đặt hàng và thanh toán trực tiếp khi nhận sách).
• Chưa cung cấp tính năng cho phép khách hàng chủ động hủy đơn hàng sau khi đã đặt.
• Trải nghiệm người dùng (UI/UX) trên website vẫn còn ở mức cơ bản, cần tối ưu thêm.
• Phía phân hệ quản trị chưa xây dựng chức năng thống kê doanh số, báo cáo bán hàng và in ấn biểu mẫu thống kê.

Hướng nghiên cứu và phát triển tiếp theo

• Nâng cấp, bổ sung tính năng thanh toán trực tuyến qua các cổng thanh toán điện tử.
• Phát triển chức năng hủy đơn hàng dành cho khách hàng.
• Nghiên cứu và tối ưu hóa trải nghiệm người dùng, cải thiện giao diện giao dịch.
• Xây dựng module thống kê kinh doanh, vẽ biểu đồ báo cáo và hỗ trợ xuất/in tài liệu thống kê cho người quản trị cửa hàng.

---

Giá trị tham khảo

Báo cáo đồ án mang lại giá trị tham khảo cụ thể cho các đối tượng sau:

• Sinh viên ngành Kỹ thuật phần mềm và Công nghệ thông tin: Tài liệu tham khảo trực tiếp về quy trình thực hiện một đồ án tốt nghiệp xây dựng ứng dụng web thương mại điện tử, từ bước khảo sát thực tế đến phân tích thiết kế hệ thống.
• Người học phân tích thiết kế hướng đối tượng: Cung cấp mẫu đặc tả use case chuẩn mực, đi kèm hệ thống biểu đồ trình tự (Sequence Diagram) và biểu đồ lớp phân tích (VOPC) cho 11 ca sử dụng nghiệp vụ bán hàng và quản trị dữ liệu.
• Lập trình viên phát triển Web Frontend: Tham khảo cấu trúc cơ sở dữ liệu quan hệ (7 bảng) cho hệ thống bán sách và tài liệu tổng hợp kiến trúc công nghệ ReactJS kết hợp TypeScript, Redux, React Hooks.

---

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

1. Địa chỉ và quy mô thực tế của Cửa hàng sách Tâm An được khảo sát trong đồ án là gì?
Cửa hàng sách Tâm An có địa chỉ tại số 34 đường Hồ Tùng Mậu, phường Mai Dịch, quận Cầu Giấy, Hà Nội; bắt đầu hoạt động từ tháng 2/2020. Cửa hàng có diện tích 200 m², trong đó 2/3 diện tích dùng trưng bày sách và 1/3 diện tích phục vụ độc giả ngồi đọc tại chỗ.

2. Cơ sở dữ liệu của hệ thống gồm bao nhiêu bảng và mối quan hệ giữa các bảng được thiết lập như thế nào?
Cơ sở dữ liệu gồm 7 bảng: USER, CATEGORY, PRODUCT, PRODUCT_IMAGE, SALE_ORDER, ORDER_ITEM và DELIVERY. Ràng buộc dữ liệu gồm: 1 danh mục có 0 hoặc nhiều sách; 1 sách có 1 hoặc nhiều ảnh; 1 tài khoản có 0 hoặc nhiều đơn hàng; 1 đơn hàng có ít nhất 1 chi tiết đơn hàng và chỉ gắn với duy nhất 1 trạng thái giao hàng.

3. Phân hệ quản trị hỗ trợ những chức năng xử lý đơn hàng và tài khoản nào?
Quản trị viên có thể xem danh sách và thông tin chi tiết đơn hàng (họ tên, số điện thoại, địa chỉ người nhận, danh sách sách mua, số lượng), cập nhật trạng thái đơn hàng trong bảng DELIVERY. Với tài khoản, quản trị viên có thể xem chi tiết thông tin, cập nhật phân quyền (Người dùng / Quản trị viên) và xóa tài khoản trong bảng USER.

4. Những đặc trưng kỹ thuật nào của ReactJS được tác giả sử dụng trong đồ án?
Đồ án sử dụng kiến trúc Component, Virtual DOM (tối ưu hóa re-render), cú pháp JSX, cơ chế Props & State, One-way data binding, thư viện quản lý trạng thái Redux (quản lý state tập trung qua actions) và React Hooks (từ phiên bản 16.8 giúp quản lý state mà không cần dùng ES6 Class).

5. Những chức năng quan trọng nào mà hệ thống website chưa thực hiện được?
Theo tác giả tự đánh giá ở Chương 6, hệ thống còn thiếu: chức năng thanh toán trực tuyến, chức năng hủy đơn đặt hàng cho khách hàng, trải nghiệm người dùng chưa hoàn thiện và phía quản trị chưa có module thống kê cũng như in báo cáo thống kê.

---

Kết luận

Đồ án tốt nghiệp của sinh viên Ngô Chung Á Âu đã hoàn thành quy trình xây dựng website bán sách cho Cửa hàng sách Tâm An từ khâu khảo sát thực địa, mô hình hóa nghiệp vụ hướng đối tượng bằng UML đến thiết kế cơ sở dữ liệu quan hệ và xây dựng giao diện ứng dụng đơn trang với ReactJS và TypeScript. Hệ thống đã hiện thực hóa thành công hai phân hệ website phục vụ việc xem sách, tìm kiếm, đặt hàng của khách hàng và hỗ trợ quản trị danh mục, sản phẩm, tài khoản, đơn hàng cho cửa hàng. Mặc dù vẫn còn những mặt hạn chế về thanh toán trực tuyến và thống kê báo cáo, đồ án đã giải quyết được các yêu cầu nghiệp vụ cơ bản đặt ra trong thực tiễn kinh doanh của cửa hàng.

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

CHƯƠNG 1 KHẢO SÁT YÊU CẦU CỦA HỆ THỐNG 1. Khảo sát sơ bộ hệ thống 1. Mục đích  Nhằm làm rõ yêu cầu hệ thống  Tiếp cận nghiệp vụ chuyên môn, môi trường hoạt động của hệ thống.  Tìm hiểu chức năng, cách thức hoạt động của hệ thống.

 Thu thập thông tin, s{ sách, mẫu biểu phục vụ cho pha phân tích.  Thu thập thông tin nghiệp vụ, các quy trình xử lý. Phương pháp  Quan sát trực tiếp  Phỏng vấn  Nghiên cứu biểu mẫu 1. Đối tượng khảo sát  Người quản lý  Nhân viên bán hàng kiêm thu ngân  Khách hàng 1.

Kết quả sơ bộ  Tâm An là cửa hàng sách cz địa chỉ tại số 34 đường Hồ Tùng Mậu, phường Mai Dịch, quận Cầu Giấy, Hà Nội. Cửa hàng sách Tâm An bắt đầu hoạt động từ tháng 2/2020.  Cửa hàng sách Tâm An cz đa dạng thể loại sách, nguồn sách được nhập về từ các nhà xuất bản sách n{i tiếng tại Việt Nam như Nhà Xuất Bản Trẻ, Nhà Xuất Bản Kim Đồng, Nhà Xuất Bản Giáo Dục, …  Các loại sách chính đang được trưng bày tại cửa hàng là 3 chính trị, kinh tế, kĩ năng, lịch sử, văn h€c, nghệ thuật, truyện tranh. Đối tượng khách hàng hướng đến là các bạn h€c sinh, sinh viên, thanh thiếu niên, nhi đồng, …  Cz 1 vị trí bán hàng kiêm thu ngân  Quy mô: Quán cz diện tích 200 mét vuông, 2/3 diện tích dùng để trưng bày sách, 1/3 cz bàn ghế phục vụ độc giả, khách mua hàng tại cửa hàng.

Cửa hàng được trang bị đầy đủ tiện nghi, không gian đẹp, thu h•t khách hàng.  Nhân lực: o Nhân viên bán hàng kiêm thu ngân o Nhân viên tiếp thị o Nhân viên vệ sinh o Nhân viên bảo vệ kiêm giữ xe  Mức độ tự động hoá hiện tại: Nhập và in hoá đơn từ 1 máy tính  Nhược điểm: Chưa tiếp cận được các khách hàng tại khu vực xa cửa hàng, quản lý sản phẩm vẫn bằng giấy tờ, thiếu linh động. Khách hàng vẫn phải chờ để thanh toán mua sách.  Hướng phát triển của hệ thống hiện tại: Xây dựng một website vừa quản lý các sản phẩm vừa gi•p bán hàng trực tuyến.

M€i khách hàng, khách vxng lai đều cz thể truy cập vào website để xem sản phẩm và mua hàng trực tuyến. Xác định yêu cầu của hệ thống 1. Yêu cầu chức năng Phía khách hàng có các chức năng:  Đăng ký tài khoản  Đăng nhập tài khoản  Sửa thông tin cá nhân 4  Tìm kiếm  Xem danh sách sách theo chủ đề  Xem chi tiết sách  Thêm sách vào giỏ hàng  Đặt hàng Phía người quản trị có các chức năng sau:  Đăng nhập vào hệ thống  Quản lý danh mục sách  Quản lý sách  Quản lý tài khoản  Quản lý đơn hàng 1. Yêu cầu phi chức năng Yêu cầu về hệ thống  Khả năng hoạt động {n định.

 Hệ thống làm việc nhang chzng và đảm bảo tin cậy.  Giao diện d• sử dụng, thân thiện với người dùng. Yêu cầu pháp lý  Website thuộc về cửa hàng Tâm An  Không vi phạm bản quyền, pháp luật Yêu cầu về phần cứng  Bộ xử lý 32 bit (x86) hoặc 64 bit (x64) cz tốc độ từ 1 GHz trở lên.  Ram 4GB  Đĩa cứng cz dung lượng trống từ 128GB trở lên.

 Ngoài ra cần lắp đặt thêm các thiết bị ngoại vi khác phục vụ 5 cho hệ thống mới vận hành … Yêu cầu về phần mềm  Hệ điều hành Windows 7 trở lên  Hệ quản trị cơ sở dữ liệu SQL Server 2014 hoặc MySQL  Chi phí thay thế, năng cấp hệ thống máy tính là lớn.