Vivanne
Elk teamlid maakt een eigen persoonlijke pagina.
Prototypen en uitwerken: MongoDB aangemaakt! Ontwerpen: UI doorgenomen(mijn groepje heeft het ontworpen)
Wat is MongoDB precies. Database?
Herhaal deze structuur voor elke projectweek
Verbeelden en conceptualiseren: Ik heb onderzoek gedaan naar de Spotify API. En vanuit het perspectief van de gebruiker bepaald welke endpoints en requests we allemaal nodig gingen hebben. En daar een lijstje van gemaakt. Dit zal er voor zorgen dat we tijdens het bouwen makkelijker weten wat we wel en niet kunnen bouwen en linkjes naar de info ervan hebben. Op deze manier ben ik ook bekender geworden met de termen uit de api.
Oriënteren en begrijpen: We hebben deze week gespard over ons concept en schermen flow, zodat iedereen op een lijn zat met welke pagina's we zouden gaan maken en wisten wat wel en niet mogelijk was met de app. Bijvoorbeeld muziek swipen gebaseerd op genre. We hebben dus de keuze gemaakt om alleen te kunnen swipen op tracks en artiesten.
Hoe moet ik nu verder? Ik heb nooit eerder met backend code gewerkt en het is me niet duidelijk waar ik nu moet beginnen. Vooral omdat Sep ook wel al wat dingen had opgezet. Hier was ik nog maar een klein beetje over ingelicht.
Sep heeft wat uitleg gegeven over hoe verder en wat hij al had opgezet qua code. Ook heb ik gehoord dat het handig was om de uitleg video over Github te kijken. Dit zou later in het project minder chaos veroorzaken.
Prototypen en uitwerken: MongoDB aangemaakt! (als oefening) Samen ontwerpen / Oriënteren en begrijpen: Ik heb samen met Sep de User Requirement list opgesteld. Om daaruit prioriteiten te stellen hebben we de MoSCoW methode toegepast op de lijst. (zie hieronder)
User requirement list:
M -> Must have
S -> Should have
C -> Could have
W -> Won't have
Aanmeldings- en Gebruikersbeheer
(M) Gebruikers moeten zich kunnen aanmelden met hun Spotify-account. (M) Gebruikers moeten hun profiel kunnen bekijken. (M) Gebruikers moeten zich kunnen afmelden van de web-app. Muziekaanbevelingen
(M) Aanbevelingen op Basis van Luistergeschiedenis: De web-app moet aanbevelingen doen op basis van de recente luistergeschiedenis van de gebruiker op Spotify. (M) Aanbevelingen op Basis van persoonlijke top Nummers: De web-app moet aanbevelingen doen op basis van de top nummers van de gebruiker op Spotify. (C) Populaire Aanbevelingen: De web-app moet populaire nummers aanbevelen die veel worden beluisterd door andere gebruikers met vergelijkbare smaak. Interactie met Aanbevelingen
(M) Swipe Functie: Gebruikers moeten nummers naar rechts kunnen swipen als ze het nummer leuk vinden en naar links kunnen swipen als ze het nummer niet leuk vinden. (M) Nummer Opslaan: Gebruikers moeten de optie hebben om een nummer dat ze leuk vinden op te slaan in een Spotify-afspeellijst. (M) Nummer Overslaan: Gebruikers moeten de optie hebben om een nummer over te slaan als ze het niet leuk vinden. Gebruikerservaring
(S) Zoekfunctie: Gebruikers moeten handmatig naar nummers of artiesten kunnen zoeken binnen de web-app. (M) Afspelen van Fragmenten: Gebruikers moeten een fragment van elk aanbevolen nummer kunnen beluisteren voordat ze besluiten het leuk te vinden of over te slaan. Feedback en Optimalisatie
(W) Feedback Functie: Gebruikers moeten feedback kunnen geven over de nauwkeurigheid van de aanbevelingen. (C) Voorkeuren Instellen: Gebruikers moeten hun muziekvoorkeuren kunnen instellen of aanpassen voor betere aanbevelingen. Integratie met Spotify
(S) Synchronisatie met Spotify: De web-app moet naadloos synchroniseren met de Spotify-bibliotheek van de gebruiker. (C) Afspelen op Spotify: Gebruikers moeten de mogelijkheid hebben om een aanbevolen nummer direct af te spelen op Spotify. (C) Afspeellijsten Beheren: Gebruikers moeten hun Spotify-afspeellijsten kunnen beheren binnen de web-app. Beveiliging en Privacy
(S) Gegevensbescherming: De web-app moet voldoen aan de GDPR en andere relevante regelgeving omtrent gegevensbescherming. (S) Privacy Instellingen: Gebruikers moeten hun privacy-instellingen kunnen beheren, zoals welke gegevens worden gedeeld en hoe hun gegevens worden gebruikt. Ondersteuning en Hulp
(C) Helpsectie: De web-app moet een helpsectie bevatten waar gebruikers antwoorden kunnen vinden op veelgestelde vragen. (C) Contact Ondersteuning: Gebruikers moeten contact kunnen opnemen met de ondersteuningsteam voor hulp en technische ondersteuning.
Wat is MongoDB precies. Database?
Evalueren: Sep en ik hebben geïttereerd over wat handig zou zijn met swipen. Alleen op je toptracks en artiesten (wat we al aan het bouwen waren > "is dit goed genoeg?"), of ook op eventuele zoekresultaten, zodat je je beeld meer kan verbreden in de app. Omdat de gebruiker zijn/haar doel is om nieuwe muziek te leren kennen, vonden we het een goed idee om swipen gebaseerd op zoekresultaten, in onze website toe te voegen. Zo kan de gebruiker evt nog nieuwe genres leren kennen die hij/zij in eerste instantie nooit zou beluisteren, en zijn 'muziekscope' verbreden.
Prototypen en uitwerken: Deze week heb ik gewerkt aan wat simpele functies waarvan we ook zeker wisten dat we dit wilde verwerken in de website. Denk aan een logout button, het ophalen van profielgegevens en ik heb een begin gemaakt aan het toevoegen van een nummer in een playlist.
Logout:
Profielgegevens opvragen:
Recommendations: Sep had het voor elkaar gekregen om de toptracks aan te vragen, dus ben ik aan de slag gegaan met het opvragen recommendations op basis van die toptracks. Dit is me uiteindelijk goed gelukt. Wel had ik wat errors die ik uiteindelijk in chatGPT heb gezet. Zie bron: https://chatgpt.com/share/11f59830-5e14-43c0-b184-7dfb79c088b2.
Recommendations vervolg > like + dislike + playPreview Begin gemaakt aan het liken en disliken van nummers (het lukte me nog niet helemaal. Sep heeft het uiteindelijk wel helemaal werkend gemaakt met zijn verdere code): zie ChatGPT chat: https://chatgpt.com/share/e4259390-f82a-41b0-bd90-670ce1cda0e1. Terwijl Sep bezig was met dat te fixen ben ik verder gegaan met een playPreview function. Om nieuwe muziek te leren kennen moet je wel de muziek kunnen horen tijdens het swipen. Zie code hieronder.
Na deze code te hebben geschreven en het werkte kwam ik erachter dat niet elk nummer een preview heeft. Ik heb voorgesteld aan sep om dat ergens eruit te filteren. Vervolgens heeft Sep de filterRecommendations functie geschreven in de server.js.
Searchbar op de zoek.ejs: Aan het eind van de week ben ik ook nog begonnen aan de searchResults en zoek pagina. Allereerst heb ik bij verkennen een zoekbalk erin gecodeerd. We hebben er voor besloten om dit niet met list.js te doen, maar via de backend. List.js hebben we uiteindelijk wel op andere plekken nog toe kunnen passen (Joost zijn code).
zie searchbar code:
Searchresults.ejs:
Nu zou ik alleen nog de "get recommendations" knop op de searchResults pagina moeten laten werken door de track.id mee te geven in de parameter.
Prototypen en uitwerken:
searchRecommendations Ik heb het voor elkaar gekregen om te kunnen swipen gebaseerd op een searchResult. Maar tot nu toe alleen voor een nummer. En niet een artiest. Dit zou moeten werken maar hij doet het niet. Ik snap ook niet goed waarom hij het niet doet.
update: Ik heb Sep zijn hulp gevraagd en die heeft wat aanpassingen gemaakt in de code gebaseerd op de code die ik al had geschreven. Van een tag heeft hij een form method: get. gemaakt, en de benodigde aanpassingen in de server.js gemaakt.
Beschrijf het volgende:
- Welk technisch onderwerp heb je onderzocht?
- Welke bronnen heb je geraadpleegd?
- Wat heb je geleerd over het onderwerp, welke conclusies heb je getrokken?
- Welke alternatieve oplossingen heb je onderzocht? Denk bv aan verschillende libraries of modules, frontend of backend oplossingen, verschillende manieren om je data te organiseren etc.
- Welke oplossing heb je gekozen en waarom?
Vul naar behoefte aan met meer onderwerpen
Beschrijf het volgende:
- Op welke manieren heb je je prototype geevalueerd? Benoem gebruikte CMD methods
- Beschrijf de aanpak van je test / evaluatie
- Beschrijf de resultaten van je test / evaluatie
- Hoe ga je deze resultaten gebruiken om je prototype verder te verbeteren?