Product Biografie Tristan - TristanVarewijck/oba-junior-chatbot GitHub Wiki

In de product biografie zal ik per week ons process beschrijven, wat we hebben en het uitzicht op volgende week.

Sprint 1

Date: Maandag 23 2022 - woensdag 25 mei 2022 Code: GitHub

Week 1 was uiteraard de introductie van De meesterproef we hadden net de cases ontvangen en kwamen erachter dat wij de chatbot van de OBA hebben gekregen, deze case zat niet tussen mijn keuze, alsnog leek het me wel een leuke opdracht.

Maandag | was de kick-off van De meesterproef waarin de opdrachten werden besproken en de verwachtingen van de studenten ik vond het op dit moment best spannend, omdat je jezelf nu gaat bewijzen met wat je geleerd hebt in de andere vakken, Omdat we op dit punt nog niet de opdrachgever hebben ontmoet was het moeilijk om al echt te beginnen aan een concept, daarom hebben we besloten om alvast wat vooronderzoek te doen we hebben gekeken naar use-cases van huidige chatbots en we hebben gekeken naar ontwerpkeuzes voor kinderlijke interfaces. Hieronder zie je twee moodboards van dat onderzoek als je hier meer van wilt zien bezoek dan even de: Briefing

Moodboard van chatbots in de huidige tijd:

Moodboard van design trends voor kids:

Naast het onderzoek hebben we ook een "Debrief" gemaakt, zodat we ons zicht op de odpracht morgen met de opdrachtgevers bij de OBA kunnen bespreken.

Dinsdag | hebben we de opdrachtgevers ontmoet dit zijn Fatma & Leonnore ze zijn super aardig en enthousiast we hebben met hun de debrief doorgenomen en we zaten al gauw op 1 lijn dus dat was super nice. We hebben ook al wat van onze research laten zien dat vonden ze leuk, omdat ze zagen dat we dit initiatief al hadden genomen.

Na de meeting met de OBA besloten we om in de Bieb te blijven zitten en alvast een eerste concept te bedenken, ook zijn we opzoek gegaan naar de API en heb ik de docs daarvan onderzocht.

Woensdag | Ben ik bezig geweest met de eerste pagina van het concept we hebben een design gemaakt en zijn al bezig geweest met wat HTML en CSS. Wij vonden het handig om al snel met iets te beginnen zodat we de week daarop teminste al iets hadden om te laten zien. Wat ik Woensdag vooral heb gedaan is data opgehaald uit de API. Dit was niet heel makkelijk aangezien de API niet heel goed is gemaakt er zijn veel lege tabellen en in consistente data. Ik heb gekeken welke data we nodig hebben en gekeken wat de beste manier is op deze data te verkijgen voor ons concept. (waar is de data nodig?, hoe wil ik dit laten zien?, welke data heb ik nodig?, Kan dit allemaal in 1 call?, Moet er veel schoon gemaakt worden?)

Eerste design:

De eerste week was een kleine week maar toch hebben we best veel voor elkaar gekregen. volgende week willen we graag het eerste design laten zien en onze visie voor het project bespreken. Ook hebben we volgende week de de cursus over de Chatbot daar kijken we ook naar uit, omdat we vanaf dat moment echt kunnen beginnen met het bouwen van de chatbot.

Sprint 2

Date: Maandag 30 mei 2022 - vrijdag 3 juni 2022 Code: GitHub

Naar week 2 keek ik erg uit, omdat we deze week de chatbot training krijgen en het maken van een chatbot staat al een tijdje op mijn lijstje om te maken. Ook willen we deze week het concept laten zien en zijn we vooral bezig geweest met het prototype.

