API desenvolvida para consumir dados da API do Spotify e integrá-los em uma aplicação com interface gráfica.
Autores: Giovanna Gutierrez, Gustavo Gutierrez, João Henrique de Oliveira, João Victor Ferrari de Melo
- URL da Aplicação
- Desafios Encontrados
- Tecnologias Utilizadas
- Estrutura de arquivos e pastas
- Pré-requisitos
- Instalação
- Acessar o APP
- Endpoints (API)
- Telas (APP)
- Solução de problemas
- Implementação da autenticação do Spotify:
- Gestão de tokens (refresh token e access token)
- Arquitetura de Rede da AWS:
- Configuração e otimização da infraestrutura
- Complexidade da API do Spotify:
- Integração de múltiplos endpoints e gestão de permissões
API:
API/
├── controllers/
│ ├── albumController.js
│ ├── artistController.js
│ ├── authController.js
│ ├── meController.js
│ ├── playerController.js
│ └── searchController.js
├── middlewares/
│ └── verifyToken.js
├── routes/
│ ├── albumRoutes.js
│ ├── artistRoutes.js
│ ├── authRoutes.js
│ ├── meRoutes.js
│ ├── playerRoutes.js
│ └── searchRoutes.js
├── services/
│ └── spotifyServices.js
├── utils/
│ └── sendError.js
├── .env
├── dockerfile
├── index.js
├── package-lock.json
└── package.json
APP:
APP/
├── controllers/
│ ├── albumController.js
│ ├── artistController.js
│ ├── favoritesController.js
│ ├── homeController.js
│ ├── playTrackController.js
│ ├── redirectController.js
│ └── spotifyController.js
├── middlewares/
│ └── verifyAccessToken.js
├── public_src/
│ ├── images/
│ │ ├── arrow.svg
│ │ ├── compassucologo.png
│ │ ├── play-button.svg
│ │ ├── SpotifyAPILogo.svg
│ │ ├── SpotifyLogo.svg
│ │ ├── sprintbanner.png
│ │ └── verifiedIcon.svg
│ ├── scripts/
│ │ └── utils/
│ │ ├── homeScript.js
│ │ └── searchScript.js
│ └── styles/
│ └── style.css
├── routes/
│ ├── albumRoutes.js
│ ├── artistRoutes.js
│ ├── favoritesRoutes.js
│ ├── homeRoutes.js
│ ├── playTrackRoutes.js
│ ├── redirectRoutes.js
│ └── spotifyRoutes.js
├── views/
│ ├── album.ejs
│ ├── artistProfile.ejs
│ ├── favorites.ejs
│ ├── home.ejs
│ ├── index.ejs
│ ├── redirect.ejs
│ ├── search.ejs
│ ├── searchAlbum.ejs
│ └── searchArtist.ejs
├── .env
├── dockerfile
├── index.js
├── package-lock.json
├── package.json
└── tailwind.config.js
- Conta no Spotify
- Git
- Docker
- Docker Compose
-
Clone o repositório com git:
git clone https://github.com/Compass-pb-aws-2024-JULHO-A/sprints-2-3-pb-aws-julho-a.git
-
Acesse a branch do grupo:
git checkout grupo-7
-
Crie as variáveis de ambiente no diretório raiz de cada servidor (APP e API):
API:
PORT=3000 SPOTIFY_REDIRECT_URI=http://[IPv4 da máquina]:3000/auth/callback SPOTIFY_CLIENT_ID=[Client ID de sua aplicação] SPOTIFY_CLIENT_SECRET=[Client secret de sua aplicação] SESSION_SECRET=api-spotify FRONTEND_URL=http://[IPv4 da máquina]:80
APP:
PORT=80 SPOTIFY_REDIRECT_URI=http://[IPv4 da máquina]:80/auth SPOTIFY_CLIENT_ID=[Client ID de sua aplicação] SPOTIFY_CLIENT_SECRET=[Client secret de sua aplicação] SESSION_SECRET=api-spotify API_URL=http://[IPv4 da máquina]:3000
-
Execute os comandos:
Lembre-se de executar os comandos na raíz do repositório
docker-compose build
Após o build, execute:
docker-compose up
Acesse o APP no navegador utilizando o IPv4 da sua máquina ou localhost:
http://localhost:80 ou http://[IPv4]:80
A API estará rodando na porta definida no arquivo .env ou na porta padrão 3000.
Autenticação do usuário com OAuth 2.0.
-
GET
/auth: Realiza o processo de autenticação. -
GET
/auth/callback: Callback para troca de código poraccess_tokenerefresh_token. -
GET
/auth/refresh: Atualiza oaccess_token.Exemplo de resposta:
{ "access_token" : "string", "refresh_token" : "string" }
-
GET
/me: Retorna os dados do usuário.Exemplo de resposta:
{ "id": "string", "name": "string", "email": "string", "country": "BR", "link": "urlParaPerfilNoSite", "product": "tipoDeConta", "followers": number, "images": [ { "url": "urlDaImagem", "height": 64, "width": 64 }, { "url": "urlDaImagem", "height": 300, "width": 300 } ] } -
GET
/me/top-artists: Lista dos top artistas do usuário.Exemplo de resposta:
[ { "id": "IdDoArtista", "name": "NomeDoArtista", "genres": [ "genero1", "genero2" ], "followers": number, "popularity": number0-100, "images": [ { "height": 640, "url": "urlDaImagem", "width": 640 }, { "height": 320, "url": "urlDaImagem", "width": 320 }, { "height": 160, "url": "urlDaImagem", "width": 160 } ], "url": "urlDoPerfilDoArtista" }, { ...Outros Artistas } ] -
GET
/me/top-tracks: Lista das top faixas do usuário.Exemplo de resposta:
[ { "id": "IdDaMusica", "name": "nomeDaMusica", "artists": [ { "name": "NomeArtista", "url": "urlPerfilArtista" }, { ...Outros Artistas } ], "album": { "name": "NomeDoAlbum", "images": [ { "height": 640, "url": "urlImagemAlbum", "width": 640 }, { "height": 300, "url": "urlImagemAlbum", "width": 300 }, { "height": 64, "url": "urlImagemAlbum", "width": 64 } ], "url": "urlAlbum" }, "duration": numberEmMilisegundos, "popularity": number0-100, "url": "urlMusica" }, { ...Outras Musicas } ] -
GET
/me/saved-tracks: Músicas salvas na biblioteca do usuário.Exemplo de resposta:
[ { "name": "nomeMusica", "artists": [ { "name": "nomeArtista", "url": "urlPerfilArtista" }, { ...Outros Artistas } ], "album": { "name": "NomeAlbum", "images": [ { "height": 640, "url": "urlImagemAlbum", "width": 640 }, { "height": 300, "url": "urlImagemAlbum", "width": 300 }, { "height": 64, "url": "urlImagemAlbum", "width": 64 } ], "url": "urlAlbum" }, "duration": numberEmMilisegundos, "popularity": number0-100, "url": "urlMusica" }, { ...Outras Musicas } ] -
GET
/me/recently-played: Últimas músicas reproduzidas.Exemplo de resposta:
[ { "id": "idMusica", "name": "nomeMusica", "artists": [ { "name": "nomeArtista", "url": "urlPerfilArtista" }, { ...Outros Artistas } ], "album": { "name": "nomeAlbum", "images": [ { "height": 640, "url": "urlImagemAlbum", "width": 640 }, { ...outras imagens } ], "url": "urlAlbum" }, "duration_ms": numberEmMilisegundos, "popularity": number0-100, "url": "urlMusica", "played_at": "dataUltimaVezTocada" }, { ...outras musicas } ] -
GET
/me/recommendations: Recomendações personalizadas.Exemplo de resposta:
[ { "id": "IdDaPlaylist", "name": "nomeDaPlaylist", "description": "descricaoDaPlaylist", "images": [ { "height": null, "url": "urlImagemPlaylist", "width": null } ], "url": "urlPlaylist" }, { ...Outras Playlists } ] -
GET
/me/playlists: Playlists do usuário.Exemplo de resposta:
[ { "id": "idDaPlaylist", "name": "nomeDaPlaylist", "description": "DescricaoDaPlaylist", "images": [ { "height": 640, "url": "urlImagemPlaylist", "width": 640 }, { "height": 300, "url": "urlImagemPlaylist", "width": 300 }, { "height": 60, "url": "urlImagemPlaylist", "width": 60 } ], "url": "urlPlaylist" }, { ...Outras Playlists } ]
-
GET
/player/current-track: Dados da música atual.Exemplo de resposta:
{ "name": "nomeMusicaAtual", "artists": [ { "name": "nomeArtista", "url": "urlPerfilArtista" }, { ...Outros Artistas } ], "album": { "name": "nomeAlbum", "images": [ { "height": 640, "url": "urlImagemAlbum", "width": 640 }, { "height": 300, "url": "urlImagemAlbum", "width": 300 }, { "height": 64, "url": "urlImagemAlbum", "width": 64 } ], "url": "urlAlbum" }, "duration_ms": numberEmMilisegundos, "popularity": number0-100, "url": "urlMusica", "is_playing": boolean, "progress_ms": numberEmMilisegundos } -
GET
/player/play/:search: Reproduz a música fornecida.Exemplo de resposta:
{ status: 204 }
-
GET
/search/:type/:name: Busca no catálogo do Spotify.-
type: track, artist, album -
name: Sequência de palavras-chaveExemplo de resposta:
:type= "artist"{ "type": "artist", "results": [ { "id": "idDoArtista", "name": "nomeDoArtista", "followers": number, "popularity": number0-100, "images": [ "urlImagem1", "urlImagem2", "urlImagem3" ], "genres": [ "genero1", "genero2", ... ], "url": "urlPerfilArtista" }, { ...Outros Artistas Relacionados } ] }:type= "track"{ "type": "track", "results": [ { "id": "idMusica", "name": "nomeMusica", "artists": [ { "name": "nomeArtista", "url": "urlPerfilArtista" } ], "album": { "name": "A Morte do Autotune", "images": [ { "height": 640, "url": "urlImagemAlbum", "width": 640 }, { "height": 300, "url": "urlImagemAlbum", "width": 300 }, { "height": 64, "url": "urlImagemAlbum", "width": 64 } ], "url": "urlAlbum" }, "duration": numberEmMilisegundos, "popularity": number0-100, "url": "urlMusica" }, { ...Outras Musicas Relacionadas } ] }:type= "album"{ "type": "album", "results": [ { "id": "idAlbum", "name": "nomeAlbum", "images": [ { "height": 640, "url": "urlImagemAlbum", "width": 640 }, { "height": 300, "url": "urlImagemAlbum", "width": 300 }, { "height": 64, "url": "urlImagemAlbum", "width": 64 } ], "artists": [ { "name": "nomeArtista", "url": "urlPerfilArtista" } { ...Outros Artistas } ], "url": "urlAlbum" }, { ...Outros Albuns Relacionados } ] } -
-
GET
/artists/:id: Dados sobre o artista.Exemplo de resposta:
{ "name": "nomeDoArtista", "genres": [ "genero1", "genero2", ... ], "followers": number, "popularity": number0-100, "images": [ { "url": "urlImagem", "height": 640, "width": 640 }, { ...outras imagens }, ], "url": "perfilArtista", "id": "idArtista" } -
GET
/artists/:id/albums: Lista de álbuns do artista.Exemplo de resposta:
[ { "id": "idAlbum", "name": "nomeAlbum", "release_date": "dataLancamento", "total_tracks": number, "images": [ { "url": "urlImagem", "height": 640, "width": 640 }, { ...outras imagens } ], "url": "urlAlbum" }, ] -
GET
/artists/:id/top-tracks: Top faixas do artista.Exemplo de resposta:
[ { "id": "idMusica", "name": "nomeMusica", "artists": [ { "name": "nomeArtista", "url": "urlPerfilArtista" } { ...Outros Artistas } ], "album": { "name": "nomeAlbum", "images": [ { "url": "urlImagem", "height": 640, "width": 640 }, { ...outras imagens } ], "url": "urlAlbum" }, "duration": numberEmMilisegundos, "popularity": number0-100, "url": "urlMusica" }, { ...Outras Musicas } ]
-
GET
/albums/:id: Dados sobre o álbum.Exemplo de resposta:
{ "name": "nomeAlbum", "genre": [ "genero1" ], "artists": [ { "id": "idArtista", "name": "nomeArtista", "url": "urlPerfilArtista" }, { ...Outros Artistas } ], "release_date": "dataLancamento", "total_tracks": number, "tracks": [ { "id": "idMusica", "name": "nomeMusica", "artists": [ { "id": "idArtista", "name": "nomeArtista", "url": "urlPerfilArtista" } { ...Outros Artistas } ], "url": "urlMusica" }, { ...Outras Musicas } ], "images": [ { "url": "urlImagem", "height": 640, "width": 640 }, { ...outras imagens } ], "url": "urlAlbum", }
A tela de login permite ao usuário acessar o aplicativo utilizando sua conta do Spotify, por meio da autenticação OAuth 2.0.
A tela inicial exibe informações relevantes e personalizadas sobre o perfil do usuário, com base nos dados da sua conta Spotify.
A tela de favoritos reúne as faixas, álbuns e artistas preferidos do usuário, facilitando o acesso rápido aos conteúdos.
Na tela de busca, o usuário pode encontrar resultados de pesquisa com base em palavras-chave e escolhendo o tipo de pesquisa como: track (Faixa), album (Album) ou artist (Artista), explorando novos conteúdos no Spotify.
A tela do artista oferece detalhes sobre um artista específico, incluindo principais faixas e álbuns.
Na tela de álbum, o usuário pode visualizar informações detalhadas sobre um álbum, como a lista de faixas e os créditos.
O player de música exibe a faixa que o usuário está ouvindo em um dispositivo ativo no Spotify.
O player de músicas só está disponível na página da Home
⚔️ Erro: Nenhum dispositivo disponível foi encontrado para reprodução.
🛡 Como resolver: Inicie a reprodução de uma faixa no Spotify em algum dispositivo ou diretamente no site do Spotify.