m4ndycheung / cyf-stay-tuned-radio Goto Github PK

Dev Notes:

• Spotify API docs
• A recent Spotify API tutorial (although uses Python)
• A Scottish guy using Spotify API

To dos:

• Make the button component
• Call to BE endpoint /slack-sign-in

• create a component
• create embedded player

Requirements

• To be completed first #7

Dev Notes:

• https://www.viwizard.com/spotify-music-tips/embed-spotify-playlist-on-website.html

• Get refresh token from Spotify for the app via Authorization Fl.ow
• Create a new component to hold the function for getting a refresh token.
• Make a function inside that component that will return a refresh token.
• Ensure the function is exported.

Dev Notes:

• A refresh token is used to get another access token.
• An access token is used to make api calls to spotify to get data.
• Resources that helped A LOT:
• https://www.newline.co/courses/build-a-spotify-connected-app/implementing-the-authorization-code-flow
• https://www.youtube.com/watch?v=mBycigbJQzA&t=22s
• https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
• https://developer.spotify.com/documentation/web-api/tutorials/code-flow
• https://developer.spotify.com/images/documentation/web-api/auth-code-flow.png
• ManSangSin explaining refresh tokens to meee

• DB Credentials
• Enabled external connections?
• There's a table called tracks
• Follow CYF instructions DBeaver

