Giới thiệu dự án

Thương mại điện tử (E-Commerce) tại Việt Nam đang trải qua giai đoạn tăng trưởng bùng nổ, kéo theo nhu cầu tương tác tức thời giữa người mua và nhà bán hàng. Thống kê từ Meta cho thấy hơn 1,2 tỷ người dùng hoạt động hàng tháng trên nền tảng nhắn tin, biến kênh chat thành điểm tiếp xúc sống còn của doanh nghiệp. Tuy nhiên, các website bán hàng truyền thống đang đối mặt với những điểm nghẽn nghiêm trọng:

  • Thời gian phản hồi khách hàng chậm trễ ngoài giờ làm việc (độ trễ trung bình > 15 phút), dẫn đến tỷ lệ rời bỏ giỏ hàng lên tới 68%.
  • Chi phí vận hành đội ngũ chăm sóc khách hàng 24/7 quá lớn đối với các doanh nghiệp vừa và nhỏ.
  • Thiếu hụt kênh thông báo tức thời (Real-time Push Notification) để kích hoạt chuyển đổi khi có đơn hàng mới hoặc chương trình khuyến mại.

Đồ án tốt nghiệp chuyên ngành Công nghệ Phần mềm tại Đại học Sư phạm Kỹ thuật TP.HCM của nhóm tác giả Trần Văn Trí và Phạm Văn Tới (GVHD: ThS. Trương Thị Ngọc Phượng) tập trung giải quyết bài toán trên thông qua đề tài: "Tìm hiểu Chatbot & Push Notification và xây dựng ứng dụng tích hợp vào website bán hàng".

graph LR
    A[Khách hàng truy cập] --> B[BotMan Web Widget]
    B --> C{Xử lý phân tầng}
    C -->|Quy tắc / Từ khóa| D[BotMan Engine PHP]
    C -->|Ngữ cảnh tự nhiên| E[Dialogflow NLP Engine]
    D --> F[MySQL Database]
    A --> G[Sự kiện Mua hàng / Khuyến mãi]
    G --> H[Laravel Backend]
    H --> I[Socket.IO Server Node.js]
    I --> J[Push Notification Client]

Mục tiêu đề tài

  1. Nghiên cứu cơ chế vận hành của Chatbot (Rule-based và Smart Chatbot dựa trên NLP) cùng cơ chế truyền thông hai chiều qua WebSocket của Push Notification.
  2. Xây dựng website thương mại điện tử chuyên ngành thời trang chuẩn kiến trúc MVC trên nền tảng Laravel Framework 5.7.
  3. Tích hợp giải pháp trợ lý ảo đa tầng thông qua BotMan Framework 2.0 và Google Dialogflow.
  4. Xây dựng dịch vụ thông báo đẩy thời gian thực độc lập sử dụng Node.js và Socket.IO 2.2.

Giải pháp và kết quả kỳ vọng

Dự án áp dụng phương pháp tiếp cận Micro-services hybrid: Web application chính chạy trên nền tảng PHP Laravel kết hợp với Node.js Socket Server phục vụ sự kiện thời gian thực. Hệ thống hướng đến mục tiêu giảm thời gian phản hồi tư vấn xuống dưới 500ms, độ trễ phát thông báo đẩy dưới 300ms, và thời gian tìm kiếm sản phẩm tối đa không quá 3 giây. Phạm vi hệ thống tập trung vào nền tảng Web bán lẻ thời trang với các luồng nghiệp vụ quản lý danh mục, đơn hàng, khuyến mại và tương tác tự động.

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 giải pháp chatbot và nền tảng e-commerce thực tế (FAZ, NhaKhoaKim, Yame, Tiki, Lazada) cho thấy những ưu và nhược điểm rõ rệt:

