Xây Dựng Website Bán Hàng Linh Kiện Điện Tử với Spring Boot và ReactJS - Đồ Án Tốt Nghiệp

Xây dựng website bán linh kiện điện tử chuyên nghiệp với Spring Boot và ReactJS. Tìm hiểu quy trình, ưu điểm và cách triển khai hiệu quả. Tối ưu SEO, tăng doanh thu!

• Tác giả: Trần Minh Sang
• Người hướng dẫn: Ts. Lê Văn Vinh
• Trường học: Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
• Chuyên ngành: Công Nghệ Thông Tin
• Đề tài: Xây Dựng Website Bán Hàng Linh Kiện Điện Tử Sử Dụng Spring Boot Và React Js
• Loại tài liệu: đồ án tốt nghiệp
• Năm xuất bản: 2024
• Địa điểm: Tp. Hồ Chí Minh

Mục lục chi tiết

• LỜI CẢM ƠN
• DANH MỤC TỪ VIẾT TẮT
• DANH MỤC HÌNH ẢNH
• DANH MỤC BẢNG
• PHẦN MỞ ĐẦU
• 1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI
• 2. ĐỐI TƯỢNG NGHIÊN CỨU
• 3. PHẠM VI NGHIÊN CỨU
• 4. MỤC ĐÍCH CỦA ĐỀ TÀI
• 5. PHƯƠNG PHÁP NGHIÊN CỨU
• 6. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
• PHẦN NỘI DUNG
• 1. CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
• 1.1. JSON WEB TOKEN
• 2. CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HOÁ YÊU CẦU
• 2.1. KHẢO SÁT HIỆN TRẠNG
• 2.2. XÁC ĐỊNH YÊU CẦU
• 2.3. MÔ HÌNH HOÁ YÊU CẦU
• 3. CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
• 3.1. LƯỢC ĐỒ TUẦN TỰ
• 3.2. CƠ SỞ DỮ LIỆU
• 3.3. THIẾT KẾ GIAO DIỆN
• 4. CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ
• PHẦN KẾT LUẬN
• 1. KẾT QUẢ ĐẠT ĐƯỢC
• 2. NHƯỢC ĐIỂM
• 3. HƯỚNG PHÁT TRIỂN
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Hướng Dẫn Xây Dựng Website Bán Linh Kiện Điện Tử Tối Ưu

Việc phát triển một website bán linh kiện điện tử trong bối cảnh công nghệ 4.0 là một nhu cầu cấp thiết. Thị trường dành cho các sản phẩm linh kiện điện tử DIY, vi điều khiển, và mạch in PCB ngày càng mở rộng, thu hút không chỉ các kỹ sư mà còn cả những người đam mê công nghệ. Dự án này tập trung vào việc xây dựng một nền tảng thương mại điện tử hoàn chỉnh, sử dụng các công nghệ hiện đại là Spring Boot cho backend và ReactJS cho frontend. Đây là một đồ án tốt nghiệp IT tiêu biểu, thể hiện khả năng ứng dụng kiến thức vào giải quyết bài toán thực tế. Theo tài liệu nghiên cứu của Trần Minh Sang và Nguyễn Hoàng Chí Vĩ (ĐHSPKT TP.HCM, 2024), mục tiêu không chỉ dừng lại ở việc tạo ra một cửa hàng linh kiện online mà còn là xây dựng một hệ thống có hiệu năng cao, bảo mật và dễ dàng mở rộng. Dự án này cung cấp một hướng dẫn lập trình web chi tiết từ khâu phân tích yêu cầu, thiết kế cơ sở dữ liệu với MongoDB, cho đến triển khai các tính năng phức tạp như quản lý sản phẩm, quản lý đơn hàng, và tích hợp thanh toán VNPAY. Sự kết hợp giữa Spring Boot và ReactJS tạo nên một giải pháp full-stack web development mạnh mẽ, đáp ứng được các yêu cầu khắt khe của một website bán hàng hiện đại. Đây là một project mẫu Spring Boot React giá trị cho cộng đồng lập trình viên, đặc biệt là những ai đang tìm kiếm một source code website bán hàng hoàn chỉnh để học hỏi và phát triển.

1.1. Tổng quan đồ án tốt nghiệp IT về Spring Boot và ReactJS

Đồ án tập trung vào việc nghiên cứu và áp dụng các công nghệ tiên tiến để xây dựng một website thương mại điện tử chuyên biệt. Backend hệ thống được xây dựng bằng Spring Boot, một framework mạnh mẽ giúp đơn giản hóa việc phát triển ứng dụng Java. Các Spring Boot REST API được thiết kế để xử lý logic nghiệp vụ, từ quản lý người dùng, sản phẩm đến xử lý đơn hàng. Về phía frontend, ReactJS được lựa chọn để tạo ra một giao diện người dùng (UI) động, nhanh và tương tác cao. Việc sử dụng React Hooks và các thư viện quản lý trạng thái như Redux Toolkit giúp tối ưu hóa trải nghiệm người dùng. Cơ sở dữ liệu NoSQL MongoDB được sử dụng để lưu trữ dữ liệu linh hoạt, đặc biệt phù hợp với các sản phẩm có thuộc tính đa dạng như linh kiện điện tử. Yếu tố bảo mật được chú trọng thông qua việc áp dụng Spring Security và cơ chế xác thực bằng JWT authentication.

