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
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
dened 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”
}
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
