Terug naar de vorige pagina
In deze applicatie had ik enorm veel tijd gestoken in de hoop een zeer
mooi resultaat te kunnen opleveren. Achteraf gezien vind ik persoonlijk
dat ik hierin wel geslaagd ben. Ik heb met deze opdracht enorm veel bij
bijgeleerd en heb alleen maar meer zin gekregen om meer vaardigheden te
leren binnen de informatica-wereld.
De naam vinyla staat voor vinyl, synoniem voor plaat of LP. Deze een
beetje opgevrolijkt door de toevoeging van de letter 'a'.
De website staat online en wordt gehost via Azure:
https://vinyla.azurewebsites.net
Op vinyla kan je jouw favoriete albums verzamelen om hier een mooie visuele weergave van te hebben. Je kan ook kijken naar andere personen hun favoriete albums door hen op te zoeken. Dit idee is ontstaan nadat ik vond dat het verzamelen van albums sterk is afgenomen als je dit vergelijkt naar de jaren van toen er nog niet zoveel streamingservices waren.
Wanneer je soms niet meteen weet waar je zin in hebt om naar te luisteren. Surf je naar vinyla en zie je snel weer een overzicht van jouw favoriete albums.
Hier zie je jouw favoriete albums gesorteerd op artiestnaam. Wanneer je hovert over een album zie je dat je op het album kan klikken om deze uit jouw collectie te verwijderen.
Doorheen heel de applicatie zie je naast de naam van een album een PLAY BUTTON. Wanneer je hierop klikt word je doorverwezen naar dat album op Apple Music waar je meteen het gekozen album kan beluisteren.
Onder jouw naam zie je extra informatie zoals je favoriete genre, artist en het totaal aantal albums in jouw collectie. Deze gegevens kan je wijzigen door op de EDIT PROFILE knop te klikken.
Wanneer je op EDIT PROFILE hebt geklikt krijg je de volgende popup te zien. Hiervoor wordt een reactive form gebruikt omdat dit een vereiste was van de opdracht. De knop blijft disabled totdat je een genre en favoriete artiest hebt gekozen. Een genre moet ingevuld zijn, deze kan je kiezen uit een lijst van genres. Ook de artiest is een vereist veld en moet een minimum lengte hebben van 3 karakters.
Als je tot de onderkant van het scherm scrollt kan je de knoppen DELETE YOUR ACCOUNT en ABOUT VINYLA terugvinden. Wanneer je ervoor kiest om je account te verwijderen krijg je hier eerst nog een waarschuwing van.
Wanneer je klikt op ABOUT VINYLA word je met een route naar een nieuwe pagina gestuurd waar je meer info terugvindt over de applicatie.
Wanneer je hebt geklikt op de SOCIAL tab zie je een overzicht van alle vinyla gebruikers met hun favoriete albums. Hier zijn alle albums gelockt zodat je deze niet kan verwijderen. Deze zijn extra beveiligd in de code zelf waardoor je zelfs bij een aanpassing aan de html pagina, andere mensen hun albums niet kan wijzigen. De gebruikers zijn gesorteerd op aanmaakdatum (id).
Je kan filteren op gebruikersnaam om specifieke mensen op vinyla op te zoeken. Hier wordt een pipe gebruikt zodat de filter live wordt toegepast.
Voor het zoeken van albums wordt er een iTunes api gebruikt. Wanneer je met de cursor over een album gaat, wordt deze grijs gemaakt en verschijnt er ADD TO COLLECTION. Wanneer je klikt op een album wordt deze toegevoegd aan de ingelogde gebruiker. Ook hier wordt een pipe gebruikt zodat je eenvoudig en snel muziek kan opzoeken.
Albums die al in de gebruiker zijn/haar collectie zitten, worden aangeduidt met ALREADY IN COLLECTION. Op de screenshot hieronder wordt er gehoverd over het eerste album om deze toe te voegen. De 2 volgende albums zitten al in de collectie van de gebruiker.
Het inlog en registratiescherm. Deze functies werden geïmplementeerd zoals aangegeven door de school. Hier wordt er dus ook aan validatie voorzien met een form.
Naast de api die we zelf moeten schrijven en hosten (vinyla api) wordt er een iTunes api gebruikt die het mogelijk maakt om alle muziek van de iTunes/Apple Music catalogus te raadplegen.
Zoals eerder vermeld in deze README staat er naast de naam van elk album een PLAY BUTTON. Wanneer je hierop klikt word je doorgestuurd naar dat album op Apple Music waar je het meteen kan beluisteren, of previewen indien je geen Apple Music abonnement bezit.
Deze worden beiden gehost via Azure. Zie url's bevonaan deze README.
De hele website is voorzien van een darkmode. Deze wordt automatisch gestart naargelang de instellingen van je systeem.
Deze applicatie is voornamelijk geschreven voor gebruik met computers of tablets. Maar ik heb er ook voor gezorgd dat deze vlekkenloos functioneert op mobiele apparaten zoals telefoons.
Dit is een oude screenshot van toen de api nog niet online gehost werd. Dit is nu moeilijk na te bootsen.