1.2. Mục tiêu chính của project mẫu Spring Boot React này

Mục tiêu cốt lõi của dự án là xây dựng một website bán hàng đầy đủ chức năng và có tính ứng dụng thực tiễn cao. Hệ thống phải đáp ứng các nghiệp vụ cơ bản như xem danh sách sản phẩm, tìm kiếm, thêm vào giỏ hàng, và đặt hàng. Bên cạnh đó, các tính năng nâng cao cũng được tích hợp, bao gồm đánh giá sản phẩm, quản lý thông tin tài khoản cá nhân, và theo dõi đơn hàng. Một mục tiêu quan trọng khác là cung cấp một giao diện quản trị viên (Admin) mạnh mẽ, cho phép thực hiện các thao tác quản lý sản phẩm, quản lý danh mục, và thống kê doanh thu. Đặc biệt, dự án hướng đến việc cung cấp một source code website bán hàng chất lượng, dễ hiểu và dễ dàng mở rộng, phục vụ mục đích học tập và tham khảo cho các sinh viên và lập trình viên khác trong lĩnh vực full-stack web development.

II. Thách Thức Khi Lập Trình Web Bán Linh Kiện Điện Tử DIY

Xây dựng một website bán linh kiện điện tử không chỉ đơn thuần là tạo ra một trang thương mại điện tử. Lĩnh vực này có những đặc thù riêng biệt, đặt ra nhiều thách thức cho đội ngũ phát triển. Đầu tiên là sự đa dạng và phức tạp của sản phẩm. Các mặt hàng như vi điều khiển (Arduino, Raspberry Pi), cảm biến, và module điện tử có vô số thông số kỹ thuật, tài liệu đi kèm và các phiên bản khác nhau. Việc tổ chức và hiển thị thông tin này một cách khoa học, dễ tìm kiếm là một bài toán khó. Thứ hai, đối tượng khách hàng thường là những người có kiến thức kỹ thuật, đòi hỏi thông tin sản phẩm phải chính xác tuyệt đối. Bất kỳ sai sót nào trong mô tả cũng có thể dẫn đến việc mua nhầm sản phẩm, ảnh hưởng đến uy tín của cửa hàng linh kiện online. Thách thức thứ ba đến từ việc quản lý tồn kho và chuỗi cung ứng phức tạp. Một mạch in PCB có thể yêu cầu nhiều linh kiện nhỏ khác nhau, việc đồng bộ hóa số lượng tồn kho theo thời gian thực đòi hỏi một hệ thống backend vững chắc. Cuối cùng, việc xây dựng lòng tin và cung cấp trải nghiệm mua sắm an toàn, tiện lợi qua các cổng thanh toán uy tín là yếu tố sống còn. Quá trình này đòi hỏi một kiến thức sâu rộng về hướng dẫn lập trình web an toàn và bảo mật.

2.1. Phân tích các cửa hàng linh kiện online hiện có trên thị trường

Khảo sát các website hiện có như Chotroihn, Thegioiic, Linhkienviet cho thấy nhiều nền tảng vẫn còn tồn tại các nhược điểm. Một số trang có giao diện chưa tối ưu, gây khó khăn cho người dùng trong việc tìm kiếm và lọc sản phẩm. Chức năng tìm kiếm thường chỉ dựa trên tên, thiếu các bộ lọc nâng cao theo thông số kỹ thuật. Nhiều hệ thống chưa hỗ trợ đa dạng phương thức thanh toán hoặc quy trình đặt hàng còn rườm rà, yêu cầu nhiều bước không cần thiết. Đáng chú ý, không phải tất cả các website đều có chức năng đánh giá sản phẩm từ cộng đồng, làm giảm đi một kênh thông tin tham khảo quan trọng cho người mua. Những hạn chế này chính là cơ hội để một project mẫu Spring Boot React mới có thể cải tiến và mang lại trải nghiệm vượt trội hơn.

2.2. Yêu cầu hệ thống cho một trang thương mại điện tử hiện đại

Một hệ thống thương mại điện tử hiện đại phải đáp ứng các yêu cầu phi chức năng khắt khe. Tốc độ tải trang và phản hồi của hệ thống phải nhanh chóng để giữ chân người dùng. Tính bảo mật là ưu tiên hàng đầu, mọi thông tin cá nhân và giao dịch của khách hàng phải được mã hóa và bảo vệ an toàn, đặc biệt khi tích hợp thanh toán VNPAY. Hệ thống cần có khả năng mở rộng (scalability) để có thể xử lý lượng truy cập lớn trong các đợt khuyến mãi. Giao diện phải thân thiện, tương thích trên nhiều thiết bị (responsive design). Về mặt chức năng, hệ thống cần có cơ chế phân quyền rõ ràng giữa khách hàng và quản trị viên, cung cấp các công cụ quản lý mạnh mẽ và khả năng thống kê, báo cáo doanh thu chi tiết.

