Dante
Deze week heb ik me gericht op de werking van Node.js en NPM packages. Ik heb documentatie doorgelezen over Node en verschillende NPM packages. Uit mijn onderzoek heb ik de volgende bevindingen gedaan:
- Node.js: Een runtime-omgeving voor JavaScript, en vormt het fundament van het project. Alle verschillende NPM packages die we deze weken gaan gebruiken, worden door Node.js beheerd.
- Express: Voegt backend-functionaliteiten toe, zoals het opzetten van een localhost, URL-encoding en routing. Express is ook een dependency voor andere packages zoals express-session.
- EJS: Biedt ondersteuning voor de EJS-taal en views. EJS is een templating language bovenop de frontend HTML, die backend-communicatie en het dynamisch genereren van lijsten makkelijker maakt. Bestanden krijgen nu de naam titel.ejs in plaats van titel.html. Er is ook een Visual Studio Code plugin om programmeren in EJS makkelijker te maken.
- Nodemon: Versnelt de ontwikkelworkflow door het project automatisch opnieuw op te starten na wijzigingen in de code. Nodemon is in tegenstelling tot de eerder genoemde packages, alleen bedoeld voor gebruik tijdens de ontwikkeling en moet niet actief zijn wanneer het project daadwerkelijk is gedeployed.
Ik heb onderzoek gedaan naar de beste manieren om een Node.js-project op te zetten en in te delen. Door mijn eerdere werkervaring met Laravel en Symfony had ik al basiskennis van package managers en server-side programming. Ik heb me verdiept in de best practices voor de file structure van Node.js en hoe ik deze tijdens dit project kan volgen.
Net als Symfony en Laravel, heeft Node.js een best practice file structure. Het verschil is dat bij Node.js deze structuur niet automatisch wordt ingesteld. De developer moet zelf alle bestanden aanmaken en configureren. In Node.js kun je functies zoals databaseconnecties, routing, controllers en middleware scheiden.
*Routing: In het routing-bestand staan alleen de routes van de frontend naar de controllerfuncties of EJS-bestanden. In de router wordt geen data verwerkt, maar wel doorgestuurd.
- Controllers: Het controllerbestand bevat alle functies voor CRUD (Create, Read, Update, Delete). Maar ook functies zoals de login en logout.
- Middleware: Middleware bestanden bevatten code die tussen de frontend en de backend wordt uitgevoerd. Een voorbeeld van een middlewarefunctie is het parsen van frontend data, zodat deze eenvoudig in de backend kan worden verwerkt.
Met deze opzet kun je de code beter structureren en onderhoudsvriendelijker maken.
Tijdens het opzetten van Node.js en de GitHub repository hebben we als groep besloten om best practices qua file structure te volgen. Door aparte folders en bestanden te maken voor de verschillende functionaliteiten, zoals controllers, models, routers en middleware, wordt het project overzichtelijker en kan dit de workflow verbeteren.
De stappen die we hebben ondernomen zijn als volgt:
- Structureren van de projectmap:
- We hebben aparte mappen aangemaakt voor controllers, models, routers en middleware.
- Deze structuur zorgt ervoor dat de verantwoordelijkheden duidelijk gescheiden zijn en de code beter onderhoudbaar is.
- Configureren van GitHub:
- We hebben een .gitignore bestand aangemaakt om te voorkomen dat ongewenste mappen, zoals node_modules, worden gecommit.
- GitHub biedt templates voor verschillende frameworks en package managers, inclusief Node.js, wat ons heeft geholpen bij het snel opzetten van de repository.
- Opzetten van een lokale server:
- Aan het einde van de week is het gelukt om een simpele localhost op te zetten.
- We hebben de server getest door een simpele route toe te voegen en deze succesvol in de browser te bekijken.
- Versiebeheer met Git:
- We hebben succesvol onze eerste aanpassingen gecommit naar GitHub.
- We hebben een development branch aangemaakt om aanpassingen beter bij te houden.
File structure
Klein stukje van de .gitignore
De eerste paar commits
Localhost test
Om mijn kennis van Node.js te verbeteren, heb ik een eigen project opgezet dat parallel loopt met ons teamproject. Hierdoor kan ik zelf de verschillende functionaliteiten leren en toe passen terwijl ze door het team worden verdeeld. Hierdoor kan ik niet alleen mijn eigen vaardigheden uitbreiden, maar ook mijn teamleden beter ondersteunen wanneer zij tegen problemen aanlopen.
Deze week heb ik me verder verdiept in de verschillende NPM packages waarmee we tijdens dit project gaan werken. Ik heb onderzoek gedaan naar de volgende packages en hun functionaliteiten:
- ESLint: ESLint helpt bij het detecteren van fouten in JavaScript-code en zorgt ervoor dat de code consistent en volgens de best practices wordt geschreven. Het voorkomt veelvoorkomende programmeerfouten en verbetert de leesbaarheid van de code.
- Mongoose: Mongoose is een geavanceerdere versie van de MongoDB NPM package en biedt een eenvoudigere functies voor het uitvoeren van CRUD (Create, Read, Update, Delete). Het ondersteunt schema-gebaseerde datavalidatie en modeldefinities, wat helpt bij het structureren van de applicatie.
- Bcrypt: Bcrypt is een wachtwoord encryptie package die gebruikersdata zo veilig mogelijk opslaat en verwerkt. Het maakt gebruik van hashing en salting om wachtwoorden te beveiligen, waardoor ze moeilijker te kraken zijn. Dit is essentieel voor gebruikers veiligheid.
- Express-session: Express-session voegt sessie-functionaliteit toe in de vorm van cookies. Het maakt inloggen mogelijk door een gebruikerssessie aan te maken, en biedt de mogelijkheid om deze te manipuleren en te verwijderen. Express-session is nodig om een veilige gebruikers omgeving te maken.
- Dotenv: Dotenv biedt de mogelijkheid om projectvariabelen in een apart bestand (.env) op te slaan. Dit verbetert de veiligheid door gevoelige informatie, zoals database variabelen, buiten de source code te houden. Het wordt beschouwd als een best practice voor het beheren van configuratiegegevens.
Deze week hebben we gewerkt aan het opzetten van een database en deze te verbinden met ons project. Hieronder volgen de stappen die we hebben genomen:
- Database-configuratie:
- We hebben onze databasevariabelen opgeslagen in ons .env bestand om de veiligheid te verbeteren en om de best practices te volgen.
- Onderzoek naar CRUD-functionaliteiten:
- Tegelijkertijd hebben we onderzoek gedaan naar de verschillende CRUD-functionaliteiten die we nodig hebben voor ons project.
- Na het bekijken en maken van oefeningen over Mongoose hebben we besloten om Mongoose boven MongoDB te verkiezen voor onze database-interacties.
- De keuze voor Mongoose werd gemaakt op basis van de robuustere CRUD-functionaliteiten die het biedt, en de ervaring die ik eerder in de week heb opgedaan met oefeningen over Mongoose.
- Opzetten van database model:
- Later in de week hebben we een opzet gemaakt voor ons database model.
- Het voordeel van MongoDB is dat we onze schema's gemakkelijk kunnen aanpassen in ons project zonder de database helemaal opnieuw te moeten maken, zoals bij SQL-databases.
- Toevoegen van CRUD-functionaliteiten:
- Uiteindelijk is het gelukt om simpele CRUD-functionaliteiten toe te voegen aan het project.
- We hebben hiervoor simpele formulieren gemaakt, die later in het project zullen worden vervangen door de definitieve ontwerpen die zijn gemaakt door de frontenders.
Met deze stappen hebben we een solide basis gelegd voor het werken met onze database en het implementeren van de vereiste functionaliteiten voor ons project.
.env bestand
Gedeelte van de user model
Database connectie
- Is er feedback naar mijn werkhouding en of naar mij in het algemeen?
- Geen
Deze week heb ik onderzoek gedaan naar de Multer package. Multer biedt de mogelijkheid om media te verwerken en op te slaan tijdens POST requests. Voor de scope van het huidige project voorziet Multer in alle functionaliteiten die we nodig hebben. Echter, in de toekomst biedt Multer ook de flexibiliteit om te worden gecombineerd met packages die file storage op externe databases mogelijk maakt.
Multer is een veelgebruikte package in Node project voor het verwerken van bestanden, zoals afbeeldingen en video's, die worden geüpload via formulieren op webpagina's. Het stelt ons in staat om deze bestanden te ontvangen, te verwerken en op te slaan op onze server. De beste manier om data op te slaan voor het scope van dit project is om de bestanden zelf op een aparte folder in ons project op te slaan, en om de titel van dat bestand op te slaan in onze MongoDB database.
Deze week heb ik ook onderzoek gedaan naar het extern hosten van ons Node project en die vervolgens te koppelen aan een eigen domein. Ik heb verschillende websites gevonden die hostingopties bieden, zoals Vercel, Render en Cyclic. Het is me gelukt om ons project via Render te laten werken op mijn eigen domein.
Echter, al snel stuitte ik op een probleem. Aangezien we al onze Multer media opslaan in ons project zelf, is het voor Render niet mogelijk om foto's en media op te slaan zonder eigen opslag te hebben. Render biedt wel een persistent storage drive aan, maar deze begint bij 7 euro voor 250 GB, wat buiten de scope van dit project valt.
In de komende weken wil ik verder onderzoek doen naar hosting van Node projecten.
Deze week hebben we gewerkt aan de integratie van Multer in ons project. Hier volgt een overzicht van de stappen die we hebben genomen:
- Aanmaken van een middleware voor bestandsuploads:
- We hebben een middleware aangemaakt die een specifieke map in de /public/uploads directory gebruikt als opslag voor alle geüploade media.
- Aanpassingen aan het gebruikersschema/model:
- We hebben aanpassingen gemaakt aan ons gebruikersschema/model om de bestandsnaam van geüploade media op te slaan, zodat deze kunnen worden gekoppeld aan de bijbehorende gebruikers.
- Aanpassingen aan de formulieren:
- De frontenders hebben de formulieren aangepast om multipart/form-data toe te staan, wat nodig is voor het uploaden van bestanden.
- Dit zorgt ervoor dat de verzonden data in de backend wordt verdeeld over twee variabelen: req.body voor alle string data en req.files voor alle geüploade bestanden.
- Aanpassingen aan de CRUD-functionaliteit:
- We hebben de CRUD-code aangepast om de geüploade media te kunnen verwerken.
Aan het einde van de week zijn we erin geslaagd om media succesvol op te slaan en weer te geven in onze applicatie.
Multer middleware
Aanpassingen in user schema/model
Nieuwe create user function
- Geen
- Geen
Deze week heb ik mij gericht op het experimenteren met websitehosting. Ik heb verschillende platforms uitgeprobeerd, maar uiteindelijk ben ik beland bij het gebruik van een VPS (Virtual Private Server). Een VPS biedt de mogelijkheid om vrijwel alles te doen op een eigen serveromgeving.
Ik heb een kleine VPS gehuurd bij Hetzner met 4 GB RAM en 2 cores. De server wordt gehost in Duitsland en ik kan er via een SSH-key verbinding mee maken. De VPS draait op Ubuntu Terminal, wat even wennen is in vergelijking met GUI systemen zoals Windows en MacOS.
Om de VPS te testen heb ik een Node-project geïnstalleerd en alles werkt via localhost. Ik hoef alleen het server IP-adres en het poortnummer in te vullen in mijn browser om het project te kunnen gebruiken.
In de toekomst wil ik certificaten toevoegen en een domein koppelen aan de VPS. Maar voor nu en voor de scope van dit project zie ik mijn werk als voldoende.
Deze week heb ik voornamelijk de frontenders geholpen met alle backend functionaliteiten correct programmeren. Ook moesten wij alle routes aanmaken voor de verschillende pagina's, zoals de foryou page, settings, profile, register en de login en logout routes en fucntionaliteiten.