Tổng quan về Spring Boot và React JS trong Phát triển Website Bán Laptop

MỤC LỤC

NỘI DUNG

CƠ SỞ LÝ THUYẾT

SPRING BOOT FRAMEWORK

- Không phù hợp cho các dự án quy mô lớn: Trong một số trường hợp, khi làm việc với các microservices, Spring Boot có thể không phù hợp cho việc xây dựng ứng dụng nguyên khối. Siêu dữ liệu này được sử dụng bởi IDE của bạn (Eclipse, IntelliJ hoặc. NetBeans) để cung cấp tính năng tự động hoàn thành và tài liệu cho các thuộc tính khi chỉnh sửa application.propertiesvà application.yaml.

Hình 1-4: Thành phần trong Json Web Token
Hình 1-4: Thành phần trong Json Web Token

ReactJS

Với Redux, state của ứng dụng được duy trì tại một nơi duy nhất gọi là "store", và mỗi component có thể truy cập vào bất kỳ state nào trong store này. Store có các phương thức như getState() để truy cập state hiện tại, dispatch() để gửi actions đến reducers và subscribe() để đăng ký các listener khi state thay đổi.

Hình 1-16: DOM chỉ render lại nơi bị thay đổi
Hình 1-16: DOM chỉ render lại nơi bị thay đổi

My SQL

Nó cho phép bạn tăng cường khả năng xử lý và lưu trữ bằng cách sử dụng các cụm server (server clusters) hoặc kỹ thuật nhân rộng dữ liệu (sharding). - Trong một số tình huống với khối lượng dữ liệu lớn và truy vấn phức tạp, MySQL có thể gặp phải hiệu suất giới hạn so với các hệ quản trị cơ sở dữ liệu mạnh hơn như Oracle hoặc PostgreSQL.

Post Man

- Một số tính năng cao cấp như replikasi (replication) và clustering chỉ có sẵn trong phiên bản thương mại của MySQL (MySQL Enterprise Edition). - MySQL có thể khó khăn trong việc quản lý và tối ưu hóa hiệu suất truy vấn khi mô hình dữ liệu phức tạp và yêu cầu truy vấn phức tạp hơn.

RESTFUL API

- MySQL có giới hạn về quản lý dữ liệu phân tán (distributed data management) so với các hệ quản trị cơ sở dữ liệu lớn hơn như Oracle. Các phương thức này thường được gọi là CRUD, tương ứng với các hoạt động Create, Read, Update và Delete trên tài nguyên.

ChatGPT

Cách thức hoạt động. Hình 1-19: Cách thức hoạt động của ResfulAPI. REST chủ yếu hoạt động trên giao thức HTTP và sử dụng các phương thức HTTP để thực hiện các hoạt động cơ bản. Các phương thức này bao gồm:. GET: Sử dụng để truy vấn và nhận về một tài nguyên hoặc danh sách các tài nguyên. POST: Sử dụng để tạo mới một tài nguyên. PUT: Sử dụng để cập nhật thông tin của một tài nguyên. DELETE: Sử dụng để xóa một tài nguyên. Các phương thức này thường được gọi là CRUD, tương ứng với các hoạt động Create, Read, Update và Delete trên tài nguyên. RESTful API sẽ sử dụng các phương thức này để quản lý tài nguyên trên ứng dụng web. Processing) tiên tiến nhất hiện nay, nó được phát triển bởi OpenAI và dựa trên kiến trúc GPT-3.5. Câu trả lời hoặc lỗi(nếu xảy ra) của chatGPT sẽ được lưu trong data mà API trả về và sẽ được lưu vào state messageListChatGPT của component Chat, sau đó render lên màn hình.

Chat RealTime

Trong component Chat.js, khi người dùng gửi lên tin nhắn, ta sẽ gọi function writeUserChatData để ghi tin nhắn này vào database. Sử dụng API onValue của Firebase để lắng nghe và thực hiện hành động update danh sách tin nhắn mỗi khi nó sự thay đổi trên node, lúc này tin nhắn giữa admin và khách hàng sẽ được cập nhật realtime mà không cần phải tải lại trang.

Paypal payment

- PayPal cung cấp tính năng bảo mật và các công cụ giúp người dùng quản lý các giao dịch của họ. - Các doanh nghiệp có thể sử dụng PayPal để chấp nhận thanh toán trực tuyến từ khách hàng của họ.

Hình 1-32: Paypal gợi ý xác thực khi đăng ký thành công
Hình 1-32: Paypal gợi ý xác thực khi đăng ký thành công

Telegram Bot

Bước 3: Bắt đầu một cuộc trò chuyện với BotFather bằng cách nhấp vào tên bot hoặc gửi một tin nhắn mới. Bước 7: Sau khi hoàn tất các bước trên, BotFather sẽ tạo một bot mới và cung cấp cho bạn một mã token. Mã token này là duy nhất và sẽ được sử dụng để truy cập API của bot.

Bạn sẽ sử dụng mã token này trong mã của bạn để thiết lập kết nối và gửi/receive tin nhắn từ bot. Sau khi bạn đã có mã token, bạn có thể sử dụng nó trong mã của mình để thiết lập kết nối với Telegram Bot API và xử lý tin nhắn từ người dùng.

Hình 1-41: Gửi /newbot
Hình 1-41: Gửi /newbot

KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ VÀ Mễ HèNH HểA YÊU CẦU

KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ

