Sprint 3

Tijdens deze sprint ben ik voornamelijk met twee dingen bezig geweest: het CMS en het redesignen van het speloverzicht.

CMS

De opdrachtgevers wilden, logischerwijs, ook zelf spellen toevoegen. Thijs en ik zijn lang bezig geweest om dit vorm te geven en uiteindelijk heb ik besloten om Strapi te gebruiken als (headless) CMS. We zouden later altijd nog zelf wat kunnen maken. Strapi zou ervoor zorgen dat wij snel een werkende manier hadden om spellen aan te passen.

Een headless CMS is een Content Management System (back-end) die losgekoppeld zit van een applicatie (front-end). De verbinding tussen de headless CMS en de app wordt gemaakt door middel van een API. Dit kan bij Strapi via GraphQL of REST. Voor deze app hebben wij gekozen voor REST, aangezien onze eigen API hiermee werkte.

Vorig week had ik al een lijst gemaakt met alle velden. Dit was nog wel een klusje, aangezien alles er in moest komen, het niet te complex moest worden én er zo min mogelijk fouten gemaakt mochten worden.

Het liefst wilden wij een CMS in de app hebben, zodat de opdrachtgevers niet naar een aparte website zouden moeten. Vorige week had ik hier wat designs voor gemaakt.

Na het maken van dit design, wilde ik het gaan implementeren. Het begin had ik gemaakt, maar toen ben ik (gelukkig) toch nog over gestapt naar Strapi. Het kostte simpelweg te veel tijd om dit te implementeren. Ook vond ik het zonde van de tijd. Het doel van deze opdracht is om een prototype te ontwikkelen en een headless CMS zou prima zijn voor nu.

Daarnaast is de app met name voor mobiel bedoeld, terwijl de opdrachtgevers expliciet hadden aangegeven dat zij spellen willen aanpassen op desktop.

Ik heb voor Strapi gekozen, omdat ik hier zelf al wel wat ervaring mee had. Voor de Weekly Nerd had ik hier een artikel over geschreven. Hieruit kon ik concluderen dat het alles had wat wij nodig hadden. Door de Content Types van Strapi is het mogelijk om de kans op fouten tijdens het invullen heel klein te maken. In plaats van dat iemand lint, lintje of Lintjes invult, selecteert deze nu de Content Type Lintje. Dit maakt het ook mogelijk om in de app te filteren.

Strapi is een CMS dat snel op te zetten is en daarnaast alle mogelijkheid heeft om te customizen. Het admin panel is een React app en daarom kun je alles aanpassen wat je wilt. Ik heb enkel de vertaling, wat tekst en de kleuren aangepast.

Om te kunnen filteren op de groepen, moest er wel iets herschreven worden. In dit stadium gebruiken we nog twee APIs, omdat wij niet willen vast zitten aan Strapi. Het lijkt ons een reëel optie, maar we willen nog altijd terug kunnen.

Daarnaast kunnen wij in de Strapi API nog niet filteren. Dit soort dingen wil je niet in productie, maar wij zijn nog even zoekende naar wat wij precies willen. Dit werkt voor ons nu prima. De volgende sprint willen wij een beslissing gaan maken in hoe we het willen doen.

Hierdoor was het wel nodig om iets te herschrijven. Omdat het endpoint van Strapi iets anders returnt.

Onze eigen API returnt:

"targetGroup": [1, 2, 3, 4],

Terwijl Strapi het volgende returnt:

"targetGroup":[
   {
      "group":"1"
   },
   {
      "group":"2"
   },
   {
      "group":"3"
   },
   {
      "group":"4"
   },
   {
      "group":"5"
   }
],

Omdat wij nog steeds de twee verschillende APIs wilden gebruiken, moest hier op gecheckt worden:

let targetGroupArr;
const isNestedArray = game.targetGroup[0].group;

// Strapi API
if (isNestedArray) {
  const targetGroupRawArr = game.targetGroup;
  targetGroupArr = targetGroupRawArr.map((a) => parseInt(a.group));
  targetGroupArr.sort(function (a, b) {
    return a - b;
  });
  
// Custom API
} else {
  targetGroupArr = game.targetGroup;
  targetGroupArr.sort(function (a, b) {
    return a - b;
  });
}

Tijdens de wekelijkse meeting heb ik gevraagd of zij een spel konden maken. Dit ging goed tot het invullen van variaties. Hier heb ik moeten helpen. Daarom wil ik bij die sectie nog iets meer duidelijkheid geven. Het is mogelijk om bij elk veld een toelichting te geven.

Voor de rest ging het goed en het spel was direct te zien in de lijst met spellen. Al met al: de opdrachtgever is tevreden met hoe het nu gedaan wordt.

Endpoint Moeder hoe laat is het?

