Có thể bạn quan tâm: Cách Vẽ Table Trong Android: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao
TÓM TẮT
- 1 Mở Đầu
- 2 1. Tổng Quan Về Table Trong MockingBot
- 3 2. Cú Pháp Cơ Bản Để Vẽ Table
- 4 3. Thực Hiện Table Trong Flow MockingBot
- 5 4. Tối Ưu Hóa Table Để Trải Nghiệm Người Dùng Tốt Nhất
- 6 5. Các Lỗi Thường Gặp Khi Vẽ Table Và Cách Khắc Phục
- 7 6. Ví Dụ Thực Tế: Xây Dựng Bảng Báo Cáo Doanh Thu
- 8 7. Các Công Cụ Hỗ Trợ Tạo Table Nhanh
- 9 8. Tổng Kết
Mở Đầu
MockingBot là một nền tảng chatbot mạnh mẽ, hỗ trợ người dùng tạo ra các kịch bản giao tiếp tự động mà không cần viết mã phức tạp. Một trong những tính năng quan trọng giúp nâng cao trải nghiệm người dùng là vẽ table (bảng) trong tin nhắn trả về. Bảng không chỉ giúp trình bày dữ liệu một cách rõ ràng, mà còn tạo cảm giác chuyên nghiệp, tăng tính thẩm mỹ và khả năng tương tác.
Bài viết này sẽ cung cấp cho bạn một hướng dẫn chi tiết, từng bước một, về cách vẽ table trong MockingBot. Chúng tôi sẽ giải thích khái niệm cơ bản, giới thiệu các phương pháp tạo bảng, cách tùy chỉnh kiểu dáng, và một số mẹo tối ưu để bảng hiển thị tốt trên mọi thiết bị. Ngoài ra, chúng tôi sẽ chia sẻ các ví dụ thực tế và các lỗi thường gặp để bạn có thể tránh được những rắc rối không đáng có.
Lưu ý: Bài viết này hướng tới người dùng đã có kiến thức cơ bản về MockingBot, bao gồm cách tạo flow, sử dụng block và trả lời người dùng. Nếu bạn chưa quen, hãy tham khảo tài liệu giới thiệu nền tảng trước khi tiến hành.
Có thể bạn quan tâm: Cách Vẽ T Gaming Minecraft: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao
1. Tổng Quan Về Table Trong MockingBot
1.1 Table là gì?
Table (bảng) trong MockingBot là một cấu trúc dữ liệu dạng HTML table được chuyển đổi thành dạng tin nhắn (text) hoặc rich message (tin nhắn giàu nội dung) mà người dùng cuối sẽ nhận được. Bảng có thể chứa:
- Tiêu đề (header): Dòng đầu tiên mô tả các cột.
- Dòng dữ liệu (row): Các hàng chứa thông tin thực tế.
- Ô (cell): Mỗi giao điểm giữa hàng và cột.
1.2 Khi nào nên sử dụng table?
| Trường hợp | Lý do |
|---|---|
| Liệt kê danh sách sản phẩm, giá, số lượng | Dễ so sánh và đọc nhanh |
| Thống kê số liệu (doanh thu, số lượng bán) | Trực quan, hỗ trợ quyết định |
| Hiển thị lịch trình, thời gian, địa điểm | Cấu trúc rõ ràng |
| Trình bày kết quả truy vấn dữ liệu | Định dạng chuẩn, không lộn xộn |
1.3 Định Dạng Table Được Hỗ Trợ
MockingBot hỗ trợ ba kiểu hiển thị bảng:
| Kiểu | Mô tả | Định Dạng |
|---|---|---|
| Plain Text Table | Bảng dạng text thuần, dùng ký tự |, -, : để vẽ |
Markdown-like |
| HTML Table | Bảng HTML chuẩn, được chuyển thành rich message | <table>...</table> |
| Rich Message Table | Được xây dựng bằng JSON theo chuẩn Carousel/Template của nền tảng | { "type": "table", ... } |
Trong phần sau, chúng ta sẽ tập trung vào Plain Text Table và HTML Table, vì chúng là hai cách phổ biến nhất và dễ thực hiện.
Có thể bạn quan tâm: Cách Vẽ Sữa Lên Mặt: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao
2. Cú Pháp Cơ Bản Để Vẽ Table
2.1 Plain Text Table (Markdown-like)
Đây là cách nhanh nhất, không cần viết HTML. Cú pháp tương tự như trong Markdown:
| Tiêu đề 1 | Tiêu đề 2 | Tiêu đề 3 |
|-----------|:--------:|----------:|
| Dòng 1 C1 | Dòng 1 C2 | Dòng 1 C3 |
| Dòng 2 C1 | Dòng 2 C2 | Dòng 2 C3 |
- Dòng tiêu đề: Bắt đầu và kết thúc bằng
|. - Dòng phân cách: Dùng
-để tạo đường kẻ,:để căn lề (trái, giữa, phải). - Các dòng dữ liệu: Cũng dùng
|để ngăn cách các ô.
2.1.1 Căn Lề
| Cú pháp | Kết quả |
|---|---|
:--- |
Căn trái |
:---: |
Căn giữa |
---: |
Căn phải |
2.1.2 Ví Dụ Thực Tế
| Sản phẩm | Giá (VNĐ) | Số lượng |
|----------|----------:|----------:|
| Bút bi | 5,000 | 100 |
| Sổ A5 | 15,000 | 50 |
| Thước kẻ| 7,000 | 80 |
Khi bot trả lời, người dùng sẽ nhận được:
| Sản phẩm | Giá (VNĐ) | Số lượng |
|---|---|---|
| Bút bi | 5,000 | 100 |
| Sổ A5 | 15,000 | 50 |
| Thước kẻ | 7,000 | 80 |
2.2 HTML Table
Nếu muốn kiểm soát chi tiết hơn (màu sắc, độ rộng cột, CSS), bạn có thể sử dụng HTML. MockingBot sẽ tự động chuyển HTML thành rich message nếu kênh hỗ trợ (ví dụ: Facebook Messenger, Zalo, Telegram).
2.2.1 Cú pháp cơ bản
<table border="1" cellpadding="5" cellspacing="0" style="border-collapse:collapse;"> <thead> <tr> <th>STT</th> <th>Tên sản phẩm</th> <th>Giá (VNĐ)</th> <th>Số lượng</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Bút bi</td> <td>5,000</td> <td>100</td> </tr> <tr> <td>2</td> <td>Sổ A5</td> <td>15,000</td> <td>50</td> </tr> <tr> <td>3</td> <td>Thước kẻ</td> <td>7,000</td> <td>80</td> </tr> </tbody>
</table>
Khi gửi, người dùng sẽ thấy một bảng có viền, màu nền tiêu đề tùy chỉnh (nếu thêm CSS). Để tránh lỗi, không dùng các thẻ script và giữ CSS trong thuộc tính style.
2.2.2 Tùy chỉnh màu sắc và độ rộng
<table border="0" cellpadding="8" cellspacing="0" style="width:100%;border:1px solid #e0e0e0;"> <thead style="background:#f5f5f5;"> <tr> <th style="width:10%;">STT</th> <th style="width:40%;">Tên sản phẩm</th> <th style="width:25%;text-align:right;">Giá (VNĐ)</th> <th style="width:25%;text-align:center;">Số lượng</th> </tr> </thead> <tbody> <!-- rows --> </tbody>
</table>
backgroundcho màu nền tiêu đề.text-alignđể căn lề nội dung trong ô.widthđể kiểm soát chiều rộng cột, hữu ích khi bảng hiển thị trên điện thoại.
Có thể bạn quan tâm: Cách Vẽ Sổ Kế Toán Chuẩn Xác Và Hiệu Quả: Hướng Dẫn Từ A Đến Z
3. Thực Hiện Table Trong Flow MockingBot
3.1 Tạo Block Trả Về Văn Bản (Text Block)
- Mở Flow: Vào
Flow Builder, chọn node nơi bạn muốn trả lời bằng bảng. - Thêm Block: Click Add Block → Text.
- Nhập nội dung: Sử dụng cú pháp Plain Text Table hoặc dán đoạn HTML vào ô nội dung.
- Lưu & Kiểm tra: Click Save, sau đó Test trong môi trường sandbox.
Mẹo: Khi dùng HTML, hãy bật tùy chọn Allow HTML (nếu có) để bot không tự động escape ký tự.
3.2 Sử Dụng Variable Động Để Điền Dữ Liệu
MockingBot hỗ trợ variables (biến) để chèn dữ liệu động (từ API, database, hoặc user input). Ví dụ, giả sử bạn có một mảng JSON:
{"name":"Bút bi","price":5000,"qty":100}, {"name":"Sổ A5","price":15000,"qty":50}, {"name":"Thước kẻ","price":7000,"qty":80} Bạn có thể dùng loop trong block:
- Add Loop Block: Chọn Loop → For Each Item.
- Set Variable: Mỗi vòng lặp sẽ có biến
item. - Inside Loop, Add Text Block: Sử dụng cú pháp:
| {{loop_index}} | {{item.name}} | {{item.price}} | {{item.qty}} |
- Kết thúc Loop: Khi vòng lặp hoàn thành, bảng sẽ được kết hợp lại.
3.2.1 Tạo Table Động Với HTML
Nếu muốn HTML, bạn có thể xây dựng một string chứa HTML trong một Script Block (JavaScript) và lưu vào một biến, sau đó trả về biến này.
let rows = "";
data.forEach((item, idx) => { rows += `<tr> <td>${idx + 1}</td> <td>${item.name}</td> <td style="text-align:right;">${item.price.toLocaleString()}</td> <td style="text-align:center;">${item.qty}</td> </tr>`;
});
let tableHTML = `<table border="1" cellpadding="5" cellspacing="0" style="border-collapse:collapse;"> <thead> <tr><th>STT</th><th>Tên</th><th>Giá (VNĐ)</th><th>Số lượng</th></tr> </thead> <tbody>${rows}</tbody> </table>`;
variables.set("productTable", tableHTML);
Sau đó, trong Text Block, chỉ cần:
{{productTable}}
Bot sẽ trả về bảng HTML đã được tạo sẵn.
3.3 Kiểm Tra Trên Các Kênh Khác Nhau
MockingBot hỗ trợ nhiều kênh (Facebook, Zalo, Telegram, LINE, Viber…). Mỗi kênh có khả năng hiển thị HTML khác nhau:
| Kênh | Hỗ trợ HTML? | Ghi chú |
|---|---|---|
| Facebook Messenger | ✅ (giới hạn) | Chỉ hỗ trợ một số thẻ (<b>, <i>, <a>, <table>). |
| Zalo OA | ✅ | Đảm bảo không dùng CSS phức tạp. |
| Telegram | ✅ | Hiển thị tốt, nhưng không hỗ trợ border. |
| LINE | ❌ | Chỉ hỗ trợ Plain Text Table. |
| Viber | ✅ | Hỗ trợ CSS cơ bản. |
Khi triển khai, bạn nên test trên từng kênh bằng cách gửi tin nhắn thử nghiệm. Đối với kênh không hỗ trợ HTML, chuyển sang Plain Text Table.
4. Tối Ưu Hóa Table Để Trải Nghiệm Người Dùng Tốt Nhất
4.1 Giữ Bảng Ngắn Gọn
- Không quá 10 dòng: Khi bảng quá dài, người dùng sẽ phải cuộn, gây khó chịu.
- Sử dụng pagination: Nếu dữ liệu nhiều, hãy chia thành nhiều tin nhắn hoặc sử dụng Quick Reply để chuyển trang.
4.2 Định Dạng Số và Tiền Tệ
Sử dụng hàm formatNumber hoặc toLocaleString để hiển thị số có dấu phẩy, đồng tiền.
let priceFormatted = item.price.toLocaleString('vi-VN');
4.3 Thêm Icon/Emoji Để Nổi Bật
Bạn có thể chèn emoji vào tiêu đề hoặc ô để tạo điểm nhấn.
| 📌 STT | 📦 Tên sản phẩm | 💰 Giá (VNĐ) | 🔢 Số lượng |
4.4 Đảm Bảo Độ Rộng Tương Thích Mobile
- Không cố định chiều rộng (tránh
width: 600px). - Sử dụng percentage hoặc để mặc định, để bảng tự co giãn.
- Kiểm tra trên device emulator trong MockingBot.
4.5 Xử Lý Trường Hợp Không Có Dữ Liệu
Nếu API trả về rỗng, bạn nên trả lời:
Hiện không có dữ liệu nào phù hợp. Vui lòng thử lại sau hoặc thay đổi điều kiện tìm kiếm.
Thay vì gửi bảng trống, điều này giúp người dùng không bị nhầm lẫn.
5. Các Lỗi Thường Gặp Khi Vẽ Table Và Cách Khắc Phục
| Lỗi | Nguyên nhân | Cách khắc phục |
|---|---|---|
Bảng không hiển thị, chỉ xuất hiện ký tự | |
Kênh không hỗ trợ HTML và không nhận dạng Markdown | Chuyển sang Plain Text Table hoặc sử dụng Quick Reply để gửi lại. |
| Các cột bị lệch, nội dung tràn | Không đặt border-collapse hoặc cellpadding |
Thêm style="border-collapse:collapse;" và cellpadding="5" vào thẻ <table>. |
| Emoji không hiển thị trên một số thiết bị | Font không hỗ trợ | Kiểm tra trên thiết bị thực, tránh dùng emoji quá phức tạp. |
| Dữ liệu động không được thay thế | Biến chưa được khởi tạo hoặc sai tên | Đảm bảo biến được set trước khi dùng, và tên biến đúng ({{productTable}}). |
HTML bị escape thành ký tự < |
Tùy chọn “Allow HTML” bị tắt | Mở tùy chọn trong Text Block hoặc dùng Script Block để trả về HTML. |
| Bảng quá dài, người dùng không thể cuộn | Không chia trang | Sử dụng Loop + Quick Reply “Xem tiếp” để tạo pagination. |
6. Ví Dụ Thực Tế: Xây Dựng Bảng Báo Cáo Doanh Thu
Giả sử bạn có API trả về doanh thu theo tháng:
{ "report": {"month":"Tháng 1","revenue":12000000}, {"month":"Tháng 2","revenue":15000000}, {"month":"Tháng 3","revenue":11000000}, {"month":"Tháng 4","revenue":17000000} }
6.1 Bước 1: Gọi API
Trong API Block, cấu hình GET request tới endpoint, lưu trả về vào biến apiResponse.
6.2 Bước 2: Tạo Bảng HTML Động
Thêm Script Block sau API Block:
let data = variables.get("apiResponse").report;
let rows = "";
data.forEach((item, idx) => { rows += `<tr> <td>${idx + 1}</td> <td>${item.month}</td> <td style="text-align:right;">${item.revenue.toLocaleString('vi-VN')} VNĐ</td> </tr>`;
});
let htmlTable = `<table border="0" cellpadding="6" cellspacing="0" style="width:100%;border:1px solid #dcdcdc;"> <thead style="background:#f0f0f0;"> <tr> <th>#</th> <th>Tháng</th> <th>Doanh thu</th> </tr> </thead> <tbody>${rows}</tbody> </table>`;
variables.set("revenueTable", htmlTable);
6.3 Bước 3: Trả Về Bảng
Trong Text Block, nhập:
📊 Báo cáo doanh thu 2026 📊 {{revenueTable}} 👉 Để xem chi tiết hơn, nhập "Chi tiết".
Khi người dùng nhập câu lệnh, bot sẽ trả về bảng đẹp mắt, hiển thị đúng định dạng trên các kênh hỗ trợ.
7. Các Công Cụ Hỗ Trợ Tạo Table Nhanh
| Công cụ | Mô tả | Link |
|---|---|---|
| Markdown Table Generator | Tạo bảng Markdown bằng giao diện kéo thả | https://www.tablesgenerator.com/markdown_tables |
| HTML Table Generator | Tạo HTML table với tùy chỉnh CSS | https://www.tablesgenerator.com/html_tables |
| MockingBot Playground | Kiểm tra nhanh cú pháp trong môi trường sandbox | https://playground.mockingbot.com |
| JSON Formatter | Định dạng JSON để lấy dữ liệu cho bảng | https://jsonformatter.curiousconcept.com |
Bạn có thể tạo bảng ở ngoài, sao chép và dán vào MockingBot để tiết kiệm thời gian.
8. Tổng Kết
Việc vẽ table trong MockingBot không chỉ là một kỹ thuật hiển thị dữ liệu, mà còn là một công cụ quan trọng để nâng cao trải nghiệm người dùng, tăng tính chuyên nghiệp và giúp người dùng nhanh chóng nắm bắt thông tin. Trong bài viết, chúng tôi đã:
- Giới thiệu khái niệm bảng và các kiểu hiển thị (Plain Text, HTML, Rich Message).
- Trình bày cú pháp cơ bản cho cả hai kiểu phổ biến nhất.
- Hướng dẫn cách tích hợp bảng vào flow, bao gồm việc sử dụng biến động và vòng lặp.
- Đưa ra các mẹo tối ưu (độ dài, định dạng số, emoji, responsive).
- Liệt kê lỗi thường gặp và cách khắc phục.
- Cung cấp ví dụ thực tế về báo cáo doanh thu.
- Giới thiệu các công cụ hỗ trợ nhanh.
Bằng cách làm theo các bước trên, bạn có thể tự tin tạo ra những bảng đẹp mắt, phù hợp với mọi kênh và tình huống sử dụng. Hãy thử ngay trong dự án MockingBot của mình, và đừng ngại sáng tạo thêm các kiểu bố cục, màu sắc để phù hợp với thương hiệu và nhu cầu người dùng.
Nếu còn thắc mắc, hãy truy cập trung tâm trợ giúp của MockingBot hoặc tham gia cộng đồng người dùng để chia sẻ kinh nghiệm và nhận hỗ trợ nhanh chóng. Chúc bạn thành công!