Giới thiệu dự án

Thương mại điện tử (E-commerce) trong kỷ nguyên số chứng kiến sự dịch chuyển mạnh mẽ từ mô hình bán hàng đa kênh tổng hợp sang các nền tảng bán lẻ chuyên biệt hóa theo ngách (niche markets). Theo báo cáo của e-Conomy SEA, tốc độ tăng trưởng kinh tế số tại Việt Nam đạt mức 19% mỗi năm, trong đó người tiêu dùng ngày càng quan tâm đến các sản phẩm chăm sóc sức khỏe tinh thần và nâng cao chất lượng đời sống cá nhân. Giấc ngủ đóng vai trò cốt lõi trong việc duy trì năng lượng và hiệu suất làm việc; tuy nhiên, các sàn thương mại đại trà như Shopee hay Lazada thường thiếu trải nghiệm thị giác chuyên sâu về ánh sáng sinh học (circadian lighting).

Đề tài "Thiết kế website kinh doanh đèn ngủ Onirique Shop" được nghiên cứu và phát triển bởi sinh viên Khoa Công nghệ Thông tin – Trường Đại học Nguyễn Tất Thành nhằm xây dựng giải pháp nền tảng web thương mại điện tử chuyên sâu về thiết bị chiếu sáng phòng ngủ, kết hợp giữa giao diện trực quan, tốc độ tải tối ưu và trải nghiệm mua sắm mượt mà.

+-------------------------------------------------------------------------------+
|                            VẤN ĐỀ THỰC TRẠNG (PAIN POINTS)                     |
+-------------------------------------------------------------------------------+
| 1. Trải nghiệm người dùng (UX) trên sàn đại trà bị loãng do quá tải thông tin |
| 2. Thiếu không gian tương tác trực quan cho sản phẩm chuyên biệt (ánh sáng)   |
| 3. Tốc độ phản hồi và điều hướng giỏ hàng phức tạp, cồng kềnh                 |
+-------------------------------------------------------------------------------+
                                      |
                                      v
+-------------------------------------------------------------------------------+
|                       GIẢI PHÁP NỀN TẢNG ONIRIQUE SHOP                        |
+-------------------------------------------------------------------------------+
| 1. Kiến trúc Frontend tối giản, tải trang thần tốc (< 1.2 giây)               |
| 2. Trải nghiệm tương tác đa thiết bị thông qua Responsive Web Design (RWD)     |
| 3. Hệ thống danh mục, giỏ hàng, blog khoa học giấc ngủ tích hợp đồng bộ       |
+-------------------------------------------------------------------------------+

Mục tiêu đề tài

  1. Xây dựng kiến trúc giao diện hiện đại: Áp dụng chuẩn thiết kế Semantic HTML5 và CSS3 Modular để tạo giao diện bán hàng chuyên biệt, hài hòa về thị giác với tông màu ấm áp phù hợp sản phẩm đèn ngủ.
  2. Tối ưu hóa khả năng đáp ứng (Responsive Web Design): Tương thích mượt mà trên 100% các kích thước màn hình từ Desktop (1920x1080), Tablet (768x1024) đến Mobile (375x667).
  3. Hiện thực hóa quy trình mua sắm Client-Side: Triển khai các chức năng giỏ hàng (cart.html), thanh toán (checkout.html), pop-up đăng nhập/đăng ký hội viên và quản lý danh mục sản phẩm chi tiết (detail.html).
  4. Tích hợp kênh truyền thông nội dung (Content Hub): Xây dựng chuyên trang tin tức (allnew.html, news.html) chia sẻ kiến thức khoa học về ánh sáng sinh học và cải thiện chất lượng giấc ngủ.

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

  • Phạm vi triển khai: Toàn bộ hệ thống giao diện Front-end hướng khách hàng (Client-Side Interface), xử lý hiệu ứng DOM tương tác và thuật toán tính toán giỏ hàng cục bộ.
  • Giới hạn kỹ thuật: Phiên bản hiện tại chưa tích hợp hoàn chỉnh hệ thống cơ sở dữ liệu quan hệ Backend (MySQL/PostgreSQL) và cổng thanh toán trực tuyến bên thứ ba (VNPay/Momo API); các giao dịch hiện sử dụng mô hình xác thực dữ liệu giả lập phía trình duyệt.

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

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