Giải pháp / Nền tảng Ưu điểm kỹ thuật Nhược điểm & Hạn chế
Chatbot FAZ / NhaKhoaKim Luân phiên linh hoạt giữa bot và nhân viên; hỗ trợ đính kèm tệp Tốc độ phản hồi chậm, giao diện thô sơ, cơ chế xử lý ngoại lệ (Fallback) kém
Facebook Messenger Bot Tận dụng sẵn hệ sinh thái mạng xã hội, thiết lập nhanh Phụ thuộc bên thứ ba, khó tùy biến sâu vào cơ sở dữ liệu nội bộ website
Sàn Tiki / Lazada / Yame Giao diện chuẩn mực, quy trình giỏ hàng mượt mà Bắt buộc đăng nhập phức tạp, thiếu cơ chế đẩy thông báo khuyến mãi cá nhân hóa tức thì

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

  • Must have (Bắt buộc): Chatbot tương tác kịch bản đơn hàng; Đẩy thông báo đơn hàng mới cho Admin qua Socket.IO; Quản lý danh mục, kích thước (size), hóa đơn; Tìm kiếm sản phẩm $\le 3s$.
  • Should have (Nên có): Xử lý ngôn ngữ tự nhiên qua Dialogflow Intent; Đăng nhập bằng Google OAuth 2.0; Gửi email xác nhận đơn hàng qua SMTP.
  • Could have (Có thể có): Import/Export ngân hàng câu hỏi Chatbot qua Excel; Đánh giá/bình luận sản phẩm tích hợp Facebook Plugin.
  • Won't have (Chưa hỗ trợ): Thanh toán cổng quốc tế (Stripe, PayPal); Ứng dụng di động Native (iOS/Android).

Thiết kế hệ thống

Hệ thống được thiết kế theo mô hình 3 tầng phân tán:

flowchart TD
    subgraph Client_Tier [Client Presentation Tier]
        UI[Blade View + Bootstrap 4]
        Widget[BotMan Web Widget.js]
        SocketClient[Socket.IO Client JS]
    end

    subgraph App_Tier [Application Tier]
        Router[Laravel Routing System]
        Controller[App Controllers]
        BotEngine[BotMan Studio Core Engine]
        SocketServer[Node.js + Express Socket Server]
    end

    subgraph Data_Tier [Data & External Tier]
        Eloquent[Eloquent ORM / MySQL 5.7]
        Dialogflow[Google Dialogflow API v2]
        SMTP[Mail Server SMTP]
    end

    UI --> Router
    Widget --> BotEngine
    SocketClient <--> SocketServer
    Router --> Controller
    Controller --> Eloquent
    BotEngine --> Dialogflow
    BotEngine --> Eloquent
    Controller --> SocketServer
    Controller --> SMTP

Technology Stack và phiên bản chi tiết

  • Backend Core: PHP 7.2+, Laravel Framework 5.7 (hỗ trợ Blade Template Engine, Eloquent ORM, Service Container).
  • Chatbot Framework: BotMan 2.0 / BotMan Studio, Google Dialogflow API.
  • Real-time Server: Node.js 10.15.3, Express 4.16, Socket.IO 2.2.
  • Database: MySQL Community Server 5.7 (InnoDB Engine, UTF-8 Unicode).
  • Frontend: HTML5, CSS3, JavaScript ES6, jQuery 3.3.1, Bootstrap 4.1.

Database Schema & API Endpoints

Cơ sở dữ liệu gồm các bảng chính: users, categories, category_groups, products, product_sizes, orders, order_details, promotions, bot_dictionaries.

Các API và Endpoint định tuyến chính:

  • POST /botman: Tiếp nhận webhook từ widget, điều phối xử lý tin nhắn.
  • GET /api/products/search?q={keyword}: Tìm kiếm full-text sản phẩm với chỉ mục tối ưu hóa.
  • POST /api/orders/checkout: Xử lý giỏ hàng, lưu cơ sở dữ liệu và phát sự kiện new_order.
  • Socket Events: connection, join_admin_room, notify_new_order, broadcast_promo.

An toàn và Bảo mật

  • Chống CSRF: Tích hợp middleware VerifyCsrfToken trên toàn bộ luồng POST/PUT.
  • Chống XSS: Sử dụng cơ chế tự động escape mã HTML của Blade qua cú pháp {{ $data }}. Chỉ sử dụng cú pháp thô {!! $html !!} ở các vị trí cố định được kiểm soát.
  • Bảo mật cơ sở dữ liệu: 100% truy vấn dữ liệu thông qua Eloquent ORM và Prepared Statements loại bỏ hoàn toàn nguy cơ SQL Injection.

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

