Xây Dựng Website Bán Hoa: Đồ Án Tốt Nghiệp Ngành Công Nghệ Thông Tin

Xây dựng website bán hoa là một trong những xu hướng phát triển mạnh mẽ trong lĩnh vực… 145 trang · Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh · 2024.

• Tác giả: Cao Thị Minh Châu
• Người hướng dẫn: ThS. Hoàng Công Trình
• Trường học: Đạ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 Hoa
• Loại tài liệu: Đồ Án Tốt Nghiệp
• Năm xuất bản: 2024
• Địa điểm: Hồ Chí Minh

Mục lục chi tiết

• LỜI CẢM ƠN
• 1. PHẦN MỞ ĐẦU
• 1.1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI
• 1.2. ĐỐI TƯỢNG NGHIÊN CỨU
• 1.3. MỤC TIÊU CỦA ĐỀ TÀI
• 1.4. PHẠM VI NGHIÊN CỨU
• 1.5. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
• 2. PHẦN NỘI DUNG
• 2. CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
• 1.1. CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONTEND
• 1.1.1. Các thư viện hỗ trợ khác
• 1.2. CÁC CÔNG NGHỆ SỬ DỤNG Ở BACKEND
• 1.2.1. Các thư viện hỗ trợ khác
• 3. CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU
• 2.1. KHẢO SÁT HIỆN TRẠNG
• 2.2. XÁC ĐỊNH YÊU CẦU
• 2.2.1. Yêu cầu chức năng
• 2.2.2. Yêu cầu phi chức năng
• 2.3. MÔ HÌNH HÓA YÊU CẦU
• 2.3.1. Mô hình hóa yêu cầu
• 2.3.2. Mô hình hóa website phía người dùng
• 2.3.3. Mô hình hóa website phía nhà quản trị
• 4. CHƯƠNG 3: THIẾT KẾ PHẦN MỀM
• 3.1. Lược đồ tuần tự
• 3.2. THIẾT KẾ CƠ SỞ DỮ LIỆU
• 3.3. THIẾT KẾ GIAO DIỆN
• 3.3.1. Giao diện người dùng
• 3.3.2. Giao diện quản trị viên
• 5. CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ
• 4.1. HƯỚNG DẪN CÀI ĐẶT PHẦN MỀM
• 4.2. KIỂM THỬ PHẦN MỀM
• 4.2.1. Các chức năng quản lý tài khoản
• 4.2.2. Các chức năng quản lý đơn hàng, giỏ hàng
• 4.2.3. Các chức năng quản lý sản phẩm
• PHẦN KẾT LUẬN
• K.1. NHỮNG KẾT QUẢ ĐẠT ĐƯỢC
• K.2. NHƯỢC ĐIỂM
• K.3. HƯỚNG PHÁT TRIỂN
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Tổng Quan Về Xây Dựng Website Bán Hoa Hiện Nay

Xây dựng website bán hoa là một trong những xu hướng phát triển mạnh mẽ trong lĩnh vực thương mại điện tử. Với sự gia tăng nhu cầu mua sắm trực tuyến, việc tạo ra một nền tảng bán hoa hiệu quả không chỉ giúp doanh nghiệp tiếp cận khách hàng dễ dàng hơn mà còn tối ưu hóa quy trình bán hàng. Đặc biệt, việc áp dụng công nghệ thông tin vào lĩnh vực này mang lại nhiều lợi ích cho cả người tiêu dùng và nhà cung cấp.

1.1. Tại Sao Nên Xây Dựng Website Bán Hoa

Website bán hoa giúp khách hàng dễ dàng tìm kiếm và đặt hàng. Điều này không chỉ tiết kiệm thời gian mà còn tạo ra trải nghiệm mua sắm thuận tiện hơn.

1.2. Lợi Ích Của Thương Mại Điện Tử Trong Ngành Hoa

Thương mại điện tử giúp giảm chi phí vận hành, mở rộng thị trường và tăng cường khả năng cạnh tranh cho các doanh nghiệp bán hoa.

II. Những Thách Thức Khi Xây Dựng Website Bán Hoa

Mặc dù có nhiều lợi ích, việc xây dựng website bán hoa cũng gặp phải không ít thách thức. Các vấn đề như quản lý kho hàng, tối ưu hóa SEO cho website bán hoa và bảo mật thông tin khách hàng là những yếu tố cần được chú trọng.

2.1. Quản Lý Kho Hàng Cho Website Bán Hoa

Quản lý kho hàng hiệu quả là yếu tố quan trọng để đảm bảo rằng khách hàng luôn có thể đặt hàng mà không gặp phải tình trạng hết hàng.

2.2. Tối Ưu Hóa SEO Cho Website Bán Hoa

Tối ưu hóa SEO giúp website dễ dàng tiếp cận hơn với khách hàng tiềm năng thông qua các công cụ tìm kiếm, từ đó tăng lượng truy cập và doanh thu.

III. Phương Pháp Xây Dựng Website Bán Hoa Hiệu Quả

Để xây dựng một website bán hoa hiệu quả, cần áp dụng các công nghệ hiện đại và phương pháp thiết kế tối ưu. Việc sử dụng các framework như ReactJS và Spring Boot sẽ giúp tăng tốc độ phát triển và cải thiện trải nghiệm người dùng.

3.1. Sử Dụng ReactJS Để Thiết Kế Giao Diện

ReactJS cho phép xây dựng giao diện người dùng linh hoạt và dễ dàng bảo trì, giúp nâng cao trải nghiệm mua sắm cho khách hàng.

3.2. Tích Hợp RESTful API Cho Website

RESTful API giúp kết nối giữa frontend và backend, cho phép xử lý dữ liệu một cách hiệu quả và nhanh chóng.