Maandag ben ik verder gegaan met het ophalen van data, de data wil ik op een bepaalde manier managen, omdat de data die ik nu puur van de API krijg niet goed is. Er missen bijvoorbeeld een aantal keys en sommige hebben geen value door deze rede krijg ik errors in mijn code en crashed mijn app. Daarnaast is het moeilijk om alle boeken op te vragen en daar binnen te filteren daarom wil ik graag meerdere API calls tegelijk doen, zodat ik binnen de API niet hoeft te filteren. Ik heb dit gedaan doormiddel van Axios ik heb onderzoek gedaan en gezien dat je met Axios een speciale functie hebt waarmee je meerdere API calls tegelijk op het zelfde moment kan maken. Nu ik de data heb wil ik deze data "cleanen" dit heb ik al eerder gedaan met een ander project alleen, omdat deze API anders is moet ik natuurlijk andere functies schrijven, dus daar ga ik deze week ook mee bezig.

Op deze manier heb ik met Axios de data opgehaald; Zoals je kunt zien heb ik meerdere end-points gebruikt en deze allemaal tegelijkertijd "resolved" je ziet ook al de "dataParser" functie deze functie is nog niet helemaal geschreven maar dit is wel hoe ik het wil doen.

let winter = `${process.env.DATA_Q}%20winter&authorization=${process.env.DATA_AUTH}&page=1&refine=true&output=json`;
let spannend = `${process.env.DATA_Q}%20spannend&authorization=${process.env.DATA_AUTH}&page=1&refine=true&output=json`;
let monsters = `${process.env.DATA_Q}%20monsters&authorization=${process.env.DATA_AUTH}&page=1&refine=true&output=json`;
let grappig = `${process.env.DATA_Q}%20grappig&authorization=${process.env.DATA_AUTH}&page=1&refine=true&output=json`;
let liefde = `${process.env.DATA_Q}%20liefde&authorization=${process.env.DATA_AUTH}&page=1&refine=true&output=json`;

let requestOne = axios.get(winter);
let requestTwo = axios.get(spannend);
let requestThree = axios.get(monsters);
let requestFour = axios.get(grappig);
let requestFive = axios.get(liefde);

router.get("/", async function (req, res, next) {
  axios
    .all([requestOne, requestTwo, requestThree, requestFour, requestFive])
    .then(
      axios.spread((...responses) => {
        const responseOne = dataParser(responses[0].data.results);
        const responseTwo = dataParser(responses[1].data.results);
        const responseThree = dataParser(responses[2].data.results);
        const responseFour = dataParser(responses[3].data.results);
        const responseFive = dataParser(responses[4].data.results);

        res.render("index", {
          responseOne: responseOne,
          responseTwo: responseTwo,
          responseThree: responseThree,
          responseFour: responseFour,
          responseFive: responseFive,
        });
      })
    );
});

Op Dinsdag heb ik de data even laten liggen en ben ik bezig geweest met de overview pagina maken, zodat we de dag erop een prototype hebben om te laten zien, De overview pagina bestaat uit Caroussels met in iedere caroussel een ander onderwerp boeken. De caroussels heb ik gemaakt met een library genaamd swiper.js super handig!

Daarnaast ben ik bezig geweest met alle assets verzamelen (shapes, images, fonts, kleuren) en ben ik vooral bezig geweest met HTML en CSS voor een simpele prototype waarin je het design werkend kan zien.

Het duurde toch wel even om dit te maken, omdat we ook nog bezig waren met het conceptualiseren en ik telkens twijfelde of het wel een goed idee was om hier mee te beginnen, uiteindelijk was het die Dinsdag nog af en hadden we een prototype om te laten zien!

Woensdag | was de eerste keer waarin we ons concept idee konden laten zien en konden laten zien wat we tot nu toe hebben gedaan. Toen we aankwamen bij de OBA was dit het eerste wat we hebben gedaan. Alleen Leonnore was er deze keer maar dat vonden we niet heel erg.

De eerste reactie van Leonnore was dat ze het heel grappig vond hoe de caroussels automatische bewegen ook vond ze het idee van een Mascotte of een vriendje voor het kind een goed idee ze kon wel inzien dat dit leuk voor kinderen kan zijn. Wel had Leonnore wat feedback over het Design ze wilde namelijk graag de kleuren van het OBA-Junior logo terug zien en ze wilde graag iets van de chatbot zien.

