[BER-WDPT-2024] Yujiro Akihiro

app.js

@@ -2,17 +2,72 @@ require('dotenv').config();
 
 const express = require('express');
 const hbs = require('hbs');
-
-// require spotify-web-api-node package here:
+const SpotifyWebApi = require('spotify-web-api-node');
 
 const app = express();
 
 app.set('view engine', 'hbs');
 app.set('views', __dirname + '/views');
 app.use(express.static(__dirname + '/public'));
 
-// setting the spotify-api goes here:
+// Spotify API setup
+const spotifyApi = new SpotifyWebApi({
+  clientId: process.env.CLIENT_ID,
+  clientSecret: process.env.CLIENT_SECRET
+});
+
+// Retrieve an access token
+spotifyApi
+  .clientCredentialsGrant()
+  .then(data => spotifyApi.setAccessToken(data.body['access_token']))
+  .catch(error => console.log('Something went wrong when retrieving an access token', error));
+
+// Home route
+app.get('/', (req, res) => {
+  res.render('index');
+});
+
+// Artist search route
+app.get('/artist-search', (req, res) => {
+  const { artist } = req.query;
+
+  spotifyApi
+    .searchArtists(artist)
+    .then(data => {
+      console.log('The received data from the API: ', data.body);
+      res.render('artist-search-results', { artists: data.body.artists.items });
+    })
+    .catch(err => console.log('The error while searching artists occurred: ', err));
+});
+
+// Albums route
+app.get('/albums/:artistId', (req, res) => {
+  const { artistId } = req.params;
+
+  spotifyApi
+    .getArtistAlbums(artistId)
+    .then(data => {
+      console.log('Artist albums', data.body);
+      spotifyApi.getArtist(artistId).then(artistData => {
+        res.render('albums', { albums: data.body.items, artistName: artistData.body.name });
+      });
+    })
+    .catch(err => console.log('The error while searching albums occurred: ', err));
+});
+
+// Tracks route
+app.get('/tracks/:albumId', (req, res) => {
+  const { albumId } = req.params;
 
-// Our routes go here:
+  spotifyApi
+    .getAlbumTracks(albumId)
+    .then(data => {
+      console.log('Album tracks', data.body);
+      spotifyApi.getAlbum(albumId).then(albumData => {
+        res.render('tracks', { tracks: data.body.items, albumName: albumData.body.name });
+      });
+    })
+    .catch(err => console.log('The error while searching tracks occurred: ', err));
+});
 
 app.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊'));

package.json

@@ -11,6 +11,12 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "nodemon": "^2.0.2"
+    "nodemon": "^2.0.22"
+  },
+  "dependencies": {
+    "dotenv": "^16.4.5",
+    "express": "^4.19.2",
+    "hbs": "^4.2.0",
+    "spotify-web-api-node": "^5.0.2"
   }
 }

public/styles/style.css

