Google Stitch là gì và khả năng ứng dụng thực tế

Google Stitch là một sản phẩm thử nghiệm từ Google Labs, được thiết kế để hỗ trợ người dùng tạo ra các giao diện người dùng (UI) thông qua trí tuệ nhân tạo. Thay vì phải bắt đầu từ một trang trắng trong các phần mềm đồ họa, bạn có thể sử dụng mô tả văn bản, hình ảnh hoặc các bản vẽ phác thảo để AI tự động dựng lên layout.

Mục đích chính của công cụ này là giúp các nhà phát triển, quản lý sản phẩm (PM) và designer rút ngắn giai đoạn lên ý tưởng (ideation) và tạo bản mẫu (prototype). Với sự hỗ trợ của mô hình Gemini, Google Stitch có khả năng hiểu các yêu cầu phức tạp và chuyển đổi chúng thành các thành phần giao diện trực quan, có tính thẩm mỹ cao.

Cách dùng Google Stitch để thiết kế UI chuyên nghiệp

Để tận dụng tối đa sức mạnh của trí tuệ nhân tạo trong thiết kế, bạn cần nắm vững quy trình 5 bước cơ bản dưới đây:

Bước 1: Khởi động và thiết lập không gian làm việc

Đầu tiên, bạn cần truy cập vào trang web chính thức của Stitch trong hệ sinh thái Google Labs. Nhấn Try Now để đăng nhập bằng tài khoản Google cá nhân.

Tại giao diện chính, bạn có thể quản lý các dự án cũ hoặc bắt đầu một dự án mới. Đừng quên vào phần cài đặt (Settings) để tùy chỉnh quyền riêng tư, đặc biệt là tùy chọn cho phép Google sử dụng dữ liệu của bạn để huấn luyện AI hay không (Nhấn vào avatar > Chọn Cài đặt Stitch > Bỏ tích ở ô Cho phép huấn luyện mô hình AI).

Bước 2: Hiện thực hóa ý tưởng qua câu lệnh

Bạn sẽ nhập các câu lệnh bằng tiếng Anh mô tả giao diện mình mong muốn. Ví dụ: “A trip packing checklist app that suggests what to pack based on your destination’s weather and trip type”.

Bạn có thể chọn thiết kế cho giao diện trên ứng dụng hoặc website. Sau đó nhấn Enter.

Bước 3: Tối ưu hóa thiết kế từ hình ảnh tham chiếu

Nếu bạn đã có sẵn một bản vẽ tay trên giấy hoặc một mẫu wireframe thô, hãy tải chúng lên hệ thống. AI sẽ phân tích bố cục từ hình ảnh đó để xây dựng giao diện UI tương ứng.

Bước 4: Tinh chỉnh giao diện

Sau khi AI trả về kết quả đầu tiên, bạn có thể tiếp tục yêu cầu chỉnh sửa. Bạn có thể ra lệnh cho AI thay đổi font chữ, điều chỉnh màu sắc chủ đạo hoặc thêm các nút bấm mới. Một tính năng hay trong cách dùng Google Stitch là bạn có thể tạo ra nhiều biến thể khác nhau cho cùng một màn hình để so sánh trước khi chốt phương án cuối cùng.

Bước 5: Chuyển đổi sang mã nguồn và Figma

Khi đã hài lòng với bản thiết kế, bạn có thể xuất sản phẩm dưới dạng mã nguồn HTML và CSS. Điều này cực kỳ hữu ích cho các lập trình viên frontend để xây dựng khung xương cho ứng dụng. Ngoài ra, việc xuất sang Figma cũng giúp các designer chuyên nghiệp tiếp tục tinh chỉnh các chi tiết nhỏ nhất mà AI chưa xử lý hoàn hảo.

So sánh Google Stitch và phần mềm thiết kế truyền thống

Để hiểu rõ hơn về giá trị của công cụ này, hãy cùng xem bảng so sánh dưới đây:

Những ưu điểm và rào cản khi sử dụng Google Stitch

Việc hiểu rõ hai mặt của công cụ sẽ giúp bạn áp dụng cách dùng Google Stitch vào công việc một cách thông minh hơn.

Ưu điểm

• Tiết kiệm tối đa thời gian cho giai đoạn brainstorming.
• Giao diện trực quan, dễ tiếp cận cho cả những người không có nền tảng về mỹ thuật.
• Khả năng biến ý tưởng trừu tượng thành hình ảnh trực quan một cách kỳ diệu.

Hạn chế

• Độ đồng bộ giữa các luồng màn hình (flow) phức tạp đôi khi còn rời rạc.
• Màu sắc và khoảng cách (spacing) có thể chưa đạt chuẩn thiết kế chuyên nghiệp.
• Vẫn cần sự can thiệp thủ công của con người để tối ưu hóa mã nguồn và layout.

Khi nào bạn nên lựa chọn Google Stitch?

Bạn nên áp dụng cách dùng Google Stitch khi cần tạo nhanh các bản demo để thuyết trình với khách hàng hoặc cấp trên. Nó cũng là công cụ tuyệt vời để các lập trình viên tự xây dựng giao diện cơ bản cho các dự án cá nhân mà không cần thuê designer. Tuy nhiên, đối với các sản phẩm thương mại quy mô lớn, hãy coi Stitch là bước đệm để tạo ra bản phác thảo chất lượng trước khi chuyển sang các công cụ chuyên dụng khác.

Lời kết

Việc nắm vững cách dùng Google Stitch sẽ giúp bạn tiết kiệm được rất nhiều thời gian trong giai đoạn lên ý tưởng ban đầu. Đây thực sự là một bước tiến lớn trong việc ứng dụng AI vào lĩnh vực thiết kế sáng tạo. Chúc bạn sớm tạo ra những giao diện ấn tượng cho dự án của mình.

Những câu hỏi thường gặp

1. Google Stitch có hỗ trợ tiếng Việt không?

Hiện tại, công cụ hoạt động tốt nhất với các prompt bằng tiếng Anh để đảm bảo AI hiểu chính xác các thuật ngữ chuyên ngành UI/UX.

2. Tôi có thể dùng Google Stitch miễn phí không?

Vì là sản phẩm của Google Labs, công cụ hiện đang cho phép trải nghiệm miễn phí, tuy nhiên có thể có giới hạn về số lượng lượt tạo mỗi tháng.

3. Code xuất ra từ Google Stitch có dùng ngay được không?

Code HTML/CSS từ Stitch cung cấp cấu trúc layout cơ bản, bạn vẫn cần lập trình viên tối ưu lại để đảm bảo tính phản hồi (responsive) và hiệu suất.

Với các công cụ như Claude Code, Blackbox AI hay các hệ thống multi-agent đang ngày càng phổ biến trong cộng đồng dev Việt Nam, việc theo dõi AI hoạt động đôi khi giống như nhìn một màn hình log chạy liên tục.

Quick Answer: Pixel Agents là một extension mã nguồn mở cho Visual Studio Code giúp biến các AI Agent chạy trong terminal (như Claude Code hoặc Blackbox AI) thành các nhân vật pixel đang làm việc trong một văn phòng ảo. Bạn có thể theo dõi tiến trình AI trực quan, tùy chỉnh layout văn phòng và quan sát trạng thái làm việc theo thời gian thực.

Nhưng nếu những AI đó có thể trở thành những nhân vật pixel đang ngồi code trong văn phòng riêng của bạn thì sao?

Đó chính là ý tưởng phía sau Pixel Agents – một extension cực thú vị dành cho VS Code giúp trực quan hóa hoạt động của AI Agent theo phong cách pixel art.

Nếu bạn thích cá nhân hóa môi trường làm việc giống như khi tùy biến giao diện VS Code cho lập trình, thì Pixel Agents chắc chắn là thứ đáng thử.

Pixel Agents là gì?

Pixel Agents là một extension mã nguồn mở dành cho Visual Studio Code giúp hiển thị trạng thái hoạt động của AI Agent dưới dạng các nhân vật pixel trong một không gian văn phòng ảo.

Thay vì chỉ nhìn terminal chạy lệnh, bạn sẽ thấy các nhân vật nhỏ đang:

• Ngồi gõ máy tính khi AI đang viết code
• Đi lại hoặc đứng chờ khi AI đang suy nghĩ
• Phát thông báo khi hoàn thành nhiệm vụ

Mỗi terminal AI giống như một “nhân viên” trong văn phòng mini của bạn.

Điều này đặc biệt thú vị nếu bạn đang chạy nhiều AI agent cùng lúc để code, debug hoặc tạo nội dung.

Các tính năng nổi bật của Pixel Agents

1. One Agent – One Character

Mỗi terminal trong VS Code sẽ tương ứng với một nhân vật pixel riêng.

Nếu bạn mở nhiều terminal để chạy nhiều AI agent khác nhau, bạn sẽ thấy một văn phòng đầy “nhân viên AI” đang làm việc cùng lúc.

2. Live Activity Tracking

Pixel Agents có thể theo dõi trạng thái hoạt động của terminal theo thời gian thực.

Các trạng thái phổ biến bao gồm:

• Đang viết code
• Đang chờ phản hồi
• Đang xử lý tác vụ
• Đã hoàn thành công việc

Mỗi trạng thái sẽ đi kèm animation và biểu cảm khác nhau.

3. Office Layout Editor

Một trong những tính năng thú vị nhất là bạn có thể tự thiết kế văn phòng cho AI.

Bạn có thể:

• Chọn loại gạch lát sàn
• Thêm bàn làm việc
• Đặt kệ sách
• Trang trí cây xanh
• Sắp xếp vị trí các nhân vật

Nó giống như đang chơi một game quản lý văn phòng mini ngay trong VS Code.

4. Nhiều nhân vật Pixel khác nhau

Pixel Agents cung cấp nhiều nhân vật khác nhau để bạn lựa chọn.

Mỗi nhân vật có animation riêng, giúp văn phòng AI của bạn trở nên sinh động hơn.

Yêu cầu trước khi cài Pixel Agents

Trước khi cài đặt extension này, bạn cần chuẩn bị một vài thành phần cơ bản:

• Visual Studio Code phiên bản 1.109.0 trở lên
• AI Agent CLI chạy trong terminal
• Máy tính có khả năng chạy VS Code mượt

Các AI Agent phổ biến có thể dùng chung với Pixel Agents:

• Claude Code CLI
• Blackbox AI CLI
• Các tool multi-agent chạy trong terminal

