Morning coding challenge: Spotify
Task 1: Generate a webserver using the express generator - (express generator review) * Prerequiste: make sure you have previously installed the express-generator (npm i -g express-generator) * Hints:
1.
open up your command line 2. cd to a fresh folder that isn't located in any existing webserver (and ideally not in any git repo) 3. type express -e spotify_practice (to generate a new express app called spotify_practice)
*
(this will make a new folder with a new express server in it) 4. then cd spotify_practice (to cd into the new folder) 5. then npm install
*
(this will install the packages listed in the package.json that comes with express generated app. will create a node_modules folder) 6. then code . to open this up in vscode 7. then type nodemon either in the terminal or in a new vscode terminal (to run the webserver) 8. then browse your browser to localhost:3000/ (to verify that your webserver is running.)
*
you should see "welcome to express"
Task 2A: Adding a route called localhost:3000/albums - (routing review) * Description:
*
Add a "localhost:3000/albums" route that sends a simple "welcome to albums" message to the user * Hints:
1.
Create an "albums router":
1.
Copy the contents of routes/users.js 2. Paste the contents into a new file in routes/ folder called "albums.js" 3. Change the string from res.send("respond with a resource") to res.send("welcome to albums") 2. Import this "albums router" into app.js:
*
Type in app.js, around line 8 let albumsRouter = require('./routes/albums'); 3. Mount the route in app.js
*
Type in app.js, around line 23 app.use('/albums', albumsRouter) 4. Test by pointing your browser to localhost:3000/albums and see if you see your string * Solution: solution code can be found here - https://github.com/alexanderghose/spotify_task_2
Task 2B: User can view a nice HTML page when they go to localhost:3000/albums - (ejs review) * Description:
*
Update "localhost:3000/albums" route to send a nice HTML file to your user with the text "welcome to albums" * Hints:
1.
In views/ folder, create a file called albums.ejs and put in some basic HTML boilerplate 2. In the HTML body, put in the message welcome to albums within some
tags 3. In your albums router file, replace the res.send() message in your album router's default / route with res.render("albums.ejs") 4. Test: point your browser to localhost:3000/albums and you should see your HTML page being rendered * Solution: solution code can be found here - https://github.com/alexanderghose/spotify_task_2b
Task 3: User can view all albums from DB - (advanced ejs review) * Description:
1.
Create & render a database of albums that your user can view in nicely formatted HTML when they go to "localhost:3000/albums" 2. Your database should in the form of an array of objects. For now, you may declare your fake database in the albums router file as we will move it to models/ in a later step. Your database may look something like this:
*
let albumsArray = [ * {id:"a0", name: "Thriller", artist: "MJ"}, * {id:"a1", name: "Baby One More Time", artist:"Britney"}, * ] * Example:
*
*
Hints:
1.
In your routes/albums.js, declare the array given above 2. In your albums router's default / route, replace the res.render("albums.ejs") with something like res.render("albums.ejs", { albumsArray })
1.
res.render takes an optional second argument which is an object { } 2. anything in this object will be made available to the .ejs file albums.ejs 3. so in summary, basically, we are sending the albumsArray to the ejs file. The ejs file has the option of doing something with this albumsArray before sending it to the user. 3. In your views/albums.ejs file, add in some code that will
*
loop through the albumsArray that it is receiving from your router * display the names and artists * You can do this by typing this in the of your albums.ejs file:
*
<% albumsArray.forEach(function(album) { %>
*
<li>
*
<%= album.id %> * - * <%= album.name %> * - * <%= album.artist %> * * <% }) %> * Note that in the above code, each line of the javascript must be sandwiched by <% %>
*
And in particular, any lines that contain javascript expressions can be written to the HTML by sandwiching them in <%= %> alligator brackets * Solution: can be found here - https://github.com/alexanderghose/spotify_task_3
Task 4A: User can view a single album (details) in plain text - (route parameters review) * Description
*
Your user should be able to lookup albums by providing a route parameter. For example:
*
If your user goes to localhost:3000/albums/a0, they should be able to view the name and artist of the album that corresponds to the id a0 * Example:
*
*
Hints:
1.
First of all, still in routes/albums.js, create a route using route parameters that allows your user to type in a non-fixed route. Send them back a test message sending back whatever they just typed. This might look something like this:
*
router.get('/:id', function(req,res) { * res.send("you have typed " + req.params.id) * })
*
Note that a route of the form "/:id" lets us accept any input from the user and stores it in a variable called req.params.id 2. Secondly, still in routes/albums.js, write a function getName(incoming_id) that will allow us to plug in an incoming id from the user such as a0 and the function will return an album name such as "Thriller". Such a function might look something like this:
*
function getName(incoming_id) { * for (let current_album of albumsArray) { * if (current_album.id == incoming_id) { * return current_album.name * } * } * } 3. Thirdly, plug in whatever your user has typed --- which is stored in req.params.id --- into your function.
*
If the user typed a valid id, the function should give you back a legitimate album name. * This code to plugin whatever the user typed into your getName function might look something like this:
*
let myname = getName(req.params.id) 4. Finally, Use res.send to send them back the album name:
*
res.send("you have typed " + req.params.id + " which is album name " + myname) * Solution can be found here -
*
https://github.com/alexanderghose/spotify_task_4a
Task 4B: User can view a single album (details) in nicely-formatted HTML - (advanced ejs review) * Description
*
If your user goes to localhost:3000/albums/a0, they should be able to see a nicely-formatted HTML page that displays the album details
Task 5: Move database to the models/ folder - (models review) * Description
*
Once you've got things working out of the albums router, organize your code to be more professional. Move your database and database-related functions to a file called albumModel.js in the models/ folder, and import the appropriate things from the new models/AlbumModel.js into your albums router so things will work as before.
Task 6: Linking from Index Page to Detail Page - (more advanced ejs review) * Description
*
When your user goes to /albums, they see a list of albums * When your user goes to /albums/0a, they see the details of album 0a * Wouldn't it be nice if your user could just click on a link from /albums to go to /albums/0a? * Modify your albums.ejs code so that each album in /albums has a <a href=> hyperlink that directs them to the appropriate album details page
Task 7 (optional) (bonus) (hard): Tracks * Description
*
Update each album in your albums database to contain another property called tracks: []. Tracks will be an array of objects a well, and each track should be of the form {"id: "t0", name: "billie jean" } * Similar to /albums, implement the following:
*
when your user goes to /tracks they should see a list of tracks, and * when the user goes to /track/t0 they should see the details of that track, and * each track in /tracks should link to the appropriate track details page
Task 8 (optional) (bonus) (hard): Add forms to Submit Albums and Tracks * Description
*
Add a form to your site such that the user can submit albums * Add a form to your site such that the user can submit tracks FOR a particular album