Giới thiệu dự án

Thị trường nước uống dinh dưỡng và thực phẩm chức năng đóng lon (Ready-To-Drink - RTD) tại Việt Nam và Đông Nam Á đang chứng kiến mức tăng trưởng kép hàng năm (CAGR) đạt 8.4% trong giai đoạn 2023–2028 theo báo cáo của Statista. Sự chuyển dịch mạnh mẽ từ tiêu dùng truyền thống sang mô hình Direct-to-Consumer (D2C) đòi hỏi các thương hiệu F&B phải sở hữu nền tảng thương mại điện tử chuyên biệt, tối ưu hóa giao diện và trải nghiệm người dùng (UI/UX) nhằm gia tăng tỷ lệ chuyển đổi (Conversion Rate).

Đồ á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 thực hiện bởi nhóm nghiên cứu tại Khoa Công nghệ Thông tin Kinh doanh, Trường Công nghệ và Thiết kế – Đại học Kinh tế TP. Hồ Chí Minh (UEH). Dự án tập trung giải quyết bài toán cốt lõi: các nền tảng thương mại điện tử hiện hành thường rập khuôn theo mô hình bán lẻ đa ngành, thiếu đi tính tương tác đa giác quan (interactive micro-animations), chưa truyền tải được tính tươi mới của sản phẩm dinh dưỡng, và quy trình thanh toán còn phức tạp khiến tỷ lệ bỏ giỏ hàng (Cart Abandonment Rate) vượt mức 70%.

                        +-------------------------------------------------------+
                        |           SUNKISSED E-COMMERCE FRONTEND               |
                        +-------------------------------------------------------+
                                   |                                 |
           +-----------------------+---------+     +-----------------+-----------------------+
           |       INTERACTIVE UI ENGINE     |     |       COMMERCE & USER LOGIC             |
           | - HTML5 Canvas Particle System  |     | - Client-side Filtering & Multi-sort    |
           | - Scroll-driven DOM Transforms  |     | - Dynamic Cart & Shipping Calculation   |
           | - Fluid Cursor Physics Engine   |     | - Tabbed Profile & Order History State  |
           +---------------------------------+     +-----------------------------------------+
                                   \                                 /
                                    \                               /
                        +-------------------------------------------------------+
                        |      DEPLOYMENT & INTEGRATION (GitHub Pages / Maps)   |
                        +-------------------------------------------------------+

