Product Biografie Fabian Vis - 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:

Week 1 stond in het teken van op bezoek gaan bij de opdrachtgever van Coding the Curbs. Allereerst begonnen we met het maken van een debriefing. Dit om in kaart te brengen wat er van ons verwacht word en hoe het bedrijf in elkaar zit. Ook hebben we een kleine opzet gemaakt met vragen die we aan de opdrachtgever zouden willen stellen. Nadat we de debriefing gedaan hebben zijn we langs geweest bij Fronteer. Hier hebben we samen met Iskandar de opdracht besproken en antwoord gekregen op onze vragen. Dag 2 en 3 stonden in het teken van de eerste versie maken van het prototype. We begonnen met allemaal individueel een ontwerp maken. We zorgde ervoor dat we niet bij elkaar afkeken voor inspiratie zodat we alle vier een verschillend ontwerp kregen. Daarna hebben we alle goede features in 1 ontwerp gedaan en zijn we begonnen met het prototype maken. Woensdag hadden we ook nog een gesprek met onze coach Robert om alles even op een rijtje te zetten.

Werkwijze en de planning:

Ik heb de debriefing geschreven, een vragenlijst opgesteld, ontwerpen en wireflows gemaakt en mee gecodeerd aan de vormgeving van het prototype.

Schetsen & testen:

Week 2

Wat heb ik gedaan deze week?

Proces:

In week 2 zijn we begonnen met het maken van het prototype. Maandag hebben we de stylegids gekregen van de opdrachtgever. We hebben de kleuren, het font en het logo meegenomen in het ontwerp en in het prototype verwerkt. Ook hebben we de opdrachtgever gepushed om ons duidelijkheid te geven over de API van Coding the Curbs. Uiteindelijk was het niet mogelijk om gebruik te maken van de API dus hebben we zelf een eigen database in MongoDB opgezet. Tijdens de code review met Joost werd er nog extra aandacht besteed aan het samen werken binnen een team. Toen hebben we besloten dat we gebruik gaan maken van issues en het project board in Github. Bij de design review van Vasilis werd nog aandacht besteed aan de use case en dat we die echt heel duidelijk uitgestippeld moesten hebben.

Iteraties:

Werkwijze en de planning:

Goede taakverdeling was erg belangrijk merkte wij dus vandaar dat we met GitHub projects aan het werk zijn gegaan.

Schetsen & testen:

Breakdown schets gemaakt en vrijdag gepresenteerd voor de opdrachtgever. Hij was erg positief en gaf goede feedback.

Week 3

Wat heb ik gedaan deze week?

Minimale hoeveelheid checkboxes checked fixed. Responsiveness fixed. melding wanneer er meer dan 2 checkboxes checked zijn gemaakt.

Proces:

Week 3 stond in het teken van het verder bouwen van het prototype. Allereerst hadden we wat gedoe met of we de user case nog wel correct aan het maken waren. We hebben toen een beetje gebrainstormd over hoe we de user case wat beter konden maken. Daarna hebben we het gesprek met de opdrachtgever gehad. Hier hebben we samen met de opdrachtgever kunnen praten over de use case en hebben we wat extra features en verbeteringen voorgesteld. Na het gesprek zijn we druk bezig geweest met werken aan het prototype. Ik heb gewerkt aan de tijden minimale hoeveelheid checked maken, een extra melding toevoegen als er meer dan 2 checkboxes checked zijn en naar heel wat responsiveness gekeken. Ook veel andere kleine bugfixes enzovoorts.

Schetsen & testen:

We hebben wederom gepresenteerd bij de opdrachtgever. Ook hebben we met de opdrachtgever gediscussieerd over de use case en hebben wat knopen doorgehakt. Dit was nadat we met Robert (onze coach) gepraat hadden over de use case en de onduidelijkheden waar we tegen aan liepen. We hadden toen een kleine vragenlijst opgesteld en deze bij de opdrachtgever neergelegd.