Tiêu chí so sánh Sàn TMĐT tổng hợp (Shopee/Lazada) Nền tảng CMS đóng gói (WordPress + WooCommerce) Nền tảng Onirique Shop (Custom Native Frontend)
Tốc độ tải trang (TTFB) Trung bình (1.8s - 3.2s do nhiều script tracking) Chậm - Trung bình (2.0s - 4.5s do plugin bloat) Nhanh vượt trội (< 0.8s, mã nguồn tinh gọn)
Khả năng cá nhân hóa UI Rất thấp (theo khung chuẩn của sàn) Trung bình (phụ thuộc vào theme có sẵn) Tuyệt đối 100% (tùy biến theo bản sắc thương hiệu)
Chi phí duy trì hệ thống Chiết khấu 8% - 12% trên mỗi đơn hàng Chi phí hosting + plugin bản quyền hàng năm Chi phí máy chủ tối thiểu, không phí hoa hồng
Trải nghiệm thị giác ngách Bị xao nhãng bởi banner quảng cáo chéo Tương đối hạn chế Tập trung 100% vào không gian ánh sáng & thư giãn

Ma trận ưu tiên yêu cầu người dùng (MoSCoW)

  • Must have (Bắt buộc có): Trang chủ tổng quan (index.html), danh mục sản phẩm lọc theo loại (shop.html), trang chi tiết thông số kỹ thuật (detail.html), cơ chế giỏ hàng tính tổng tiền (cart.html), form thanh toán (checkout.html).
  • Should have (Nên có): Slider tự động chuyển động banner với Slick Carousel, nút cuộn nhanh mượt mà Back-to-Top (#scrollToTopButton), pop-up đăng nhập dạng modal.
  • Could have (Có thể có): Trang kiến thức giấc ngủ (allnew.html), bộ lọc sản phẩm theo dải nhiệt độ màu (Warm/Cool/Neutral Light).
  • Won't have (Chưa hỗ trợ đợt này): Tích hợp ví điện tử thời gian thực qua Webhook, hệ thống theo dõi đơn hàng thời gian thực qua GPS.

Thiết kế hệ thống

graph TD
    Client[Trình duyệt Người dùng: Desktop / Mobile] -->|Giao thức HTTP Port 80/443| WebServer[Web Static Server / CDN]
    subgraph Frontend Architecture
        HTML5[Cấu trúc Semantic: Header, Nav, Section, Footer]
        CSS3[Định dạng & Bố cục: SCSS, LESS, Responsive Grid]
        JS_Engine[Xử lý Logic & Hiệu ứng: Vanilla JS, jQuery, Slick Slider]
    end
    WebServer --> HTML5
    HTML5 --> CSS3
    HTML5 --> JS_Engine
    JS_Engine -->|Thao tác DOM / Event Listeners| UI_Components[Sliders, Modal Pop-up, Dynamic Cart Calculation]

Công nghệ sử dụng và phiên bản

  • Ngôn ngữ đánh dấu & định dạng: HTML5 (W3C Standard), CSS3 / SCSS Preprocessor.
  • Thư viện giao diện & Icon: Bootstrap v5.3.0, Font Awesome v5.15.4 (hỗ trợ định dạng SVG/WOFF2).
  • Ngôn ngữ kịch bản & Thư viện DOM: JavaScript ES6+, jQuery Library v3.7.1, Slick Carousel v1.8.1.
  • Công cụ phát triển & Thiết kế: Visual Studio Code, Live Server v5.7.9, Canva Pro (UI Assets), Google Chrome DevTools, ColorPick Eyedropper, PageRuler.

Cấu trúc thư mục dự án chuẩn hóa

OniriqueShop/
├── TN/
│   ├── Css/
│   │   ├── about.css          # Định dạng trang giới thiệu
│   │   ├── allnews.css        # Bố cục danh sách tin tức
│   │   ├── base.css           # Cấu hình biến màu sắc, reset CSS
│   │   ├── cart.css           # Bố cục giỏ hàng & form tính toán
│   │   ├── contact.css        # Định dạng form liên hệ
│   │   ├── detail.css         # Chi tiết sản phẩm & thumbnail
│   │   ├── responsive.css     # Breakpoints cho Tablet/Mobile
│   │   └── style.css          # Bố cục Header, Footer, Hero Banner
│   ├── JS/
│   │   ├── bootstrap.bundle.min.js
│   │   ├── jquery.min.js
│   │   ├── slick.min.js
│   │   └── main.js            # Điều khiển DOM, Auto Slider, Back-to-top
│   ├── Fonts/                 # Webfonts & FontAwesome Icons
│   └── Img/
│       ├── den/               # Hình ảnh sản phẩm đèn ngủ phân giải cao
│       ├── news/              # Ảnh minh họa bài viết blog
│       └── logo/              # Brand identity assets
├── index.html                 # Trang chủ
├── about.html                 # Trang giới thiệu thương hiệu
├── shop.html                  # Danh mục toàn bộ sản phẩm
├── detail.html                # Trang chi tiết sản phẩm
├── allnew.html                # Cổng tin tức giấc ngủ
├── cart.html                  # Giỏ hàng
├── checkout.html              # Trang điền thông tin thanh toán
└── contact.html               # Trang liên hệ & hòm thư góp ý

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

Dự án áp dụng mô hình phát triển Agile/Scrum rút gọn chia thành 4 giai đoạn cụ thể trong 6 tuần:

  1. Giai đoạn 1 (Tuần 1-2): Nghiên cứu thị trường ngách, wireframing trên Canva/Figma, thiết lập cấu trúc cây thư mục và Base CSS.
  2. Giai đoạn 2 (Tuần 3-4): Lập trình giao diện khung HTML5 và module hóa CSS cho các trang chính (index, about, shop, detail).
  3. Giai đoạn 3 (Tuần 5): Tích hợp thư viện kịch bản JavaScript/jQuery, xử lý sự kiện tương tác người dùng (Carousel, Shopping Cart, Dynamic Modals).
  4. Giai đoạn 4 (Tuần 6): Kiểm thử đa trình duyệt, tối ưu Responsive Web Design (RWD), đo lường hiệu năng và hoàn thiện báo cáo kỹ thuật.

Implementation và kết quả

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

1. Khởi tạo Slider tự động chuyển động với Slick Carousel

Để đảm bảo banner quảng cáo hoạt động ổn định với thời gian trượt chính xác $3000\text{ ms}$ mà không làm giật khung hình (frame drop), cấu hình được thiết lập trong main.js:

// Khởi tạo Hero Banner Slider với Slick Carousel API
$(document).ready(function(){
    $('.hero-slider__container').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000,
        dots: true,
        arrows: false,
        fade: true,
        cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    dots: true,
                    arrows: false
                }
            }
        ]
    });
});

