Xây dựng website bán đồ công nghệ với Spring Boot và ReactJS - Đồ án CNTT

Hướng dẫn xây dựng website bán đồ công nghệ fullstack với Spring Boot và ReactJS. Dự án thực tế tích hợp backend và frontend chi tiết, dễ hiểu.

• Tác giả: Phạm Tấn Khang
• Người hướng dẫn: ThS. Trần Thị Hồng Yến
• 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 đồ công nghệ với Spring Boot và ReactJS
• Loại tài liệu: Báo cáo đồ án
• Năm xuất bản: 2022
• Địa điểm: Thành phố Hồ Chí Minh

Mục lục chi tiết

• LỜI CẢM ƠN
• ĐỀ CƯƠNG CHI TIẾT
• DANH MỤC BẢNG
• DANH MỤC HÌNH ẢNH
• 1. GIỚI THIỆU ĐỀ TÀI
• 1.1. Tên đề tài
• 1.2. Mô tả đề tài
• 1.3. Lý do chọn thiết kế Website
• 1.4. Công nghệ sử dụng
• 2. PHÂN TÍCH ĐẶC TẢ YÊU CẦU
• 2.1. Mô tả yêu cầu
• 2.1.1. Yêu cầu chức năng
• 2.1.2. Yêu cầu phi chức năng
• 2.2. Phân tích Use case
• 2.2.1. Use case quản lý
• 2.2.1.1. Danh sách Actor
• 2.2.1.2. Danh sách Use-case
• 2.2.1.3. Đặc tả Use-case
• 2.2.2. Use case website
• 2.2.2.1. Danh sách Actor
• 2.2.2.2. Danh sách Use case
• 2.2.2.3. Đặc tả Use Case
• 3. THIẾT KẾ HỆ THỐNG
• 3.1. Kiến trúc hệ thống
• 3.1.1. Kiến trúc hệ thống BackEnd
• 3.1.1.1. Mô tả kiến trúc hệ thống
• 3.1.1.2. Mô tả thành phần trong hệ thống
• 3.1.2. Mô tả kiến trúc FrontEnd
• 3.1.2.1. Phía hệ thống quản lý
• 4. THIẾT KẾ CƠ SỞ DỮ LIỆU
• 4.1. Danh sách các bảng dữ liệu
• 4.2. Mô tả từng bảng dữ liệu
• 4.2.1. Bảng CATEGORY_ATTRIBUTE
• 4.2.2. Bảng VARIANT_ATTRIBUTE
• 4.2.3. Bảng IMPORT_DETAIL
• 4.2.4. Bảng ORDER_DETAIL
• 4.2.5. Bảng VERIFICATION_TOKEN
• 4.2.6. Bảng PASSWORD_RESET_TOKEN
• 5. THIẾT KẾ GIAO DIỆN
• 5.1. Phía hệ thống quản lý
• 5.1.1. Danh sách các màn hình
• 5.1.2. Mô tả chi tiết
• 5.1.2.1. Màn hình quản lý phân loại
• 5.1.2.2. Màn hình thêm phân loại
• 5.1.2.3. Màn hình chỉnh sửa phân loại
• 5.1.2.4. Màn hình quản lý thương hiệu
• 5.1.2.5. Màn hình tạo mới thương hiệu
• 5.1.2.6. Màn hình chỉnh sửa thương hiệu
• 5.1.2.7. Màn hình quản lý sản phẩm
• 5.1.2.8. Màn hình tạo mới sản phẩm
• 5.1.2.9. Màn hình chỉnh sửa sản phẩm
• 5.1.2.10. Màn hình chỉnh sửa phiên bản
• 5.1.2.11. Màn hình quản lý đơn hàng
• 5.1.2.12. Màn hình xem chi tiết đơn hàng
• 5.1.2.13. Màn hình xuất hóa đơn
• 5.1.2.14. Màn hình quản lý nhập hàng
• 5.1.2.15. Màn hình tạo mới đơn nhập
• 5.1.2.16. Màn hình xem chi tiết đơn nhập
• 5.1.2.17. Màn hình xuất đơn nhập
• 5.1.2.18. Màn hình quản lý tài khoản khách hàng
• 5.1.2.19. Màn hình quản lý tài khoản nhân viên
• 5.1.2.20. Màn hình tạo mới tài khoản nhân viên
• 5.1.2.21. Màn hình quản lý khuyến mãi
• 5.1.2.22. Màn hình tạo mới khuyến mãi
• 5.1.2.23. Màn hình chỉnh sửa khuyến mãi
• 5.1.2.24. Màn hình thống kê
• 5.2. Danh sách các màn hình
• 5.3. Chi tiết màn hình
• 5.3.1. Xem sản phẩm theo thương hiệu
• 5.3.2. Xem sản phẩm theo phân loại
• 5.3.3. Xem giỏ hàng
• 5.3.4. Thông tin đặt hàng
• 5.3.5. Chi tiết sản phẩm
• 5.3.6. Lịch sử mua hàng
• 5.3.7. Thay đổi thông tin cá nhân
• 5.3.8. Thay đổi mật khẩu
• 5.3.9. Quên mật khẩu
• 5.3.10. Đặt lại mật khẩu
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Tổng quan Cách xây dựng website bán đồ công nghệ bằng Spring Boot ReactJs