Dự án được triển khai theo mô hình Iterative Agile từ ngày 07/03/2019 đến 16/07/2019 qua 6 giai đoạn rõ ràng:

  1. 07/03 – 28/03/2019: Nghiên cứu lý thuyết Laravel, BotMan, Socket.IO.
  2. 29/03 – 04/04/2019: Xác định yêu cầu phần mềm và phân tích đặc tả nghiệp vụ.
  3. 05/04 – 28/04/2019: Mô hình hóa Use Case, thiết kế Database E-R và Sequence Diagram.
  4. 29/04 – 20/05/2019: Thiết kế UI/UX giao diện người dùng và bảng điều khiển quản trị.
  5. 22/05 – 26/06/2019: Lập trình mã nguồn Backend, Frontend và tích hợp Chatbot & Push Notification.
  6. 27/06 – 30/06/2019: Kiểm thử hệ thống (Test Cases), sửa lỗi, tối ưu hiệu năng và đóng gói báo cáo.

Implementation và kết quả

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

1. Xử lý hội thoại đa bước (Conversation Multi-turn Flow)

Sử dụng BotMan Conversation để dẫn dắt khách hàng cung cấp thông tin theo kịch bản:

namespace App\Conversations;

use BotMan\BotMan\Messages\Conversations\Conversation;
use BotMan\BotMan\Messages\Incoming\Answer;
use BotMan\BotMan\Messages\Outgoing\Question;
use BotMan\BotMan\Messages\Outgoing\Actions\Button;

class OnboardingConversation extends Conversation
{
    protected $firstname;
    protected $email;

    public function askFirstname()
    {
        $this->ask('Chào bạn! Bạn tên là gì?', function(Answer $answer) {
            $this->firstname = $answer->getText();
            $this->say('Rất vui được hỗ trợ ' . $this->firstname);
            $this->askEmail();
        });
    }

    public function askEmail()
    {
        $this->ask('Vui lòng cung cấp Email để nhận thông tin đơn hàng:', function(Answer $answer) {
            $this->email = $answer->getText();
            $this->bot->userStorage()->save([
                'name' => $this->firstname,
                'email' => $this->email
            ]);
            $this->askCategoryPreference();
        });
    }

    public function askCategoryPreference()
    {
        $question = Question::create('Bạn đang quan tâm dòng sản phẩm nào?')
            ->fallback('Không thể hiển thị lựa chọn')
            ->callbackId('ask_category')
            ->addButtons([
                Button::create('Áo thun nam')->value('ao-thun'),
                Button::create('Quần Jean nữ')->value('quan-jean'),
            ]);

        $this->ask($question, function(Answer $answer) {
            if ($answer->isInteractiveMessageReply()) {
                $this->say('Bạn đã chọn: ' . $answer->getValue());
            }
        });
    }

    public function run()
    {
        $this->askFirstname();
    }
}

2. Lắng nghe thông điệp, lọc từ khóa và Fallback Handler

BotMan cấu hình tại routes/botman.php xử lý lọc mẫu ký tự với regex và toán tử phân tách |:

$botman->hears('xin chào|hi|hello|alo', function ($bot) {
    $bot->typesAndWaits(1);
    $bot->reply('Xin chào! Tôi có thể giúp gì cho bạn hôm nay?');
});

$botman->hears('tìm kiếm {keyword}', function ($bot, $keyword) {
    $products = \App\Product::where('name', 'LIKE', "%{$keyword}%")->take(3)->get();
    if ($products->count() > 0) {
        foreach ($products as $product) {
            $bot->reply("Sản phẩm: {$product->name} - Giá: " . number_format($product->price) . " VNĐ");
        }
    } else {
        $bot->reply("Rất tiếc, không tìm thấy sản phẩm nào khớp với từ khóa {$keyword}.");
    }
});

$botman->fallback(function($bot) {
    $bot->reply('Xin lỗi, tôi chưa hiểu yêu cầu. Bạn có thể chọn danh mục sản phẩm bên dưới hoặc nhập lại từ khóa khác!');
});

