Đồ án 1: Báo cáo xây dựng website bán áo thun in hình theo yêu cầu - UIT

Tài liệu tham khảo đồ án xây dựng website bán áo thun in hình theo yêu cầu. Báo cáo chi tiết từ phân tích, thiết kế hệ thống đến giao diện cho sinh viên.

• Tác giả: Đặng Thị Bảo Linh
• 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, Đại học Quốc gia Thành phố Hồ Chí Minh
• Chuyên ngành: Công nghệ Phần mềm
• Đề tài: Xây dựng Website bán áo thun in hình theo yêu cầu
• Loại tài liệu: Đồ án 1
• Năm xuất bản: 2024
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Giới Thiệu Về Đồ Án Website Bán Áo Thun In Hình Theo Yêu Cầu

Đồ án website bán áo thun in hình theo yêu cầu là một dự án phần mềm tiên tiến được thực hiện bởi sinh viên Khoa Công nghệ Phần mềm, Trường Đại học Công nghệ Thông tin – Đại học Quốc gia TP.HCM. Dự án này nhằm xây dựng một nền tảng thương mại điện tử hiện đại, cho phép khách hàng thiết kế và mua áo thun in hình theo ý tưởng cá nhân của mình. Website bán áo thun tùy chỉnh này kết hợp các công nghệ web tiên tiến như React, Node.js, Express và MongoDB để tạo ra một trải nghiệm người dùng mượt mà và chuyên nghiệp. Hệ thống được chia thành hai ứng dụng chính: ứng dụng phía khách hàng (Client-side) cho việc mua sắm và thiết kế sản phẩm, cũng như ứng dụng phía quản lý cửa hàng (Retailer-side) để quản lý inventory và đơn hàng.

1.1. Lý Do Chọn Đề Tài

Ngành thương mại điện tử và in áo thun cá nhân hóa đang phát triển mạnh mẽ. Khách hàng ngày nay mong muốn các sản phẩm độc đáo, phản ánh phong cách cá nhân. Website bán áo thun in theo yêu cầu giải quyết nhu cầu này bằng cách cho phép người dùng tự tạo thiết kế riêng. Dự án này không chỉ có giá trị học tập mà còn có tiềm năng ứng dụng thực tế trong kinh doanh.

1.2. Mục Đích Và Phạm Vi Nghiên Cứu

Mục đích chính của đồ án là xây dựng một nền tảng bán hàng trực tuyến hoàn chỉnh với các tính năng quản lý sản phẩm, xử lý đơn hàng và thanh toán. Phạm vi bao gồm phát triển giao diện người dùng, thiết lập cơ sở dữ liệu, tích hợp hệ thống thanh toán và quản lý voucher khuyến mãi.

II. Kiến Trúc Hệ Thống Và Công Nghệ Sử Dụng

Kiến trúc hệ thống website được thiết kế theo mô hình phân lớp (Layered Architecture) với ba tầng chính: tầng giao diện (Presentation Layer), tầng ứng dụng (Application Layer) và tầng dữ liệu (Data Layer). Website bán áo thun sử dụng các công nghệ hiện đại bao gồm React cho frontend, Node.js và Express cho backend, MongoDB để lưu trữ dữ liệu, và AWS cho dịch vụ lưu trữ đám mây. Redux được tích hợp để quản lý trạng thái ứng dụng một cách hiệu quả. Git và GitHub được sử dụng cho kiểm soát phiên bản mã nguồn. Kiến trúc này đảm bảo tính mở rộng, bảo mật và hiệu suất cao cho nền tảng thương mại điện tử.

2.1. Stack Công Nghệ Frontend

React là thư viện JavaScript chính cho xây dựng giao diện người dùng. Redux giúp quản lý trạng thái ứng dụng một cách tập trung. Kết hợp với CSS hiện đại và responsive design, ứng dụng bán áo thun hoạt động tốt trên tất cả thiết bị từ điện thoại đến máy tính để bàn.

2.2. Stack Công Nghệ Backend