III. Giải Pháp Backend Spring Boot REST API Cho Website Bán Hàng

Để giải quyết các thách thức của một website bán linh kiện điện tử, việc lựa chọn công nghệ backend là yếu tố then chốt. Spring Boot được chọn làm nền tảng chính nhờ khả năng tạo ra các ứng dụng độc lập, cấu hình tối giản và hiệu năng cao. Trọng tâm của kiến trúc backend là xây dựng một hệ thống Spring Boot REST API toàn diện. Các API này tuân thủ theo tiêu chuẩn RESTful, giúp cho việc giao tiếp giữa server và client (ReactJS) trở nên rõ ràng và nhất quán. Mỗi API đảm nhận một chức năng cụ thể, từ việc truy vấn danh sách linh kiện điện tử DIY, xem chi tiết một module điện tử, cho đến các nghiệp vụ phức tạp như xử lý giỏ hàng và tạo đơn hàng. Việc sử dụng Spring Data JPA kết hợp với MongoDB giúp đơn giản hóa các thao tác truy vấn cơ sở dữ liệu, cho phép lập trình viên tập trung vào logic nghiệp vụ thay vì viết các câu lệnh truy vấn phức tạp. Theo tài liệu đồ án, hệ thống backend được thiết kế theo kiến trúc microservices-ready, tạo tiền đề cho việc mở rộng và nâng cấp trong tương lai. Đây là một phương pháp tiếp cận hiện đại trong full-stack web development, đảm bảo hệ thống luôn ổn định và linh hoạt.

3.1. Triển khai Spring Data JPA với cơ sở dữ liệu MongoDB

Dự án sử dụng Spring Data JPA để tương tác với cơ sở dữ liệu NoSQL MongoDB. Mặc dù JPA thường gắn liền với cơ sở dữ liệu quan hệ, Spring Data cung cấp một lớp trừu tượng mạnh mẽ cho phép làm việc với MongoDB một cách tự nhiên. Các thực thể (documents) như Product, User, Order được định nghĩa dưới dạng các lớp Java đơn giản (POJO). Các Repository interface được tạo ra, kế thừa từ MongoRepository, tự động cung cấp các phương thức CRUD (Create, Read, Update, Delete) cơ bản. Đối với các truy vấn phức tạp hơn, Spring Data MongoDB cho phép định nghĩa các phương thức truy vấn dựa trên tên phương thức (query methods) hoặc sử dụng chú thích @Query. Cách tiếp cận này giúp giảm thiểu đáng kể code boilerplate, tăng tốc độ phát triển và làm cho mã nguồn dễ đọc, dễ bảo trì hơn.

3.2. Bảo mật hệ thống với Spring Security và JWT authentication

Bảo mật là yếu tố không thể thiếu trong bất kỳ ứng dụng web nào, đặc biệt là các trang thương mại điện tử. Dự án đã tích hợp Spring Security, một framework bảo mật mạnh mẽ và linh hoạt. Cơ chế xác thực và phân quyền được triển khai bằng JWT authentication (JSON Web Token). Khi người dùng đăng nhập thành công, server sẽ tạo ra một JWT chứa thông tin định danh và vai trò của người dùng, sau đó gửi về cho client. Trong các yêu cầu tiếp theo, client sẽ đính kèm JWT này vào header. Server sẽ xác thực token để đảm bảo yêu cầu là hợp lệ và người dùng có đủ quyền thực hiện hành động đó. Phương pháp này là stateless, không yêu cầu server lưu trữ session, giúp hệ thống dễ dàng mở rộng và phù hợp với kiến trúc API.

IV. Cách Xây Dựng Giao Diện ReactJS Với React Hooks Redux

Giao diện người dùng của website bán linh kiện điện tử được xây dựng hoàn toàn bằng ReactJS. Lựa chọn này mang lại một trải nghiệm người dùng mượt mà, nhanh chóng và có tính tương tác cao. Toàn bộ giao diện được chia thành các component tái sử dụng, từ những thành phần nhỏ như nút bấm, ô nhập liệu cho đến các trang phức tạp như trang chi tiết sản phẩm hay trang giỏ hàng. Dự án tận dụng triệt để React Hooks (useState, useEffect, useContext) để quản lý state và vòng đời của component một cách hiệu quả, giúp mã nguồn ngắn gọn và dễ hiểu hơn so với kiến trúc class-based component trước đây. Để xử lý các state toàn cục (global state) như thông tin người dùng đăng nhập, danh sách sản phẩm trong giỏ hàng, dự án đã tích hợp Redux Toolkit. Đây là một công cụ giúp đơn giản hóa việc thiết lập và sử dụng Redux, giảm thiểu code lặp lại và tuân theo các best practices. Việc giao tiếp với backend được thực hiện thông qua các lời gọi API bất đồng bộ, sử dụng thư viện Axios API call. Điều này đảm bảo giao diện không bị "đóng băng" trong khi chờ dữ liệu từ server, mang lại cảm giác phản hồi tức thì cho người dùng.