Mục tiêu dự án

  1. Thiết kế UI/UX độc bản: Xây dựng bộ nhận diện kỹ thuật số với gam màu chủ đạo Peach Puff (#FFE5B4), font chữ kép Lexend & Raleway, áp dụng kỹ thuật tương tác vi mô (micro-interactions) để giảm tỷ lệ thoát trang (Bounce Rate) xuống dưới 35%.
  2. Tối ưu hóa luồng trải nghiệm khách hàng (Customer Journey): Xây dựng hệ sinh thái trang hoàn chỉnh gồm Trang chủ (index.html), Cửa hàng (shop.html), Chi tiết sản phẩm (details_*.html), Giỏ hàng (cart.html), Thanh toán (checkout.html), Quản lý tài khoản (account.html), Wishlist, Blog và Liên hệ.
  3. Phát triển bộ lọc và sắp xếp động phía Client: Cho phép lọc sản phẩm theo danh mục, mức giá, tình trạng kho và sắp xếp đa tiêu chí (giá, đánh giá sao, ngày sản xuất) với thời gian phản hồi tức thì (< 50ms).
  4. Chuẩn hóa quy trình đặt hàng và thanh toán đa kênh: Tích hợp các phương thức thanh toán đặc thù của thị trường Việt Nam (COD, Chuyển khoản ngân hàng, Quét mã VietQR, Ví điện tử MoMo).
  5. Đảm bảo tính tương thích đa nền tảng (Cross-platform & Responsive): Tương thích hoàn hảo trên các độ phân giải màn hình từ Desktop (>= 1200px), Tablet (768px - 1024px) đến Mobile (< 768px).

Phạm vi và giới hạn

  • Phạm vi: Nghiên cứu, thiết kế giao diện trên Figma, tái cấu trúc toàn diện mã nguồn mẫu Evara, lập trình Front-end với HTML5, CSS3, JavaScript ES6+, triển khai hiệu ứng Canvas/Scroll, và phát hành trực tuyến thông qua GitHub Pages.
  • Giới hạn: Hệ thống tập trung tối ưu hóa kiến trúc Client-side Front-end; các luồng dữ liệu đơn hàng, đánh giá và trạng thái đăng nhập được mô phỏng thông qua mảng cấu trúc đối tượng JavaScript và LocalStorage thay vì tích hợp cơ sở dữ liệu Back-end tập trung.

Phân tích và thiết kế giải pháp

Phân tích hiện trạng

Khảo sát các nền tảng thương mại điện tử hiện hữu trong ngành hàng F&B giúp xác định các khoảng trống công nghệ và trải nghiệm:

Nền tảng phân tích Điểm mạnh Hạn chế / Điểm yếu Khoảng trống công nghệ khắc phục
Evara Template (Mã nguồn gốc) Cấu trúc đầy đủ các trang cơ bản, bố cục thương mại điện tử chuẩn. Giao diện cứng nhắc, dư thừa tính năng Compare không phù hợp ngành nước giải khát, thiếu bộ lọc động, chưa tối ưu Mobile. Tái cấu trúc toàn diện CSS/JS, bổ sung bộ lọc đa tầng, bảng dinh dưỡng và thiết kế lại luồng Checkout.
Juicy Juice Landing page hoạt họa ấn tượng, visual thu hút, chuyển động mượt mà khi cuộn trang. Thiếu các trang chức năng bán hàng sâu như Giỏ hàng đa cấp, Quản lý tài khoản, Đánh giá sản phẩm. Ứng dụng hiệu ứng Scroll-driven DOM Transformation và Canvas Particle vào khung thương mại điện tử đầy đủ.
OLIPOP Trang chi tiết sản phẩm chuẩn D2C, bố cục Grid linh hoạt, hiển thị bảng dinh dưỡng trực quan. Chưa tối ưu hóa cho các phương thức thanh toán bản địa (VietQR, MoMo) và hệ thống tài khoản người dùng Việt Nam. Tiếp thu layout Grid sản phẩm và Nutrition Facts; bản địa hóa toàn bộ luồng thanh toán và dữ liệu hồ sơ.
Retrodx Bố cục trang Thanh toán, Liên hệ và Giới thiệu rõ ràng, có tích hợp Google Maps API. Thiết kế thiên hướng đồ công nghệ, phong cách màu sắc tối, không phù hợp với cảm xúc tươi mát của sản phẩm nước uống. Kế thừa cấu trúc chia cột biểu mẫu, bản đồ nhúng và tích hợp vào hệ thống nhận diện tươi sáng #FFE5B4.

Phân loại yêu cầu theo mô hình MoSCoW

  • Must-have (Bắt buộc): Bộ lọc sản phẩm đa tiêu chí, Trang chi tiết sản phẩm với biến thể dung tích (330ml / 550ml), Bảng hàm lượng dinh dưỡng, Giỏ hàng động tính phí vận chuyển và mã giảm giá, Module thanh toán 5 phương thức.
  • Should-have (Nên có): Hiệu ứng tuyết rơi Canvas (HTML5 Canvas API), Hiệu ứng con trỏ chuột giọt nước (Cursor Tail), Tương tác scroll di chuyển lon nước 3D tại Hero section, Bản đồ nhúng Google Maps iframe.
  • Could-have (Có thể có): Hệ thống bình luận đánh giá động phân trang và lọc theo số sao bằng JavaScript array, Form thu thập câu hỏi FAQ pop-up.
  • Won't-have (Tạm hoãn): Module so sánh sản phẩm (Compare - loại bỏ do không phù hợp với đặc thù tiêu dùng nước giải khát), Cổng thanh toán trực tuyến xử lý giao dịch thời gian thực qua Gateway Back-end.

Thiết kế hệ thống

Kiến trúc tổng thể và Component Stack

Kiến trúc Front-end được module hóa thành các tầng xử lý độc lập:

+-------------------------------------------------------------------------------+
|                            PRESENTATION LAYER                                 |
|   HTML5 Semantic Structure | CSS3 Custom Properties (Variables) | Flexbox/Grid|
+-------------------------------------------------------------------------------+
                                       |
+-------------------------------------------------------------------------------+
|                        INTERACTIVE & ANIMATION ENGINE                         |
|   requestAnimationFrame Canvas Engine | Scrollie.js / Viewport Listeners      |
|   Cursor Coordinate Physics Array     | Keyframe State Management             |
+-------------------------------------------------------------------------------+
                                       |
+-------------------------------------------------------------------------------+
|                          CLIENT DATA & STATE LAYER                            |
|   Array-based Product/Review Store    | DOM Data-attributes & Local Datasets  |
|   Google Maps Embed API               | Responsive Media Queries Engine       |
+-------------------------------------------------------------------------------+

Ngăn xếp công nghệ (Technology Stack)

  • Cốt lõi Front-end: HTML5 Semantic Elements, CSS3 (CSS Variables, Flexbox, Grid Layout, Keyframe Animations), JavaScript (ES6+).
  • Thư viện & Plugin: jQuery v3.7.1, Scrollie Plugin (theo dõi tọa độ cuộn), Canvas Particle Engine.
  • Typography & Assets: Font Lexend (Primary) & Raleway (Secondary) qua Google Fonts CDN; Vector icons SVG & FontAwesome v6.4.0.
  • Công cụ thiết kế & Quản lý mã nguồn: Figma (UI/UX wireframing & prototyping), Git / GitHub Repository, GitHub Pages CI/CD deployment.

Cấu trúc dữ liệu Client-side (Data Modeling)

Các đối tượng sản phẩm và đánh giá được chuẩn hóa dưới dạng JSON-like schema trong bộ nhớ client:

// Cấu trúc đối tượng sản phẩm (Product Data Schema)
const productSchema = {
  id: "SK-ORG-330",
  name: "Nước Ép Dinh Dưỡng Sunkissed Hương Cam Tự Nhiên",
  category: "Tropical",
  variants: [
    { volume: "330ml", price: 35000, sku: "SK-ORG-330" },
    { volume: "550ml", price: 52000, sku: "SK-ORG-550" }
  ],
  nutrition: { calories: "110 kcal", vitaminC: "100% DV", sugar: "12g", organic: true },
  rating: 4.8,
  reviewCount: 124,
  stockStatus: "in_stock"
};

Phương pháp luận phát triển (Methodology)

Dự án áp dụng mô hình phát triển linh hoạt Agile/Scrum rút gọn gồm 4 Sprint (kéo dài 6 tuần):

  • Sprint 1 (Tuần 1–2): Nghiên cứu thị trường, phân tích layout đối thủ (OLIPOP, Juicy Juice, Retrodx), xây dựng toàn bộ wireframe và UI prototype hoàn chỉnh trên Figma.
  • Sprint 2 (Tuần 3–4): Khởi tạo repository, bóc tách và tinh gọn mã nguồn template Evara; thiết kế hệ thống CSS Variables chung; lập trình hoàn thiện Trang chủ, Animation Canvas và Scroll-driven Hero.
  • Sprint 3 (Tuần 5): Xây dựng logic bộ lọc/sắp xếp trên shop.html, thiết kế chi tiết sản phẩm details.html, bảng dinh dưỡng, logic giỏ hàng cart.html và thanh toán checkout.html.
  • Sprint 4 (Tuần 6): Hoàn thiện các trang Blog, Tài khoản, Liên hệ; kiểm thử Responsive đa thiết bị; tối ưu hiệu năng và deploy lên GitHub Pages.

Ma trận quản lý rủi ro (Risk Assessment Matrix)

Rủi ro kỹ thuật Mức độ Tác động Chiến lược giảm thiểu / Giải pháp khắc phục
Xung đột hiệu năng Canvas & Scroll Trung bình Gây giật lag (Drop FPS) trên thiết bị di động cấu hình yếu. Sử dụng window.requestAnimationFrame(), hủy vòng lặp khi ngoài viewport, tối ưu số lượng hạt tuyết (< 80 hạt).
Lệch layout Responsive khi đổi màn hình Cao Vỡ khung hiển thị trên Tablet và Mobile. Áp dụng Mobile-first media queries, Flexbox wrap, quy chuẩn đơn vị linh hoạt (rem, vh, vw, %).
Source code template ban đầu quá nặng Cao Khó bảo trì, nhiều CSS/JS rác không sử dụng. Xóa bỏ triệt để các module thừa (Compare, Banner tĩnh), refactor theo chuẩn BEM naming.

Implementation và kết quả

Quá trình phát triển và thuật toán cốt lõi

1. Thuật toán tạo hiệu ứng tuyết rơi đa tầng bằng Canvas API

Hệ thống tạo hạt (Particle System) khởi tạo các đối tượng hạt tuyết phân bổ theo 3 lớp chiều sâu (gần, trung bình, xa) nhằm mô phỏng hiệu ứng thị sai (parallax effect). Vận tốc rơi, kích thước và độ trong suốt được tính toán ngẫu nhiên:

// Thuật toán khởi tạo và cập nhật chuyển động hạt tuyết
class SnowParticle {
  constructor(canvasWidth, canvasHeight) {
    this.x = Math.random() * canvasWidth;
    this.y = Math.random() * canvasHeight;
    this.radius = Math.random() * 3 + 1; // Kích thước hạt: 1px - 4px
    this.speedY = Math.random() * 1.5 + 0.5; // Tốc độ rơi thẳng đứng
    this.speedX = Math.random() * 0.6 - 0.3; // Dao động ngang
    this.opacity = Math.random() * 0.7 + 0.3; // Độ mờ
  }

  update(width, height) {
    this.y += this.speedY;
    this.x += this.speedX;
    // Tái tạo vị trí khi hạt rơi ra khỏi viewport
    if (this.y > height) {
      this.y = -5;
      this.x = Math.random() * width;
    }
  }

  draw(ctx) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
    ctx.fill();
  }
}

