Как я построил музыкальный автомат для вечеринок для общественных мероприятий
Я часто добровольно предлагаю свой дом в качестве места встречи, когда мои друзья решают, что было бы неплохо наверстать упущенное за бокалом напитка. Бог знает почему - я должен действительно получать удовольствие от утилизации отходов или чего-то в этом роде. Как бы то ни было, некоторое время назад я яростно вводил запросы песен друзей в Spotify, и у меня возникла идея создать какое-то внешнее приложение, чтобы автоматизировать этот процесс и избавить меня от работы ди-джеем весь вечер.
Я начал думать, какие платформы подойдут для этого - какое-нибудь одностраничное веб-приложение, написанное на Angular? Или, может быть, даже родное приложение для iOS / Android. Я беспокоился о том, насколько удобным будет приложение для тех, кто просто хочет поставить песню в очередь, поэтому я выбрал платформу, которая почти у всех уже есть на своих телефонах - Facebook Messenger.
Созданное мной приложение принимает сообщения от пользователей, вводит запрос в поисковую систему Spotify, а затем возвращает эти результаты пользователю с кнопками для принятия или получения дополнительных результатов.
В этой статье вы узнаете, как я этого добился. Сопровождающий исходный код можно найти здесь:
Я рекомендую вам клонировать его, следить за статьей и обращать внимание на комментарии к коду, но я должен подчеркнуть, что из-за нескольких соображений развертывания этот не предназначен для того, чтобы быть готовым продуктом - это доказательство концепции, на которую вы можете опираться.
Это не руководство по JavaScript или Node - в идеале вы будете обладать базовыми знаниями о работе с npm, написании кода JavaScript и создании простых веб-серверов с использованием Node.js.
Итак, без лишних слов…
Приложение Node.js ️
Приложение состоит из трех файлов JavaScript:
index.js содержит настройку веб-сервера Express и конфигурацию маршрутизации.
spotify.js экспортирует служебный объект Spotify, который можно использовать для поиска треков и добавления треков в музыкальный автомат. Идея этого приложения состоит в том, что плейлист музыкального автомата создается при запуске, и треки добавляются в этот плейлист. Когда хост нажимает кнопку воспроизведения в списке воспроизведения, Spotify автоматически добавляет новые треки в очередь воспроизведения. По сути, это обходной путь того факта, что Spotify не публикует API для изменения самой очереди воспроизведения.
messenger.js экспортирует служебный объект Messenger, который позволяет создавать причудливые шаблоны списков, кнопки, упорядочивать результаты поиска и расшифровывать намерения пользователя при нажатии кнопок.
Чтобы этот пример был как можно более сфокусированным и простым, я не включил модульные тесты в исходный код. Я рекомендую всегда писать модульные тесты при создании реальных развернутых приложений.
Переменные среды
Это приложение поставляется с замещающим набором переменных среды, содержащихся внутри .env , и я вскоре объясню, как получить каждую из этих переменных.
Если вы используете репозиторий системы управления версиями, например GitHub, для управления своим проектом, убедитесь, что ваш .env файл не зафиксирован, поскольку эти переменные являются очень конфиденциальной информацией, которую следует хранить в тайне.
Отладка безопасных обратных вызовов
Чтобы Messenger мог доставлять сообщения в приложение, пока вы его отлаживаете и тестируете, вам необходимо иметь защищенный URL-адрес, по которому можно получить доступ к приложению.
Для этого я использую замечательный бесплатный инструмент под названием ngrok . Загрузите и установите / извлеките этот инструмент с https://ngrok.com/
Запустите командную оболочку и запустите ngrok со следующей командой:
ngrok http 3000
(Если вы пользователь Windows, вам нужно сначала перейти туда, куда вы извлекли ngrok исполняемый файл. Я извлек ngrok в свой каталог Windows, чтобы избежать это).
С помощью этой команды вы создаете HTTP-туннель к порту 3000 локального компьютера. Я выбрал порт 3000 здесь довольно произвольно - вы можете использовать любой порт, который вам нравится, если вы обновите номер порта в index.js (или еще лучше, укажите его в .env файл).
Если все пойдет хорошо, ngrok инициализируется и отобразит ваш защищенный URL:
Запишите этот URL - вы будете использовать его в следующих разделах.
Создание бота-мессенджера
Первым шагом к тому, чтобы это приложение заработало, является создание бота на сайте Facebook. Это включает в себя создание «приложения» и вспомогательной «страницы» - это процесс, который я считаю чрезмерно утомительным, если честно, но он относительно безболезненный и не занимает много времени.
Войдите в Facebook и перейдите на портал разработчиков Facebook по адресу https://developers.facebook.com/. Если вы еще не регистрировались в качестве разработчика на Facebook, вас могут попросить сначала предоставить некоторые начальные данные - следуйте инструкциям Facebook, если это так.
Когда вы зашли на портал разработчиков Facebook, в левом верхнем углу страницы раскрывайтесь меню «Мои приложения» и выберите Добавить новое приложение, чтобы начать работу.
Введите запрашиваемые данные и нажмите Создать идентификатор приложения, когда они вас устроят.
Когда ваше приложение будет создано, вы должны появиться на его панели инструментов.
Чтобы добавить в приложение функции Messenger, нажмите кнопку + рядом с Продукты в меню слева. На следующей странице выберите Настроить на карточке с названием «Messenger».
На следующей странице настройки Messenger есть несколько разделов. Первый раздел, который нас интересует, называется Токены доступа:
Чтобы действительно найти своего бота в Messenger, вам необходимо создать для него «страницу» в Facebook, которая будет служить идентификатором бота. Нажмите Создать новую страницу (крошечная ссылка под раскрывающимся списком Страница), чтобы начать этот процесс.
На следующих страницах мастера вам будет предложено предоставить основную информацию о предполагаемом использовании бота, например о том, для бизнеса он или для публичного лица. Для написания этой статьи я выбрал Public Figure, но выбор действительно ваш.
Когда вы закончите создавать свою страницу, я рекомендую выбрать подходящее @Username для лучшей видимости. Вы можете добавить изображение и обложку, если хотите придать своему боту некоторую индивидуальность, но это совершенно необязательно.
Вернитесь в область настройки токенов доступа и обновите страницу. Теперь у вас должна быть возможность выбрать новую страницу из раскрывающегося списка и связать ее со своим ботом:
Вы можете видеть, что Facebook хочет получить разрешения для этого приложения на ссылку с вашей страницей. Нажмите Изменить разрешения и просмотрите процесс предоставления разрешений Facebook - это должно быть довольно просто. Когда вы закончите, поле «Токен доступа к странице» будет заполнено действующим токеном - скопируйте этот токен в переменную MESSENGER_ACCESS_TOKEN в .env. Этот токен отправляется с каждым запросом, который мы делаем к API-интерфейсу Messenger.
Следующий интересующий нас раздел на этой странице называется Webhooks:
Нажмите Подписаться на события, чтобы настроить, как Messenger будет связываться с вашим приложением Node.js:
Начните с отметки сообщений и сообщений_постбэков, чтобы подписаться на уведомления о сообщениях от Messenger - очень важно! 😉
URL обратного вызова определяет защищенное имя хоста, на котором находится ваше приложение, и конечную точку, на которой вы собираетесь отвечать на сообщения. Здесь должен быть указан URL-адрес, предоставленный вам ngrok, плюс конечная точка / webhook.
Verify Token - произвольное значение, используемое Facebook для подтверждения того, что приложение по URL-адресу обратного вызова действительно принадлежит вам. Это может быть что угодно - в этом примере я выбрал случайный GUID. Что бы вы ни выбрали, скопируйте это значение в переменную MESSENGER_VERIFY_TOKEN в .env. Когда вы нажмете Подтвердить и сохранить, Messenger попытается доставить этот токен подтверждения на указанную вами конечную точку вместе с токеном «запроса». Конечная точка просто должна подтвердить токен проверки и вернуть статус 200 (ОК) с токеном запроса в теле ответа. Вы можете увидеть, как этот код выглядит в маршруте Webhook GET, в index.js.
Запустите приложение, убедитесь, что сервер готов, и нажмите Проверить и сохранить на странице подписок, которую вы только что закончили настраивать.
Если все в порядке, диалоговое окно должно закрываться, и в левой части страницы отображается значок Веб-перехватчики с зеленой галочкой, а также сообщение в окне консоли:
Server available on port 3000 Responded to Facebook verification request
Если у вас возникли проблемы с этим, убедитесь, что ваш безопасный HTTP-туннель работает, а URL-адрес и конечная точка указаны правильно. Кроме того, убедитесь, что ваш брандмауэр настроен правильно, чтобы разрешить доступ по протоколу HTTP.
Наконец, раздел Webhooks на странице настройки Messenger теперь должен предлагать возможность подписать наш webhook на события страницы:
Нажмите «Подписаться», чтобы завершить этот процесс.
Spotify
Чтобы подключить Spotify к приложению, вы создадите «приложение» на портале разработчика Spotify. Это предоставит учетные данные, необходимые для доступа к службам Spotify.
Перейдите на https://developer.spotify.com/ и перейдите в раздел Личный кабинет. Если вам будет предложено войти в систему, сделайте это, используя свои учетные данные Spotify.
Следуйте инструкциям на панели управления, чтобы создать приложение - вам будет предложено предоставить некоторую основную информацию, такую как название, описание и предполагаемое назначение приложения, прежде чем принимать условия использования Spotify.
Когда вы закончите с этим процессом, вы попадете на панель управления своего нового приложения. На этой странице есть важная информация, на которую следует обратить внимание:
Идентификатор клиента и Секрет клиента будут использоваться для аутентификации в Spotify и получения токенов доступа / обновления - они должны храниться как SPOTIFY_CLIENT_ID и SPOTIFY_CLIENT_SECRET. соответственно в файле .env.
Последней частью настройки, необходимой для Spotify, является предоставление URL-адреса обратного вызова. Когда приложение проходит процесс входа в Spotify, на эту конечную точку будет доставлен код авторизации, который нам понадобится для получения токенов доступа / обновления. Вы можете указать эту конечную точку, нажав Изменить настройки в правом верхнем углу страницы:
Как видите, я предоставил свой защищенный URL из ngrok with /spotify в качестве конечной точки. Кроме того, примените это к переменной SPOTIFY_CALLBACK в .env . Не забудьте нажать Сохранить внизу страницы, иначе ничего не изменится - это меня выявляло десятки раз ...
Последняя переменная, которая должна быть установлена в .env, - SPOTIFY_USER_ID. Это просто ваше стандартное имя пользователя Spotify. Вы можете найти его, посетив веб-сайт Spotify и перейдя на страницу обзора учетной записи.
Готов идти
Вот и все! Надеюсь, вам удалось получить и сохранить всю информацию, необходимую для работы приложения. Запустите его, запустив npm start, и вы заметите, что на консоль выводится URL:
Authorization required. Please visit https://accounts.spotify.com/authorize?client_id=f8ea6161a16844addfa&response_type=code&redirect_uri=https://41be75a4.ngrok.io/spotify&scope=playlist-read-private%20playlist-modify%20playlist-modify-private&state=default-state
Перейдите по этому URL-адресу, чтобы войти в приложение в свою учетную запись Spotify. Когда авторизация будет завершена, в консоли появится следующее сообщение:
Spotify is ready!
Вы также заметите, что в вашей учетной записи Spotify появился новый плейлист, имя которого совпадает с переменной среды SPOTIFY_PLAYLIST_NAME. Это список воспроизведения, в который музыкальный автомат будет добавлять свои треки.
Все, что осталось сделать, - это найти своего бота в Messenger (или зайти на «http://m.me/pivUserName с именем пользователя, которое вы выбрали ранее) и поиграть 😊
Чтобы ваш бот для обмена сообщениями отвечал не только вам, но и другим людям, вам необходимо пройти процедуру утверждения приложения Facebook, ссылки на которую можно найти на панели управления вашего приложения. По моему собственному опыту, этот процесс занял всего пару часов и, похоже, просто вовлекает команду утверждения, отправляющую несколько сообщений вашему боту, чтобы убедиться, что он действительно выполняет то, что вы сказали.
Есть куда расти
Это приложение представляет собой довольно простой пример того, как эта идея может работать, и я намеренно оставил его довольно минимальным, чтобы не усложнять этот урок. Конечно, есть некоторые улучшения, которые вы могли бы рассмотреть:
Сохранение токенов доступа / обновления, чтобы избавиться от необходимости нажимать ссылку аутентификации при каждом запуске приложения.
Начать воспроизведение, если трек добавлен в плейлист музыкального автомата, но музыка в данный момент не воспроизводится.
Модераторы, чтобы одобрять / отклонять запросы песен и не давать непослушным гостям вечеринки спамить ваш музыкальный автомат мусорной музыкой…
Команда включения / выключения, чтобы пользователи не могли добавлять новые треки в музыкальный автомат.
Развертывание. Я успешно развернул версию этого приложения в AWS ElasticBeanstalk и полагаю, что его, вероятно, можно будет отремонтировать для работы с AWS Lambda. Однако это выходит за рамки данного руководства.
Спасибо за прочтение! Надеюсь, вы нашли этот урок полезным и вдохновились на создание чего-то классного.
