Product Biografie Tom van den Berg - Tomvandenberg11/coding-the-curbs GitHub Wiki

In deze week zijn we als eerste begonnen met een debriefing van het project en met vragen opstellen aan de opdrachtgever. Daarna zijn we naar het bedrijf geweest voor een uitleg over het project. Daar hebben we een briefing gehad van Iskandar over Coding the Curbs. Daarna zijn we met z'n allen aan de slag gegaan om de debriefing aan te passen en op te sturen naar de opdrachtgever. Toen hebben we besloten dat ik de communicatie met de opdrachtgever zou doen voor de rest van het project. Deze week heb ik ook de opzet gemaakt voor het project. We hebben besloten om het project server-side te maken, omdat we waarschijnlijk een API krijgen voor reservering, dus het is het handigst als de data server-side geregeld wordt. Deze week hadden we ook een gesprek met Robert om alles een op een rijtje te zetten en om ons plan te bespreken. Ook had ik deze week code en design reviews met Koop en Joost, maar omdat we de eerste week nog niet veel hadden om te laten zien gingen deze reviews ook vooral over het project zelf en het concreet maken van wat we wilden maken.

Ik heb meegewerkt aan de debriefing verder heb ik het project opgezet met de server en in GitHub, zodat we hier de rest van de weken met z'n allen aan kunnen werken.

In deze week zijn we begonnen met het coderen van de applicatie. Ik had maandag de stylegids van Coding the Curbs gekregen van Iskandar, dus dit hebben we vervolgens geïmplementeerd in de designs en in de code, waarna ik de header en footer in de applicatie heb gemaakt, samen met een aantal pagina's. Tijdens de code reviews zei Joost dat het heel handig is om een GitHub projects op te zetten, en deze te koppelen aan de issues die we hebben in het project. Deze heb ik toen opgezet met de issues die we al hadden. In deze week is het ook duidelijk geworden dat we de API van Coding the Curbs niet kunnen gebruiken. We hebben daarom een eigen database opgezet met MongoDB.

Op vrijdag hebben we weer een gesprek gehad met Iskandar. Hij was tevreden met hoe het eruit zag.

In deze week heb ik het project opgedeeld in modules en routes. Hierdoor is ons project veel overzichtelijker geworden en is het een stuk makkelijker om samen te werken, omdat er minder merge conflicts voorkomen.

import express from 'express'

import { homeRoute } from "./routes/home.js";
import { verifyRoute } from "./routes/verify.js";
import { addTimeRoute } from "./routes/addTime.js";
import { reservationRoute } from "./routes/reservation.js";
import { timeListRoute } from "./routes/timelist.js";
import { verifyCodeRoute } from "./routes/verifyCode.js";
import { offlineRoute } from "./routes/offline.js";
import {checkVerifyRoute} from "./routes/checkverify.js";
import { noworlater } from './routes/noworlater.js';
import { successfulRoute } from './routes/successful.js';

export const router = express.Router()

router
  .get('/', homeRoute)
  .get('/verify', verifyRoute)
  .get('/manage', checkVerifyRoute)
  .post('/addTime', addTimeRoute)
  .post('/reservation', reservationRoute) 
  .get('/timeList', timeListRoute)
  .post('/verifyCode', verifyCodeRoute)
  .post('/checkVerify', checkVerifyRoute)
  .get('/offline', offlineRoute)
  .get('/noworlater', noworlater)
  .get('/successful', successfulRoute)

Deze week hadden we wat onduidelijkheden over wat de opdrachtgever uiteindelijk verwachtte van ons. Daar heb ik het tijdens de code review met Koop en het coach gesprek met Robert over gehad. Na aanleiding hiervan hebben we een vragenlijstje opgesteld voor de opdrachtgever om het voor ons duidelijker te krijgen. We hebben tijdens het gesprek voorgesteld om een kaart aan het ontwerp toe te voegen zodat gebruikers kunnen zien waar ze nog meer kunnen reserveren als de huidige plek vol is.

Deze week heb ik ervoor gezorgd dat een gebruiker alleen zijn/haar reserveringen kan beheren. De gebruiker moet de e-mail en kenteken invoeren, waarna de gebruiker een e-mail krijgt met een bevestigingscode. Als deze code overeen komt met het kenteken en e-mail kan de gebruiker de reservering beheren.

Hierbij heb ik gebruik gemaakt van de nodemailer package, waarbij er via Gmail een mail verstuurd kan worden.

const mailOptions = {
        from: '"Coding the Curbs" <[email protected]',
        to: email,
        subject: 'Je bevestigingscode voor ' + plate,
        html: "Hallo!<br><p>Hierbij je bevestigingscode: <br><b>" + userCode + "</b><br><br>Hiermee kan je je reservering wijzigen of verwijderen. <br><br>Groetjes,<br>Coding the curbs</p>"
      }