Thương mại điện tử đang phát triển mạnh mẽ, đặc biệt là trong lĩnh vực bán đồ công nghệ. Việc sở hữu một website bán hàng đồ công nghệ chuyên nghiệp, hiệu quả là yếu tố then chốt để tăng doanh thu và tiếp cận khách hàng. Spring Boot và ReactJS là bộ đôi công nghệ mạnh mẽ, cho phép xây dựng các ứng dụng web thương mại điện tử hiện đại, tốc độ cao và dễ dàng mở rộng. Spring Boot đảm nhận phần back-end, cung cấp các REST API và quản lý database. ReactJS đảm nhận phần front-end, xây dựng giao diện người dùng thân thiện và tương tác cao. Theo báo cáo từ Đại học Công nghệ Thông tin TP.HCM, việc kết hợp Spring Boot và ReactJS giúp giảm thời gian phát triển và tăng hiệu suất ứng dụng lên đến 30%. Bài viết này sẽ cung cấp hướng dẫn chi tiết về cách xây dựng website bán đồ công nghệ sử dụng hai công nghệ này, từ thiết lập môi trường, thiết kế cơ sở dữ liệu, xây dựng API, đến phát triển giao diện người dùng và triển khai ứng dụng. Ưu điểm của việc sử dụng Spring Boot và ReactJS bao gồm khả năng mở rộng, hiệu suất cao, bảo mật tốt và cộng đồng hỗ trợ lớn. Các tính năng quan trọng như quản lý sản phẩm, giỏ hàng, thanh toán trực tuyến và quản lý đơn hàng sẽ được đề cập chi tiết. Hãy cùng khám phá bí quyết xây dựng một website bán đồ công nghệ thành công với Spring Boot và ReactJS.

1.1. Lợi ích của việc thiết kế website bán đồ điện tử chuyên nghiệp

Một website bán hàng đồ công nghệ được thiết kế chuyên nghiệp mang lại nhiều lợi ích. Đầu tiên, nó tạo ấn tượng tốt với khách hàng, tăng độ tin cậy và khuyến khích mua hàng. Thứ hai, nó giúp quản lý sản phẩm hiệu quả hơn, từ thông tin chi tiết, hình ảnh đến giá cả và số lượng tồn kho. Thứ ba, nó cho phép tích hợp các công cụ thanh toán trực tuyến an toàn, giúp khách hàng dễ dàng thanh toán và tăng doanh số bán hàng. Thứ tư, nó cung cấp các tính năng tracking đơn hàng và vận chuyển, giúp khách hàng theo dõi quá trình giao hàng và tăng sự hài lòng. Theo nghiên cứu từ Nielsen Norman Group, website có UI/UX tốt có tỷ lệ chuyển đổi cao hơn 400%. Do đó, đầu tư vào thiết kế website là một quyết định sáng suốt cho bất kỳ doanh nghiệp bán đồ công nghệ nào.

1.2. Tại sao nên chọn lập trình web bán hàng spring boot reactjs

Spring Boot và ReactJS là sự lựa chọn tối ưu cho việc xây dựng website bán đồ công nghệ nhờ vào nhiều ưu điểm vượt trội. Spring Boot cung cấp khả năng xây dựng REST API mạnh mẽ, quản lý database dễ dàng và tích hợp các tính năng bảo mật như Spring Security. ReactJS cho phép tạo giao diện người dùng linh hoạt, tương tác cao và responsive design trên mọi thiết bị. Sự kết hợp này giúp tạo ra một ứng dụng web thương mại điện tử tốc độ cao, dễ dàng mở rộng và bảo trì. Theo Stack Overflow Developer Survey, ReactJS là một trong những thư viện JavaScript phổ biến nhất, và Spring Boot là framework Java hàng đầu cho phát triển web. Việc sử dụng hai công nghệ này đảm bảo bạn có một nền tảng vững chắc và cộng đồng hỗ trợ lớn.

II. Giải quyết bài toán Cách xây dựng ứng dụng web thương mại điện tử hiệu quả

