Planning week 3 - kiara1404/so-nuts GitHub Wiki

Ik heb naar aanleiding van alle feedback vorige week, een echt opzetje gemaakt voor het dashboard en welke content erin moest staan. Hierdoor kreeg ik ook inspiratie voor de layout van de 'beweging' en 'voeding' pagina's. Hieronder zal ik een paar screenshots laten zien van het ontwerp:

Ik wilde graag duidelijk onderscheid maken tussen beweging en voeding. Dit zie je duidelijk terug in de kleuren. Alle data die in het ontwerp staan, zijn hard coded. Ik heb inspiratie opgedaan vanuit de Garmin Connect App. Ik gebruik een smart watch en de app en vind het een fijn en duidelijk ontwerp met de verschillende blokken en samenvattende data. Kort en bondig maar erg informatief. Dit wilde ik graag implementeren in mijn eigen concept.
Ik had alleen nog erg veel moeite met hoe ik dan de detail pagina per onderwerp wilde laten zien. Ik vond namelijk dat ik dan dezelfde informatie in een ander formaat zou laten zien. Dus ik zat te tobben wanneer ik op het dashboard een wekelijks overzicht liet zien, ik op de detailpagina een dagelijks overzicht zou laten zien. Alleen was ik hier nog niet helemaal over uit.

Voor de rest heb ik in EJS de vragen vanuit de API gehaald en in EJS in HTML gezet. Waar ik zelf erg trots op ben is dat ik m.b.v. een for loop, een <select> drop down menu heb gemaakt voor de antwoord opties. Ik merk aan dit soort kleine dingetjes dat ik steeds beter wordt in de techniek en dit werkt super motiverend.

 <select>
            <% for(let i = 0; i < personal.questions[6].answerOptions.length; i++) { %>
            <option value="" id="<%- personal.questions[6].answerOptions[i].id %>">
                <%- personal.questions[6].answerOptions[i].text %>
            </option>
            <% } %>
        </select>

Er is wel een probleem met het aanleveren van de API, het is namelijk nog niet af. Hierdoor weet ik ook niet zo goed wat ik mij moet voorstellen wat er uberhaubt uit zou moeten komen. Volgens mij is het een soort lijst met recommendations op basis van de gegeven antwoorden. Ik heb mij hierdoor niet laten vertragen en ben gewoon maar met mock data aan de slag gegaan.

Op dinsdag liet ik dezelfde schermen zien aan Winnie. Ik was erg benieuwd wat zij hiervan zou vinden. Ze vond het dashboard erg fijn en overzichtelijk. Ook vond ze de nav bar aan de onderkant een goed idee. Het enige wat ze zei is dat er wel duidelijker verschil naar voren moet komen om aan de gebruiker te laten zien op welke pagina zij zich begeven. Dit vond ik zeker een goed punt en heb dit gelijk aangepast. Als je naar de verschillende drie nav bars kijkt, zie je op de 'voeding' pagina dat ik een onderscheid heb gemaakt met een opacity verschil. Winnie gaf ook aan dat het veranderen van de kleur van de nav per categorie een origineel idee was, ze had het nog nooit gezien. Ik vertelde ook aan Winnie mijn idee om progressbars aan de containers op het dashboard toe te voegen. Zo kan de gebruiker in één oogopslag zien hoe ver ze zijn verwijderd van hun doel. Ook wil ik er een toevoegen aan het formulier om een indicatie te geven hoe ver ze zijn. Het liefst wil ik ook circular progress indicators toevoegen aan de detail pagina's. Ze vond dit een goed plan, ambitieus maar goed. Ik vond het zelf wel ambitieus aangezien in beide nog nooit gemaakt heb in code. Als ik het doe wil ik wel dat het dynamisch is en dus update wanneer er nieuwe data wordt toegevoegd.

Wouter is de Frontend Lead bij Chippr en deze week hadden we ook een wat meer technisch feedback sessie met hem. Ik legde hem uit dat ik graag de vragen uit de questionnaire wilde clusteren. Ik had dit tot nu toe allemaal in een apart formulier gezet. Toen gaf hij aan dat ik op deze manier niet alle data kan posten naar de API en dit dus op een andere manier zou moeten. Hij gaf als advies om alles in één groot formulier te zetten en dan per 'cluster' in delen via ClientSide JavaScript te laten zien.

Deze week heb ik erg goede feedback gekregen van Koop uit de design reviews. Hij gaf aan dat het al zeker de goede kant op gaat. Ik legde hem het dilemma voor over het herhalen van content en of ik dus per pagina een ander overzicht moest geven. Hij gaf duidelijk aan dat ik dit niet moest doen. Wanneer je op het dashboard een wekelijks overzicht geeft voor beweging, zet dit dan voort op de detailpagina. Wees consistent want anders kan je de gebruiker verwarren. Verder gaf Koop als tip dat ik nu echt de detail pagina's moest gaan vullen met content, zodra je weet wat je daar wil laten zien en hoe, dan kan je weer verder, aangezien ik graag wil dat de gebruiker data kan toevoegen.

Tijdens de code review met Justus had ik nog niet heel veel technische vragen behalve dat ik graag een functionaliteit wilde toevoegen waarin de gebruiker eigen data kan toevoegen en dat dat zichtbaar wordt op de detail pagina en dashboard. Ik legde uit dat ik dit wil gaan doen met node.js FileSystem. De data uit het formulier zou moeten opgevangen worden in een json file en die json file moet ik weer meesturen in de routing functie.

• Verbeterde content detail pagina en dashboard
• Resultaten pagina opzet
• Progressbar toevoegen aan dashboard en formulier
• Formulieren omzetten naar één form
• Formulier per 'cluster' laten zien met JS
• Gegevens kunnen toevoegen met FileSystem