2021/10/29 上午1:37 A3: Spotify Browser in Angular — INF 133 Fall 2021
https://inf133.markbaldw.in/assignments/a3.html 1/7
A3: Spotify Browser in Angular
This assignment is now a partnered project. If you would like to work as a pair with someone else in the
class, feel free. We will cover how to handle partnered assignments in discussion class.
Overview
In this assignment, you’ll demonstrate your ability to (1) gather data from an API, and (2) develop a frontend
interface which displays the data. You’ll use Angular to create a webpage which communicates with a backend
server written in Node.js/Express to browse the music on Spotify, a popular music streaming app. The provided
backend server will handle authentication via OAuth and communicate with the Spotify API, but you will have to
make HTTP requests to the backend server to trigger API calls. Your page will support searching for artists, albums,
and tracks and navigating between the three resources.
Assignment Details
Starter code
A starter repository is on GitHub Classroom.
Repository Structure
The repository contains somewhere around 80 �les. You will not need to edit most of them in this assignment. The
repository contains two folders: webserver and client. webserver includes the Express/Node.js backend for
communicating with the Spotify API. client includes the Angular frontend for browsing music.
In the backend (webserver folder), you will not need to edit any of the JavaScript �les; they are provided for you.
However, you do need to create two �les:
1. client_secret.json
2. tokens.json
Both �les contain secret information, so they should not be committed to the repository and are therefore listed in
the .gitignore �le. (Which is also why we cannot provide them to you)
In the frontend (client folder), the �les which need editing are all under the app folder. Within that folder, the
�les/subfolders you should edit are:
The six components in the components folder: about, carousel, carousel-card, search, track-list, and
thermometer. Each component folder contains four �les (*.component.css, *.component.html, *.component.ts ,
*.component.spec.ts). Of these �les, all edits will be made in the .component.html and .component.ts �les.
Three of the four components in the pages folder: album-page, artist-page, and track-page. home-page will
not be edited. Again, all edits will be made in the .component.html and .component.ts �les.
The one service in the services folder: spotify-service. All edits will be made in the .service.ts �le, none in
the .service.spec.ts �le.
One of the six classes in the data folder: track-features.ts. The four other classes do not need to be edited.
You will also edit the readme.txt �le in the root folder.
This assignment can be completed without writing any additional �les or functions. But you may �nd it helpful to
add a �le or function, such as to complete one of the bonus features.
Setting up your Workspace
If you’re feeling unfamiliar with the command line, you might �nd the guides in the resources page helpful.
Attention
Contents
Overview
Assignment Details
Starter code
https://classroom.github.com/a/8lyVCDCE
https://inf133-fa20.markbaldw.in/resources.html
2021/10/29 上午1:37 A3: Spotify Browser in Angular — INF 133 Fall 2021
https://inf133.markbaldw.in/assignments/a3.html 2/7
Some of the packages/libraries depend on newer versions of Node JS. Check what version of Node JS you have
installed with:
If you installed Node JS before this class, make sure you’ve updated to at least 10, such as with nvm or downloading
the latest version from the node website. If you installed Node during A2, you should not need to update, but it’s
probably worth checking the version number anyways.
There are no global dependencies required to run the Express webserver.
For the client, you will need to install Angular through npm. To do this, you will install the Angular Command Line
Interface (CLI) globally with:
The Angular project is already set up in the client folder, but the CLI is necessary to run the project.
You will also need to install the dependencies for both the webserver and the client. These dependencies are
de�ned in each project’s respective package.json �les. cd into each respective project’s folder and install the
dependencies with:
You may encounter a few installation warnings or high severity security vulnerabilities. We will ignore them for this
assignment, but these should typically be addressed when using libraries.
When installing, if you run into issues which look like “permission denied, try changing the permissions of the
node_modules directory. If you are still having trouble, ask on Zulip or talk to the course staff. It’s important to try
to get the setup working sooner rather than later, even if you do not plan on working on the assignment until close
to the deadline.
You may get a warning that the version of Angular that you have installed is newer than the version of the project.
You can safely ignore that in this assignment.
It’s likely that your project code will have out of date dependencies, so before you move to the next section, cd into
both the client and webserver directories and run the following command:
Running the Webserver
A Spotify Developer account is required to set up the Express webserver. Create a Spotify account or log in at
https://developer.spotify.com/dashboard/ and follow the instructions to create a client id. Name the app whatever
you’d like. For the App description, enter:
This App is used to create a music browser as part of a course assignment for IN4MATX 133, User
Interface Software, at the University of California, Irvine.
Indicate that you are building a Website and are not developing a commercial application.
Once you have created your application, be sure to set the redirect URI to:
This will tell Spotify to redirect back to our Express webserver once authentication and authorization is complete.
You should also create a �le in the webserver folder (not the routes folder), client_secret.json, with your consumer
key and secret. It should be of the form:
node –version
npm install -g @angular/cli
npm install
npm update
http://localhost:8888/callback
{
“client_id”: “Your Client Key”,
“client_secret”: “Your Client Secret”
}
https://github.com/nvm-sh/nvm/blob/master/README.md
https://nodejs.org/en/
https://cli.angular.io/
https://github.com/angular/angular-cli/issues/6848#issuecomment-386120663
https://developer.spotify.com/dashboard/
2021/10/29 上午1:37 A3: Spotify Browser in Angular — INF 133 Fall 2021
https://inf133.markbaldw.in/assignments/a3.html 3/7
At this time, also create a placeholder �le in the same folder for tokens.json. This �le will be overwritten once an
access and refresh token have been retrieved. Your tokens.json �le should be exactly:
To run the Express webserver, cd into the webserver folder and run: npm start
This will start the webserver at:
Be sure the dependencies have been installed �rst via:
If you make a change to code in the webserver (which you should not need to do to complete the required portions
of this assignment), you will have to end the running program and re-run it. End it by typing Ctrl-C into the
command line and then re-running it with:
Running the client
To run the Angular client, cd into the client folder and run:
This will start the client at localhost:4200. Adding the –open �ag will open it up in the browser. Be sure the
dependencies have been installed �rst via npm install.
Any code changes will be automatically reloaded on the client.
Requirements
There are �ve parts to this assignment. The later parts use many of the same components, so once those are
implemented the later parts become a matter of gluing them together. You can also optionally add one of a number
of bonus features.
Part 1: Communication with the Webserver (2 point)
The �rst time you push the “login” button in the top-right corner of the Spotify browser, you will be redirected to
Spotify to authenticate and authorize access to your app. The OAuth �ow between the Spotify server and the
webserver has been implemented for you. That means that once you authenticate and authorize access, you can
query the webserver to make API requests on your behalf. The webserver will also handle refreshing the access
token when it expires. Hooray!
{
“access_token”: null,
“refresh_token”: null
}
localhost:8888
npm install
npm start
ng serve –open
NOTE: ‘–open’ is optional
2021/10/29 上午1:37 A3: Spotify Browser in Angular — INF 133 Fall 2021
https://inf133.markbaldw.in/assignments/a3.html 4/7
However, in order to make API requests, you will need to add some functionality to the Spotify Service
(services/spotify.service.ts). First, update the sendRequestToExpress function in the Spotify service to ask the
Express webserver to make an API request to Spotify at the endpoint passed in. The endpoints should then return
the appropriate data type for each API call. You will be able to test your function by building out the pages in the
assignment.
Watch a quick overview on sendRequestToExpress
Part 2: Spotify Browser Home Page (5 points)
In this part, you will create a homepage to view some information about the logged in user’s account. You will also
create search requests to the Spotify API. As you get started with Angular, it may be helpful to review the code from
the demos or the lecture recordings.
Populating Information About the User (2 point)
Once API requests can be made via the Express server (Part 1), edit the about component to call the endpoint
created for the “about me” page when the load info button is clicked. To do so, you will need to inject the Spotify
service you just edited. The Spotify API endpoint reference describes what this endpoint and other endpoints
return. Update the variables in the component’s .ts �le and bind them to the appropriate places in the .html �le.
This will populate the left side of the home page with the logged in user’s name, pro�le picture, and a link to open
their pro�le on Spotify.com.
Populating the Search Component (3 points)
The right side of the page contains the search component. The search component contains an input and a select
(dropdown) menu to declare what to search for. Bind the values in the component’s model to the input and select
controls. Bind the search button to a function which uses the Spotify service to have Express make the API request.
You can also search online to learn how to trigger a search when a user presses “enter” in the input �eld or changes
the dropdown menu. These two features are optional–you are only required to bind the search button. For
simplicity, your code can assume that any search typed in is valid (e.g., returns at least one artist/track/album).
Map the response from Express into an array of the appropriate resource type–ArtistData, AlbumData, or
TrackData. To do so, you will have to update the Spotify Service to create objects based on the category being
searched for. Similar to the example given for parsing Pro�leData, the constructor of each resource can
automatically parse the dictionary values Spotify returns into an Object. For example, AlbumData loads the genres
Helper Clip
https://uci.yuja.com/V/Video?v=2217829&node=8137718&a=885575268&autoplay=1
https://developer.spotify.com/documentation/web-api/reference/
2021/10/29 上午1:37 A3: Spotify Browser in Angular — INF 133 Fall 2021
https://inf133.markbaldw.in/assignments/a3.html 5/7
of the Album and creates an array with each of the artists on the album. Note that all three of these resource
classes extend the ResourceData class, which parses some dictionary values common across all the resource types.
You should not need to edit any of these four �les; contact the course staff if a response parses differently than you
would expect or causes an error.
Once the array of resources has been created, display the search results in either a carousel component (for artists
or albums) or a track-list component (for tracks).
The carousel is implemented via a Bootstrap carousel. Edit the carousel component to create carousel-card
components for each resource passed in. Additionally, edit the carousel-card component to link to the local URL for
browsing the speci�c artist or album. Check the app router (app-routing.module.ts) to identify what the URL should
be.
The track list is implemented in the track-list component. Edit the component to display each track in the
response as a row in the component’s table, displaying the track’s index, name, duration, artist, and album. The
component should support hiding the artist and/or album columns for the track when the hideArtist or hideAlbum
variables are true.
Part 3: Spotify Browser Artist Page (3 points)
In this part, you will create a page to view some information about a searched-for or linked-to artist. You will update
the artist-page component to do this. For simplicity, you can assume the id passed via the URL is always valid (e.g.,
always refers to an artist which exists in the Spotify API). The artist-page includes code for retrieving the artist’s id
from the URL.
Update the Artist Page to retrieve the basic information about the artist, their top tracks, their albums, and similar
artists. The Express webserver has endpoints for each of these four requests. Update the component to display the
information as described in the component’s template. You will re-use the track-list and carousel components on
this page.
You will again have to update endpoints in the Spotify Service to get information about an artist, their top tracks,
albums, etc.
Part 4: Spotify Browser Album Page (2.5 points)
In this part, you will create a page to view some information about a searched-for or lined-to album. You will update
the album-page component to do this. For simplicity, you can assume the id passed via the URL is always valid (e.g.,
always refers to an album which exists in the Spotify API). The album-page includes code for retrieving the album’s
https://getbootstrap.com/docs/4.0/components/carousel/
2021/10/29 上午1:37 A3: Spotify Browser in Angular — INF 133 Fall 2021
https://inf133.markbaldw.in/assignments/a3.html 6/7
id from the URL.
Update the Album Page to retrieve the basic information about the album and it’s tracks. The Express webserver
has endpoints for each of these two requests, which you will again need to call in the Spotify service and parse data
from. Update the component to display the information as described in the component’s template. You will re-use
the track-list component on this page.
Part 5: Spotify Browser Track page (2.5 points)
In this part, you will create a page to view some information about a searched-for or lined-to track. You will update
the track-page component to do this. For simplicity, you can assume the id passed via the URL is always valid (e.g.,
always refers to a track which exists in the Spotify API). The track-page includes code for retrieving the track’s id
from the URL.
Update the Track Page to retrieve the basic information about the track and it’s audio features. The Express
webserver has endpoints for each of these two requests. Update the component to display the information as
described in the component’s template.
For this page, you will have to edit the thermometer component. The thermometer uses a Bootstrap progress bar to
display the track’s audio features. Note the component does not have any Input �elds, so you will have to identify
what �elds you need and de�ne them.
You can edit the track-feature class to use the chroma library to display the progress bar’s color as a mix between
two values depending on it’s percent. The provided mixes between red and green. You can choose whatever colors
you like, so long as differences are visually distinct. HSL blending is recommended, as it more closely models how
human vision blends colors.
Optional/Bonus Features
The �ve parts of the assignment create a tool for browsing the Spotify API. There are many ways of extending this
browser, and we can offer one point of extra credit for implementing an extension. We’ve enumerated some
potential extensions:
Moving the Express webserver to a publicly visible URL rather than running on localhost. One way of doing
this would be to create a Heroku instance. Students can get a free Hobby-tier server on Heroku for two years.
This guide may be helpful for deploying your heroku app.
https://getbootstrap.com/docs/4.1/components/progress/
https://gka.github.io/chroma.js/
https://www.heroku.com/github-students
https://devcenter.heroku.com/articles/deploying-nodejs
2021/10/29 上午1:37 A3: Spotify Browser in Angular — INF 133 Fall 2021
https://inf133.markbaldw.in/assignments/a3.html 7/7
By Mark S. Baldwin
© Copyright 2021.
The webserver for this assignment can only handle a single user because tokens are being saved in a JSON �le
with no user information. Use session middleware and an improved scheme for storing tokens to handle
multiple users.
Adding a component which plays music for an Artist/Album/Track using Spotify’s Web Playback SDK. You can
add the player to any page within your Spotify browser.
We are open to other suggestions for bonus features.
Submitting
To submit, zip your repository and upload it to Canvas. Any late uploads are subject to the course’s late policy.
Please update your readme.txt with how long the assignment took, who or what online resources you consulted
with, any bonus features you added, and anything else we should know.
Grading
This assignment will be graded on a scale of 15 points, broken down as follows:
Communication with the Webserver (2 points)
Spotify Browser Home Page (5 points)
Spotify Browser Artist Page (3 points)
Spotify Browser Album Page (2.5 points)
Spotify Browser Track Page (2.5 points)
A bonus feature completed will earn you 1 point of extra credit (e.g., no points given for beyond one bonus feature).
The maximum grade for this assignment is therefore 16/15.
In prior courses, you’ve been asked to follow good principles for indentation, naming variables, commenting, etc.
We expect you to do the same in this course, but aim to avoid being draconian in our enforcement of these
principles. Egregiously poor formatting, completely uncommented code, etc. may incur a small penalty (e.g., -1
point), but we expect this to be rarely applied.
https://github.com/expressjs/session
https://developer.spotify.com/documentation/web-playback-sdk/