Việc xây dựng ứng dụng web thương mại điện tử không hề đơn giản, đặc biệt là với các yêu cầu về hiệu suất, bảo mật và khả năng mở rộng. Các vấn đề thường gặp bao gồm: - Thiết kế database phức tạp để quản lý sản phẩm, đơn hàng, khách hàng. - Xây dựng API hiệu quả để giao tiếp giữa front-end và back-end. - Tối ưu hóa hiệu suất website để đảm bảo tốc độ tải trang nhanh. - Đảm bảo bảo mật cho dữ liệu người dùng và các giao dịch thanh toán trực tuyến. - Triển khai ứng dụng lên môi trường hosting ổn định và có khả năng mở rộng. Để giải quyết các vấn đề này, cần có một quy trình phát triển rõ ràng, sử dụng các công nghệ phù hợp và tuân thủ các tiêu chuẩn bảo mật. Việc lựa chọn Spring Boot và ReactJS là một bước đi đúng đắn, nhưng cần có kế hoạch triển khai chi tiết để đảm bảo thành công. Các giải pháp bao gồm: - Sử dụng database quan hệ như PostgreSQL hoặc MySQL để quản lý dữ liệu. - Áp dụng kiến trúc REST API để giao tiếp giữa Spring Boot back-end và ReactJS front-end. - Sử dụng CDN để phân phối nội dung tĩnh và tăng tốc độ tải trang. - Triển khai ứng dụng trên các nền tảng đám mây như AWS, Google Cloud hoặc Azure để đảm bảo khả năng mở rộng và độ tin cậy.

2.1. Thách thức khi phát triển web bán hàng Bảo mật và hiệu năng

Bảo mật và hiệu năng là hai thách thức lớn khi phát triển web bán hàng. Về bảo mật, cần bảo vệ dữ liệu người dùng, thông tin thanh toán và ngăn chặn các cuộc tấn công từ bên ngoài. Các biện pháp bảo mật bao gồm sử dụng SSL certificate, mã hóa dữ liệu, xác thực người dùng bằng JWT authentication và kiểm soát truy cập. Về hiệu năng, cần đảm bảo website tải nhanh, xử lý giao dịch nhanh chóng và đáp ứng tốt với lượng truy cập lớn. Các biện pháp tối ưu hóa hiệu năng bao gồm sử dụng CDN, tối ưu hóa hình ảnh, sử dụng bộ nhớ cache và tối ưu hóa truy vấn database. Việc bỏ qua bất kỳ yếu tố nào trong hai lĩnh vực này có thể gây ra hậu quả nghiêm trọng cho doanh nghiệp. Ví dụ, một cuộc tấn công bảo mật có thể làm mất dữ liệu người dùng và gây tổn hại đến uy tín của website. Hiệu năng kém có thể làm giảm tỷ lệ chuyển đổi và khiến khách hàng rời bỏ website.

2.2. UI UX website bán đồ công nghệ Tạo trải nghiệm mua sắm ấn tượng

UI/UX đóng vai trò quan trọng trong việc tạo trải nghiệm mua sắm ấn tượng cho khách hàng. Một UI đẹp mắt, dễ sử dụng và một UX mượt mà, tiện lợi sẽ giúp khách hàng dễ dàng tìm kiếm sản phẩm, thêm vào giỏ hàng và thanh toán. Các yếu tố quan trọng trong UI/UX bao gồm: - Thiết kế responsive design để đảm bảo website hiển thị tốt trên mọi thiết bị. - Sử dụng màu sắc, hình ảnh và font chữ phù hợp với thương hiệu. - Tạo cấu trúc website rõ ràng, dễ điều hướng. - Tối ưu hóa quy trình thanh toán để giảm thiểu số bước cần thiết. - Cung cấp các tùy chọn tìm kiếm và lọc sản phẩm hiệu quả. - Đảm bảo tốc độ tải trang nhanh. Theo Adobe, 38% người dùng sẽ rời bỏ website nếu giao diện không hấp dẫn. Do đó, đầu tư vào UI/UX là một yếu tố quan trọng để tăng doanh số và xây dựng lòng trung thành của khách hàng.

III. Hướng dẫn chi tiết Front end ReactJS cho website bán hàng

ReactJS là một thư viện JavaScript mạnh mẽ để xây dựng giao diện người dùng tương tác. Để xây dựng front-end cho website bán đồ công nghệ, cần thực hiện các bước sau: 1. Thiết lập môi trường phát triển: Cài đặt Node.js, npm và create-react-app. 2. Tạo dự án ReactJS mới: Sử dụng create-react-app để tạo một dự án ReactJS mới với cấu trúc thư mục chuẩn. 3. Thiết kế giao diện người dùng: Sử dụng các thành phần ReactJS như React Hooks và Redux để xây dựng giao diện người dùng cho trang chủ, trang sản phẩm, trang giỏ hàng và trang thanh toán. 4. Kết nối với back-end API: Sử dụng fetch hoặc axios để gửi các yêu cầu HTTP đến Spring Boot API và hiển thị dữ liệu trả về. 5. Tối ưu hóa hiệu năng: Sử dụng các kỹ thuật như lazy loading, code splitting và memoization để tối ưu hóa hiệu năng của ứng dụng. 6. Kiểm tra và gỡ lỗi: Sử dụng các công cụ như React Developer Tools để kiểm tra và gỡ lỗi ứng dụng. Ví dụ, để hiển thị danh sách sản phẩm, có thể sử dụng hàm useEffect để gọi API khi thành phần được gắn kết và sử dụng hàm useState để lưu trữ dữ liệu sản phẩm. Sau đó, sử dụng hàm map để lặp qua danh sách sản phẩm và hiển thị thông tin trên giao diện người dùng.

3.1. Sử dụng React Hooks và Redux để quản lý trạng thái