4.1. Quản lý trạng thái ứng dụng hiệu quả bằng Redux Toolkit

Trong một ứng dụng thương mại điện tử phức tạp, việc quản lý state trở nên khó khăn nếu chỉ dùng state nội bộ của component. Redux Toolkit được áp dụng để tạo ra một "store" duy nhất chứa toàn bộ trạng thái của ứng dụng. Các "slice" được tạo ra để quản lý từng phần của state (ví dụ: authSlice, cartSlice, productSlice). Mỗi slice bao gồm reducer và các action creator liên quan, giúp mã nguồn được tổ chức một cách logic. Khi người dùng thực hiện một hành động, ví dụ như thêm một module điện tử vào giỏ hàng, một action sẽ được dispatch đến store. Reducer tương ứng sẽ cập nhật lại state, và các component đang "lắng nghe" sự thay đổi này (thông qua useSelector hook) sẽ tự động re-render để hiển thị dữ liệu mới.

4.2. Kỹ thuật gọi API bất đồng bộ sử dụng Axios API call

Tất cả các tương tác với Spring Boot REST API từ phía ReactJS đều được thực hiện thông qua thư viện Axios. Axios cung cấp một API đơn giản, dựa trên Promise để thực hiện các yêu cầu HTTP. Dự án tạo ra một instance Axios được cấu hình sẵn (ví dụ: baseURL, headers mặc định) để tái sử dụng trong toàn bộ ứng dụng. Các hàm gọi API được tổ chức thành các service riêng biệt (ví dụ: productService, authService), giúp tách biệt logic gọi API khỏi giao diện. Để xử lý các tác vụ bất đồng bộ một cách gọn gàng, dự án kết hợp Redux Toolkit với createAsyncThunk. Kỹ thuật này cho phép dispatch các action tương ứng với các trạng thái của một lời gọi API (pending, fulfilled, rejected), giúp dễ dàng hiển thị trạng thái loading hoặc thông báo lỗi cho người dùng.

V. Top Chức Năng Cốt Lõi Của Website Bán Linh Kiện Điện Tử

Một website bán linh kiện điện tử thành công phải cung cấp đầy đủ các tính năng cần thiết để phục vụ cả khách hàng và người quản trị. Dựa trên phân tích từ đồ án tốt nghiệp IT của ĐHSPKT TP.HCM, hệ thống được xây dựng với một loạt các chức năng cốt lõi. Đối với người dùng, tính năng tìm kiếm và lọc sản phẩm là cực kỳ quan trọng. Khách hàng có thể dễ dàng tìm thấy các loại linh kiện điện tử DIY, vi điều khiển như Arduino, Raspberry Pi, hoặc các loại cảm biến cụ thể dựa trên danh mục, giá cả và các thuộc tính khác. Trang chi tiết sản phẩm cung cấp đầy đủ thông tin kỹ thuật, hình ảnh và các đánh giá từ người mua trước. Quy trình mua hàng được tối ưu hóa, từ việc thêm sản phẩm vào giỏ hàng, chọn địa chỉ giao hàng, cho đến bước thanh toán cuối cùng. Hệ thống hỗ trợ cả thanh toán khi nhận hàng (COD) và thanh toán trực tuyến qua cổng tích hợp thanh toán VNPAY, mang lại sự linh hoạt cho khách hàng. Về phía quản trị, hệ thống cung cấp một trang dashboard mạnh mẽ cho phép quản lý sản phẩm (thêm, sửa, xóa), quản lý đơn hàng (xác nhận, hủy đơn, cập nhật trạng thái giao hàng) và quản lý người dùng. Chức năng thống kê doanh thu theo ngày, tháng, năm cũng được tích hợp, giúp chủ cửa hàng nắm bắt tình hình kinh doanh một cách hiệu quả.

5.1. Quy trình quản lý sản phẩm và quản lý đơn hàng chi tiết

Chức năng quản lý sản phẩm cho phép admin thêm mới các linh kiện điện tử với đầy đủ thông tin: tên, mô tả, hình ảnh, giá, số lượng tồn kho và danh mục. Giao diện quản lý hiển thị danh sách sản phẩm dưới dạng bảng, hỗ trợ tìm kiếm và lọc, giúp admin dễ dàng cập nhật thông tin. Tương tự, chức năng quản lý đơn hàng là trung tâm xử lý của website. Mỗi khi có đơn hàng mới, hệ thống sẽ thông báo cho admin. Admin có thể xem chi tiết từng đơn hàng, bao gồm thông tin khách hàng, sản phẩm đã đặt, và trạng thái thanh toán. Quy trình xử lý đơn hàng được chuẩn hóa qua các trạng thái: Đang xử lý, Đang giao hàng, Giao hàng thành công, Đã hủy.