Node.js cùng Express.js được sử dụng để xây dựng API RESTful mạnh mẽ. MongoDB - cơ sở dữ liệu NoSQL linh hoạt - lưu trữ thông tin khách hàng, sản phẩm, đơn hàng và voucher. AWS cung cấp dịch vụ hosting và lưu trữ dữ liệu đáng tin cậy cho website in áo thun tùy chỉnh.

III. Mô Hình Yêu Cầu Phần Mềm Và Use Case

Phân tích yêu cầu phần mềm cho website bán áo thun in hình xác định ba lớp người dùng chính: Khách (Guest), Khách hàng đã đăng ký (Customer) và Quản trị viên (Admin). Mỗi lớp người dùng có những quyền và chức năng riêng biệt được mô tả chi tiết thông qua các use case. Sơ đồ use case minh họa tất cả các tương tác giữa người dùng và hệ thống. Những use case quan trọng bao gồm: Thêm Voucher, Tạo Design, Mint as NFT, Thống kê doanh thu, và Thanh toán. Mỗi use case được mô tả chi tiết với các bước thực hiện, điều kiện tiên quyết, kết quả mong đợi và các tình huống ngoại lệ, đảm bảo hệ thống website in áo theo yêu cầu hoàn toàn đáp ứng nhu cầu người dùng.

3.1. Các Tác Nhân Actors Trong Hệ Thống

Guest - khách truy cập không đăng ký có thể xem danh sách sản phẩm. Customer - khách hàng đã đăng ký có thể thiết kế áo, đặt hàng, theo dõi đơn hàng. Admin - quản trị viên quản lý toàn bộ hệ thống bao gồm sản phẩm, người dùng, đơn hàng, voucher và thống kê doanh thu trên website bán áo thun in hình theo yêu cầu.

3.2. Các Use Case Quan Trọng

Use case 'Tạo Design' cho phép khách hàng tự tạo thiết kế áo thun độc đáo. Use case 'Thanh toán' xử lý các giao dịch an toàn. Use case 'Thêm Voucher' giúp admin quản lý các mã giảm giá. Use case 'Thống kê' cung cấp báo cáo doanh thu chi tiết cho quản lý cửa hàng.

IV. Thiết Kế Giao Diện Và Tính Năng Chính

Giao diện website bán áo thun in hình được thiết kế theo nguyên tắc UX/UI tốt nhất, cung cấp trải nghiệm người dùng trực quan và dễ sử dụng. Phía khách hàng (Client-side) bao gồm các màn hình: Home hiển thị sản phẩm nổi bật, Danh sách sản phẩm với bộ lọc tìm kiếm, Chi tiết sản phẩm cùng công cụ thiết kế tương tác, Giỏ hàng và thanh toán an toàn. Phía quản lý (Retailer-side) cung cấp các màn hình quản lý: Thống kê doanh thu, Quản lý người dùng, Quản lý đơn hàng, Hệ thống tin nhắn khách hàng, Quản lý voucher và Quản lý sản phẩm. Toàn bộ ứng dụng website bán áo thun được tối ưu hóa cho mobile, tablet và desktop.

4.1. Màn Hình Chính Phía Khách Hàng

Màn hình Home hiển thị các sản phẩm được đề xuất và banner khuyến mãi. Màn hình Sản phẩm liệt kê đầy đủ áo thun với tùy chọn lọc theo kích cỡ, màu sắc, giá. Màn hình Thiết kế là trọng tâm của ứng dụng, cho phép khách hàng tải ảnh, thêm văn bản, chọn vị trí in trên áo thun in theo yêu cầu.

4.2. Màn Hình Quản Lý Phía Cửa Hàng

Màn hình Thống kê hiển thị doanh thu, số lượng đơn hàng, khách hàng mới. Màn hình Quản lý Order theo dõi trạng thái đơn hàng từ chờ xử lý đến giao hàng. Màn hình Quản lý Voucher cho phép tạo, chỉnh sửa mã khuyến mãi cho website bán áo thun.

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

CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1. Lý do chọn đề tài - Trong ngành thời trang hiện đại, nhu cầu cá nhân hóa sản phẩm ngày càng tăng cao, đặc biệt với sự phát triển của các công nghệ tiên tiến như trí tuệ nhân tạo (AI). Xu hướng này đòi hỏi các doanh nghiệp phải đáp ứng yêu cầu đa dạng và độc đáo của khách hàng thông qua các giải pháp sáng tạo. Đề tài xây dựng một trang web kinh doanh áo thiết kế theo yêu cầu, tích hợp AI, không chỉ mang đến sự tiện lợi cho khách hàng mà còn giúp doanh nghiệp nâng cao năng lực cạnh tranh, tối ưu hóa quy trình kinh doanh và tạo ra lợi ích kinh tế bền vững.

Mục đích nghiên cứu - Đề tài hướng tới xây dựng một hệ thống trang web cho phép khách hàng thiết kế áo theo ý muốn, từ đó đáp ứng xu hướng cá nhân hóa trong thời trang. Ngoài ra, hệ thống còn cung cấp các công cụ quản lý hiệu quả cho doanh nghiệp, tối ưu hóa trải nghiệm mua sắm, đồng thời sử dụng AI để gợi ý sticker phù hợp. Đối tượng nghiên cứu - Đối tượng nghiên cứu bao gồm: + Khách hàng cá nhân: Những người có nhu cầu thiết kế và sở hữu các sản phẩm thời trang độc đáo, đặc biệt là giới trẻ. + Doanh nghiệp nhỏ và vừa: Các doanh nghiệp kinh doanh trong lĩnh vực thời trang mong muốn ứng dụng công nghệ để nâng cao hiệu quả kinh doanh và quản lý.

Phạm vi nghiên cứu - Phạm vi nghiên cứu tập trung vào: + Phát triển giao diện người dùng (UI/UX) thân thiện, trực quan cho 14 trang web. + Tích hợp công nghệ AI để hỗ trợ gợi ý và cá nhân hóa sản phẩm. + Xây dựng và thử nghiệm hệ thống trên nền tảng web, đảm bảo tương thích và hiệu năng cao. + Thu thập phản hồi từ khách hàng thực tế để cải thiện và hoàn thiện hệ thống.

Các hướng nghiên cứu, hướng phát triển sản phẩm - Trong những năm gần đây, lĩnh vực ứng website thương mại điện tử hỗ trợ kinh doanh đã thu hút sự chú ý lớn từ các nhà nghiên cứu, công ty và doanh nghiệp. Nhiều công trình nghiên cứu trong và ngoài nước tập trung vào việc cải thiện trải nghiệm người dùng (UX/UI), tích hợp công nghệ mới như trí tuệ nhân tạo (AI), và tối ưu hóa quy trình mua sắm trực tuyến. Ví dụ: + Các nghiên cứu nhỏ trong nước chủ yếu tập trung vào xây dựng các ứng dụng mua sắm dành cho từng ngành hàng cụ thể, nhưng thường thiếu tính linh hoạt và khả năng mở rộng. + Các nghiên cứu quốc tế lại nhấn mạnh vào việc sử dụng AI và dữ liệu lớn (Big Data) để cá nhân hóa trải nghiệm mua sắm, nhưng chi phí triển khai cao khiến nhiều doanh nghiệp nhỏ và vừa khó tiếp cận.

Các vấn đề còn tồn tại - Hầu hết các ứng dụng hiện có chưa đáp ứng tốt nhu cầu của người dùng về tốc độ, tính năng tìm kiếm thông minh và hỗ trợ khách hàng. - Thiếu giúp ontime của ứng dụng luôn cao thông qua việc luôn đáp ứng được các câu hỏi của khách hàng thông qua chatbot tự động, để tăng trải nghiệm khách hàng trong quá trình chọn mua thiết bị công nghệ. - Hạn chế trong việc tích hợp công nghệ AI để dự đoán xu hướng thời trang và cải thiện trải nghiệm người dùng. - Chưa hỗ trợ hiệu quả cho doanh nghiệp trong việc quản lý hàng tồn kho, theo dõi đơn hàng, và phân tích dữ liệu kinh doanh.