React Hooks và Redux là hai công cụ quan trọng để quản lý trạng thái trong ứng dụng ReactJS. React Hooks cho phép sử dụng các tính năng của React như state và lifecycle trong các hàm thành phần. Redux là một thư viện quản lý trạng thái toàn cục, giúp quản lý trạng thái của ứng dụng một cách dễ dàng và hiệu quả. Ví dụ, có thể sử dụng useState Hook để lưu trữ trạng thái của giỏ hàng và sử dụng useContext Hook để chia sẻ trạng thái này giữa các thành phần khác nhau. Hoặc có thể sử dụng Redux để lưu trữ thông tin người dùng và các sản phẩm yêu thích. Việc sử dụng React Hooks và Redux giúp giảm thiểu sự phức tạp của ứng dụng và tăng khả năng bảo trì.

3.2. Responsive design website bán hàng Đảm bảo trải nghiệm trên mọi thiết bị

Responsive design là một yếu tố quan trọng để đảm bảo trải nghiệm người dùng tốt trên mọi thiết bị. Điều này có nghĩa là website phải hiển thị tốt trên máy tính, điện thoại và máy tính bảng. Để thực hiện responsive design, có thể sử dụng các kỹ thuật như media queries, flexbox và grid layout. Media queries cho phép áp dụng các kiểu dáng khác nhau dựa trên kích thước màn hình. Flexbox và grid layout cho phép tạo ra các bố cục linh hoạt và dễ dàng điều chỉnh. Việc sử dụng các framework UI như Material UI hoặc Bootstrap cũng giúp đơn giản hóa quá trình responsive design, vì chúng cung cấp các thành phần đã được thiết kế để hiển thị tốt trên mọi thiết bị. Theo Google, 61% người dùng sẽ rời bỏ website nếu không được tối ưu hóa cho thiết bị di động. Do đó, responsive design là một yếu tố không thể thiếu trong xây dựng website bán hàng.

IV. Bí quyết Back end Spring Boot cho website bán hàng chuyên nghiệp

Spring Boot là một framework Java mạnh mẽ để xây dựng các ứng dụng web back-end. Để xây dựng back-end cho website bán đồ công nghệ, cần thực hiện các bước sau: 1. Thiết lập môi trường phát triển: Cài đặt JDK, Maven hoặc Gradle và IntelliJ IDEA hoặc Eclipse. 2. Tạo dự án Spring Boot mới: Sử dụng Spring Initializr để tạo một dự án Spring Boot mới với các phụ thuộc cần thiết như Spring Data JPA, Spring Security và REST API. 3. Thiết kế database: Sử dụng một database quan hệ như PostgreSQL hoặc MySQL để lưu trữ dữ liệu sản phẩm, đơn hàng và khách hàng. 4. Xây dựng REST API: Sử dụng Spring MVC để xây dựng các API để quản lý sản phẩm, đơn hàng, khách hàng và thanh toán. 5. Triển khai ứng dụng: Đóng gói ứng dụng thành một file JAR hoặc WAR và triển khai lên một máy chủ như Tomcat hoặc Jetty. Ví dụ, có thể sử dụng Spring Data JPA để định nghĩa các entity cho sản phẩm, đơn hàng và khách hàng và sử dụng Spring Security để bảo vệ các API bằng JWT authentication.

4.1. Thiết kế database cho website bán hàng Các bảng cần thiết

Thiết kế database là một bước quan trọng trong xây dựng website bán hàng. Các bảng cần thiết bao gồm: - Bảng Products: Lưu trữ thông tin về sản phẩm như tên, mô tả, giá cả, hình ảnh và danh mục. - Bảng Categories: Lưu trữ thông tin về danh mục sản phẩm. - Bảng Users: Lưu trữ thông tin về người dùng như tên, email, mật khẩu và địa chỉ. - Bảng Orders: Lưu trữ thông tin về đơn hàng như ngày đặt hàng, trạng thái và tổng tiền. - Bảng OrderItems: Lưu trữ thông tin về các sản phẩm trong một đơn hàng. - Bảng Payments: Lưu trữ thông tin về các giao dịch thanh toán. Mối quan hệ giữa các bảng cần được thiết kế cẩn thận để đảm bảo tính toàn vẹn dữ liệu. Ví dụ, bảng Products có thể có mối quan hệ nhiều-một với bảng Categories, và bảng Orders có mối quan hệ một-nhiều với bảng OrderItems.

4.2. Xây dựng REST API bằng Spring Boot Các endpoint quan trọng

REST API là giao diện để front-end và back-end giao tiếp với nhau. Các endpoint quan trọng bao gồm: - /products: Lấy danh sách sản phẩm. - /products/{id}: Lấy thông tin chi tiết về một sản phẩm. - /categories: Lấy danh sách danh mục. - /users/register: Đăng ký tài khoản người dùng mới. - /users/login: Đăng nhập tài khoản người dùng. - /orders: Tạo đơn hàng mới. - /payments: Xử lý giao dịch thanh toán. Các endpoint này cần được bảo vệ bằng Spring Security để đảm bảo chỉ những người dùng được xác thực mới có thể truy cập. Việc sử dụng các phương thức HTTP như GET, POST, PUT và DELETE cũng cần tuân thủ theo nguyên tắc RESTful.

