De eerste twee weken stonden in het licht van npm install, Node.js en de basis van back-end met HTTPS requests. Hierbij hebben we wat opdrachten gemaakt en kennis gemaakt met het opzetten van een NPM project.

Ik heb voornamelijk geprobeerd alle uitgelegde code te begrijpen en bij te houden. In deze week begonnen we met forms gebruiken voor bijvoorbeeld een login. Hierbij aan de pas kwamen, welke variabelen nodig waren, en in welke variabelen dan de username en password werden opgeslagen. Zowel de opdrachten maken, als regel per regel begrijpen wat waarom en wanneer nodig is. Dit was niet makkelijk, maar gezien mijn rol back-end is, moest/wou ik het graag wel leren.

---

Voor het concept moest veel gebeuren in onze eerste samen komen als team. Hier hebben we onderanderen gesproken over:

• Het algemene concept van de website bedacht. Dit hebben we samen als team gedaan, gezien een leuk onderwerp veel motivatie met zich kan meebrengen. We zijn uiteindelijk gekomen met Band Buddy, een app om mensen te vinden voor je band, of een band te vinden om mee te spelen.
• Een basis neerzetten voor het project in de back-end, en we samen op een lijn waren.

---

In de back-end hebben we verschillende dingen gedaan deze week:

• Boilerplate: De gehele mappen structuur, met uitgeschreven routes. We hebben gekozen voor het splitsen van deze bestanden, in plaats van alles in de app.js te gooien. Hierdoor waren er misschien wel meer regels aan code, maar was de mappenstructuur overzichtelijker.

• ESlint geïinstralleerd voor een automatische code check. Iets wat later op het programma stond, maar we voor ons zelf toch al verwerkt hebben. Dit geeft echter ook errors onnodige errors aan, zoals wanneer bepaalde argumenten werden gedefineerd, maar (nog) niet gebruikt werden. Dit gaan wij nog verwerken en oplossen.

• Express toegevoegd als framework. Dit voegt onderanderen een localhost, url-encoded en routes toe voor ons om mee te werken, maar daarnaast mogelijkheid tot nog veel meer packages om mee te werken die later ook goed van pas kunnen komen.

---

• De website start op, en is verbonden met de database, waaruit data ook opgevraagd kan worden.
• Mappenstructuur is overzichtelijk en werkt met routes.

• Een werkende login met wachtwoord
• Create, Edit, Read & Delete van een account in de back-end verwerken
• Hoe garanderen we veiligheid en privacy voor de gebruiker

---

• Er was geen feedback sessie gekomen deze week, we hadden nog niet genoeg en waren allemaal daarom dus nog druk bezig.
• Samen met Dante is de volledige boilerplate opgezet. Mijn focus hierbij was op routes en het gebruik van "redirect" gezien dit ook erg nieuw waas voor mij.

• Node.JS Docs
• Express
• EJS
• Nodemon

De week heb ik veel geleerd en m'n best gedaan onderzoek te doen naar verschillende packages en andere belangrijke delen van dit vak:

• Met forms om leren gaan, inclusief methodes & actions, en hoe deze belangrijk zijn voor ons.
• Git strategieën verder onderzoeken na deze geleerd te hebben van Danny de Vries.
• Express-sessions bestuderen en begrijpen voor ons project om de website zowel een betere functionaliteit als beveiliging te geven.
• ESlint bestudeerd en getest op mijn eigen project voor een betere kwaliteit van mijn code.

---

Op het gebied van conceptualiseren hebben gewerkt aan privacy en veiligheid:

• Het wachtwoord van de user wordt in hash opgeslagen in de database ter beveiliging. Niet alleen voor mensen van buitenaf die het account proberen te hacken, maar ook in de database zodat wij daar geen misbruik van zouden kunnen maken. Dit was de meest voor de hand liggende manier met Bcrypt, wat ook aangeraden was door de docenten.
• Een session kan nu worden aangemaakt met express-session zodat interactie met de site alleen voor die user zichtbaar of ter invloed is.

---

• Een werkende login in elkaar gezet met express-session middleware, waarbij users toegevoegd kunnen worden, en alle data wordt opgeslagen in de data base. Daarbij een verificatie van een req.session.user om te zorgen dat een session beveiligd blijft en als de link gekopieerd wordt en opnieuw ingevuld wordt er eerst een check is of er een session al is aangemaakt. Zo niet wordt je geredirect naar de homepage.

• Error fix van dubbele redirect d.m.v. vermindering in else statements en toevoeging van catch(error)
• Toevoeging van de "development" branch, op deze manier houden we de "main" branch veilig en kan er wel doorgewerkt worden.
• Bcrypt toegevoegd en verwerkt in de code.

---

• Dynamische links om posts door te kunnen sturen
• Kwaliteit van de code. Kan het korter? Sneller?
• GET edit & DELETE user moet nog toegevoegd worden
• User requirement list doornemen
• Vertaling & 2-stap telefoon verificatie toevoegen

---

