DE | Express Spotify Searcher
Introduction
Spotify is a super cool music streaming service that provides you access to tons of music without ever having to buy an album.
Today, we're going to build an Express app to search spotify for artists, albums, and tracks. In addition, we'll be able to play a preview of some of these songs.
To see the final product check out the deployed version: https://spotify-lab.herokuapp.com.
It may seem like a lot, but let's break it down into steps!
spotify-web-api-node
Spotify is great for streaming music from the app, but they also have a Web Service for us developers to play with.
We don't need to delve too deeply into what an API is until later, thanks to the npm package spotify-web-api-node
. This package gives us simple methods to make requests to Spotify, and give us back artists, albums, tracks, and more.
The Spotify API ask for a clientId
and clientSecret
in order to have permissons to make requests. For getting both of them, follow these steps:
- Navigate to Spotify Developers
- Click on the "LOGIN" button. If you do not have an account they will ask you to create one, itΒ΄s free π
- After the login, click on the Create an App button.
- Complete the fields and submit the form
- We are ready to go! We have all the info we need πͺ LetΒ΄s start!
Iteration 1 | Spotify API Setup
As always fork
this repo, and clone it.
Then, inside the starter_code
folder, create a new folder, and set up your package.json. Use the following commands:
$ mkdir express-spotify-app && cd express-spotify-app
$ npm init
$ npm install --save spotify-web-api-node prettyjson
$ touch app.js
Inside the app.js
file, copy/paste the following code:
var SpotifyWebApi = require('spotify-web-api-node');
// Remember to paste here your credentials
var clientId = '1c30624cba6742dcb792991caecae571',
clientSecret = '746977b1e77240faa9d0d2411c3e0efe';
var spotifyApi = new SpotifyWebApi({
clientId : clientId,
clientSecret : clientSecret
});
// Retrieve an access token.
spotifyApi.clientCredentialsGrant()
.then(function(data) {
spotifyApi.setAccessToken(data.body['access_token']);
}, function(err) {
console.log('Something went wrong when retrieving an access token', err);
});
π₯ Styling should be the last thing you focus on. Functionality first this module!
Iteration 2 | Express Setup
We've already set up our package.json, and app.js
. You should set up an Express app with all of the packages we've used thusfar.
Your directory should look like this once you're done:
βββ app.js
βββ package.json
βββ public
βΒ Β βββ public/images
βΒ Β βββ public/javascripts
βΒ Β βββ public/stylesheetsa
βΒ Β βββ public/stylesheets/style.css
βββ views
βββ views/layouts
We will need some npm packages for this project, so letΒ΄s install them:
$ npm install --save body-parser hbs express morgan
After the installation, you should have a package.json like this:
"dependencies": {
"body-parser": "~1.15.2",
"express": "~4.14.0",
"hbs": "^4.0.1",
"morgan": "~1.7.0",
"spotify-web-api-node": "^2.3.6"
}
:::info
Don't worry if is not exactly the same! Specially on versions! And don't forget to require all this packages on your app.js
file:
const express = require('express');
const app = express();
const hbs = require('hbs');
:::
Iteration 3 | Search for an Artist
Create a Homepage
Step 1 |Create a simple home page. You'll need a basic index route, that renders a home page.
On this page, you should have a search form. This form should direct its query to /artists
, and have one input with a name of artist
.
Display results for artist search
Step 2 |Create the route /artists
. This route will receive the search term from the query string, and make a search request using the Spotify Package.
Display the name, an image, and a button to show the albums for a particular artist on a new view.
The function we will use from the npm package is: spotifyApi.searchArtists()
. So you should have something like this:
spotifyApi.searchArtists(/*'HERE GOES THE QUERY ARTIST'*/)
.then(data => {
// ----> 'HERE WHAT WE WANT TO DO AFTER RECEIVING THE DATA FROM THE API'
})
.catch(err => {
// ----> 'HERE WE CAPTURE THE ERROR'
})
View Albums
Iteration 4 |When someone clicks on the "View Albums" button, they should be taken to a page to show all of the albums for that particular artist.
β‘ Check out the getArtistAlbums
method in the spotify-web-api-node
package.
Hint
Your route should look like the following:
app.get('/albums/:artistId', (req, res) => {
// code
});
Meaning that your href
for the view more button is going to have to look like this:
<a href="/albums/1UarLtyjvxGiRTsfFXxtnA">View More</a>
1UarLtyjvxGiRTsfFXxtnA
is a unique ID for a particular artist. Replace that with the value you send to the view to make it dynamic!
View Tracks
Iteration 5 |Make the "View Tracks" button work on the albums page. This page should take you to a page with a list of all of the tracks on a particular album.
Note: β‘ Check out the getAlbumTracks
method in the spotify-web-api-node
package.
A track object comes with a preview_url
, which is the source for a 30 second preview of a particular song. You can plug this into an HTML audio
tag, and it will play the preview.
Requirements
- 4 Pages with artist / album / track information populated from Spotify
- Home
- Artists
- Albums
- Tracks
- Basic dev level logging with Morgan
- Some styling, it doesn't have to look like the example.
- A layout
Happy Coding!