Tạo Chatbot React Đơn Giản
Trong thế giới công nghệ web không ngừng phát triển, chatbot AI đã trở thành xu hướng nổi bật trong năm 2024. Bài viết này Bizfly Cloud sẽ hướng dẫn bạn cách tích hợp chatbot vào website React một cách đơn giản và hiệu quả.
Bước 1: Tạo Dự Án Mới
Trước khi bắt đầu, hãy đảm bảo bạn đã quen thuộc với React, Node.js/npm và các lệnh Linux cơ bản. Nếu bạn là người mới, có thể tham khảo các tài liệu hướng dẫn trực tuyến.
Để bắt đầu, hãy tạo một dự án React trống mới bằng cách mở terminal và chạy lệnh sau:
npm create vite@latest Bạn sẽ được yêu cầu nhập tên dự án, framework và biến thể. Hãy chọn như sau:
- Tên dự án: MyChatBot
- Framework: React
- Biến thể: JavaScript
Sau khi thiết lập xong, hãy chuyển đến thư mục dự án và chạy lệnh:
npm install && npm run dev Bước 2: Cài Đặt React ChatBotify
React ChatBotify là một thư viện React tùy biến cao giúp đơn giản hóa việc tích hợp chatbot vào ứng dụng. Để cài đặt, hãy chạy lệnh sau:
npm install react-chatbotify Sau khi cài đặt xong, hãy mở file App.jsx trong thư mục src và thêm dòng sau vào đầu file
import ChatBot from 'react-chatbotify'
Tiếp theo, thêm dòng sau bên trên thẻ <div> trong phần return:
<ChatBot/>
Lưu file và chạy lại ứng dụng. Bạn sẽ thấy chatbot xuất hiện ở góc dưới cùng bên phải màn hình.
Bước 3: Tạo Tin Nhắn "Hello World"
Để thay thế tin nhắn chào mừng mặc định, bạn có thể tạo tin nhắn riêng bằng cách sử dụng thuộc tính flow trong component <ChatBot/>. Thuộc tính này xác định nội dung cuộc trò chuyện, điểm bắt đầu luôn là khối start như ví dụ dưới đây:
const flow = { "start": { "message": "Hello world!" } }; Hãy thêm đoạn mã trên vào component <ChatBot/>:
import { useState } from 'react'; import reactLogo from './assets/react.svg'; import viteLogo from '/vite.svg'; import ChatBot from "react-chatbotify"; import './App.css'; function App() { const [count, setCount] = useState(0); const flow = { "start": { "message": "Hello world!" } }; return ( <> <div> <a href="https://vitejs.dev" target="_blank"> <img src={viteLogo} className="logo" alt="Vite logo" /> </a> <a href="https://react.dev" target="_blank"> <img src= className="logo react" alt="React logo" /> </a> </div> <h1>Vite + React</h1> <div className="card"> <button => setCount((count) => count + 1)}> count is {count} </button> <p> Edit <code>src/App.jsx</code> and save to test HMR </p> </div> <p className="read-the-docs"> Click on the Vite and React logos to learn more </p> <ChatBot flow={flow} /> </> ); } export default App; Bây giờ, khi chạy lại ứng dụng, bạn sẽ thấy tin nhắn chào mừng đã được thay thế bằng "Hello world!".
Kết Luận
Bài viết đã hướng dẫn bạn cách thiết lập chatbot React đơn giản. Mặc dù ví dụ trên khá đơn giản, thư viện React ChatBotify còn cung cấp nhiều thuộc tính khác trong flow giúp bạn xây dựng cuộc trò chuyện phức tạp hơn.
