Het process

Nu ik een duidelijk idee heb en een visie heb van hoe het eruit moet zien. Wil ik mijn feature uitschrijven door de benodigde stappen om deze feature te kunnen maken volledig te documenteren.

Stap 1: De backend opzetten

We beginnen met het opzetten van de backend van onze applicatie. Om dit te doen, zullen we Node.js en MongoDB gebruiken. We zullen de nodige modules installeren en instellen, en vervolgens een server opzetten die onze verzoeken kan afhandelen.

• 1.1 Installeer Node.js en MongoDB en zet deze op de juiste manier op.

• 1.2 Maak een nieuw project aan in Node.js en installeer de nodige modules, zoals Express en Mongoose.

• 1.3 Configureer de server en voeg de nodige routes toe, zoals het ophalen van de lijst met opgeslagen films en het toevoegen van een nieuwe film aan de lijst.

• 1.4 Maak de verbinding met MongoDB en stel deze in, en maak een database aan voor ons project.

• 1.5 Zorg ervoor dat de server kan communiceren met de frontend, door middel van de benodigden routes aan te maken.

Stap 2: De frontend opzetten

Nu we onze backend hebben opgezet, gaan we verder met het opzetten van de frontend. We zullen gebruik maken van EJS-templates om de HTML-pagina's op te bouwen, en CSS om de stijl te bepalen. We zullen ook Javascript gebruiken om de functionaliteit van de applicatie te implementeren.

• 2.1 Maak de basis HTML-structuur van de pagina's, zoals de homepagina, de detailpagina van de film en de accountpagina.

• 2.2 Voeg de nodige CSS toe om de pagina's er aantrekkelijk uit te laten zien.

• 2.3 Gebruik EJS-templates om dynamische inhoud op de pagina's te laden, zoals de titel en de beschrijving van de film.

• 2.4 Voeg HTML/Javascript toe om de functionaliteit van de applicatie te implementeren, zoals het toevoegen van films aan de lijst en het verwijderen van films uit de lijst.

Stap 3: Het opslaan van films

Nu we onze basisstructuur hebben opgezet, gaan we de functionaliteit implementeren om films op te slaan. We zullen een opslaanknop op de detailpagina van de film plaatsen, die de film aan de lijst met opgeslagen films toevoegt wanneer erop wordt geklikt.

• 3.1 Voeg een opslaanknop toe aan de detailpagina van de film.

• 3.2 Schrijf de functie om films aan de lijst met opgeslagen films toe te voegen, wanneer erop wordt geklikt.

• 3.3 Voeg de nodige routes toe aan de backend, om de lijst met opgeslagen films bij te werken.

Stap 4: Het tonen van opgeslagen films

Nu we films kunnen opslaan, willen we deze films ook op de homepagina tonen, zodat de gebruiker ze gemakkelijk kan terugvinden. We zullen een lijst op de homepagina plaatsen, waarin alle opgeslagen films worden weergegeven.

• 4.1 Maak een lijst op de homepagina waarin de opgeslagen films worden weergegeven.

• 4.2 Schrijf de functie om de lijst met opgeslagen films op te halen, vanuit de backend.

• 4.3 Gebruik EJS-templates om de lijst met opgeslagen films dynamisch op de homepagina te laden.

Stap 5: Het verwijderen van opgeslagen films

Nu we opgeslagen films op de homepagina kunnen tonen, willen we de mogelijkheid bieden om films uit de lijst te verwijderen in de accountpagina. We voegen een verwijderknop toe aan elke film in de lijst, die de film uit de lijst zal verwijderen wanneer erop wordt geklikt.

• 5.1 Voeg een verwijderknop toe aan elke film in de lijst op de homepagina.

• 5.2 Schrijf de functie om films uit de lijst met opgeslagen films te verwijderen, wanneer erop wordt geklikt.

• 5.3 Voeg de nodige routes toe aan de backend, om de lijst met opgeslagen films bij te verwijderen uit de collectie.

Stap 6: Het bijwerken van de opslaanknop

We hebben nu de functionaliteit om films op te slaan en te verwijderen uit de lijst met opgeslagen films. Maar de opslaanknop op de detailpagina van de film moet ook worden bijgewerkt, zodat deze de juiste status weergeeft (opgeslagen of niet opgeslagen).

• 6.1 Schrijf de functie om te controleren of een film al is opgeslagen of niet.

• 6.2 Pas de opslaanknop aan, zodat deze de juiste status weergeeft (opgeslagen of niet opgeslagen).

• 6.3 Schrijf de functie om de status van de opslaanknop bij te werken, wanneer een film wordt toegevoegd of verwijderd uit de lijst met opgeslagen films.

Stap 7: Het opslaan van de lijst met opgeslagen films in de MONGODB server

Tot nu toe hebben we de lijst met opgeslagen films alleen opgeslagen in de server. Maar we willen deze lijst ook opslaan in de database, zodat deze behouden blijft, zelfs als de server opnieuw wordt gestart.

• 7.1 Schrijf de functie om de lijst met opgeslagen films op te slaan in de database.

• 7.2 Voeg de nodige routes toe aan de backend, om de lijst met opgeslagen films op te slaan en op te halen vanuit de database.

• 7.3 Voeg de nodige code toe aan de frontend, om de lijst met opgeslagen films op te halen vanuit de database, wanneer de pagina wordt geladen.

Stap 8: Het gebruik van een .env-bestand

Om de beveiliging van onze applicatie te verbeteren, willen we ons MongoDB-wachtwoord opslaan in een .env-bestand, in plaats van rechtstreeks in de code. Dit zorgt ervoor dat het wachtwoord niet zichtbaar is voor anderen die de code bekijken.

• 8.1 Maak een .env-bestand aan en voeg het MongoDB-wachtwoord toe als een omgevingsvariabele.

• 8.2 Gebruik de omgevingsvariabele in de code, in plaats van het wachtwoord rechtstreeks in te voeren.

Stap 9: Het testen van de applicatie

Nu we de basisfunctionaliteit van onze applicatie hebben geïmplementeerd, is het tijd om de applicatie te testen en ervoor te zorgen dat alles werkt zoals verwacht.

9.1 Test de functionaliteit om films op te slaan en te verwijderen