Het redesign was duidelijk, alleen moest ik wel vermelden dat we de chatbot training vanmiddag hebben en dat we volgende week wat kunnen laten zien.

Na het feedback gesprek zijn we doorgegaan naar de Chatbot training, we hebben een training gehad van OBI4WAN zij zijn een bedrijf die een chatbot aanbieden waarin je zelf dialogen kan maken. Op eerste aanzien dachten we dat dit wel handig zou zijn dus waren ook erg enthousiast en bereid om hier gelijk aan te werken.

Donderdag | is Muhammet begonnen met het maken van de chatbot, we hadden hiervoor eerst een design gemaakt van hoe we denken dat kinderen dit zouden willen zien. Helaas kwam Muhammet erachter dat de chatbot voor ob4wan niet goed aansluit op onze use-case, omdat je de styling helemaal niet aanpassen. "het veel configuratie werk en ik kan hier eigenlijk helemaal niks mee" ~ Muhammet. Dit was natuurlijk flink balen want we hebben hier wel bijna een hele dag aan besteed en wisten niet zo goed wat we op dit moment moesten gaan doen...

Vrijdag | Vrijdag ben ik bezig geweest met het maken van een redesign, dit was namelijk feedback van Leonnore en het leek me wel slim om bij het volgende keer testen het nieuwe design te kunnen laten zien. Na het redesignen ben ik bezig geweest om het uiteraard te implemnteren in de applicatie dit was allemaal vrij snel gebeurt dus besloot ik alvast een beginnetje te maken met de detail pagina en de chatbot implementatie.

Redesign overview pagina:

Design Detail pagina:

Volgende week wil ik alles wat met data te maken heeft af hebben en wil ik de detail-pagina en de eerste versie van de chatbot laten zien.

Sprint 3

Date: Dinsdag 7 juni 2022 - vrijdag 10 juni 2022 Code: GitHub

Week 3 was een vrij korte week, omdat we Maandag vrij waren, er was veel werk aan de winkel door de teleurstelling met de chatbot van OB4WAN.

Dinsdag | waren we naar langs school geweest om Joost te vertellen over de chatbot die we gekregen hebben en waren eigenlijk best "down" omdat we namelijk dachten dat we een aardige achterstand hierdoor hebben opgelopen, omdat we deze week namelijk wilde testen met kinderen maar, omdat we nu nog geen chatbot hebben gaat dat dus niet. Joost verteld dat dit bij het process hoorde en dat hij helemaal geen achterstand zien maar dat we juist goed opweg zijn doordat we al bezig waren geweest met een oplossing voor deze chatbot. We willen namelijk zelf een chatbot nabootsen die beter bij de case past. Hierover had Muhammet de leiding genomen.

Ik was dinsdag bezig geweest met het data schoon maken dit was me goed gelukt, ik heb er namelijk voor gezorgd dat de functie alle lege keys vervangd en dat de data er zo uit ziet zoals ik het wil laten zien in de applicatie. Vervolgens stuurt deze functie een object terug met alle nodige data.

const dataParser = (data) => {
  const cleanedData = data.map((result) => {
    const myKeys = [
      "summaries",
      "year",
      "titles",
      "authors",
      "id",
      "coverimages",
      "genres",
      "detailLink",
    ];

    myKeys.forEach((key) => {
      key in result ? result[key] : (result[key] = ["-"]);
    });

    return {
      title: result.titles[0],
      summary: result.summaries[0],
      year: result.year,
      img: result.coverimages[1],
      id: result.id,
      authors: addSpaces(result.authors.toString()),
      genres: addSpaces(result.genres.toString()),
      link: result.detailLink,
    };
  });
  return cleanedData;
};