{
   "targetGroup":[
      {
         "group":"1"
      },
      {
         "group":"2"
      },
      {
         "group":"3"
      },
      {
         "group":"4"
      },
      {
         "group":"5"
      }
   ],
   "name":"Moeder hoe laat is het?",
   "minimumPlayers":"5",
   "description":"De leerlingen maken een rij naast elkaar voor de pionnen, de docent gaat tegenover de leerlingen staan op minimaal 10 meter afstand. De docent is de ‘moeder’, de leerlingen zijn de kinderen. Op het teken van de docent zeggen de kinderen tegelijk ‘Moeder, moeder, hoe laat is het?’, dan kiest de docent een getal (1 t/m 12). Kiest de docent het getal 3 dan zegt hij/zij ‘Het is 3 uur’. Dan zetten de kinderen tegelijk 3 stappen vooruit. Daarna vragen ze opnieuw ‘Moeder, moeder, hoe laat is het?’, weer kiest de docent een getal en zegt bijvoorbeeld ‘Het is 8 uur’, de kinderen zetten nu tegelijk 8 stappen vooruit. Dit gaat zo door totdat het antwoord van de docent is ‘Het is bedtijd!’, dan moeten de kinderen zo snel mogelijk terugrennen naar de startlijn terwijl de docent probeert een van de kinderen te pakken. Is het de docent gelukt om een van de kinderen te pakken dan is dat kind de volgende ronde de ‘moeder’.",
   "slug":"moeder-hoe-laat-is-het",
   "rules":[
      {
         "description":"De kinderen moeten steeds tegelijk vragen ‘Moeder, moeder, hoe laat is het?’"
      },
      {
         "description":"Zegt moeder dat het 5 uur is, dan zetten de kinderen 5 stappen"
      },
      {
         "description":"Tijdens het lopen tellen de kinderen hardop de stappen"
      }
   ],
   "materials":[
      {
         "amount":"1",
         "description":"Voor de moeder",
         "material":{
            "name":"Lintje"
         }
      },
      {
         "amount":"10",
         "description":"Om de startlijn te maken",
         "material":{
            "name":"Pion"
         }
      }
   ],
   "variation":[
      {
         "description":"Makkelijker moeder/moeilijker kinderen",
         "actions":[
            {
               "description":"Twee moeders"
            },
            {
               "description":"Geven om de beurt aan hoe laat het is en bij 'Bedtijd!' proberen ze allebei een kind te pakken."
            }
         ]
      },
      {
         "description":"Moeilijker moeder/makkelijker kinderen",
         "actions":[
            {
               "description":"Tijdens het lopen tellen de kinderen hardop de stappen"
            }
         ]
      }
   ],
   "updatedAt":"2021-06-04T13:43:56.516Z",
   "category":{
      "name":"Loopspel"
   },
   "id":"60ba2e13814dd00015893f13"
}

Design Review

Tijdens de derde sprint heb ik bij Koop een design review gedaan. Voorafgaand aan de design review had ik het ontwerp van de overzichtspagina aangepast. Dit was het eerst:

Na wat iteraties heb ik er het volgende van gemaakt:

Ik vind het altijd wel fijn om dit soort dingen in Figma te doen en om vervolgens continu nieuwe designs te maken. Dus ik begon met de oranje variant. Toen ben ik wat kleuren gaan proberen. Daar kwamen deze kleuren weer uit. Zoals te zien is op de afbeeldingen hierboven: er zijn verschillende designs voor de kaarten gemaakt.

Op internet ben ik verschillende designs en color palettes met betrekking tot jungle gaan zoeken. Hier kwam een lijst. Uiteindelijk heb ik er een main palette van gemaakt:

Inspiratie

Daarna leek een (subtiele) achtergrond mij wel een tof idee. Dit is ook te zien in voorbeeld 1 hierboven. Na wat dingen geprobeerd te hebben, kwamen deze bladeren eruit. Uiteindelijk nog het menu gemaakt.

Dit alles was hetgeen waar ik tijdens de design review feedback op wilde. Uiteindelijk is dit het resultaat van het itereren en ging ik met dit ontwerp naar de design review

Uit de review met Koop kwamen een aantal dingen, zoals het toevoegen van ordenen, het samenvoegen van de home & speloverzicht pagina, maar met name grouping.

Bij grouping plaats je elementen die bij elkaar passen, bij elkaar. Dus zoals in het design van mij: de filters, zoals alle groepen & tikspel horen hetzelfde te zijn. Het is alleen verwarrend dat de labels daaronder een donkergroene kleur hebben. Het lijkt wel alsof ze belangrijker zijn.

Koop gaf daarom aan dat deze het beste weg (lees: op een andere plek) konden.

Bij het menu bevestigde hij mijn aanname al: doe deze bovenaan. In een app kun je deze het beste onderaan doen, maar bij deze web app niet. Ook door het feit dat deze app met name op kleine telefoons gebruikt gaat worden. Wél is het een idee om rechtsonder een go to top/go to menu knop te hebben, zodat je wel makkelijk naar het menu kan navigeren.

Na deze sessie heb ik het ontwerp nog iets aangepast:

We zijn er als team nog niet over uit hoe we het gaan doen met de favorieten. Er zijn een hoop mogelijkheden. Deze beslissing nemen wij later.

Volgende week wil ik aan de slag met het beoordelen van spellen, zodat docenten feedback kunnen geven aan de app.

Code Review

Deze sprint hebben wij geen code review ontvangen.

PreviousSprint 2 NextSprint 4

Last updated 3 years ago

Was this helpful?