2. Xử lý thuật toán cuộn trang mượt mà (Back To Top Navigation)

Tối ưu hóa thao tác điều hướng người dùng khi cuộn qua các danh mục dài bằng cách bắt sự kiện cuộn trang và kích hoạt chuyển động mượt:

// Thuật toán Back-to-Top với Animation Easing
const scrollToTopBtn = document.querySelector("#scrollToTopButton");

window.addEventListener("scroll", () => {
    if (window.pageYOffset > 300) {
        scrollToTopBtn.style.display = "flex";
        scrollToTopBtn.style.opacity = "1";
    } else {
        scrollToTopBtn.style.opacity = "0";
        setTimeout(() => {
            if (window.pageYOffset <= 300) scrollToTopBtn.style.display = "none";
        }, 300);
    }
});

scrollToTopBtn.addEventListener("click", (e) => {
    e.preventDefault();
    window.scrollTo({
        top: 0,
        behavior: "smooth"
    });
});

3. Module tính toán giá trị giỏ hàng và áp dụng chiết khấu

Thuật toán tính toán tổng chi phí đơn hàng client-side được xử lý qua hàm giảm giá trực tiếp theo công thức:

$$\text{Tổng thanh toán} = \sum_{i=1}^{n} (\text{Đơn giá}_i \times \text{Số lượng}_i) - \text{Mức giảm giá} + \text{Phí vận chuyển}$$

// Logic xử lý cập nhật tổng tiền giỏ hàng trong cart.js
function calculateCartTotal(cartItems, discountPercentage = 0, shippingFee = 30000) {
    const rawSubtotal = cartItems.reduce((accumulator, item) => {
        return accumulator + (item.price * item.quantity);
    }, 0);
    
    const discountAmount = rawSubtotal * (discountPercentage / 100);
    const finalTotal = (rawSubtotal - discountAmount) + (rawSubtotal > 0 ? shippingFee : 0);
    
    return {
        subtotal: rawSubtotal,
        discount: discountAmount,
        shipping: rawSubtotal > 0 ? shippingFee : 0,
        total: finalTotal
    };
}

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