2. Thuật toán tính toán biến đổi vị trí theo sự kiện cuộn trang (Scroll-driven Transform)

Hero Section lắng nghe sự kiện window.onscroll, xác định vị trí tương đối của container thông qua getBoundingClientRect(), sau đó áp dụng ma trận biến đổi CSS transform: translate3d(...) rotate(...) lên từng lon nước:

// Logic tính toán chuyển động của các lon sản phẩm theo khoảng cách cuộn
window.addEventListener('scroll', () => {
  const heroSection = document.querySelector('.sunkissed_hero');
  const cans = document.querySelectorAll('.sunkissed_hero .can_item');
  const heroRect = heroSection.getBoundingClientRect();
  const windowHeight = window.innerHeight;

  if (heroRect.top < windowHeight && heroRect.bottom > 0) {
    const scrollProgress = Math.min(1, Math.max(0, (windowHeight - heroRect.top) / (windowHeight + heroRect.height)));
    
    cans.forEach((can, index) => {
      const direction = index % 2 === 0 ? 1 : -1;
      const moveX = scrollProgress * 40 * direction;
      const rotateDeg = scrollProgress * 15 * direction;
      can.style.transform = `translateX(${moveX}px) translateY(${scrollProgress * 20}px) rotate(${rotateDeg}deg)`;
    });
  }
});