• Ontvangen feedback: De werkhouding is goed, actief en open.
• Algemene feedback: Er moet meer communicatie komen tussen back-end en front-end, om samen op één lijn te komen.
• Ik heb een eigen project opgezet, los van mijn klasgenoten, maar met hun hulp waar ik nog veel van heb kunnen leren.

• ESLint Docs
• Bcrypt
• Express-Session
• Dotenv

Ik heb onderzocht hoe er cookie session aangemaakt kan worden, en de ingevulde data direct wordt verwerkt en toegepast op andere elementen, zoals de gebruikersnaam. Ook hierbij het verschil in express-session tussen een Cookie session en een gewone Session. Hiernaast verder onderzoek gedaan naar 'Translation', 'Two Factor verification' & 'Image uploads'.

---

Op het gebied van Privacy & Gebruiksvriendelijkheid hebben wij gedaan deze week:

• Als iemand inlogt en de link doorstuurt naar iemand anders en deze opent, wordt er eerst gecheckt of er een session is aangemaakt. Zo niet moet er eerst ingelogd worden.
• In het geval er een session is aangemaakt, hoeft er niet constant opnieuw ingelogd te worden, d.m.v. de session te linken aan de gebruiker en te checken of deze al bestaat.

---

Deze week was een mindere week in het licht van productiviteit in de back-end, gezien we behoorlijk ver vooruit aan het lopen waren, en we tijd moesten geven aan de front-end om op een lijn te komen. Toch hebben we nog het een en ander gedaan:

• Zowel EDIT user & DELETE user zijn toegevoegd en geoptimaliseerd.
• Een gebruiker kan nu uitloggen en hierbij zijn session vernietigen.
• Er is een opstart gemaakt van Multer en file uploading. We hebben hierbij gekozen voor Multer, omdat deze in de bronnen stond van de les, echter zijn we wel van plan nog onderzoek te doen.

---

• "Multer" onderzoeken en wellicht toevoegen.
• Kwaliteit van de code. Kan het korter? Sneller?
• Vertaling mogelijkheden voor de site doornemen
• 2-stap telefoon verificatie verder onderzoeken

---

De samenwerking bestond voornamelijk voor mij uit werken met Dante en samen hebben we de volgende dingen gedaan:

• We hebben de CRUD opgelost/toegevoegd
• Errors bekeken en poging gedaan om ze allemaal op te lossen
• Kijken naar alle benodigdheden voor de back-end en deze vervullen

We hebben geen echte feedback gegeven deze week, omdat we allemaal erg gefocust waren op het project zelf.

• Multer

We hebben onderzoek gedaan naar Multer en andere manieren om foto's op te slaan in de database. In ons onderzoek zijn we langs de volgende informatie en conclusies gekomen: Er zijn 3 manieren waarop we de foto's kunnen opslaan. We kunnen de foto opslaan naar de database, we kunnen een string in de database opslaan die is gelinkt met de foto en we kunnen de foto opslaan in de code. Dat laatste is wat Multer doet, dit maakt wel dat we dus de foto's in onze code moeten opslaan, en niet in de database. Dit willen we eigenlijk niet, dus zijn we verder opzoek gegaan naar een andere 'File storage systems'. Hierbij zijn we langs GridFs gekomen, een door MongoDB ondersteunt storage system voor grote files van boven de 16 MB. Echter hebben we besloten dit voor later te bewaren, gezien dit goed genoeg is voor nu.

---

Op het gebied van conceptualiseren hebben gewerkt aan toegankelijkheid en gebruiksvriendelijkheid:

• Verschillende soorten foto's kunnen worden geüpload voor verschillende gebruikers.
• Foto's worden opgeslagen in een string in de database.

Foto's opslaan van de gebruiker kan op meerdere manieren en zijn verschillende packages voor. Het kan worden opgeslagen als foto in de database, het kan worden opgeslagen als een string in de database, en het kan opgeslagen worden in de code. Wij hebben gekozen te gaan met het laatste, omdat het anders erg ingewikkeld werd met de packages. In plaats daarvan zijn we dus gegaan met Multer, een middleware speciaal voor het uploaden van foto's naar de code en opslaan in de bestanden.

---

Er is voornamelijk veel progressie geweest in de front-end, waarin wij als de back-end grotendeels alleen communicatie hebben geleverd om het inlog formulier zo kwalitatief hoog te houden, en de User Model goed overeen te laten komen met het formulier. Echter zijn we ook een paar errors tegengekomen, die uiteindelijk duidelijk werden gemaakt door dat er geen wachtwoord of mail werd opgevraagd, terwijl deze wel verplicht waren.

---

Er zijn nog een paar kleine dingen die toegepast moeten worden uit belang van de gebruiker:

• Wachtwoord resetten
• Wachtwoord vergeten, en verificatie per mail.