Nếu bạn đang khám phá hệ sinh thái AI coding, bạn có thể xem thêm hướng dẫn cách sử dụng Blackbox AI để viết code nhanh hơn.

Hướng dẫn cài đặt Pixel Agents trên VS Code

Bước 1: Mở Extension Marketplace

Mở Visual Studio Code, sau đó nhấn tổ hợp phím: Ctrl + Shift + X

Đây là phím tắt để mở trang quản lý extension.

Bước 2: Tìm extension Pixel Agents

Tại thanh tìm kiếm, nhập: Pixel Agents. Sau đó nhấn Install để cài đặt extension. Hoặc truy cập Extension này để tải về https://marketplace.visualstudio.com/items?itemName=pablodelucca.pixel-agents

Bước 3: Khởi chạy AI Agent trong terminal

Sau khi cài xong, bạn chỉ cần mở terminal và chạy AI Agent như bình thường.

Ví dụ:

• Claude Code
• Blackbox CLI
• Các AI agent coding khác

Pixel Agents sẽ tự động nhận diện terminal và tạo nhân vật tương ứng.

Bước 4: Thiết kế văn phòng cho AI

Sau khi extension hoạt động, bạn có thể mở Layout Editor.

Tại đây bạn có thể:

• Chọn sàn nhà
• Đặt bàn làm việc
• Thêm cây xanh
• Di chuyển nhân vật
• Sắp xếp không gian văn phòng

Kết quả là một văn phòng pixel cực kỳ sinh động.

Trải nghiệm thực tế khi dùng Pixel Agents

Khi sử dụng Pixel Agents kết hợp với các AI coding tool, trải nghiệm làm việc thay đổi khá rõ.

Thay vì nhìn terminal chạy log, bạn sẽ thấy:

• AI đang “ngồi code”
• AI “đi lại suy nghĩ” khi xử lý prompt
• AI hoàn thành nhiệm vụ và báo hiệu

Điều này giúp:

• Giảm cảm giác nhàm chán khi lập trình
• Tạo động lực làm việc
• Quan sát tiến trình AI dễ hơn

Đặc biệt với các dev đang thử nghiệm multi-agent workflow, việc thấy nhiều AI “làm việc cùng lúc” trong một văn phòng ảo thực sự khá thú vị.

Lỗi thường gặp khi cài Pixel Agents

Extension không hiển thị nhân vật

Nguyên nhân thường gặp:

• VS Code quá cũ
• Terminal chưa chạy AI agent
• Extension chưa reload

Giải pháp:

• Cập nhật VS Code lên bản mới
• Restart VS Code
• Reload window bằng Ctrl + Shift + P → Reload Window

Layout Editor không mở

Một số trường hợp extension chưa load đầy đủ.

Bạn có thể:

• Tắt và bật lại extension
• Khởi động lại VS Code

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

Pixel Agents có miễn phí không?

Có. Đây là extension mã nguồn mở nên bạn có thể cài đặt miễn phí trên VS Code.

Pixel Agents có ảnh hưởng hiệu năng VS Code không?

Thông thường không đáng kể. Tuy nhiên nếu bạn chạy nhiều AI agent cùng lúc thì máy yếu có thể giảm hiệu năng.

Pixel Agents có hoạt động với mọi AI CLI không?

Phần lớn AI agent chạy trong terminal đều có thể hiển thị, miễn là terminal đó được Pixel Agents nhận diện.

Có thể tùy chỉnh nhân vật Pixel không?

Hiện tại extension cung cấp sẵn nhiều nhân vật khác nhau và bạn có thể chọn trong Layout Editor.

Checklist để bắt đầu sử dụng Pixel Agents

• Cài Visual Studio Code bản mới nhất
• Mở Extension Marketplace
• Tìm và cài Pixel Agents
• Khởi chạy AI agent trong terminal
• Tùy chỉnh văn phòng trong Layout Editor
• Quan sát AI “làm việc” trong môi trường pixel

Kết luận

Pixel Agents mang đến một cách tiếp cận hoàn toàn mới khi làm việc với AI coding tools trong VS Code.

Thay vì một terminal khô khan, bạn sẽ có một văn phòng pixel nơi các AI agent đang làm việc cho bạn.

Với những lập trình viên yêu thích pixel art hoặc muốn tạo môi trường làm việc thú vị hơn, Pixel Agents chắc chắn là một extension đáng thử.

Thông tin trong bài viết mang tính tham khảo và trải nghiệm thực tế, bạn có thể khám phá thêm các công cụ AI coding khác để tối ưu workflow lập trình của mình.

Nguồn tham khảo

• Trang Extension Marketplace của Pixel Agents
• Tài liệu Visual Studio Code
• Cộng đồng AI Coding Tools

Tuy nhiên, nhiều script tuyết rơi cũ thường sử dụng thư viện jQuery nặng nề hoặc Canvas phức tạp khiến website bị chậm, lag trên điện thoại. Trong bài viết này, mình sẽ chia sẻ đoạn code tuyết rơi sử dụng CSS3 Animation và Vanilla JavaScript (JS thuần). Đảm bảo 3 tiêu chí: Siêu nhẹ – Không gây lag – Dễ cài đặt.

Ưu điểm code tuyết rơi cho Website đón Giáng Sinh

• Tối ưu hiệu suất: Sử dụng CSS Keyframes để tạo chuyển động thay vì tính toán vị trí liên tục bằng JS, giúp giảm tải cho CPU.
• Không chặn tương tác: Đã được xử lý thuộc tính pointer-events: none, giúp người dùng vẫn click được vào các link/nút bấm bên dưới lớp tuyết mà không bị vướng.
• Tùy biến cao: Dễ dàng chỉnh số lượng tuyết, tốc độ rơi và hình dáng bông tuyết.

Full Code hiệu ứng tuyết rơi (HTML/CSS/JS)

Dưới đây là đoạn mã đầy đủ. Bạn không cần tải file rườm rà, chỉ cần copy và dán.

      <style>
  .snowflake {
    position: fixed;
    top: -10px;
    z-index: 9999;
    user-select: none;
    cursor: default;
    animation-name: fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    color: #F527E4; /* Màu tuyết nếu dùng ký tự */
  }

  @keyframes fall {
    to {
      transform: translateY(100vh);
    }
  }
</style>

<script>
  (function() {
    var snowflakes = [],
        browserWidth, browserHeight,
        numberOfSnowflakes = 50, // Số lượng bông tuyết
        resetPosition = false;

    function setup() {
        window.addEventListener("DOMContentLoaded", generateSnowflakes, false);
        window.addEventListener("resize", setResetFlag, false);
    }

    function setResetFlag(e) {
        resetPosition = true;
    }

    function generateSnowflakes() {

        var originalSnowflake = document.createElement("div");
        originalSnowflake.classList.add("snowflake");
        originalSnowflake.innerHTML = "❄"; 
        originalSnowflake.style.fontSize = "20px"; // Kích thước cơ bản

        var snowflakeContainer = document.body;
        
        browserWidth = document.documentElement.clientWidth;
        browserHeight = document.documentElement.clientHeight;

        for (var i = 0; i < numberOfSnowflakes; i++) {
            var snowflakeClone = originalSnowflake.cloneNode(true);
            snowflakeContainer.appendChild(snowflakeClone);

            var initialX = Math.floor(Math.random() * browserWidth);
            var fallDuration = Math.floor(Math.random() * 10) + 5 + "s";
            var snowflakeSize = Math.floor(Math.random() * 20) + 10 + "px"; // Random kích thước
            var delay = Math.floor(Math.random() * 5) + "s";

            snowflakeClone.style.left = initialX + "px";
            snowflakeClone.style.animationDuration = fallDuration;
            snowflakeClone.style.fontSize = snowflakeSize;
            snowflakeClone.style.animationDelay = delay;
            snowflakeClone.style.opacity = Math.random(); // Độ mờ ngẫu nhiên
        }
    }
    setup();
  })();
</script>

Để đổi màu tuyết bạn thay đổi mã màu ở dòng color: #F527E4;

Full Code hiệu ứng tuyết rơi có động tuyết ở chân trang

Đây là phiên bản nâng cao sử dụng HTML5 Canvas. Hiệu ứng này sẽ cho phép tuyết rơi và đọng lại dưới chân trang web. Theo thời gian, lớp tuyết sẽ dày lên và có thể che phủ màn hình giống như một trận bão tuyết thực sự.

Hiệu ứng tuyết tích tụ sẽ che khuất nội dung website của bạn từ dưới lên trên. Hãy cân nhắc kỹ trước khi sử dụng cho trang bán hàng vì khách có thể không nhìn thấy nút “Mua ngay” hoặc Footer. Bạn có thể chỉnh biến maxSnowHeight trong code để giới hạn độ cao của tuyết (ví dụ chỉ cho cao 100px rồi dừng).

Giải thích các thông số trong code để bạn tùy chỉnh:

• maxSnowHeight = height;: Tuyết sẽ dâng lên mãi cho đến khi lấp đầy màn hình (full screen). Nếu bạn chỉ muốn nó dâng lên một chút rồi dừng (để không che web), hãy đổi thành số pixel cụ thể, ví dụ: maxSnowHeight = 150;.
• snowflakeCount = 200;: Số lượng hạt tuyết đang rơi. Tăng lên thì dày hơn nhưng máy yếu có thể lag.
• snowPile: Đây là mảng kỹ thuật để lưu “bản đồ địa hình” của lớp tuyết dưới đáy.

<canvas id="snowCanvas" style="position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none;"></canvas>

