Введение
В этой статье с помощью JavaScript и Node.js будет создано приложение, в котором будет реализован простой чатбот с использованием платформы Zenvia для интеграции с каналом WhatsApp и платформы AudD для интеграции с распознаванием музыки с целью тестирования некоторых функций канала WhatsApp, таких как отправка и получение текстовых, графических и аудиосообщений.
Первая версия мобильного приложения WhatsApp была выпущена в ноябре 2009 года эксклюзивно для iOS и в августе 2010 года для Android.
В 2014 году Facebook приобрел WhatsApp за $16 млрд. Согласно последним данным, опубликованным в 2018 году, приложение имеет более 5 млрд установок в Google Play и более 1,5 млрд пользователей онлайн ежемесячно.
Стремясь к эффективной коммуникации малых, средних и крупных компаний со своими потребителями по всему миру, в августе 2018 года WhatsApp запустил WhatsApp Business API, предоставляющий API для отправки и получения сообщений, который может интегрироваться с корпоративными системами через ваших партнеров, а Zenvia является официальным партнером Facebook.
Создайте аккаунт на платформе ngrok
ngrok — это сервис, который раскрывает приложение, работающее локально, в Интернете.
1. Создадим учетную запись. Зайдем на сайт https://ngrok.com/ и нажмем на кнопку Sign up.
2. Теперь заполним поля Name, E-mail, Password, нажмем на I’m not a robot и нажмем на кнопку Sign Up. Вы также можете войти с помощью GitHub или социального логина Google.
3. Далее скопируем команду с маркером аутентификации, так как эта команда будет настроена после установки.
4. Готово! Ваш аккаунт создан.
Установка и настройка инструмента платформы ngrok
Инструмент ngrok создаст туннель для приложения, запущенного локально, предоставляя URL-адрес в Интернете.
1. Установим и настроим ngrok. Зайдем на сайт https://ngrok.com/download и загрузим установочный файл для вашей операционной системы.
2. Теперь извлечем и установим скачанный файл. Я использую операционную систему openSUSE Tumbleweed и просто извлек его в папку /usr/local/bin/.
3. После установки ngrok, мы настроим токен аутентификации. В моем случае я выполнил следующую команду в терминале.
ngrok config add-authtoken 1Rmtob9M3s7nNw02x2w72hSY0C6_5aa3v6udPVT6Gfjb51omJ
Примечание:
- Используйте ваш токен аутентификации, который был сгенерирован на платформе ngrok.
4. Теперь мы создадим туннель на порту 3000, который будет портом приложения. В моем случае я выполнил следующую команду в терминале.
ngrok http 3000
5. Готово! Инструмент ngrok был настроен и будет отображать в терминале публичный URL https://4402-2804-1b3-a8c3-b00f-8119-68d3-7e21-33e1.ngrok.io, доступный в Интернете.
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Session Expires 1 hour, 59 minutes
Version 2.3.40
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://4402-2804-1b3-a8c3-b00f-8119-68d3-7e21-33e1.ngrok.io -> http://localhost:3000
Forwarding https://4402-2804-1b3-a8c3-b00f-8119-68d3-7e21-33e1.ngrok.io -> http://localhost:3000
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
Примечание:
- Туннель имеет срок действия 2 часа, отображаемый в Session Expires, и если он истек, выполните команду снова, чтобы создать туннель.
Создание учетной записи на платформе Zenvia
Zenvia — это платформа, которая позволяет компаниям создавать уникальный опыт общения для своих клиентов через SMS, WhatsApp, Voice, Facebook Messenger, WEB Chat и RCS каналы.
1. Создадим учетную запись. Зайдем на сайт https://app.zenvia.com и нажмем на ссылку Создать учетную запись.
2. Теперь заполним поля Имя, E-mail, Пароль, выберем опцию Я не робот и нажмем на кнопку Создать аккаунт.
3. После создания аккаунта проверим зарегистрированный email.
4. Теперь нажмем на кнопку YES IT’S ME! CONFIRM IT 🙂 в присланном письме.
5. После подтверждения электронной почты заполним поле E-mail и нажмем на кнопку Next.
6. Теперь заполним поле Password и нажмем на кнопку Sign in.
7. Далее заполним поле Введите номер телефона и нажмем на кнопку Продолжить, чтобы подтвердить номер телефона.
8. Теперь заполним поле Введите 6-значный код с кодом, который вы получили на свой мобильный телефон, и нажмем на кнопку Продолжить.
9. Готово! Ваша учетная запись создана.
Создание песочницы на платформе ZENVIA
Песочница — это очень популярное среди разработчиков понятие, когда можно протестировать некоторые функциональные возможности платформы, не нанимая сервис. Поэтому она должна быть интуитивно понятной и без бюрократии.
1. Создадим «Песочницу» в канале WhatsApp. Нажмем на меню Developers и Sandbox.
2. Теперь нажмем на кнопку Создать новую.
3. Далее выберем опцию WhatsApp и нажмем на кнопку Next.
4. После выбора опции WhatsApp сканируем QR-код или отправляем ключевое слово wobbly-chatter на номер +551148377404 с помощью приложения WhatsApp. Другой вариант — зайти на URL https://wa.me/551148377404?text=wobbly-chatter с помощью мобильного телефона, при этом откроется приложение WhatsApp с сообщением wobbly-chatter для отправки на номер 551148377404.
Примечания:
- Это слово автоматически генерируется при создании песочницы, поэтому другое слово будет сгенерировано, когда вы дойдете до этого шага.
- Эта регистрация необходима для того, чтобы платформа Zenvia зарегистрировала номер (номера), который вы хотите протестировать, что делает невозможным отправку сообщения на любой мобильный телефон.
- Можно зарегистрировать другие номера, используя тот же процесс.
5. Вы получите сообщение на свой мобильный телефон, подтверждающее регистрацию вашего номера.
6. На экране отобразится зарегистрированный номер (номера), а также ограничение в 200 сообщений в течение 24 часов. Теперь нажмем на кнопку Далее.
Примечание:
- Когда 24-часовой период будет исчерпан, зарегистрируйте номер(ы) снова, чтобы начать новый цикл из 200 сообщений в 24-часовой период. Если вы используете 200 сообщений, вам придется подождать период в 24 часа.
7. После регистрации номера (номеров) протестируем отправку текстового сообщения. Выберите номер, который вы хотите отправить, в поле Кому, заполните сообщение в поле Сообщение и нажмите на кнопку Отправить сообщение. Скопируйте токен в параметре X-API-TOKEN, в моем случае был сгенерирован токен UbH-3NSJMufN0VN5fejawn633zDGnXRiRhYI, так как этот токен будет настроен в приложении Node.js. Нажмите на кнопку Далее.
Примечания:
- В поле From, поскольку это Sandbox, создается случайное слово, соответствующее идентификатору интеграции при заключении договора на обслуживание.
- В поле Request отображается пример запроса с использованием инструмента curl. Вы можете смоделировать этот же запрос с помощью других инструментов, например Postman или Insomnia.
- В поле Response отображается ответ на запрос в формате JSON.
8. Далее тестовое сообщение отправляется на выбранный номер.
9. Теперь создадим подписку на webhook, используя URL, который был создан на платформе ngrok. Заполним поля Message Webhook URL с URL https://4402-2804-1b3-a8c3-b00f-8119-68d3-7e21-33e1.ngrok.io/message и Status Webhook URL с URL https://4402-2804-1b3-a8c3-b00f-8119-68d3-7e21-33e1.ngrok.io/status и нажмем на кнопки Save и Finish.
10. Готово! Песочница создана для канала WhatsApp, номер настроен и токен сгенерирован. Документация по API доступна на сайте https://zenvia.github.io/zenvia-openapi-spec/.
Создание учетной записи на платформе AudD
AudD — это сервис, позволяющий распознавать музыку с помощью API.
1. Создадим учетную запись. Зайдем на сайт https://audd.io и нажмем на кнопку Get an API Token.
2. Теперь нажмем на ссылку Sign up.
3. Далее заполним поля Email address, Enter the code shown above и нажмем на кнопку Continue. Вы также можете войти с помощью социального логина Telegram, Google или GitHub.
4. Затем заполним поле Пароль и нажмем на кнопку Продолжить.
5. После создания аккаунта проверим зарегистрированный email. В присланном письме нажмем на кнопку Подтвердить мой аккаунт.
6. Теперь нажмем на кнопку Copy, чтобы скопировать созданный токен, поскольку этот токен будет настроен в приложении Node.js.
7. Готово! Ваш аккаунт был создан, а токен сгенерирован. Документация по API доступна по адресу https://docs.audd.io/.
Создание приложения Node.js
Node.js — это кроссплатформенное программное обеспечение с открытым исходным кодом, которое выполняет код JavaScript на сервере. Оно основано на интерпретаторе JavaScript V8 от Google.
1. Создадим приложение. Создадим папку приложения.
mkdir chatbot-whatsapp
cd chatbot-whatsapp
2. Теперь создадим файл package.json. Опция -y позволяет создать файл без вопросов, таких как название приложения, версия и др.
npm init -y
3. Далее мы установим зависимости dotenv, express, got и @zenvia/sdk.
npm install dotenv express got @zenvia/sdk
4. После установки зависимостей создадим файл .env.
touch .env
5. Теперь добавим токены, созданные на платформах Zenvia и AudD, в файл .env, как показано ниже.
ZENVIA_TOKEN=gSTuqxR2rsXY-UJGzdXFMWv-uvp7DKPtGLzq
AUDD_TOKEN=311207449541d9dbd7f7bc9a52680e57
6. Далее создадим папку src и создадим файл index.js внутри папки src.
mkdir src
touch src/index.js
7. После создания папки и файла добавим в файл src/index.js содержимое ниже, где при получении сообщения приложение будет отправлять сообщение с содержимым Tested.
const dotenv = require('dotenv');
const { Client, TextContent, WebhookController } = require('@zenvia/sdk');
dotenv.config();
const client = new Client(process.env.ZENVIA_TOKEN);
const whatsapp = client.getChannel('whatsapp');
const webhook = new WebhookController({
messageEventHandler: (messageEvent) => {
console.log('Message event:', messageEvent);
const content = new TextContent('Tested');
whatsapp.sendMessage(messageEvent.message.to, messageEvent.message.from, content)
.then(response => {
console.log('Response:', response);
});
},
channel: 'whatsapp',
});
webhook.on('listening', () => {
console.log('Webhook is listening');
});
webhook.init();
8. Теперь запустим приложение с помощью следующей команды.
node src/index.js
9. Далее мы протестируем интеграцию с платформой Zenvia. Мы отправим тестовое сообщение, используя зарегистрированный мобильный телефон. Вы должны получить сообщение с содержанием Tested.
10. После создания и тестирования отправки и получения текстовых сообщений изменим содержимое файла src/index.js для улучшения работы приложения, поиска распознавания музыки и отправки содержимого типа аудио и изображения.
const dotenv = require('dotenv');
const got = require('got');
const FormData = require('form-data');
const { Client, FileContent, TextContent, WebhookController } = require('@zenvia/sdk');
dotenv.config();
const client = new Client(process.env.ZENVIA_TOKEN);
const whatsapp = client.getChannel('whatsapp');
const webhook = new WebhookController({
channel: 'whatsapp',
messageEventHandler: async (messageEvent) => {
let content = [new TextContent('Tested')];
if (messageEvent.message.contents[0].type === 'file' && messageEvent.message.contents[0].fileMimeType.includes('audio')) {
const music = await recognizeMusic(messageEvent.message.contents[0].fileUrl);
if (music) {
let text = '';
if (music.artist) {
text = `${text}Artist: *${music.artist}*n`;
}
if (music.title) {
text = `${text}Title: *${music.title}*n`;
}
if (music.album) {
text = `${text}Album: *${music.album}*n`;
}
content = [new TextContent(text)];
if (music.deezer && music.deezer.picture) {
content.push(new FileContent(music.deezer.picture, 'image/jpeg'));
}
if (music.deezer && music.deezer.preview) {
content.push(new FileContent(music.deezer.preview, 'audio/mpeg'));
}
} else {
content = [new TextContent('Could not identify the music from the audio.')];
}
}
whatsapp.sendMessage(messageEvent.message.to, messageEvent.message.from, ...content)
.then((response) => {
console.debug('Response:', response);
});
},
});
webhook.on('listening', () => {
console.info('Webhook is listening');
});
webhook.init();
const recognizeMusic = async (url) => {
const form = new FormData();
form.append('api_token', process.env.AUDD_TOKEN);
form.append('url', url);
form.append('return', 'deezer');
const response = await got.post('https://api.audd.io/', {
body: form,
responseType: 'json',
resolveBodyOnly: true,
});
if (response && response.result) {
return {
artist: response.result.artist,
title: response.result.title,
album: response.result.album,
deezer: {
picture: response.result.deezer && response.result.deezer.artist ? response.result.deezer.artist.picture_medium : undefined,
preview: response.result.deezer ? response.result.deezer.preview : undefined,
},
};
}
};
11. Теперь снова запустим приложение с помощью команды ниже.
node src/index.js
12. Далее мы протестируем интеграцию с платформами Zenvia и AudD. Мы отправим аудиозапись музыкального произведения. Нажмем и удержим кнопку Record, чтобы записать 5 секунд музыки.
13. После отправки аудиозаписи приложение получит аудиофайл, выполнит поиск распознавания музыки, и если музыка распознана, приложение отправит текстовое сообщение с информацией о музыке, такой как исполнитель, название и альбом, а также два других изображения и аудиосообщения с 30 секундами музыки.
14. Готово! Мы протестировали приложение с отправкой и получением текстовых, графических и аудиосообщений с помощью мобильного телефона и распознавания музыки.
Репозиторий приложения доступен по адресу https://github.com/rodrigokamada/chatbot-whatsapp-music.
Заключение
Подводя итоги, можно сказать, что в этой статье были рассмотрены следующие темы:
- Мы создали учетную запись на платформе ngrok.
- Мы установили и настроили инструмент платформы ngrok.
- Мы создали учетную запись на платформе Zenvia.
- Мы создали песочницу на платформе Zenvia на канале WhatsApp.
- Мы создали учетную запись на платформе AudD.
- Мы создали приложение на Node.js.
- Мы протестировали отправку и получение текстовых, графических и аудиосообщений на канале WhatsApp с помощью мобильного телефона и распознавания музыки.
Вы можете использовать эту статью для создания приложения с помощью JavaScript и Node.js, отправки и получения сообщений на канале WhatsApp с помощью платформы Zenvia и распознавания музыки с помощью платформы AudD.
Спасибо за прочтение и надеюсь, что статья вам понравилась!
Этот учебник был опубликован в моем блоге на португальском языке.
Чтобы быть в курсе всех моих новых статей, следите за мной в Twitter и LinkedIn.