V. Triển khai và bảo trì Cách triển khai website bán hàng và duy trì

Sau khi xây dựng website bán đồ công nghệ, cần triển khai ứng dụng lên một môi trường hosting ổn định và có khả năng mở rộng. Các lựa chọn hosting phổ biến bao gồm: - Các nền tảng đám mây như AWS, Google Cloud hoặc Azure. - Các dịch vụ hosting chuyên dụng cho Spring Boot và ReactJS. - Các dịch vụ hosting chia sẻ hoặc VPS. Sau khi triển khai ứng dụng, cần thực hiện các công việc bảo trì như: - Theo dõi hiệu năng và bảo mật của website. - Cập nhật các phiên bản mới của Spring Boot và ReactJS. - Sửa lỗi và cải thiện tính năng của ứng dụng. - Sao lưu dữ liệu thường xuyên. Việc triển khai và bảo trì ứng dụng là một quá trình liên tục và cần được thực hiện một cách cẩn thận để đảm bảo website hoạt động ổn định và hiệu quả.

5.1. Lựa chọn hosting cho website bán hàng Các yếu tố cần cân nhắc

Khi lựa chọn hosting cho website bán hàng, cần cân nhắc các yếu tố sau: - Giá cả: Chọn một gói hosting phù hợp với ngân sách của bạn. - Hiệu năng: Chọn một gói hosting có đủ tài nguyên để đảm bảo website tải nhanh. - Khả năng mở rộng: Chọn một gói hosting có thể mở rộng để đáp ứng với lượng truy cập tăng lên. - Bảo mật: Chọn một gói hosting có các biện pháp bảo mật để bảo vệ dữ liệu của bạn. - Hỗ trợ: Chọn một nhà cung cấp hosting có dịch vụ hỗ trợ tốt. Việc lựa chọn hosting phù hợp sẽ giúp đảm bảo website hoạt động ổn định và hiệu quả.

5.2. Tối ưu hóa hiệu năng website bán hàng Bí quyết tăng tốc độ tải trang

Tối ưu hóa hiệu năng là một yếu tố quan trọng để tăng tốc độ tải trang và cải thiện trải nghiệm người dùng. Các bí quyết tối ưu hóa hiệu năng bao gồm: - Sử dụng CDN để phân phối nội dung tĩnh. - Tối ưu hóa hình ảnh bằng cách giảm kích thước và sử dụng định dạng phù hợp. - Sử dụng bộ nhớ cache để lưu trữ dữ liệu thường xuyên được truy cập. - Tối ưu hóa truy vấn database. - Sử dụng lazy loading để chỉ tải các hình ảnh và nội dung cần thiết khi người dùng cuộn trang. - Giảm thiểu số lượng yêu cầu HTTP bằng cách gộp các file CSS và JavaScript. Việc thực hiện các biện pháp tối ưu hóa hiệu năng sẽ giúp website tải nhanh hơn và cải thiện trải nghiệm người dùng.

VI. Kết luận và tương lai Phát triển web bán hàng đồ công nghệ

Xây dựng website bán đồ công nghệ với Spring Boot và ReactJS là một lựa chọn tuyệt vời để tạo ra một ứng dụng web thương mại điện tử hiện đại, tốc độ cao và dễ dàng mở rộng. Bài viết này đã cung cấp hướng dẫn chi tiết về cách thực hiện các bước cần thiết, từ thiết lập môi trường phát triển, thiết kế database, xây dựng API, đến phát triển giao diện người dùng và triển khai ứng dụng. Trong tương lai, phát triển web bán hàng đồ công nghệ sẽ tiếp tục phát triển với các xu hướng mới như trí tuệ nhân tạo, thực tế ảo và thực tế tăng cường. Việc áp dụng các công nghệ này sẽ giúp tạo ra những trải nghiệm mua sắm độc đáo và hấp dẫn cho khách hàng. Ví dụ, trí tuệ nhân tạo có thể được sử dụng để cá nhân hóa trải nghiệm mua sắm, đề xuất sản phẩm phù hợp với sở thích của khách hàng và cung cấp dịch vụ hỗ trợ khách hàng tự động. Thực tế ảo và thực tế tăng cường có thể được sử dụng để cho phép khách hàng thử sản phẩm trước khi mua, ví dụ như thử quần áo hoặc xem sản phẩm trong không gian thực.

6.1. Xu hướng phát triển web bán hàng AI VR và AR

