Xây Dựng Bot FAQ Serverless với Skapi + JavaScript (Không Cần Backend!)
Giới thiệu
Khi lần đầu tiên tôi muốn thêm một bot FAQ đơn giản vào trang web, tôi đã nghĩ rằng: "Chỉ cần lưu FAQs vào cơ sở dữ liệu, viết một API nhanh chóng... có khó gì đâu?". Nhưng thực tế lại biến thành một dự án backend mini với hosting, endpoints và xác thực trước khi tôi viết một dòng mã UI nào.
Khi gia nhập Skapi — một backend serverless dành cho các nhà phát triển frontend, không cần lập trình viên, và bất kỳ ai muốn tiết kiệm thời gian cho backend — tôi đã quyết định thử nghiệm xem liệu tôi có thể xây dựng hoàn toàn bot FAQ chỉ với mã frontend hay không. Và bạn hoàn toàn có thể làm điều đó. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách thực hiện.
Cuối cùng, bạn sẽ có một:
- Bot FAQ serverless chạy hoàn toàn trong trình duyệt
- Không cần thiết lập backend (Skapi sẽ xử lý dữ liệu cho bạn)
- Hướng dẫn chỉ sử dụng HTML + JavaScript thuần túy
Tại sao Skapi là lựa chọn hoàn hảo cho dự án này
Nếu bạn đã bao giờ tạo một backend chỉ để lưu trữ vài dòng dữ liệu, bạn sẽ hiểu điều này:
- Serverless: Không cần duy trì endpoints hoặc máy chủ
- Thân thiện với frontend: Hoạt động với HTML thuần, React, Vue, bất kỳ thứ gì
- Dữ liệu + Xác thực tại một nơi: Lưu trữ bản ghi, xử lý người dùng, tất cả từ trình duyệt
Trong dự án này, chúng ta sẽ:
- Lưu trữ FAQs trong bảng Skapi
- Lấy chúng bằng
getRecords() - Hiển thị câu trả lời dựa trên đầu vào của người dùng
1. Thiết lập Skapi
Đăng ký tại Skapi → tạo một dịch vụ → sao chép Service ID và Owner ID của bạn.
Tạo một tệp index.html và thêm:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bot FAQ Serverless</title>
<script src="https://cdn.jsdelivr.net/npm/skapi-js@latest/dist/skapi.js"></script>
<script>
// Thay thế bằng ID thực của bạn từ dashboard Skapi
const skapi = new Skapi('your_service_id', 'your_owner_id');
</script>
</head>
<body>
<h1>Bot FAQ Serverless</h1>
<input id="questionInput" placeholder="Hãy hỏi tôi bất cứ điều gì..." />
<button onclick="getAnswer()">Hỏi</button>
<div id="answerBox"></div>
<div id="faqList"></div>
</body>
</html>2. Thêm Dữ Liệu FAQ (Thiết Lập Một Lần)
Đây là phần thú vị: thay vì viết SQL hoặc tạo một API, bạn chỉ cần chạy đoạn mã này một lần để lưu trữ FAQs:
html
<script>
async function uploadFAQs() {
const faqs = [
{ question: "Skapi là gì?", answer: "Skapi là một backend serverless cho các ứng dụng frontend của bạn." },
{ question: "Skapi có miễn phí không?", answer: "Có! Nó có một mức miễn phí rất phù hợp cho các dự án nhỏ." },
{ question: "Tôi có cần backend không?", answer: "Không. Mọi thứ đều chạy ở frontend." }
];
for (let faq of faqs) {
await skapi.postRecord(faq, { table: 'faqs' });
}
alert("FAQs đã được tải lên thành công!");
}
uploadFAQs();
</script>Nó giống như việc có một mini Firebase, nhưng đơn giản hơn.
3. Xây Dựng Logic Bot FAQ
Bây giờ hãy để bot thực sự trả lời các câu hỏi:
html
<script>
async function getAnswer() {
let userQuestion = document.getElementById('questionInput').value.toLowerCase();
// Lấy tất cả FAQs từ Skapi
let res = await skapi.getRecords({ table: 'faqs' });
// Phương pháp khớp đơn giản: tìm câu hỏi đầu tiên xuất hiện trong đầu vào của người dùng
let bestMatch = res.list.find(faq => userQuestion.includes(faq.question.toLowerCase()));
document.getElementById('answerBox').innerText = bestMatch
? bestMatch.answer
: "Hmm… Tôi chưa có câu trả lời cho điều đó.";
}
</script>4. Hiển Thị Tất Cả FAQs
Tôi thích hiển thị tất cả FAQs bên dưới thanh tìm kiếm để người dùng có thể duyệt qua thủ công:
html
<script>
async function showFAQs() {
let res = await skapi.getRecords({ table: 'faqs' });
let container = document.getElementById('faqList');
container.innerHTML = "<h3>Tất cả FAQs:</h3>" +
res.list.map(f => `<p><b>${f.question}</b><br>${f.answer}</p>`).join('');
}
showFAQs();
</script>5. Những Điều Tôi Học Được Khi Xây Dựng Điều Này
- Skapi rất đơn giản: Việc thêm dữ liệu cảm giác dễ hơn cả việc sao chép và dán.
- Ứng dụng chỉ Frontend thường bị đánh giá thấp: Đối với những công cụ nhỏ, mã backend thường là quá sức.
Kết luận
Chúng ta vừa xây dựng một bot FAQ serverless chỉ trong chưa đến 100 dòng mã — không backend, không đau đầu với cơ sở dữ liệu.
Skapi hóa ra là công cụ hoàn hảo cho điều này:
- CRUD đơn giản từ frontend
- Tăng trưởng mà không cần làm thêm việc
- Mức miễn phí để thử nghiệm
- Triển khai dễ dàng và nhanh chóng với File Upload của Skapi
Nếu bạn là một nhà phát triển frontend muốn triển khai các tính năng full-stack mà không cần viết mã backend, Skapi là một lựa chọn đáng để khám phá.
Theo dõi chúng tôi trên các mạng xã hội: X, YouTube, Instagram, LinkedIn. Nhiều hướng dẫn, mã nguồn và mẹo dành cho nhà phát triển sẽ sớm ra mắt.