- Không có phần chat tư vấn với khách hàng - Tìm kiếm chưa được tối ưu. - Sản phẩm được sắp xếp theo logo theo từng hãng rất phù hợp với người dung. - Hỗ trợ trả góp cùng nhiều hình thức thanh toán - Thông tin sản phẩm chi tiết (tối ưu).

Hình 2-6: Giao diện trang sản phẩm PhucAnh
Hình 2-6: Giao diện trang sản phẩm PhucAnh

MÔ TẢ BÀI TOÁN VÀ XÁC ĐỊNH YÊU CẦU

- Quản lý nhà cung cấp: thêm, xóa và sửa nhà cung cấp - Quản lý sản phẩm: thêm, xóa và sửa sản phẩm. - Thống kê: thống kê doanh thu , đơn hàng , số lượng khách hàng - Quản lí danh sách khách hàng. - Lọc sản phẩm theo các tiêu chí - Sắp xếp sản phẩm theo các tiêu chí - Đặt mua và thanh toán online (paypal) - Nhận email khi đăng ký.

- Được tự động cập nhật các tin tức mới nhất về sản phẩm cũng như thị trường laptop thông qua telegram. - Sử dụng ChatGPT free để tìm hiểu thông tin cần thiết của các loại máy tính ( và nhiều hơn thế nữa ).

Mễ HèNH HểA YấU CẦU

Nếu không đăng ký thành công: Hệ thống sẽ thông báo đăng ký thất bại và không thể mua hàng được Luồng sự kiện chính Use case bắt đầu khi người dùng thực hiện chức. Tiền điều kiện Admin đăng nhập thành công vào hệ thống quản lý Hậu điều kiện Thêm sản phẩm thành công : Sản phẩm sẽ được xóa. Tiền điều kiện Admin đăng nhập thành công vào hệ thống quản lý Hậu điều kiện Thêm nhà cung cấp thành công : Thêm nhà cung.

Tiền điều kiện Admin đăng nhập thành công vào hệ thống quản lý Hậu điều kiện Thêm tin tức thành công : tin tức mới được thêm, hệ. Tiền điều kiện Admin đăng nhập thành công vào hệ thống quản lý Hậu điều kiện Hủy đơn hàng thành công : Đơn hàng sẽ được hủy. Tiền điều kiện Admin đăng nhập thành công vào hệ thống quản lý Hậu điều kiện Duyệt đơn hàng thành công : Đơn hàng sẽ được.

Tiền điều kiện Admin đăng nhập thành công vào hệ thống quản lý Hậu điều kiện Thống kê thành công : Hệ thống hiển thị doanh thu. Tiền điều kiện Admin đăng nhập thành công vào hệ thống quản lý Hậu điều kiện Hiển thị người dùng : Hệ thống hiển thị thông tin. Tiền điều kiện Admin đăng nhập thành công vào hệ thống quản lý Hậu điều kiện Hiển thị danh sách tin nhắn của khách hàng : Hệ.

Hình 2-10: Sơ đồ use case chi tiết quản trị viên
Hình 2-10: Sơ đồ use case chi tiết quản trị viên

TỔ CHỨC VÀ CÀI ĐẶT CHƯƠNG TRÌNH

Môi trường cài đặt

Kiến trúc của chương trình

Trong thư mục src/main, có thể có các thư mục như java (chứa mã nguồn Java), resources (chứa các file tài nguyên như file cấu hình, file properties, hình ảnh, v.v.) và web app (chứa các file HTML, CSS, JavaScript cho ứng dụng web). Chứa các file đã biên dịch như file class, file JAR hoặc các file khác tương ứng với công cụ build được sử dụng (target đối với Maven, build đối với Gradle). Thư mục "component": Chứa các bean hoặc class định nghĩa khác mà không thuộc vào các layer đã nêu, ví dụ: EmailSender, FileUploader,.

_ Tệp package.json và package-lock.json dùng để thiết lập các thư viện sẽ được cài đặt trong project, thư mục node_modules được tạo bởi lệnhnpm i, bên trong node_modules chứa các thư viện đã được cài đặt theo mô tả trong tệp package.json và package-lock.json. _ Thư mục public, chứa tệp index.html(là nơi các component được render) và một số tài nguyên cần thiết cho project như là các tệp css, icon, hình ảnh,…. _ Tệp package.json và package-lock.json dùng để thiết lập các thư viện sẽ được cài đặt trong project, thư mục node_modules được tạo bởi lệnhnpm i, bên trong.

_ Thư mục public, chứa tệp index.html(là nơi các component được render) và một số tài nguyên cần thiết cho project như là các tệp css, icon, hình ảnh,….

Các chức năng của website đã được cài đặt thành công

KIỂM THỬ PHẦN MỀM

    Integration Test là phương pháp kiểm thử tích hợp các module hoặc chức năng riêng lẻ để đảm bảo tích hợp chính xác và tương tác đúng giữa chúng. System Test là phương pháp kiểm thử toàn bộ hệ thống, bao gồm tất cả chức năng và thành phần, để đảm bảo hệ thống hoạt động chính xác và đáp ứng yêu cầu kiểm thử. - Chọn Đơn mua Hệ thống sẽ hiển thị đơn hàng và trạng thái của đơn hàng.

    Hệ thống sẽ thêm nhà cung cấp mới của và thông báo thêm thành công. Hệ thống sẽ thêm nhà cung cấp mới của và thông báo thêm thành công. Hệ thống sẽ thay đổi sản phẩm vừa sửa và thông báo sửa thành công.

    - Chọn trạng thái đơn đã duyệt - Chọn sản phẩm muốn xác nhận - Chọn Xác nhận.