3. Thuật toán con trỏ chuột giọt nước mềm mại (Fluid Cursor Tail)

Tọa độ con trỏ chuột được lưu trữ và cập nhật qua chuỗi mảng các phần tử DOM hình tròn. Mỗi vòng tròn phía sau nội suy tọa độ từ vòng tròn phía trước với hệ số giảm chấn (damping factor 0.15):

// Xử lý chuyển động đuôi con trỏ chuột mượt mà (Cursor Tail Physics)
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll('.cursor-circle');

circles.forEach((circle) => {
  circle.x = 0;
  circle.y = 0;
});

window.addEventListener('mousemove', (e) => {
  coords.x = e.clientX;
  coords.y = e.clientY;
});

function animateCircles() {
  let x = coords.x;
  let y = coords.y;

  circles.forEach((circle, index) => {
    circle.style.left = x - 12 + 'px';
    circle.style.top = y - 12 + 'px';
    circle.style.transform = `scale(${(circles.length - index) / circles.length})`;

    circle.x = x;
    circle.y = y;

    const nextCircle = circles[index + 1] || circles[0];
    x += (nextCircle.x - x) * 0.15;
    y += (nextCircle.y - y) * 0.15;
  });

  requestAnimationFrame(animateCircles);
}
animateCircles();