5.2. Hoàn thiện giỏ hàng và tích hợp thanh toán VNPAY

Tính năng giỏ hàng được xây dựng để mang lại trải nghiệm mua sắm liền mạch. Người dùng có thể thêm, xóa, hoặc cập nhật số lượng sản phẩm trong giỏ. Giá trị giỏ hàng được tự động tính toán lại mỗi khi có thay đổi. Điểm nổi bật của dự án là việc tích hợp thanh toán VNPAY, một trong những cổng thanh toán phổ biến nhất tại Việt Nam. Khi người dùng chọn phương thức này, hệ thống sẽ chuyển hướng đến cổng thanh toán của VNPAY. Sau khi giao dịch hoàn tất, VNPAY sẽ gửi kết quả về cho website để cập nhật trạng thái đơn hàng. Quá trình tích hợp này đòi hỏi xử lý checksum và các callback một cách cẩn thận để đảm bảo tính an toàn và chính xác cho giao dịch.

5.3. Hỗ trợ tìm kiếm vi điều khiển mạch in PCB và cảm biến

Để phục vụ đối tượng khách hàng chuyên biệt, chức năng tìm kiếm được tối ưu hóa cho các mặt hàng kỹ thuật. Người dùng không chỉ tìm kiếm theo tên chung chung mà còn có thể sử dụng các từ khóa kỹ thuật như tên mã của vi điều khiển, loại mạch in PCB, hoặc chức năng của cảm biến. Hệ thống có thể được mở rộng để tích hợp tìm kiếm theo thông số kỹ thuật (ví dụ: điện áp hoạt động, tần số, chuẩn giao tiếp). Việc phân loại sản phẩm vào các danh mục rõ ràng (VD: Arduino, Raspberry Pi, Cảm biến nhiệt độ, Module Wifi) cũng góp phần giúp người dùng điều hướng và tìm thấy sản phẩm mong muốn một cách nhanh chóng nhất.

VI. Kết Quả Hướng Phát Triển Cho Source Code Website Bán Hàng

Dự án "Xây dựng website bán linh kiện điện tử sử dụng Spring Boot và ReactJS" đã đạt được những kết quả đáng ghi nhận. Sản phẩm cuối cùng là một hệ thống thương mại điện tử hoàn chỉnh, đáp ứng đầy đủ các yêu cầu chức năng và phi chức năng đã đề ra. Hệ thống hoạt động ổn định, hiệu năng tốt và có giao diện thân thiện với người dùng. Việc áp dụng thành công các công nghệ hiện đại trong full-stack web development như Spring Boot, ReactJS, MongoDB và JWT authentication đã chứng tỏ năng lực của nhóm thực hiện. Source code website bán hàng của dự án được tổ chức tốt, rõ ràng và có tính module hóa cao, dễ dàng cho việc bảo trì và phát triển sau này. Theo phần kết luận của đồ án, dự án không chỉ là một sản phẩm ứng dụng mà còn là một tài liệu học tập quý giá. Nó cung cấp một project mẫu Spring Boot React thực tế, giúp các lập trình viên khác có cái nhìn tổng quan về quy trình xây dựng một ứng dụng web từ đầu đến cuối. Tuy nhiên, không có hệ thống nào là hoàn hảo. Hướng phát triển trong tương lai là rất cần thiết để nâng cao giá trị và khả năng cạnh tranh của sản phẩm.

6.1. Đánh giá kết quả đạt được của dự án full stack web

Kết quả chính của dự án là một website hoạt động trơn tru với hai phần riêng biệt: trang cho khách hàng và trang quản trị. Phía khách hàng có đầy đủ các tính năng mua sắm online: xem sản phẩm, tìm kiếm, lọc, giỏ hàng, đặt hàng, thanh toán và đánh giá. Phía quản trị cung cấp các công cụ mạnh mẽ để quản lý sản phẩm, quản lý đơn hàng, người dùng và xem thống kê. Việc sử dụng kiến trúc RESTful API đã tạo ra sự tách biệt rõ ràng giữa backend và frontend, cho phép hai phần này có thể phát triển độc lập. Hệ thống bảo mật với Spring Security và JWT đã đảm bảo an toàn cho dữ liệu người dùng và các giao dịch. Đây là một minh chứng thành công cho việc ứng dụng kiến thức hướng dẫn lập trình web vào một dự án thực tế.

6.2. Tiềm năng mở rộng và cải tiến trong tương lai của dự án