IV. Ứng Dụng Thực Tiễn Của Website Bán Hoa

Website bán hoa không chỉ là một nền tảng thương mại điện tử mà còn là công cụ hỗ trợ quản lý và phát triển thương hiệu. Việc tích hợp các tính năng như thanh toán trực tuyến và quản lý đơn hàng sẽ giúp nâng cao hiệu quả kinh doanh.

4.1. Tích Hợp Thanh Toán Trực Tuyến

Tích hợp thanh toán trực tuyến giúp khách hàng dễ dàng thực hiện giao dịch mà không cần phải đến cửa hàng, từ đó tăng cường sự hài lòng.

4.2. Quản Lý Đơn Hàng Hiệu Quả

Quản lý đơn hàng giúp theo dõi tình trạng đơn hàng và đảm bảo rằng khách hàng nhận được sản phẩm đúng hẹn.

V. Kết Luận Về Tương Lai Của Website Bán Hoa

Với sự phát triển không ngừng của công nghệ thông tin, tương lai của website bán hoa hứa hẹn sẽ còn nhiều tiềm năng. Việc áp dụng các công nghệ mới và cải tiến quy trình kinh doanh sẽ giúp doanh nghiệp nâng cao khả năng cạnh tranh.

5.1. Xu Hướng Phát Triển Website Bán Hoa

Xu hướng phát triển website bán hoa sẽ tập trung vào việc cải thiện trải nghiệm người dùng và tối ưu hóa quy trình giao dịch.

5.2. Tầm Quan Trọng Của Công Nghệ Trong Ngành Hoa

Công nghệ sẽ tiếp tục đóng vai trò quan trọng trong việc nâng cao hiệu quả kinh doanh và tạo ra giá trị cho khách hàng.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Khóa luận tốt nghiệp với đề tài "Xây dựng Website bán hoa" được thực hiện bởi nhóm sinh viên Cao Thị Minh Châu (MSSV: 20110188), Nguyễn Kim Hạnh (MSSV: 20110468) và Nguyễn Thị Thuỳ Trang (MSSV: 20110580), dưới sự hướng dẫn của ThS. Hoàng Công Trình và phản biện của TS. Huỳnh Xuân Phụng tại Khoa Công nghệ Thông tin, Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh (khóa 2020 – 2024, mã tài liệu SKL013892). Đề tài được triển khai trong mốc thời gian từ ngày 04/03/2024 đến ngày 05/07/2024.

Bối cảnh thực tiễn được tác giả xác định xuất phát từ sự bùng nổ của công nghệ thông tin và xu hướng toàn cầu hóa kinh tế, nơi thương mại điện tử trở thành một phương thức giao dịch thiết yếu nhằm xóa bỏ rào cản địa lý và tiết kiệm chi phí vận hành cho doanh nghiệp. Khảo sát thực tế tại Việt Nam của nhóm tác giả ghi nhận rằng dù hình thức kinh doanh trực tuyến đang phổ biến và lượng người dùng điện thoại thông minh gia tăng mạnh, nhiều nền tảng bán hoa trực tuyến hiện nay vẫn chưa hoàn chỉnh hoặc có quy trình đặt hàng phức tạp, gây trở ngại cho người tiêu dùng. Xuất phát từ thực trạng đó, đề tài đặt ra mục tiêu xây dựng một website kinh doanh hoa tươi hoàn chỉnh nhằm tối ưu hóa trải nghiệm mua sắm và cung cấp công cụ quản trị bán hàng đồng bộ.

Theo đề cương được phê duyệt, nhiệm vụ nghiên cứu của luận văn bao gồm:

1. Nhiệm vụ lý thuyết: Tìm hiểu cơ sở lý thuyết về các công nghệ phát triển web hiện đại gồm ReactJS, Spring Boot Framework, giao thức kiến trúc RESTful API, cơ chế bảo mật xác thực JSON Web Token (JWT), hệ quản trị cơ sở dữ liệu MongoDB và nền tảng hỗ trợ hội thoại Dialogflow.
2. Nhiệm vụ thực hành: Sử dụng Spring Boot để xây dựng Backend và hệ thống RESTful API cho các phân hệ; thiết kế cơ sở dữ liệu và lưu trữ dữ liệu người dùng trên MongoDB; áp dụng JSON Web Token để xác thực và ủy quyền truy cập API; sử dụng thư viện ReactJS để xây dựng giao diện tương tác Frontend; tiến hành tích hợp hệ thống, kiểm thử và khắc phục lỗi phần mềm.

Đối tượng và phạm vi nghiên cứu của đề tài được giới hạn cụ thể như sau:

• Đối tượng tác nhân hệ thống: Bao gồm 02 nhóm người dùng chính là Người dùng cuối (khách hàng có nhu cầu đăng ký tài khoản, tìm kiếm sản phẩm, đặt hàng, quản lý giỏ hàng và theo dõi đơn hàng) và Nhà quản trị hệ thống (Admin có quyền quản lý sản phẩm, danh mục, mã giảm giá, tài khoản và đơn hàng).
• Phạm vi công nghệ: Ứng dụng Spring Boot, RESTful API, ReactJS, MongoDB và Spring Security.
• Phạm vi nghiệp vụ: Chu trình quản lý cửa hàng và giao dịch mua bán hoa trực tuyến phục vụ người tiêu dùng và đơn vị kinh doanh.

Cơ sở lý thuyết và phương pháp

Khóa luận thiết lập nền tảng kỹ thuật dựa trên các công nghệ phân tầng hiện đại trong phát triển phần mềm:

• Phía máy khách (Frontend): Sử dụng thư viện ReactJS với kiến trúc dựa trên thành phần (Component-Based Architecture), cơ chế Virtual DOM giúp tối ưu hóa hiệu năng kết xuất giao diện, luồng dữ liệu một chiều (Unidirectional Data Flow) và cú pháp JSX. Bên cạnh đó, hệ thống tích hợp các công cụ hỗ trợ gồm Redux để quản trị trạng thái tập trung, React Router để điều hướng trang, Webpack và Babel để biên dịch mã nguồn, Axios xử lý giao tiếp HTTP dựa trên Promises, React Swiper hỗ trợ hiệu ứng vuốt trượt và Bootstrap định hình giao diện thích ứng (Responsive). Ngoài ra, tài liệu đề cập đến nền tảng Dialogflow của Google phục vụ định hướng xây dựng kịch bản giao tiếp tự động thông qua các khái niệm Agent, Intent và Entity.
• Phía máy chủ (Backend): Sử dụng Spring Boot thuộc tầng IO Execution của Spring IO Platform. Công nghệ này loại bỏ cấu hình XML phức tạp, hoạt động theo nguyên tắc cấu hình mặc định (convention-over-configuration) và tích hợp sẵn Web Server nhúng (như Apache Tomcat hoặc Jetty). Cơ chế bảo mật và phân quyền được thực thi qua Spring Security kết hợp JSON Web Token (JWT).
• Cơ sở dữ liệu: Hệ quản trị NoSQL MongoDB hướng tài liệu (BSON document), cung cấp các tính năng truy vấn linh hoạt (ad hoc query), đánh chỉ mục (indexing), nhân bản dự phòng (replication), tổng hợp dữ liệu (aggregation) và cơ chế bộ đệm trên bộ nhớ RAM giúp tăng tốc độ đọc/ghi dữ liệu.
• Chuẩn giao tiếp: Kiến trúc RESTful API chuẩn hóa các phương thức HTTP (GET, POST, PUT, DELETE) tương ứng với các tác vụ CRUD quản lý tài nguyên.

Về phương pháp nghiên cứu, nhóm tác giả kết hợp các phương pháp kỹ thuật phần mềm:

• Phương pháp khảo sát và đánh giá thực tế: Phân tích ưu và nhược điểm của 4 website bán hoa tươi đang hoạt động trên thị trường Việt Nam (Potico.vn, Lavieestbelle.vn, Flowershop.vn và Lamour.vn).
• Phương pháp phân tích và thiết kế hướng đối tượng: Sử dụng ngôn ngữ mô hình hóa thống nhất (UML) để xây dựng biểu đồ ca sử dụng (Use Case Diagram), đặc tả chi tiết 28 kịch bản use case và xây dựng 35 lược đồ tuần tự (Sequence Diagram) mô tả luồng thông điệp giữa các lớp đối tượng.
• Phương pháp thiết kế cơ sở dữ liệu phi quan hệ: Mô hình hóa các thực thể dữ liệu thành các bảng/collection trong MongoDB.
• Phương pháp kiểm thử phần mềm: Thiết kế các ca kiểm thử chức năng (test case) hộp đen nhằm xác minh tính chính xác của các phân hệ tài khoản, đơn hàng, giỏ hàng và sản phẩm.

Thiết kế và triển khai

Hệ thống được thiết kế theo kiến trúc phân tách độc lập (Decoupled Architecture) giữa Frontend (Single Page Application bằng ReactJS) và Backend (Dịch vụ RESTful API bằng Spring Boot), kết nối tầng dữ liệu với cơ sở dữ liệu MongoDB.

Mô hình dữ liệu của hệ thống được tổ chức thành 9 collection (bảng dữ liệu) chính trong MongoDB:

1. Product: Lưu trữ thông tin chi tiết về hoa, hình ảnh, đơn giá, số lượng tồn kho và thuộc tính liên quan.
2. Account: Quản lý thông tin tài khoản, mật khẩu mã hóa, thông tin liên hệ và vai trò truy cập (khách hàng hoặc quản trị viên).
3. Blog: Quản lý các bài viết tin tức, kiến thức về hoa và thông điệp truyền thông.
4. Order: Lưu trữ đơn đặt hàng, trạng thái xử lý, danh sách sản phẩm mua và thông tin người nhận.
5. Voucher: Lưu trữ mã giảm giá, tỷ lệ chiết khấu, điều kiện áp dụng và thời hạn sử dụng.
6. Tags: Lưu trữ các nhãn phân loại nhanh phục vụ chức năng tìm kiếm và lọc sản phẩm.
7. Collections: Quản lý các bộ sưu tập sản phẩm hoa theo chủ đề hoặc mùa vụ.
8. Review: Lưu trữ đánh giá, số sao và nhận xét phản hồi từ khách hàng đối với từng sản phẩm.
9. Payments: Ghi nhận dữ liệu giao dịch, phương thức thanh toán và trạng thái đối soát của đơn hàng.

Về môi trường triển khai và vận hành:

• Tầng Backend: Khởi chạy và gỡ lỗi bằng môi trường phát triển tích hợp IntelliJ IDEA trên nền tảng Java, sử dụng công cụ quản lý dự án Maven và khởi chạy máy chủ nhúng Tomcat.
• Tầng Frontend: Quản lý và lập trình trên phần mềm Visual Studio Code, sử dụng hệ sinh thái Node.js/NPM cùng gói react-scripts để kích hoạt máy chủ phát triển nội bộ thông qua giao diện dòng lệnh (Terminal).

Nội dung chính theo từng chương

Chương 1: Cơ sở lý thuyết