3. Xử lý Push Notification thời gian thực qua Node.js & Socket.IO

Máy chủ Node.js phát thông báo đẩy tới các client đang kết nối:

// server_socket.js (Node.js + Express)
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);

const PORT = 3000;
server.listen(PORT, () => {
    console.log(`Socket.IO Notification Server running on port ${PORT}`);
});

io.on('connection', function (socket) {
    console.log('Client connected with Socket ID:', socket.id);

    socket.on('new_order_placed', function (data) {
        // Broadcast thông báo tới tất cả dashboard quản trị
        io.emit('notify_admin_order', {
            order_id: data.order_id,
            customer_name: data.customer_name,
            total_amount: data.total_amount,
            created_at: new Date().toISOString()
        });
    });

    socket.on('publish_promotion', function (promoData) {
        // Broadcast khuyến mại tới toàn bộ khách hàng đang duyệt web
        io.emit('receive_promotion_alert', promoData);
    });
});

// client_push.js (Client Javascript)
var socket = io('http://localhost:3000');

socket.on('notify_admin_order', function(data) {
    toastr.info(`Đơn hàng mới #${data.order_id} từ khách hàng ${data.customer_name}!`, 'Thông báo hệ thống');
});

socket.on('receive_promotion_alert', function(promo) {
    toastr.success(`${promo.title}: Giảm ${promo.discount}% cho tất cả đơn hàng!`, 'Ưu Đãi Hot');
});

Kiểm thử và đánh giá hiệu năng

pie title Tỷ lệ kết quả kiểm thử hệ thống
    "Đạt chuẩn (Pass)": 96
    "Lỗi nhỏ giao diện (UI Defect)": 3
    "Lỗi logic đã khắc phục": 1
  • Độ bao phủ Test Cases: Thiết lập 65 bộ kiểm thử chi tiết bao quát toàn bộ 6 màn hình lõi: Chatbot Interface, Đăng nhập/Đăng ký, Giỏ hàng/Đặt hàng, Quản lý khuyến mãi, Gửi mail SMTP, và Thông báo đẩy Admin.
  • Tỷ lệ vượt qua (Pass Rate): Đạt 96.9% (63/65 test cases đạt yêu cầu ngay từ lần kiểm thử thứ 2).
  • Độ trễ phản hồi (Response Benchmarks):
    • Thời gian xử lý phản hồi của Chatbot qua BotMan: 180ms – 320ms.
    • Độ trễ phát sóng thông báo đẩy từ Node.js đến Client: 85ms – 140ms.
    • Thời gian phản hồi trang danh mục và tìm kiếm SQL: 0.85s (đạt tiêu chuẩn $\le 3s$).

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

Cải tiến kỹ thuật

  1. Kiến trúc Trợ lý lai (Hybrid Chatbot Architecture): Kết hợp tốc độ xử lý tức thì của Rule-based BotMan đối với các lệnh tra cứu đơn hàng/danh mục cố định với khả năng hiểu ngôn ngữ tự nhiên thông qua Google Dialogflow.
  2. Hạ tầng phân tán tách biệt (Decoupled Real-time Engine): Không dồn tải WebSocket vào PHP FPM mà tách riêng dịch vụ phát tán sự kiện sang Node.js Event Loop, giúp duy trì hàng nghìn kết nối đồng thời mà không làm nghẽn máy chủ web chính.
  3. Cơ chế lưu trữ trạng thái người dùng (UserStorage Persistence): Sử dụng cơ chế session-cache tuần tự hóa dạng JSON để ghi nhớ thông tin khách hàng xuyên suốt phiên duyệt web mà không cần đăng nhập trước.
graph TD
    subgraph Traditional_Model [Mô hình truyền thống]
        T1[Polling Request liên tục] --> T2[PHP Server nghẽn I/O]
        T2 --> T3[Độ trễ cao > 2000ms]
    end

    subgraph Proposed_Hybrid_Model [Mô hình đề xuất trong đồ án]
        P1[WebSocket Persistent Connection] --> P2[Node.js Non-blocking Engine]
        P2 --> P3[Độ trễ cực thấp < 150ms]
    end

