Веб-приложение React, ориентированное на мобильные устройства, которое определяет настроение пользователя на основе недавно прослушанной музыки на Spotify.

В феврале этого года я построил Кольцо настроения. Он проверяет недавно воспроизведенные песни пользователя на Spotify с помощью Spotify API и пытается угадать настроение этого пользователя.

Я поделился им с друзьями и разместил его в Интернете, и я рад сообщить, что он привлек более 3000 пользователей из 15+ стран.

Концепция 💡

Что музыка, которую мы слушаем, говорит о наших чувствах?

Я знал, что хочу создать проект с Spotify API. Он невероятно мощный и предоставляет обширную аналитику для каждой песни во всей библиотеке Spotify, что очень круто.

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

Продолжив эту идею, я остановился на детекторе настроения.

Технология 👨🏼‍💻

Полный код этого проекта доступен здесь на моем GitHub. Я использовал следующее:

  • Реагировать
  • React-Router
  • Redux
  • Axios (для запросов к Spotify API)
  • Авторизация OAuth2
  • Bootstrap 5
  • Figma (для разработки пользовательского интерфейса)

Рекомендации по пользовательскому интерфейсу 🎨

Я бы не назвал себя дизайнером, но у меня есть сильные предпочтения к дизайну. Мне нравятся простые, незамысловатые вещи со смелыми, немного детскими линиями и цветами.

Несколько человек предложили цветовую схему, которая более естественно сочетается друг с другом, но я не согласен. Мне нравится немного необычное и очаровательное ощущение.

Алгоритм определения настроения 👨‍🔬

Spotify API предоставляет действительно интересную аналитику для их песен. Помимо более ожидаемых темпа, ударов в минуту и тональности песни, Spotify также включает танцевальность, акустичность, энергия и валентность (мера ощущаемого счастья).

Как видите, Spotify уже проделал большую часть тяжелой работы. Со своей стороны, я установил средние значения для каждой аналитики и написал функции, чтобы найти, а затем сравнить их процентную разницу с этими средними значениями.

Если песня была ниже среднего, скажем, по танцевальности, я бы пометил ее как «менее танцевальную» по значению ее процентного отличия от среднего. Таким образом, я мог ранжировать их.

Это дало мне упорядоченный список того, какая аналитика больше всего выделялась из недавнего опыта прослушивания пользователем. Здесь все развлекалось. Если последние песни пользователя были наиболее примечательны, например, «больше счастья» и «танцевальности», то я с уверенностью мог предположить, что пользователь, возможно, был чувствуете себя энергичным или выразительным.

Вот простой пример из самого первого настроения, которое обнаруживает моя программа:

if (
    moodNames.includes("more-happiness") &&
    moodNames.includes("lower-danceability")
) {
    return "peaceful";

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

C Проблемы и решения 🚧

OAuth2 Flow для начинающих

Это был мой первый раз, когда я использовал стороннюю аутентификацию и процесс входа в систему, поэтому мне потребовалось время, чтобы понять и привыкнуть к потоку.

Я так много практиковался в этом, что позже почувствовал себя достаточно уверенно, чтобы написать это руководство (которое было опубликовано в разделе Кодирование повышения уровня здесь, на Medium) для реализации аналогичного процесса OAuth2 для приложений, подключающихся к Strava, популярная платформа для социальных сетей.

Файлы cookie, файлы cookie, файлы cookie

Изначально я узнал, как использовать OAuth2, используя local.storage для хранения токенов аутентификации во время передачи со страницы аутентификации Spotify обратно в приложение. Это было нормально, пока я не узнал, что это вызывает проблемы у пользователей с блокировщиками рекламы.

Я узнал, что этот метод создает файл cookie в браузере, что вызывает красный флаг. Но, к счастью, было простое решение: вместо этого я реализовал хранилище Redux для хранения токенов.

Ошибка обработки объектов ответа

Я написал try и catch утверждения для всех моих запросов Axios, но я упустил одну проблему: пользователи без фотографий профиля. Я никогда не видел аккаунт Spotify без него и даже не подозревал, что это возможно!

Я провел много времени, задаваясь вопросом, почему приложение постоянно вылетает у небольшого количества пользователей, независимо от того, какое устройство они использовали. К счастью, очень полезный человек на Reddit предложил проблему, и я смог создать изображение профиля по умолчанию, чтобы решить эту проблему. Теперь я более осторожен с объектами, возвращаемыми из API.

Одна большая ошибка новичка 🤦

  • В то время я не знал, что вы можете настроить ESLint с Prettier, поэтому, когда я подумал, что закончил, я очистил код, скопировав / вставив каждый файл в Prettier.io. Площадка », а затем скопируйте / вставьте чистый код обратно в проект. Это сработало, но теперь у меня есть гораздо лучший метод.

Заключение ✨

Я многому научился, создав этот проект. Было также весело внести что-то в мир, и я с нетерпением жду следующего.

Хостинг с Vercel также был отличной идеей, и я использовал его для всех своих личных проектов, а также написал учебник, который был выбран и опубликован на Javascript In Plain English о настройке это вверх.

Настроения странные и невыразимые, но я надеюсь, что Mood Ring у кого-то связался :)