Pesquisa Spotify
Objetivo: Criar um aplicativo de busca de música usando jQuery, AJAX e a API Spotify. Você usará o endpoint de pesquisa do Spotify para pesquisar faixas (músicas).
Requisitos Mínimos
- Seu aplicativo deve possuir um formulário para busca de faixas (músicas). Este formulário precisa de um campo de entrada para a palavra-chave de pesquisa.
- Quando um usuário envia o formulário, use jQuery para obter a palavra-chave de pesquisa da entrada do formulário.
- Use AJAX para chamar o endpoint de pesquisa do Spotify com a palavra-chave de pesquisa do formulário.
- Após o sucesso da chamada AJAX, renderize os resultados da pesquisa na página. Você deve incluir pelo menos o nome da faixa e o nome do artista para cada resultado.
- Cada vez que o usuário enviar o formulário, limpe todos os resultados de pesquisa anteriores da visualização.
Ideias bônus
Opcionalmente, desafie-se a levar o projeto mais longe!
- Exiba a capa do álbum de uma faixa ao lado de cada resultado da pesquisa na visualização. Dica: você notará que se tentar acessar a capa do álbum, mas nenhuma estiver disponível, seu aplicativo irá falhar. Evite que isso aconteça verificando primeiro se alguma obra de arte está disponível.
- O Spotify nos fornece um
preview_url para cada faixa. Crie um botão de reprodução para cada faixa na sua visualização que abre o preview_url em uma nova aba (ele começará a tocar a música!). - Seria bom informar ao usuário que algo está acontecendo em poucos milissegundos entre o envio do formulário e a obtenção dos dados na página. Mostre
loading.gif (fornecido no diretório images ) quando o formulário for enviado e oculte-o quando você recuperar dados do Spotify. - Lide com o caso em que nenhum dado volta do Spotify. Você deseja que o usuário saiba que não há resultados, em vez de apenas mostrar uma página em branco.
- Lide com o caso em que o usuário envia a pesquisa com uma palavra-chave vazia. Confira o erro no console ao enviar este formulário em branco; O Spotify considera isso um “pedido ruim!” Se o usuário tentar enviar um formulário em branco, não pesquise e lembre-o de inserir uma palavra-chave.
Começando
- Bifurque este repositório e clone-o em seu computador.
- Usando o token que você obteve na aula no cabeçalho da sua solicitação AJAX, pratique a consulta ao endpoint de pesquisa do Spotify usando Postman ou
curl com algumas palavras-chave de pesquisa diferentes. Você desejará definir type=track no URL da sua solicitação. Observe os dados de resposta e descubra como você acessaria o nome da faixa e o nome do artista de uma faixa específica (isso envolverá o acesso a valores de JSON com objetos e matrizes aninhados).
Observação ! Seu token expira a cada hora! Sim, isso é super chato. Certifique-se de atualizar seu token usando este gerador de token enquanto trabalha. - Quando você se sentir confortável com a estrutura dos dados de resposta, trabalhe no uso do AJAX para fazer a chamada da API para o Spotify quando o usuário enviar o formulário.
- Comece
console.log -ing os dados de resposta. Depois de fazer isso funcionar, acesse os dados que deseja exibir (nome da faixa e nome do artista). - Se você souber como acessar os dados dos resultados, use jQuery para
append los à página. Dica: você vai querer usar Array#forEach para iterar por todas as faixas que o Spotify retorna nos dados de resposta.
Submissão
- À medida que você faz alterações no código, faça commit e push com frequência para seu fork do GitHub.
- Depois de terminar a tarefa e enviar seu trabalho para o GitHub, faça uma solicitação pull do seu fork para o repositório original.
Recursos
- jQuery.ajax()
- Ponto final de pesquisa do Spotify
