Frontend Projekt

Om projektet:

Projektet gik ud på at vi skulle producerer en del af en datadreven front-end løsning & man skal bruge API kald.

Jeg valgte at lave en hjemmeside hvor man kan lave en liste over ens yndlings musik artister ved hjælp af Spotify’s API.

Måden min hjemmeside virker på er at man finder Artists ID fra sin yndlings kunster og så sætter man det ind i input feltet og trykker Get Artist og så laver koden et API kald til spotify hvor den henter Artists information udfra det Artists ID man har skrevet. Så udskriver siden så navnet og et billede af artisten. Den data bliver så gemt i ens Local Storage så når man lukker browseren ned og åbner siden igen er en Favorite Artists liste gemt.

Jeg syntes det var rigtig svært at arbejde og forstå API kald til at starte med men jeg endte heldigvis med at få det til at virke. Jeg syntes også især at spotify’s API var svær at arbejde med fordi man først skulle have adgang til at lave API kald, og hvordan får man adgang til det? Man skal først lave en “App” inde på spotify for developers hjemmesiden og så får man nogle koder man skal bruge (client_id & client_secret). De koder skal man så bruge til at lave et API kald med og så får man en access token tilbage fra spotify, og så først der kan man bruge den access token til at hente data fra spotify. Så det tog mig lidt tid om at få til at virke men det lykkes.

Endelige Resultat:

https://mmdvalgfag.web.app

Min Endelige Kode (Har fjernet min API koder, så “client_id” & “client_secret” 🙂 )

<script setup>
import { ref, onMounted } from 'vue';

let accessToken = null;
let artistFavoritesArray = [];

artistFavoritesArray = JSON.parse(localStorage.getItem('artistFavorites')) || [];

onMounted(() => {
  artistFavoritesArray.forEach(a => {
    document.getElementById("artistList").innerHTML += `Artist: ${a.name} <img src="${a.image}" /><br>`;
  });
});

//Get Access Token
const getToken = async () => {
        await fetch("https://accounts.spotify.com/api/token", {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
        },
            body: new URLSearchParams({
            grant_type: "client_credentials",
            client_id: "",
            client_secret: "",
        }),
        })
            .then((res) => res.json())
            .then((data) => {
            accessToken = data.access_token;
            console.log("Access token:", data.access_token);
        })
            .catch((err) => console.error("Error fetching token:", err
    ));
}

getToken();

const onGetArtist = async () => {
    let currentArtist = document.getElementById('currentArtistID').value;
    console.log(currentArtist);

    //Get artist Info
    await fetch(`https://api.spotify.com/v1/artists/${currentArtist}`, {
        method: "GET",
        headers: {
            Authorization: `Bearer ${accessToken}`,
        },
        })
            .then((response) => {
            if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
            return response.json();
        })
            .then((data) => {
            console.log("Artist info:", data);
            console.log("Artist name:", data.name); 
            console.log("Artist picture:", data.images[0]);
            document.getElementById("artistList").innerHTML += `Artist: ${data.name} <img src="${data.images[0].url}" /> <br>`;
            artistFavoritesArray.push({
                name: `${data.name}`,
                image: `${data.images[0].url}`
            })
            localStorage.setItem("artistFavorites", JSON.stringify(artistFavoritesArray));
            console.log(artistFavoritesArray);
            document.getElementById('currentArtistID').value = "";
        })
            .catch((err) => {
            console.error("Error fetching artist info:", err);
            alert("Can't find artist");
        });
}

const resetList = () => {
    artistFavoritesArray = [];
    localStorage.setItem("artistFavorites", JSON.stringify(artistFavoritesArray));
    document.getElementById("artistList").innerHTML = "";
}

</script>

<template>
    <h1>My Favorite Artists</h1>
    <br />
    <br />
    <br />
    <input id="currentArtistID" placeholder="Artist ID"></input>
    <button v-on:click="onGetArtist">Get Artist</button>
    <br />
    <button v-on:click="resetList" class="resetButton">Reset list</button>
    <div id="artistList">
    </div>
</template>

<style>
img {
    max-width: 100px;
}

.resetButton{
    text-align: center;
    margin: 20px;
    max-width: 10vw;
}

</style>

Refleksion:

Jeg syntes det her projekt var virkelig svært, også fordi at alt den viden vi skulle bruge fik vi først efter at vi havde fået projektet for. Så det føltes mere som om vi havde 1 uge til projektet i stedet for de 2 uger vi faktisk havde. Der kan jeg huske jeg også følte mig helt fortabt de vi fik forklarede hvad projektet gik ud på fordi jeg havde ingen idé om hvor jeg overhovedet skulle begynde. Det betyder dog også at jeg fik lært meget på de 2 uger da jeg kom i mål med projektet og følte jeg havde en god nok forståelse for databaser og API kald.