Введение в разработку чат-ботов с использованием DialogFlow и Node.js

В мире разработки программного обеспечения чат-боты стали важным инструментом для улучшения взаимодействия с пользователями и автоматизации различных задач. Одной из самых мощных платформ для создания чат-ботов является Google DialogFlow в сочетании с универсальностью Node.js. В этой статье мы рассмотрим процесс создания чат-бота с помощью DialogFlow и Node.js, обеспечивая вам полное и интересное путешествие на протяжении всего пути.

Настройка DialogFlow

Прежде чем приступить к написанию кода, давайте настроим нашего агента DialogFlow. Вот пошаговое руководство:

  1. Войдите в консоль DialogFlow: используйте свою учетную запись Google для входа в консоль DialogFlow.
  2. Создайте нового агента: нажмите на раскрывающийся список рядом с настройками агента и выберите «Создать нового агента». Укажите название для вашего агента (например, «NodeJS-Dialogflow») и нажмите «CREATE».

Создание намерения

Намерение — это то, что классифицирует намерение пользователя для одного разговора.

  1. Нажмите кнопку «СОЗДАТЬ НАМЕРЕНИЕ»: укажите имя намерения (например, «webhook-demo») и сохраните его.
  2. Добавьте тренировочные фразы: нажмите на созданное вами намерение и добавьте пользовательские фразы в разделе «Тренировочные фразы». Эти фразы являются примерами того, что пользователи могут сказать, чтобы активировать это намерение.

Добавление сущностей и параметров

Сущности помогают извлекать конкретные данные из ввода пользователя.

  1. Определите сущности: если вашему намерению требуются конкретные данные (например, имена, даты), определите сущности для извлечения этих данных из ввода пользователя.
  2. Добавление параметров: свяжите эти сущности с параметрами в своих тренировочных фразах, чтобы аннотировать ключевые слова/значения.

Настройка сервера 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 вебхука.

  1. Используйте Ngrok для HTTPS: поскольку DialogFlow требует URL с протоколом HTTPS, используйте Ngrok, чтобы создать публичный URL для вашего локального сервера.
  1. Скопируйте 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);
});

Последовательность диаграмм для обработки запросов

Вот диаграмма последовательности, иллюстрирующая, как обрабатывается запрос:

sequenceDiagram participant User participant Frontend participant CloudFunction participant DialogFlow participant NodeJS User->>Frontend: Send Message Frontend->>CloudFunction: HTTP Request CloudFunction->>DialogFlow: Forward Message DialogFlow->>NodeJS: Webhook Request NodeJS->>DialogFlow: Response DialogFlow->>CloudFunction: Response CloudFunction->>Frontend: Response Frontend->>User: Display Response

Интеграция с фронтендом

Чтобы интегрировать свой чат-бот с приложением фронтенда, можно использовать такие фреймворки, как 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;