Java, UX, HTML, CSS, WEB-design

Как разработать чат-бота с помощью Node.js

Краткое описание по статье Как разработать чат-бота с помощью Node.js

Название: Как разработать чат-бота с помощью Node.js . Краткое описание: [ad_1] ⭐ Слобода . Дата публикации: 02.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Слободан Стоянович

  • 0 Комментарии

Как разработать чат-бота с помощью Node.js

  • 9 минут чтения

  • Кодирование, Node.js, пользовательский интерфейс, чат-боты

Краткое резюме ↬

За последние несколько месяцев чат-боты стали очень популярны благодаря Slack, Telegram и Facebook Messenger. Но идея чат-бота совсем не нова.

Интерфейс чат-бота упоминается в знаменитом тесте Тьюринга в 1950 году. Затем была Элиза в 1966 году, симуляция роджерианского психотерапевта и ранний пример примитивной обработки естественного языка. После этого в 1972 году появился Пэрри, симуляция человека с параноидальной шизофренией (и, да, конечно, Пэрри познакомился с Элизой).

В 1983 году вышла книга под названием Борода полицейского наполовину сконструированакоторый был сгенерирован Racter, компьютерной программой искусственного интеллекта, которая генерировала случайную англоязычную прозу, позже выпущенную как чат-бот.

Одной из самых известных была Алиса (аискусственный ллингвистический яИнтернет скомпьютер еntity), выпущенный в 1995 году. Он не смог пройти тест Тьюринга, но трижды получил премию Лебнера. В 2005 и 2006 годах один и тот же приз выиграли два персонажа-бота Jabberwacky.

А в 2014 году Slackbot снова сделал чат-ботов популярными. В 2015 году Telegram, а затем Facebook Messenger выпустили поддержку чат-ботов; затем, в 2016 году, Skype сделал то же самое, а Apple и некоторые другие компании анонсировали еще больше платформ для чат-ботов.

Еще после прыжка! Продолжить чтение ниже ↓

Что нужно знать, чтобы создать чат-бота?

Конечно, ответ на этот вопрос в основном зависит от того, что вы хотите построить.

В большинстве случаев вы можете создать чат-бота, не зная много об искусственном интеллекте (ИИ), либо полностью избегая его, либо используя некоторые существующие библиотеки для базового ИИ.

То же самое касается обработки естественного языка (NLP); это важнее, чем ИИ, но вы можете создать чат-бота, используя библиотеку NLP или, для некоторых платформ, просто используя кнопки и элементы пользовательского интерфейса вместо обработки текста.

И, наконец, нужно ли вообще знать программирование? Визуальных конструкторов ботов много, так что, наверное, нет. Но это может быть полезно.

Как создать бота Facebook Messenger

Это статья о создании чат-ботов, так что давайте, наконец, углубимся в нее. Давайте создадим простого бота Facebook Messenger.

Мы будем использовать Node.js, но вы можете создать чат-бота на любом языке программирования, который позволяет создавать веб-API.

Почему Node.js? Потому что он идеально подходит для чат-ботов: вы можете быстро создать простой API с помощью hapi.js, Express и т. д.; он поддерживает сообщения в реальном времени (RTM) для ботов Slack RTM; и его легко освоить (по крайней мере, достаточно просто, чтобы создать простого чат-бота).

У Facebook уже есть образец чат-бота, написанный на Node.js, доступный на GitHub. Если вы проверите код, вы увидите, что он использует платформу Express и имеет три веб-хука (для проверки, аутентификации и получения сообщений). Вы также увидите, что он отправляет ответы с помощью модуля запросов Node.js.

Звучит просто?

Это. Но этот полный образец бота содержит 839 строк кода. Это немного, и вам, вероятно, понадобится только половина этого, но это все еще слишком много стандартного кода для начала.

Что, если я скажу вам, что мы могли бы получить тот же результат всего за пять строк JavaScript?

var botBuilder = require('claudia-bot-builder');

module.exports = botBuilder(function (request) {
  return 'Thanks for sending ' + request.text;
});

Или даже меньше, если вы используете ECMAScript 6:

const botBuilder = require('claudia-bot-builder');

module.exports = botBuilder(request => 'Thanks for sending ${request.text}');

Познакомьтесь с конструктором ботов Claudia

Claudia Bot Builder помогает разработчикам создавать чат-ботов для Facebook Messenger, Telegram, Skype и Slack и за считанные минуты развертывать их в Amazon Web Services (AWS) Lambda и API Gateway.

Основная идея проекта заключается в том, чтобы удалить весь шаблонный код и общие задачи инфраструктуры, чтобы вы могли сосредоточиться на написании действительно важной части бота — вашем бизнес-процессе. Всем остальным занимается Claudia Bot Builder.

Почему AWS Lambda? Он идеально подходит для чат-ботов: создать простой API очень просто; гораздо быстрее отвечает на первый запрос, чем бесплатный инстанс Heroku; и это действительно дешево. Первый миллион запросов каждый месяц бесплатен, а следующий миллион запросов стоит всего 0,20 доллара США!

Вот как легко создать бота Facebook Messenger с Claudia Bot Builder:

Давайте создадим бота-исследователя космоса

Space Explorer — это простой чат-бот Messenger, который использует API NASA для получения данных и изображений о космосе.

Прежде чем мы начнем, создайте страницу и приложение Facebook и добавьте интеграцию с Messenger, как описано в руководстве Facebook «Начало работы».

Затем создайте файл с именем bot.js со следующим содержанием:

const botBuilder = require('claudia-bot-builder');

module.exports = botBuilder(request => `Hello from space explorer bot! Your request was: ${request.text}`);

Установите эти зависимости:

npm init;

npm install claudia-bot-builder -S;

npm install claudia -g;

Создайте функцию Lambda и следуйте инструкциям в видео выше, чтобы связать ее с вашим приложением Facebook:

claudia create --region us-east-1 --api-module bot --configure-fb-bot

Вот и все! Вы создали своего первого чат-бота для Facebook Messenger.

Если вы отправите сообщение на свою страницу, ваш бот ответит. Но ответ слишком прост. Добавим еще чего-нибудь интересного!

Интеграция API НАСА

Прежде чем мы продолжим, посетите портал API НАСА и получите ключ API.

Затем добавьте свой ключ API в качестве nasaApiKey переменная stage в шлюзе API. Вы можете сделать это из пользовательского интерфейса или выполнив следующую команду:

aws apigateway create-deployment 
    --rest-api-id API_ID --stage-name latest 
    --variables nasaApiKey=YOUR_NASA_API_KEY

Здесь, API_ID ваш идентификатор API из claudia.json файл, который был автоматически сгенерирован на предыдущем шаге.

Давайте добавим лучший ответ на текстовые сообщения. В Claudia Bot Builder есть простой конструктор шаблонных сообщений Facebook Messenger (документация есть на GitHub).

const botBuilder = require('claudia-bot-builder');
const fbTemplate = botBuilder.fbTemplate;
const rp = require('minimal-request-promise');

