Product Biografie Tim de Roller - Tomvandenberg11/coding-the-curbs GitHub Wiki

In de Product Biografie hou je per week bij wat je allemaal hebt gedaan. Je schrijft over het proces, de iteraties, de werkwijze en de planning. Ook schetsen, testen, voorbeeld code en inspiratie zijn deel van de Product Biografie. De Product Biografie is individueel, ook als je in een team werkt.

Week 1

Wat heb ik gedaan deze week?

Proces:

Deze week zijn we begonnen met het project. We zijn langs geweest bij de opdrachtgever en hebben een debriefing geschreven. Om dit gesprek voor te bereiden hebben we vragen verzonnen die we willen weten voor dit project. Deze vragen hebben we gesteld en de feedback & antwoorden genoteerd. Toen zijn we begonnen met ontwerpen, 3 verschillende ontwerpen gemaakt en hieruit de beste features geplukt voor ons eerste prototype. We hadden woensdag een gesprek met Robert om wat meer duidelijkheid te krijgen en te kijken hoe en wat.

Werkwijze en de planning:

Ik heb mee geholpen met de debriefing schrijven & de vragen op te stellen. Een ontwerp gemaakt en begonnen met het opzetten van een prototype.

Schetsen & testen:

Artboard 1

Week 2

Wat heb ik gedaan deze week?

Proces:

We zijn deze week begonnen met het eerste prototype. We hebben alle ontwerpen bij elkaar gegooid en daar de beste features uit gehaald. Ik heb een database opgezet omdat we hebben gehoord van de opdrachtgever dat we geen toegang kunnen krijgen tot de API. Prototype 1 kan een reservatie maken en bekijken. Je kiest tijdens, voert een kenteken + email in en zo staat die naar de database geschreven. Tijdens de code & design reviews waren er vragen over de bedoeling van de app en kwamen er ook wat vragen bij me op. Deze vragen gaan we samen bundelen en stellen aan de opdrachtgever. Ik heb verder gewerkt aan de tijd lijst & versturen naar de database van de data.

Iteraties:

image image

Werkwijze en de planning:

We hebben het projecten bord opgezet voor github & zijn wat meer met issues gaan werken, dit heeft veel geholpen voor overzicht. Ook zijn we begonnen met het opzetten van de wiki

Schetsen & testen:

We hebben een breakdown schets gemaakt en vrijdag het prototype laten zien aan de opdrachtgever. Hij was erg positief en gaf goede feedback & ideeën.

Week 3

Wat heb ik gedaan deze week?

Proces:

We gingen verder met de feedback van de opdrachtgever & items die we nog verder wilde bouwen. Ik heb gewerkt aan de "nu reserveren of later" pagina, dit was voor de mensen die op dat moment voor 15 min willen reserveren of later op de dag, dit was een van de feedbackpunten van vrijdag. We zijn deze week ook gaan brainstormen over het idee van de app, hier staat nog wat meer over bij schetsen & testen. Ik heb ook het minimale checken van checkboxes geïmplementeerd alleen was dit beetje quick & dirty code dus Fabian heeft hier verder aan gewerkt.

Iteraties:

image

Werkwijze en de planning:

We hebben MOSCOW opgezet voor github

Schetsen & testen:

Tijdens de code & design reviews kregen we steeds vragen over het gebruik van de app & waarom gebruikers het zouden gebruiken. Hierdoor kregen we zelf ook vragen en moeite met het idee uitleggen. We hebben vragen opgesteld & zijn met Robert gaan zitten over hoe we het beste konden handelen. De vragen hebben we naar de opdrachtgever gestuurd en overleg met hem gehad. Tijdens dat overleg zijn we op het idee gekomen van een kaart waar je de Smart Zones kan bekijken. Zo kan je zien waar zones zitten.

Week 4

Wat heb ik gedaan deze week?

Proces:

Ik ben aan het werk gegaan met de kaart. Ik moest zoeken naar een goede kaart die we konden gebruiken en ik heb Mapbox gevonden. Met deze API kunnen we een kaart laten zien, hier punten op zetten & functies toevoegen op de markers op de kaart zodat als je op deze drukt kan lezen welke smart zone het is. Zo zou je van tevoren kunnen zien of de Smartzone gebruik wordt of niet. Ook ben in begonnen met de tijden anders in de database verwerken zodat je hier makkelijker de begin en eind tijd uit kan lezen. We willen een begin en eind tijd hebben + datum zodat je hier mee kan kijken of iets bezet is. Ook was ik er achter gekomen dat de timer geen 0 bij enkele cijfers gaf, dus tijdens zagen er zo uit: 13:1. Hier heb ik een fix voor gemaakt, die was alleen niet zo mooi:

  if (
    minutes === 0 ||
    minutes === 1 ||
    minutes === 2 ||
    minutes === 3 ||
    minutes === 4 ||
    minutes === 5 ||
    minutes === 6 ||
    minutes === 7 ||
    minutes === 8 ||
    minutes === 9
  ) {
    minutes = "0" + minutes;
  }

Iteraties:

image image

Week 5

Wat heb ik gedaan deze week?

Proces:

Ik heb markers toegevoegd aan de kaart met een pop-up waar je kan lezen welke smartzone het is. Ook heb ik voor de "nu reserveren tijd"" gefixt zodat dit ook goed in de database komt. Hier was ook weer een berekening nodig om een begin + eind tijd te maken, best simpele code:

  if (endTimeMinutes > 59) {
    endTimeMinutes = endTimeMinutes - 60;
    endTimeHours = endTimeHours + 1;
  }

  if (endTimeHours > 23) {
    endTimeHours = 0;
  }

Ook heb ik de service worker erin gezet en samen met het manifest os het nu ook een PWA! Ben ook bezig geweest met wat meer documentatie in de code & over mapbox. Zo kunnen de mensen die verder met de code gaan er wat makkelijker mee beginnen.

Ik heb ook https://github.com/Tomvandenberg11/coding-the-curbs/wiki/Mapbox#mapbox geschreven voor de documentatie van Mapbox.

Iteraties:

image image

Reflectie op eigen niveau

Web App from scratch

We hebben gebruikt gemaakt van UI stacks. We hebben ook de folder structuur overgenomen & gewerkt met github. We zijn gaan werken met github projects om overzicht te houden.

CSS to the rescue

Ik heb gebruik gemaakt van CSS variabelen & met transities gewerkt. We hebben de huisstijlkleuren in de variabelen gezet om zo de stijlgids goed te kunnen volgen. We hebben ook meer met selectoren gewerkt, ik heb vaak een container een class gegeven & daar dan verdere styling gedaan met selectoren.

Progressive Web Apps

We hebben onze app server side gerendert. Ook hebben we een service worker gemaakt alleen niet genoeg tijd gehad om die goed te testen, daarom hebben we die uit gezet. We hebben ook een manifest om het een PWA te maken.

Browser technologies

We hebben minder met dit vak gedaan omdat we hier wat minder tijd voor hadden. De app werkt jammer genoeg niet zonder Javascript. We hebben wel rekening gehouden met simpele accessibility dingen.

Realtime web

We willen met sockets een plek real time reserveren voor 2 minuten als iemand bezig is met hun gegevens aan het invullen zijn. Jammer genoeg hebben we hier niet genoeg tijd voor gehad en staat dit nog als issue open.

Human centered design

We hebben ons gezet in de voeten van de gebruiker en nagedacht over waar de app voor gebruikt zal worden. We hebben aanpassingen gedaan aan de use case & met de opdrachtgever gezeten en overlegd.