BÁO CÁO CHI TIẾT DỰ ÁN XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆT TỬ - TECH NOVA
CHƯƠNG 1: GIỚI THIỆU TỔNG QUAN DỰ ÁN
1.1. Tên dự án: Tech Nova - Hệ thống bán hàng công nghệ Full Stack.
1.2. Mục tiêu: Xây dựng một nền tảng thương mại điện tử hiện đại, hỗ trợ đầy đủ quy trình từ quảng bá sản phẩm đến thanh toán và chăm sóc khách hàng.
1.3. Đặc điểm nổi bật:
- Kiến trúc microservices tách biệt hoàn toàn giữa Frontend và Backend.
- Tích hợp công nghệ PWA (Progressive Web App) giúp ứng dụng hoạt động mượt mà trên nhiều thiết bị.
- Hệ thống hỗ trợ thanh toán trực tuyến và chat trực tuyến theo thời gian thực.
CHƯƠNG 2: KIẾN TRÚC VÀ CÔNG NGHỆ HỆ THỐNG
2.1. Mô hình kiến trúc:
Hệ thống được cấu trúc thành 3 thành phần chính:
- BE-Application: Phân hệ Backend xử lý logic nghiệp vụ và API.
- FE-Application: Phân hệ Frontend cung cấp giao diện người dùng.
- Sql: Cơ sở dữ liệu MySQL lưu trữ thông tin hệ thống.
2.2. Công nghệ phát triển:
a. Phân hệ Backend:
- Ngôn ngữ: Java 23.
- Framework: Spring Boot 3.4.2.
- Bảo mật: Spring Security kết hợp JSON Web Token (JWT).
- Giao tiếp: RESTful API và WebSocket (STOMP).
- Lưu trữ: AWS SDK v2 (S3-compatible) hỗ trợ MinIO và Backblaze B2.
b. Phân hệ Frontend:
- Ngôn ngữ: TypeScript, React 19.
- Công cụ build: Vite.
- Thư viện giao diện: Ant Design.
- Quản lý trạng thái: React Context API.
c. Cơ sở dữ liệu:
- MySQL 8.x với đầy đủ ràng buộc toàn vẹn và chỉ mục tối ưu hóa.
CHƯƠNG 3: MÔ TẢ CÁC PHÂN HỆ CHỨC NĂNG
3.1. Phân hệ dành cho Khách hàng:
- Tìm kiếm và lọc sản phẩm thông minh.
- Quản lý giỏ hàng và đặt hàng trực tuyến.
- Thanh toán điện tử qua cổng VNPay.
- Nhận thông báo và chat trực tiếp với đội ngũ hỗ trợ.
- Trải nghiệm ứng dụng di động thông qua tính năng PWA.
3.2. Phân hệ dành cho Quản trị viên (Admin):
- Dashboard thống kê doanh thu và đơn hàng bằng biểu đồ trực quan.
- Quản lý danh mục, sản phẩm và kho hàng.
- Theo dõi và cập nhật trạng thái đơn hàng.
- Phản hồi tin nhắn và hỗ trợ khách hàng realtime.
CHƯƠNG 4: KẾT LUẬN VÀ ĐỊNH HƯỚNG PHÁT TRIỂN
4.1. Kết quả đạt được:
- Hệ thống chạy ổn định trên môi trường local và đã sẵn sàng triển khai cloud.
- Đáp ứng tốt nhu cầu bảo mật và trải nghiệm người dùng.
4.2. Hướng phát triển:
- Tích hợp thêm trí tuệ nhân tạo (AI) để gợi ý sản phẩm cá nhân hóa.
- Mở rộng hệ thống thanh toán quốc tế.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
HƯỚNG DẪN CÀI ĐẶT
TÀI LIỆU HƯỚNG DẪN CÀI ĐẶT VÀ TRIỂN KHAI HỆ THỐNG TECH NOVA
PHẦN 1: YÊU CẦU MÔI TRƯỜNG PHÁT TRIỂN
Để khởi chạy hệ thống, máy tính cần được cài đặt các thành phần sau:
1. Java Development Kit (JDK) phiên bản 23 trở lên.
2. Apache Maven (để đóng gói và quản lý thư viện Java).
3. Node.js phiên bản 18 trở lên (kèm theo npm).
4. MySQL Server (mặc định cổng 3306).
5. MinIO (để giả lập lưu trữ ảnh trên môi trường local - cổng 9000).
PHẦN 2: QUY TRÌNH KHỞI TẠO CƠ SỞ DỮ LIỆU
1. Truy cập vào thư mục "Sql".
2. Sử dụng công cụ quản lý cơ sở dữ liệu (như MySQL Workbench hoặc DBeaver).
3. Thực thi toàn bộ mã lệnh trong tệp "init_db.sql" để tạo bảng và nạp dữ liệu mẫu.
PHẦN 3: CẤU HÌNH CÁC PHÂN HỆ
3.1. Cấu hình Backend (BE-Application):
- Tìm đến tệp: BE-Application/src/main/resources/application.properties.
- Điều chỉnh các thông số kết nối Database (username, password).
- Thiết lập khóa bảo mật JWT tại dòng "jwt.secret".
3.2. Cấu hình Frontend (FE-Application):
- Tại thư mục "FE-Application", tạo một tệp mới có tên là ".env".
- Khai báo các biến môi trường sau:
+ VITE_API_URL: Địa chỉ chạy Backend (mặc định http://localhost:8080/api).
+ VITE_STORAGE_URL: Địa chỉ lưu trữ ảnh (mặc định của MinIO).
PHẦN 4: HƯỚNG DẪN VẬN HÀNH HỆ THỐNG
Bước 1: Khởi động Backend
- Sử dụng Terminal di chuyển vào thư mục "BE-Application".
- Chạy lệnh: mvn spring-boot:run.
Bước 2: Khởi động Frontend
- Mở Terminal mới, di chuyển vào thư mục "FE-Application".
- Cài đặt thư viện: npm install.
- Chạy ứng dụng: npm run dev.
PHẦN 5: THÔNG TIN TÀI KHOẢN TRUY CẬP MẪU
1. Tài khoản Quản trị (Admin):
- Tên đăng nhập: admin
- Mật khẩu: password123
2. Tài khoản Khách hàng (User):
- Tên đăng nhập: user1
- Mật khẩu: password123
PHẦN 6: CÁC LƯU Ý KHI TRIỂN KHAI
- Đảm bảo MySQL và MinIO đã được khởi động trước khi chạy ứng dụng.
- Đối với tính năng thanh toán VNPay, cần cấu hình các tham số Merchant ID và Hash Secret trong tệp cấu hình Backend.
- Để kiểm tra tính năng PWA (ngoại tuyến), cần xây dựng bản build production bằng lệnh "npm run build".
Nguồn: Topcode.vn
