Week 3 - ROEL2407/cmda-smoelenboek GitHub Wiki

Pop-up

Maandag heb ik s'ochtends de laatste lootjes gelegd aan de pop-up. Hier heb ik de volgende JavaScript code toen voor geschreven:

const links = document.querySelectorAll(".teacherLink");
const closes = document.querySelectorAll(".close");
const pop_ups = document.querySelectorAll(".pop-up");

// als er een docent aangeklikt wordt, laat dan de pop-up van de desbetreffende docent zien
links.forEach(link => {
    link.addEventListener("click", function(event) {
        event.preventDefault();
        this.nextElementSibling.classList.remove("hidden");  
    })
})

// Als er op de sluit knop gedrukt wordt, sluit dan de bijbehorende pop-up
closes.forEach(close => {
    close.addEventListener("click", function(event) {
        event.preventDefault();
        pop_ups.forEach(pop_up => {
                pop_up.classList.add("hidden");
        })
    })
})

De create pagina

Na de pop-up afgemaakt te hebben, ben ik gaan kijken of ik de create pagina kon koppelen met Prismic via de API ervan. Hier kwam ik er achter dat er een probleem hierbij is. Er kan niet, zonder daar toestemming van Prismic zelf te vragen, naar de API gepost worden. Samen met Marloes heb ik de keuze gemaakt om dit voor te leggen aan de opdrachtgever. Er kan namelijk via het CMS wel docenten toegevoegd worden dus het is niet onmogelijk om te doen. Ook was er nog de optie om te switchen naar een ander Headless CMS. Hiervoor heb ik, op aanraden van mijn docent Justus tijdens een code review, gekeken naar SupaBase. SupaBase heeft meer functionaliteiten en is overall een beter Headless CMS naar mijn mening. Als ik deze tegenslag geweten had in het begin, had ik gelijk geopperd om te switchen van CMS.

Zoek toetsenbord

Wij gaan ons prototype op een groot scherm afbeelden in de Medialounge in het TTH gebouw. Dit scherm is touch screen en er komt geen toetsenbord bij te liggen. Om deze reden heb ik de keuze gemaakt om een library te gaan zoeken die ons een toetsenbord kan geven. Tijdens het feedbackgesprek kwam dit ter sprake. Het andere groepje dat ook het smoelenboek maakt hadden deze al, ik heb gevraagd waar ze die vandaan hadden aangezien deze goed werkte.

Het toetsenbord was door middel van de documentatie op de bijbehorende website eenvoudig in ons concept te verwerken.

Feedback gesprek met onze coach

De feedback die wij gekregen hebben tijdens dit gesprek waren:

• Geen vakken maar specialisaties als informatie van een docent
• De header moet weg
• Kijk goed naar content grootte (vult een docent heel weinig in of heel veel en hoe los je dat op)
• Login heeft prioriteit over het aanmaken van een docent

Code en design reviews

Deze week was ik weer beter en heb ik de reviews bij kunnen wonen. Dit waren de feedback punten hieruit:

Code

• Gebruik Supabase in plaats van Prismic, deze is beter in gebruik
• Gebruik magic link authentication in superbase zodat een docent via zijn of haar mail
• Filter het overzicht op basis van ingevulde letters zodat je alleen docenten krijgt met deze lettercombinaties

Design

• Haal de header weg
• 150 personen erin en miss zeggen waarom dat geen goed idee is
• Maak een knop voor kleine mensen zodat het scherm naar beneden scrollt, zoals bij de Iphone gebeurt bijvoorbeeld

Een overview van alle docenten

In het design review gesprek kreeg ik een tip van Vasilis. Vasilis is een docent en tevens de opdrachtgever dus het is handig dat we dit ook doen. De tip van Vasilis was dat hij graag alle docenten op 1 pagina zou willen zien. Hier ben ik toen aan begonnen.

Feedback gesprek met de opdrachtgever

Tijdens het feedback gesprek met de opdrachtgever heb ik gevraagd naar het probleem met het CMS. Aangezien dit een prototype is en wij ons wilde focussen op andere functionaliteiten verfijnen begreep de opdrachtgever dit en hebben we in overleg de keuze gemaakt om bij Prismic te blijven.

Verdere feedback van de opdrachtgever ging als volgt:

• catalogus pagina maken als tegenpool van de overview pagina, hier zullen de docenten waar de voornaam begint bij a in vakje a komen, b bij b enzovoort.
• De overview pagina moet anders veranderd worden naar een lijst waar de naam van de docent niet onder de foto staat maar bijvoorbeeld op achterkant en omdraait
• De specialisatie filter heeft andere specialisaties nodig
• De pop-up en de detail pagina moeten gecombineerd worden. De pop-up geeft minder info en detail pagina alle info
• Misschien kan de rooster website gebruikt als dataset voor info over het rooster van de docenten

Dit is hoe het prototype eruit zag na week 3:

Home

Pop-up

Detail

Zoeken

Filteren