Xây Dựng Website Thương Mại Điện Tử Cho Cửa Hàng Nước Uống Dinh Dưỡng Sunkissed

Khám phá cách xây dựng website thương mại điện tử cho cửa hàng nước uống dinh dưỡng Sunkissed, tối ưu hóa trải nghiệm khách hàng và tăng doanh thu.

• Trường học: Trường Đại Học Kinh Tế
• Chuyên ngành: Thương Mại Điện Tử
• Đề tài: Xây Dựng Website Thương Mại Điện Tử Cho Cửa Hàng Nước Uống Dinh Dưỡng Sunkissed
• Loại tài liệu: Đồ Án Tốt Nghiệp
• Năm xuất bản: 2023
• Địa điểm: Hà Nội

Mục lục chi tiết

• DANH MỤC HÌNH ẢNH
• DANH MỤC BẢNG BIỂU
• BẢNG PHÂN CÔNG ĐÁNH GIÁ THÀNH VIÊN
• 1. CHƯƠNG 01: TỔNG QUAN
• 1.1. Lý do chọn đề tài
• 1.2. Mục tiêu nghiên cứu
• 1.3. Đối tượng nghiên cứu
• 1.4. Phương pháp thực hiện
• 1.5. Phạm vi nghiên cứu
• 2. CHƯƠNG 02: MÔ TẢ HỆ THỐNG/CHƯƠNG TRÌNH
• 2.1. Header
• 2.2. Thanh điều hướng - Navigation
• 2.3. Hero
• 2.4. Danh mục sản phẩm phổ biến
• 2.5. Danh mục sản phẩm
• 2.6. Mục đề xuất sản phẩm khác
• 2.7. Danh sách sản phẩm có trong giỏ hàng
• 2.8. Chức năng cho giỏ hàng
• 2.9. Danh mục yêu thích – Wishlist
• 2.10. Thông tin giao hàng
• 2.11. Thanh toán và vận chuyển
• 2.12. Phương thức thanh toán
• 2.13. Trang so sánh
• 2.14. Quản lý tài khoản (accounts)
• 2.15. Đăng nhập, đăng ký (login-register)
• 2.16. Giới thiệu thương hiệu
• 2.17. Thông tin liên hệ
• 3. CHƯƠNG 03: ĐIỀU CHỈNH, MỞ RỘNG VÀ PHÁT TRIỂN HỆ THỐNG/CHƯƠNG TRÌNH
• 3.1. Phân tích các layout có sẵn
• 3.2. Thiết kế chương trình trên Figma
• 3.3. Mô tả về layout
• 3.4. Điều chỉnh trên Source Code
• 3.5. Trang cửa hàng
• 3.6. Chi tiết sản phẩm
• 3.7. Về chúng tôi
• 4. CHƯƠNG 04: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
• CHƯƠNG 05: PHỤ LỤC
• TÀI LIỆU THAM KHẢO
• LỜI CẢM ƠN

Tóm tắt

I. Giải pháp xây dựng website TMĐT cho nước uống Sunkissed

Trong bối cảnh thị trường trực tuyến ngày càng cạnh tranh, việc xây dựng website thương mại điện tử cho cửa hàng nước uống dinh dưỡng Sunkissed không chỉ là xu hướng mà còn là một yêu cầu chiến lược. Một website chuyên nghiệp đóng vai trò là nền tảng cốt lõi cho mô hình kinh doanh nước uống dinh dưỡng trực tuyến, giúp thương hiệu tiếp cận khách hàng tiềm năng, quảng bá sản phẩm hiệu quả và tối ưu hóa quy trình bán hàng. Theo tài liệu nghiên cứu gốc, lý do chính để triển khai dự án này xuất phát từ nhu cầu thực tế của thị trường, nơi người tiêu dùng ngày càng ưu tiên sự tiện lợi và chất lượng sản phẩm. Website TMĐT cho phép Sunkissed cung cấp sản phẩm nhanh chóng, mang lại trải nghiệm mua sắm tiện lợi và xây dựng một kênh tương tác trực tiếp với khách hàng. Mục tiêu của dự án không chỉ dừng lại ở việc tạo ra một kênh bán hàng, mà còn hướng đến việc xây dựng thương hiệu online Sunkissed một cách bền vững. Điều này bao gồm việc phát triển một giao diện thân thiện, tối ưu hóa trải nghiệm người dùng (UI/UX) trên đa nền tảng, và tích hợp các công cụ hỗ trợ marketing hiệu quả. Việc đầu tư vào một giải pháp e-commerce cho ngành đồ uống không chỉ giúp tăng doanh thu mà còn là công cụ thu thập dữ liệu khách hàng quý giá, từ đó đưa ra các chiến lược kinh doanh và chăm sóc khách hàng phù hợp. Dự án này là một minh chứng điển hình cho việc ứng dụng công nghệ vào ngành F&B, biến thách thức của thị trường thành cơ hội tăng trưởng.

1.1. Phân tích lý do chọn đề tài xây dựng website Sunkissed

Lý do chính thúc đẩy đề tài này là sự phát triển mạnh mẽ của thương mại điện tử và sự thay đổi trong hành vi người tiêu dùng, đặc biệt trong ngành hàng thực phẩm và đồ uống (F&B). Tài liệu gốc chỉ rõ, thị trường thức uống dinh dưỡng đang nhận được sự quan tâm lớn, nơi chất lượng và tính tiện lợi là hai yếu tố hàng đầu. Việc thiết kế website F&B chuyên nghiệp cho Sunkissed giải quyết bài toán quảng bá thương hiệu trong một thị trường số hóa, giúp doanh nghiệp không bị tụt hậu so với đối thủ. Một website riêng cho phép Sunkissed toàn quyền kiểm soát hình ảnh thương hiệu, thông tin sản phẩm và trải nghiệm khách hàng, điều mà các sàn TMĐT bên thứ ba không thể cung cấp trọn vẹn. Hơn nữa, đây là nền tảng để triển khai các chiến dịch marketing online cho sản phẩm nước uống một cách chủ động và sáng tạo.

1.2. Xác định mục tiêu và phạm vi nghiên cứu dự án TMĐT

Mục tiêu nghiên cứu của dự án được xác định rõ ràng, tập trung vào việc tạo ra một sản phẩm front-end hoàn chỉnh. Các mục tiêu cụ thể bao gồm: phát triển giao diện tương thích đa thiết bị (thiết kế web responsive), tối ưu UI/UX để đơn giản hóa thao tác, xây dựng hệ thống lọc và tìm kiếm thông minh, và tích hợp các tùy chọn thanh toán đa dạng. Về phạm vi, đồ án tập trung vào việc phát triển giao diện người dùng sử dụng các công nghệ lập trình phổ biến là HTML, CSS, và Javascript. Sản phẩm cuối cùng là một website front-end được công khai trên GitHub, thể hiện đầy đủ các trang chức năng như trang chủ, cửa hàng, chi tiết sản phẩm, giỏ hàng và thanh toán. Đây là một phạm vi thực tế, cho phép nhóm tập trung hoàn thiện trải nghiệm người dùng trước khi triển khai các hệ thống back-end phức tạp hơn.

II. Thách thức khi thiết kế website F B cho Sunkissed online

