Sprint 4

Ook op deze sprint kijk ik enorm positief terug. De laatste features hebben wij zo goed als allemaal geïmplementeerd. Daarnaast hebben wij ook een duidelijk beeld van alle features die niet meer door ons gedaan gaan worden. Deze hebben wij een out-of-scope label gegeven en toegevoegd aan de Toekomst Milestone.

Ik ben echt blij dat het review onderdeel nu werkt. De opdrachtgevers waren ook heel blij en zij zeiden dat ze dit ook in gedachte hadden, dus dat is altijd fijn om te horen.

Achteraf viel het erg tegen. Het was best nog wel wat werk om het allemaal te maken.

Ook merkte ik dat ik onwijs productief was. Dit had onder andere te maken met de voordelen van een framework. User feedback geven we nu via een Snackbar component en deze kan makkelijk aangeroepen worden doordat deze in de store staat. Kleine dingen, maar dat is dus echt het voordeel van een framework.

De volgende sprint gaan wij weinig opleveren. Er zijn nog een aantal dingen die afgerond moeten/kunnen worden en dat ga ik ook zeker doen. Kleine features/bugjes die ik het liefst nog werkend heb. Op de homepagina zijn de opgeslagen spellen bijvoorbeeld nog hardcoded.

Daarnaast staat er niet veel meer op de planning. Ik vind het wel leuk om met de documentatie aan de slag te gaan, dus hier ga ik veel tijd aan besteden. De rest van het team gaat dit ook doen

Code

Voor het review gedeelte heb ik als het ware twee verschillende formulieren gemaakt, waarvan er telkens maar 1 submit. Óf de lange, óf de korte.

Het review component laad ik in, in het src/routes/spellen/[game].svelte component. Ik check eerst of de gebruiker online is, want anders kan deze geen formulier submitten.

Feitelijk gezien zou dit wel kunnen door IndexedDB te gebruiken. Op het moment dat een gebruiker dan een formulier submit, worden de values eerst in een IndexedDB opgeslagen. Op het moment dat de gebruiker weer online komt, wordt deze gesubmit naar de server.

Om het toch progressive enhanced te maken, heb ik ervoor gekozen om het formulier niet weer te geven als een gebruiker offline is.

	{#if userIsOnline}
		<section>
			<h1>Wat vind jij van het spel?</h1>
			<GameReview />
		</section>
	{/if}

In het component maak ik een onderscheid in twee formulieren. Deze hebben beiden andere velden en moeten daarom apart van elkaar afgehandeld worden.

	function submitSmallForm() {
		const firstStepForm = document.querySelector('.first-step');
		const gameName = window.location.pathname.split('/')[2];
		const overallAnswer = {
			type: 'short',
			game: gameName,
			overallEmoji: firstStepForm['emoji-overall'].value
		};
		sendResultsToDB(overallAnswer);
		clearFormSteps();
	}
	
	function submitLongForm() {
		const explanationForm = document.querySelector('.explanation-container');
		const descriptionAnswers = {
			emoji: explanationForm['emoji-description'].value,
			explanation: explanationForm['explanation-description'].value
		};
		const executionAnswers = {
			emoji: explanationForm['emoji-execution'].value,
			explanation: explanationForm['explanation-execution'].value
		};
		const kidsAnswers = {
			emoji: explanationForm['emoji-kids'].value,
			explanation: explanationForm['explanation-kids'].value
		};
		const gameName = window.location.pathname.split('/')[2];
		const formResults = {
			type: 'long',
			game: gameName,
			descriptionAnswers,
			executionAnswers,
			kidsAnswers
		};
		sendResultsToDB(formResults);
		clearFormSteps();
	}

Bekijk het hele component hier.

Het liefst had ik de API gefetcht en opgeslagen in een games store. Dit is helaas niet gelukt i.v.m. de tijd. Op dit moment wordt de API continu gefetcht en daardoor doet het laden soms wat lang. Voor ons maakt dat niet zo veel uit, maar in de jungle is het internet niet zo heel goed.

Een store is over het algemeen altijd wel een goede keuze, omdat je dan niet loopt te stoeien met props, maar gewoon de games uit de store kan halen.

Design

Qua design heb ik deze sprint niet zoveel gedaan. De sprint hiervoor hebben wij het hele design van de app gemaakt en daarom was dit deze keer niet nodig.

Natuurlijk was het wel nodig om het ontwerp van de reviews te maken, maar dit was alleen wat schetsen. Bij deze feature ben ik zo snel mogelijk wat gaan maken in Svelte. De schetsen zijn te vinden in sprint 4 van de product biografie.

Aan de ene kant had het te maken met tijd en aan de andere kant wilde ik ook deze manier gebruiken. Ik ben zelf gewend om eerst iets te maken in Figma, maar eigenlijk werkte dit ook wel prima. Ik ben erachter gekomen dat het bij kleine dingetjes niet echt nodig is om direct een uitgebreid design te maken. Scheelt veel tijd.