<script>
(function() {
    var canvas = document.getElementById('snowCanvas');
    if (!canvas) { console.error("Không tìm thấy thẻ canvas"); return; }
    
    var ctx = canvas.getContext('2d');
    var width = window.innerWidth;
    var height = window.innerHeight;
    
    // --- CẤU HÌNH ---
    var maxSnowHeight = 200;    // Độ cao tối đa tuyết đọng (pixel)
    var snowflakeCount = 200;   // Số lượng hạt tuyết
    var snowColor = "#ADD8E6";  // Màu tuyết (Xanh nhạt để dễ test, muốn trắng sửa thành #FFFFFF)
    // ----------------
    
    canvas.width = width;
    canvas.height = height;

    var snowflakes = [];
    var snowPile = new Array(width).fill(0); 

    // Hàm tạo lại hạt tuyết khi rơi xuống hoặc mới bắt đầu
    function resetSnowflake(flake) {
        flake.x = Math.floor(Math.random() * width);
        flake.y = Math.floor(Math.random() * -height); 
        flake.size = Math.random() * 3 + 2; 
        flake.speed = (Math.random() * 1) + 1.5; // Tốc độ rơi
        flake.velY = flake.speed;
        flake.velX = 0;
        flake.opacity = (Math.random() * 0.5) + 0.3;
    }

    // Khởi tạo các hạt tuyết
    function init() {
        snowflakes = [];
        for (var i = 0; i < snowflakeCount; i++) {
            var flake = {};
            resetSnowflake(flake);
            snowflakes.push(flake);
        }
        // GỌI HÀM UPDATE ĐỂ BẮT ĐẦU CHẠY
        update();
    }

    // Vòng lặp chuyển động
    function update() {
        ctx.clearRect(0, 0, width, height);

        // 1. Vẽ đống tuyết tích tụ dưới đáy
        ctx.fillStyle = snowColor;
        ctx.beginPath();
        ctx.moveTo(0, height);
        for (var x = 0; x < width; x++) {
            ctx.lineTo(x, height - snowPile[x]);
        }
        ctx.lineTo(width, height);
        ctx.fill();

        // 2. Vẽ và cập nhật bông tuyết đang rơi
        for (var i = 0; i < snowflakes.length; i++) {
            var f = snowflakes[i];

            f.x += Math.sin(f.y * 0.05) * 0.5; // Lắc lư nhẹ
            f.y += f.velY;

            var currentX = Math.floor(f.x);
            if (currentX < 0) currentX = 0;
            if (currentX >= width) currentX = width - 1;

            // Kiểm tra va chạm với đống tuyết
            var pileHeight = snowPile[currentX];
            
            if (f.y >= height - pileHeight) {
                // Tích tụ tuyết nếu chưa vượt quá giới hạn
                if (pileHeight < maxSnowHeight) {
                    var range = 3; 
                    for(var k = -range; k <= range; k++) {
                        var neighborX = currentX + k;
                        if(neighborX >=0 && neighborX < width) {
                             snowPile[neighborX] += f.size * 0.3; 
                        }
                    }
                }
                resetSnowflake(f); // Tạo lại hạt mới từ trên cao
            }

            // Vẽ bông tuyết đơn lẻ
            ctx.fillStyle = snowColor;
            ctx.globalAlpha = f.opacity; // Độ trong suốt
            ctx.beginPath();
            ctx.arc(f.x, f.y, f.size, 0, Math.PI * 2);
            ctx.fill();
            ctx.globalAlpha = 1; // Reset lại alpha
        }
        
        requestAnimationFrame(update);
    }

    // Xử lý khi resize màn hình
    window.addEventListener('resize', function() {
        width = window.innerWidth;
        height = window.innerHeight;
        canvas.width = width;
        canvas.height = height;
        snowPile = new Array(width).fill(0); // Reset tuyết đọng khi resize để tránh lỗi hiển thị
    });

    init();
})();
</script>

Hướng dẫn thêm Code tuyết rơi Website Code tay (HTML/PHP)

Đối với các website tự code hoặc các mã nguồn mở khác (Laravel, CodeIgniter…), bạn thực hiện như sau:

1. Mở file footer của giao diện (thường là footer.php, footer.html hoặc file layout chính).
2. Tìm đến thẻ đóng </body>.
3. Dán đoạn code ở mục 2 vào ngay phía trên thẻ </body>.
4. Lưu file và tải lại trang (Ctrl + F5) để xem kết quả.

4. Hướng dẫn cài đặt cho WordPress

Với WordPress, có 2 cách để chèn code này mà không cần cài plugin nặng nề tạo hiệu ứng:

Cách 1: Sử dụng Plugin chèn Header & Footer (Khuyên dùng)

Cách này an toàn nhất, khi đổi giao diện (theme) code vẫn hoạt động.

1. Cài đặt plugin WPCode (trước đây là Insert Headers and Footers) hoặc Header Footer Code Manager.
2. Vào menu plugin, chọn Add New Snippet.
3. Chọn vị trí chèn là Footer.
4. Dán đoạn code trên vào và bấm Save/Activate.

Cách 2: Chèn trực tiếp vào Theme (Dành cho Dev)

1. Vào trang quản trị WP -> Giao diện (Appearance) -> Chỉnh sửa giao diện (Theme File Editor).
2. Tìm file footer.php ở cột bên phải.
3. Dán code vào trước thẻ đóng </body>.
4. Bấm Cập nhật tệp tin.

Lưu ý: Với cách 2, nếu bạn update theme thì code sẽ mất, nên sử dụng Child Theme để tránh tình trạng này.

Chỉ với vài dòng code đơn giản, website của bạn đã trở nên sinh động hơn rất nhiều trong mắt khách truy cập. Đây là một mẹo nhỏ trong UI/UX giúp giữ chân người dùng lâu hơn trong dịp lễ hội.

Chúc các bạn thực hiện thành công và có một mùa Giáng sinh an lành! Nếu có thắc mắc gì, hãy để lại bình luận bên dưới nhé.

Opal: Tạo ứng dụng AI không cần viết code

Vào ngày 24 tháng 7, Google đã chính thức vén màn bí mật về Opal, một công cụ trí tuệ nhân tạo mang tính thử nghiệm với khả năng vô cùng ấn tượng: cho phép người dùng tạo ra các ứng dụng nhỏ chỉ bằng cách mô tả yêu cầu của mình bằng ngôn ngữ tự nhiên.

Đúng vậy, bạn không cần phải gõ một dòng mã lệnh nào cả. Toàn bộ quá trình từ việc phân tích yêu cầu, xây dựng logic đến tạo ra giao diện đều do AI đảm nhiệm. Mục tiêu của Google là để bất kỳ ai, dù không có kiến thức nền tảng về lập trình, cũng có thể tự mình bắt đầu.

Cách thức hoạt động kỳ diệu của Opal

Sức mạnh của Opal nằm ở ý tưởng cốt lõi: Chuyển đổi một ý tưởng được diễn đạt bằng lời nói thành một ứng dụng có thể hoạt động được thông qua một giao diện trực quan.

Khi bạn đưa ra một yêu cầu, ví dụ như “Tạo một ứng dụng gợi ý thực đơn dựa trên những nguyên liệu còn lại trong tủ lạnh”, công cụ sẽ tự động tạo ra một quy trình làm việc (workflow) bao gồm nhiều khối logic nối tiếp nhau. Mỗi khối đại diện cho một hành động cụ thể như: nhận dữ liệu đầu vào từ người dùng, tạo phản hồi, hiển thị kết quả,…

Giao diện của công cụ được thiết kế thông minh và chia thành hai khu vực chính:

• Khu vực biên tập (Editor): Đây là nơi bạn có thể xem và chỉnh sửa toàn bộ quy trình hoạt động của ứng dụng dưới dạng các khối được kết nối với nhau. Bạn hoàn toàn có thể nhấp vào từng khối để chỉnh sửa hoặc thay thế nó bằng cách mô tả sự thay đổi bạn muốn.
• Khu vực xem trước (App): Chế độ này hiển thị ứng dụng dưới góc nhìn của người dùng cuối, là phiên bản đã được hoàn thiện và có thể kiểm tra ngay lập tức để đảm bảo mọi thứ hoạt động đúng như mong đợi.

Người dùng có thể tự do chuyển đổi qua lại giữa hai chế độ xem này, tinh chỉnh các bước một cách linh hoạt và thậm chí thêm các hướng dẫn mới thông qua thanh lệnh tích hợp. Tất cả đều diễn ra mượt mà mà không đòi hỏi bất kỳ kiến thức nào về code.

Khơi nguồn sáng tạo với thư viện mẫu có sẵn

Đối với những người dùng còn đang thiếu ý tưởng hoặc chỉ đơn giản là muốn khám phá khả năng của công cụ, Opal cung cấp một thư viện các ví dụ đa dạng. Tại đây có sẵn một số ứng dụng nhỏ đã được hoàn thiện, bạn có thể thử nghiệm trực tiếp hoặc tùy chỉnh lại theo nhu cầu của mình.

Mỗi dự án mẫu đều có thể trở thành nền tảng cho tác phẩm của riêng bạn. Chỉ cần một cú nhấp chuột, bạn có thể xem cách nó được xây dựng, thay đổi một vài khối lệnh hoặc lời nhắc (prompt), và bạn sẽ có ngay một phiên bản tùy chỉnh chỉ trong vài giây. Đây là một cách tuyệt vời để hiểu cơ chế của Opal mà không cần phải bắt đầu từ con số không.

Chia sẻ dễ dàng và tạo mã siêu tốc

Một khi ứng dụng nhỏ của bạn đã hoàn tất, Opal giúp việc chia sẻ trở nên vô cùng đơn giản. Chỉ với một cú nhấp chuột, bạn sẽ nhận được một đường dẫn URL duy nhất. Bạn có thể gửi liên kết này cho bạn bè hoặc đồng nghiệp để họ thử nghiệm sản phẩm của bạn bằng chính tài khoản Google của họ. Không cần cài đặt, không cần xuất bản lên cửa hàng ứng dụng, mọi thứ đều diễn ra trực tuyến.

Đây chính là thế mạnh cốt lõi của Opal: Chỉ trong vài phút, bạn có thể đi từ một ý tưởng chợt nảy ra đến một phiên bản có thể hoạt động, kiểm tra và chia sẻ được. Dù đó là một dự án cá nhân, một bản thử nghiệm ý tưởng (proof of concept), hay một công cụ “cây nhà lá vườn” để sử dụng hàng ngày, mọi thứ đều được thiết kế để diễn ra nhanh chóng mà không cần bận tâm đến code.

Khi nào Opal triển khai ở Việt Nam?

Điểm trừ duy nhất ở thời điểm hiện tại là Opal mới chỉ được triển khai tại Hoa Kỳ thông qua chương trình Google Labs. Điều này có nghĩa là người dùng ở các khu vực khác, trong đó có Việt Nam, vẫn phải đứng ngoài và chờ đợi một đợt triển khai rộng rãi hơn trong tương lai.

Kết bài