Naast deze kleine dingen is alles wat er nog moet komen een "finishing touch" aan de back-end. Echter lijkt het mij handig om eerst ervoor te zorgen dat alles goed werkt en dat alle errors uit de code zijn verwerkt. Maar, met onze ogen gericht op verbeteringen zijn extra mogelijkheden als SMS verificatie, of de vertaling van de website gebaseerd op iemands taal voorkeur nog altijd van belang en zal ik ook verder onderzoek naar blijven doen.

---

• Deze week is er veel samengewerkt tussen de back-end en de front-end. Samen hebben we met het team gekeken naar het registratie formulier en hoe deze verbonden is met de back-end en de data wordt opgeslagen in de database.
• Ook hebben we elkaar geholpen met de wiki, waarin we elkaar ondersteuning hebben gegeven in de formulatie

De feedback sessie van deze week bestond voornamelijk uit het kijken naar elkaars Wiki. Hierin heb ik wat suggesties gegeven in een poging hun te helpen hun wiki te verbeteren.

Samen hebben we deze week gekeken naar alle benodigdheden. Ik heb geprobeerd dit wat te pushen, omdat we niet erg bekend leken te zijn met elkaars focuspunten. Hieruit hebben we een klein gesprek gehad waar de volgende verbetering/toevoegingspunten zijn gekomen:

---

Reset-password is een package voor die gebruikt kan worden met mail.

• Is de kwaliteit van mijn verslag goed?
• Zit er genoeg onderzoek in mijn product?
• Is er feedback op mijn werkhouding of communicatie?

• Soms als je iets toevoegt moet je in meerdere bestanden iets aanpassen. Een soort route die je via de code doorloopt. Hoe weet ik nou wanneer ik in welke bestanden iets moet aanpassen?

• https://expressjs.com/en/resources/middleware/session.html
• https://medium.com/@zakiazizi1841992/express-js-session-explained-super-easy-with-example-908d8bc4bef9
• https://www.youtube.com/watch?v=oYGhoHW7zqI&ab_channel=AnsontheDeveloper

• https://www.baeldung.com/cs/web-sessions#:~:text=In%20the%20context%20of%20web,a%20website%20or%20web%20application.
• https://stackoverflow.com/questions/23566555/whats-the-difference-between-express-session-and-cookie-session
• https://stackoverflow.com/questions/68405368/using-max-age-in-cookies-nodejs-using-res-setheader

Een session is een manier om (op korte termijn) data op te slaan wanneer een gebruiker interactie met de site heeft. Een cookie kan geen data in een database opslaan, maar slaat het op in de browser client, zoals hun voorkeur, etc. Dit is voor lichte sites erg prettig, maar voor grote sites is een echte sessie handig, waarin ze de cookies opslaan in de database. Voor ons zou een cookie-session genoeg zijn geweest, maar omdat wij in de back-end wilde oefenen hoe het zou zijn voor een groter bedrijf, hebben we besloten te gaan met het opslaan van de session.

• https://www.npmjs.com/package/translate
• https://www.npmjs.com/package/translate-google
• https://www.workfall.com/learning/blog/how-to-translate-text-using-the-translate-npm-package-and-the-libre-engine/
• https://www.npmjs.com/package/@google-cloud/translate

• https://www.npmjs.com/package/phone?activeTab=readme
• https://www.twilio.com/en-us/blog/how-to-validate-phone-numbers-in-nodejavascript-with-the-twilio-lookup-api-html?utm_source=google&utm_medium=cpc&utm_term=&utm_campaign=G_PMAX_EMEA_SMS_T1&cq_plac=&cq_net=x&cq_pos=&cq_med=&cq_plt=gp&gad_source=2&gclid=Cj0KCQjwgJyyBhCGARIsAK8LVLM7-CmAWxkHbk-w0Lhpfyjwy3OsxEd3wZQ-dv07WnHiJqLgROfzgNIaAmNREALw_wcB
• https://docs.npmjs.com/configuring-two-factor-authentication#configuring-2fa-from-the-command-line
• https://blog.logrocket.com/implementing-two-factor-authentication-using-speakeasy/

Het is erg lastig om in de tijd die we hebben een telefoon verificatie goed toe te passen. Dit komt om verschillende redenen zoals dat we ook een phone number check nodig zouden hebben, wat ook erg lastig wordt, gezien er geen SMS support is van NPM. Daarnaast zou er eigenlijk ook dan een phone number auto correction & andere vormen van 2 step verification langs komen, die we niet willen gebruiken.

• https://bsonspec.org/
• https://www.mongodb.com/developer/products/mongodb/storing-large-objects-and-files/
• https://www.mongodb.com/docs/manual/core/inmemory/
• https://www.mongodb.com/docs/database-tools/mongofiles/#mongodb-binary-bin.mongofiles
• https://www.mongodb.com/docs/manual/core/gridfs/

Al is een online File Storage beter, zowel voor beveiliging, als voor kwaliteit van de server, maar de enige goede manier om dit te verkrijgen is door een betaalde server te creëeren. Dit is iets wat we niet gaan doen voor een school project, dus houden we het toch maar op Multer een NPM ondersteunde package die helpt bestanden op te slaan in de code.