Jam Map — это простое веб-приложение, которое находит музыку на основе выбранного пользователем BPM, года выпуска, жанра, тональности (функция на другой день) и страны происхождения. Учитывая ввод пользователя, приложение сначала находит музыку по BPM через API GetSongBPM, а затем эти результаты дополнительно фильтруются с использованием остальной части пользовательского ввода. Используя имя исполнителя и название песни, мы могли бы использовать iTunes для ссылок на обложку и 30-секундные сэмплы для добавления к результатам. Основная идея состоит в том, чтобы использовать музыкальные свойства песни и присвоенные им категории, чтобы найти музыку с похожим чувством. Вместе с Полем Барнсом и Питером Консагра (Pconsagra) я помогал разрабатывать это приложение, работая с API iTunes, и здесь я подробно описываю опыт обучения, который может помочь кому-то еще. используя их API.
Использование JSONP для получения данных iTunes
Наивный подход (которого легко избежать, не просматривая документы iTunes API) состоит в том, чтобы попробовать базовую выборку с использованием Javascript. Вскоре любой (вызывающий), использующий этот подход, столкнется с проблемами с политиками того же происхождения, которые ограничивают отправку данных обратно вызывающему. После долгого почесывания головы и подбородка вы можете обнаружить с помощью поиска Google или просто просмотрев документы iTunes, что они рекомендуют создавать теги сценария, полученные по URL-адресу, который вы обычно используете при выборке:
<script src="https://.../search?parameterkeyvalue&callback={callback function}"></script>.
Это, как описано в Википедии, считается старой техникой под названием JSONP, которая представляет собой обходной путь (некоторые называют это хаком) для проблем с получением данных из другого домена. URL-адрес также включает набор параметров для функции обратного вызова, которую программист должен определить с аргументом для обработки данных. Реализация включала создание этих тегов в Javascript, размещение их в DOM, а затем получение данных. Простой! Что ж, когда вам нужно сделать более одного запроса и связать эти данные с данными из другого API, все может запутаться из-за присущей асинхронности в вызовах API. Это проявилось как ошибка в наших результатах, когда обложка Майкла Джексона появлялась поверх имени Оззи Осборна. Теперь понятно, почему Javascript возвращает промисы и обрабатывается немного иначе, чем без ожидания ответа. (Для лучшего понимания, чем я могу дать, этот сайт также помогает понять, почему этот JSONP работает.)
Ajax для обработки нескольких вызовов в iTunes
Дополнительный поиск в Google покажет, что другие люди сталкивались с проблемой синхронизации экземпляров вызовов функций с данными, возвращаемыми из API. Хороший способ справиться с этим — использовать Ajax, у которого есть параметры (другие не показаны) для обработки запросов JSONP:
$.ajax({
url: apiUrl
datatype: 'jsonp'
}).done(function(response) {some code...})
с apiUrl, являющимся тем же URL-адресом, который мы использовали бы раньше, без параметра обратного вызова. Ajax занимается созданием уникальных функций обратного вызова, чтобы данные попадали в нужное место. В Ajax музыкальные карты на странице Jam Map имеют правильную обложку и музыкальные образцы.
Что улучшить
Хотя было приятно найти способ получать данные из iTunes несколькими способами, еще есть над чем работать, чтобы приложение работало лучше, особенно на мобильных устройствах. При использовании нашего приложения в инструментах разработчика Chrome в режиме адаптивного дизайна (iPhone6/7/8) вызов iTunes не работает, и мы получаем ошибку net::ERR_UNKNOWN_URL_SCHEME, за которой следует ошибка 403. Пока нет четкого ответа, почему ответ iTunes зависит от размера экрана.
В целом, это был интересный проект для работы. Спасибо Петру и Павлу за то, что они отличные товарищи по команде. Я также хочу отметить неоценимую поддержку и ресурсы, предоставленные учебным лагерем Калифорнийского университета в Беркли во время нашего участия в программе.
