Skip to content

Reflectie Merlijn

mbergevoet edited this page Jun 19, 2021 · 7 revisions

Intro

Het merendeel van de vakken heb ik niet gebruikt in de meesterproef. Dat had deels ta maken met de case. De chatbot. Maar ook door tijdgebrek denk ik. We moesten erg onze weg vinden binnen de case waardoor we in week 3 pas aan de iteratie begonnen die uiteindelijk leidde tot het eindproduct.

Wat heb ik gebruikt van de vakken

Webapp from scratch

Tijdens web app from scratch ging het natuurlijk om het gebruiken van een API en daar code omheen maken die het laat zien. Vooral DOM manipulatie dus. Vooral elementen aanmaken, vullen met tekst en appenden naar de parent. Zo werkt onze chat functie ook. Alleen worden de antwoorden die TWY geregeld mrt behulp van onze spraakherkenning. We hebben geen rest api gebruikt om data op te halen. Daar was geen nootzaak voor. Ik heb wel onderzocht of we een muziek sample API konden gebruiken maar die bestaan dus niet.

CSS to the rescue

We hebben vooral de nieuwe technieken gebruikt die we geleerd hebben tijdens het vak. In de eindfase hebben we nog flink wat interessante styling toegevoegd. Die styling was ons veel moeilijker af gegaan als we niet al eerder geleerd hadden over hoe handig animaties, linear gradients en box/drop shadows zouden zijn voor onze case. Omdat de stijl cyberpunk achtig is geworden moesten we veel neon kleuren en box/dropshadows gebruiken om dat effect tot leven te brengen.

Later hebben we nog lineae gradients gebruikt die met een animatie bewegen. Vooral bij de achtergrond is het erg merkbaar dat die beweegt. Bij de scanlines of CRT lines over de chatbox is het wat minder merkbaar maar ook daar zit het zelfde principe achter.

Human Centered design

De spraakherkenning heb ik even hier gezet omdat Sergio daar al mee had gewerkt bij HCD. Hij kon het introduceren aan mij en Inju. Daardoor hadden we misschien iets van een voorsprong op wanneer we het nog niet kenden. Het deel met de spraak herkenning was iets meer uitzoeken.

Dit hadden we nodig omdat we anders de hele voice interface niet hadden kunnen maken.

Browser technologies

Tijdens het project hebben we wel nagedacht over accessibility. Eerst hadden we nog een invoerveld waar je in kon typen om met TWY te praten. Maar later leek het ons juist beter om het alleen via spraak te laten werken. Alle knoppen die je ziet zijn volledig te bedienen met het toetsenbord. Je zou kunnen zeggen dat de code ook is opgedeeld in drie lagen alleen is JavaScript wel echt nodig om alles te laten werken. We hadden ook met een server en een database kunnen werken zoals ik bij het vak ook gedaan heb. Het was alleen niet echt nodig om ons doel te bereiken. Het was misschien wel mooi geweest om dat de doen zodat de server meer functionaliteiten overneemt en de browser die je gebruikt niet bepaald of de app werkt of niet.

Verbeter punten

Ik denk dat dit design proces nodig was om tot de juiste oplossing te komen. Het lastige was gewoon dat de opdrachtgevers zelf niet goed wisten wat ze nou eigenlijk van ons wilden. Misschien had ik nog meer tot de kern kunnen komen door meer in overleg met Joost na te denken over concepten. Dus als het had gekund, zeker in de begin fase meer met ze meeten om onze bevindingen te delen.

Om de api’s te onderzoeken en code te schrijven hebben we nooit hulp van anderen gehad. Eigenlijk alleen van Yuri maar dat was voor Flow AI. Soms was dat vest onhandig. Want alles moesten we zelf oplossen en het internet afstruinen naar oplossingen. Ik denk dat technische hulp van buiten af wel onze workflow had kunnen verbeteren door dat alles sneller ging. Maar al met al ben ik tevreden met het eind resultaat. Alleen had het net nog wat beter

