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.
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.
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.
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, ...)
Dit object is afkomstig van een 2de json bestand.
Let op dat dit een minimale vereiste is. Je mag gerust meer properties toevoegen als dat nodig is voor je idee.
Zorg vooral voor realistische data. Images kunnen eenvoudig worden gegenereerd aan de hand van AI generation tools zoals DALL-E (via bing of chatgpt)
Voorbeelden:
Fantasy Card Game
Music artists
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)
Update de image urls in je json file zodat deze naar github urls wijzen. Zorg zeker dat je de raw url gebruikt als image url. Bv: https://raw.githubusercontent.com/similonap/fake-gpt/main/images/chatbot.png
Upload je json 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.
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.
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:
Zorg ervoor dat je alles pushed naar je repository en de link naar je repository inzendt via digitap. De deadline vind je op digitap.
Creëer een overzichtspagina waar alle objecten worden weergegeven in een tabelvorm. Gebruikers kunnen 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.
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.
Doorklikken naar Gerelateerde Objecten: Als een object verwijst naar een ander object, moet er een mogelijkheid zijn om vanuit de detailpagina van het eerste object door te klikken naar de detailpagina van het gerelateerde object.
Weergave van Subobjecten: Op de detailpagina van een object moet er een lijst zijn van alle subobjecten die bij dit object horen. Deze lijst moet basisinformatie van de subobjecten bevatten en een optie om door te klikken naar de detailpagina's van deze subobjecten.
Navigatiebalk: Introduceer een navigatiebalk die gebruikers in staat stelt gemakkelijk tussen de verschillende delen van de applicatie te navigeren, zoals de overzichtspagina's. De positie van de navigatiebalk is flexibel en kan worden aangepast aan de layout en het design van de applicatie.
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.
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.
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.