function addSpaces(authors) {
  const fixedSpacing = authors.replaceAll(",", ", ");
  return fixedSpacing;
}

Woensdag | zijn we weer langs de OBA geweest dit keer was Mark er ook om het prototype te bekijken, op dit moment was ik best wel zenuwachtig, omdat ik dacht dat ik een achterstand had opgelopen en omdat we de chatbot hebben nagebootst. Verrassend genoeg vonden Leonnore en Mark het heel leuk wat we gemaakt hebben, ze vonden het redesign goed en vonden ze het cool dat elk boek zijn eigen pagina heeft. Zelf hadden ook nog wat animaties toegevoegd die ze ook heel cool vonden.

De feedback die we hebben gekregen ging over de caracthers, Mark wilt graag meerdere caracthers zien, zodat het kind een soort van keuze heeft ook vind Mark het een goed idee om andere stemmen te gebruiken in plaats van de standaard robot stemmen van Google dit was zeer logische. Maar over het algemeen vonden Mark en Leonnore het heel goed gaan en dit gaf veel motivatie voor de volgende week

Op Woensdag ben ik bezig geweest met het maken van Animaties met GSAP en hebben we gekeken of we misschien een soort van on-boarding kunnen maken waarin het kind een carachter kan kiezen die het kind help over het hele process.

Donderdag | Ben ik bezig geweest met het maken van de detailpagina eerst natuurlijk HTML en CSS en vervolgens de detailpagina op de server dynamische laten renderen. Dit hebben we gedaan door de detailpagina url het ID van een boek te geven wanneer je dan op een boek klikt dan wordt er op de detailpagina gezocht naar het boek waarop is geklikt. We zoeken dan op ID die op dat moment in URL staat. Hieronder zie je de Detailpagina en hoe dit op de server wordt geregeld.

Detail pagina:

Detail pagina server-code:

router.get("/boek/:id", async function (req, res, next) {
  const { id } = req.params;
  await axios({
    method: "GET",
    url: `${process.env.DATA_ID}${id}&authorization=${process.env.DATA_AUTH}&refine=true&output=json`,
  })
    .then((res) => dataParser(res.data.results))
    .then((cleanData) => {
      res.render("detail", { item: cleanData });
    })
    .catch((err) => {
      console.log(err);
    });
});

Sprint 4

Date: Maandag 13 juni 2022 - vrijdag 17 juni 2022 Code: GitHub

In week 4 waren Muhammet en ik beide erg positief over het project we hadden het gevoel dat we echt wel iets hebben neergezet wat de OBA zou kunnen gebruiken en wat de kinderen leuk zouden vinden. We hebben deze week onder andere getest met kinderen en een prototype aan de werkgevers laten zien met een totaal concept (dus ook met de chatbot)

Maandag | had ik wat problemen met de API de data wilde niet meer verschijnen dus besloot dat eerst op te lossen voordat ik verder ging met andere taken, het bleek uiteindelijk te komen door een "CORS" issue, om dit op te lossen heb ik een extensie gedownload van Google waardoor het nu wel werkt (als je de extensie aan hebt staan)

Na dit opgelost te hebben, hadden we nog een idee om een soort onboarding te maken (op advies van Mark) waar kinderen hun caracther kunnen kiezen waarmee ze de applicatie doorlopen. We hebben 3 caracthers uit gekozen en geanimeerd, Je kan nu dus een caracther kiezen en dit carachter is degene waar het kind tegen praat. Super leuk!

De Carachters

Ook heb ik vandaag de feedback van Mark verwerkt, hij zei namelijk dat het stem geluid te robot achtig is ik heb een kijkje genomen in de API van de voicsynthesis van JavaScript en je hebt dus een optie of stemmen te veranderen ik heb de stem nu veranderd naar een Belgische stem :)