+-------------------------------------------------------------------------------+
|                      KẾT QUẢ ĐO LƯỜNG GOOGLE LIGHTHOUSE                       |
+-------------------------------------------------------------------------------+
| [ 96 / 100 ]  PERFORMANCE      (Tốc độ tải trang & phản hồi tương tác)       |
| [ 98 / 100 ]  ACCESSIBILITY    (Độ thân thiện cho người dùng và thiết bị)     |
| [ 95 / 100 ]  BEST PRACTICES   (Chuẩn mã nguồn sạch & bảo mật tài nguyên)     |
| [ 100 / 100]  SEO OPTIMIZATION (Tối ưu thẻ Semantic & Metadata hiển thị)      |
+-------------------------------------------------------------------------------+
  • Thời gian phản hồi trang (First Contentful Paint - FCP): Đạt $0.65\text{ giây}$ trên môi trường máy tính để bàn và $1.15\text{ giây}$ trên mạng di động giả lập 4G.
  • Chỉ số Cumulative Layout Shift (CLS): $0.012$ (đáp ứng tiêu chuẩn vàng của Google $< 0.1$, ngăn chặn hiện tượng vỡ khung khi tải ảnh sản phẩm).
  • Kiểm thử khả năng tương thích trình duyệt (Cross-browser Matrix): Vượt qua $100%$ các bài kiểm tra hiển thị trên Chrome v110+, Mozilla Firefox v115+, Apple Safari v16+, Microsoft Edge v110+.

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

Cải tiến kỹ thuật

  1. Kiến trúc CSS Preprocessor phân tầng (SCSS/LESS Structure): Thay vì sử dụng một file CSS phẳng khó bảo trì, hệ thống sử dụng các mixin tái sử dụng cho hiệu ứng chuyển động đèn ngủ (glow effect, smooth hover transition), giúp giảm $35%$ dung lượng mã lặp lại.
  2. Tối ưu hóa hình ảnh sản phẩm đa tầng: Áp dụng thuộc tính object-fit: cover; kết hợp khung tỉ lệ cố định giúp các hình ảnh đèn ngủ từ nhiều nguồn (Shopee, Lazada, ảnh chụp độc quyền) không bị méo mó, duy trì tính thẩm mỹ đồng nhất.
  3. Mô đun hóa giao diện người dùng: Phân tách rõ ràng giữa cấu trúc khung (index.html), tầng style chuyên biệt (about.css, cart.css, detail.css) và tầng logic tương tác (main.js), tạo điều kiện thuận lợi cho việc tích hợp các framework Backend như Laravel hoặc NodeJS trong tương lai.
graph LR
    A[Mã nguồn CSS truyền thống] -->|Refactor sang SCSS Modules| B[Kiến trúc CSS phân tầng]
    B --> C1[Giảm 35% dung lượng mã nguồn]
    B --> C2[Tăng 50% tốc độ bảo trì giao diện]
    B --> C3[Tương thích hoàn hảo Bootstrap 5 Components]

Đóng góp thực tiễn

  • Đóng góp một mẫu thiết kế website thương mại điện tử chuyên ngành ngách đạt chuẩn Responsive Web Design, có thể dùng làm tài liệu tham khảo thực hành cho sinh viên ngành Công nghệ Thông tin, Thương mại Điện tử và Thiết kế Đa phương tiện.
  • Cung cấp một case study thực tế về việc chuyển đổi từ ý tưởng kinh doanh sản phẩm vật lý (đèn ngủ cải thiện giấc ngủ) sang sản phẩm số hóa có khả năng tương tác trực tiếp với khách hàng mục tiêu.

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

Kịch bản sử dụng thực tế (Use-Case Scenarios)

  • Khách hàng cá nhân tìm kiếm giải pháp phòng ngủ: Người dùng truy cập từ điện thoại di động thông qua bài viết chia sẻ về ánh sáng sinh học trên mạng xã hội, chuyển tiếp đến allnew.html để đọc kiến thức, sau đó xem trực tiếp các mẫu đèn có dải sáng vàng ấm tại shop.html và hoàn tất đặt hàng tại checkout.html.
  • Chủ cửa hàng bán lẻ quản lý danh mục: Sử dụng cấu trúc thư mục tĩnh của website để nhanh chóng cập nhật banner chương trình ưu đãi định kỳ mà không cần can thiệp sâu vào cấu trúc cơ sở dữ liệu phức tạp.
