Interfaces

Maak een apart bestand aan waarin je de interfaces definieert voor de data die je hebt aangemaakt. Zorg ervoor dat alle interfaces zijn geexporteerd zodat je ze kan gebruiken in andere bestanden.

Console App

Maak een console app aan die de data uit je json file inleest en deze op een overzichtelijke manier weergeeft in de console. Zorg ervoor dat je aan de hand van een menu de gebruiker de mogelijkheid geeft om de data te filteren op een id. Als de gebruiker een id ingeeft die niet bestaat in de data, geef je een gepaste melding.

De applicatie kan er als volgt uitzien:

Inzenden

Zorg ervoor dat je alles pushed naar je repository en de link naar je repository inzendt via digitap. De deadline vind je op digitap.

• Bij het opstarten van de applicatie voeg je twee default gebruikers toe: een admin en een user. Zorg ervoor dat de wachtwoorden van deze gebruikers veilig worden opgeslagen (hint: bcrypt). De admin gebruiker heeft een ADMIN role en de user een USER role.

• Voeg een login pagina toe aan de applicatie. De login pagina moet toegankelijk zijn voor iedereen. De login pagina moet een form bevatten met twee input velden: username en password. De login pagina moet ook een knop bevatten om het formulier te versturen.

• Zorg ervoor dat de gebruiker na het inloggen wordt doorgestuurd naar het overzicht je dashboard dat je in vorige milestones hebt gemaakt.

• Zorg ervoor dat de gebruiker niet bij de login pagina kan komen als hij al is ingelogd. Als de gebruiker al is ingelogd en hij gaat naar de login pagina, dan moet hij worden doorgestuurd naar het dashboard.

• Zorg ervoor dat de gebruiker niet bij de dashboard pagina kan komen als hij niet is ingelogd. Als de gebruiker niet is ingelogd en hij gaat naar het dashboard, dan moet hij worden doorgestuurd naar de login pagina.

• Alleen een ADMIN gebruiker mag de edit button zien op de dashboard pagina. Je kan dit doen door de button te verbergen voor de USER role. Zorg er ook voor dat de pagina zelf niet toegankelijk is voor de USER role.

• Zorg ervoor dat de gebruiker zich ook kan uitloggen. Voeg een logout knop toe aan de dashboard pagina. Als de gebruiker op de logout knop klikt, dan moet hij worden uitgelogd en worden doorgestuurd naar de login pagina.

• Zorg ervoor dat een gebruiker ook kan registreren. Dit moet gewoon een eenvoudige pagina zijn met een form met twee input velden: username en password. Als de gebruiker het formulier invult, dan moet hij worden geregistreerd en worden doorgestuurd naar de login pagina. Kijk ook of de gebruikersnaam al bestaat in de database. Als de gebruikersnaam al bestaat, geef dan een foutmelding. Zorg ervoor dat het wachtwoord veilig wordt opgeslagen.

• Zorg dat je applicatie wordt gehosted op een cloud provider naar keuze en dus je applicatie online is te bezoeken. Voeg de link toe aan je README.md bestand.

JSON Aanmaken

We gaan een json bestand nodig hebben dat we gaan gebruiken als basis van een API. Iedereen mag zelf beslissen welke soort data hij/zij in het bestand steekt. Het is wel belangrijk dat het bestand aan een aantal voorwaarden voldoet:

• Het bestand moet een array van objecten bevatten (minimum 10).

• Elk object moet minstens de volgende soort properties bevatten :

• Een id property met een unieke waarde.

• Property met een korte string als waarde: Dit kan bijvoorbeeld een naam zijn.

• Property met een lange string als waarde: Dit kan bijvoorbeeld een beschrijving zijn.

• Property met een number als waarde: Dit kan bijvoorbeeld de leeftijd zijn.

• Property met een boolean als waarde: Dit kan aangeven of iemand bijvoorbeeld een actieve status heeft.

• Property met een datum als waarde: Dit kan de geboortedatum zijn.

• Property met een image URL als waarde: Dit kan de URL van een profielfoto zijn.

• Property waarvan de waarde een string is met een beperkt aantal mogelijke waarden.

• Property met een array van strings als waarde: Dit kunnen bijvoorbeeld hobby's zijn.

• Property met een ander object als waarde. Dit object moet op zijn beurt ook een aantal properties bevatten

  • Een id met een unieke waarde

  • Een aantal properties (mogen string, booleans, numbers, image url, ...)

Let op dat dit een minimale vereiste is. Je mag gerust meer properties toevoegen als dat nodig is voor je idee.

Voorbeelden:

Fantasy Card Game

Music artists

JSON Hosten

We gaan github gebruiken voor ons JSON bestand te hosten. Hoewel github gebruikt wordt kunnen we dit ook gebruiken om bestanden in op te slaan en publiekelijk te hosten (in beperkte mate)