Chương 1 hệ thống hóa toàn bộ lý thuyết công nghệ được lựa chọn trong dự án. Ở tầng giao diện, tác giả phân tích các đặc trưng cốt lõi của ReactJS như Virtual DOM giúp giảm tải việc tái tạo DOM thực, kiến trúc Component hỗ trợ tái sử dụng mã nguồn và khả năng kiểm thử dễ dàng qua các thư viện như Jest hay Enzyme. Chương này cũng giới thiệu nền tảng Dialogflow trong việc xử lý ngôn ngữ tự nhiên thông qua Agent đóng vai trò trung tâm điều phối, Intent thể hiện mục đích của người dùng và Entity trích xuất dữ liệu tham số. Ở tầng xử lý logic, báo cáo làm rõ lợi thế của Spring Boot trong việc cắt giảm boilerplate code, cung cấp công cụ dòng lệnh Spring CLI và dễ dàng liên kết với các module Spring Data, Spring Security. Đối với tầng lưu trữ, chương trình bày cấu trúc BSON của MongoDB, giải thích cơ chế Aggregation tương đương mệnh đề GROUP BY trong SQL và khả năng mở rộng thông qua phân mảnh dữ liệu (sharding). Cuối cùng, nguyên lý hoạt động của RESTful API và 4 phương thức HTTP tương ứng với các thao tác Create, Read, Update, Delete được chuẩn hóa thành mô hình giao tiếp xuyên suốt dự án.

Chương 2: Khảo sát hiện trạng và mô hình hóa yêu cầu

Chương 2 trình bày kết quả khảo sát thực tế 4 hệ thống thương mại điện tử về hoa tươi tại Việt Nam nhằm làm căn cứ xây dựng yêu cầu phần mềm:

Tên website khảo sát	Ưu điểm ghi nhận	Nhược điểm ghi nhận
Potico.vn	Đáp ứng đầy đủ chức năng cơ bản; màu sắc hài hòa; thông tin rõ ràng; phân loại hoa dễ tìm kiếm; có đề xuất sản phẩm liên quan; cho phép chọn ngày giao hàng.	Trang chủ chứa quá nhiều thông tin, dễ gây rối mắt cho người dùng.
La vie est belle	Đáp ứng đầy đủ yêu cầu; màu sắc tương phản mạnh tạo ấn tượng thị giác; phân loại sản phẩm rõ ràng; có hiệu ứng sinh động.	Không ghi nhận nhược điểm nổi cộm trong bảng khảo sát của tác giả.
FlowerShop.vn	Đáp ứng đầy đủ các tính năng; màu sắc dễ chịu; phân loại sản phẩm rõ ràng; hiệu ứng hiển thị sinh động.	Thiết kế giao diện chưa bắt mắt; các thành phần bố trí quá sát nhau tạo cảm giác chật chội, ngột ngạt.
L’amour.vn	Thiết kế và màu sắc bắt mắt; thông tin trên trang chủ vừa phải, không quá dày đặc; phân loại rõ ràng.	Bố cục thành phần hiển thị quá sát nhau, tạo cảm giác dính chùm tương tự như FlowerShop.vn.

Từ kết quả khảo sát, nhóm tác giả xác định 10 nhóm yêu cầu chức năng (Danh mục sản phẩm, Tìm kiếm và lọc, Chi tiết sản phẩm, Giỏ hàng và thanh toán, Quản lý tài khoản, Quản lý đơn hàng, Hệ thống đánh giá/nhận xét, Hỗ trợ khách hàng, Thông tin vận chuyển, Bảo mật) cùng 12 yêu cầu phi chức năng (Hiệu suất tải trang, Giao diện đáp ứng di động, Bảo mật SSL, Khả năng mở rộng, Tính sẵn sàng...). Hệ thống được mô hình hóa qua biểu đồ Use Case phân định rõ vai trò của 2 tác nhân (Người dùng cuối và Quản trị viên), đi kèm các bảng đặc tả use case chi tiết từ Bảng 5 đến Bảng 32, quy định tường minh luồng sự kiện chính, luồng thay thế và điều kiện kích hoạt.

Chương 3: Thiết kế phần mềm

Chương 3 tập trung hiện thực hóa các yêu cầu đã phân tích thành thiết kế kỹ thuật cụ thể:

• Lược đồ tuần tự (Sequence Diagram): Xây dựng chi tiết chuỗi tương tác thông điệp từ giao diện người dùng, bộ điều khiển (Controller), dịch vụ xử lý (Service) đến cơ sở dữ liệu. Bao gồm các biểu đồ phía khách hàng (Đăng ký, Đăng nhập, Quên mật khẩu, Đặt hàng và thanh toán, Hủy đơn hàng, Xem và tra cứu thông tin sản phẩm/blog) và các biểu đồ phía nhà quản trị (Đăng nhập quản trị, Cập nhật trạng thái đơn hàng, Thêm/Sửa/Xóa sản phẩm, Quản lý tài khoản, Quản lý bài viết blog, Quản lý thẻ tag, Quản lý loại sản phẩm và Quản lý mã giảm giá voucher).
• Thiết kế cơ sở dữ liệu: Trình bày chi tiết cấu trúc thuộc tính của 9 collection trong MongoDB (Bảng 33 đến Bảng 41) như Product, Account, Blog, Order, Voucher, Tags, Collections, Review và Payments.
• Thiết kế giao diện: Xây dựng hệ thống giao diện trực quan gồm 21 màn hình phía người dùng (Trang chủ, Đăng nhập, Đăng ký, Đổi mật khẩu, Giỏ hàng, Đặt hàng, Chi tiết đơn hàng, Theo dõi đơn hàng, Danh sách yêu thích, So sánh sản phẩm, Tra cứu đơn hàng...) và 14 màn hình quản trị (Dashboard thống kê doanh số/sản phẩm/người dùng, Quản lý sản phẩm, Thêm sản phẩm, Quản lý đơn hàng, Quản lý người dùng, Quản lý voucher, Quản lý tag...).