module.exports = botBuilder((request, originalApiRequest) => {
  // If request is not postback
  if (!request.postback)
    // We'll get some basic info about the user
    return rp.get(`https://graph.facebook.com/v2.6/${request.sender}?fields=first_name&access_token=${originalApiRequest.env.facebookAccessToken}`)
      .then(response => {
        const user = JSON.parse(response.body)
        // Then let's send two text messages and one generic template with three elements/bubbles
        return [
          `Hello, ${user.first_name}. Welcome to Space Explorer! Ready to start a journey through space?`,
          'What can I do for you today?',
          return new fbTemplate.generic()
            .addBubble(`NASA's Astronomy Picture of the Day`, 'Satellite icon by parkjisun from the Noun Project')
              .addImage('https://raw.githubusercontent.com/stojanovic/space-explorer-bot/master/assets/images/apod.png')
              .addButton('Show', 'SHOW_APOD')
              .addButton('What is APOD?', 'ABOUT_APOD')
              .addButton('Website', 'https://apod.nasa.gov/apod/')
            .addBubble(`Photos from NASA's rovers on Mars`, 'Curiosity Rover icon by Oliviu Stoian from the Noun Project')
              .addImage('https://raw.githubusercontent.com/stojanovic/space-explorer-bot/master/assets/images/mars-rover.png')
              .addButton('Curiosity', 'CURIOSITY_IMAGES')
              .addButton('Opportunity', 'OPPORTUNITY_IMAGES')
              .addButton('Spirit', 'SPIRIT_IMAGES')
            .addBubble('Help & info', 'Monster icon by Paulo Sá Ferreira from the Noun Project')
              .addImage('https://raw.githubusercontent.com/stojanovic/space-explorer-bot/master/assets/images/about.png')
              .addButton('About the bot', 'ABOUT')
              .addButton('Credits', 'CREDITS')
              .addButton('Report an issue', 'https://github.com/stojanovic/space-explorer-bot/issues')
            .get();
        ];
      });
}

Теперь у нашего бота приятный приветственный ответ:

Предварительный просмотр бота Space Explorer
(Большой превью)

Намного лучше!

Далее мы хотим обрабатывать обратные передачи. Начнем с астрономической картинки дня НАСА:

// In case of the 'SHOW_APOD' postback, we'll contact NASA API and get the photo of the day.
if (request.text === 'SHOW_APOD')
  return rp(`https://api.nasa.gov/planetary/apod?api_key=${originalApiRequest.env.nasaApiKey}`)
    .then(response => {
      const APOD = JSON.parse(response.body)
      return [
        `NASA's Astronomy Picture of the Day for ${APOD.date}`,
        `"${APOD.title}", © ${APOD.copyright}`,
        new fbTemplate.image(APOD.url).get(),
        APOD.explanation,
        new fbTemplate.button('More actions:')
          .addButton('Download HD', APOD.hdurl)
          .addButton('Visit website', 'https://apod.nasa.gov/apod/')
          .addButton('Back to start', 'MAIN_MENU')
          .get()
      ]
    });

А вот и марсоходы (Curiosity, Opportunity и Spirit):

// Common API call
function getRoverPhotos(rover, sol, nasaApiKey) {
  // If sol (Mars day) is not defined, take a random one.
  if (!sol)
    sol = (parseInt(Math.random() * 9) + 1) * 100;

  // Contact the API
  return rp(`https://api.nasa.gov/mars-photos/api/v1/rovers/${rover}/photos?sol=${sol}&api_key=${nasaApiKey}`)
    .then(response => {
      let rawBody = response.body;

      let roverInfo = JSON.parse('' + rawBody);
      // Create generic template with up to 10 photos.
      let photos = roverInfo.photos.slice(0, 10);
      let roverImages = new fbTemplate.generic();

      photos.forEach(photo => {
        return roverImages.addBubble(photo.rover.name, 'At ' + photo.earth_date + ' (sol ' + photo.sol + '), using ' + photo.camera.full_name)
          .addImage(photo.img_src)
          .addButton('Download', photo.img_src)
      });

      // Send the message.
      return [
        `${roverInfo.photos[0].rover.name} rover`,
        `Landing Date: ${roverInfo.photos[0].rover.landing_date} nTotal photos: ${roverInfo.photos[0].rover.total_photos}`,
        roverImages.get(),
        new fbTemplate.button('More actions:')
          .addButton('Show newest photos', `PHOTOS_${rover}_${roverInfo.photos[0].rover.max_sol}`)
          .addButton('Visit Wikipedia', `https://en.wikipedia/wiki/${rover}_(rover)`)
          .addButton('Back to start', 'MAIN_MENU')
          .get()
      ];
    })
    .catch(err => {
      // If the selected sol doesn't have any photos, take the photos from sol 1000.
      console.log(err);
      return getRoverPhotos(rover, 1000, nasaApiKey);
    });
}

// Curiosity photos
if (request.text === 'CURIOSITY_IMAGES')
  return getRoverPhotos('curiosity', null, originalApiRequest.env.nasaApiKey);

// Opportunity photos
if (request.text === 'OPPORTUNITY_IMAGES')
  return getRoverPhotos('opportunity', null, originalApiRequest.env.nasaApiKey);

// Spirit photos
if (request.text === 'SPIRIT_IMAGES')
  return getRoverPhotos('spirit', null, originalApiRequest.env.nasaApiKey);

// Rover photos by sol (Mars day)
if (request.text.indexOf('PHOTOS_') === 0) {
  const args = request.text.split('_')
  return getRoverPhotos(args[1], args[2], originalApiRequest.env.nasaApiKey);
}

Наконец, добавьте немного статического контента в конец:

// About Astronomy Picture of the Day
if (request.text === 'ABOUT_APOD')
  return [
    `The Astronomy Picture of the Day is one of the most popular websites at NASA. In fact, this website is one of the most popular websites across all federal agencies. It has the popular appeal of a Justin Bieber video.`,
    `Each day a different image or photograph of our fascinating universe is featured, along with a brief explanation written by a professional astronomer.`,
    new fbTemplate.button('More actions:')
      .addButton('Show photo', 'SHOW_APOD')
      .addButton('Visit website', 'https://apod.nasa.gov/apod/')
      .addButton('Back to start', 'MAIN_MENU')
      .get()
  ];

// About the bot
if (request.text === 'ABOUT')
  return [
    `Space Explorer is simple Messenger chat bot that uses NASA's API to get the data and images about the space`,
    `It's created for fun and also as a showcase for Claudia Bot Builder, node.js library for creating chat bots for various platform and deploying them on AWS Lambda`,
    new fbTemplate.button('More actions:')
      .addButton('Claudia Bot Builder', 'https://github.com/claudiajs/claudia-bot-builder')
      .addButton('Source code', 'https://github.com/stojanovic/space-explorer-bot')
      .get()
  ];

// Finally, credits
if (request.text === 'CREDITS')
  return [
    'Claudia Bot Builder was created by Gojko Adžić, Aleksandar Simović and Slobodan Stojanović',
    'Icons used for the bot are from the Noun Project',
    '- Rocket icon by misirlou, n- Satellite icon by parkjisun, n- Curiosity Rover icon by Oliviu Stoian, n- Monster icon by Paulo Sá Ferreira',
    'This bot was created by Claudia Bot Builder team',
    new fbTemplate.button('More actions:')
      .addButton('Claudia Bot Builder', 'https://github.com/claudiajs/claudia-bot-builder')
      .addButton('The Noun Project', 'https://thenounproject.com')
      .addButton('Source code', 'https://github.com/stojanovic/space-explorer-bot')
      .get()
  ];

Результат

После небольшого рефакторинга наш код должен выглядеть примерно как исходник на GitHub.

Вы можете попробовать его вживую на своей странице или на странице бота Space Explorer в Facebook Messenger.

Попробуйте в прямом эфире в FB Messenger

Вот и все! Вы успешно создали своего первого чат-бота с помощью Claudia Bot Builder. Это было легко, не так ли?

А теперь иди и создавай больше крутых чат-ботов.

Заключительные примечания

Я выбрал Facebook Messenger в качестве отправной точки, потому что большинство из нас знакомы с ним. Но мы выбрали Slack для нашего первого бота, потому что вся наша команда использует Slack ежедневно. Итак, мы решили создать простого командного бота для отслеживания отпуска прямо в Slack, используя Claudia Bot Builder, Node.js, MariaDB и AWS Lambda.

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

Посетите веб-сайт Claudia, чтобы узнать, как разрабатывать и развертывать базовые микросервисы и API AWS Lambda. И дайте нам знать, если вы создадите что-то классное с его помощью.

Большое спасибо Лаву Црнобрня, Марко Кажичу, Горану Гайичу, Бояну Матичу и Вуку Николичу за помощь и отзывы о статье!

Дальнейшее чтение на SmashingMag:

  • Основы диалогового дизайна: советы по созданию чат-бота
  • Разговор вредит или помогает UX чат-бота?
  • Диалоговые интерфейсы: где мы сегодня?
  • Дорожная карта для создания восхитительного опыта онбординга
Сокрушительная редакция
(рб, ил, ык, ал)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Как разработать чат-бота с помощью Node.js

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»