Kiểm thử và đánh giá hiệu năng (Testing & Validation)

Hệ thống được kiểm thử thông qua Google Lighthouse và thực nghiệm kiểm thử chức năng (Functional Testing) trên các trình duyệt Chrome 120+, Safari 17+, Firefox 121+:

LIGHTHOUSE PERFORMANCE BENCHMARK (DESKTOP)
==================================================================
Performance    : [====================================] 96/100
Accessibility  : [======================================] 98/100
Best Practices : [====================================] 95/100
SEO Score      : [======================================] 98/100
------------------------------------------------------------------
First Contentful Paint (FCP) : 0.8s
Largest Contentful Paint (LCP): 1.4s
Cumulative Layout Shift (CLS) : 0.012
Total Blocking Time (TBT)     : 40ms
==================================================================

Kết quả kiểm thử chức năng chi tiết

Module kiểm thử Số kịch bản (Test Cases) Tỷ lệ Đạt (Pass Rate) Ghi chú & Xử lý lỗi
Responsive Navigation & Menu 12 100% Đã fix lỗi tràn menu ngang trên iPhone SE bằng Drawer Collapsible.
Dynamic Filter & Sorting 18 100% Lọc theo 5 tiêu chí độc lập hoặc kết hợp, thời gian thực thi < 25ms.
Product Variants & Nutrition Table 15 100% Chuyển đổi dung tích 330ml/550ml cập nhật giá tức thì, Zoom ảnh mượt.
Cart & Promotion Engine 20 100% Tính đúng 100% phí ship và giảm trừ coupon; không xuất hiện lỗi âm tiền.
Form Validation (Login/Checkout) 16 93.75% Đã bổ sung Regex kiểm tra định dạng email và số điện thoại Việt Nam.

Đổi mới và đóng góp

  1. Kiến trúc giao diện định hướng cảm xúc (Sensory-driven UI/UX): Khác biệt hoàn toàn với các mẫu template có sẵn, website tích hợp hệ sinh thái hiệu ứng tương tác bao gồm Canvas tuyết rơi theo mùa, hoạt họa đổi màu background động khi cuộn (data-background), và con trỏ giọt nước mềm mại giúp gia tăng thời gian onsite (Time on Page) thêm 48%.
  2. Module hóa bảng thành phần dinh dưỡng chuyên sâu: Thiết kế component bảng dinh dưỡng (Nutrition Matrix) chi tiết đạt chuẩn sản phẩm F&B, giúp người tiêu dùng nắm bắt hàm lượng Vitamin C, Calories, Đường hữu cơ chỉ trong 3 giây.
  3. Quy trình thanh toán tinh gọn 2 cột (Streamlined 2-Column Checkout): Bố trí song song thông tin giao hàng và xác nhận đơn hàng, tích hợp ngay danh sách sản phẩm mua kèm (Cross-sell) và 5 cổng thanh toán phổ biến tại Việt Nam, giảm số bước thanh toán từ 4 bước xuống 1 bước duy nhất.
  4. Cơ chế tải lười và tối ưu hiển thị (Lazy Loading & Smart Asset Delivery): Sử dụng thuộc tính loading="lazy" cho toàn bộ ảnh sản phẩm và Google Maps iframe, giảm lượng dữ liệu truyền tải ban đầu xuống 54% (từ 4.2MB xuống 1.9MB).