Việc thiết kế website F&B đối mặt với những thách thức đặc thù mà các ngành hàng khác không có. Đối với một thương hiệu nước uống dinh dưỡng như Sunkissed, thách thức lớn nhất là làm sao để truyền tải được sự tươi ngon, giá trị dinh dưỡng và sự tin cậy của sản phẩm qua một giao diện số. Không giống như các sản phẩm công nghệ, sản phẩm F&B cần kích thích vị giác và cảm xúc của người dùng thông qua hình ảnh và nội dung. Một thách thức khác là tối ưu hóa luồng đặt hàng và giao hàng. Quá trình từ lúc khách hàng thêm sản phẩm vào giỏ hàng đến khi nhận hàng phải nhanh chóng và minh bạch, đặc biệt với các sản phẩm cần bảo quản lạnh. Do đó, hệ thống quản lý đơn hàng và vận chuyển phải được thiết kế một cách khoa học. Tài liệu nghiên cứu đã chỉ ra sự cần thiết phải phân tích kỹ lưỡng các layout có sẵn từ các thương hiệu lớn như Juicy Juice hay OLIPOP để học hỏi. Việc này giúp xác định các yếu tố thành công trong giao diện website bán đồ uống healthy, từ đó áp dụng và cải tiến cho website Sunkissed. Thách thức cuối cùng là việc xây dựng lòng tin, đòi hỏi website phải hiển thị đầy đủ thông tin về thành phần dinh dưỡng sản phẩm, đánh giá từ khách hàng và các chứng nhận an toàn thực phẩm.

2.1. Yêu cầu đặc thù về trải nghiệm người dùng ngành F B

Trải nghiệm người dùng (UI/UX) trên một website bán thực phẩm chức năng hay đồ uống healthy đòi hỏi sự tinh tế cao. Người dùng cần dễ dàng tìm kiếm sản phẩm theo nhu cầu (ví dụ: detox, tăng năng lượng, giảm cân). Chức năng lọc và tìm kiếm thông minh là cực kỳ quan trọng. Bên cạnh đó, hình ảnh sản phẩm phải chất lượng cao, chân thực, đi kèm video để tăng tính hấp dẫn. Quá trình thanh toán phải được đơn giản hóa tối đa, hỗ trợ nhiều phương thức thanh toán hiện đại. Theo phân tích trong đồ án, một trải nghiệm mua sắm liền mạch từ trang chủ đến trang thanh toán là yếu tố quyết định tỷ lệ chuyển đổi, đặc biệt là trên các thiết bị di động.

2.2. Phân tích layout tham khảo để xây dựng thương hiệu online

Để vượt qua các thách thức về thiết kế, nhóm dự án đã tiến hành phân tích sâu các layout từ những website thành công trong cùng lĩnh vực. Ví dụ, trang OLIPOP được tham khảo về cách trình bày chi tiết sản phẩm độc đáo và hệ thống đánh giá khách hàng trực quan. Trang Juicy Juice cung cấp ý tưởng về một landing page đặc sắc với các hiệu ứng chuyển động thu hút. Việc học hỏi này không phải là sao chép, mà là chắt lọc những điểm mạnh để tạo ra một giao diện website bán đồ uống healthy độc đáo cho Sunkissed. Quá trình này giúp định hình phong cách thiết kế, đảm bảo website không chỉ đẹp về mặt thẩm mỹ mà còn hiệu quả về mặt chức năng, góp phần quan trọng vào việc xây dựng thương hiệu online Sunkissed.

III. Top tính năng website TMĐT Sunkissed cần phải có ngay

Để một website thương mại điện tử hoạt động hiệu quả, việc trang bị đầy đủ các tính năng cần thiết là yếu tố sống còn. Đối với dự án Sunkissed, các tính năng website thương mại điện tử không chỉ phục vụ việc bán hàng mà còn nâng cao trải nghiệm khách hàng. Dựa trên mô tả hệ thống trong tài liệu nghiên cứu, có thể xác định các nhóm chức năng cốt lõi. Nhóm thứ nhất là quản lý sản phẩm, bao gồm việc hiển thị chi tiết sản phẩm, hình ảnh, mô tả, bảng thuộc tính và các biến thể (dung tích, hương vị). Chức năng hiển thị thành phần dinh dưỡng sản phẩm là bắt buộc để tạo dựng niềm tin. Nhóm thứ hai là các tính năng tương tác và mua sắm, điển hình là giỏ hàng (Cart), danh sách yêu thích (Wishlist), và một hệ thống tìm kiếm, lọc sản phẩm thông minh. Đặc biệt, website bán liệu trình detox cần có tính năng cho phép khách hàng đặt hàng theo gói hoặc đăng ký định kỳ. Nhóm thứ ba là quy trình thanh toán và vận hành, bao gồm việc tích hợp cổng thanh toán online đa dạng (COD, QR, Momo), quản lý thông tin giao hàng, và tự động tính phí vận chuyển. Cuối cùng là nhóm tính năng quản lý tài khoản và chăm sóc khách hàng, cho phép người dùng xem lại lịch sử đơn hàng, cập nhật thông tin và tham gia các chương trình khách hàng thân thiết.

3.1. Thiết kế chức năng quản lý sản phẩm và giỏ hàng tối ưu

Chức năng quản lý sản phẩm là trái tim của website. Trang chi tiết sản phẩm được thiết kế để cung cấp thông tin toàn diện, từ hình ảnh chất lượng cao có tính năng zoom, mô tả lợi ích, đến các biến thể về dung tích. Theo mô tả trong đồ án, nhóm đã cải tiến bằng cách bổ sung phần sản phẩm tương tự và sản phẩm mua kèm ngay cạnh sản phẩm chính. Về giỏ hàng, giao diện được tối ưu để người dùng có thể dễ dàng thay đổi số lượng, xóa sản phẩm, và áp dụng mã giảm giá. Chức năng đặt hàng và giao hàng tận nơi được tính toán chi phí trực tiếp trong giỏ hàng, tạo ra sự minh bạch và tiện lợi cho khách hàng trước khi tiến hành thanh toán.

3.2. Xây dựng trang quản lý tài khoản và chăm sóc khách hàng

Trang quản lý tài khoản được xem là một công cụ để tăng cường mối quan hệ với khách hàng. Thay vì một giao diện đơn điệu, đồ án đã cải tiến bố cục thành dạng tab ngang, thân thiện hơn. Người dùng có thể dễ dàng xem lại lịch sử đơn hàng, quản lý địa chỉ giao hàng, và đổi mật khẩu. Đây cũng là nền tảng để triển khai các hoạt động chăm sóc khách hàng trực tuyến, ví dụ như gửi thông báo về đơn hàng hoặc các chương trình khuyến mãi riêng. Việc đầu tư vào một trang tài khoản chỉn chu thể hiện sự chuyên nghiệp và tôn trọng khách hàng, khuyến khích họ quay trở lại mua sắm.

IV. Cách tối ưu giao diện website bán đồ uống Sunkissed

Giao diện (UI) và trải nghiệm người dùng (UX) là hai yếu tố quyết định sự thành bại của một giải pháp e-commerce cho ngành đồ uống. Quá trình tối ưu giao diện cho Sunkissed được thực hiện một cách bài bản, bắt đầu từ khâu nghiên cứu và thiết kế trên Figma đến triển khai và điều chỉnh trực tiếp trên mã nguồn. Mục tiêu là tạo ra một giao diện website bán đồ uống healthy không chỉ đẹp mắt, phù hợp với nhận diện thương hiệu mà còn phải trực quan và dễ sử dụng. Tài liệu gốc đã mô tả chi tiết quá trình này trong Chương 3, nhấn mạnh việc điều chỉnh từ layout, màu sắc, font chữ cho đến các hiệu ứng tương tác nhỏ nhất. Một trong những cải tiến đáng chú ý là việc thiết kế lại hoàn toàn trang chi tiết sản phẩm và trang cửa hàng, bổ sung bộ lọc thông minh và cách sắp xếp sản phẩm khoa học. Hơn nữa, việc đảm bảo thiết kế web responsive là ưu tiên hàng đầu, giúp website hiển thị hoàn hảo trên mọi thiết bị, từ máy tính để bàn đến điện thoại di động. Các yếu tố như tốc độ tải trang, hiệu ứng chuyển động mượt mà khi người dùng cuộn trang, và các thông báo pop-up tinh tế đều được chú trọng để mang lại một trải nghiệm mua sắm chuyên nghiệp và thú vị.