@@ -0,0 +1,162 @@
+body, html {
+    height: 100%;
+    margin: 0;
+    font-family: Arial, Helvetica, sans-serif;
+  }
+
+  .background {
+    background-image: url('/images/spotify-background.jpeg');
+    height: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .search-container {
+    background-color: rgba(255, 255, 255, 0.8); /* 透明度のある背景 */
+    padding: 20px;
+    border-radius: 10px;
+  }
+
+  .search-container input[type="text"] {
+    padding: 10px;
+    margin-right: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+
+  .search-container button {
+    padding: 10px 20px;
+    background-color: #f44336;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  .search-container button:hover {
+    background-color: #d32f2f;
+  }
+
+  h1 {
+    text-align: center;
+    margin-top: 20px;
+  }
+
+  .artists-container, .albums-container {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-top: 20px;
+  }
+
+  .artist, .album {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin: 20px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    overflow: hidden;
+    width: 200px;
+    height: 400px; /* 固定の高さを設定 */
+    text-align: center;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .artist img, .album img, .artist .no-image, .album .no-image {
+    width: 100%;
+    height: auto;
+    max-height: 300px; /* 画像の最大高さを設定 */
+  }
+
+  .artist .no-image, .album .no-image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 300px; /* 画像がない場合の高さを設定 */
+    background-color: #f0f0f0;
+    color: #888;
+  }
+
+  .artist h2, .album h2 {
+    font-size: 16px;
+    margin: 10px 0;
+  }
+
+  .btn {
+    display: block;
+    padding: 10px 20px;
+    background-color: #f44336;
+    color: white;
+    text-decoration: none;
+    border-radius: 5px;
+    margin: 10px auto 0;
+    transition: background-color 0.3s;
+  }
+
+  .btn:hover {
+    background-color: #d32f2f;
+  }
+
+  .tracks-table {
+    width: 80%;
+    margin: 20px auto;
+    border-collapse: collapse;
+  }
+
+  .tracks-table th, .tracks-table td {
+    border: 1px solid #ddd;
+    padding: 10px;
+  }
+
+  .tracks-table .title-header {
+    text-align: left;
+  }
+
+  .tracks-table .listen-header {
+    text-align: center;
+  }
+
+  .tracks-table .title-cell {
+    text-align: left;
+  }
+
+  .tracks-table .listen-cell {
+    text-align: right;
+  }
+
+  .tracks-table th {
+    background-color: #333;
+    color: white;
+  }
+
+  .tracks-table td {
+    background-color: #f9f9f9;
+  }
+
+  .audio-container {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .audio-container audio {
+    margin-right: 10px;
+  }
+
+  .download-btn {
+    color: #f44336;
+    text-decoration: none;
+    padding: 5px;
+    border-radius: 5px;
+    transition: color 0.3s;
+  }
+
+  .download-btn:hover {
+    color: #d32f2f;
+  }
+

views/albums.hbs

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Spotify Albums</title>
+  <link rel="stylesheet" href="/styles/style.css">
+</head>
+<body>
+  <h1>Albums for: {{artistName}}</h1>
+  <div class="albums-container">
+    {{#each albums}}
+      <div class="album">
+        {{#if this.images.[0]}}
+          <img src="{{this.images.[0].url}}" alt="{{this.name}}">
+        {{else}}
+          <div class="no-image">No Image Available</div>
+        {{/if}}
+        <div class="album-info">
+          <h2>{{this.name}}</h2>
+          <a href="/tracks/{{this.id}}" class="btn">View Tracks</a>
+        </div>
+      </div>
+    {{/each}}
+  </div>
+</body>
+</html>

views/artist-search-results.hbs

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Spotify Search Results</title>
+  <link rel="stylesheet" href="/styles/style.css">
+</head>
+<body>
+  <h1>Artist Search Results</h1>
+  <div class="artists-container">
+    {{#each artists}}
+      <div class="artist">
+        <h2>{{this.name}}</h2>
+        {{#if this.images.[0]}}
+          <img src="{{this.images.[0].url}}" alt="{{this.name}}">
+        {{else}}
+          <div class="no-image">No Image Available</div>
+        {{/if}}
+        <a href="/albums/{{this.id}}" class="btn">View Albums</a>
+      </div>
+    {{/each}}
+  </div>
+</body>
+</html>

views/index.hbs

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Spotify Search</title>
+  <link rel="stylesheet" href="/styles/style.css">
+</head>
+<body>
+  <div class="background">
+    <div class="search-container">
+      <form action="/artist-search" method="GET">
+        <input type="text" name="artist" placeholder="The Beatles">
+        <button type="submit">Search for an Artist</button>
+      </form>
+    </div>
+  </div>
+</body>
+</html>

views/layout.hbs

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Spotify Search</title>
+    <link rel="stylesheet" href="/styles/style.css">
+</head>
+<body>
+    {{{body}}}
+</body>
+</html>

views/tracks.hbs

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Spotify Tracks</title>
+  <link rel="stylesheet" href="/styles/style.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+</head>
+<body>
+  <h1>Tracks for: {{albumName}}</h1>
+  <table class="tracks-table">
+    <thead>
+      <tr>
+        <th class="title-header">Title</th>
+        <th class="listen-header">Listen</th>
+      </tr>
+    </thead>
+    <tbody>
+      {{#each tracks}}
+        <tr>
+          <td class="title-cell">{{this.name}}</td>
+          <td class="listen-cell">
+            {{#if this.preview_url}}
+              <div class="audio-container">
+                <audio controls>
+                  <source src="{{this.preview_url}}" type="audio/mpeg">
+                  Your browser does not support the audio element.
+                </audio>
+                <a href="{{this.preview_url}}" download class="download-btn">
+                  <i class="fas fa-download"></i>
+                </a>
+              </div>
+            {{else}}
+              No preview available
+            {{/if}}
+          </td>
+        </tr>
+      {{/each}}
+    </tbody>
+  </table>
+</body>
+</html>