Tóm lại, Opal đang định hình một tương lai đầy hứa hẹn, nơi việc tạo ra các công cụ số không còn là đặc quyền của riêng giới lập trình. Dù vẫn còn trong giai đoạn thử nghiệm và giới hạn khu vực, tiềm năng của nó là không thể phủ nhận. Chúng ta hãy cùng chờ xem ngày mà công cụ Opal chính thức ra mắt toàn cầu và trao sức mạnh sáng tạo vào tay tất cả mọi người nhé!

Cách 1: Xóa Comment trong trang quản trị WordPress

Đây là cách đơn giản nhất, phù hợp với những website có số lượng bình luận rác ở mức thấp hoặc trung bình. Người quản trị chỉ cần truy cập vào bảng điều khiển WordPress, chọn mục “Comments” (Bình luận), sau đó chuyển sang tab “Spam” hoặc “Pending” để lọc ra các bình luận không hợp lệ. Tại đây, bạn có thể chọn toàn bộ bình luận hiển thị, thực hiện hành động “Move to Trash” (Chuyển vào thùng rác) và xác nhận.

Mỗi trang thường hiển thị khoảng 20 bình luận, tuy nhiên bạn có thể tăng số lượng này lên 100 hoặc 200 bằng cách nhấn vào nút “Screen Options” (Tùy chọn màn hình) và chỉnh lại số lượng bình luận hiển thị trên 1 trang.

Lưu ý nếu để số lượng quá lớn có thể là treo Website do chiếm nhiều tài nguyên xử lý php.

Cách 2: Xóa Bằng SQL Hoặc WP-CLI

Nếu bạn có quyền truy cập vào cơ sở dữ liệu của website thông qua phpMyAdmin hoặc dùng VPS có hỗ trợ SSH, thì việc xóa bình luận rác bằng câu lệnh SQL hoặc công cụ WP-CLI là lựa chọn nhanh và gọn nhất.

Chỉ với một dòng lệnh SQL như DELETE FROM wp_comments WHERE comment_approved = 'spam';, toàn bộ bình luận bị đánh dấu là spam sẽ biến mất ngay lập tức.

Nếu muốn xóa bình luận đang chờ duyệt, bạn chỉ cần thay đổi điều kiện thành comment_approved = '0'.

Trong trường hợp sử dụng WP-CLI, bạn có thể dùng lệnh wp comment delete $(wp comment list --status=spam --format=ids) để xóa tất cả bình luận với 1 nút Enter.

Cách 3: Dùng Plugin Để Xóa Hàng Loạt Bình Luận Rác Tự Động

Đối với các website có khối lượng lớn bình luận spam, việc sử dụng plugin là giải pháp tối ưu. Plugin WP Bulk Delete là một lựa chọn phổ biến và dễ sử dụng. Sau khi cài đặt và kích hoạt plugin này, bạn chỉ cần truy cập vào mục quản lý bình luận trong WP Bulk Delete, chọn loại bình luận cần xóa như “Spam”, “Pending” hoặc “All”, sau đó nhấn nút xác nhận để tiến hành xóa hàng loạt.

Thời gian thực hiện chỉ mất vài phút và không yêu cầu người dùng phải thao tác thủ công nhiều lần. Một số plugin khác như Delete Pending Comments bạn có thể tham khảo dùng thử

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

Tôi có thể xóa bình luận rác trên WordPress nếu chỉ có vài chục bình luận không?

Bạn có thể dễ dàng xóa bình luận rác bằng cách truy cập mục “Bình luận” trong bảng điều khiển WordPress, lọc theo “Spam” hoặc “Pending”, chọn tất cả và chuyển vào thùng rác.

Nếu website có hàng trăm hoặc hàng ngàn bình luận rác thì sao?

Với số lượng lớn, bạn nên sử dụng phương pháp xóa bằng SQL (DELETE FROM wp_comments WHERE comment_approved = 'spam';) hoặc WP-CLI (wp comment delete $(wp comment list --status=spam --format=ids)) để xóa nhanh chóng. Hoặc cài đặt plugin như WP Bulk Delete để xóa hàng loạt một cách tự động.

Có an toàn khi xóa bình luận rác bằng SQL hoặc WP-CLI không?

Việc sử dụng SQL hoặc WP-CLI cần thận trọng. Hãy sao lưu cơ sở dữ liệu trước khi thực hiện. Đảm bảo bạn hiểu chính xác câu lệnh SQL để tránh xóa nhầm dữ liệu khác.

Code bắn pháo hoa mang lại nhiều lợi ích và rất dễ áp dụng. Hiệu ứng này cho phép hiển thị các tia pháo hoa rực rỡ trên toàn màn hình, xuất hiện khi người dùng nhấp chuột hoặc tự động bắn sau mỗi vài giây. Đặc biệt, bạn có thể tùy chỉnh màu sắc, kích thước và tần suất pháo hoa để phù hợp với thiết kế tổng thể của website.

Ứng dụng của code pháo hoa rất đa dạng. Bạn có thể sử dụng nó để tạo điểm nhấn cho các chương trình khuyến mãi Tết trên website thương mại điện tử, làm đẹp blog cá nhân theo chủ đề năm mới, hoặc trang trí trang giới thiệu sự kiện và chiến dịch quảng bá lễ hội. Code được viết bằng JavaScript kết hợp với HTML và CSS, đảm bảo nhẹ nhàng, không ảnh hưởng đến tốc độ tải trang, và tương thích tốt trên hầu hết các trình duyệt hiện đại.

Ngoài ra bạn có thể tham khảo code pháo hoa di theo chuột ở bài viết trước

Code pháo hoa trang trí Website

Trước khi quyết định có dùng code hay không, bạn có thể xem Demo pháo hóa tại trang này: https://anonyviet.com/resource/phaohoa/demo.html

Đây là code gốc được tham khảo từ website: https://quaqueviet.nguyenlan.io.vn/phaohoa.txt

Code pháo hoa tết cho WordPress

Mở file functions.php trong thư mục theme của WordPress và copy toàn bộ code dưới đây dán vào ở cuối file functions.php (thường ở đường dẫn wp-content/themes/tên-theme/functions.php)

function chenphaohoa(){
?>
<link rel="stylesheet" href="https://anonyviet.com/resource/phaohoa/fireworks1.css">
<script src="https://anonyviet.com/resource/phaohoa/fireworks1.js"></script>
<canvas id="fireworks" style="display:none;"></canvas> 
<?php
}

add_action('wp_footer','chenphaohoa');

Thêm code pháo hoa tết vào Blogspot/Website khác

Bạn vào Menu đổi theme của Blogspot, edit html và thực hiện các bước sau:

1. Vào Blogspot Dashboard
2. Theme > Edit HTML
3. Dán code vào vị trí tương ứng bên dưới

Thêm code Trong phần <head>

<link href='https://anonyviet.com/resource/phaohoa/fireworks1.css' rel='stylesheet' type='text/css'/>

Ngay trước thẻ đóng </body>

<!-- FIREWORKS SCRIPT -->
<script src='https://anonyviet.com/resource/phaohoa/fireworks1.js' type='text/javascript'></script>

<!-- INITIALIZE FIREWORKS -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    const container = document.createElement('div');
    container.id = 'fireworks-container';
    document.body.appendChild(container);
    
    // Cấu hình pháo hoa
    const fireworksConfig = [
        {left:"15%", color:"#FF4C4C", explosionType:"circle", size:"large", launchTime:0},
        {left:"70%", color:"#FFD24C", explosionType:"star", size:"medium", launchTime:0},
        // ... (Giữ nguyên fireworksData như code gốc)
    ];

    fireworksConfig.forEach(config => {
        setTimeout(() => launchRocket(container, config), config.launchTime);
    });
    
    const maxTime = Math.max(...fireworksConfig.map(f => f.launchTime));
    setTimeout(() => launchGrandFinaleRocket(container), maxTime + 4000);
});
</script>

Code pháo hoa phù hợp với Website có nền màu trắng sáng

Đây là code pháo hoa khi bắn sẽ có thân pháo hoa pháo hình lắp lánh, tỏa sáng đối với các web có nền trắng, tạo hiệu ứng lung linh

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo Pháo Hoa</title>
  <style>
    body {
      margin: 0;
      background-color: #808080; /* Màu xám cho nền */
      overflow: hidden;
    }
    #fireworksCanvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 9999;
    }
  </style>
</head>
<body>
  <canvas id="fireworksCanvas"></canvas>
  
  <script>
    const canvas = document.getElementById('fireworksCanvas');
    const ctx = canvas.getContext('2d');
    let width = window.innerWidth;
    let height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;

    const fireworks = [];

    class Firework {
      constructor(x, targetY, colors) {
        this.x = x;
        this.y = height; // Xuất phát từ đáy màn hình
        this.targetY = targetY; // Mục tiêu vị trí phát nổ
        this.colors = colors;
        this.exploded = false;
        this.speedY = -6; // Tốc độ bay lên
        this.previousPositions = []; // Lưu trữ các vị trí trước đó để vẽ tia sáng
        this.particles = []; // Lưu hạt pháo hoa khi nổ
      }

      createParticles() {
        for (let i = 0; i < 80; i++) {
          this.particles.push({
            x: this.x,
            y: this.y,
            speed: Math.random() * 3 + 1,
            angle: Math.random() * Math.PI * 2,
            radius: Math.random() * 2 + 1,
            color: this.colors[Math.floor(Math.random() * this.colors.length)],
            alpha: 1,
            decay: Math.random() * 0.02 + 0.01,
          });
        }
      }

      update() {
        if (!this.exploded) {
          // Lưu vị trí hiện tại vào mảng previousPositions
          this.previousPositions.push({ x: this.x, y: this.y });

          // Giữ lại chỉ một số lượng giới hạn vị trí để không làm đầy bộ nhớ
          if (this.previousPositions.length > 10) {
            this.previousPositions.shift();
          }

          // Di chuyển pháo hoa lên
          this.y += this.speedY;
          if (this.y <= this.targetY) {
            this.exploded = true;
            this.createParticles();
          }
        } else {
          this.updateParticles();
        }
      }

      updateParticles() {
        this.particles.forEach((particle, index) => {
          particle.x += Math.cos(particle.angle) * particle.speed;
          particle.y += Math.sin(particle.angle) * particle.speed;
          particle.alpha -= particle.decay;

          if (particle.alpha <= 0) {
            this.particles.splice(index, 1);
          }
        });
      }

      draw() {
        if (!this.exploded) {
          // Vẽ tia sáng bằng các đoạn thẳng giữa các vị trí trước đó
          ctx.beginPath();
          for (let i = 0; i < this.previousPositions.length - 1; i++) {
            const start = this.previousPositions[i];
            const end = this.previousPositions[i + 1];
            ctx.moveTo(start.x, start.y);
            ctx.lineTo(end.x, end.y);
          }
          // Sử dụng màu sắc ngẫu nhiên cho tia sáng
          ctx.strokeStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
          ctx.lineWidth = 2; // Độ dày của tia sáng
          ctx.stroke();
        } else {
          // Vẽ các hạt pháo hoa khi nổ
          this.particles.forEach((particle) => {
            ctx.beginPath();
            ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
            ctx.fillStyle = `rgba(${particle.color.r}, ${particle.color.g}, ${particle.color.b}, ${particle.alpha})`;
            ctx.fill();
          });
        }
      }

      isDone() {
        return this.exploded && this.particles.length === 0;
      }
    }

    function createFirework() {
      const x = Math.random() * width; // Vị trí bắn pháo hoa ngẫu nhiên
      const targetY = Math.random() * (height / 2); // Mục tiêu phát nổ trong nửa trên màn hình
      const colors = [
        { r: 255, g: 0, b: 0 },    // Đỏ
        { r: 255, g: 255, b: 0 },  // Vàng
        { r: 0, g: 255, b: 0 },    // Xanh lá
        { r: 0, g: 0, b: 255 },    // Xanh dương
        { r: 255, g: 0, b: 255 },  // Tím
      ];
      fireworks.push(new Firework(x, targetY, colors));
    }

    function animateFireworks() {
      ctx.clearRect(0, 0, width, height);
      fireworks.forEach((firework, index) => {
        firework.update();
        firework.draw();

        if (firework.isDone()) {
          fireworks.splice(index, 1);
        }
      });

      requestAnimationFrame(animateFireworks);
    }

    // Tạo pháo hoa mới mỗi 3 giây
    setInterval(() => {
      createFirework();
    }, 3000);

    window.addEventListener('resize', () => {
      width = window.innerWidth;
      height = window.innerHeight;
      canvas.width = width;
      canvas.height = height;
    });

    animateFireworks();
  </script>