Chương 4: Cài đặt và kiểm thử

Chương 4 cung cấp quy trình hướng dẫn cài đặt mã nguồn hệ thống. Nhóm tác giả hướng dẫn việc nạp dự án Backend vào phần mềm IntelliJ IDEA, cấu hình môi trường Java và thực thi lệnh chạy ứng dụng; đồng thời hướng dẫn mở dự án Frontend trong Visual Studio Code, sử dụng Terminal để chạy lệnh khởi động ứng dụng web.

Về công tác kiểm thử phần mềm, báo cáo tiến hành kiểm thử chức năng theo phương pháp hộp đen, phân bổ thành 3 nhóm bảng kiểm thử chính:

• Bảng 42: Tập hợp các ca kiểm thử cho chức năng Quản lý tài khoản (Đăng ký, Đăng nhập, Quên mật khẩu, Thay đổi thông tin cá nhân).
• Bảng 43: Tập hợp các ca kiểm thử cho chức năng Quản lý đơn hàng và giỏ hàng (Thêm sản phẩm vào giỏ, Xóa sản phẩm, Áp dụng voucher, Tiến hành đặt hàng, Hủy đơn hàng, Tra cứu tình trạng giao vận).
• Bảng 44: Tập hợp các ca kiểm thử cho chức năng Quản lý sản phẩm (Xem danh mục, Lọc sản phẩm theo giá và loại hoa, Thêm mới sản phẩm, Cập nhật thông tin hoa, Xóa sản phẩm khỏi hệ thống).

Kết quả và đóng góp

Đồ án tốt nghiệp đạt được các kết quả cụ thể đã được kiểm chứng qua sản phẩm phần mềm thực tế:

• Xây dựng thành công website bán hoa hoạt động trên nền tảng web, bao gồm đầy đủ hai phân hệ độc lập: Phân hệ khách hàng với trải nghiệm mua sắm trực quan, hỗ trợ so sánh sản phẩm, lập danh sách yêu thích, giỏ hàng, áp dụng mã voucher, đặt hàng và theo dõi tình trạng đơn; Phân hệ quản trị cung cấp bảng điều khiển thống kê (Dashboard), kiểm soát vòng đời đơn hàng, danh mục hoa, thẻ tag, mã giảm giá và quản lý tài khoản người dùng.
• Ứng dụng thành công mô hình cơ sở dữ liệu NoSQL (MongoDB) với 9 collection dữ liệu được cấu trúc chặt chẽ, tối ưu hóa tốc độ truy xuất thông qua RESTful API viết bằng Spring Boot.
• Thiết lập giải pháp xác thực và ủy quyền bằng JSON Web Token (JWT) kết hợp Spring Security, đảm bảo an toàn cho các điểm cuối API và phân định ranh giới chức năng giữa khách hàng và quản trị viên.
• Đóng góp thực tiễn của đề tài là cung cấp một thiết kế phần mềm hoàn chỉnh, giải quyết các bất cập về giao diện rối rắm và quy trình mua sắm rườm rà từng được ghi nhận tại các website kinh doanh hoa tươi khảo sát trên thị trường.

Hạn chế và hướng nghiên cứu tiếp

Dựa trên phạm vi và nội dung được nhóm tác giả ghi nhận trong văn bản khóa luận:

• Hạn chế: Khóa luận chưa triển khai kết nối trực tiếp với các cổng thanh toán trực tuyến của bên thứ ba (như VNPAY, MoMo hoặc thẻ quốc tế) ở mức độ thanh toán thực mà chỉ dừng ở việc ghi nhận phương thức và xử lý giao dịch nội bộ. Nội dung về Dialogflow mới chỉ dừng ở mức độ tìm hiểu công nghệ và nghiên cứu kịch bản, chưa thể hiện sâu kết quả tích hợp chatbot vận hành trực tiếp trên giao diện sản phẩm. Kiểm thử phần mềm mới chỉ thực hiện kiểm thử chức năng thủ công thông qua các ca kiểm thử (test case), chưa tiến hành kiểm thử tải (load testing) hay đo lường hiệu năng khi có lượng truy cập đồng thời lớn.
• Hướng nghiên cứu tiếp: Tiếp tục hoàn thiện và tích hợp các cổng thanh toán điện tử trực tuyến an toàn; triển khai hoàn chỉnh chatbot thông minh ứng dụng xử lý ngôn ngữ tự nhiên từ Dialogflow để tự động tư vấn chọn hoa cho khách hàng; nâng cấp thuật toán gợi ý sản phẩm dựa trên hành vi duyệt web của người dùng và tối ưu hóa ứng dụng trên nền tảng thiết bị di động.

Giá trị tham khảo

Khóa luận là tài liệu tham khảo hữu ích cho sinh viên chuyên ngành Công nghệ thông tin, Kỹ thuật phần mềm và Hệ thống thông tin đang thực hiện đồ án môn học hoặc khóa luận tốt nghiệp về phát triển ứng dụng thương mại điện tử.

Những nội dung có giá trị tham khảo nổi bật bao gồm:

• Mẫu khảo sát hiện trạng đối thủ thực tế có cấu trúc rõ ràng, hỗ trợ việc thiết lập bài toán nghiệp vụ.
• Quy trình mô hình hóa yêu cầu chi tiết với hệ thống biểu đồ Use Case và 28 kịch bản use case chuẩn quy cách (đầy đủ tiền điều kiện, hậu điều kiện, luồng cơ bản và luồng ngoại lệ).
• Tập hợp 35 lược đồ tuần tự (Sequence Diagram) chi tiết, phác họa rõ nét cách thức phân chia trách nhiệm giữa Frontend (ReactJS), API Gateway/Controller, Service xử lý nghiệp vụ và Database (MongoDB).
• Mô hình thiết kế 9 collection dữ liệu NoSQL ứng dụng thực tế cho bài toán bán lẻ trực tuyến.

Câu hỏi thường gặp

1. Nhóm tác giả đã khảo sát những website bán hoa nào và nhược điểm chung của các trang này là gì?
Nhóm tác giả đã tiến hành khảo sát 4 website bán hoa gồm: Potico.vn, Lavieestbelle.vn, Flowershop.vn và Lamour.vn. Nhược điểm chính được ghi nhận là: Potico.vn có trang chủ chứa quá nhiều thông tin gây rối mắt; trong khi FlowerShop.vn và L’amour.vn có giao diện chưa thực sự bắt mắt, các thành phần bố trí quá sát nhau tạo cảm giác dính chùm, ngột ngạt cho người mua hàng.

2. Công nghệ nào được sử dụng để xây dựng Backend và đảm bảo an toàn cho các API của hệ thống?
Hệ thống sử dụng Spring Boot Framework để xây dựng toàn bộ tầng xử lý logic Backend và cung cấp các dịch vụ RESTful API. Cơ chế bảo mật và phân quyền cho các API được thực hiện thông qua việc tích hợp framework Spring Security kết hợp cơ chế cấp phát và kiểm tra token của JSON Web Token (JWT).

3. Cơ sở dữ liệu MongoDB của dự án bao gồm những bảng/collection nào?
Cơ sở dữ liệu của hệ thống được tổ chức thành 9 bảng/collection bao gồm: Product (quản lý sản phẩm hoa), Account (tài khoản người dùng), Blog (bài viết tin tức), Order (đơn hàng), Voucher (mã giảm giá), Tags (thẻ phân loại), Collections (bộ sưu tập sản phẩm), Review (đánh giá và nhận xét) và Payments (thông tin thanh toán).

4. Phân hệ người dùng cuối (khách hàng) cung cấp những chức năng nổi bật nào?
Bên cạnh các tính năng cơ bản như đăng ký, đăng nhập và tìm kiếm hoa theo danh mục/thẻ tag, phân hệ người dùng còn cho phép: so sánh các sản phẩm hoa, lưu danh sách sản phẩm yêu thích, áp dụng mã giảm giá voucher vào giỏ hàng, đặt hàng và thanh toán, hủy đơn hàng khi cần thiết, theo dõi trạng thái vận chuyển của đơn hàng và viết đánh giá phản hồi về sản phẩm.

5. Công tác kiểm thử phần mềm trong đồ án được nhóm sinh viên tiến hành trên những phân hệ nào?
Công tác kiểm thử phần mềm được nhóm sinh viên thực hiện thông qua phương pháp kiểm thử hộp đen với các ca kiểm thử (test case) cụ thể, tập trung vào 3 nhóm chức năng chính được trình bày tại Chương 4: Bảng 42 (Kiểm thử chức năng quản lý tài khoản), Bảng 43 (Kiểm thử chức năng quản lý đơn hàng, giỏ hàng) và Bảng 44 (Kiểm thử chức năng quản lý sản phẩm).

Kết luận

Đồ án tốt nghiệp "Xây dựng Website bán hoa" của nhóm sinh viên Cao Thị Minh Châu, Nguyễn Kim Hạnh và Nguyễn Thị Thuỳ Trang tại Trường Đại học Sư phạm Kỹ thuật TP. Hồ Chí Minh đã hoàn thành mục tiêu xây dựng một nền tảng thương mại điện tử chuyên ngành hoa tươi với đầy đủ phân hệ người dùng và quản trị. Đề tài vận dụng bài bản kiến trúc phân tách hiện đại kết hợp ReactJS ở tầng giao diện và Spring Boot cùng MongoDB ở tầng dịch vụ dữ liệu, bảo đảm tính xác thực thông qua JWT. Toàn bộ quy trình từ khảo sát hiện trạng, mô hình hóa kịch bản use case, thiết kế lược đồ tuần tự cho đến lập ca kiểm thử chức năng đều được thực hiện đầy đủ, tạo nên một tài liệu kỹ thuật có giá trị tham khảo thiết thực cho các nghiên cứu phát triển ứng dụng web cùng chuyên ngành.

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

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONTEND 1. Được ra mắt lần đầu vào năm 2013, ReactJS nhanh chóng trở thành một trong những framework phổ biến nhất cho phát triển ứng dụng web hiện đại. Đặc điểm quan trọng: - Virtual DOM: Một trong những đặc điểm quan trọng nhất của ReactJS là sử dụng Virtual DOM.

Điều này giúp tối ưu hóa hiệu suất của ứng dụng bằng cách giảm thiểu số lượng thay đổi trên DOM thực tế, thay vào đó chỉ cập nhật Virtual DOM và sau đó áp dụng những thay đổi cần thiết. 4 - Component-Based Architecture: ReactJS xây dựng trên một kiến trúc dựa trên components. Mỗi thành phần (component) có thể tái sử dụng và duy trì trạng thái riêng, tạo điều kiện thuận lợi cho phát triển và bảo trì. - Unidirectional Data Flow: React thực hiện luồng dữ liệu một chiều, giúp quản lý trạng thái của ứng dụng một cách dễ dàng và dự đoán được.