Các vấn đề cần tập trung nghiên cứu và giải quyết - Đề tài sẽ tập trung vào các vấn đề chính sau: + Tối ưu hóa trải nghiệm khách hàng bằng cách cung cấp các công cụ thiết kế áo trực tuyến tiện lợi và linh hoạt. + Tích hợp AI để cá nhân hóa sản phẩm và gợi ý sticker. + Xây dựng hệ thống quản lý hiệu quả, hỗ trợ doanh nghiệp trong việc phân tích và ra quyết định kinh doanh. + Đảm bảo quá trình thanh toán và giao hàng nhanh chóng, an toàn.

16 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2. Redux - Redux là gì? Redux là một thư viện quản lý trạng thái được sử dụng phổ biến trong các ứng dụng JavaScript, đặc biệt là trong các ứng dụng React. Redux cho phép lập trình viên quản lý trạng thái của toàn bộ ứng dụng trong một kho chung (“store”), giúp dễ dàng duy trì tính nhất quán và đối chiếu. Hình ảnh tổng quan về Redux - Ưu điểm và nhược điểm ● Ưu điểm: o Quản lý trạng thái tập trung: Giúp đơn giản việc theo dõi và quản lý trạng thái của ứng dụng.

o Dễ dàng kiểm thử: Redux khuyến khích sử dụng các hàm thuần túy (pure functions), giúp việc viết unit test trở nên đơn giản. o Debugging hiệu quả: Công cụ Redux DevTools cung cấp giao diện truy vết và debug trạng thái của ứng dụng. o Cộng đồng lớn: Redux có cộng đồng người dùng rộng lớn, nhiều tài nguyên hỗ trợ và plugin. o Không phụ thuộc React: Redux có thể được sử dụng với bất kỳ thư viện hoặc framework JavaScript nào.

17 ● Nhược điểm: o Tính phức tạp: Yêu cầu lập trình viên hiểu rõ các nguyên tắc của Redux, dễ dẫn đến việc gia tăng độ phức tạp cho các ứng dụng nhỏ. o Có thể thừa: Trong một số trường hợp, Redux không cần thiết và có thể dẫn đến code dư thừa. o Yêu cầu boilerplate cao: Việc thiết lập các action, reducer, và store đòi hỏi nhiều boilerplate, có thể khiến code trở nên dài dòng. - Vai trò Redux đóng vai trò quan trọng trong việc quản lý trạng thái và giao tiếp giữa các thành phần của ứng dụng.

Trong các ứng dụng lớn, Redux giúp quản lý dữ liệu tập trung, giúp dễ dàng theo dõi, tránh tình trạng “prop drilling” khi truyền dữ liệu qua nhiều cấp component và tăng tính nhất quán trong việc quản lý dữ liệu. AWS - AWS là gì? AWS (Amazon Web Services) là một nền tảng dịch vụ đám mây toàn diện và được sử dụng rộng rãi, cung cấp hơn 200 dịch vụ từ các trung tâm dữ liệu toàn cầu. AWS hỗ trợ các doanh nghiệp và cá nhân xây dựng, triển khai và quản lý hạ tầng IT với tính linh hoạt và khả năng mở rộng cao. AWS Bedrock và Rekognition AWS Bedrock: Dịch vụ giúp tích hợp các mô hình AI tiên tiến, hỗ trợ xây dựng ứng dụng trí tuệ nhân tạo mà không cần quản lý cơ sở hạ tầng phức tạp.

Bedrock cung cấp khả năng truy cập vào các mô hình AI từ các nhà cung cấp bên thứ ba mà không cần đào tạo mô hình từ đầu. AWS Rekognition: Dịch vụ cung cấp khả năng nhận diện và phân tích hình ảnh và video. Các tính năng bao gồm nhận diện khuôn mặt, phát hiện đối tượng, phân loại hình ảnh, và phân tích nội dung video, được sử dụng phổ biến trong bảo mật, quản lý nội dung và ứng dụng IoT. Tổng quan về AWS - Ưu điểm ● Đa dạng dịch vụ: Cung cấp đầy đủ các giải pháp từ AI, lưu trữ, cơ sở dữ liệu, đến quản lý mạng và bảo mật.