</body>
</html>

Hiệu ứng code pháo hoa là một trong những cách thú vị để tạo điểm nhấn và tăng tính thẩm mỹ cho các trang web hoặc sự kiện đặc biệt như Tết, Giáng Sinh, hay kỷ niệm. Code pháo hoa trong bài được được thiết kế bằng HTML, CSS, và JavaScript, giúp tạo ra những vụ nổ pháo hoa sống động, nhiều màu sắc và có thể dễ dàng tích hợp vào bất kỳ dự án nào. Cảm ơn chủ website https://quaqueviet.nguyenlan.io.vn/ đã share code cho mọi người

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

Tôi có thể sử dụng code pháo hoa này trên website của mình không?

Có, code pháo hoa được viết bằng JavaScript, HTML và CSS, tương thích với hầu hết các trình duyệt hiện đại và dễ dàng tích hợp vào website của bạn.

Code pháo hoa có ảnh hưởng đến tốc độ tải trang web không?

Không đáng kể. Code được tối ưu để nhẹ nhàng và không gây ảnh hưởng đến tốc độ tải trang web.

Tôi có thể tùy chỉnh code pháo hoa theo ý muốn không?

Có, bạn có thể tùy chỉnh màu sắc, kích thước, tần suất và hiệu ứng của pháo hoa để phù hợp với thiết kế website của mình.

Bên cạnh việc trang trí hoa mai đào rơi cho Website, bạn có thể thực hiện hiệu ứng pháo hoa cho đẹp mắt. Ngoài ra mình cũng đã chia sẻ cách tạo hiệu ứng tuyết rơi khi di chuột trên máy tính bằng phần mềm giúp máy tính trong sinh động hơn mùa noel.

Xem demo hiệu ứng tại đây, nhớ rê chuột để thấy hiệu ứng.

Full code pháo hoa di chuột trên Website

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fireworks Effect</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
        }

        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="fireworksCanvas"></canvas>

    <script>
        const canvas = document.getElementById("fireworksCanvas");
        const ctx = canvas.getContext("2d");

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        window.addEventListener("resize", () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });

        class Particle {
            constructor(x, y, color) {
                this.x = x;
                this.y = y;
                this.color = color;
                this.size = Math.random() * 5 + 1;
                this.speedX = Math.random() * 4 - 2;
                this.speedY = Math.random() * 4 - 2;
                this.life = Math.random() * 30 + 50;
            }

            update() {
                this.x += this.speedX;
                this.y += this.speedY;
                this.size *= 0.96;
                this.life--;
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        }

        const particles = [];

        function createFireworks(x, y) {
            const colors = ["#ff5733", "#33ff57", "#5733ff", "#f4ff33", "#ff33e3"];
            for (let i = 0; i < 50; i++) {
                const color = colors[Math.floor(Math.random() * colors.length)];
                particles.push(new Particle(x, y, color));
            }
        }

        function animate() {
            ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            particles.forEach((particle, index) => {
                if (particle.life <= 0 || particle.size <= 0.1) {
                    particles.splice(index, 1);
                } else {
                    particle.update();
                    particle.draw();
                }
            });

            requestAnimationFrame(animate);
        }

        canvas.addEventListener("mousemove", (e) => {
            createFireworks(e.clientX, e.clientY);
        });

        animate();
    </script>
</body>
</html>

Thêm code pháo hoa vào WordPress

Nếu Website bạn dùng WordPress, thì cần tinh chỉnh một xíu để ẩn nền đen của code gốc đi. Bạn có thể tải nhanh Plugin Hiệu Ứng Pháo Hoa Theo Chuột tại đường link này. Sau khi tải về chỉnh cần upload trong mục Plugin và kích hoạt. Sau đó xóa cache (nếu có) và truy cập vào bài viết bất kỳ để thưởng thức màn pháo hoa trên Website của bạn. Bạn có thể xem demo ngay trên viết này.

Thêm code pháo hoa theo chuột vào Blogspot/Website khác

Bạn vào Menu đổi theme của Blogspot, edit html và thực hiện các bước sau:

1. Vào Blogspot Dashboard
2. Theme > Edit HTML
3. Dán code vào vị trí tương ứng bên dưới

Thêm code Trong phần <head>

<style>
#fireworksCanvas {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 999999;
    mix-blend-mode: screen;
}
</style>

Ngay trước thẻ đóng </body>

<canvas id="fireworksCanvas"></canvas>
<script src="https://anonyviet.com/resource/plugin-phao-hoa-theo-chuot/fireworks.js"></script>

Hiệu ứng pháo hoa bắn theo chuột là một cách tuyệt vời để làm nổi bật website của bạn, tạo ra trải nghiệm hấp dẫn cho người truy cập. Hãy thử tích hợp ngay hôm nay và mang đến sự khác biệt cho trang web của bạn!

Nếu bạn gặp khó khăn hoặc có thắc mắc khi sử dụng code này, đừng ngần ngại để lại bình luận hoặc liên hệ để được hỗ trợ.

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

Hiệu ứng pháo hoa hoạt động như thế nào?

Hiệu ứng sử dụng JavaScript để tạo ra các hạt nhỏ (particles) xuất hiện và lan tỏa khi chuột di chuyển. Màu sắc của hạt được chọn ngẫu nhiên, tạo ra hiệu ứng pháo hoa sống động.

Tôi có thể sử dụng code này trên nền tảng nào?

Code này hoạt động trên hầu hết các trình duyệt web hiện đại. Hướng dẫn cụ thể được cung cấp cho WordPress, Blogspot và các website khác.

Nếu tôi gặp sự cố khi cài đặt, tôi nên làm gì?

Hãy kiểm tra lại xem bạn đã thêm code vào đúng vị trí trong file HTML của website. Nếu vẫn gặp vấn đề, vui lòng để lại bình luận để được hỗ trợ.

Code chuyển theme Website sang nền trắng đen

Đổi nền trắng đen cho WordPress

Nếu bạn dùng WordPress, hãy truy cập vào Menu -> Apperance -> Customize -> Custom CSS vào copy đoạn code CSS này vào, sau đó save lại:

html {filter: grayscale(100%);}

Nếu bạn dùng Theme có chức năng tinh chỉnh CSS, thì vào Menu chỉnh CSS của theme đó nhé. Sau đó bạn truy cập vào trang chủ website của bạn để thấy xem sự thay đổi màu sắc giao diện của Website

Code này mình sưu tầm trên Facebook

Đổi nền trắng đen cho Blogspot

Blogspot là nền tảng tạo blog miễn phí của Google, bạn cũng có thể đổi nền trắng đen để tưởng nhớ hoặc Quốc tang bằng chỉnh chỉnh CSS cho theme của Website.

Bước 1: Truy cập vào bảng điều khiển Blogspot của bạn.

Bước 2: Chọn “Theme” từ menu bên trái.

Bước 3: Nhấp vào dấu mũi tên bên cạnh chữ “Customize”

Bước 4: “Edit HTML” (tùy vào giao diện blogspot của bạn).

Bước 5: Phía dưới thẻ <head>, copy đoạn code này và save lại để hoàn tất chuyển Code chuyển giao diện Website sang nền trắng đen để tưởng nhớ hoặc để Quốc tang:

html {
    filter: grayscale(100%);
}

Đây là mẫu ví dụ đổi theme trắng đen cho Blogspot:

Đổi nền trắng đen cho Website code tay

Tương tự như blogspot, bạn thêm đoạn css vào phía dưới thẻ <head> có thể dùng đoạn code mẫu dưới đây:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <style>
        html {
            filter: grayscale(100%);
        }
    </style>
</head>
<body>
    <h1>Welcome to AnonyViet</h1>
    <p>Chuyển nền trắng đen cho website.</p>
</body>
</html>

Code chuyển giao diện website sang nền trắng đen là một cách đơn giản và hiệu quả để thể hiện sự tôn trọng và tưởng nhớ trong những thời điểm tang thương. Với những hướng dẫn chi tiết trong bài viết này, bạn có thể dễ dàng thực hiện điều này trên website của mình.

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

Làm thế nào để chuyển giao diện website sang chế độ trắng đen trên WordPress?

Trên WordPress, bạn truy cập Menu -> Appearance -> Customize -> Custom CSS và thêm đoạn code html { filter: grayscale(100%); } vào. Lưu lại thay đổi để áp dụng.