• Send 5 songs via Add Tracks API call (https://developer.spotify.com/documentation/web-api/reference/add-tracks-to-playlist
• Function will take in access token and an array of track ids

Dev Notes:
Items are added in the order they appear in the uris array. For example: {"uris": ["spotify:track:4iV5W9uYEdYUVa79Axb7Rh","spotify:track:1301WleyT98MSxVHPZCA6M"], "position": 3}

Like the Lofi spotify playlist widget on Irianni's link

• Talk to Michael - ask if we can use the Spotify player on our website or if we need to make our own player or use a different player.
• look into response result from GET API (object/array of objects)
• research different embedded players which can use the API result and play the playlist

Dev Notes:

• https://developer.spotify.com/documentation/web-playback-sdk

🐘

• 27th January 2024: Christina created a Slack App that's not part of the CYF workspace
• We need #46 and #48 to check if we can use this account instead of one that's part of the CYF workspace
• Slack details in G Drive

Dependent on tickets #45 and #47 to be completed so we have a CLIENT ID and CLIENT SECRET.

To do:

• Get part 1 and 2 working in this diagram: https://api.slack.com/authentication/oauth-v2#obtaining

Dev Notes:

• https://slack.dev/node-slack-sdk/oauth (Read limitations)
• https://slack.dev/node-slack-sdk/web-api#sign-in-with-slack-via-openid-connect
• https://github.com/slackapi/node-slack-sdk/tree/main/examples/openid-connect
• ngrok

Error: /opt/render/project/src/server/modules/deleteAllTracksFromSpotifyPlaylist.js:8
const tracksArray = playlistData.tracks.items
^
TypeError: Cannot read properties of undefined (reading 'items')
at deleteAllTracksFromSpotifyPlaylist (/opt/render/project/src/server/modules/deleteAllTracksFromSpotifyPlaylist.js:8:45)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Dependent on #46, #48 , and #49 being done to test whole flow

• We need to test the Slack App created by the General Slack Account works first
• If not, then we need to get this account approved to join CYF Workspace by CYF Workspace Admin / Owner

What we think Spotify Authorization:

• For our app to create playlists - We have a feeling we'll need to login to the Master Spotify Account i.e. get authorized
• For us to show a playlist from the Master Account on our website - can we get away with just using Client Credentials?

To Do:

• Confirm what Authorization we need for creating playlists and adding songs to that playlist
• Confirm what Authorization is needed to get playlist from the Master Account and display it on our website

Dev Notes:

• Which authorization flow should we use? https://developer.spotify.com/documentation/web-api/concepts/authorization
• Client Credentials: https://developer.spotify.com/documentation/web-api/tutorials/client-credentials-flow
• Client Credentials - we can’t access “User Resources” what’s a User Resource? So does that mean we can’t access a User’s playlist?
• Searching for songs on Spotify is when we would use CLient Credentials OAuth and we wouldn't need the Authorization Code Flow

To Dos:

1. Read spotify documents
2. WHen you're ready, go for it

• Once user has logged in, and get an access token
• Use that access token to get user profile data

To Do:
Look into Auth for CYF

• Slack/CYF email
• Passport JS
• Github? - Maybe some volunteers won’t have Github i.e. the Caros? But all CYF trainees and mentors will

Dev Notes:

• Read into Passport or some other library / plugin (tbc)
• If you haven't logged in, you will see the playlist and a button "Login to add song"
• When you login, you gain the power to add songs - you will see a form to add a song

Links:

• https://api.slack.com/authentication/sign-in-with-slack

Dependent on US1 - depends on which player we end up using.

• Show a list of songs on the player.
• Play the songs.

• Get access token for the app to communicate with the master Spotify account.
• Create a new component to hold the function for getting an access token.
• Make a function inside that component that will return an access token.
• Ensure the function is exported.

Dev Notes:

• A refresh token is used so the person logged in isn't continuously asked for an access token

Notes:

• We got an error, publish directory build does not exist

To do TODAY (27th Jan)

To Do:

• Combine tickets #14 and #26
• On combining, this function will randomly select 20 songs from the database
• Return an array of track id's for ticket #4
• The array should look like this:
  ["Spotify:track:4iV5W9uYEdYUVa79Axb7Rh","spotify:track:1301WleyT98MSxVHPZCA6M", "spotify:episode:512ojhOuo1ktJprKbVcKyQ"]

• Remove Vite and React bits
• Add a header
• Round the spotify player corners
• Gussy up the form
• Add a footer

To Dos:

1. Create a db
2. Create a table to hold the songs
3. Columns: song id, song name, artist, slack username, genre
4. Insert 10 songs into table

fOR Reviewer: Check DB on dbeaver, a second eye on the data we're storing is okay

• Use refresh_token endpoint to get a new access token (when people search will they need to get a new access token every single time?)
• Set up a GET request to spotify with search params
• Access the crazy JSON response data that comes back
• Grabbing the query params: Really if we're searching songs, we only need the "q" parameter, we can hard code the type and limit in the fetch URL
• THought - every time someone types a search, it'll be sent to the backend /search endpoint - it's probably not good to keep requesting access tokens - how can we only run that code when it's needed?

Dev Notes:

• https://developer.spotify.com/documentation/web-api/reference/search
• https://www.makeuseof.com/react-spotify-api-music-search-application-build/

Other work for another ticket:

• show results on FE
• get the query params from the user searching in the search bar

If we don't have this by the Monday 29th January meeting, we will create the app using one of our personal accounts
We might get away with using a random Slack user account to create the app itself. Doesn't need to be part of CYF?

Dependent on tickets #46 to be completed so we have an Authorization Code from the login part.

To do:

• Get part 3 and 4 working in this diagram: https://api.slack.com/authentication/oauth-v2#obtaining

• Get refresh token from Spotify for the app.
• Create a new component to hold the function for getting a refresh token.
• Make a function inside that component that will return a refresh token.
• Ensure the function is exported.

Dev Notes:

• A refresh token is used so the person logged in isn't continuously asked for an access token

Lv100:

• Track Title
• Artist
• Spotify Track URL

• Create a function
• Take an array as input
• Pick 5 songs at random (math.random?)
• Output as an array

This will be a standalone function as we'll be making API requests

• get refresh token from db
• exchange refresh token for access token - refresh route only gives you access token

• get refresh token from API call
• take refresh token and store it in db
• refresh token has to be overwritten in db - otherwise we might get a bad one(?)

Dev Notes
Changed table name from refresh_tokens to refresh_tokens_table for clarity
Updated db refresh_token column from VARCHAR(100) to VARCHAR as the refresh_token is longer

Team spotted a bug!

To do as a mob programming exercise on Monday meeting.

To Do:

• Create an endpoint to make the following happen (like a parent function):
• Get refresh token from the database
• Refresh token function to get an access token (#42)
• Pass that access token as a parameter and call Delete Songs function (#25)
• Pass that same access token as a parameter and call Add Songs function (#4)

Dev Notes:

• https://docs.google.com/document/d/1hvBJ85vP7Hgs0KmdKDACNKiX1z2UrWtntjgV7xAtmes/edit?usp=sharing
• We will use async await functions for each of these functions

Notes

• Issue with the createIdentifier function and how validate function is accessed
• Noticed the activeID object is empty in console.log, so the state can't be validated and will always return falsy i.e. error message "Invalid state parameter"
• Tried exporting the createIdentifier function to its own module, learned that when you require it in different modules, a new instance of createIdentifier is created each time essentially resetting activeID
• ChatGPT explanation: When you declare const activeID = {}; inside the createIdentifier function, activeID becomes a local variable, and its scope is limited to that specific invocation of the function. This means that every time you require the module and call createIdentifier, a new version of activeID is created because it's part of the function's local scope.
• activeID is declared at the module level, shared across all instances of the module.
• Modifications to activeID in one module are visible in other modules.

• Create empty playlist on Spotify using Create Playlist API

To Do:

1. Create new group Render account
2. Deploy app on Render

Dev Notes:

• If user is part of CYF workspace i.e. true, then the user can see the add songs bits
• If not, they will only see the Playlist and cannot add songs
• There could be a link "Are you a CYF member and want to add bammy tunes? SIgn in here."