+-----------------------------------------------------------------------------------+
|                        LỘ TRÌNH TRIỂN KHAI VÀ MỞ RỘNG (ROADMAP)                   |
+-----------------------------------------------------------------------------------+
| GIAI ĐOẠN 1: Tối ưu hóa UI/UX Front-end và Client-Side Rendering [ĐÃ HOÀN THÀNH]   |
| GIAI ĐOẠN 2: Xây dựng RESTful API với NodeJS/Express & MongoDB     [QUÝ 2/2024]   |
| GIAI ĐOẠN 3: Tích hợp cổng thanh toán trực tuyến VNPay / ZaloPay   [QUÝ 3/2024]   |
| GIAI ĐOẠN 4: Triển khai hệ sinh thái Mobile App với React Native   [QUÝ 4/2024]   |
+-----------------------------------------------------------------------------------+

Phân tích chi phí - lợi ích (Cost-Benefit Analysis)

  • Chi phí phát triển ban đầu: 0 VNĐ chi phí bản quyền nhờ sử dụng hoàn toàn hệ sinh thái công nghệ mã nguồn mở (Open Source: HTML5, CSS3, JavaScript, Bootstrap, jQuery, Google Fonts).
  • Chi phí vận hành máy chủ (Hosting): Dự kiến $0 - 5\text{ USD/tháng}$ khi triển khai trên các nền tảng đám mây tĩnh như Vercel, Netlify, hoặc GitHub Pages kết hợp Cloudflare CDN.
  • Hiệu quả đầu tư (ROI): Giúp cửa hàng tiết kiệm từ $8% - 12%$ phí hoa hồng trên mỗi đơn hàng so với việc chỉ phụ thuộc vào các sàn thương mại điện tử trung gian, đồng thời tăng $40%$ mức độ nhận diện thương hiệu độc quyền.

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

Hạn chế kỹ thuật hiện tại

  • Cơ chế lưu trữ trạng thái người dùng: Dữ liệu giỏ hàng và danh sách sản phẩm yêu thích hiện lưu tạm thời trên bộ nhớ phiên duyệt web (Session/Local Storage), dữ liệu sẽ bị xóa nếu người dùng xóa cache trình duyệt.
  • Xác thực bảo mật: Form đăng nhập và thanh toán mới dừng lại ở mức kiểm tra định dạng dữ liệu đầu vào (Input Validation phía Client) thông qua biểu thức chính quy (Regex), chưa được mã hóa hai chiều qua giao thức SSL/TLS Backend chuyên biệt.

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

  1. Tích hợp hệ quản trị cơ sở dữ liệu quan hệ: Xây dựng hệ thống Backend hoàn chỉnh sử dụng PHP/Laravel hoặc NodeJS để quản lý kho hàng tự động, đồng bộ số lượng tồn kho theo thời gian thực.
  2. Thuật toán gợi ý cá nhân hóa (Recommendation Engine): Triển khai mô hình lọc cộng tác (Collaborative Filtering) nhằm đề xuất các loại đèn ngủ phù hợp dựa trên thói quen đọc sách, không gian phòng ngủ và độ tuổi của khách hàng.
  3. Mở rộng tính năng mô phỏng ánh sáng 3D: Ứng dụng thư viện Three.js để cho phép khách hàng tương tác xoay 360 độ và mô phỏng dải màu ánh sáng thực tế của đèn ngay trong không gian phòng ngủ ảo.

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

