Sprint 2

Begin van de week meeting met de opdrachtgever gehad en daar wat dingen van op papier gezet. Daarnaast een planning gemaakt en Thijs & ik zouden aan de slag gaan met de admin pagina. Sjoerd en Roy met het offline beschikbaar maken. Dit waren de laatste core functionaliteiten van de applicatie. Deze sprint ook nog wat GitHub dingen gedaan. Deze blijven continu terugkomen, omdat je telkens weer nieuwe dingen leert. Deze week bijvoorbeeld bezig geweest met het automatisch formatten van code als je commit.

Daarnaast vielen de stories van deze week enorm tegen. Eerst was er de offline story. Wij wilden spellen opslaan in de cache (via een button), zodat de spellen offline bekeken konden worden. Hier zijn Sjoerd en Roy wel twee dagen mee zoet geweest. Thijs en ik hadden een andere story, maar hebben uiteindelijk nog ruim een dag geholpen. Uiteindelijk is het gelukt om door middel van een button het spel op te slaan in de cache. Dit was wel heel vet toen het eindelijk lukte.

Thijs en ik focuste ons met name op de admin story. Wij wilden de admin omgeving klaar hebben. Dat was iets te opportunistisch. Zowel de offline story, als deze story kostte meer tijd dan wij vooraf dachten.

Ik heb mij voornamelijk bezig gehouden met de eerste stappen in het design van de edit pagina. Dit was een enorm klus, aangezien er veel velden zijn. Het wordt een enorm complex formulier.

Schetsen

In eerste instantie heb ik een schets gemaakt voor de edit knop. Deze knop komt op elke spel pagina en is alleen zichtbaar voor de admins. Dit kan op verschillende manier gedaan worden en dit heb ik dus eerst geschetst.

Eerste design edit pagina (mobiel)

Nadat ik dit had geschetst, wilde ik het gaan maken in Figma. De onderste vier varianten kwam hieruit. Uiteindelijk heb ik voor de eerste (meest links) gekozen, omdat die voor ons (team) het meest logisch leek. We gaan de overige ontwerpen wel voorleggen tijdens de volgende meeting en dan horen wij wat zij vinden.

De edit knop moet uiteindelijk ook naar een pagina gaan waar het spel bewerkt kan worden. Door de hoeveelheid data die er per spel bij komt kijken, is het nodig om dit gestructureerd in te vullen. De opdrachtgevers willen ook graag filteren en daarom moet de data duidelijk zijn. Geen Lintje, lintjes of lint. Het moet allemaal hetzelfde materiaal zijn. Om deze reden is het nodig om een duidelijk formulier te hebben.

Het is enorm lastig, want er zijn een hoop opties. Hieronder een voorbeeld van een endpoint (Pionnenroof) met alle data:

	{
		id: '2',
		slug: 'pionnenroof',
		name: 'Pionnenroof',
		description: 'Er worden twee teams gemaakt. De spelers uit 1 team zijn de rovers, de spelers uit het andere team zijn de tikkers. Beide teams beginnen aan hun eigen kant van het veld. De tikkers hebben voor hen een rij met pionnen. Voor de rovers is het doel om zoveel mogelijk pionnen te roven. Zodra een rover een pion heeft gepakt mag deze getikt worden door een tikker. De rover moet proberen zonder getikt te worden de pion over de eigen achterlijn te krijgen. Ben je wel getikt? Dan moet de pion weer teruggelegd worden. Hoeveel pionnen kunnen de rovers pakken binnen 2 minuten?',
		category: category.tik,
		materials: [{
			name: materialName.pion,
			amount: 20,
			notes: 'of hoedjes',
		},
		{
			name: materialName.lint,
			notes: 'om eventueel teams duidelijk te verdelen',
		},
		{
			name: materialName.klok,
			notes: 'om de tijd bij de houden',
		},
		{
			name: materialName.fluit,
		}
		],
		minimumPlayers: 2,
		targetGroup: [1,2,3,4,5,6,7,8],
		rules: [ 'Rover met pion over de eigen lijn? Pion houden', 'Rover met pion getikt voordat eigen lijn bereikt is? Pion inleveren aan tikker', 'Tikker mag rover pas tikker als deze een pion gepakt heeft'],
		variation: [
			{
				description: 'Makkelijker voor de tikkers/moeilijker voor de rovers',
				actions: ['1 leerling tegelijk laten roven', 'Afstand tussen startlijn en tikker vergroten', '2 tikkers gebruiken']
			},
			{
				description: 'Moelijker voor de tikkers/makkelijker voor de rovers:',
				actions: ['Alle leerlingen tegelijk laten starten met roven', 'Speelveld kleiner maken']
			}
		]
	},

Er kan dus enorm veel fout gaan en daarom is het nodig om de gebruiker hiervoor te beschermen.

Eerst heb ik een lijst gemaakt met (bijna) alle input types. Die is hieronder te vinden.

(Bijna) alle velden met de daarbij behorende types

Nadat ik alle velden duidelijk had, was het zaak om deze te combineren tot een groot formulier. Dit was nog erg lastig en daarom heb ik er eerst voor gekozen om mij te focussen op de UX en niet zo zeer op de UI.

De app wordt voornamelijk gebruikt op mobiel, maar de opdrachtgevers gaven aan dat zij de spellen willen (en gaan) bewerken via desktop. Daarom focus ik mij hier eerst op. Uiteindelijk moet het er ook wel normaal uit zien op mobiel, maar door het grote formulier wordt dit erg lastig. Dit heeft op dit moment niet mijn prioriteit.

Het voorbeeld hieronder gaat over het bewerken van het Kat en Muis spel.

Het was enorm lastig om dit zo gebruiksvriendelijk mogelijk te maken. Bij variaties bijvoorbeeld maak je een array in een array. Het is daarom in het formulier ook nodig om binnen een variatie (moeilijker kat/makkelijker muis) ook nog acties te hebben.

Dit formulier ga ik voorleggen aan en testen met de opdrachtgevers. Hopelijk komt hier goede feedback uit. Vervolgens neem ik deze feedback mee naar de design review van donderdag. Hier hoop ik grote stappen te kunnen maken met het design van dit formulier.

De kans is vrij groot dat wij tegen die tijd ook stappen hebben gemaakt met het design van de applicatie. Dit design kan meegenomen in het designen van het formulier, waardoor de app een geheel wordt.

De volgende sprint wil ik dit design gaan implementeren.

Code Review

Deze sprint hebben wij geen code review ontvangen.