Passo a passo do workshop de React + API Web do Spotify

App.tsx

import React, { useEffect, useState } from "react";
import "./App.css";
import {
  Album,
  getAlbum,
  getArtistTopTracks,
  getCurrentUserTopTracks,
  init,
  Page,
  Track,
} from "spotify-web-sdk";

function App() {
  const [album, setAlbum] = useState<Album>();
  const [tracks, setTracks] = useState<Track[]>();
  const [userTracks, setUserTracks] = useState<Page<Track>>();

  useEffect(() => {
    init({
      token:
        "BQDXA0Jtru5ccTuhn3Vel9X0VvD3F8IWsh_VBIux7RPR14Gt2eL8m4yYY5tHGL18mkwevR93cXv-rw7tZpp-cPzbcHPVMlJTYyTvH8heREkJniEO63G9A40M2e4v5tiHqGeftTlTMhTaOYHGjq4GgWlKyo7ZotV66Kmx0u0cTT83SrMbJEUYVg",
    });
    getAlbum("3lS1y25WAhcqJDATJK70Mq").then((reqAlbum) => setAlbum(reqAlbum));
    getArtistTopTracks("7Ln80lUS6He07XvHI8qqHH", "BR").then((reqTracks) =>
      setTracks(reqTracks)
    );
    getCurrentUserTopTracks({ range: "long_term" }).then((reqTracks) =>
      setUserTracks(reqTracks)
    );
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        {/* <img src={album?.imageUrl} /> */}
        {/* {album?.tracks.items.map((track) => (
          <p>{track.name}</p>
        ))} */}
        {/* {tracks?.map((track) => (
          <p>{track.name}</p>
        ))} */}
        {userTracks?.items.map((track) => (
          <p>
            {track.name} - {track.stringArtists}
          </p>
        ))}
      </header>
    </div>
  );
}

export default App;

midnightify-workshop.md

BQAAYDFDhla16PXkFHjJnmE98IaM1JUjO0i8IIXKKobAVNDhDWqJT36KWLAJqYi58544jWS9F5V1wN1tBK00kjXlLCPRORdqR4WBn2RIwNdXRsZYdrxO5HJa53aKKzKYnAH-VPJPZo7pRm5xbpFdpMSaegskb3jMQW0MUIxh9Of-VQ

Referências

• Documentação da API Web do Spotify: https://developer.spotify.com/documentation/;
• Console da API Web do Spotify (para testar + recuperar token de acesso): https://developer.spotify.com/console/;
• Repositório do Midnightify: https://github.com/jrobsonjr/midnightify;
• Repositório do spotify-web-sdk: https://github.com/calluswhatyouwant/spotify-web-sdk.

Conhecendo a API Web

1. Vamos dar uma olhada na documentação da API. Por lá, podemos ver o modelo das requisições.
2. No lugar de fazê-las na mão, podemos fazê-las de forma mais simples utilizando o spotify-web-sdk!
3. yarn create react-app midnightify --template typescript Vamos usar TypeScript só para fazer proveito dos tipos declarados no SDK!
4. yarn add spotify-web-sdk Adicionando a dependência que vamos utilizar para recuperar os dados da API ✨.
5. Para poder utilizar as funções do spotify-web-sdk, é necessário ter um token de acesso.
6. Esse token pode ser obtido de diversas formas. Vamos ilustrar um fluxo possível com o do Midnightify, mas, para facilitar para o workshop, podemos recuperar tokens pelo Console da API! É importante definir os escopos que serão necessários para recuperar as informações.
7. Com o token em mãos, chamamos a função init({ token: <TOKEN> }) antes de qualquer outra do spotify-web-sdk.
8. Agora já podemos utilizar as outras funções da biblioteca!
9. Vamos ilustrar algumas que eu utilizei para o Midnightify (recuperação de álbuns, de artista)...
10. Vamos adicionar uma feature ao Midnightify: criação de playlists!
11. Vamos ver alguns outros exemplos de aplicações usando o spotify-web-sdk.
12. Hora de explorar!

Provavelmente não vamos entrar em alguns detalhes do React, mas é possível observar no repositório aspectos como a declaração de rotas (com react-router-dom) e a estilização mais detalhada (com theme-ui).