Dự án vẫn còn nhiều tiềm năng để phát triển. Về chức năng, có thể bổ sung hệ thống gợi ý sản phẩm thông minh dựa trên lịch sử xem và mua hàng của người dùng. Tích hợp thêm các cổng thanh toán khác như Momo, ZaloPay sẽ tăng thêm sự tiện lợi. Chức năng chat trực tuyến với nhân viên hỗ trợ cũng là một cải tiến đáng giá. Về kỹ thuật, có thể triển khai hệ thống cache (ví dụ: Redis) để tăng tốc độ truy vấn các dữ liệu ít thay đổi. Tối ưu hóa SEO on-page cho các trang sản phẩm để tăng khả năng hiển thị trên các công cụ tìm kiếm. Ngoài ra, việc xây dựng ứng dụng di động (Mobile App) sử dụng React Native, tái sử dụng các Spring Boot REST API đã có, là một hướng đi đầy hứa hẹn để tiếp cận nhiều khách hàng hơn.

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

Chương 1: Cở sở lý thuyết Hình 1.5: List và key[7] 1.Tương tác của các thành phần Trong React, dữ liệu thay đổi theo thời gian được gọi là trạng thái (state). Có thể thêm state vào bất kỳ component nào và thay đổi chúng nếu muốn.Sự kiện React cho phép thêm xử lý sự kiện (event handler). Event handler nhận function, các function được gọi mỗi khi sự kiện xảy ra như click, hover, focus. Tên của sự kiện là tên của thuộc tính event HTML thay vì là onclick (đối với HTML) sẽ là onClick (đối với JSX).6: Ví dụ event handler[8] 16 Chương 1: Cở sở lý thuyết 1.Trạng thái dưới dạng snapshot Không giống như các biến thông thường của javascript.

Trạng thái sẽ không thay đổi ngay giá trị sẵn có, việc thay đổi sẽ được kích hoạt khi re- render lại, điều này giúp tránh một số lỗi nhỏ.7: Trạng thái sẽ không thay đổi cho đến khi re-render[9] 1.Khái quát Spring Boot nằm trong hệ sinh thái hay còn gọi là con của Spring Framework. Spring Boot cung cấp nền tảng cho các nhà phát triển để đơn giản hóa việc lập trình ứng dụng bằng Spring, tập trung phát triển ứng dụng nhanh chóng không tốn thời gian cấu hình. Spring Boot bao gồm nhiều thư viện và công cụ hỗ trợ lập trình.8: Spring Framework đến Spring Boot[4] 1.Các tính năng Tạo ứng dụng Spring có tính độc lập. Nhúng trực tiếp Tomcat, Jetty hoặc Undertow mà không cần phải triển khai tệp WAR.

Starter dependency giúp cấu hình Maven dễ dàng hơn. Tự động cấu hình Spring khi cần thiết. Không tạo code cấu hình, không yêu cầu phải cấu hình bằng XML. 17 Chương 1: Cở sở lý thuyết 1.Giới thiệu MongoDB MongoDB là một loại phần mềm cơ sở dữ liệu sử dụng mã nguồn mở NoSQL.

Nó có thể hỗ trợ nhiều nền tảng khác nhau và được thiết kế dành cho đối tượng. MongoDB hoạt động với các khái niệm về Collection và Document. Đồng thời, nó có hiệu suất cao và tính khả dụng tốt, đồng thời dễ dàng mở rộng. Bộ sưu tập MongoDB.

Các Collection có cấu trúc rất linh hoạt. Điều này cho phép dữ liệu không khớp với bất kỳ cấu trúc nào. Do đó, MongoDB có thể lưu trữ dữ liệu có cấu trúc đa dạng và phức tạp. Dữ liệu MongoDB được lưu trữ ở định dạng kiểu JSON.Tính năng của MongoDB Truy vấn ad hoc Có tác dụng giúp trường tìm kiếm phạm vi kết hợp với tìm kiếm biểu thức để trả về kết quả tài liệu có kích thước cố định.

Ngoài ra, các trường MongoDB cũng được sử dụng để lập chỉ mục chính và phụ. Nhân rộng Cho phép nhân bản hai hoặc nhiều bản sao của dữ liệu. Nếu một bản sao nào bị lỗi thì Replica set sẽ chọn một bản sao phụ thay thế nó làm bản sao chính tiếp theo. Trong quá trình sao chép, Replica thứ cấp được tự do lựa 18 Chương 1: Cở sở lý thuyết chọn các hành động nhưng giá trị mặc định vẫn được áp dụng cho dữ liệu cuối cùng.

Cân bằng tải MongoDB dựa vào Shard key để phân vùng dữ liệu thành các phạm vi và phân phối dữ liệu đồng đều. Chúng có thể chạy trên nhiều máy chủ và thực hiện sao chép dữ liệu hoặc cân bằng tải để giữ hệ thống hoạt động trong trường hợp xảy ra lỗi về phần cứng. Lưu trữ tệp Khi tìm hiểu về hệ thống cơ sở dữ liệu MongoDB, bộ lưu trữ tệp được sử dụng như một hệ thống tệp (GridFS) hoạt động như một bộ cân bằng tải, sao chép dữ liệu trên nhiều máy tính. Cụ thể, GridFS chia tệp thành nhiều phần và lưu trữ chúng dưới dạng các tài liệu riêng biệt.

