Consumindo a API do Spotify: um breve passo a passo
Durante minha última semana como aluna da turma 7 do bootcamp de Front-End da {Reprograma}, como tema de projeto final de curso, eu quis produzir uma aplicação web que fizesse uso da API do Spotify, para criar playlists com base em bandas sugeridas pelo usuário.
Ao mesmo tempo em que estava muito ansiosa e empolgada em executar minha ideia, eu mal sabia como botá-la em prática por alguns motivos: 1) apesar de muitos desenvolvedores elogiarem a documentação da API do Spotify, o conteúdo está todo em inglês; 2) tive muita dificuldade em achar as informações que de fato eram relevantes para mim e me perdi muitas vezes dentro da documentação; 3) essa era a primeira vez que eu iria consumir uma API em um projeto individual e eu estava com medo de não ser capaz de achar os dados que eu queria.
Pois bem, para ajudar você, que também está consumindo uma API pela primeira vez (seja ela do Spotify ou não), a driblar as barreiras linguísticas da documentação, para que não se sinta tão desolada ou sozinha — pois, acredite, seu projeto vai sair e vai ficar lindão que nem o meu ficou! — , escrevi este breve tutorial sobre como fazer requisições Ajax utilizando a API do Spotify e conseguir os dados que precisa. Siga o passo a passo, adapte ele para seu escopo e vem comigo :)
- Configure o ambiente
Vou começar assumindo que você já compreende React e já conhece as etapas de iniciar um projeto. Se esse for seu caso, digite o famoso npx create-react-app my-app em seu terminal e vamos começar a aplicação.
Contudo, se essa linha de código não fizer sentido para você, recomendo que dê uma lida em como iniciar um projeto na documentação do React — que está em português! — antes de iniciar esse tutorial.
2. Obtendo autorização do Spotify para consumir os dados
De acordo com a documentação do Spotify, para que um projeto acesse os dados de sua API, é necessário que ele tenha permissão. Essa permissão pode ser obtida a partir de três diferentes tipos de autorização estipulados pelo Spotify: Authorization Code, Client Credentials e Implicit Grant. Cada um dos três modelos segue diferentes fluxos de envio de dados entre o servidor (nesse caso, o Spotify), o cliente (nossa aplicação) e os dados oferecidos pelo usuário (ou seja, quem irá consumir nosso projeto).
Para produzir a minha aplicação, eu acabei utilizando o Authorization Code. Esse fluxo trabalha utilizando o protocolo de autorização OAuth 2.0, o qual, por sua vez, permite que nosso projeto acesse aos dados da API do Spotify toda vez que um usuário logar com sua conta ao acessar nossa aplicação.
Para ficar mais claro, sabe quando você loga em um site com sua conta Google ou Facebook? Isso é um exemplo prático de utilização do OAuth.
Neste caso em especial, nosso aplicativo será autorizado a consumir os dados da API do Spotify toda vez que um usuário logar com sua conta e esse processo retornar um código de acesso, conhecido pelo termo token.
Uma vez que tivermos o token enviado pelo Spotify assim que o usuário logar, iremos salvar essa informação em uma variável que será chamada todas as vezes que precisarmos fazer requisições para a API do Spotify (isso ficará mais claro nos tópicos a seguir).
É importante mencionar que, ao utilizar o fluxo Authorization Guide, o token de acesso expira após 60 minutos. Isso significa que após uma hora de uso, o usuário deverá fazer login novamente para obter mais uma chave de acesso para que, consequentemente, nossa aplicação continue buscando pelos dados na API do Spotify.
3. Crie sua aplicação no site do Spotify
Nosso próximo passo é registrar a aplicação que estamos criando no site Spotify for Developers. Apesar de o conteúdo estar em inglês, essas etapas são bem simples.
Clique em “Dashboard”, no topo do site. Após ser direcionada para a nova página, desça o mouse e vá até a parte de logar (“Log In”) ou criar uma nova conta no Spotify for Developers, caso essa seja sua primeira vez utilizando o serviço. É só clicar em “Sign up for a free Spotify account here”. Se você tiver uma conta no Spotify como usuário, essa etapa será ainda mais simples.
Uma vez logada e na tela do Dashbord, clique em um dos “Create an App” para registrar sua nova aplicação.
O processo de criar um App é bem rapidinho. Caso ele não tenha propósito comercial, você pode seguir o exemplo do que fiz abaixo — mas, claro, substitua o nome do App e a descrição dele para algo que diga respeito ao seu projeto:
Uma vez que seu App estiver pronto, você receberá uma Client ID e um Client Secret. Guarde bem esses dois números.
A última etapa para criar seu App é adicionar uma URI de redirecionamento, ou seja, o link que o Spotify irá utilizar para enviar o usuário de volta ao seu aplicativo com segurança depois que ele for autorizado.
Para adicionar sua URI, clique em “Edit Settings” e em “Redirect URIs” digite o endereço “http://localhost:8888/callback”. Por fim, clique no botão de salvar ao final da página.
4. Configure o servidor
Em sua conta do GitHub, o Spotify disponibiliza diversos projetos que facilitam o uso de sua API. Um deles é o repositório web-api-auth-examples, o qual iremos utilizar para dar continuidade ao nosso projeto.
Clone o repositório acima no terminal (ou faça o download) de forma que ele fique na mesma hierarquia do projeto my-app que criamos no primeiro tópico deste tutorial.
Após clonar, instale as dependências do projeto em sua máquina. É só abrir o terminal, entrar dentro da pasta web-api-auth-examples e escrever “npm install”.
Uma vez que as dependências estiverem instaladas, você pode abrir a pasta e perceber que, dentro dela, há outras três cujo nome são os dos três fluxos de autorização que mencionei no segundo tópico deste tutorial: authorization_code, client_credentials e implicit_grant.
Pois bem, como o método escolhido para a autorização foi o Authorization Code, navegue dentro da pasta homônima e abra o arquivo “app.js” que há dentro dela em seu editor de código.
Busque pelas variáveis “client_id”, “client_secret” e “redirect_ui” dentro do arquivo e substitua seus valores pelos respectivos dados que você coletou assim que criou seu App no site Spotify for Developers:
Salve as alterações e, agora dentro da pasta authorization_code, rode o arquivo app.js no terminal escrevendo “node app.js”. O comando deve retornar a resposta “Listening on 8888”. Se tudo funcionou normalmente, você deve ver a tela abaixo ao digitar “http://localhost:8888” em seu browser:
Ao clicar no botão “Log in with Spotify”, a ação deverá levar você até a página de login Spotify. Depois de fazer login, retornaremos ao URI de redirecionamento. Assim, você deverá ver as informações de sua conta do Spotify, bem como seu access token (token de acesso) e refresh token (token de atualização).
5. Configure a parte do cliente
Voltemos agora para nosso projeto my-app que criamos no começo deste tutorial . Abra a pasta do seu projeto no seu editor de código em outra janela (sem fechar o “app.js” da pasta authorization_code que estávamos manipulando acima) e digite “npm start” em seu terminal e veja seu projeto React abrir no localhost:3000.
Pois bem, agora vamos criar um simples botão que redirecione nosso App para a página de login do Spotify, que está aberta em nosso localhost:8888.
Para isso, abra a pasta “src” que existe dentro de “my-app” e busque pelo arquivo “app.js”. Ao abrir o arquivo, apague todo o conteúdo que existe entre a abertura e o fechamento da tag <div>. Depois, adicione um simples botão e uma tag <a> cujo caminho seja o endereço “http://localhost:8888”:
Salve sua alteração e confira a mudança em seu app no browser. Como não adicionamos nenhum CSS, o botão não será nenhum pouco bonito, mas a proposta é que ele funcione — ou seja, que, quando clicado, abra aquela tela do localhost:8888 que convida o usuário a fazer login no Spotify. Mas, calmaí! Antes de clicar no botão, volte para seu arquivo “app.js” da pasta “authorization_code” para uma última alteração.
Vá descendo a página do código até achar o primeiro“red.redirect(‘#’” (que está na linha 107) e altere a hashtag pelo link “http://localhost:3000/#". Essa mudança quer dizer que, após logado, o usuário deverá ser redirecionado ao localhost:3000, caminho em que está o nosso App.
6. Pegando o token de acesso
O próximo e último passo antes de fazermos chamadas de API é pegar o token que o Spotify retorna após o login do usuário, informação necessária toda vez que fizermos uma requisição.
Há várias maneiras de fazer isso. Por sorte, o Spotify disponibilizou a função já pronta que facilita todo esse processo no arquivo “index.html” que existe dentro da pasta “public” de “authorization_code”. É o código getHashParams, que retorna um objeto.
getHashParams() {
var hashParams = {};
var e, r = /([^&;=]+)=?([^&;]*)/g,
q = window.location.hash.substring(1);
e = r.exec(q)
while (e) {
hashParams[e[1]] = decodeURIComponent(e[2]);
e = r.exec(q);
}
return hashParams;
}Copie a função getHashParams e abra a página “app.js” do my-app em que adicionamos o botão de login. Em primeiro lugar, mude o componente funcional App para um componente de classe. Abaixo do constructor e antes do render, adicione a função getHashParams.
Sua página “app.js” deve ficar assim:
Ainda no constructor, vamos criar uma variável que receba o token que o Spotify enviará para a aplicação, uma vez que o usuário fizer o login. De acordo com o objeto retornado pela função getHashParams, a propriedade se chama “access_token”. Agora, o constructor estará assim:
constructor(props){
super(props);
const parametros = this.getHashParams();
const token = parametros.access_token;
}7. Fazendo chamadas de API
Agora vamos à chamada de API de fato. Na guia “Console” do site Spotify for Developers, podemos acessar todos os endpoints (ou seja, todos os caminhos) que o Spotify disponibiliza de seus dados.
Vamos supor que eu queira descobrir as músicas mais tocadas de um artista, ou as “top tracks”, como falamos em inglês. Há um endpoint para isso: o Get an Artist’s Top Tracks.
Perceba que ao selecionar um endpoint desejado há a descrição do que ele faz, a qual método HTTP ele está associado e se ele requer ou não o login do usuário (OAuth). Ao clicar em “DOCS”, somos redirecionados para um documento ainda mais específico sobre como usar o endpoint em questão.
Nesse caso, o Get an Artist’s Top Tracks pede por um token para ser acessado e precisa do ID do artista em questão. O endpoint também deve ser associado a algum país (country) para retornar uma resposta.
https://api.spotify.com/v1/artists/{id}Vamos supor, então, que eu queira descobrir quais são as top tracks da cantora Lorde, cujo ID no Spotify é o código 163tK9Wjr9P9DmM0AVK7lm.
Para isso, vamos fazer uma requisição utilizando o endpoint do Get an Artist’s Top Tracks utilizando o ID da cantora Lorde.
Antes disso, vou instalar a biblioteca jQuery em meu projeto para usar a função ajax. Para isso, basta dar um install no terminal dentro da pasta do projeto e importar o jQuery no início da página
import $ from 'jquery'; *adicione antes de chamar a classe*
npm install jquery; *rode o comando no terminal*Assim, crio a função ajax:
topTracksLorde = () =>{$.ajax({method: "GET",dataType: "Json",url:"https://api.spotify.com/v1/artists/163tK9Wjr9P9DmM0AVK7lm/top-tracks?country=BR",headers: {Authorization: `Bearer ${this.token}`}})
Caso minha requisição dê certo, quero que o Spotify me retorne o nome da música mais tocado da cantora.
Se dermos um console.log no retorno da requisição, logo veremos que ele é um objeto. Portanto, para acessar o nome da música, precisamos ser específicas e buscar o conteúdo que de fato queremos. Assim, escreveremos, logo após fechar a chamada ajax, o then:
.then(dados => {console.log(dados.tracks[0].name)})
E agora associo a função a um evento onClick em um novo botão que criei no:
render() {return (<div className="App"><button><a href='http://localhost:8888'> Logar com Spotify </a></button><button onClick={this.topTracksLorde}>Buscar top tracks da Lorde</button></div>);}
Seu código deve estar assim:
Assim, após logar no Spotify e ter um token de acesso e, posteriormente, clicar no botão cujo título é “Buscar top tracks da Lorde”, meu console traz a resposta: a música mais tocada da cantora na plataforma é Royals.
Esse foi um breve exemplo de como usar um dos endpoints da API do Spotify. Há inúmeras possibilidades de se brincar com os dados do Spotify e criar aplicações interessantes e divertidas. Muitas delas seguem essa mesma estrutura acima, algumas vão exigir que você utilize o método POST ao invés de GET e outras precisarão de escopos específicos para funcionar. Fique atenta!
No mais, espero que esse tutorial tenha sido explicativo. Caso contrário, se houver alguma dúvida, não hesite em entrar em contato comigo: estou disponível por aqui e também no LinkedIn.
Happy coding :)
—
Fontes:
Spotify for Developers ( https://developer.spotify.com/);
Now Playing: Using Spotify’s Awesome API with React —
Jonny Kalambay ( https://medium.com/@jonnykalambay/now-playing-using-spotifys-awesome-api-with-react-7db8173a7b13);
How to Build A Spotify Player with React in 15 Minutes — Joe Karlsson ( https://levelup.gitconnected.com/how-to-build-a-spotify-player-with-react-in-15-minutes-7e01991bc4b6).
