Поиск Spotify
Цель: создать приложение для поиска музыки, используя jQuery, AJAX и Spotify API. Вы будете использовать конечную точку поиска Spotify для поиска треков (песен).
Минимальные требования
- В вашем приложении должна быть форма для поиска треков (песен). В этой форме необходимо поле ввода ключевого слова поиска.
- Когда пользователь отправляет форму, используйте jQuery, чтобы получить ключевое слово поиска из входных данных формы.
- Используйте AJAX для вызова конечной точки поиска Spotify с ключевым словом поиска из формы.
- В случае успеха вызова AJAX отобразите результаты поиска на странице. Для каждого результата необходимо указать как минимум название трека и имя исполнителя.
- Каждый раз, когда пользователь отправляет форму, удаляйте из представления все предыдущие результаты поиска.
Бонусные идеи
При желании, бросьте себе вызов и продвиньте проект дальше!
- Отображение обложки альбома трека рядом с каждым результатом поиска в представлении. Подсказка: если вы попытаетесь получить доступ к обложке альбома, но она недоступна, вы заметите, что ваше приложение сломается. Чтобы этого не произошло, сначала проверьте, доступны ли какие-либо произведения искусства.
- Spotify предоставляет нам
preview_url для каждого трека. Создайте кнопку воспроизведения для каждого трека в вашем представлении, которая откроет preview_url на новой вкладке (начнется воспроизведение песни!). - Было бы неплохо сообщить пользователю, что что-то происходит в течение нескольких миллисекунд между отправкой формы и получением данных на странице. Покажите
loading.gif (предоставленный в каталоге images ) при отправке формы и скройте его, когда вы получите данные обратно из Spotify. - Обработайте случай, когда данные из Spotify не возвращаются. Вам нужно сообщить пользователю, что результатов нет, а не просто показывать пустую страницу.
- Обработайте случай, когда пользователь отправляет поиск с пустым ключевым словом. Проверьте ошибку в консоли при отправке пустой формы; Spotify считает это «плохим запросом!» Если пользователь пытается отправить пустую форму, не выполняйте поиск, а вместо этого напомните ему ввести ключевое слово.
Начиная
- Создайте форк этого репозитория и клонируйте его на свой компьютер.
- Используя токен, который вы получили на занятии в заголовке вашего запроса AJAX, потренируйтесь в запросе конечной точки поиска Spotify с помощью Postman или
curl с несколькими различными ключевыми словами. Вам нужно будет установить type=track в URL-адресе вашего запроса. Посмотрите на данные ответа и выясните, как вы будете получать доступ к названию трека и имени исполнителя для конкретного трека (это потребует доступа к значениям из JSON с помощью вложенных объектов и массивов).
Примечание ! Срок действия вашего токена истекает каждый час! Да, это очень раздражает. Обязательно обновляйте свой токен, используя этот генератор токенов, во время работы. - Как только вы освоитесь со структурой данных ответа, поработайте над использованием AJAX для вызова API Spotify, когда пользователь отправляет форму.
- Начните с
console.log - записи данных ответа. Как только все заработает, получите доступ к данным, которые хотите отобразить (название трека и имя исполнителя). - Если вы знаете, как получить доступ к данным из результатов, используйте jQuery, чтобы
append их на страницу. Подсказка: вам понадобится использовать Array#forEach для перебора всех дорожек, которые Spotify возвращает в данных ответа.
Подчинение
- Внося изменения в код, часто фиксируйте и отправляйте изменения в свою вилку GitHub.
- После того как вы выполнили задание и отправили свою работу на GitHub, сделайте запрос на включение из своей вилки в исходный репозиторий.
Ресурсы
- jQuery.ajax()
- Конечная точка поиска Spotify