Xu hướng phát triển web bán hàng đang chứng kiến sự trỗi dậy của các công nghệ như AI, VR và AR. - AI có thể được sử dụng để cá nhân hóa trải nghiệm mua sắm, đề xuất sản phẩm phù hợp với sở thích của khách hàng và cung cấp dịch vụ hỗ trợ khách hàng tự động. - VR có thể được sử dụng để tạo ra các trải nghiệm mua sắm ảo, cho phép khách hàng khám phá sản phẩm trong một môi trường ảo. - AR có thể được sử dụng để cho phép khách hàng thử sản phẩm trước khi mua, ví dụ như thử quần áo hoặc xem sản phẩm trong không gian thực. Việc áp dụng các công nghệ này sẽ giúp tạo ra những trải nghiệm mua sắm độc đáo và hấp dẫn cho khách hàng.

6.2. Mẫu website bán đồ công nghệ và theme website bán đồ công nghệ

Mẫu website bán đồ công nghệ và theme website bán đồ công nghệ là những công cụ hữu ích để giúp bạn bắt đầu xây dựng website của mình một cách nhanh chóng và dễ dàng. Có rất nhiều mẫu và theme miễn phí và trả phí có sẵn trên thị trường, với nhiều phong cách thiết kế và tính năng khác nhau. Khi chọn mẫu hoặc theme, cần cân nhắc các yếu tố như: - Thiết kế: Chọn một mẫu hoặc theme có thiết kế phù hợp với thương hiệu của bạn. - Tính năng: Chọn một mẫu hoặc theme có các tính năng cần thiết cho website của bạn. - Responsive design: Chọn một mẫu hoặc theme có responsive design để đảm bảo website hiển thị tốt trên mọi thiết bị. - Hỗ trợ: Chọn một mẫu hoặc theme có dịch vụ hỗ trợ tốt. Việc sử dụng mẫu hoặc theme có thể giúp bạn tiết kiệm thời gian và công sức trong quá trình xây dựng website.

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

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN ---------- BÁO CÁO ĐỒ ÁN 1 XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ VỚI SPRING BOOT VÀ REACTJS Giảng viên hướng dẫn: ThS. Trần Thị Hồng Yến Sinh viên thực hiện: Phạm Tấn Khang 19521670 Bùi Minh Huy 19521597 Thành phố Hồ Chí Minh, 16 tháng 06 năm 2022 ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN ---------- BÁO CÁO ĐỒ ÁN 1 XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ VỚI SPRING BOOT VÀ REACTJS Giảng viên hướng dẫn: ThS. Trần Thị Hồng Yến Sinh viên thực hiện: Phạm Tấn Khang 19521670 Bùi Minh Huy 19521597 Thành phố Hồ Chí Minh, 16 tháng 06 năm 2022 LỜI CẢM ƠN Đầu tiên, nhóm xin gửi lời cảm ơn chân thành đến tập thể quý Thầy Cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM và quý Thầy Cô khoa Công nghệ phần mềm đã giúp cho em có những kiến thức cơ bản làm nền tảng để thực hiện đề tài này. Đặc biệt, em xin gửi lời cảm ơn và lòng biết ơn sâu sắc nhất tới cô Trần Thị Hồng Yến (Giảng viên khoa Công Nghệ Phần Mềm).

Cô đã trực tiếp hướng dẫn tận tình, sửa chữa và đóng góp nhiều ý kiến quý báu giúp em hoàn thành tốt báo cáo môn học của mình. Trong thời gian một học kỳ thực hiện đề tài, em đã vận dụng những kiến thức nền tảng đã tích lũy đồng thời kết hợp với việc học hỏi và nghiên cứu những kiến thức mới. Từ đó, em vận dụng tối đa những gì đã thu thập được để hoàn thành một báo cáo đồ án tốt nhất. Tuy nhiên, trong quá trình thực hiện, em không tránh khỏi những thiếu sót.

Chính vì vậy, em rất mong nhận được những sự góp ý từ phía Cô nhằm hoàn thiện những kiến thức mà em đã học tập và là hành trang để em thực hiện tiếp các đề tài khác trong tương lai. Xin chân thành cảm ơn các quý Thầy Cô! Nhóm sinh viên thực hiện Phạm Tấn Khang Bùi Minh Huy 1 ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ VỚI SPRING BOOT VÀ REACTJS TÊN ĐỀ TÀI TIẾNG ANH: BUILDING TECHNOLOGY SHOP WEBSITE WITH SPRING BOOT AND REACTJS Cán bộ hướng dẫn: ThS. Trần Thị Hồng Yến Thời gian thực hiện: Từ ngày: 21/02/2022 đến ngày: 10/06/2022 Sinh viên thực hiện: Phạm Tấn Khang – 19521670 Bùi Minh Huy – 19521597 Nội dung đề tài: 1. Giới thiệu đề tài: Trong thời đại chuyển giao công nghệ cộng với sự tác động của đại dịch mà người tiêu dùng chuyển thói quen mua hàng tại các cửa hàng siêu thị sang mua sắm online.