• Maak een nieuwe github repository aan en zet deze publiek.

• Je kan deze clonen of gewoon via de web interface de bestanden toevoegen.

• Upload je image bestanden naar github (of push deze naar je repository)

Je mag uiteraard zelf ook hosting voorzien voor je json bestand en images. Zorg er gewoon voor dat je json publiekelijk beschikbaar is en je images.

Interessante links

Data naar MongoDB schrijven

Zorg ervoor dat je alle data dat je via de fetch API ophaalt in MongoDB naar mongoDB schrijft. Kijk bij de opstart van de applicatie altijd eerst of er data in de database zit. Als er geen data in de database zit, dan moet je de data ophalen via de fetch API en in de database schrijven. Als er data inzit gebruik je de data die afkomstig is uit de MongoDB database.

Data ophalen uit MongoDB

Zorg ervoor dat alle endpoints worden aangepast zodat de data uit de MongoDB database wordt gehaald ipv de data die je via de fetch API ophaalt.

Edit functionaliteit

Zorg ervoor dat je de edit functionaliteit implementeert. Dit betekent dat je een item kan aanpassen. Je hoeft alleen maar de hoofd entiteit te kunnen aanpassen. Dus in het voorbeeld van de TradingCards moet je enkel de Trading Cards kunnen aanpassen en niet de gerelateerde Guilds.

Je mag zelf kiezen welke velden je wil aanpassen. Zorg ervoor dat je minstens 4 velden kan aanpassen. Er moet minstens 1 keer een veld zijn dat een select element gebruikt.

Als het formulier wordt ingediend, dan moet de data worden aangepast in de MongoDB database.

Opdracht Specificaties

Overzichtspagina met Objecten in een Tabel

Creëer een overzichtspagina waar alle objecten worden weergegeven in een tabelvorm. Je mag zelf kiezen welke vijf velden van de objecten niet getoond worden in de tabel. Dit betekent dat sommige informatie van de objecten bewust wordt weggelaten voor een overzichtelijker weergave.

Functionaliteiten:

• Doorklikken naar Detailpagina: Voor elk object in de tabel, moet er een optie zijn om door te klikken naar een gedetailleerde pagina waar alle informatie van het object zichtbaar is, inclusief een afbeelding van het object.

• Filterfunctie op Naam: Op de overzichtspagina moet een filterfunctie aanwezig zijn waarmee gebruikers kunnen filteren op de naam van de objecten. Dit filter checkt of de ingevoerde tekst aanwezig is in de namen van de objecten.

• Sorteermogelijkheden: Gebruikers moeten in staat zijn om de objecten in de tabel te sorteren op basis van elk veld, zowel in oplopende (asc) als in aflopende (desc) volgorde.

Opmerkingen:

• Styling: Je bent vrij om zelf CSS te schrijven voor de styling van de pagina's. Daarnaast is het toegestaan om frameworks zoals Tailwind of Bootstrap te gebruiken voor het design. Zorg ervoor dat de interface gebruiksvriendelijk en overzichtelijk blijft.

• Responsief Ontwerp: Het wordt sterk aangemoedigd om een responsief ontwerp te hanteren voor de applicatie.

• Herbruikbaarheid: Implementeer de navigatiebalk met behulp van include files om hergebruik van code te bevorderen. Dit zorgt voor een consistent uiterlijk over alle pagina's heen, zonder dat er sprake is van code duplicatie, wat bijdraagt aan een meer gestructureerde en onderhoudbare codebase.

Deze specificaties zijn bedoeld om een interactieve en gebruiksvriendelijke interface te bieden waarmee gebruikers gemakkelijk door de objecten en hun details kunnen navigeren, filteren en sorteren voor betere toegankelijkheid en overzicht.

Voorbeeldproject: Trading Cards

Als onderdeel van deze opdracht is er een voorbeeldproject gemaakt dat de functionaliteiten illustreert met gebruik van trading cards. Dit voorbeeld dient als inspiratie en richtlijn voor het ontwikkelen van je eigen project.

Screenshots

Bij dit voorbeeldproject zijn screenshots inbegrepen om een visuele indruk te geven van hoe de functionaliteiten geïmplementeerd kunnen worden. Let op de volgende aspecten in de screenshots:

• Tabelweergave: Hoe de objecten in tabelvorm worden gepresenteerd, met aandacht voor welke velden zijn weggelaten voor overzichtelijkheid.

• Detailpagina: De vormgeving en inrichting van de detailpagina van een object, inclusief afbeelding.

• Filter- en sorteeropties: Hoe de filter- en sorteermogelijkheden zijn geïntegreerd in de gebruikersinterface.

Deze screenshots dienen als voorbeeld en zijn niet bedoeld om exact gekopieerd te worden. Gebruik ze als inspiratiebron en pas de ideeën toe binnen de context van je eigen project.