PHẦN MỞ ĐẦU 1. Tính cấp thiết của đề tài Trong thời đại Công nghệ 4.0, phát triển hệ thống bán hàng trực tuyến không chỉ tiết kiệm thời gian và nguồn lực mà còn tối ưu hóa chi phí đầu tư. Việc tích hợp công nghệ vào quy trình kinh doanh giúp doanh nghiệp cải thiện hiệu suất làm việc, tạo điều kiện cho phát triển dịch vụ, và nâng cao trải nghiệm người dùng. Nhờ vào sự kết hợp của giao diện người dùng tối ưu và quy trình thanh toán hiệu quả, doanh nghiệp có thể thu hút khách hàng và thúc đẩy doanh số bán hàng, đồng thời sử dụng dữ liệu để đáp ứng nhanh chóng nhu cầu thị trường và tối ưu hóa chiến lược kinh doanh.
Điều này không chỉ giúp củng cố vị thế cạnh tranh mà còn định hình một trải nghiệm mua sắm trực tuyến tích cực cho người tiêu dùng. Đối tượng nghiên cứu Đối tượng nghiên cứu gồm các đơn vị quản lí bán hàng, doanh nghiệp cung cấp dịch vụ mua sách trực tuyến và đặc biệt là phân tích người dùng cuối để hiểu rõ mong muốn và trải nghiệm của họ trong việc mua sắm trực tuyến. Phạm vi nghiên cứu Thiết kế giao diện người dùng, bảo mật thông tin, tối ưu hóa quy trình mua hàng trực tuyến và phản hồi người dùng để cải thiện hệ thống. Mục tiêu của đề tài Phân tích và xây dựng hệ thống mua hàng trực tuyến, đáp ứng nhu cầu của khách hàng, tích hợp phương thức thanh toán trực tuyến, bảo mật thông tin người dùng.
Phát triển hoàn thiện các chức năng của một hệ thống thương mại bán sách 5. Ý nghĩa khoa học và thực tiễn - Ý nghĩa khoa học: + Góp phần phát triển kiến thức về công nghệ thông tin, quản lý bán hàng trực tuyến và trải nghiệm người dùng. 1 + Sử dụng ReactJS và Spring Boot để xây dựng một hệ thống mua bán trực tuyến hiệu quả và hiện đại. - Ý nghĩa thực tiễn: + Tiện ích và tiết kiệm thời gian: Người tiêu dùng có thể mua sắm mọi lúc, mọi nơi mà không cần đến cửa hàng vật lý.
+ Mở rộng thị trường và tăng hiệu quả bán hàng: Doanh nghiệp có thể tiếp cận nhiều khách hàng trực tuyến hơn, không bị giới hạn bởi địa lý. + Bảo mật thông tin: Hệ thống cung cấp các phương thức thanh toán an toàn, đảm bảo bảo mật cho người dùng. 2 PHẦN NỘI DUNG I.1 Khái niệm ReactJs React (hay còn được gọi là React.js hoặc ReactJS) là một thư viện JavaScript front-end mã nguồn mở và miễn phí để xây dựng giao diện người dùng dựa trên các thành phần UI riêng lẻ. Nó được phát triển và duy trì bởi Meta (trước đây là Facebook) và cộng đồng các nhà phát triển và công ty cá nhân[1].
ReactJS tập trung vào việc quản lý trạng thái và xây dựng các thành phần tái sử dụng, giúp tối ưu hóa hiệu suất và linh hoạt trong phát triển.1 Virtual DOM - Dom thực tế: là biểu diễn của cấu trúc HTML thực sự trên trang web. Virtual DOM : Cơ chế tối ưu hóa hiệu suất, tạo bản sao tạm thời của DOM để cập nhật nhanh chóng và hiệu quả. - Cơ chế hoạt động: + Mỗi khi có sự thay đổi state hoặc prop React tạo ra một bản sao tạm thời của DOM hiện tại, gọi là Virtual DOM. + React so sánh Virtual DOM mới với Virtual DOM trước đó (trạng thái trước khi có thay đổi) để xác nhận các thành phần được cập nhật.
+ React so sánh từng thành phần của Virtual DOM để xác định sự khác biệt giữa chúng và tọa ra danh sách cần đồng bộ. Cuối cùng sẽ cập nhật DOM thực tế với những thành phần cần thay đổi.2 JSX JSX là một cú pháp mở rộng của JavaScript, giúp viết mã HTML trong JavaScript một cách dễ đọc và hiểu.3 Prop & state a) Props: Props là viết tắt của "properties" (thuộc tính) và là một cách để truyền dữ liệu từ một component cha xuống các component con. Props là không thay đổi (immutable), có nghĩa là một component con không thể thay đổi giá trị của props mà nó nhận được. Được truyền dưới dạng các thuộc tính của các thẻ React trong JSX.
b) State: State là dữ liệu mà một component có thể giữ và theo dõi trong quá trình thời gian chạy. State chỉ tồn tại trong các component lớp (class components), và có thể được khởi tạo trong hàm constructor. Khi state thay đổi, React sẽ tự động render lại component để hiển thị thông tin mới 1.4 Component Component là một khối hàm/class được xây dựng độc lập và tái sử dụng để phát triẻn ứng dụng web. Thông qua componet người dùng có thể thiết kế giao diện web nhanh chóng và tiện lợi 1.5 React Lifecycle Cung cấp các phương thức vòng đời giúp quản lý và điều khiển các sự kiện trong quá trình tồn tại của một thành phần a) Mounting - Constructor: Phương thức khởi tạo, được gọi khi một thành phần được tạo ra, dùng để khởi tạo state và bind các phương thức.
- static getDerivedStateFromProps: Phương thức tĩnh mới, được gọi khi props thay đổi trước khi rendering, dùng tính toán và trả về một object để cập nhật state. - Render: Phương thức chịu trách nhiệm trả về JSX cho giao diện của thành phần. Trả về giao diện của thành phần. 4 - componentDidMount: Phương thức được gọi sau khi thành phần được render lần đầu tiên.
Để thực hiện các tác vụ khởi tạo, gọi API, hoặc thiết lập các subscription. b) Updating - shouldComponentUpdate: Phương thức quyết định xem component có cần được cập nhật lại không.Để tối ưu hóa hiệu suất, tránh việc rendering không cần thiết. - static getDerivedStateFromProps: sử dụng trong cả giai đoạn Mounting và Updating - render : Phương thức chịu trách nhiệm trả về JSX cho giao diện của thành phần. - componentDidUpdate: Phương thức được gọi sau khi cập nhật của thành phần đã được hoàn thành.
Để thực hiện các tác vụ sau khi cập nhật, như gọi API mới. - Unmounting: Phương thức được gọi trước khi thành phần bị hủy bỏ (unmounted). Để dọn dẹp tài nguyên, hủy đăng ký, hoặc dừng các tác vụ định kỳ. c) Error Handling - static getDerivedStateFromError: Phương thức được gọi khi có lỗi xảy ra trong một thành phần con.
Để cập nhật state và hiển thị một giao diện dự phòng. - componentDidCatch: Phương thức được gọi sau khi có lỗi xảy ra trong một thành phần con. Để gửi log lỗi, báo cáo, hoặc thực hiện các xử lý khác liên quan đến lỗi.1 Giới thiệu Spring boot là một module của Spring FrameWork cung cấp tính năng RAD phát triển nhanh ứng dụng. Việc xây dựng một dự án Srping kahs phức tạp từ việc khai báo dependenccy trong pom.xml đến cấu hình XML.
thì với Spring boot nó được tối ưu với cấu hình đơn giản hơn [2].2 Ưu điểm - Tự Cấu Hình (Auto-Configuration): Hỗ trợ cấu hình tự động, giảm công việc cấu hình thủ công, không yêu càu xml config - Có các tính năng của Spring Framework - Cung cấp những tính năng phi chức năng nhúng như Tomcat, Jetty, hoặc Undertow để giảm độ phức tạp triển khai. - Quản Lý Dependency Tự Động: Sử dụng Maven hoặc Gradle để quản lý dependencies tự động. - Tạo ứng dụng động lập, có thể chạy bằng java-jar - Có chuẩn Microservices (cloud support, config…) - Tích hợp sẵn với Spring Data JPA.3 Kiến trúc Mô hình kiến trúc MVC trong Spring Boot được xây dựng trên tính độc lập kết hợp thiết kế hướng đối tượng [3]. Tính độc lập là các layer phục vụ mục đích nhất định, khi muốn thực hiện một công việc ngoài phạm vi sẽ đưa công việc xuống các layer thấp hơn.
Kiến trúc Controller – Service – Respository: - Controller: Nhận và xử lý các yêu cầu HTTP từ client trả về View hoặc Model dưới dạng API cho View - Service: chứa các code tính toán, xử lý nghiệp vụ. Khi Controller yêu cầu, thì Service sẽ tiếp nhận và gọi các phương thức Responsitory và cho ra dữ liệu trả cho Controller. Controller trả về View. - Responsitory: Tương tác với cơ sở dữ liệu, thực hiện các thao thác CRUD (Create, Read, Update, Delete) trong DB và trả cho Service.4 Một số thư viện hỗ trợ được dùng - Spring Data JPA: hỗ trợ truy cập cơ sở dữ liệu thông qua JPA và giúp thao tác với cơ sở dữ liệu 6 - Spring Security: cung cấp tính năng bảo mật, xác thực và quản lsy quyền cho ứng dụng - Spring Web: hỗ trợ phát triển ứng dụng web RestFul và MVC - Thymeleaf: Mẫu java dựa trên XML/HTML cho việc phát triển giao diện người dùng web.
- Spring Cloud: xây dựng và triển khai ứng dụng phân tán và microservices với các tính năng như cấu hình phân tán, truy vấn… 1.1 Giới thiệu MongoDB là một hệ quản trị cơ sở dữ liệu (DBMS) không dựa trên mô hình quan hệ (non-relational, NoSQL), thuộc họ các cơ sở dữ liệu không chỉ sử dụng ngôn ngữ truy vấn SQL[4].2 Mô hình dữ liệu Document-Oriented: Sử dụng BSON (Binary JSON) để lưu trữ dữ liệu dưới dạng tài liệu (document), mỗi document là một bản ghi tương tự một đối tượng JSON.3 Kiến trúc Distributed Architecture: Hỗ trợ kiến trúc phân tán và có thể mở rộng (scalable) với khả năng chia nhỏ cơ sở dữ liệu (sharing) Replication: Cung cấp tính năng sap chép để tăng dộ tin cậy và khả năng phục hồi 1.4 Hiệu suất Truy vấn linh hoạt , hỗ trợ các chỉ mục để tối ưu hóa hiệu suất truy vấn đặc biệt là trong các trường hợp truy vấn theo điều kiện. MongoDB có khả năng chia nhỏ dữ liệu, giúp mở rộng dự án mà không làm giảm hiệu suất.5 Bảo mật Xác Thực và Quyền Truy Cập: cung cấp chức năng xác thực và quyền truy cập, giúp bảo vệ cơ sở dữ liệu khỏi truy cập trái phép. 7 TLS/SSL Encryption: Hỗ trợ mã hóa dữ liệu thông qua TLS/SSL, tăng cường tính an toàn khi truyền dữ liệu. Audit Logs: Cung cấp khả năng ghi lại các sự kiện (audit logs) để theo dõi các hoạt động trên cơ sở dữ liệu.
KHẢO SÁT HIỆN TRẠNG 2.1 Website bán sách Van Lang Book - Đường dẫn truy cập: https://vanlang.vn/ - Trang chủ: Hình 2.1: Giao diện website Van Lang Book - Chức năng chính: + Xem, tìm kiếm, lọc sách + Quản lý sách trong giỏ hàng + Thêm sách vào danh sách yêu thích + Thanh toán + Theo dõi đơn hàng - Điểm mạnh: + sách được phân loại chi tiết (giới tính, kiểu dáng, giá cả, màu sắc,…) + Bạn có thể tra cứu thông tin đơn hàng + Phương thức thanh toán đa dạng (COD, visa, ngân hàng điện tử, ví điện tử, mã QR) - Điểm yếu: + Chưa có gợi ý kết quả tìm kiếm nào 9 2.2 Website bán sách Nhà sách Phương Nam - Đường dẫn truy cập: https://nhasachphuongnam.com/vi/ - Trang chủ: Hình 2.