Bởi vì sự tiện lợi, giá cả rõ ràng, vận chuyển đơn hàng ngày càng nhanh chóng hơn, các cửa hàng kinh doanh luôn nhận thấy được tiềm năng của việc tiếp thị và bán hàng online.Đặc biệt đối với các cửa hàng bán đồ công nghệ cần phải mở rộng hơn trong việc quảng bá các mặt hàng của mình tới khách hàng. Nhận thấy được nhu cầu của cửa hàng và tiềm năng trong việc kinh doanh online, nhóm 2 chúng em đã tiến hành xây dựng "Website bán hàng công nghệ" nhằm thúc đẩy doanh thu của cửa hàng thông qua việc bán hàng online. Phần mềm sẽ là nơi cũng cấp cho người dùng những thông tin chính xác và giá cả trực quan nhất của sản phẩm, góp phần làm cho việc mua bán các thiết bị công nghệ trong thời kì dịch bệnh trở nên dễ dàng hơn. Ngoài ra còn giúp của hàng có thể quản lý kho hàng, các đơn xuất nhập hàng và doanh thu.

Mục tiêu đề tài: - Nắm bắt và áp dụng được framework Spring Boot và ReactJS để xây dựng sản phẩm đề tài. - Xây dựng được website bán đồ công nghệ với nội dung phong phú, giao diện thân thiện, màu sắc hài hòa, bố cục hợp lý, đáp ứng các chức năng cần thiết của một website thương mại điện tử. Website được phát triển dựa trên VueJs. - Xây dựng được website quản trị cho nhân viên của hàng với các chức năng quản lý thông tin đa dạng và tiện dụng.

Website được phát triển dựa trên ReactJs. Phạm vi đề tài: • Phạm vi môi trường: o Triển khai sản phẩm trên môi trường web. • Phạm vi chức năng: o Đối với phía admin: ▪ Quản lý sản phẩm, biến thể sản phẩm. ▪ Quản lý thương hiệu, loại sản phẩm.

▪ Quản lý nhập hàng. ▪ Quản lý tài khoản nhân viên. 3 o Đối với phía website: ▪ Đăng nhập, đăng ký tài khoản. ▪ Xác thực mail, quên mật khẩu.

▪ Quản lý thông tin tài khoản. ▪ Hiển thị danh sách sản phẩm, chi tiết sản phẩm. ▪ Tìm kiếm sản phẩm. ▪ Bộ lọc chi tiết sản phẩm.

▪ Chức năng giỏ hàng. ▪ Chức năng đặt hàng. ▪ Lịch sử mua hàng. Đối tượng sử dụng: - Tất cả người dùng có nhu cầu mua đồ công nghệ tại cửa hàng.

- Nhân viên, chủ cửa hàng. Phương pháp thực hiện: - Tìm hiểu về Spring Boot, ReactJS, VueJS, PostgreSQL. - Tham khảo các website liên quan để hiểu rõ về nghiệp vụ. - Tiến hành phân tích và thiết kế hệ thống.

- Tìm hiểu UX/UI và tiến hành thiết kế giao diện cho website. - Xây dựng website cho người dùng và website cho nhân viên. - Tiến hành triển khai và kiểm thử. Công nghệ sử dụng: - Backend: Spring Boot - Front-end: ReactJS, VueJS - Database: PostgreSQL - Source Control: GitHub 4 7.

Kết quả mong đợi: - Nắm bắt và áp dụng được các công nghệ mới để xây dựng sản phẩm đề tài. - Hiểu rõ các nghiệp vụ, chức năng của một website thương mại điện tử. - Áp dụng được các kiến thức đã học về phân tích và thiết kế hệ thống phần mềm, quy trình phát triển phần mềm, cũng như quản lý và triển khai dự án phần mềm để xây dựng website sản phẩm đề tài. - Giao diện website đẹp mắt, dễ sử dụng đối với người dùng.

- Có thể thay đổi giao diện một cách linh động và mở rộng thêm các chức năng mới cho website sản phẩm đề tài để phù hợp với nhu cầu thực tiễn trong tương lai. Kế hoạch thực hiện: Giai đoạn Thời gian Công việc Chuẩn bị - Tìm hiểu về Spring Boot và ReactJS, kiến thức về 21/02/2022 – 07/03/2022 PostgreSQL công nghệ - Phân tích, xác định, chức năng. Phân tích, - Thiết kế database. thiết kế 08/03/2022 – 08/04/2021 - Xây dựng base source.

hệ thống - Thiết kế UI. - Xây dựng giao diện admin với ReactJS. - Xây dựng giao diện website với VueJS. Xây dựng - Xây dựng RESTful API cho các chức 09/04/2021 – 16/05/2021 ứng dụng năng.

- Tích hợp API để hoàn thiện giao diện admin và website. - Thực hiện kiểm thử các luồng chức năng. Kiểm thử 17/05/2021 – 31/05/2021 - Tiến hành sửa lỗi phát sinh nếu có. và sửa lỗi - Cải thiện giao diện và hoàn thành ứng dụng Hoàn thiện - Viết báo cáo.

báo cáo và - Làm slide thuyết trình. 01/06/2022 – 10/06/2022 slide thuyết trình 6 9. Phân công công việc: Công việc Mô tả công việc Công việc chung - Tìm hiểu công nghệ. - Phân tích, xác định, chức năng yêu cầu.