Week 4

Wat heb ik gedaan deze week?

delete gebruikt om reservering te verwijderen uit de database. Was aardig gekloot omdat ik het in eerste instantie met deleteOne() probeerde en er niet uitkwam maar uiteindelijk is het gefixeerd met .remove()

export const deleteRoute = async (req, res) => {
    const code = req.body.code
    console.log(code)

    reservationsCollection.remove({
            'code': code
        })
        .then(() => {
            res.render('manage', {
                title: 'Manage your reservation',
                reservation: 'test'
            })
        })
}

Vervolgens heb ik de styling aangepast van de manage pagina. Daarna heb ik de active footer indicator aangepast want die werkte niet meer met doordat het server-side is.

var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
console.log(sPage);
if (sPage == "") {
    footerButton1.classList.add('active')
} else if (sPage == "addtime" || sPage == "timelist" || sPage == "addtime" || sPage == "succesful") {
    footerButton1.classList.add('active')
    footerButton2.classList.remove('active')
    footerButton3.classList.remove('active')
} else if (sPage == "checkVerify" || sPage == "verifyCode" || sPage == "delete" || sPage == "verify") {
    footerButton1.classList.remove('active')
    footerButton2.classList.remove('active')
    footerButton3.classList.add('active')
} else if (sPage == "map") {
    footerButton1.classList.remove('active')
    footerButton2.classList.add('active')
    footerButton3.classList.remove('active')
}

Proces:

Week 4 stond in het teken van bedenken welke features we wel willen uitwerken en welke niet. We hebben niet zoveel issues en ideeën dat we echt knopen moeten gaan doorhakken. Hierbij helpt het project board van GitHub heel erg. We hebben de issues onderverdeeld in MoSCoW. Dit ook zodat het project beter doorgegeven kan worden.

Week 5

Wat heb ik gedaan deze week?

Week 5 stond in het teken van de laatste loodjes leggen. We zijn gaan kijken naar wat er echt in het project moest en zo de planning daarop aangepast. Ik kreeg maandag plotseling een bug met de styling op de manage pagina die ik moest oplossen. Verder hebben we gekeken naar de map en hoe we die interactiever konden maken. Ook was er een internal server error toen we hem op heroku gepushed hadden. Dat heb ik ook nog gefixed. Als laatste was er natuurlijk nog veel documentatie die ik af moest maken en daar heeft het meeste werk ingezeten.

Iteraties

Reflectie op eigen niveau

Web App from scratch

We hebben de folder structuur van WAFS gebruikt. Ook hebben we gebruik gemaakt van het opzetten van een project op GitHub wat we geleerd hebben bij WAFS. Misschien ook een stukje client-side javascript? Gebruik gemaakt van de UI stacks.

CSS to the rescue

We hebben gebruik gemaakt van CSS uiteraard. Zo netjes mogelijk en zo weinig mogelijk div's en classes. Goed gebruik gemaakt van selecteren zoals :nth-of-type(2) enzovoorts.

Progressive Webapps

We hebben een service worker geïmplementeerd alleen hadden we niet genoeg tijd om hem goed werkend te laten werken dus hebben we hem voor nu uitgezet. Ook hebben we een manifest zodat de applicatie als PWA gebruikt kan worden. Ook is de applicatie server-side renderd met client side javascript

Browser technologies

Minder tijd besteed aan Browser technologies besteed. De user flow werkt simpel weg niet zonder javascript. Simpele accessibility functionaliteiten werken uiteraard wel.

Realtime web

Het idee was dat we doormiddel van sockets een reservering 2 minuten vast konden houden alleen hebben we dit niet optijd kunnen realiseren.

Human center design

We hebben goed nagedacht over de eindgebruiker en de use case omdat we een beetje twijfelde aan de eerste use case. Hierdoor is onze use case aardig veranderd. We hebben samen met de opdrachtgever gebrainstormd over de gebruiker en de use case.