In de product biografie ga ik vertellen hoe het proces per week verliep.

In de eerste week kregen we de case en een introductie over het project. Voordat ik en Tristan kennis hadden gemaakt met de opdracht gever hadden we al een voor onderzoek gedaan. We hebben een moodboards gemaakt voor kindvriendelijke interfaces en chatbots.

Dinsdag hadden we kennis gemaakt met de opdrachtgevers, Fatma & Leonnore. Het was een leuke kennismaking en het zijn hele aardige mensen. Ik en Tristan lieten onze bevindingen en vooronderzoek zien en ze waren onder de indruk. Vervolgens ging ik met Tristan aan de slag met designs maken, meer onderzoek doen en een opzet maken in HTML/CSS

In de tweede week kregen we een training van OBI4WAN. Zij hebben een chatbot engine en zij gaven ons een training om die te kunnen gebruiken voor het project. Na de training wist ik gelijk al dat we dit niet konden gebruiken. De interface van deze chatbot is niet kindvriendelijk, het is vol met tekst hierdoor moeten kinderen veel lezen en dat wilden wij absoluut niet. Ook de design van de chatbot van OBI4WAN was bijna onmogelijk om aan te passen. Dit was een tegenslag voor ons. Vervolgens hebben we met z'n alle overlegd en hebben we besloten om het niet te gebruiken en om onze eigen chatbot zelf te programmeren. We besloten om een chatbot interface met spraak, geluid en knoppen te maken. Dat vonden we veel kindvriendelijker dan een interface met veel tekst. In deze week was ik begonnen met het programmeren van de chatbot, Tristan was vooral bezig met de designs en de overzichtspagina.

In deze week heb ik veel geprogrammeerd. Ik heb de oba API gebruikt om te kunnen zoeken naar boeken en films. Ik heb eerst ervoor gezorgd dat je eerst op de leeuw klikt, en dat je dan naar een nieuwe pagina wordt verwezen. Op die pagina hoorde je een Google translate stemmetje met 'waar ben je opzoek naar?'. De gebruiker ziet dan 2 knoppen, boeken en films plaatjes. Als je op 1 van de knoppen klikt, pak ik die value van die knop, bijvoorbeeld de gebruiker klikte op de boek knop en die knop had de value books. Vervolgens hoort de gebruiker 'Vertel me wat je leuk vindt', en dan moet de gebruiker iets zeggen bijvoorbeeld 'kikker'. Met Web Speech API heb ik ervoor gezorgd dat als de gebruiker wat zegt dat het een string wordt die ik dan net als de value van de button mee pak. Als de spraak gesopt is activeer ik een andere functie waarbij ik de button value, bijvoorbeeld books, en de tekst die ingesproken is, bijvoorbeeld kikker in de API call doe. Dan is keuze = books en uitkomst = kikker

Bijvoorbeeld:

${ books }&authorization=${key}&refine=true&facet=type(${ kikker })&output=json

Dit proces lieten we ook aan de opdrachtgevers zien en zij vonden dit heel goed.

In week 4 heb ik ook veel geprogrammeerd aan de chatbot. Ik heb ervoor gezorgd dat er nieuwe HTML elementen worden aangemaakt aan de hand van de resultaten van de API call. Die worden dan in de zelfde pagina weergegeven. Na dat ik de results kon displayen heb alles weer goed na gekeken en heb ik veel dingen verbeterd. Bijvoorbeeld dat als je eerst op een knop klikt, dat je dan "Waar ben je naar opzoek hoort", en als dat geluid voorbij is dat je dan pas kan inspreken. Dat heb ik gedaan met een timeout functie. Vervolgens als de gebruiker ingesproken heeft en gestopt is met praten wordt de API call uitgevoerd. Daarna als er geen results zijn heb ik een if else statement gemaakt, dus dan hebben we een empty state en een final state.

Aan het einde van week 5 zag de app er zo uit. We hadden ook een presentatie gemaakt en dit hebben we aan de OBA laten zien en die waren heel erg blij met het eind resultaat.