- Chuẩn bị tài liệu, viết báo cáo. - Xây dựng website bán hàng. Phạm Tấn Khang Bùi Minh Huy Công việc cá nhân - Lập trình Backend, xây - Lập trình Frontend, xây dựng dựng RESTful API. giao diện admin.

- Thiết kế cơ sở dữ liệu. - Crawl data cho website. HCM, ngày 10 tháng 06 năm 2022 Xác nhận của CBHD Sinh viên (Ký tên và ghi rõ họ tên) (Ký tên và ghi rõ họ tên) ThS. Trần Thị Hồng Yến Phạm Tấn Khang | Bùi Minh Huy 7 MỤC LỤC LỜI CẢM ƠN .1 ĐỀ CƯƠNG CHI TIẾT .8 DANH MỤC BẢNG .12 DANH MỤC HÌNH ẢNH.

GIỚI THIỆU ĐỀ TÀI .2 Mô tả đề tài .3 Lý do chọn thiết kế Website .4 Công nghệ sử dụng .1 Tổng quan về ReactJS.2 Tổng quan về VueJS .3 Tổng quan về Spring Boot .4 Tổng quan về Spring Data JPA .5 Tổng quan về Postgres SQL .6 Tổng quan về Cloudinary .7 Tổng quan về Json Web Token (JWT). PHÂN TÍCH ĐẶC TẢ YÊU CẦU .1 Mô tả yêu cầu .1 Yêu cầu chức năng .2 Yêu cầu phi chức năng .2 Phân tích Use case .1 Use case quản lý .2 Danh sách Actor .3 Danh sách Use-case .4 Đặc tả Use-case.2 Use case website .2 Danh sách Actor .3 Danh sách Use case .4 Đặc tả Use Case. THIẾT KẾ HỆ THỐNG .1 Kiến trúc hệ thống.1 Kiến trúc hệ thống BackEnd .1 Mô tả kiến trúc hệ thống .2 Mô tả thành phần trong hệ thống .2 Mô tả kiến trúc FrontEnd .1 Phía hệ thống quản lý. THIẾT KẾ CƠ SỞ DỮ LIỆU .2 Danh sách các bảng dữ liệu .3 Mô tả từng bảng dữ liệu .5 Bảng CATEGORY_ATTRIBUTE .8 Bảng VARIANT_ATTRIBUTE .10 Bảng IMPORT_DETAIL .13 Bảng ORDER_DETAIL .16 Bảng VERIFICATION_TOKEN .17 Bảng PASSWORD_RESET_TOKEN.

THIẾT KẾ GIAO DIỆN .1 Phía hệ thống quản lý.2 Danh sách các màn hình.3 Mô tả chi tiết .1 Màn hình quản lý phân loại .2 Màn hình thêm phân loại .3 Màn hình chỉnh sửa phân loại .4 Màn hình quản lý thương hiệu .5 Màn hình tạo mới thương hiệu .6 Màn hình chỉnh sửa thương hiệu .7 Màn hình quản lý sản phẩm .8 Màn hình tạo mới sản phẩm .9 Màn hình chỉnh sửa sản phẩm .10 Màn hình chỉnh sửa phiên bản .11 Màn hình quản lý đơn hàng .12 Màn hình xem chi tiết đơn hàng .13 Màn hình xuất hóa đơn .14 Màn hình quản lý nhập hàng .15 Màn hình tạo mới đơn nhập .16 Màn hình xem chi tiết đơn nhập .17 Màn hình xuất đơn nhập .18 Màn hình quản lý tài khoản khách hàng .19 Màn hình quản lý tài khoản nhân viên .20 Màn hình tạo mới tài khoản nhân viên .21 Màn hình quản lý khuyến mãi .22 Màn hình tạo mới khuyến mãi .23 Màn hình chỉnh sửa khuyến mãi .24 Màn hình thống kê .2 Danh sách các màn hình.3 Chi tiết màn hình .2 Xem sản phẩm theo thương hiệu .3 Xem sản phẩm theo phân loại.4 Xem giỏ hàng .5 Thông tin đặt hàng .6 Chi tiết sản phẩm .7 Lịch sử mua hàng .8 Thay đổi thông tin cá nhân .9 Thay đổi mật khẩu .12 Quên mật khẩu .13 Đặt lại mật khẩu. 120 TÀI LIỆU THAM KHẢO. 122 11 DANH MỤC BẢNG Bảng 3.1 Yêu cầu chức năng.2 Danh sách Actor quản lý.3 Danh sách use-case quản lý .4 Đăc tả use-case đăng nhập (quản lý) .5 Đặc tả use-case đăng xuất (quản lý) .6 Đặc tả use-case chỉnh sửa thông tin (quản lý) .7 Đặc tả use-case đổi mật khẩu (quản lý) .8 Đặc tả use-case quản lý phân loại sản phẩm (quản lý) .9 Đặc tả use-case quản lý thương hiệu sản phẩm (quản lý) .10 Đặc tả use-case quản lý sản phẩm, phiên bản (quản lý) .