Tôi có thể áp dụng hiệu ứng trắng đen cho website Blogspot như thế nào?

Với Blogspot, truy cập bảng điều khiển, chọn “Theme”, nhấp vào “Customize”, tìm “Edit HTML” và thêm html { filter: grayscale(100%); } phía dưới thẻ <head>. Lưu lại để hoàn tất.

Nếu website của tôi được code tay, tôi cần làm gì để chuyển sang chế độ trắng đen?

Thêm đoạn code html { filter: grayscale(100%); } vào phần <style> trong phần <head> của mã nguồn HTML website.

• Phát hiện và chặn phần mềm độc hại: Wordfence quét các tệp web của bạn để tìm phần mềm độc hại và chặn các cuộc tấn công độc hại trước khi chúng có thể gây hại.
• Phòng chống brute force: Wordfence chặn các cuộc tấn công brute force nhằm mục đích đoán mật khẩu của người dùng.
• Báo động và thông báo: Wordfence thông báo cho bạn về các hoạt động đáng ngờ trên trang web của bạn và cung cấp thông tin chi tiết về các cuộc tấn công.
• Tường lửa mạng: Wordfence có một tường lửa mạng mạnh mẽ giúp chặn các cuộc tấn công từ mạng lưới.
• Quét thời gian thực: Wordfence quét trang web của bạn theo thời gian thực để tìm các mối đe dọa tiềm ẩn.
• Hỗ trợ nhiều ngôn ngữ: Wordfence hỗ trợ nhiều ngôn ngữ, bao gồm tiếng Việt.

So sánh Wordfence Security bản miễn phí và Premium

Hướng dẫn Active Wordfence Security Premium miễn phí

Bản free của Wordfence Security hầu như cũng đã đáp ứng đủ yêu cầu người dùng, tuy nhiên nếu bạn muốn nâng cấp lên bản Wordfence Security Premium, có 1 cách khá đơn giản là chỉnh lại Code active của plugin này. Cách này đảm bảo an toàn và không dùng ứng bên thứ 3 nên bạn có thể tự làm để kích hoạt được các tính năng của Wordfence Security Premium.

Sau khi cài đặt Plugin Wordfence Security xong hoặc tải Plugin Wordfence Security từ trang chủ wordpress, bạn truy cập vào thư mục: wp-content/plugins/wordfence/lib/

Tìm và mở file wordfenceClass.php bằng chương trình soạn thảo như notepad++, sublime text hoặc notepad cũng được.