Dinsdag | Was niet een heel productieve dag voor mij ik was namelijk ziek, wel heb ik nog wat research gedaan over localstorage, dit omdat als een kind een carachter had gekozen de carchter op andere pagina weer weg is. Dit is natuurlijk niet de bedoeling dus ben ik opzoek naar een oplossing, zodat de carachter opgeslagen blijft tot dat het kind een andere kiest.

Woensdag | was ik nog steeds wat ziekjes, maar ben ik wel naar de OBA gegaan voor het voortgangsgesprek met de werkgevers. We het prototype weer laten zien en Mark en Leonnore vonden het beide top ze moesten er beide ook om lachen maar wel op een positieve manier. We hebben wel nog wat feedback gekregen; Leonnore vond namelijk dat het wel leuk zou zijn als het carachter ook iets doen als er geen interactie mee is een soort "zero-state" eigenlijk. En Mark had nog feedback op de stem hij vind het toch nog te robot achtig dus hier moeten we zeker nog iets op verzinnen...

Op woensdag zijn we dus meteen aan de slag geweest met de "zero-state" we hebben bedacht dat als een kind erover heen hovered of clicked dat hij dat iets doet en als het kind te lang wacht hij dan bijvoorbeeld inslaap valt. Hieronder zie je een voorbeeld van als hij in slaap valt:

Chatbot default state

Chatbot aan het slapen

Donderdag | Wilde we eigenlijk het product af hebben zodat we vrijdag nog tijd hadden voor de puntjes op de "i", er moesten nog een aantal dingen gebeuren in de code het zag er nog best rommelig uit dus dit heb ik opgeschoont, ook moesten er nog een aantal animaties gemaakt worden op de carachters dus hebben we een stapje gedaan naar Illustrator en gifjes gemaakt. Ook moest er een oplossing komen voor het stemgeluid dus hebben we iemand op Fiver ingehuurd die voor ons stemmetjes kan inspreken dit was super nice en ook best grappig.

Vrijdag | De applicatie is eigenlijk al zo goed als af hier, het was vandaag een kwestie van het echt afmaken: stemmetjes erin zetten, front-end tweaks, code tweaks en willen we nog een servie-worker erin zetten die een offline pagina laat zien wanneer er geen internet beschikbaar is.

Sprint 5

Date: Maandag 20 juni 2022 - vrijdag 24 juni 2022 Code: GitHub

In de laatste week van De meesterproef was het best relaxed de applicatie was zo goed als af en we moesten alleen nog de service-worker goed aan de praat krijgen want daar hebben we wat problemen mee. Ook moesten we de stemmetjes die we hebben aangeschaft van fiver er ook nog inzetten want daar waren we vorige week nog niet aan toe gekomen.

Daarnaast moest er nog super veel documentatie geschreven worden Muhammet en ik haddend dat namelijk een beetje uitgesteld tot nu daarom wilde we vorige week ook eigenlijk al helemaal klaar zijn zodat we daar deze week genoeg tijd voor hadden.

Maandag | Heb ik nog even geknoeid met de Service-Worker dit is nog niet helemaal gelukt op de manier hoe ik dit wilde maar ik heb wel besloten op te gaan beginnen met de documentatie, omdat dit ook een erg belangrijk deel is van dit vak, vandaag ben ik begonnen met de persoonlijke reflectie, daarnaast heb ik ook een presentatie gemaakt voor de introductie op Donderdag wanneer wij het prototype moeten laten zien.

Presentatie slides

Dinsdag | Ben ik begonnen met de Design Rationale, echt veel meer werk dan ik dacht :(

Woensdag | Ik heb vandaag mijn Design Rationale afgekregen, Daarnaast hebben Muhammet en ik ook nog samen de applicatie nog even doorgelopen en kleine dingetje gefixed voor de presentatie voor morgen. Hoe we het morgen willen doen is eerst een korte introductie geven van wat we hebben gedaan, "probleem" -> "oplossing" & "het concept" en vervolgens het prototype laten zien en dat de opdrachtgever er zelf ook nog even mee kan spelen.

Donderdag |

Vrijdag |