Dữ liệu di chuyển từ thành phần cha đến con, giúp theo dõi rõ ràng về tình trạng ứng dụng. - JSX (JavaScript XML): React sử dụng JSX để viết mã HTML trong JavaScript, giúp tạo ra mã nguồn dễ đọc và hiểu. JSX cũng cung cấp khả năng nhúng biểu thức JavaScript vào mã HTML. Dialogflow [2] Hình 2 : Giới thiệu về Dialogflow Dialogflow (tiền thân là API.AI) là một dịch vụ do Google cung cấp nhằm giúp các lập trình viên dễ dàng hơn khi lập trình các sản phẩm có giao tiếp giữa người dùng với sản phẩm thông qua các đoạn hội thoại bằng văn bản (text) hoặc giọng nói (voice).

Dialogflow không chỉ mạnh mẽ trong việc xử lý ngôn ngữ tự nhiên mà còn dễ dàng tích hợp với các hệ thống hiện có, giúp tối ưu hóa trải nghiệm người dùng và tự động hóa các tác vụ hỗ trợ khách hàng. Agent: 5 Agent trong Dialogflow là thực thể trung tâm chịu trách nhiệm quản lý và điều phối các hội thoại với người dùng. Một Agent có thể diễn giải và phản hồi lại ngôn ngữ tự nhiên thông qua việc sử dụng các Intent và Entity. Intent: Intent trong Dialogflow là khái niệm dùng để biểu thị mục đích hoặc yêu cầu cụ thể của người dùng trong một cuộc hội thoại.

Mỗi Intent đại diện cho một hành động mà người dùng muốn thực hiện hoặc thông tin mà họ muốn nhận được. Entity: Entity (thực thể) trong Dialogflow được sử dụng để trích xuất thông tin cụ thể từ câu hỏi của người dùng. Thông tin này thường là các danh từ hoặc cụm danh từ đại diện cho các đối tượng, khái niệm cụ thể mà người dùng đề cập đến. Các thư viện và công cụ: - Redux: Được sử dụng để quản lý trạng thái của ứng dụng trong các ứng dụng lớn, Redux giúp tạo ra một nguồn dữ liệu chung có thể được truy cập từ bất kỳ thành phần nào.

- React Router: Dùng để quản lý điều hướng trong ứng dụng React, React Router giúp tạo ra các đường dẫn tương ứng với các thành phần cụ thể. - Webpack và Babel: Sử dụng để đóng gói và biên dịch mã nguồn React thành mã JavaScript hỗ trợ trình duyệt. Ưu điểm của ReactJS: 6 Hình 3: Ưu điểm của ReactJS - Blazing Fast: ReactJS cho phép tạo ra những giao diện người dùng động và tương tác một cách nhanh chóng, nhờ vào việc sử dụng Virtual DOM và các kỹ thuật tối ưu hóa hiệu năng. - Efficient Debugging: ReactJS hỗ trợ trong việc gỡ lỗi và kiểm tra code, nhờ vào việc sử dụng JSX và các công cụ như React Developer Tools và Redux DevTools.

- SEO Friendly: ReactJS giúp cải thiện thứ hạng của website trên các công cụ tìm kiếm, nhờ vào việc tạo ra những trang web có thể được hiển thị trên máy chủ (server-side rendering) và tăng tốc độ tải trang. - DOM Virtuality: ReactJS tạo ra một bản sao của DOM trong bộ nhớ, và chỉ cập nhật những phần thay đổi trên DOM thực, giảm thiểu chi phí hiệu năng và tăng tốc độ ứng dụng. - Reusability: ReactJS sử dụng các component nhỏ và độc lập để xây dựng giao diện người dùng, giúp cho việc tái sử dụng, bảo trì và kiểm thử code dễ dàng hơn. - Easy Testing: ReactJS cho phép kiểm thử các component của ứng dụng một cách dễ dàng, nhờ vào việc sử dụng các thư viện như Jest, Enzyme, React Testing Library… 1.

Các thư viện hỗ trợ khác 7 - Axios là thư viện giúp client tương tác với server thông qua giao thức HTTP dựa trên các Promises. - Bootstrap là một framework bao gồm các HTML, CSS và JavaScript template dùng để phát triển website chuẩn responsive. - React Swiper là một thư viện linh hoạt, cho phép tạo giao diện có thể vuốt trong các ứng dụng React - React-Router là một thư viện định tuyến (routing) tiêu chuẩn trong React. Nó giữ cho giao diện của ứng dụng đồng bộ với URL trên trình duyệt - React-Scripts là một NPM package sử dụng cho create-react-app 1.

CÁC CÔNG NGHỆ SỬ DỤNG Ở BACKEND 1. Spring Boot Hình 4: Spring IO Platform Spring Boot là một Project nằm trên tầng IO Execution (Tầng thực thi) của Spring IO Framework. Spring Boot là một bước tiếp theo của Spring, để làm cho Spring dễ dàng hơn trong việc thiết lập và phát triển ứng dụng. Với Spring Boot, các cấu hình Spring được giảm thiểu 8 tối đa.

Spring Boot hỗ trợ các bộ chứa nhúng (embedded containers) điều này cho phép các ứng dụng web có thể chạy độc lập mà không cần phải trên khai lên các Web Server. Có thể dùng spring boot để tạo ứng dụng Java Web chạy bằng command line 'java - jar' hoặc xuất khẩu ra file war để triển khai lên Web Server như thông thường. Spring Boot cung cấp cho bạn một "CLI Tool" để chạy các kịch bản Spring (spring scripts). Spring Boot có thể giải thích một cách đơn giản bởi hình minh họa dưới đây: Hình 5: Tìm hiểu Spring Boot Các lợi ích của Spring Boot: - Dễ dàng để phát triển các ứng dụng dựa trên Spring với Java hoặc Groovy.

