Skip to content

Commit

Permalink
SpotifyPlayList-dev-017-fix-deployment-bugs (#180)
Browse files Browse the repository at this point in the history
* FE fix auth use BASE_URL, BE fix config format

* FE recommendation view fix button style

* FE fix createPlayList view layout

* FE recommendation make market as dropdown

* make genre as dropdown, readme add ML ref

* update readme

* fix readme

* fix readme

* fix readme

* make env var overwrite FE baseURL, BE secret, redirectURL

* fix readme type

* fix

* fix docker-compose.yml

* add GetSongFeatureTest.java

* fix test name, add get song feature from playlist

* BE align cofig var name with docker, update BE code, docker file read from env var, update npm pkg file

* docker clean npm cache, setup publicPath at vue conf

* fix run vue app in prod mode

* roll back cli-service version
  • Loading branch information
yennanliu authored Oct 5, 2024
1 parent 92299d8 commit 11b9549
Show file tree
Hide file tree
Showing 13 changed files with 4,227 additions and 7,236 deletions.
44 changes: 38 additions & 6 deletions springSpotifyPlayList/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# SpringSpotify PlayList
# Spotify PlayList

<p align="center"><img src ="./doc/pic/spotify_app_1.png"></p>

Expand Down Expand Up @@ -41,15 +41,32 @@ A full stack app (FE + BE) Spotify app. Features as below:
<summary>Run</summary>

### Prerequisite
- Setup Spotify Api key
- Update `spotify.clientSecret` at [application.properties](https://github.com/yennanliu/SpringPlayground/blob/main/springSpotifyPlayList/backend/SpotifyPlayList/src/main/resources/application.properties#L5)

### Run via Docker
- Step 1. Register developer account at [Spotify API platform](https://developer.spotify.com/documentation/web-api)
- Step 2. Setup Spotify Api key
- Update `spotify.clientSecret`, `spotify.clientId` at [application.properties](https://github.com/yennanliu/SpringPlayground/blob/main/springSpotifyPlayList/backend/SpotifyPlayList/src/main/resources/application.properties#L5)
- Step 3. update Auth Redirect URL at [Spotify API platform](https://developer.spotify.com/documentation/web-api)
- Step 4. update `baseURL` at FE app : [App.vue](https://github.com/yennanliu/SpringPlayground/blob/main/springSpotifyPlayList/frontend/spotify-playlist-ui/src/App.vue#L33)
- Step 5. update `spotify.redirectURL` at BE app (same as the one setup as step 3):
[application.properties](https://github.com/yennanliu/SpringPlayground/blob/main/springSpotifyPlayList/backend/SpotifyPlayList/src/main/resources/application.properties#L6)

### Run (Docker)
```bash

# export env var
# docker-compose

# local
export SPOTIFY_CLIENT_SECRET=<your_new_client_secret>
export SPOTIFY_REDIRECT_URL=http://<server_ip>:8080/playlist

# FE
export VUE_APP_BASE_URL=http://localhost:8888/

docker-compose up
```

### Run manually
### Run (manually)
```bash

#------------------------
Expand All @@ -70,15 +87,29 @@ cd /springSpotifyPlayList/frontend/spotify-playlist-ui
npm run serve
```

- Clean docker data
### Docker cmd
```bash
#------------------------
# CLEAN DOCKER DATA
#------------------------
docker rm -f $(docker ps -aq)
# Remove all images
docker rmi -f $(docker images -q)
# remove all containers in docker
docker rm -f $(docker ps -a -q)
# remove all images in docker
docker rmi -f $(docker images -q -a)


# remove all docker data
docker system prune

#------------------------
# DOCKER LOGS
#------------------------
# check docker logs

docker logs <container_id>
```

</details>
Expand Down Expand Up @@ -129,6 +160,7 @@ docker rmi -f $(docker images -q -a)

- ML ref notebook
- https://github.com/yennanliu/SpringPlayground/blob/main/springSpotifyPlayList/doc/Spotify_ApI_call_demo.ipynb?fbclid=IwAR1ZhL081euAUCeB54kaMMNqCHBN1HnuLLTYpnpjNHAf4MMFW8VkgdP5N1o
- https://medium.com/@shruti.somankar/building-a-music-recommendation-system-using-spotify-api-and-python-f7418a21fa41


</details>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@
@RestController
public class SpotifyOAuthController {

@Value("${spotify.clientId}")
@Value("${spotify.client.id}")
private String clientId;

@Value("${spotify.clientSecret}")
@Value("${spotify.client.secret}")
private String clientSecret;

@Value("${spotify.redirectURL}")
@Value("${spotify.redirect.url}")
private String redirectURL;

@Value("${spotify.authorize.scope}")
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@
@Slf4j
public class AuthService {

@Value("${spotify.clientId}")
@Value("${spotify.client.id}")
private String clientId;

@Value("${spotify.clientSecret}")
@Value("${spotify.client.secret}")
private String clientSecret;

@Value("${spotify.redirectURL}")
@Value("${spotify.redirect.url}")
private String redirectURL;

public String getAccessToken() {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
server.port=8888

spring.application.name=SpotifyPlayList
spotify.clientId=833e496a818d4dac926a00970ba4d725
spotify.clientSecret=
spotify.redirectURL=http://localhost:8080/playlist #http://<ec2_url>:8080/playlist
spotify.client.id=833e496a818d4dac926a00970ba4d725
spotify.client.secret=
spotify.redirect.url=http://localhost:8080/playlist
#spotify.redirectURL=http://<ec2_url>:8080/playlist
spotify.authorize.scope=playlist-modify-public,playlist-modify-private,user-read-private,user-read-email

spotify.userId=62kytpy7jswykfjtnjn9zv3ou
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
package com.yen.SpotifyPlayList;

import org.junit.jupiter.api.Test;
import se.michaelthelin.spotify.SpotifyApi;
import se.michaelthelin.spotify.exceptions.SpotifyWebApiException;
import se.michaelthelin.spotify.model_objects.specification.*;
import se.michaelthelin.spotify.requests.data.playlists.GetPlaylistsItemsRequest;
import se.michaelthelin.spotify.requests.data.tracks.GetAudioFeaturesForTrackRequest;

import java.io.IOException;
import java.util.concurrent.CompletableFuture;

public class SongFeatureTest {

final String accessToken = "BQCVX_9iFkOgTNsyrl2l3Xw7BczyFbmugxUUC5Lm0nhTyw02D9RNKzNixqbiEv7o8YK8N7VYH3MyUutbT_uHY6aFb5cAnsolKzOtjP2hgGbjEaMGGPE";
String trackId = "6oHUMXEKpnXOrs13VoGsuF";

String playListId = "6fbBvdE95blBGc3ekFMzh1";

// // https://github.com/spotify-web-api-java/spotify-web-api-java/blob/master/examples/data/tracks/GetAudioFeaturesForTrackExample.java
@Test
public void test_getSong_feature() {

try {
final SpotifyApi spotifyApi = new SpotifyApi.Builder()
.setAccessToken(accessToken)
.build();
final GetAudioFeaturesForTrackRequest getAudioFeaturesForTrackRequest = spotifyApi
.getAudioFeaturesForTrack(trackId)
.build();

final AudioFeatures audioFeatures = getAudioFeaturesForTrackRequest.execute();

System.out.println(">>> ID: " + audioFeatures.getId());

/**
* example output:
*
* >>> audioFeatures: AudioFeatures(acousticness=0.443, analysisUrl=https://api.spotify.com/v1/audio-analysis/6oHUMXEKpnXOrs13VoGsuF, danceability=0.658, durationMs=225387, energy=0.86, id=6oHUMXEKpnXOrs13VoGsuF, instrumentalness=0.0, key=5, liveness=0.304, loudness=-2.898, mode=MINOR, speechiness=0.0272, tempo=88.032, timeSignature=4, trackHref=https://api.spotify.com/v1/tracks/6oHUMXEKpnXOrs13VoGsuF, type=AUDIO_FEATURES, uri=spotify:track:6oHUMXEKpnXOrs13VoGsuF, valence=0.644)
*/
System.out.println(">>> audioFeatures: " + audioFeatures);

} catch (IOException | SpotifyWebApiException e) {
System.out.println("Error: " + e.getMessage());
} catch (org.apache.hc.core5.http.ParseException e) {
throw new RuntimeException(e);
}

}

// https://github.com/spotify-web-api-java/spotify-web-api-java/blob/master/examples/data/playlists/GetPlaylistsItemsExample.java

@Test
public void test_getSongFeatureList_from_playList(){

try {
final SpotifyApi spotifyApi = new SpotifyApi.Builder()
.setAccessToken(accessToken)
.build();

final GetPlaylistsItemsRequest getPlaylistsItemsRequest = spotifyApi
.getPlaylistsItems(playListId)
// .fields("description")
// .limit(10)
// .offset(0)
// .market(CountryCode.SE)
// .additionalTypes("track,episode")
.build();


final CompletableFuture<Paging<PlaylistTrack>> pagingFuture = getPlaylistsItemsRequest.executeAsync();

// Thread free to do other tasks...

// Example Only. Never block in production code.
final Paging<PlaylistTrack> playlistTrackPaging = pagingFuture.join();

System.out.println("Total: " + playlistTrackPaging.getTotal());
//System.out.println("Track's first artist: " + ((Track) playlistTrackPaging.getItems()[0].getTrack()).getArtists()[0]);
//System.out.println("Episode's show: " + ((Episode) playlistTrackPaging.getItems()[0].getTrack()).getShow());


PlaylistTrack[] playlistTracks = playlistTrackPaging.getItems();
for (PlaylistTrack track: playlistTracks){

String songId = track.getTrack().getId();
//System.out.println(">>> name = " + track.getTrack().getName() + ", id = " + songId);
// get song feature
final GetAudioFeaturesForTrackRequest getAudioFeaturesForTrackRequest = spotifyApi
.getAudioFeaturesForTrack(songId)
.build();

final AudioFeatures audioFeatures = getAudioFeaturesForTrackRequest.execute();

System.out.println(">>> name = " + track.getTrack().getName() + ", id = " + songId + ", audioFeatures = " + audioFeatures);

}

} catch (Exception e) {
System.out.println("Error: " + e.getMessage());
}

}

}
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ public void testGetAlbumTrack(){
final String albumId = "5zT1JLIj9E57p3e1rFm9Uq";

// get token from testAuthGetToken_1
String accessToken = "BQDIiCYIHV5g1LI98m4HwuMRZJleQZxVvJ8yzvtk8qMcwjHMGQOXrd7Lq-oMwHwQcJ3s6QOfNlOiZ8OerLUSjr69qVNkSnXE7egzmpbN-YNbrhxym6o";
String accessToken = "BQCVX_9iFkOgTNsyrl2l3Xw7BczyFbmugxUUC5Lm0nhTyw02D9RNKzNixqbiEv7o8YK8N7VYH3MyUutbT_uHY6aFb5cAnsolKzOtjP2hgGbjEaMGGPE";

final SpotifyApi spotifyApi = new SpotifyApi.Builder()
.setAccessToken(accessToken)
Expand Down
13 changes: 9 additions & 4 deletions springSpotifyPlayList/docker-compose.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,23 @@ services:
- SERVER_PORT=8888
- SPRING_APPLICATION_NAME=SpotifyPlayList
- SPOTIFY_CLIENT_ID=833e496a818d4dac926a00970ba4d725
- SPOTIFY_CLIENT_SECRET=
- SPOTIFY_REDIRECT_URL=http://localhost:8080/playlist
- SPOTIFY_CLIENT_SECRET=${SPOTIFY_CLIENT_SECRET}
- SPOTIFY_REDIRECT_URL=${SPOTIFY_REDIRECT_URL}
- SPOTIFY_AUTHORIZE_SCOPE=playlist-modify-public,playlist-modify-private,user-read-private,user-read-email
- SPOTIFY_USER_ID=62kytpy7jswykfjtnjn9zv3ou
command: mvn clean spring-boot:run -DskipTests

vue:
restart: always
build: ./frontend/spotify-playlist-ui
build:
context: ./frontend/spotify-playlist-ui
args:
VUE_APP_BASE_URL: ${VUE_APP_BASE_URL}
environment:
- VUE_APP_BASE_URL=${VUE_APP_BASE_URL}
working_dir: /app
ports:
- "8080:8080" # Map host port 8080 to container port 8080
volumes:
- ./frontend/spotify-playlist-ui:/app # Mount the current directory into the container
command: /bin/sh -c "npm install && npm install --save-dev @vue/cli-service && npm run serve"
command: /bin/sh -c "npm install && npm cache clean --force && npm install --save-dev @vue/cli-service && npm run build && npm run serve -- --mode production"
1 change: 1 addition & 0 deletions springSpotifyPlayList/frontend/spotify-playlist-ui/.env
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
VUE_APP_BASE_URL=http://localhost:8888/
Loading

0 comments on commit 11b9549

Please sign in to comment.