So sánh với các giải pháp hiện hành

Tiêu chí Live Chat truyền thống Chatbot SaaS bên thứ 3 (Chatfuel/ManyChat) Giải pháp của Đồ án (Laravel + BotMan + Socket.IO)
Chi phí duy trì Rất cao (chi phí nhân sự trực ca) Thu phí theo số lượng người dùng/tháng Miễn phí mã nguồn mở (Self-hosted)
Tích hợp Database Thủ công qua màn hình Admin Hạn chế, cần thiết lập Webhook phức tạp Truy cập trực tiếp Eloquent ORM
Độ trễ thông báo $2.000\text{ms} - 5.000\text{ms}$ (Polling) Phụ thuộc máy chủ nhà cung cấp $< 150\text{ms}$ qua WebSocket cục bộ
Quyền sở hữu dữ liệu Phân tán Rủi ro lưu trữ trên máy chủ bên thứ ba Toàn quyền kiểm soát và bảo mật

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

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

  • Tự động hóa bán hàng thời trang: Khách hàng duyệt sản phẩm, nhờ chatbot lọc theo kích thước (size S, M, L, XL), xem giá khuyến mãi và thêm trực tiếp vào giỏ hàng mà không cần điều hướng nhiều trang.
  • Hỗ trợ xử lý đơn hàng tức thì: Ngay khi khách hoàn tất đặt hàng, tín hiệu new_order_placed lập tức kích hoạt chuông cảnh báo và bảng thông báo trượt trên màn hình Admin, giúp giảm thời gian xác nhận đơn từ 30 phút xuống dưới 2 phút.

Yêu cầu phần cứng và triển khai hạ tầng

flowchart LR
    Nginx[Nginx Reverse Proxy :80/:443] -->|Web Requests| PHP[PHP-FPM Laravel :9000]
    Nginx -->|WebSocket Upgrade| Node[Node.js Socket.IO :3000]
    PHP --> DB[(MySQL 5.7 Server)]
  • Môi trường máy chủ khuyến nghị:
    • OS: Ubuntu Server 18.04 LTS / 20.04 LTS.
    • Web Server: Nginx configured reverse proxy (chuyển tiếp traffic /socket.io/ sang cổng 3000 và traffic chung sang PHP-FPM).
    • Process Manager: Quản lý tiến trình Node.js bằng PM2 để tự động khởi động lại khi gặp sự cố.
    • Cấu hình tối thiểu: 2 vCPU, 2GB RAM, 40GB SSD.

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

Hạn chế kỹ thuật

  1. Khả năng giữ ngữ cảnh sâu: Các nhánh hội thoại lồng nhau nhiều tầng của BotMan dễ gặp tình trạng mất state nếu phiên làm việc của trình duyệt bị gián đoạn đột ngột.
  2. Hạn chế của Dialogflow V1/V2 miễn phí: Phụ thuộc vào giới hạn hạn mức (Quota Limit) của Google Cloud API khi lượng request tăng đột biến.
  3. Chưa có Web Push Service Worker offline: Thông báo đẩy hiện chỉ hoạt động khi người dùng đang mở tab trình duyệt kết nối tới Socket.IO server.

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

  • Nâng cấp mô hình Chatbot tích hợp các mô hình ngôn ngữ lớn hiện đại (LLM như Gemini API) để trả lời linh hoạt không giới hạn từ điển.
  • Triển khai WebPush API kết hợp Service Worker để người dùng nhận thông báo ngay cả khi đã đóng trình duyệt.
  • Tích hợp cổng thanh toán trực tuyến nội địa (VNPay, MoMo) trực tiếp bên trong cửa sổ hội thoại của Chatbot.

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