Sau đó, người dùng có thể dễ dàng truy cập GridFS thông qua Mongofiles hay các plugin sử dụng cho Nginx và Lighttpd. Tập hợp Chức năng này là một chương trình cung cấp ba giải pháp để thực hiện tập hợp gồm Aggregation Pipeline, Mapreduce và Single-purpose Aggregation. Aggregation Pipeline được đánh giá là có hiệu suất tốt nhất. Giới hạn kích thước collection Có kích thước cố định, thường được gọi là collection giới hạn.

Kích thước cố định cùng việc theo sau thứ tự chèn giúp tăng hiệu suất của các hoạt động liên quan đến dữ liệu. Và nếu dữ liệu vượt quá giới hạn, các tài liệu cũ hơn sẽ tự động bị xóa mà không cần thực hiện các dòng lệnh nào. Giao dịch Từ phiên bản 4.0 MongoDB bổ sung thêm tính năng hỗ trợ giao dịch ACID đa tài liệu. JSON WEB TOKEN JSON Web Token (JWT) là một chuỗi mã hóa dùng để truyền thông tin an toàn giữa Client – Server dưới định dạng JSON object.

Chuỗi thông 19 Chương 1: Cở sở lý thuyết tin dạng JSON là một chuỗi ký tự lộn xộn rất phức tạp và khó hiểu. Tất cả JWT đều là mã thông báo, nhưng không phải tất cả mã thông báo cũng là JWT.10: Cấu trúc JWT[6] 20 Chương 2: Khảo sát hiện trạng và mô hình hoá yêu cầu CHƯƠNG 2:KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HOÁ YÊU CẦU 2. KHẢO SÁT HIỆN TRẠNG 2.Chotroihn (https://chotroihn.vn) Website chotroihn là website thuộc công ty TNHH THƯƠNG MẠI 3M TECHCO cung cấp các loại linh kiện điện tử với mức giá phải chăng chất lượng tốt.1: Trang chủ website Chotroihn Các chức năng chính: - Xem chi tiết sản phẩm. - Xem các sản phẩm linh kiện theo từng mục danh mục.

- Tìm kiếm sản phẩm. - Đặt mua hàng (thanh toán bằng COD). - Gọi trực tuyến cửa hàng. Ưu điểm: - Giao diện dễ nhìn, làm nổi bật sản phẩm - Tương đối đủ chức năng nhu cầu người sử dụng.

- Đặt hàng không cần đăng nhập. Nhược điểm: - Chưa hỗ trợ nhiều phương thức đăng nhập 21 Chương 2: Khảo sát hiện trạng và mô hình hoá yêu cầu - Chưa có bộ lọc sản phẩm - Không thanh toán bằng nhiều phương thức.Thegioiic (https://www.com) Website thegioiic.com thuộc công ty cùng tên là Thegioiic cung cấp sản phẩm trong lĩnh vực điện tử gồm thiết kế phần cứng, phát triển phần mềm và hệ thống nhúng. Hiện nay là nhà phân phối các và cung cấp linh kiện điện tử, giúp khách hàng tiết kiệm thời gian và tiền bạc trong kinh doanh linh kiện điển tử.2: Trang chủ website Thegioiic Các chức năng chính: - Đăng nhập, đăng ký, chỉnh sửa thông tin cá nhân - Xem chi tiết sản phẩm. - Xem các sản phẩm linh kiện theo từng mục danh mục.

- Tìm kiếm sản phẩm. - Lọc sản phẩm (danh mục) - Đặt mua hàng (thanh toán bằng nhiều phương thức ATM, VNPAY, MOMO hoặc COD). 22 Chương 2: Khảo sát hiện trạng và mô hình hoá yêu cầu - Chat hoặc liên hệ trực tuyến nhân viên cửa hàng. Ưu điểm: - Có thể chuyển đổi 2 ngôn ngữ (tiếng Việt, tiếng Anh) khi dùng.

- Đăng nhập, đăng ký bằng nhiều phương thức khác nhau dù chưa có tài khoản. - Có nhiều phương thức thanh toán. - Có đủ các chức năng sử dụng. Nhược điểm: - Header còn đơn giản.

- Chưa có thể lọc được nhiều tiêu chí.Linhkienviet (http://linhkienviet.vn) Website linhkienviet.vn thuộc công ty SMD electronics. Cung cấp linh kiện, module kit.3: Trang chủ website Linhkienviet Các chức năng chính: - Đăng nhập, đăng ký, chỉnh sửa thông tin cá nhân - Xem chi tiết sản phẩm. - Xem các sản phẩm linh kiện theo từng mục danh mục. - Tìm kiếm sản phẩm (có thể tìm kiếm theo danh mục).

23 Chương 2: Khảo sát hiện trạng và mô hình hoá yêu cầu - Lọc sản phẩm theo các tiêu chí (giá, chữ cái, thời gian, …) - Đặt mua hàng (thanh toán bằng ATM hoặc COD). Ưu điểm: - Giao diện, màu sắc dễ nhìn. - Đặt hàng không cần đăng nhập. - Có đủ các chức năng sử dụng.

Nhược điểm: - Chưa hỗ trợ nhiều phương thức đăng nhập. - Không thanh toán bằng nhiều phương thức.Nshop (https://nshopvn.4: Trang chủ website Nshopvn Các chức năng chính: - Đăng nhập, đăng ký, chỉnh sửa thông tin cá nhân - Xem chi tiết sản phẩm. - Xem các sản phẩm linh kiện theo từng mục danh mục. - Tìm kiếm sản phẩm (có thể tìm kiếm theo danh mục).

- Lọc sản phẩm theo các tiêu chí (giá, nổi bật, danh mục, thời gian, …) - Đặt mua hàng (thanh toán bằng nhiều phương thức ATM, VNPAY, MOMO, Visa, … hoặc COD). Ưu điểm: 24 Chương 2: Khảo sát hiện trạng và mô hình hoá yêu cầu - Giao diện, màu sắc dễ nhìn. - Đặt hàng không cần đăng nhập. - Có đủ các chức năng sử dụng.

Nhược điểm: - Chưa hỗ trợ nhiều phương thức đăng nhập.Hshop (https://hshop.vn là cửa hàng chuyên về các sản phẩm phần cứng: Mạch lập trình, Module chức năng, Cảm biến, Mạch điều khiển và Linh kiện chế tạo Robot.5: Trang chủ website Hshop Các chức năng chính: - Đăng nhập, đăng ký, chỉnh sửa thông tin cá nhân - Xem chi tiết sản phẩm. - Xem các sản phẩm linh kiện theo từng mục danh mục. - Tìm kiếm sản phẩm. - Đặt mua hàng (thanh toán bằng ATM hoặc COD).

Ưu điểm: - Giao diện, màu sắc dễ nhìn. - Có đủ các chức năng sử dụng. Nhược điểm: 25 Chương 2: Khảo sát hiện trạng và mô hình hoá yêu cầu - Chưa hỗ trợ nhiều phương thức đăng nhập. - Không thanh toán bằng nhiều phương thức.

XÁC ĐỊNH YÊU CẦU 2.Yêu cầu chức năng nghiệp vụ Bảng 2.1: Bảng yêu cầu chức năng nghiệp vụ phía khách hàng STT Yêu cầu nghiệp vụ Loại yêu cầu Ghi chú 1 Tìm kiếm sản phẩm theo tên hoặc Tra cứu (tìm kiếm) mô tả. 2 Xem danh sách sản phẩm Tra cứu (tìm kiếm) 3 Xem chi tiết sản phẩm Tra cứu (tìm kiếm) 4 Xem danh sách đơn hàng đã đặt Tra cứu (tìm kiếm) 5 Thêm, chỉnh sửa thông tin sản Lưu trữ phẩm trong giỏ hàng 6 Đặt hàng Lưu trữ 7 Thêm đánh giá sản phẩm Lưu trữ 8 Chỉnh sửa thông tin tài khoản Lưu trữ 9 Tính tổng giá trị đơn hàng dựa trên Tính toán giá hiện tại của sản phẩm Bảng 2.2: Bảng yêu cầu chức năng nghiệp vụ phía quản trị viên STT Yêu cầu nghiệp vụ Loại yêu cầu Ghi chú 1 Thêm, chỉnh sửa thông tin sản phẩm Lưu trữ mới 2 Thêm thông tin tài khoản mới Lưu trữ 3 Thêm, chỉnh sửa thông tin danh mục Lưu trữ mới 4 Xác nhận, hủy đơn hàng Lưu trữ 5 Xem, lọc danh sách sản phẩm Tra cứu (tìm kiếm) 6 Xem, lọc danh sách tài khoản Tra cứu (tìm kiếm) 7 Xem, lọc danh sách danh mục Tra cứu (tìm kiếm) 8 Xem, lọc danh sách đơn hàng Tra cứu (tìm kiếm) 9 Tính doanh thu của cửa hàng theo Tính toán 26 Chương 2: Khảo sát hiện trạng và mô hình hoá yêu cầu ngày, tháng, năm 10 Thống kê số lượng sản phẩm theo Kết xuất trạng thái 2.Yêu cầu chức năng hệ thống Bảng 2.3: Bảng yêu cầu chức năng hệ thống STT Yêu cầu hệ thống Mô tả, ràng buộc Ghi chú 1 Cung cấp chức năng phân Phân quyền cho phía quản quyền trị gồm: quản trị viên và nhân viên.