- Giảm thiểu thời gian phát triển và tăng năng xuất - Tránh việc phải viết nhiều mã nguyên mẫu (boilerplate Code), Annotations và các cấu hình XML. - Dễ dàng để tương tác các ứng dụng Spring Boot với các hệ sinh thái của Spring như Spring JDBC, Spring ORM, Spring Data, Spring Security etc. - Đi theo cách tiếp cận “Nguyên tắc cấu hình mặc định” để giảm thiểu thời gian và nỗ lực cần thiết để phát triển ứng dụng. - Cung cấp các Server nhúng (Embedded HTTP servers) như là Tomcat, Jetty.

để phát triển và test các ứng dụng web nhanh chóng và dễ dàng. - Cung cấp công cụ CLI (Command Line Interface) dể phát triển và test các ứng dụng Spring Boot (Java hoặc Groovy) từ các dòng lệnh (command prompt) rất dễ dàng và nhanh chóng. - Cung cấp rất nhiều các plugin để phát triển và test các ứng dụng Spring Boot nhanh chóng sử dụng các công cụ Build như Maven và Gradle 9 - Cung cấp nhiều plugin để làm việc với các cơ sở dữ liệu nhúng (embedded database) và các cơ sở dữ liệu lưu trữ trên bộ nhớ (in-memory Databases) một cách dễ dàng. MongoDB[3] Hình 6: Tìm hiểu MongoDB MongoDB lần đầu ra đời bởi MongoDB Inc., tại thời điểm đó là thế hệ 10, vào tháng Mười năm 2007, nó là một phần của sản phẩm PaaS (Platform as a Service) tương tự như Windows Azure và Google App Engine.

Sau đó nó đã được chuyển thành nguồn mở từ năm 2009. MongoDB đã trở thành một trong những NoSQL database nổi trội nhất bấy giờ, được dùng làm backend cho rất nhiều website như eBay, SourceForge và The New York Times. Các tính năng của MongoDB gồm có: - Các ad hoc query: hỗ trợ search bằng field, các phép search thông thường, regular expression searches, và range queries. 10 - Indexing: bất kì field nào trong BSON document cũng có thể được index.

- Replication: có ý nghĩa là “nhân bản”, là có một phiên bản giống hệt phiên bản đang tồn tại, đang sử dụng. Với cơ sở dữ liệu, nhu cầu lưu trữ lớn, đòi hỏi cơ sở dữ liệu toàn vẹn, không bị mất mát trước những sự cố ngoài dự đoán là rất cao. Vì vậy, người ta nghĩ ra khái niệm “nhân bản”, tạo một phiên bản cơ sở dữ liệu giống hệt cơ sở dữ liệu đang tồn tại, và lưu trữ ở một nơi khác, đề phòng có sự cố. - Aggregation: Các Aggregation operation xử lý các bản ghi dữ liệu và trả về kết quả đã được tính toán.

Các phép toán tập hợp nhóm các giá trị từ nhiều Document lại với nhau, và có thể thực hiện nhiều phép toán đa dạng trên dữ liệu đã được nhóm đó để trả về một kết quả duy nhất. Trong SQL, count(*) và GROUP BY là tương đương với Aggregation trong MongoDB. - Lưu trữ file: MongoDB được dùng như một hệ thống file tận dụng những function trên và hoạt động như một cách phân phối qua sharding. Ưu điểm của MongoDB: - Dữ liệu lưu trữ phi cấu trúc, không có tính ràng buộc, toàn vẹn nên tính sẵn sàng cao, hiệu suất lớn và dễ dàng mở rộng lưu trữ.

- Dữ liệu được caching (ghi đệm) lên RAM, hạn chế truy cập vào ổ cứng nên tốc độ đọc và ghi cao. RESTful API RESTful API là một tiêu chuẩn dùng trong việc thiết kế API cho các ứng dụng web (thiết kế Web services) để tiện cho việc quản lý các resource. Nó chú trọng vào tài nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, hoặc dữ liệu động…), bao gồm các trạng thái tài nguyên được định dạng và được truyền tải qua HTTP. 11 Hình 7: Phương pháp hoạt động của RESTful API REST hoạt động chủ yếu dựa vào giao thức HTTP.

Các hoạt động cơ bản nêu trên sẽ sử dụng những phương thức HTTP riêng. o GET (SELECT): Trả về một Resource hoặc một danh sách Resource. o POST (CREATE): Tạo mới một Resource. o PUT (UPDATE): Cập nhật thông tin cho Resource.

o DELETE (DELETE): Xoá một Resource. Những phương thức hay hoạt động này thường được gọi là CRUD tương ứng với Create, Read, Update, Delete. Các thư viện hỗ trợ khác 12 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 2. KHẢO SÁT HIỆN TRẠNG Với mục tiêu đề tài trên nhóm đã thực hiện khảo sát các website bán hoa: 2.vn (Nguồn: https://potico.vn/) Hình 8: Khảo sát hiện trạng shop Potico.vn Bảng 1: Đánh giá shop Potico.vn Ưu điểm Nhược điểm ✓ Đáp ứng đầy đủ các yêu cầu mà một  Trang chủ chứa quá nhiều thông tin website bán hoa cần phải có.

✓ Màu sắc trang web hài hòa, dễ nhìn ✓ Tất cả các thông tin cần biết đều thể hiện rõ trên website. ✓ Phân loại hoa rõ ràng, dễ tìm kiếm. ✓ Các sản phẩm tiêu biểu đều được thể hiện trên trang chủ. ✓ Có mục đề xuất sản phẩm liên quan 13 ✓ Cho phép chọn ngày giao hàng.