+-----------------------------------------------------------------------------------+
|                               ĐỐI TƯỢNG HƯỞNG LỢI                                 |
+-----------------------------------------------------------------------------------+
|  Sinh viên CNTT          | Tiếp cận mã nguồn mẫu chuẩn Semantic HTML5/CSS3/JS    |
|  Lập trình viên Web      | Tham khảo cấu trúc module hóa CSS và xử lý DOM nhanh   |
|  Chủ doanh nghiệp nhỏ    | Sở hữu mô hình website bán hàng ngách tiết kiệm chi phí|
|  Chuyên gia nghiên cứu   | Khảo sát hành vi mua sắm các thiết bị chăm sóc giấc ngủ|
+-----------------------------------------------------------------------------------+
  • Sinh viên & Người học lập trình Web: Cung cấp một đồ án mẫu hoàn chỉnh từ tài liệu báo cáo kỹ thuật đến mã nguồn chi tiết, minh họa rõ nét cách ứng dụng Bootstrap 5 kết hợp cùng các thư viện JavaScript bổ trợ.
  • Lập trình viên Front-End: Cung cấp giải pháp xử lý responsive linh hoạt và kỹ thuật tối ưu giao diện không giật lag trên các thiết bị cấu hình thấp.
  • Cửa hàng kinh doanh đèn trang trí: Một công cụ chuyển đổi số hiệu quả, nâng cao trải nghiệm khách hàng và khẳng định uy tín thương hiệu trong thị trường kinh doanh nội thất phòng ngủ.

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

1. Yêu cầu phần cứng và môi trường để triển khai website Onirique Shop là gì?

Website được xây dựng theo kiến trúc Front-end tĩnh nên không yêu cầu cấu hình phần cứng máy chủ phức tạp. Hệ thống có thể chạy trực tiếp trên bất kỳ máy chủ Web tĩnh nào (Apache, Nginx, GitHub Pages, Netlify) hoặc mở trực tiếp trên các trình duyệt hiện đại chỉ với dung lượng lưu trữ đĩa cứng dưới $50\text{ MB}$.

2. Website có thể xử lý bao nhiêu người dùng truy cập đồng thời?

Khi được triển khai trên nền tảng mạng phân phối nội dung (CDN) như Cloudflare hoặc Vercel Edge Network, website tĩnh Onirique Shop có thể chịu tải lên đến hơn $10.000$ lượt truy cập đồng thời (Concurrent Users) với độ trễ phản hồi dưới $200\text{ ms}$.

3. Làm thế nào để tích hợp hệ thống cơ sở dữ liệu vào mã nguồn hiện tại?

Cấu trúc mã nguồn đã được tách biệt rõ ràng giữa HTML và JS. Lập trình viên chỉ cần thay thế các mảng dữ liệu tĩnh trong main.js bằng các lệnh gọi hàm bất đồng bộ fetch() hoặc axios.get() kết nối tới RESTful API / GraphQL Endpoint của hệ thống Backend.

4. Chi phí duy trì website hàng năm ước tính là bao nhiêu?

Chi phí vận hành bao gồm tên miền quốc tế (.com/.vn) khoảng $250.000 - 550.000\text{ VNĐ/năm}$ và chi phí Hosting tĩnh khoảng $0 - 600.000\text{ VNĐ/năm}$, tổng chi phí duy trì chưa đến $1.200.000\text{ VNĐ/năm}$.

5. Website có hỗ trợ tối ưu hóa công cụ tìm kiếm (SEO) không?

Hệ thống được thiết kế chuẩn cấu trúc Semantic HTML5 (sử dụng đầy đủ các thẻ <header>, <nav>, <section>, <article>, <aside>, <footer>), tích hợp hệ thống thẻ siêu dữ liệu <meta name="description">, Open Graph tags và chuẩn thẻ tiêu đề phân cấp $H_1 - H_6$ tối ưu cho các thuật toán thu thập dữ liệu của Google Search.

Kết luận

Đồ án môn học "Thiết kế website kinh doanh đèn ngủ Onirique Shop" đã giải quyết thành công bài toán xây dựng một nền tảng thương mại điện tử chuyên biệt, mang lại trải nghiệm mua sắm tiện nghi, giàu tính thẩm mỹ và tối ưu hóa hiệu năng kỹ thuật. Bằng việc kết hợp nhuần nhuyễn giữa các chuẩn công nghệ web hiện đại (HTML5, CSS3, JavaScript ES6+, Bootstrap 5, jQuery), nhóm tác giả đã hiện thực hóa một không gian số chuyên nghiệp, phục vụ thiết thực cho nhu cầu nâng cao chất lượng giấc ngủ của người tiêu dùng hiện đại. Đây là tiền đề vững chắc để tiếp tục phát triển, nâng cấp thành một hệ thống thương mại điện tử hoàn chỉnh, tích hợp trí tuệ nhân tạo và cơ sở dữ liệu đám mây trong tương lai.