● Tính linh hoạt cao: AWS có thể mở rộng hoặc thu nhỏ tài nguyên tùy theo nhu cầu. ● Khả năng tích hợp tốt: AWS dễ dàng tích hợp với các công cụ phát triển hiện đại và công nghệ khác. ● Cộng đồng lớn: Hỗ trợ mạnh mẽ từ cộng đồng người dùng và đội ngũ kỹ thuật AWS. ● Hiệu suất cao: Đảm bảo độ trễ thấp và khả năng xử lý khối lượng công việc lớn.

Nhược điểm ● Chi phí: Có thể trở nên đắt đỏ nếu không quản lý tài nguyên hiệu quả. ● Phức tạp: Yêu cầu người dùng có kiến thức kỹ thuật để tận dụng tối đa các dịch vụ. ● Phụ thuộc nhà cung cấp: Di chuyển ứng dụng từ AWS sang nền tảng khác có thể phức tạp. - Vai trò AWS đóng vai trò là nền tảng đám mây toàn diện, hỗ trợ các doanh nghiệp và cá nhân triển khai hạ tầng và ứng dụng với tốc độ nhanh chóng, đáng tin cậy và hiệu quả.

Nhờ vào khả năng tích hợp AI, lưu trữ linh hoạt, và bảo mật mạnh mẽ, AWS đã trở thành lựa chọn hàng đầu cho các giải pháp công nghệ hiện đại.js - Giới thiệu Node.js là một môi trường runtime chạy JavaScript đa nền tảng, mã nguồn mở, được sử dụng rộng rãi bởi lập trình viên cho nhiều dự án.js cung cấp nhiều thư viện khác nhau, giúp đơn giản hóa việc lập trình. Một trong những tính năng chính của Nodejs là, cho phép xử lý đồng thời nhiều yêu cầu, mà không chặn các yêu cầu khác. Tổng quan về Node.js - Ưu điểm ● Hiệu suất cao: Nodejs chạy đơn luồng, sử dụng V8 Engine, giúp ứng dụng đảm bảo tốc độ khi có nhiều requests. ● Xử lý bất đồng bộ và I/O hướng sự kiện: Khả năng xử lý I/O bất đồng bộ, giúp Nodejs có thể xử lý nhiều tasks, mà không cần phải chờ kết quả của task trước đó.

● Phát triển ứng dụng: Có thể sử dụng để phát triển ứng dụng ở cả phía client và server. ● Module đa dạng: Nodejs sở hữu một cộng đồng duy trì, phát triển modules, thư viện giúp cho việc phát triển ứng dụng nhanh chóng. ● Stream và xử lý file lớn: Nodejs hỗ trợ streaming, cho phép xử lý các file có kích thước lớn không tốn nhiều tài nguyên. 20 ● Phù hợp với ứng dụng real time: Do Nodejs xử lý bất đồng bộ, thích hợp với các ứng dụng real time như: chat applications, streaming services,.

- Nhược điểm ● Cần có kiến thức nền tảng về JavaScript. ● Khá phức tạp trong việc thao tác với cơ sử dữ liệu quan hệ. ● Mỗi callback sẽ đi kèm với rất nhiều callback lồng nhau khác, dễ dẫn đến tình trạng "callback hell". ● Không phù hợp với các tác vụ đòi hỏi nhiều CPU core.js - Giới thiệu Express.js là một framework đơn giản được xây dựng trên nền tảng Node.js, ra đời với mục đích làm cho việc phát triển các ứng dụng web và API trở nên đơn giản, hiệu quả và dễ bảo trì hơn.

Bằng cách cung cấp các công cụ tiện lợi để xử lý yêu cầu HTTP, quản lý định tuyến (routing), và thêm các chức năng khác vào ứng dụng thông qua middleware. Middleware là các chức năng trung gian được thực thi trước khi yêu cầu của người dùng được xử lý hoặc sau khi phản hồi được gửi đi. Điều này giúp bạn thực hiện các tác vụ như xác thực người dùng, ghi log, xử lý lỗi và nhiều hơn nữa một cách dễ dàng. Tổng quan về Express.js 21 - Ưu điểm ● Đơn giản và dễ sử dụng: ExpressJS có cú pháp đơn giản và dễ hiểu, giúp lập trình viên dễ dàng nắm bắt và triển khai các tính năng.