4.1. Quy trình thiết kế chương trình trên Figma cho Sunkissed

Trước khi viết code, toàn bộ giao diện của website Sunkissed đã được thiết kế chi tiết trên Figma. Quy trình này cho phép nhóm hình dung một cách trực quan toàn bộ luồng người dùng, từ trang chủ, trang sản phẩm, đến giỏ hàng và thanh toán. Việc sử dụng Figma giúp thống nhất về mặt thiết kế, từ bảng màu chủ đạo (màu vàng nhạt Peach Puff), font chữ (Lexend, Raleway) cho đến layout của từng thành phần. Theo mô tả trong đồ án, các trang chính như Trang chủ, Chi tiết sản phẩm, Giỏ hàng đều có bản thiết kế riêng. Quá trình này giúp giảm thiểu rủi ro và tiết kiệm thời gian trong giai đoạn lập trình, đảm bảo sản phẩm cuối cùng đồng nhất và chuyên nghiệp.

4.2. Kỹ thuật điều chỉnh source code cho thiết kế web responsive

Từ thiết kế Figma, nhóm đã tiến hành điều chỉnh trên Source Code để hiện thực hóa giao diện. Đây là giai đoạn đòi hỏi kỹ thuật cao, đặc biệt là trong việc xử lý thiết kế web responsive. Nhóm đã sử dụng các kỹ thuật CSS hiện đại như Flexbox và Grid để tạo ra các layout linh hoạt, tự động điều chỉnh theo kích thước màn hình. Các hiệu ứng tương tác được thêm vào bằng Javascript, ví dụ như hiệu ứng tuyết rơi ở phần Hero, hiệu ứng di chuyển của các lon nước khi cuộn trang, hay hiệu ứng con trỏ chuột hình giọt nước. Các cải tiến này không chỉ làm cho website sinh động hơn mà còn thể hiện sự đầu tư kỹ lưỡng vào trải nghiệm người dùng, một yếu tố quan trọng của một dịch vụ làm web cho cửa hàng thực phẩm chất lượng cao.

V. Phương pháp tối ưu SEO Marketing cho website Sunkissed

Xây dựng website chỉ là bước khởi đầu; để thu hút khách hàng và tạo ra doanh thu, cần có một chiến lược tối ưu hóa công cụ tìm kiếm (SEO) và marketing online bài bản. Việc tối ưu SEO cho website bán hàng Sunkissed cần được thực hiện ngay từ giai đoạn phát triển. Điều này bao gồm việc cấu trúc URL thân thiện, tối ưu thẻ tiêu đề và mô tả, sử dụng thẻ heading (H1, H2, H3) một cách hợp lý, và đảm bảo tốc độ tải trang nhanh. Nội dung là vua trong SEO, do đó, việc xây dựng một trang blog cung cấp các thông tin giá trị liên quan đến sức khỏe, dinh dưỡng, và các công thức nước uống là một chiến lược quan trọng. Các bài viết này không chỉ giúp thu hút lưu lượng truy cập tự nhiên từ các từ khóa dài mà còn khẳng định Sunkissed là một chuyên gia trong lĩnh vực đồ uống dinh dưỡng. Song song với SEO, các hoạt động marketing online cho sản phẩm nước uống cũng cần được đẩy mạnh. Điều này có thể bao gồm quảng cáo trả phí trên Google và mạng xã hội, email marketing để chăm sóc khách hàng cũ, và xây dựng cộng đồng trên các nền tảng như Facebook và Instagram. Việc tích hợp các nút chia sẻ mạng xã hội và mục nhận xét của khách hàng ngay trên trang sản phẩm cũng là một cách hiệu quả để tăng tương tác và lan tỏa thương hiệu.

5.1. Xây dựng nội dung blog cho website bán liệu trình detox

Một website bán liệu trình detox như Sunkissed có tiềm năng rất lớn để phát triển nội dung hữu ích. Thay vì chỉ tập trung vào bán hàng, website nên có một chuyên mục blog với các chủ đề như "Lợi ích của việc thải độc cơ thể", "5 công thức nước ép giúp giảm cân", hay "Cách lựa chọn liệu trình detox phù hợp". Những nội dung này đáp ứng đúng nhu cầu tìm kiếm thông tin của khách hàng mục tiêu. Việc lồng ghép khéo léo các từ khóa liên quan và các liên kết nội bộ trỏ về trang sản phẩm sẽ giúp cải thiện thứ hạng SEO một cách bền vững và tăng tỷ lệ chuyển đổi.

5.2. Đánh giá và thu thập phản hồi của khách hàng trực tuyến

Phản hồi của khách hàng là một tài sản vô giá. Chức năng đánh giá (review) sản phẩm được tích hợp trên website Sunkissed không chỉ giúp tăng cường uy tín mà còn là một nguồn nội dung do người dùng tạo ra (UGC) cực kỳ tốt cho SEO. Theo mô tả trong đồ án, hệ thống review được thiết kế chi tiết, cho phép người dùng đánh giá theo số sao, viết bình luận và thậm chí lọc các đánh giá. Những đánh giá tích cực hoạt động như một bằng chứng xã hội, thúc đẩy khách hàng mới ra quyết định mua hàng. Đồng thời, việc thu thập và phản hồi các bình luận thể hiện sự quan tâm của thương hiệu đến chăm sóc khách hàng trực tuyến.

VI. Kết luận hướng phát triển website TMĐT Sunkissed

Đồ án Xây dựng website thương mại điện tử cho cửa hàng nước uống dinh dưỡng Sunkissed đã hoàn thành các mục tiêu đề ra, tạo ra một sản phẩm front-end hoàn chỉnh, thẩm mỹ và có tính ứng dụng cao. Qua quá trình thực hiện, nhóm đã áp dụng thành công các kiến thức về HTML, CSS, Javascript, và các nguyên tắc thiết kế UI/UX vào một dự án thực tế. Kết quả là một website không chỉ đáp ứng các yêu cầu chức năng của một trang TMĐT mà còn thể hiện được bản sắc riêng của thương hiệu Sunkissed. Tuy nhiên, như trong phần kết luận của tài liệu gốc đã nêu, sản phẩm hiện tại vẫn còn những hạn chế và tiềm năng để phát triển thêm. Việc chưa tích hợp back-end là hạn chế lớn nhất, khiến các chức năng như quản lý đơn hàng, thanh toán và quản lý người dùng chưa thể hoạt động một cách tự động. Đây chính là hướng phát triển quan trọng nhất trong tương lai. Việc hoàn thiện hệ thống back-end sẽ biến website từ một giao diện tĩnh thành một nền tảng website bán hàng online toàn diện, sẵn sàng cho việc vận hành kinh doanh thực tế. Ngoài ra, việc liên tục cập nhật công nghệ, bổ sung các tính năng mới và tối ưu hóa SEO sẽ là những công việc cần thiết để website luôn duy trì được lợi thế cạnh tranh.

6.1. Đánh giá kết quả đạt được của website thương mại điện tử

Sản phẩm cuối cùng của đồ án là một website front-end chuyên nghiệp, có giao diện thu hút và trải nghiệm người dùng mượt mà. Nhóm đã thành công trong việc cải tiến source code mẫu, tạo ra các layout và hiệu ứng độc đáo, đặc biệt ở trang chủ, trang chi tiết sản phẩm và trang thanh toán. Việc thiết kế responsive đảm bảo website hoạt động tốt trên nhiều thiết bị. Đây là một nền tảng vững chắc, sẵn sàng cho việc tích hợp hệ thống back-end và các giải pháp e-commerce cho ngành đồ uống trong giai đoạn tiếp theo.