Het was ook handig geweest als we meer hadden kunnen testen met andere gebruikers. Hierdoor hadden we misschien nog extra kennis uit op kunnen doen die de interactie kon verbeteren. Ons enige test personen waren Joost en Max en zij zijn niet eens de doelgroep. Het gebrek aan testen had ook te maken met ons moeizame proces. Pas in week 3 of 4 stond er echt wat wat ook testbaar was.

Omdat het proces van hot naar her ging hebben we ook niet zo veel gedocumenteerd omdat onze tijd meer op ging naar nieuwe technieken en onderzoeken. Dat is een leer punt voor de volgdende keer. Ook al is het ontwikkel proces nog zo chaotisch, toch proberen goed bij te houden wat je hebt gedaan omdat het het waard is aan het einde.

Leerdoelen en wat heb ik geleerd

Reflectie op het project en de leerdoelen opnieuw formuleren en uitleggen wat je hebt geleerd Aan het begin van de Meesterproef heb ik de volgende leerdoelen opgeschreven.

  1. In de meesterproef wil ik me zelf uitdagen door nieuwe technieken te leren en toe te passen in het eindproduct dat we opleveren.

  2. In de meesterproef wil ik de opdrachtgever professioneel benaderen en een soepel verloop van het project. Dit doe ik door contact te initiëren en tijden voor meetings af te spreken en updates te geven van onze voortgang binnen het project.

  3. In de meesterproef wil ik oefenen met een nieuw framework en het uitbreiden van mijn ervaring en kennis over frameworks. Dit is een belangrijke vaardigheid voor de front-end developers van nu.

Toen wist ik natuurlijk nog niet hoe het project zou gaan lopen. uiteindelijk is één van de drie totaal niet aan bod gekomen. Maar de andere twee is wel redelijk gelukt. Ik zal nu uitleggen hoe ik de leerdoelen heb bereikt en wat ik nog meer heb geleerd wat niet staat in de leerdoelen.

Het was niet nodig om een framework te gebruiken voor onze applicatie. Ergens is dat wel jammer omdat ik daar graag meer oefening had gewild. Voor de opdracht was dat gewoon overkill geweest. Hoe we het nu gemaakt hebben is prima voor de functionsliteit die het heeft.

Ik heb steeds het mailcontact geïnitieerd met Joost en Max. Ik vind het ook leuk om te doen opzich. Ook tijdens de meetings heb ik meestal onze voorgang uitgelegd aan Joost en Max, maar ik heb ook ruimte gelaten voor Sergio en Inju om hun voortgang te vertellen aan hen. Ook maakte ik de meetings steeds aam om alles in soepele banen de leiden. Dat was ook mijn leerdoel. En dat is ook gelukt.

Ik wist al wel dat je dingen met spraak in de browser kon doen. Daar heb ik nu ook meer over geleerd. Het opzetten van de microfoon in JavaScript is heel makkelijk maar omdat te laten werken met de herkenning van woorden is wat moeilijker. Nu weet ik ook hoe dat moet.

Ik heb nieuwe libraries geleerd, dus een nieuwe techniek. Dat leerdoel heb ik ook vervuld vind ik. Al eerder genoemd Bap, Blip. en Tone.js. Net als socket.io moest ik dit in korte tijd begrijpen. Gelukkig waren deze wel een stuk makkelijker dan socket.io. En wie weet komt deze kennig ooit nog eens van pas wanneer ik weer ga werken met muziek in de browser.

Onderzoek

📝 Debrief

🚀 Design Rationale

Research

💡 Leerdoelen

🤖 Onderzoek Chatbots

Design Keuzes

🍼 Backstory TWY

🧮 Figma Schermen

Individuele PB

🌈 Product Biografie Inju

🍕 Product Biografie Merlijn

🦄 Product Biografie Sergio

Zelf reflectie

🤯 Reflectie Inju

🤯 Reflectie Merlijn

🤯 Reflectie Sergio

Clone this wiki locally