nhấn Ctrl + F tìm đoạn code sau:  if (!WFWAF_SUBDIRECTORY_INSTALL && $waf = wfWAF::getInstance()) {

Tùy mỗi phiên bản, nó sẽ ở nằm cách dòng khác nhau, như ở bản 7.11.6 thì nó sẽ nằm ở dòng 2145.

Bạn sẽ thấy 3 đoạn code này sau khi tìm:

if (!WFWAF_SUBDIRECTORY_INSTALL && $waf = wfWAF::getInstance()) {
$homeurl = wfUtils::wpHomeURL();
$siteurl = wfUtils::wpSiteURL();

Bây giờ thêm đoạn code này vào phía dưới của cụm code trên:

wfConfig::set('isPaid', 1);
wfConfig::set('keyType', wfLicense::KEY_TYPE_PAID_CURRENT);
wfConfig::set('premiumNextRenew', time()+31536000);

Kết quả ta sẽ được như hình là ok:

Bây giờ bạn Save lại và vào lại Plugin sẽ thấy active Active Wordfence Security Premium miễn phí. Thấy xuất hiện dòng: Premium License Expiring là thành công.

Mỗi khi update plugin có thể cấu trúc code sẽ thay đổi, do đó bạn phải active Wordfence Security Premium miễn phílại từ đầu nhé.

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

Tôi có cần kiến thức lập trình để kích hoạt Wordfence Security Premium miễn phí không?

Không cần kiến thức lập trình chuyên sâu. Bạn chỉ cần biết cách sử dụng trình soạn thảo văn bản như Notepad++ hoặc Sublime Text để chỉnh sửa file code và tìm kiếm đoạn code cần thiết.

Nếu tôi cập nhật plugin Wordfence, việc kích hoạt Premium có bị ảnh hưởng không?

Có thể. Cấu trúc code có thể thay đổi sau mỗi lần cập nhật. Bạn cần thực hiện lại các bước kích hoạt như hướng dẫn trong bài viết.

Phương pháp này có an toàn cho website của tôi không?

Phương pháp này tương đối an toàn vì chỉ chỉnh sửa file code trong plugin, không can thiệp vào các file cốt lõi của WordPress. Tuy nhiên, vẫn nên sao lưu website trước khi thực hiện.

Let’s go!

1. Yêu Cầu

Đầu tiên, chúng ta sẽ bắt đầu bằng yêu cầu của nghiệp vụ.

– (Automation) Một giải pháp thanh toán tự động: Nó không chỉ tạo ra sự thuận tiện và tăng trải nghiệm của người dùng mà còn giảm chi phí vận hành “bằng cơm”.

– (Security) Tính bảo mật cao: Liên quan tới tiền, tài chính thì yếu tố này đặc biệt quan trọng, nó có thể ảnh hưởng trực tiếp tới business. 

– (Pricing) Phí giao dịch thấp: Khi số lượng giao dịch lớn hoặc tỷ suất lợi nhuận của bạn thấp, nếu phí trên mỗi giao dịch cao thì tổng phí giao dịch là một khoản đáng kể.

– (Scalability) Hỗ trợ nhiều phương thức thanh toán: Do người dùng của hệ thống có thể là sinh viên, người đi làm hoặc người có thói quen sử dụng thẻ thanh toán quốc tế. Ngoài ra, về sau nghiệp vụ có thể mở rộng hỗ trợ cả thanh toán trả góp. Do đó, việc hỗ trợ nhiều phương thức thanh toán là cần thiết.

– Ngoài ra, chúng ta có thể đánh giá thêm các yếu tố như độ ổn định, hỗ trợ khách hàng, khuyến mãi, giao diện, độ khó tích hợp, quản lý và các tính năng khác, …

Như vậy, chúng ta sẽ cần tích hợp một cổng thanh toán để giải quyết yêu cầu trên của nghiệp vụ. Bên cạnh đó, cổng thanh toán cần đáp ứng được ít nhất là 4 yếu tố chính trên.

2. Tại Sao là VNPay QR?

Đầu tiên, tại sao lại là VNPay QR? Thứ nhất, bên mình không quảng cáo cho VNPay. Và bên mình cũng chưa trải nghiệm hết tất cả các bên cung cấp giải pháp thanh toán nên việc so sánh giữa các bên là không khách quan. Mỗi bên đều có ưu nhược điểm, việc lựa chọn sẽ phụ thuộc vào yêu cầu cụ thể của bạn.

Dưới đây mình đưa một số thông tin để bạn tham khảo nhé.

2.1. Bảo Mật

Quan điểm của mình là nên chọn những nhà cung cấp lớn và uy tín thì khả năng có tính bảo mật cao. Tuy chưa có một thống kê cụ thể về thị phần nhưng theo mình có thể kể đến các ông lớn sau:

– Napas

– Momo

– VNPay

– Viettel Paygate

Mình đoán những năm gần đây VNPay đang dần vươn lên trong thị trường ví điện tử, giải pháp thanh toán. Chúng ta dễ dàng nhìn thấy nhiều chiến dịch marketing rầm rộ từ trên TV, biển quảng cáo trên những trục đường to, cho đến những quán cơm nhỏ có những chiếc loa nhỏ nhỏ xinh xinh thông báo biến động số dư. Kéo theo mảng về cổng thanh toán VNPay QR cũng phát triển.

Xét về thông số bảo mật, hầu hết các bên cung cấp đều tuân thủ tiêu chuẩn bảo mật PCI DSS. Nhưng ta cần đánh giá thêm về version và level của PCI DSS. Nôm na, version cao, level thấp là tốt. Ví dụ version 4.0, level 1 là “xịn”.

Thông tin PCI DSS của một số cổng thanh toán

Theo thông tin trên, VNPay QR có độ bảo mật đứng thứ 2 và Momo có độ bảo mật cao nhất.

2.2. Phí

Dưới đây là bảng giá của một số cổng thanh toán với phương thức thanh toán là QR mobile banking (nội địa).

Chúng ta có thể thấy VNPay QR có phí giao dịch không phải rẻ so với các bên khác.

2.3. Yếu Tố Khác

Bên cạnh đó, VNPay QR có:

• Tốc độ xử lý giao dịch nhanh và ổn định.
• Sale và hỗ trợ kỹ thuật đều nhiệt tình hỗ trợ.
• Giao diện không quá đẹp nhưng thân thiện.
• Liên kết với nhiều ngân hàng.
• Thỉnh thoảng có khuyến mãi hấp dẫn.
• Tính năng quản lý đầy đủ.
• Hỗ trợ phương thức trả góp, một tính năng hay và business sẽ sử dụng trong tương lai.

Tuy có nhiều điểm mạnh nhưng VNPay QR cũng có những điểm cần cải thiện, mình sẽ đề cập ở các phần sau.

3. Thiết Kế

Về luồng tích hợp, mọi người có thể xem thêm tại trang docs của VNPay QR giúp mình nhé.

https://sandbox.vnpayment.vn/apis/docs/thanh-toan-pay/pay.html 

Trong docs đang chỉ vẽ và mô tả luồng thanh toán bằng thẻ. Tuy nhiên phương thức thanh toán mà khách hàng hay sử dụng lại là QR mobile banking nên mình sẽ vẽ thêm cho luồng phương thức thanh toán QR theo kiểu khác. Ngoài ra, mình sẽ vẽ thêm luồng tiền để mọi người dễ hiểu và có bức tranh toàn cảnh hơn.

3.1. Luồng Thanh Toán QR

Chú thích: 

• Ronin FE: frontend của RoninHub
• Ronin BE: backend của RoninHub
• PGW FE: frontend của cổng thanh toán VNPay QR
• PGW BE: backend của cổng thanh toán VNPay QR
• Bank: ngân hàng mà khách hàng sử dụng, cũng là ngân hàng mà cổng thanh toán có kết nối.
• Luồng trên là happy case.

Luồng:

1. User thao tác tạo yêu cầu thanh toán trên Ronin FE.
2. Ronin FE gửi yêu cầu thanh toán lên Ronin BE.
3. Ronin BE xử lý yêu cầu thanh toán, tạo transaction lưu xuống DB
4. Ronin BE tạo ra 1 URL thanh toán có dạng sau và gửi về cho Ronin FE. Trong URL thanh toán chứa thông tin thanh toán, Return URL (được sử dụng ở bước 9.2) và các thông tin khác. Payment URL Sample: https://codefile.io/f/czM3UMeADE
5. Ronin FE (browser) sẽ điều hướng sang PGW FE theo URL thanh toán trên.
6. Client chọn phương thức thanh toán QR. Mã QR sẽ hiện trên web của cổng. Client sử dụng app ngân hàng quét QR và thực hiện xác thực để thanh toán.
7. Ứng dụng ngân hàng của Client sẽ gửi lệnh chuyển khoản lên Bank.
8. Khi tài khoản của VNPay tại Bank có biến động số dư, Bank sẽ gửi thông báo giao dịch về cho VNPay.
9. Sau khi VNPay xử lý giao dịch thành công, hệ thống sẽ thực hiện đồng thời 2 bước (9.1 và 9.2).
9.1.1. VNPay gửi thông báo kết quả giao dịch về cho Ronin BE bằng cách gọi API IPN (Instant Payment Notification) của Ronin BE
9.1.2. Ronin BE thực hiện cập nhận trạng thái giao dịch của hệ thống.
9.2.1. VNPay BE gửi yêu cầu điều hướng tới VNPay FE.
9.2.2. VNPay FE sẽ được điều hướng về lại Ronin FE theo Return URL được tạo ở bước 4.
9.2.3. Ronin FE sẽ định kỳ kiểm tra trạng thái của giao dịch bằng cách gọi API của Ronin BE. Vì bước 9.1 và 9.2 được thực hiện đồng thời nên có thể 9.2 được thực hiện trước khi giao dịch được cập nhật trạng thái ở bước 9.1.

3.2. Luồng Tiền

Cổng thanh toán VNPay QR liên kết với nhiều ngân hàng, lúc đó ở mỗi ngân hàng sẽ tồn tại (ít nhất) 2 tài khoản của VNPay QR.

– 1 tài khoản PGW Merchant Account dùng để tiếp nhận lệnh thanh toán từ phía tài khoản khách hàng Client Account.

– 1 tài khoản PGW Settlement Account dùng để quyết toán (settlmentsettlement) cho tài khoản Merchant Account (tài khoản ngân hàng của Ronin Engineer)

– Đối với ngân hàng, VNPay là 1 merchant kết nối với ngân hàng. Còn đối với VNPay, Ronin Engineer là 1 merchant kết nối với cổng thanh toán.

Như vậy, mọi người có thể hình dung luồng tiền sẽ đi như sau:

1. Client thao tác thanh toán QR trên ứng dụng ngân hàng. 
2. Ví dụ ngân hàng khách hàng sử dụng là Techcombank. Sau khi xác thực thành công, tài khoản khách hàng (Client Account) sẽ chuyển khoản tới PGW Merchant Account tại Techcombank.
3. VNPay có kết nối với Techcombank nên khi tài khoản PGW Merchant Account có biến động số dư thì ngân hàng sẽ gửi thông báo, thông tin giao dịch về cho VNPay để VNPay xử lý.
4. VNPay xử lý xong sẽ gửi thông báo về Ronin BE tại IPN API.
5. Sau đó, VNPay gom các thanh toán vào ngày T và thực hiện quyết toán cho Merchant vào ngày T + 1. 
6. Ví dụ merchant Ronin sử dụng ngân hàng BIDV, VNPay sẽ gửi lệnh quyết toán tới tài khoản PGW Settlement Account tại BIDV và chuyển khoản cho Merchant Account (toàn khoản của Ronin).
7. Định kỳ VNPay thực hiện đối soát với ngân hàng. Kiểm tra, so sánh giao dịch giữa cổng thanh toán và ngân hàng để đảm bảo tất cả giao dịch đã được ghi chép chính xác và đầy đủ.

Lưu ý:

– Bước 2 và bước 6 là phản ánh luồng tiền.

– Từ bước 1 đến 4 sẽ được thực hiện tại thời điểm giao dịch và trong ngày T.

– Bước 5 và 6 thực hiện tại ngày T + 1.

– Cùng trong 1 thanh toán, nhưng 3 hệ thống khác nhau (bank, payment gateway, merchant), mỗi hệ thống sẽ ghi nhận 1 mã giao dịch khác nhau.

4. Code Mẫu

Đối với luồng thanh toán có 2 bước quan trọng đó là bước 4 (tạo giao dịch và URL thanh toán) và bước 9.1 (API IPN nhận thông báo kết quả giao dịch).

Mình sẽ cùng mọi người review code mẫu nodejs trên trang docs của VNPay nha.

Trước khi review, mọi người vui lòng đọc trước tài liệu kỹ thuật của VNPay để nắm được ý nghĩa của các tham số nhé.

https://sandbox.vnpayment.vn/apis/docs/thanh-toan-pay/pay.html 

4.1. API Tạo URL Thanh Toán

Code mẫu tạo Payment URL: https://codefile.io/f/qAAxf2shgq 

– Đầu tiên, chúng ta nên làm theo những hướng dẫn của VNPay. Cung cấp đầy đủ các tham số và đúng định dạng. Ví dụ một số tham số mọi người cần lưu ý sau.

– vnp_Amount số tiền thanh toán, không có dấu thập phân và phải nhân thêm 100 trước khi gửi sang VNPay.

– Những tham số dạng date có timezone là +7 và format là yyyyMMddHHmmss. Mình chưa hiểu lý do vì sao VNPay không để format ISO

– vnp_IpAddr là string. Nếu lấy IP address theo code mẫu thì giá trị có thể là nhiều địa chỉ IP nối nhau như này 13.160.92.202, 12.161.56.21. Như vậy, không đúng định dạng trong docs. Mọi người nên chỉ lấy 1 địa chỉ IP, có thể là IP đầu tiên hoặc IP cố định của server. Để tránh lỗi có thể xảy ra ở đầu VNPay.

– vnp_ExpireDate mọi người nên đặt thời gian hết hạn. Tham số này trong code mẫu khai báo. Mọi người không nên đặt thời gian quá dài, không nên quá 30p, mình đang để 15p.

– vnp_Version nên sử dụng version mới. Lý do tại sao mình sẽ đề cập tại ở phần bảo mật bên dưới.

– vnp_TxnRef là mã giao dịch tại Ronin BE. Mọi người lưu ý đối với trường hợp mua hàng trên web, lúc đó entity Order sẽ được sinh ra trước, entity Transaction sẽ được sinh ra sau. Ngoài ra, có trường hợp không order nhưng vẫn có transaction. Ví dụ như hoàn tiền (refund). Vậy nên, mọi người lưu ý cần tách biệt 2 entity này ra và vnp_TxnRef nên để là transaction_id.

– Để code clean hơn, mọi người có thể sắp xếp thứ tự tầm quan trọng của các tham số theo chiều giảm dần và nhóm các tham số có quan hệ với nhau thành một nhóm. Ví dụ như sau:

👉 Code mẫu thứ tự khởi tạo params: https://codefile.io/f/Q8qFW121nr 

4.2. API IPN

👉 Code mẫu xử lý IPN: https://codefile.io/f/uIO3R2H1PZ 

– Nhiệm vụ của API IPN này là nhận thông báo kết quả giao dịch và cập nhật lại trạng thái của transaction, order.

– Đầu tiên, chúng ta cần validate những tham số sau:

– secureHash mình sẽ nói sâu hơn ở phần sau. 

– Kiểm tra order có tồn tại hay không

– Kiểm tra số tiền có bằng số tiền của order gốc không

– Kiểm tra trạng thái giao dịch và xử lý giao dịch theo từng trạng thái. 

– Trong trường hợp, bạn để vnp_TxnRef là transaction id thì bạn cần kiểm tra cả transaction và order tương ứng với transaction. Sau đó, cập nhật trạng của cả transaction và order tương ứng.

– Trong code mẫu, sử dụng nested condition rất nhiều, như vậy code sẽ khó đọc. Trường hợp này, mình khuyến kích mọi người sử dụng Early Return pattern để code tường minh hơn. 🧼

https://gomakethings.com/the-early-return-pattern-in-javascript/ 

– Những biến như secretKey, querystring, crypto chúng ta có thể khởi tạo lúc start app, trước khi chạy function này.

– Mình không chuyên về javascript, nếu mọi người có thêm nhận xét thì comment ở dưới giúp mình nhé. 🙏

5. Bảo Mật

5.1. Tính đúng đắn dữ liệu và Xác thực

Trong luồng payment này, chúng ta cần giải quyết được 2 vấn đề bảo mật sau:

– Data integrity: Làm sao đảm bảo tính đúng đắn của dữ liệu? Do payment request được tạo ra ở BE và được gửi về cho FE để client thực hiện thanh toán. Tuy nhiên, phía client là phía dễ bị can thiệp nên chúng ta cần đảm bảo thông tin của payment request không bị sửa đổi trong quá trình vận chuyển từ BE → FE → VNPay.

– Authentity: Làm sao để xác thực rằng đầu tạo payment request là Ronin merchant và đầu gửi IPN là VNPay?

– Liệu có thể sử dụng 1 cơ chế để giải quyết được đồng thời 2 bài toán trên?

Đầu tiên, HTTPS không đáng tin cậy 100% do một số lỗ hổng của giao thức SSL/TLS và các version cũ. Ngoài ra, HTTPS chỉ mã hoá (che giấu) dữ liệu khi truyền tải (BE → FE), trong trường hợp này ta cần đảm bảo dữ liệu không bị sửa đổi ở đầu FE. Do đó, ta cần kết hợp thêm một cơ chế nữa để tăng cường bảo mật.

Một cơ chế mà giải quyết được đồng thời 2 bài toán trên thì chúng ta có thể nghĩ tới Message Authentication Code (key-based hash function) và chữ ký số (digital signature). Mỗi cơ chế đều có ưu nhược điểm. Thông thường, digital signature sử dùng asymmetric key, còn key-based hash sử dụng symmetric key. Key-based hash có hiệu suất tốt hơn nhưng độ bảo mật thường kém hơn so với digital signature. Trong trường hợp này, chúng ta cần đáng giá thêm yếu tố dễ dàng tích hợp. So với digital signature, key-based hash có ưu thế hơn ở điểm này. Do đó, VNPay sử dụng key-based hash, cụ thể là HMACSHA512.

Đầu merchant và đầu cổng thanh toán cần thống nhất với nhau một hash secret trước khi tích hợp. VNPay sẽ generate ra hash secret rồi gửi email cho merchant. Lúc này, mỗi khi tạo payment request, đầu merchant (Ronin BE) cần kết hợp thông tin thanh toán với secret, rồi hash (HMACSHA512) kết quả kết hợp. Cuối cùng, được giá trị vnp_SecureHash gửi về cho Ronin FE. Secure Hash đảm bảo nội dung của payment request không bị can thiệp, sửa đổi ở đầu FE. Khi gửi payment request lên VNPay, hệ thống sẽ sử dụng hash secret để xác thực chỉ có merchant Ronin mới có thể tạo ra payment request này.

5.2. Cập Nhật Trạng Thái Thanh Toán

Lưu ý, bước ReturnURL được thực hiện ở phía client mà phía client là phía dễ bị can thiệp hơn. Do đó, bước cập nhật trạng thái transaction/order phải được thực hiện ở bước IPN (bước 9.1), không được thực hiện ở bước ReturnURL (bước 9.2).

5.3. Whitelist

Để tăng cường bảo mật, chúng ta nên whitelist, chỉ cho phép một số địa chỉ IP có thể gọi vào API IPN. Đội kỹ thuật bên VNPay sẽ cung cấp danh sách địa chỉ IP này cho bạn.

5.4. Version

Best practice: nên sử dụng version mới nhất.

VNPay khuyến cáo sử dụng API version mới. Các thuật toán mã hóa phiên bản cũ đã kém an toàn và bảo mật. Merchant cần chuyển đổi sang phiên bản version 2.1.0 và thuật toán mã hóa HMACSHA512.

Nếu bạn có sử dụng các thư viện ngoài liên quan tới luồng payment thì nên kiểm tra lỗ hổng và update version của thư viện. Tránh sử dụng các method đã bị đánh deprecated.

Và sau khi update version thì nên test kỹ, ít nhất đảm bảo tất cả function đã chạy đúng.

6. Xử Lý Lỗi

Việc xử lý lỗi ở tất cả các bước đều quan trọng, nó giúp dễ debug và hạn chế được ảnh hưởng khi xảy ra lỗi. Và xử lý lỗi ở bước IPN đặc biệt quan trọng. Do đầu VNPay gọi vào API IPN, nếu ở đầu merchant xử lý lỗi tốt thì sẽ hạn chế ảnh hưởng tới đầu VNPay.

6.1. Response Code

Xử lý lỗi thế nào là tốt? Ít nhất chúng ta cần phải có try catch trong quá trình IPN. Ngoài ra, cần trả đúng mã lỗi theo hướng dẫn của VNPay.

Ví dụ:

–  Nếu xử lý giao dịch thành công thì trả về RspCode: ‘00’

– Nếu không tìm được order thì trả về RspCode: ‘01’

– …

Mọi người lưu ý: 

– vnp_ResponseCode và RspCode là 2 mã khác nhau.

– vnp_ResponseCode (request: VNPay → Merchant): mô tả chuyện gì đã xảy ra bên VNPay.

– RspCode (response: Merchant → VNPay): mô tả chuyện gì đã xảy ra trong quá trình xử lý IPN.

Tuy nhiên, tài liệu của VNPay đoạn này không rõ ràng. Và bên mình phải làm theo test cases trong môi trường test sandbox. Hy vọng đội kỹ thuật VNPay cải thiện lại tài liệu.

6.2. Retry

Tại sao cần trả đúng mã lỗi theo hướng dẫn của VNPay? Như vậy thì đầu VNPay sẽ biết xử lý lỗi gọi IPN như nào. Ví dụ:

– Xử lý giao dịch thành công (RspCode: ‘00’), VNPay sẽ kết thúc luồng thanh toán đó.

– Mã secure hash không hợp lệ (RspCode: ‘97’), VNPay sẽ thực hiện retry, gọi lại IPN.

Trong trường hợp RspCode: 01, 04, 97, 99 hoặc IPN timeout là những lỗi có thể retry thì VNPAY sẽ bật cơ chế retry IPN. Thực hiện retry tối đa 10, trong vòng 5 phút.

Như vậy, việc giao tiếp giữa Merchant và VNPay sẽ đáng tin cậy hơn.

6.3. Idempotent Handler

Tuy nhiên, việc retry có thể dẫn đến vấn đề lặp (duplicate) message. Để giải pháp cho vấn đề này phụ thuộc vào logic của IPN handler. Chúng ta cần kiểm tra trạng thái giao dịch trước khi thực hiện câp nhật trạng thái. Ví dụ, nếu giao dịch ở trạng thái PROCESSING thì cho phép thực thi tiếp, còn ở trạng thái SUCCESSFUL, FAILED thì sẽ reject request.

7. Tracing

Trong giai đoạn đầu tích hợp, tỉ lệ xảy ra lỗi ở điểm tích hợp là khá cao. Do đó, chúng ta cần thu thập được nhiều thông tin để debug. Cụ thể, chúng ta nên đặt log ở đầu vào, đầu ra từng bước trong luồng thanh toán, cả case thành công, lẫn case thất bại, exception.

Mọi người lưu ý, cần đảm bảo có log ở bước 9.2.2 (Return URL). Bước này PGW FE sẽ redirect về Ronin FE để kiểm tra trạng thái giao dịch và hoàn tất luồng thanh toán. 

👉 Nginx logs: https://codefile.io/f/FeFlPs7hj2 

Tại sao lại cần có log ở bước này? bên mình đã gặp trường hợp client chuyển khoản thành công, Ronin BE nhận được IPN và xử lý thành công nhưng màn hình thanh toán QR (PWG FE) vẫn đứng hình, không redirect về Ronin FE. Mình có báo đội kỹ thuật bên VNPay check nhưng họ check không ra và bảo lỗi bên mình. Mình phải show log ở đầu nginx (bước 9.2.2) là để chứng minh lỗi bên VNPay, PWG FE chưa redirect sang Ronin FE. Sau đó, 2 bên cũng chưa tìm ra nguyên nhân gốc. Tuy nhiên, mình chỉ gặp 2 case như này, còn lại đều ổn định.

Để dễ dàng cho việc search log, biết được 1 payment request diễn ra như nào thì ở tất cả log cần chứa thông tin của correlation id (có thể là transaction_id, order_id).

8. Kiểm Thử

VNPay cung cấp môi trường test sandbox và hoạt động ổn định. Đội kỹ thuật sẽ gửi cho bạn đường dẫn tới trang cấu hình môi trường sandbox để bạn chủ động test.

Ảnh test case trên môi trường sandbox của VNPay

Trang này cho phép mình cấu hình IPN URL. Trong trường hợp, bạn chưa có môi trường deploy (chưa có một public IPN URL) và muốn test ở local. Bạn có thể tham khảo giải pháp tạo static domain đơn giản, miễn phí của ngrok. 

https://ngrok.com/blog-post/free-static-domains-ngrok-users 

ngrok http 8888 --domain=fox-funny-noticeably.ngrok-free.app

Sau khi test chức năng, tất cả test case thành công. Nếu bạn có yêu cầu tối thiểu về performance thì bạn có thể thực hiện theo bước load test. Tuy nhiên, do phụ thuộc vào môi trường sandbox của VNPay nên kết quả có thể không chính xác, không giống với môi trường production. Nhưng bạn nên thử load test qua để đảm bảo BE vẫn hoạt động tốt với lượng load lớn hơn.

9. Bước Tiếp Theo

Đối với phần thanh toán, team Ronin sẽ tiếp tục:

– Phát triển thêm các loại giao dịch khác.

– Hoàn thiện tài liệu.

– Truy vấn những giao dịch bị treo.

– Hoàn tiền (refund) tự động.

– Tích hợp phương thức trả góp.

10. Tổng Kết

Khi tích hợp với cổng thanh toán, chúng ta cần:

– Đánh giá nhiều yếu tố khi chọn giải pháp thanh toán như độ bảo mật, phí, độ ổn định, tính năng, tốc độ tích hợp, … VNPay có nhiều điểm đã làm tốt tuy nhiên phí giao dịch hơi cao và tài liệu chưa thực sự thân thiện.

– Nắm được cả về nghiệp vụ để hiểu rõ hơn về luồng thanh toán được xử lý như nào.

– Bảo mật là yếu tố quan trọng khi tích hợp và đặc biệt quan trọng đối với các hệ thống tài chính.

– Xử lý lỗi là việc làm cần thiết giúp cho hệ thống tin cậy (reliable) và khoẻ mạnh (robust) hơn.

Cám ơn mọi người đã đọc đến hết bài.

Nếu mọi người thấy bài viết hữu ích thì nhờ mọi người share để nội dung của Ronin được nhiều người biết hơn nữa. 🙏

Cám ơn mọi người, chúc mọi người nghỉ lễ vui vẻ.

 #payment #integration #backend #software_engineering

———

🧑‍💻 90+ Ronin Engineers: https://roninhub.com/khoa-hoc/software-development-advanced 

📚️ System Design VN: https://fb.com/groups/systemdesign.vn 

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

VNPay QR có bảo mật không?

VNPay là một trong những nhà cung cấp giải pháp thanh toán lớn và uy tín tại Việt Nam, tuân thủ tiêu chuẩn bảo mật PCI DSS. Mức độ bảo mật cụ thể phụ thuộc vào phiên bản và cấp độ PCI DSS của họ.

Phí giao dịch của VNPay QR như thế nào?

Phí giao dịch của VNPay QR có thể cao hơn so với một số nhà cung cấp khác. Tuy nhiên, chi phí cụ thể phụ thuộc vào nhiều yếu tố và nên tham khảo bảng giá mới nhất từ VNPay.

RoninHub tích hợp VNPay QR như thế nào?

RoninHub tích hợp VNPay QR thông qua API của VNPay. Luồng thanh toán bao gồm các bước: người dùng tạo yêu cầu trên Ronin FE, Ronin BE gửi yêu cầu đến VNPay, VNPay xử lý và trả kết quả về Ronin BE, cuối cùng Ronin FE hiển thị kết quả cho người dùng.