6.2. Đề xuất hướng phát triển hệ thống trong tương lai

Dựa trên phần kết luận của đồ án, hướng phát triển trong tương lai rất rõ ràng. Ưu tiên hàng đầu là xây dựng và kết nối back-end để hoàn thiện các chức năng động của website. Tiếp theo, cần tích hợp các công cụ phân tích (Google Analytics) để theo dõi hành vi người dùng và tối ưu hóa tỷ lệ chuyển đổi. Về mặt tính năng, có thể phát triển thêm chức năng cá nhân hóa sản phẩm, chương trình khách hàng thân thiết tích điểm, hoặc tính năng đăng ký nhận hàng định kỳ (subscription). Về lâu dài, việc nghiên cứu và áp dụng các công nghệ mới như AI để gợi ý sản phẩm sẽ giúp nâng cao trải nghiệm khách hàng và tăng doanh thu cho Sunkissed.

Nội dung chính

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

Trong bối cảnh chuyển dịch số của lĩnh vực bán lẻ, việc thiết lập website thương mại điện tử là phương thức tất yếu để các doanh nghiệp tiếp cận thị trường trực tuyến, củng cố nhận diện thương hiệu và phục vụ thói quen mua sắm hiện đại. Báo cáo đồ án môn học "Phát triển ứng dụng thương mại điện tử" tại Trường Công nghệ và Thiết kế thuộc Đại học Kinh tế Thành phố Hồ Chí Minh (UEH) của nhóm sinh viên khóa DH48EEC01 tập trung vào phân khúc bán lẻ thức uống đóng hộp với đề tài: "Xây dựng website thương mại điện tử cho cửa hàng nước uống dinh dưỡng - Sunkissed". Dự án giải quyết yêu cầu xây dựng giao diện bán lẻ trực tuyến chuyên biệt cho mặt hàng nước giải khát dinh dưỡng, hỗ trợ doanh nghiệp quảng bá sản phẩm, nâng cao trải nghiệm mua sắm và tối ưu hóa quy trình tương tác khách hàng.

Tác giả xác định năm mục tiêu nghiên cứu và triển khai cụ thể:

1. Phát triển giao diện thân thiện, đảm bảo khả năng tương thích và hiển thị đáp ứng (responsive) trên nhiều thiết bị như máy tính, điện thoại thông minh và máy tính bảng.
2. Tối ưu hóa trải nghiệm người dùng (UI/UX) thông qua việc tái cấu trúc giao diện và quy trình thao tác đơn giản, thuận tiện.
3. Thiết lập hệ thống lọc và tìm kiếm thông minh, hỗ trợ khách hàng tra cứu sản phẩm chính xác và nhanh chóng.
4. Tích hợp giao diện lựa chọn phương thức thanh toán đa dạng, hiện đại và linh hoạt.
5. Cung cấp quy trình chọn lựa dịch vụ giao hàng thuận tiện, đáp ứng nhu cầu thực tế của người dùng.

Đối tượng nghiên cứu của đồ án là hành vi tương tác của khách hàng trên nền tảng thương mại điện tử, bao gồm trải nghiệm trang đích (landing page), tra cứu thông tin chi tiết sản phẩm, lọc danh mục sản phẩm, quản lý giỏ hàng, tiến hành quy trình thanh toán, theo dõi lịch sử đơn hàng và quản trị tài khoản cá nhân.

Về phạm vi nghiên cứu, đồ án giới hạn ở việc phát triển giao diện phía người dùng (front-end) cho website thương mại điện tử, chưa triển khai hệ thống xử lý phía máy chủ (back-end). Sản phẩm được thiết kế trên công cụ Figma, lập trình hoàn thiện bằng các công nghệ web cơ bản và xuất bản (public) trực tiếp lên nền tảng lưu trữ mã nguồn GitHub kèm tên miền GitHub Pages.

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

Đồ án vận dụng quy trình thiết kế và phát triển giao diện web tĩnh hướng tới trải nghiệm người dùng, kết hợp phương pháp phân tích đối chuẩn (benchmarking) từ các hệ thống thương mại điện tử thực tế. Cơ sở kỹ thuật của đồ án dựa trên bộ khung mã nguồn mẫu mã nguồn mở Evara-ecommerce kết hợp cùng các nghiên cứu trường hợp (case study) về thiết kế giao diện từ ba website:

• Juicy Juice: Tham khảo giải pháp xây dựng trang chủ dạng trình diễn chuyển động, hiệu ứng phần tử tự động xuất hiện và di chuyển linh hoạt theo hành vi cuộn chuột của người dùng.
• OLIPOP (Healthy Prebiotic Soda): Mô hình chuẩn cho trang chi tiết sản phẩm nước giải khát đóng lon với bố cục dạng lưới (grid), hệ thống hiển thị bảng dinh dưỡng, khu vực đánh giá sản phẩm và cấu trúc tài khoản người dùng phân chia theo các tab chức năng.
• Retrodx Shop: Mô hình tham khảo cấu trúc trang thanh toán hai cột theo chuẩn thương mại điện tử Việt Nam, trang liên hệ tích hợp bản đồ nhúng và trang giới thiệu thành viên.

Phương pháp nghiên cứu và thực hiện bao gồm việc phân tích cấu trúc mã nguồn có sẵn, bóc tách các thành phần HTML/CSS không phù hợp với ngành hàng nước đóng lon, phác thảo lại hệ thống màn hình trên phần mềm Figma, sau đó tái lập trình toàn bộ giao diện bằng các ngôn ngữ web tiêu chuẩn:

• HTML5: Định hình cấu trúc ngữ nghĩa, thẻ canvas cho hiệu ứng đồ họa, nhúng khung bản đồ thông qua iframe và các đường dẫn vector SVG.
• CSS3: Xây dựng hệ thống biến màu sắc, flexbox, CSS Grid, media queries cho thiết kế đáp ứng (responsive), và hiệu ứng hoạt họa @keyframes.
• JavaScript (kết hợp thư viện hỗ trợ): Lập trình tương tác hướng sự kiện trên DOM, thuật toán chuyển động hạt trên thẻ canvas, lắng nghe sự kiện cuộn trang (scroll), thao tác mảng dữ liệu nội bộ (cho đánh giá sản phẩm) và plugin jQuery scrollie hỗ trợ chuyển đổi màu sắc giao diện theo từng phân đoạn.

Nguồn dữ liệu của đồ án bao gồm hệ thống bài giảng môn Phát triển ứng dụng Thương mại điện tử của giảng viên hướng dẫn Nguyễn Mạnh Tuấn, tài liệu tham khảo đề tài thiết kế website Retrodx của tác giả Nguyễn Phương Thảo, cùng kho dữ liệu mã nguồn từ cộng đồng phát triển mã nguồn mở (GitHub, CodePen).

Thiết kế và triển khai hệ thống

