Issue Recap

During this project, I have tried to use our group’s scrumboard to keep track of all of my tasks and the parts of the project that I am supposed to complete

• New SASS Theme: Using this to scrub most of the CSS from the remote theme and fastpages and implement our own styles to make it look more like a professional app
• Custom Domain: To keep going with this professional app theme, we decided to get a custom domain rather than using aidenhuynh.github.io/cj_frontend and now we have classroomjukebox.com because it is a app that we want to be used by other teachers
• Media Controls: Helped to implement the Media Controls on the web app of controlling the Spotify API with the user’s account

HTML Elements

<div>
  <input type="text" id="filterInput" placeholder="Enter iTunes filter">
  <button onclick="fetchData()">Search</button> <!--Need ot make a Search Function including JavaScript Code Portion below-->
</div>

<table>
  <thead>
    <tr>
      <th>Artist</th>
      <th>Track</th>
      <th>Images</th>
      <th>Preview</th>
    </tr>
  </thead>
  <tbody id="result">
  </tbody>
</table>

JavaScript Portion

This is what will fetch the API using my own access token which I have to obtain and fetch the song from the url

async function getProfile(accessToken) {
    let accessToken = localStorage.getItem('access_token');
  
    const response = await fetch('https://api.spotify.com/v1/me', {
      headers: {
        Authorization: 'Bearer ' + accessToken
      }
    });
  
    const data = await response.json();
  }  

Spotify Token Request for Search Function

import java.io.BufferedReader;
import java.io.DataOutputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;

public class SpotifyTokenRequest {

    public static void main(String[] args) {
        callToken();
    }

    public static void callToken() {
        try {
            String clientId = "c336c4a3619545bd86f37b5173718a8d";
            String clientSecret = "ae19a5aae88048b6a3ef333778d9dc84";

            String urlParameters = "client_id=" + clientId
                    + "&client_secret=" + clientSecret
                    + "&grant_type=client_credentials";

            URL url = new URL("https://accounts.spotify.com/api/token");
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();

            connection.setRequestMethod("POST");
            connection.setDoOutput(true);
            connection.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
            connection.setRequestProperty("Content-Length", Integer.toString(urlParameters.getBytes().length));

            DataOutputStream outputStream = new DataOutputStream(connection.getOutputStream());
            outputStream.writeBytes(urlParameters);
            outputStream.flush();
            outputStream.close();

            BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream()));
            String inputLine;
            StringBuilder response = new StringBuilder();

            while ((inputLine = reader.readLine()) != null) {
                response.append(inputLine);
            }
            reader.close();

            System.out.println(response.toString());

            connection.disconnect();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}
SpotifyTokenRequest.main*(null)

// Provided by Spotify Developer API
curl --request GET \
  --url 'https://api.spotify.com/v1/search?q=remaster%2520track%3ADoxy%2520artist%3AMiles%2520Davis&type=album' \
  --header 'Authorization: Bearer 1POdFZRZbvb...qqillRxMr2z'

Search Function

Use a GET Method to pull from the song database provided and so that I can use the search query

Endpoint: https://api.spotify.com/v1/search

Can use Search Function for:

• Tracks
• Artists
• Albums
• Playlists
• Shows
• Episodes
• Audiobooks

Our current pan

Future Goals

For the future, I want to help contribute to the ReadME.md for both the frontend and the backend, and I am also in charge of making the About Page for ClassroomJukebox, so I want to add some keyframes to that but that the information from the ReadME.md to help other teachers learn more about our project and help them to adapt to it.

Pages I have contributed to

• 404: This was the page I worked the most on because it was my Spotify Redirect URI and it was kind of boring and I didn’t really want the API to work and then redirect to a boring page, so I added some fun elements to it which I am really proud of because this is the most frontend work I have done.
• Index: This is the home page of our product that is really important that it is inviting and makes people feel like they want to use our product.
• About: This was the about page that I want to put the ReadME.md into and show people what our product is about

Imports

I have to learn what each of these imports mean and I have to learn how to import from spring portfolio for a runtime url

import java.io.BufferedReader;
import java.io.DataOutputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;