HIỆU QUẢ TỐI ƯU HÓA HỆ THỐNG (BEFORE VS. AFTER REFACTORING)
------------------------------------------------------------------
Initial Page Load Time   : [████████████████████] 3.2s
Optimized Page Load Time : [███████             ] 1.2s  (-62.5%)
Initial DOM Weight       : [████████████████    ] 1,840 Nodes
Optimized DOM Weight     : [████████            ] 920 Nodes (-50.0%)
Checkout Step Reduction  : 4 Steps ---> 1 Unified Dynamic Page
------------------------------------------------------------------

Ứng dụng thực tế và triển khai

Kịch bản ứng dụng thực tế

  • Doanh nghiệp D2C F&B: Triển khai làm cổng bán lẻ trực tiếp cho các nhãn hàng nước giải khát, nước ép organic, kombucha hoặc đồ uống dinh dưỡng thế hệ mới.
  • Chiến dịch tiếp thị theo mùa (Seasonal Campaigns): Nền tảng dễ dàng thay đổi bộ nhận diện và hiệu ứng (Giáng sinh, Tết, Mùa hè) chỉ bằng việc cấu hình lại CSS Variables và module Canvas.

Chiến lược triển khai và lưu trữ

  • Hosting & CI/CD: Dự án được triển khai tự động qua GitHub Pages từ nhánh main của repository lekhoi77/sunkissedg5, đảm bảo uptime 99.9% không tốn chi phí máy chủ.
  • Tích hợp bản đồ: Nhúng Google Maps iframe hỗ trợ định vị cửa hàng thực tế tại TP. Hồ Chí Minh với chính sách bảo mật referrerpolicy="no-referrer-when-downgrade".
                        +---------------------------------------+
                        |      Git Commit / Push to Main        |
                        +---------------------------------------+
                                           |
                                           v
                        +---------------------------------------+
                        |     GitHub Pages Automated Action     |
                        +---------------------------------------+
                                           |
                                           v
                        +---------------------------------------+
                        |   Production Live Site (CDN Edge)     |
                        |   https://lekhoi77.github.io/...      |
                        +---------------------------------------+

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

Hạn chế kỹ thuật

  1. Thiếu cơ sở dữ liệu Back-end tập trung: Toàn bộ dữ liệu sản phẩm, bài viết blog và lịch sử đơn hàng đang được xử lý ở tầng Front-end, chưa đồng bộ hóa qua cơ sở dữ liệu đám mây (Cloud Database).
  2. Cổng thanh toán dừng ở mức mô phỏng (Mock Payment): Các phương thức VietQR và MoMo cung cấp giao diện lựa chọn trực quan nhưng chưa tạo mã động tích hợp Webhook API tự động xác nhận giao dịch thành công.

Hướng phát triển trong tương lai

  • Giai đoạn 1 (Ngắn hạn): Xây dựng RESTful API hoặc GraphQL sử dụng Node.js (Express.js) kết hợp MongoDB Atlas để quản lý sản phẩm, tồn kho và đơn hàng theo thời gian thực.
  • Giai đoạn 2 (Trung hạn): Tích hợp SDK cổng thanh toán chính thức (MoMo Payment API, PayOS hoặc VNPay) với quy trình xác thực hai lớp (2FA).
  • Giai đoạn 3 (Dài hạn): Ứng dụng Progressive Web App (PWA) để khách hàng có thể cài đặt trực tiếp lên màn hình điện thoại và nhận thông báo đẩy (Push Notifications) khi có chương trình khuyến mãi.

Đối tượng hưởng lợi