Hệ sinh thái giao diện của website Sunkissed được cấu trúc thành hệ thống 11 tệp tin HTML độc lập đại diện cho các phân hệ nghiệp vụ, tương ứng với bản vẽ thiết kế trên Figma sử dụng tông màu chủ đạo vàng đào (Peach Puff #FFE5B4), kết hợp hệ thống kiểu chữ Lexend (phông chính) và Raleway (phông phụ).

Trang giao diện	Tệp tin mã nguồn	Chức năng kỹ thuật chính đã triển khai
Trang chủ	index.html	Hiệu ứng tuyết rơi bằng Canvas, hiệu ứng cuộn tương đối cho lon nước Hero, giới thiệu thương hiệu tương tác theo ngưỡng màn hình 2/3, tab phân loại danh mục, accordion FAQ, con trỏ chuột giọt nước.
Cửa hàng	shop.html	Bộ lọc sản phẩm 5 tiêu chí (danh mục, giảm giá, trạng thái, khoảng giá, ngày sản xuất), bộ sắp xếp 3 tiêu chí, lưới 12 sản phẩm kèm tương tác phóng to ảnh (zoom) và tooltip 4 hành động nhanh.
Chi tiết sản phẩm	details_HuongCam.html, details_HuongDua.html	Zoom ảnh sản phẩm chính, chọn biến thể dung tích (330ml và 550ml), bảng giá trị dinh dưỡng, tab sản phẩm tương tự/mua kèm, popup đánh giá và phân trang bình luận bằng mảng JavaScript.
Giỏ hàng	cart.html	Hiển thị danh sách mặt hàng, tính năng tăng giảm số lượng, form tính phí vận chuyển theo khu vực, trường áp dụng mã ưu đãi và bảng tổng kết chi phí thanh toán.
Danh sách yêu thích	wishlist.html	Lưu trữ sản phẩm quan tâm, bổ sung nút chuyển nhanh vào giỏ hàng, hiển thị giá so sánh gốc - giảm và tương thích giao diện di động.
Thanh toán	checkout.html	Bố cục 2 cột song song (thông tin nhận hàng - xác nhận đơn hàng), form địa chỉ chi tiết, danh sách gợi ý sản phẩm mua kèm, tích hợp giao diện chọn 5 phương thức thanh toán.
Quản lý tài khoản	account.html	Bố cục tab chuyển đổi ngang/dọc, tích hợp hồ sơ cá nhân và địa chỉ, lịch sử đơn hàng kèm bộ lọc và hình ảnh, form đổi mật khẩu, menu ẩn tối ưu hóa cho điện thoại.
Xác thực người dùng	login-register.html	Giao diện đăng nhập/đăng ký với hiệu ứng tiêu đề Giáng sinh chạy ngang màn hình (@keyframes), xử lý trạng thái chọn (active) bằng viền xanh lá và nút nhấn đỏ bo góc.
Về chúng tôi	aboutus.html	Cấu trúc 3 cột trình diễn sản phẩm, hiệu ứng đổi ảnh lon tự động sau mỗi 2000ms bằng hàm setInterval, danh sách 6 thành viên kèm hiệu ứng hover.
Bài viết	blog.html	Trình bày bài viết kiến thức dinh dưỡng (Vitamin C), khung danh sách 5 bình luận và biểu mẫu gửi bình luận người dùng.
Liên hệ	lienhe.html	Các khối thông tin đường dây nóng, vị trí, giờ hoạt động và khung nhúng Google Maps kích thước 600x450px với thuộc tính loading="lazy".

Về mặt công nghệ tương tác, đồ án đã triển khai một số thuật toán và kỹ thuật xử lý DOM cụ thể:

• Hiệu ứng tuyết rơi tại Hero section: Khởi tạo lớp đối tượng Particle chứa các thuộc tính kích thước, độ mờ, vận tốc rơi và vẽ trực tiếp trên ngữ cảnh 2D của Canvas thông qua vòng lặp đệ quy requestAnimationFrame. Kích thước canvas được đồng bộ tự động theo sự kiện resize của cửa sổ trình duyệt.
• Chuyển động động học của các lon sản phẩm: Lắng nghe sự kiện scroll, tính toán tọa độ khung chữ nhật bao ngoài của section (getBoundingClientRect()) so với chiều cao vùng nhìn (viewport). Nếu section hiển thị, hàm tính toán khoảng cách cuộn tương đối (relativeScroll) để gán lại thuộc tính transform. Khi rời khỏi vùng nhìn, trạng thái góc xoay và vị trí được lưu trữ vào dataset của phần tử để bảo toàn bố cục.
• Hiệu ứng con trỏ chuột đuôi giọt nước: Tạo mảng các phần tử HTML hình tròn, gắn dải màu theo biến mảng colors, sau đó cập nhật tọa độ tâm của từng hình tròn theo tọa độ chuột (coords.x, coords.y) với mức độ trễ tịnh tiến dần nhằm tạo chuyển động sóng mềm mại.

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

Chương 01: Tổng quan

Chương 01 xác lập tính cấp thiết của đề tài xuất phát từ sự bùng nổ của thị trường thương mại điện tử và nhu cầu tiêu thụ các sản phẩm nước uống có lợi cho sức khỏe. Nhóm nghiên cứu chỉ rõ các khoảng trống thực tế khi nhiều cửa hàng bán lẻ thức uống truyền thống chưa có cổng thông tin điện tử chuyên nghiệp để giới thiệu sản phẩm và tiếp nhận đơn hàng. Chương này định hình chi tiết năm mục tiêu phát triển hệ thống, làm rõ đối tượng nghiên cứu xoay quanh quy trình thao tác của khách hàng trên giao diện số, xác lập phương pháp sử dụng bộ ba ngôn ngữ HTML5, CSS3, JavaScript thuần, đồng thời giới hạn phạm vi đề tài trong việc hoàn thiện thiết kế giao diện front-end tĩnh và xuất bản thông qua dịch vụ GitHub Pages.

Chương 02: Mô tả hệ thống/chương trình

Chương 02 thực hiện phân tích chi tiết hiện trạng cấu trúc giao diện của bộ mã nguồn mẫu (template Evara). Tác giả rà soát từng thành phần giao diện, chỉ ra các điểm bất cập đối với ngành hàng đồ uống và đưa ra định hướng cải tiến cụ thể:

• Khu vực đầu trang và điều hướng: Đề xuất lược bỏ trang so sánh sản phẩm (Compare) do không cần thiết đối với mặt hàng nước giải khát đơn giản; thay thế liên kết đăng nhập thành trang quản lý tài khoản; bổ sung các trang thông tin thương hiệu, blog bài viết và biểu mẫu liên hệ.
• Trang chủ (Landing Page): Đánh giá khu vực Hero cũ thiếu điểm nhấn; đề xuất thay thế toàn bộ bằng banner động giới thiệu sản phẩm lon nước đặc trưng; thay thế khối danh mục phổ biến thành phân đoạn kể câu chuyện thương hiệu (Brand Story) có tương tác hình ảnh; tinh chỉnh khối khuyến mãi (Deals) gắn liền với bộ đếm thời gian thực; tích hợp bản tin đăng ký nhận ưu đãi vào khối giải đáp thắc mắc (FAQ).
• Trang danh mục cửa hàng: Phát hiện mã nguồn mẫu có hiển thị nhãn trạng thái lọc nhưng hoàn toàn thiếu bộ công cụ lọc dữ liệu thực tế và các nút phân trang không có khả năng chuyển tiếp; đề xuất xây dựng mới bộ lọc đa tiêu chí và bộ sắp xếp sản phẩm.
• Trang chi tiết mặt hàng: Phân tích sự không tương thích của mã nguồn cũ vốn dành cho mặt hàng thời trang (hiển thị góc chụp áo quần, kích thước may mặc); đề xuất chuyển đổi hệ thống biến thể thành các mức dung tích lon nước (330ml và 550ml), bổ sung bảng thông tin giá trị dinh dưỡng, mở rộng giao diện đánh giá với phân trang sao và đề xuất danh mục bán kèm.
• Trang giỏ hàng, thanh toán và tài khoản: Nhận diện việc thiếu chức năng tính toán chi phí vận chuyển trực tiếp, thiếu trường áp mã giảm giá; giao diện thanh toán chưa tương thích thói quen tiêu dùng nội địa; trang tài khoản phân mảnh dữ liệu. Đề xuất quy hoạch lại bố cục hai cột song song, bổ sung các cổng thanh toán phổ biến tại Việt Nam và quy chuẩn toàn bộ hệ thống biểu mẫu sang tiếng Việt.

Chương 03: Điều chỉnh, mở rộng và phát triển hệ thống/chương trình

Chương 03 là trọng tâm thực nghiệm của đồ án, mô tả toàn bộ quá trình biến đổi mã nguồn từ các bản phân tích đối chuẩn và thiết kế đồ họa sang mã lập trình cụ thể:

• Phân tích layout tham khảo: Trích xuất các ý tưởng thiết kế chuyển động từ Juicy Juice, hệ thống lưới hiển thị của OLIPOP và cấu trúc biểu mẫu chuẩn từ Retrodx Shop để hợp nhất vào mô hình Sunkissed.
• Thiết kế mẫu trên Figma: Xây dựng hệ thống UI hoàn chỉnh với hệ màu #FFE5B4, phân chia lưới bố cục cho Trang chủ, Chi tiết sản phẩm và Giỏ hàng.
• Lập trình cải tiến mã nguồn: Trình bày chi tiết các đoạn mã HTML, CSS và JavaScript tái cấu trúc:
  • Khu vực sunkissed_hero: Bổ sung canvas vẽ hiệu ứng tuyết rơi ngẫu nhiên nhiều lớp mờ - rõ và thuật toán cuộn chuột làm chuyển dịch 2 hàng lon sản phẩm quanh thông điệp khuyến mãi Giáng sinh giảm 15%.
  • Phân đoạn Giới thiệu thương hiệu: Lập trình hiệu ứng xuất hiện cho hai cánh tay cầm lon từ hai biên màn hình trượt vào giữa khi người dùng cuộn đến vị trí 2/3 trang.
  • Khu vực sản phẩm ưu đãi: Tái cấu trúc thành banner "Tam ca sức sống", kết hợp JavaScript điều khiển hiển thị tên và giá trị khuyến mãi.
  • Bộ lọc và lưới cửa hàng: Xây dựng cấu trúc HTML gồm 5 nhóm lọc (filter__group) và bộ sắp xếp dạng menu thả xuống (select). Lưới sản phẩm được thiết lập hiển thị đồng nhất 12 sản phẩm với hiệu ứng chuyển ảnh khi di chuột (hover transition 1.5 giây) và khối 4 nút thao tác nhanh căn giữa ảnh bằng thuộc tính absolute và transform.
  • Giao diện chi tiết sản phẩm: Tích hợp hiệu ứng phóng to ảnh chính, lập trình các tab chuyển đổi danh sách mặt hàng liên quan, bảng thành phần dinh dưỡng và hệ thống đánh giá khách hàng được lưu trữ dưới dạng mảng JavaScript (Array) kết hợp thuật toán phân trang dữ liệu tĩnh.
  • Quy trình giỏ hàng và thanh toán: Tái lập trình biểu mẫu áp dụng mã ưu đãi, bảng tính tổng chi phí (gồm giá tạm tính, phí giao hàng, khấu trừ mã giảm giá) và tái cấu trúc giao diện phương thức thanh toán dạng hộp chọn radio (radio-box) với 5 tùy chọn: Thanh toán khi nhận hàng (COD), Chuyển khoản trực tiếp (Direct Bank Transfer), Thẻ tín dụng (Credit Card), Quét mã QR và Ví điện tử MoMo.
  • Phân hệ quản lý tài khoản: Thiết lập cấu trúc giao diện tab chuyển đổi nội dung linh hoạt gồm Trung tâm tài khoản (họ tên, ngày sinh, địa chỉ), Đơn hàng của bạn (có kèm hình ảnh thu nhỏ và thanh lọc trạng thái đơn), Cập nhật thông tin và Đổi mật khẩu. Xây dựng bổ sung một menu điều hướng dạng thu gọn (ẩn/hiện) chuyên biệt cho thiết bị di động nhằm ngăn ngừa hiện tượng vỡ khung giao diện.
  • Phân hệ xác thực và các trang nội dung phụ trợ: Bổ sung chữ chạy Giáng sinh trên trang đăng nhập/đăng ký bằng cú pháp @keyframes; trang Về chúng tôi vận hành trình chiếu lon sản phẩm tự động sau mỗi 2 giây; trang Blog chứa bài viết chuyên đề Vitamin C kèm hệ thống gửi phản hồi; trang Liên hệ nhúng bản đồ Google Maps chế độ tải chậm.

Chương 04: Kết luận và hướng phát triển

Chương 04 tổng kết quá trình thực hiện đồ án, đánh giá mức độ hoàn thành so với các mục tiêu môn học ban đầu, phân tích các giá trị tích lũy được trong kỹ năng lập trình giao diện, thiết kế UI/UX và phương pháp làm việc nhóm. Đồng thời, tác giả thẳng thắn chỉ ra bốn nhóm hạn chế lớn về mặt kỹ thuật, thời gian và phạm vi triển khai, từ đó đề xuất các hướng mở rộng cho các chu kỳ phát triển phần mềm tiếp theo.

Chương 05: Phụ lục

Chương 05 lưu trữ hệ thống tài liệu tham khảo chính thức, đường dẫn tài liệu môn học và bảng danh mục các liên kết trực tuyến phục vụ kiểm chứng đồ án, bao gồm: kho mã nguồn template Evara, bản vẽ thiết kế trên hệ thống Figma, đường dẫn kho lưu trữ mã nguồn GitHub của nhóm (lekhoi77/sunkissedg5), đường dẫn trang web đã xuất bản công khai, liên kết phông chữ Google Fonts và nguồn các thuật toán hiệu ứng đồ họa.

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

Đồ án ghi nhận các kết quả cụ thể về mặt sản phẩm ứng dụng và dữ liệu cấu thành:

• Hoàn thành bộ mã nguồn front-end hoàn chỉnh của website thương mại điện tử Sunkissed với 11 tệp tin HTML chức năng, đã được xuất bản công khai trên dịch vụ lưu trữ GitHub Pages thông qua tài khoản quản trị dự án.
• Thiết lập hệ thống nhận diện thương hiệu số cho cửa hàng đồ uống gồm thiết kế Logo biểu trưng (hình và chữ), bộ ảnh mockup lon sản phẩm, hệ thống ảnh đại diện thương mại (commercial thumbnails) và thiết kế nguyên mẫu tương tác hoàn chỉnh trên Figma.
• Xây dựng thành công cơ chế lọc sản phẩm phía giao diện gồm 5 tiêu chí độc lập (loại sản phẩm, trạng thái giảm giá, tình trạng hàng, khoảng giá trị, ngày sản xuất) và bộ sắp xếp theo 3 tiêu chí (điểm đánh giá, giá cả, ngày phát hành) trên danh mục hiển thị 12 sản phẩm đóng lon.
• Thiết kế hệ thống đánh giá sản phẩm tương tác cục bộ bằng mảng dữ liệu JavaScript, mô phỏng đầy đủ thao tác xem số sao trung bình, lọc đánh giá theo số sao, mở biểu mẫu viết nhận xét dạng cửa sổ nổi (modal popup) và chuyển đổi trang nhận xét.
• Đóng góp thực tế của đồ án thể hiện ở việc chuyển đổi thành công một bộ mã nguồn thương mại điện tử chung chung (vốn tối ưu cho ngành thời trang may mặc) thành một giải pháp giao diện chuyên biệt hóa hoàn toàn cho ngành hàng nước uống dinh dưỡng. Quy trình này bao gồm việc cắt bỏ các tính năng không tương thích (như so sánh kích thước áo quần, thông số màu sắc may mặc), bổ sung các khối chức năng đặc thù (bảng giá trị dinh dưỡng, biến thể thể tích chất lỏng 330ml/550ml, thành phần hữu cơ) và bản địa hóa 100% ngôn ngữ giao diện cùng phương thức thanh toán phù hợp với người tiêu dùng Việt Nam.

Toàn bộ khối lượng công việc được phân định rõ ràng giữa sáu thành viên nghiên cứu với mức độ hoàn thành nhiệm vụ được nhóm tự đánh giá đạt 100%:

Thành viên thực hiện	Mã số sinh viên	Vai trò và phạm vi phụ trách chính
Võ Xuân Lê Khôi	31221026006	Trưởng nhóm; xác định mục tiêu, phương pháp; thiết kế mockup sản phẩm; thiết kế Figma và lập trình Trang chủ; thiết kế responsive Trang chủ và Cửa hàng; quản lý tiến độ, khởi tạo GitHub repo và xuất bản web.
Nguyễn La Thành Phát	31221023902	Lập trình và ghi chú mã nguồn trang Thanh toán, Liên hệ; thiết kế responsive di động trang Thanh toán, Liên hệ; định dạng báo cáo tổng kết.
Nguyễn Vĩnh Nghi	31221023821	Thiết kế Figma trang Chi tiết sản phẩm; thiết kế ảnh thumbnails; đề xuất và lập trình các trang Về chúng tôi, Blog; thiết kế responsive di động cho các trang phụ trách.
Nguyễn Hồ Hữu Khải	31221025163	Lập trình bổ sung giao diện và hiệu ứng trang Đăng nhập/Đăng ký và Tài khoản; đề xuất danh mục Đơn hàng; thiết kế responsive di động phân hệ tài khoản; kiểm soát lỗi mã nguồn tổng hợp khi commit.
Nguyễn Đình Quốc Bảo	31221020820	Thiết kế ảnh thương mại sản phẩm; lập trình hiệu ứng và bố cục trang Chi tiết sản phẩm và Cửa hàng; thiết kế responsive di động cho trang Chi tiết sản phẩm.
Trần Minh Nhật	31221020888	Thiết kế Logo hình và Logo chữ Sunkissed; thiết kế Figma trang Giỏ hàng; lập trình bố cục và hiệu ứng trang Giỏ hàng, Wishlist; thiết kế responsive di động cho Giỏ hàng và Wishlist.

Hạn chế và hướng phát triển

Dựa trên nội dung tự đánh giá trong văn bản đồ án, nhóm tác giả đã xác định bốn hạn chế cốt lõi trong quá trình triển khai:

1. Việc tùy biến trên một khung mã nguồn có sẵn (template Evara) tiêu tốn nhiều thời gian hơn dự kiến do các thành viên phải mất thời gian tìm hiểu, bóc tách cấu trúc mã nguồn cũ trước khi tiến hành viết mã mới.
2. Một số hiệu ứng chuyển động và tính năng đồ họa theo kế hoạch sơ khởi buộc phải cắt bỏ, không thể đưa vào sản phẩm cuối cùng do áp lực hạn chế về thời gian kiểm thử và chạy thử nghiệm (demo).
3. Do khối lượng trang giao diện và lượng dữ liệu chi tiết của toàn bộ website tương đối lớn, hệ thống vẫn tồn tại một số sai sót nhỏ trong việc hiển thị dữ liệu văn bản và liên kết nội bộ.
4. Hệ thống mới dừng lại ở việc mô phỏng giao diện người dùng front-end, chưa tiến hành kết nối cơ sở dữ liệu và tích hợp hệ thống quản trị back-end như kỳ vọng ban đầu của một ứng dụng thương mại điện tử hoàn chỉnh.

Các hướng phát triển tiếp theo được đề xuất bao gồm:

• Tiến hành tích hợp hoàn chỉnh hệ thống xử lý phía máy chủ (back-end), kết nối cơ sở dữ liệu quan hệ hoặc phi quan hệ để quản trị danh mục sản phẩm, phiên đăng nhập của người dùng và lưu trữ dữ liệu đơn hàng thực tế.
• Tiếp tục nghiên cứu sâu các tiêu chuẩn thiết kế giao diện web hiện đại nhằm hoàn thiện quy chuẩn UI/UX, tối ưu hóa hơn nữa tính logic và độ tiện dụng của quy trình mua hàng.
• Rút kinh nghiệm trong việc phân bổ hạn độ thời gian giữa các giai đoạn dự án, đặc biệt tập trung tối ưu hóa quy trình tinh chỉnh mã nguồn và thử nghiệm hiệu ứng ngay từ giai đoạn đầu.

Giá trị tham khảo

Báo cáo đồ án là tài liệu tham khảo thực tiễn hữu ích dành cho sinh viên thuộc các chuyên ngành Công nghệ thông tin kinh doanh, Thương mại điện tử, Hệ thống thông tin quản lý hoặc Thiết kế web đang chuẩn bị thực hiện đồ án môn học hoặc khóa luận tốt nghiệp hướng ứng dụng.

Nội dung báo cáo cung cấp các giá trị tham khảo rõ nét tại các phần:

• Phương pháp luận phân tích và tái cấu trúc mã nguồn: Cung cấp giải pháp mẫu mực về việc bóc tách, đánh giá từng thành phần giao diện của một mẫu giao diện mã nguồn mở để điều chỉnh cho phù hợp với ngành hàng kinh doanh đặc thù.
• Quy trình tích hợp hiệu ứng thị giác: Cách thức vận dụng kết hợp giữa Canvas HTML5, CSS Keyframes và các sự kiện cuộn chuột trong JavaScript thuần để tăng cường trải nghiệm thị giác mà không làm phá vỡ cấu trúc hiển thị cơ bản của trang bán hàng.
• Bố cục responsive chuyên biệt: Giải pháp xử lý thanh điều hướng tab nhiều lớp trên màn hình kích thước nhỏ (mobile view) tại phân hệ Quản lý tài khoản thông qua cơ chế menu ẩn.

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

1. Đồ án sử dụng những công nghệ và thư viện kỹ thuật nào để xây dựng website Sunkissed?

Website được xây dựng dựa trên ba công nghệ nền tảng là HTML5, CSS3 và JavaScript thuần. Ngoài ra, nhóm sử dụng thư viện hiệu ứng rơi tự do Danieljoshua-786/Snow chạy trên thẻ HTML Canvas, plugin jQuery scrollie để kích hoạt sự kiện chuyển màu nền giao diện khi cuộn trang, bản đồ nhúng Google Maps iframe chế độ loading="lazy", cùng hai phông chữ trực tuyến từ Google Fonts là Lexend và Raleway.

2. Vì sao nhóm nghiên cứu quyết định loại bỏ trang So sánh (Compare) có sẵn trong template gốc?

Trong quá trình đánh giá hệ thống ở Chương 02, nhóm tác giả nhận thấy tính năng so sánh chi tiết các thông số kỹ thuật (vốn thiết kế cho đồ điện tử hoặc thời trang may mặc như chất liệu, bảng size) không thực sự cần thiết và không phù hợp với thói quen mua sắm mặt hàng nước giải khát dinh dưỡng đóng lon đóng gói tiêu chuẩn, do đó nhóm quyết định loại bỏ để tinh giản luồng trải nghiệm người dùng.

3. Hệ thống lọc và sắp xếp sản phẩm trên trang Cửa hàng (shop.html) được thiết kế theo những tiêu chí cụ thể nào?

Bộ lọc sản phẩm được chia thành năm nhóm tiêu chí: phân loại sản phẩm (danh mục), sản phẩm giảm giá, trạng thái kho hàng, khoảng giá bán và ngày sản xuất. Trong khi đó, bộ sắp xếp sản phẩm cung cấp ba tùy chọn sắp xếp cho người dùng gồm: sắp xếp theo điểm đánh giá của khách hàng, theo mức giá tiền và theo ngày sản xuất.

4. Giao diện trang Chi tiết sản phẩm được tùy biến như thế nào để phục vụ đặc thù ngành hàng thức uống dinh dưỡng?

Thay vì giữ lại các tùy chọn thời trang của mã nguồn cũ, nhóm đã thiết kế lại khu vực biến thể thành tùy chọn dung tích lon nước (330ml và 550ml), bổ sung bảng biểu chuyên dụng hiển thị hàm lượng thành phần dinh dưỡng của thức uống, tích hợp hiệu ứng phóng to ảnh lon nước khi rê chuột, đồng thời bố trí các khối sản phẩm cùng hương vị và danh mục sản phẩm khuyến mãi mua kèm ngay bên cạnh sản phẩm chính.

5. Hạn chế kỹ thuật lớn nhất của đồ án được tác giả thừa nhận là gì?

Hạn chế lớn nhất được nêu rõ trong phần tổng kết là đồ án chưa thể thực hiện tích hợp hệ thống xử lý phía máy chủ (back-end) và cơ sở dữ liệu thực tế theo đúng kế hoạch ban đầu, khiến toàn bộ các chức năng lọc, tính toán đơn hàng và quản lý tài khoản mới chỉ dừng lại ở mức độ tương tác và mô phỏng giao diện phía người dùng (front-end).

Kết luận

Báo cáo đồ án "Xây dựng website thương mại điện tử cho cửa hàng nước uống dinh dưỡng - Sunkissed" của nhóm sinh viên Trường Công nghệ và Thiết kế (UEH) đã hoàn thành trọn vẹn mục tiêu nghiên cứu và phát triển giao diện bán hàng front-end đa thiết bị. Dự án thể hiện quy trình bài bản từ việc khảo sát đối chuẩn, phác thảo thiết kế trên Figma đến việc tái lập trình chuyên sâu mã nguồn HTML/CSS/JavaScript để thích ứng hoàn toàn với ngành hàng thức uống dinh dưỡng đóng lon. Dù vẫn còn hạn chế khi chưa tích hợp hệ thống máy chủ và cơ sở dữ liệu phía sau, tài liệu đồ án mang lại giá trị tham khảo kỹ thuật rõ ràng cho sinh viên khối ngành công nghệ và thương mại điện tử trong việc xây dựng và tối ưu hóa trải nghiệm giao diện người dùng thực tế.

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

BỘ GIÁO DỤC VÀ ĐÀO TẠO ĐẠI HỌC KINH TẾ THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG CÔNG NGHỆ VÀ THIẾT KẾ KHOA CÔNG NGHỆ THÔNG TIN KINH DOANH ĐỒ ÁN CUỐI KỲ ĐỀ TÀI: XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ CHO CỬA HÀNG NƯỚC UỐNG DINH DƯỠNG - SUNKISSED MÔN HỌC: PHÁT TRIỂN ỨNG DỤNG THƯƠNG MẠI ĐIỆN TỬ Giáo viên hướng dẫn: NGUYỄN MẠNH TUẤN Mã lớp học phần: 24C1INF50902703 Khóa – Lớp: DH48EEC01 Nhóm: 05 Thành phố Hồ Chí Minh, tháng 12, năm 2024 Phát triển ứng dụng thương mại điện tử - Nhóm 05 MỤC LỤC DANH MỤC HÌNH ẢNH.4 DANH MỤC BẢNG BIỂU.9 BẢNG PHÂN CÔNG ĐÁNH GIÁ THÀNH VIÊN.13 CHƯƠNG 01: TỔNG QUAN. Lý do chọn đề tài. Mục tiêu nghiên cứu. Đối tượng nghiên cứu.

Phương pháp thực hiện. Phạm vi nghiên cứu.15 CHƯƠNG 02: MÔ TẢ HỆ THỐNG/CHƯƠNG TRÌNH. Thanh điều hướng - Navigation. Danh mục sản phẩm phổ biến.

Danh mục sản phẩm. Sản phẩm mới về. Showcase sản phẩm. Trang cửa hàng.

Danh sách sản phẩm. Chi tiết sản phẩm. Chức năng hiển thị mô tả thông tin chi tiết sản phẩm. Bảng thuộc tính sản phẩm.

Mục review sản phẩm.30 1 Phát triển ứng dụng thương mại điện tử - Nhóm 05 2. Mục đề xuất sản phẩm khác. Danh sách sản phẩm có trong giỏ hàng. Chức năng cho giỏ hàng.

Danh mục yêu thích – Wishlist. Thông tin giao hàng. Thanh toán và vận chuyển. Phương thức thanh toán.

Trang so sánh. Tên, giá, mô tả, màu sắc, trạng thái sản phẩm, cân nặng, kích thước mua và xóa 41 2. Quản lý tài khoản (accounts. Đăng nhập, đăng ký (login-register.

Giới thiệu thương hiệu. Thông tin liên hệ.48 CHƯƠNG 03: ĐIỀU CHỈNH, MỞ RỘNG VÀ PHÁT TRIỂN HỆ THỐNG/CHƯƠNG TRÌNH. Phân tích các layout có sẵn. Thiết kế chương trình trên Figma.

Mô tả về layout. Điều chỉnh trên Source Code. Trang cửa hàng. Chi tiết sản phẩm.109 2 Phát triển ứng dụng thương mại điện tử - Nhóm 05 3.

Về chúng tôi.203 CHƯƠNG 04: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN.225 CHƯƠNG 05: PHỤ LỤC.227 TÀI LIỆU THAM KHẢO.228 3 Phát triển ứng dụng thương mại điện tử - Nhóm 05 DANH MỤC HÌNH ẢNH Hình 1. Html thanh điều hướng - Navigation. Html của Hero. Html của Danh mục sản phẩm phổ biến.

Html Danh mục sản phẩm. Html của Deals. Html của Sản phẩm mới về. Html của Showcase sản phẩm.

Html của Newsletter. Html của Footer. Html của Breadcrumbs. Html của Danh sách sản phẩm.

Source code tham khảo mục hình ảnh. Source code tham khảo mục mô tả. Mục tham khảo các biến thể sản phẩm. Mục tham khảo số lượng, thêm vào giỏ, yêu thích và sản phẩm trong kho.

Tham khảo bảng thuộc tính sản phẩm. Mục tham khảo review sản phẩm. Source code tham khảo mục đề xuất sản phẩm khác. Source code khung sản phẩm của trang Cart.

Source code của các chức năng cho Giỏ hàng. Source code khung sản phẩm của trang Wishlist. Source code Tổng quan trang thanh toán. Source code Thông tin giao hàng.

Source code Xác nhận đơn hàng. Source code Thanh toán và vận chuyển. Source code Phương thức thanh toán. Source code Trang so sánh.

Source code Tên, giá, mô tả, màu sắc, trạng thái sản phẩm, cân nặng, kích thước mua và xóa. Source code Newsletter. Source code tổng quan trang tài khoản. Source code Hồ sơ người dùng.

Source code tổng quan trang tài khoản. Source code cập nhật thông tin người dùng. Source code địa chỉ giao hàng. Source code đổi mật khẩu.

Source code html của trang gốc.45 4 Phát triển ứng dụng thương mại điện tử - Nhóm 05 Hình 38. Landing page Juice Juice. Landing page Juice Juice. Trang landing page OLIPOP Healthy Prebiotic Soda.

Trang landing page OLIPOP Healthy Prebiotic Soda. Landing page Retrodx. Landing page Retrodx. Landing page Retrodx.

Trang chủ Figma. Chi tiết sản phẩm Figma. Giỏ hàng Figma. Css các phần tử trên web.

Định dạng chung cho chiều cao của header. Màu chung cho các phần tử.