Введение в разработку чат-ботов с использованием DialogFlow и Node.js
В мире разработки программного обеспечения чат-боты стали важным инструментом для улучшения взаимодействия с пользователями и автоматизации различных задач. Одной из самых мощных платформ для создания чат-ботов является Google DialogFlow в сочетании с универсальностью Node.js. В этой статье мы рассмотрим процесс создания чат-бота с помощью DialogFlow и Node.js, обеспечивая вам полное и интересное путешествие на протяжении всего пути.
Настройка DialogFlow
Прежде чем приступить к написанию кода, давайте настроим нашего агента DialogFlow. Вот пошаговое руководство:
- Войдите в консоль DialogFlow: используйте свою учетную запись Google для входа в консоль DialogFlow.
- Создайте нового агента: нажмите на раскрывающийся список рядом с настройками агента и выберите «Создать нового агента». Укажите название для вашего агента (например, «NodeJS-Dialogflow») и нажмите «CREATE».
Создание намерения
Намерение — это то, что классифицирует намерение пользователя для одного разговора.
- Нажмите кнопку «СОЗДАТЬ НАМЕРЕНИЕ»: укажите имя намерения (например, «webhook-demo») и сохраните его.
- Добавьте тренировочные фразы: нажмите на созданное вами намерение и добавьте пользовательские фразы в разделе «Тренировочные фразы». Эти фразы являются примерами того, что пользователи могут сказать, чтобы активировать это намерение.
Добавление сущностей и параметров
Сущности помогают извлекать конкретные данные из ввода пользователя.
- Определите сущности: если вашему намерению требуются конкретные данные (например, имена, даты), определите сущности для извлечения этих данных из ввода пользователя.
- Добавление параметров: свяжите эти сущности с параметрами в своих тренировочных фразах, чтобы аннотировать ключевые слова/значения.
Настройка сервера Node.js
Теперь создадим сервер Node.js для обработки запросов вебхука от DialogFlow.
Установка зависимостей
Вам понадобятся следующие зависимости:
npm install express dialogflow-fulfillment actions-on-google
Создание сервера
Вот базовый пример настройки вашего сервера Node.js:
const express = require('express');
const { WebhookClient } = require('dialogflow-fulfillment');
const app = express();
app.use(express.json());
app.get('/', (req, res) => {
res.send("Server Is Working......");
});
app.post('/webhook', express.json(), (req, res) => {
const agent = new WebhookClient({ request: req, response: res });
function handleIntent(agent) {
const intent = agent.intent;
// Handle different intents here
if (intent === 'webhook-demo') {
agent.add('Hello from the webhook!');
}
}
agent.handleRequest(handleIntent);
});
app.listen(3000, () => {
console.log("Server is Running on port 3000");
});
Конфигурация вебхука в DialogFlow
Чтобы подключить ваш сервер Node.js к DialogFlow, необходимо настроить URL вебхука.
- Используйте Ngrok для HTTPS: поскольку DialogFlow требует URL с протоколом HTTPS, используйте Ngrok, чтобы создать публичный URL для вашего локального сервера.
- Скопируйте URL Ngrok: скопируйте предоставленный Ngrok URL (например,
https://7d40337b0a62.ngrok.io/webhook
) и вставьте его в поле «URL» функции выполнения DialogFlow.
Обработка намерений и ответов
Сопоставление намерений
Для обработки нескольких намерений можно создать карту намерений:
const intentMap = new Map();
intentMap.set('webhook-demo', handleWebhookDemo);
function handleWebhookDemo(agent) {
agent.add('This is a response from the webhook-demo intent!');
}
app.post('/webhook', express.json(), (req, res) => {
const agent = new WebookClient({ request: req, response: res });
agent.handleRequest(intentMap);
});
Последовательность диаграмм для обработки запросов
Вот диаграмма последовательности, иллюстрирующая, как обрабатывается запрос:
Интеграция с фронтендом
Чтобы интегрировать свой чат-бот с приложением фронтенда, можно использовать такие фреймворки, как React или Angular. Вот пример использования React:
Создайте компонент Chatbot
import React, { useEffect, useState } from "react";
function Chatbot() {
const [messages, setMessages] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
const handleSendMessage = async (message) => {
setLoading(true);
const response = await fetch('/api/dialogflow', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message }),
});
const data = await response.json();
setMessages([...messages, { text: data.response, from: 'bot' }]);
setLoading(false);
};
return () => {
// Cleanup
};
}, [messages]);
const handleUserInput = (event) => {
if (event.key === 'Enter') {
const message = event.target.value;
event.target.value = '';
setMessages([...messages, { text: message, from: 'user' }]);
handleSendMessage(message);
}
};
return (
<div>
<ul>
{messages.map((message, index) => (
<li key={index}>
<span style={{ color: message.from === 'bot' ? 'blue' : 'black' }}>
{message.text}
</span>
</li>
))}
{loading && <li>Loading...</li>}
</ul>
<input type="text" onKeyPress={handleUserInput} placeholder="Type a message" />
</div>
);
}
export default Chatbot;
Добавьте чат-бот в App Component
import "./App.css";
import Chatbot from "./Chatbot";
function App() {
return (
<div className="App">
<Chatbot />
</div>
);
}
export default App;