Verder heb ik samen met Fabian ervoor gezorgd dat de gemaakte reserveringen verwijderd kunnen worden. We waren hier vrij lang mee bezig, omdat er in de MongoDB documentatie stond dat deleteOne() gebruikt moest worden. Na verder onderzoek te hebben gedaan, kwamen we erachter dat het met .remove() verwijderd wordt uit de database.

Verder heb ik de code wat opgeschoond, zodat deze meer aansluit bij onze Coding Standards. Ik heb bijvoorbeeld var omgewisseld voor let en const. Ook heb ik de connectie naar de database in een module gedaan, zodat de app.js nog overzichtelijker wordt.

import MongoClient from 'mongodb'
import * as dotenv from 'dotenv'

export let reservationsCollection
export let Reservation = {
  time: '',
  email: '',
  kenteken: '',
  code: ''
}

const {
  MONGO_PASS,
} = process.env
dotenv.config()

export const connectDB = () => {
  MongoClient
    .connect(`mongodb+srv://codingthecurbsminor2022:${MONGO_PASS}@codingthecurbs.ln7wtad.mongodb.net/?retryWrites=true&w=majority`, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    })
    .then(connection => {
      const db = connection.db('reservations')
      reservationsCollection = db.collection('dcderservations')
    })
}

Deze week heb ik verschillende foutmeldingen toegevoegd aan de applicatie. Er is nu een foutmelding als er een code wordt aangevraagd maar de e-mail en kenteken combinatie bestaat niet.

.catch((err) => {
      console.log(err)
      res.render("checkVerify", {
        title: "Verifieer je kenteken",
        errorMessage: 'Je bevestigingscode is onjuist. Probeer het opnieuw.'
      })
    })

Ik heb dit gedaan voor zowel de email+kenteken als voor de bevestigingscode:

Ook heb ik ervoor gezorgd dat de bevestigingscode server-side wordt aangemaakt. Eerst had ik namelijk gemaakt dat de code als hidden input veld werd meegenomen met de gegevens, maar hierdoor kon de code gewoon te zien zijn in de console. Nu is dat server-side opgelost.

export const reservationRoute = async (req, res) => {
  const reservation = req.body
  const randomCode = Math.floor(1000 + Math.random() * 9000)
  reservation.code = randomCode.toString()

  reservationsCollection.insertOne(reservation)
    .then(() => res.redirect('/successful'))
    .catch(error => console.error(error))
}

Ook heb ik een manifest toegevoegd aan het project, zodat de webpagina toegevoegd kan worden aan de homescreen van een telefoon.

{
  "short_name": "Coding the Curbs",
  "name": "Coding the Curbs",
  "icons": [
    {
      "src": "/images/png/logo_512x512.png",
      "type": "image/jpg",
      "sizes": "512x512"
    },
    {
      "src": "/images/png/logo_big.png",
      "type": "image/jpg",
      "sizes": "2134x2134"
    }
  ],
  "start_url": "/",
  "background_color": "#ffffff",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#4f52c9",
  "description": "Coding the Curbs app for making reservations for a smart zone",
  "screenshots": [
    {
      "src": "images/png/screenshot.png",
      "type": "image/png",
      "sizes": "620x1340"
    }
  ]
}

Voor wafs hebben we een client side applicatie gemaakt. Dit hebben we terug laten komen door data uit een database te halen en error states toe te voegen in het project.

Bij CSS to the rescue hebben we een animatie met CSS gemaakt. Dit hebben we gebruikt in het project door custom properties te gebruiken in het project.

Bij het vak Progressive Web apps hebben we een client-side applicatie gemaakt. We hebben voor dit project een server-side applicatie gemaakt. Hiervoor hebben we een service-worker toegevoegd, maar deze hebben we uitgezet omdat we niet genoeg tijd hadden om deze te testen. Ook hebben we een manifest gebruikt om van de applicatie een web app te maken.

Voor Browser Technologies hebben we een website gemaakt met We hebben minder tijd besteed aan dit vak, omdat onze applicatie ook veel draait op client-side JavaScript. We zijn hier uiteindelijk niet aan toegekomen.

Bij dit vak hebben we een server-side applicatie gemaakt met sockets. We wilden bij ons project een socket toevoegen waardoor het niet meer mogelijk wordt dat twee mensen op hetzelfde moment dezelfde tijd reserveren, maar hier zijn we niet aan toegekomen.

Voor dit vak hebben we een website gemaakt die precies op maat gemaakt is voor onze gebruiker. Dit hebben we toegepast omdat we de app hebben gemaakt en gedesigned vanuit de gebruiker. Mede hierdoor is ook de user story verandert omdat dit in het voordeel is van de gebruiker.