Thử Thách Học Điều Mới 12 Ngày Cùng AI · 100% Thực hành tác nghiệp (Show, Don't Tell) · 0đ Miễn phí trọn đời.
Ngày 11 / 12
Ước tính: 15–20 phút đọc · 30–45 phút thực hành
Ngày 11: Gắn Bộ Não AI Trực Tiếp Vào Sản Phẩm Web Của Bạn
Sản phẩm thế hệ mới: Khách hàng được tương tác, hỏi đáp và nhận trợ giúp thông minh ngay trong app
🎯 Mục Tiêu Cốt Lõi Hôm Nay
- Hiểu kiến trúc ứng dụng có trợ lý tích hợp (AI-infused App): Cách ứng dụng gọi mô hình ngôn ngữ lớn (LLM API) an toàn.
- Thiết kế giao diện đối thoại tinh tế: Hiển thị câu trả lời theo dòng chảy thời gian thực (Streaming SSE) mượt mà không phải chờ đợi lâu.
- Bảo vệ API Key qua Server-side Proxy, cài đặt cơ chế giới hạn tần suất (Rate Limiting) để kiểm soát chi phí sử dụng.
🧠 Nguyên Lý Nền Tảng & Bản Chất
- Truyền phát dữ liệu thời gian thực (Server-Sent Events - SSE / Streaming): Phản hồi hiện từng từ như ChatGPT.
- Bảo mật API Key: Tuyệt đối không bao giờ để lộ key trên mã nguồn JavaScript phía trình duyệt (Client-side).
- Ngữ cảnh nghiệp vụ (System Context Injection): Nạp kiến thức sản phẩm để trợ lý chỉ trả lời trong phạm vi dịch vụ của bạn.
Thực hành tác nghiệp
🛠️ Thực hành 11: Tích Hợp Cửa Sổ Trợ Lý Thông Minh Hỗ Trợ Người Dùng Trong App
Các bước triển khai chi tiết:
- Tạo một hàm Backend Proxy an toàn (hoặc Cloudflare Worker) giữ API Key bí mật.
- Gắn thành phần giao diện hộp chat nổi (Chat Widget) vào góc dưới trang web của bạn.
- Nạp kịch bản tri thức doanh nghiệp vào System Prompt của trợ lý.
- Thử nghiệm đặt câu hỏi thực tế và trải nghiệm luồng chữ chạy streaming mượt mà ngay trên website thật.
📦 Sản phẩm bàn giao sau ngày hôm nay: Ứng dụng web nâng cấp với tính năng trợ lý AI trực quan, tương tác trực tiếp và tạo ấn tượng vượt trội cho khách hàng.
# Cài đặt SDK chính thức của OpenAI hoặc Google GenAI (nếu dùng Node/Python)
npm install openai
# hoặc
pip install openai flask flask-limiter
🤖 Prompt Mẫu Giao Việc Cho AI (Production Prompt)
Sẵn dùng với Claude / Cursor / ChatGPT
Tôi muốn tạo một widget Chatbot hỗ trợ khách hàng gắn vào góc phải dưới của trang web.
Yêu cầu:
1. Phía Frontend: Giao diện hộp chat nổi (Floating Chat Widget) có nút bật/tắt, khung chat cuộn mượt mà, và ô nhập tin nhắn.
2. Phía Backend: Một API Endpoint `/api/chat` nhận câu hỏi của khách hàng, gọi mô hình AI với System Prompt định sẵn: 'Bạn là chuyên viên tư vấn của [Tên cty], chỉ trả lời xoay quanh các dịch vụ trong cẩm nang...'.
3. Phản hồi phải truyền theo định dạng Streaming để người dùng thấy chữ chạy ngay lập tức.
// Frontend: Đọc luồng phản hồi thời gian thực (Streaming Reader)
async function sendChatMessage(userText) {
const response = await fetch("/api/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message: userText })
});
const reader = response.body.getReader();
const decoder = new TextDecoder("utf-8");
let botReply = "";
while (true) {
const { value, done } = await reader.read();
if (done) break;
botReply += decoder.decode(value);
document.getElementById("chat-box").innerText = botReply; // Cập nhật tức thì
}
}
Cảnh báo & Bắt bệnh
💡 Lỗi lộ API Key khi soi DevTools (F12): Nếu ai đó mở tab Network mà nhìn thấy chuỗi `sk-...`, tài khoản của bạn có thể bị kẻ xấu lấy cắp và gọi cạn tiền trong vài phút! Hãy di dời lệnh gọi AI sang Backend API route hoặc Cloudflare Worker, trình duyệt chỉ được phép gửi tin nhắn tới API nội bộ của bạn.
📚 KHÓA HỌC CHUYÊN SÂU ĐỐI ỨNG
OpenClaw Mastery: AI Assistant & Browser Agent
Bạn muốn tìm hiểu toàn diện mọi ngóc ngách của công nghệ này? Khóa học mở rộng đã có sẵn trên hệ thống.