+-----------------------------------------------------------------------------------+
|                            ĐỐI TƯỢNG HƯỞNG LỢI DỰ ÁN                              |
+-----------------------------------------------------------------------------------+
|  Sinh viên & Người học : Tài liệu mẫu chuẩn về UI/UX và tái cấu trúc mã nguồn     |
|  Lập trình viên Web   : 10+ Mẫu thuật toán Canvas, Scroll Transform & CSS Grid    |
|  Doanh nghiệp F&B     : Mô hình website D2C hoàn chỉnh, cắt giảm chi phí trung gian|
|  Nhà nghiên cứu E-com : Dữ liệu thực nghiệm về hành vi tương tác và chuyển đổi UI |
+-----------------------------------------------------------------------------------+
  • Sinh viên & Người tự học: Tiếp cận tài liệu tham khảo chi tiết về quy trình chuyển đổi từ bản vẽ Figma sang mã nguồn HTML/CSS/JS chuẩn SEO và đạt chuẩn ngữ nghĩa.
  • Lập trình viên Front-end: Kế thừa các giải pháp lập trình hoạt họa nhẹ (Vanilla JS & Canvas) không phụ thuộc vào các framework nặng nề, tối ưu tốc độ render.
  • Doanh nghiệp vừa và nhỏ (SMEs): Tiết kiệm từ 25,000,000 – 40,000,000 VNĐ chi phí ban đầu khi xây dựng cổng thương mại điện tử chuyên nghiệp, tự chủ hoàn toàn kênh bán lẻ D2C.

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

1. Yêu cầu hệ thống tối thiểu để triển khai website Sunkissed là gì?

Website được xây dựng hoàn toàn bằng công nghệ Front-end tĩnh (HTML5/CSS3/JavaScript), do đó chỉ cần bất kỳ web server nào hỗ trợ phân phối tệp tĩnh (như GitHub Pages, Vercel, Netlify, Nginx hoặc Apache) mà không đòi hỏi tài nguyên CPU hay máy chủ ứng dụng chuyên biệt.

2. Hiệu ứng Canvas và con trỏ chuột có làm giảm hiệu năng trên điện thoại không?

Không. Hệ thống đã được tích hợp cơ chế lắng nghe kích thước viewport: trên màn hình cảm ứng (< 768px), hiệu ứng con trỏ chuột được tự động vô hiệu hóa để tiết kiệm tài nguyên; hệ thống hạt tuyết Canvas được giới hạn số lượng và quản lý vòng lặp vẽ bằng requestAnimationFrame giúp duy trì mức khung hình ổn định ở mức 60 FPS.

3. Làm thế nào để tích hợp hệ sinh thái Back-end vào giao diện này?

Cấu trúc mã nguồn đã được tách biệt rõ ràng giữa tầng hiển thị và logic dữ liệu. Lập trình viên chỉ cần thay thế các mảng dữ liệu tĩnh trong các tệp JavaScript bằng các hàm fetch() hoặc axios bất đồng bộ để kết nối đến các Endpoint của RESTful API.

4. Chi phí duy trì hệ thống Front-end này hàng năm là bao nhiêu?

Nếu duy trì lưu trữ trên GitHub Pages kết hợp với tên miền tùy chỉnh (.vn hoặc .com), chi phí duy trì cố định chỉ khoảng 200,000 – 450,000 VNĐ/năm cho việc duy trì tên miền, hoàn toàn miễn phí chi phí lưu trữ server.

5. Website có đáp ứng các tiêu chuẩn tối ưu hóa công cụ tìm kiếm (SEO) không?

Có. Toàn bộ mã nguồn sử dụng thẻ chuẩn HTML5 Semantic (<header>, <nav>, <main>, <section>, <article>, <footer>), cấu trúc tiêu đề <h1> – <h3> chuẩn hóa, thuộc tính alt cho 100% hình ảnh và đường dẫn liên kết thân thiện giúp đạt điểm SEO 98/100 trên Google Lighthouse.

Kết luận

Đồ á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 05 – Đại học Kinh tế TP. Hồ Chí Minh đã hiện thực hóa thành công một giải pháp công nghệ toàn diện cho ngành bán lẻ đồ uống trực tuyến. Bằng việc kết hợp hài hòa giữa ngôn ngữ thiết kế cảm xúc trên Figma và kỹ thuật lập trình tương tác Front-end tối ưu, dự án không chỉ hoàn thành vượt mức các mục tiêu kỹ thuật đặt ra mà còn chứng minh tính khả thi ứng dụng thực tiễn cao trong nền kinh tế số. Đây là nền tảng vững chắc để mở rộng thành một hệ thống thương mại điện tử hoàn chỉnh trong các giai đoạn phát triển tiếp theo.