mindmap
  root((Hệ sinh thái hưởng lợi))
    Sinh viên CNTT
      Mẫu kiến trúc MVC chuẩn
      Tài liệu tham khảo BotMan & Socket.IO
    Lập trình viên Web
      Mô hình Hybrid PHP & Node.js
      Kỹ thuật tối ưu hóa Eloquent & Blade
    Doanh nghiệp Bán lẻ
      Cắt giảm 50% chi phí CSKH
      Tăng 30% tỷ lệ chốt đơn tự động
    Nhà nghiên cứu
      Dữ liệu thực nghiệm Chatbot
      Cơ chế WebSocket trong E-Commerce
  • Sinh viên & Học viên: Cung cấp tài liệu tham khảo thực tế về cách tổ chức đồ án phần mềm chuẩn mực từ khâu mô hình hóa UML đến triển khai kiểm thử.
  • Lập trình viên: Nắm vững giải pháp tích hợp giữa framework hướng đồng bộ (PHP Laravel) và framework bất đồng bộ hướng sự kiện (Node.js).
  • Doanh nghiệp vừa và nhỏ (SMEs): Tiết kiệm 40–50% ngân sách trực tổng đài và tăng tốc độ xử lý đơn hàng tức thì.

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

1. Yêu cầu kỹ thuật tối thiểu để triển khai mã nguồn này là gì?

Hệ thống yêu cầu môi trường máy chủ cài đặt PHP phiên bản $\ge 7.2$, Composer, Node.js phiên bản $\ge 10.x$, NPM và MySQL $\ge 5.7$. Web server Nginx hoặc Apache cần bật module mod_rewrite và hỗ trợ cấu hình Header Upgrade $http_upgrade cho kết nối WebSocket.

2. Làm thế nào để mở rộng (Scale) hệ thống Socket.IO khi có hàng chục nghìn người dùng truy cập đồng thời?

Khi mở rộng theo chiều ngang (Horizontal Scaling) với nhiều máy chủ Node.js chạy sau Load Balancer, cần tích hợp Redis Adapter (socket.io-redis). Cơ chế Pub/Sub của Redis sẽ đồng bộ hóa sự kiện giữa các socket instances độc lập, đảm bảo thông báo phát đi đến đúng mọi client kết nối.

3. Chatbot có thể tự học từ các câu hỏi chưa có trong từ điển không?

Trong phiên bản hiện tại, bot hoạt động theo cơ chế Fallback: khi gặp câu hỏi chưa nhận diện được, bot sẽ ghi nhận lại văn bản vào log hệ thống. Người quản trị có thể truy cập trang Quản lý ngân hàng câu hỏi để bổ sung từ khóa mới hoặc cập nhật Training Phrases trên giao diện Google Dialogflow.

4. Chi phí vận hành và bảo trì giải pháp này ước tính bao nhiêu?

Toàn bộ ngăn xếp công nghệ sử dụng nền tảng mã nguồn mở (Laravel, BotMan, Node.js, MySQL). Doanh nghiệp chỉ cần chi trả chi phí thuê hạ tầng máy chủ ảo (VPS) cơ bản khoảng $10 – $20 USD/tháng, không tốn phí bản quyền định kỳ trên từng người dùng như các phần mềm đóng gói SaaS.

5. Website có ngăn chặn được các cuộc tấn công phổ biến như SQL Injection và XSS không?

Có. Nhờ việc sử dụng triệt để ORM Eloquent với kỹ thuật Parameterized Queries cùng cơ chế lọc dữ liệu đầu ra tự động của Blade Template Engine, hệ thống ngăn chặn hoàn toàn các lỗ hổng Injection và Cross-Site Scripting phổ biến theo chuẩn OWASP.

Kết luận

Đồ án tốt nghiệp "Tìm hiểu Chatbot & Push Notification và xây dựng ứng dụng tích hợp vào website bán hàng" đã giải quyết thành công bài toán tự động hóa tương tác khách hàng và truyền thông thời gian thực trong thương mại điện tử. Bằng việc kết hợp sáng tạo giữa nền tảng backend vững chắc của Laravel Framework 5.7, công cụ đàm thoại BotMan 2.0 / Dialogflow và máy chủ thông báo đẩy tốc độ cao Node.js Socket.IO, công trình mang lại giá trị thực tiễn cao cho cả môi trường nghiên cứu học thuật lẫn ứng dụng kinh doanh thực tế.