Reflectie Muhammet - TristanVarewijck/oba-junior-chatbot GitHub Wiki
De vakken die ik heb gekregen tijdens de minor heb ik allemaal gecombineerd in de Meesterproef. In dit artikel ga ik per vak vertellen wat ik geleerd heb en wat ik per vak gebruikt heb tijdens de Meesterproef.
In dit vak heb ik veel gespeeld en geleerd over de front-end technologieën. Ik heb bijvoorbeeld geleerd hoe ik een API kan fetchen en de data kan displayen. Verder heb ik geëxperimenteerd met verschillende JS technieken, zoals timeouts, classlists toggelen, modules aanmaken, hash routie etc.
Voor de meesterproef heb ik aan de frontend kant een API gefecht. Als de gebruiker tegen de chatbot praat, dan zet ik de spraak om in een string. Die string doe ik dan in de API call query en daarmee fetch ik de API. De data die ik dan krijg maak ik nieuwe HTML elementen mee. Dat had ik ook gemaakt bij mijn WAFS project, maar dan zonder de Web Speech API.
In dit vak heb ik veel gespeeld, geanimeerd en geëxperimenteerd met CSS. Ik heb veel nieuwe dingen geleerd zoals custom properties, pseudo elementen, keyframes etc.
Voor de CSS heb ik de pseude elementen gebruikt die ik geleerd heb bij het vak CSS to the Rescue. Ook heb ik keyframes tools gebruikt voor micro animaties bij de chatbot app.
In dit vak heb ik veel back-end geleerd. Ik heb een Node Express server opgezet. Ik heb mijn WAFS project omgezet in een Node Express server. Ik heb geleerd om een service worker te maken, om paginas te cachen, manifest aanmaken, performances te verbeteren etc. Het belangrijkste wat ik geleerd heb is de service worker om paginas te cachen en lijst met optimalisaties om de performances van de app te verbeteren. Want dat wist ik allemaal niet voordat ik met deze minor begon. Ik heb bijvoorbeeld de index pagina en de css file gecacht, client side JavaScript/CSS/HTML geminified, "defer" toegevoeged op minder belangijke script bestanden en externe JS bestanden, compression gebruikt etc. Ik vond dit 1 van de meest leerzame vakken.
De chatbot app is gemaakt in Node en Express, hierdoor wist ik hoe ik routes moest toevoegen bijvoorbeeld omdat ik dat bij PWA geleerd had. Met Tristan heb ik ook een service worker gemaakt, en de express server opgezet.
In dit vak heb ik geleerd hoe ik een app kan bouwen dat goed ondersteund moet worden door veel verschillende browsers en devices. De bedoeling van de app die ik gemaakt heb voor dit vak is dat de app op zo veel mogelijk browsers en devices het op zijn beste manier functioneert. Bijvoorbeeld als een browser JavaScript of een aantal CSS properties niet ondersteunt, dat de app nog steeds moet functioneren. Tijdens dit project hebben we veel aandacht aan Progressive Enhancement besteed. In dit geval heb ik eerst de app met pure HTML gebouwd op een Express server. Na dat alles functioneerde heb ik daarna CSS toegevoegd. Ik heb bijvoorbeeld geleerd om de app op verschillende browsers en devices te testen en vervolgens een test rapport van te maken. De devices en browsers heb ik met elkaar vergeleken en heb ik de app gewijzigd zodat het overal op functioneert. Een simpele voorbeeld, bijvoorbeeld de CSS propertie background-color wordt niet op alle browsers ondersteund, maar de css propertie background: weer wel, dus dan had ik background: gebruikt als propertie. Een ander goed punt want ik geleerd heb is het element. Als JS is uitgeschakeld dan wordt de geactiveerd. In de heb ik een link naar een aparte CSS file toegevoegd en daarin heb ik dan elementen een display none gegeven. Als JS was ingeschakeld was het de bedoeling dat als je op die elementen die display none hebben gekregen dat je daarop moest klikken om een interactie te ervaren.
Ik heb in de CSS properties gebruikt die ondersteund wordt door de meeste browsers, bijvoorbeeld background: ipv background-color:. Ook heb ik semantische HTML gemaakt, als CSS en JS uitgeschakeld zijn of niet werken, dan functioneert de app ook met pure HTML. Ook is er een noscript tag toegevoegd, als JS staat uitgeschakeld krijgen de libraries die we voor de carousels gebruiken een andere css propertie.
Ik vond dit vak als een uitbreiding voor het vak Progressive Web Apps. Ik heb mijn app die ik voor Progressive Web Apps had gebouwd verder uitgebreid. Ik heb geleerd om met socket.io real time interacties te maken. Ik heb bijvoorbeeld chatrooms aangemaakt met de gegevens die ik al had. Bijvoorbeeld een chatroom met de naam Bitcoin. Vervolgens als je de chatroom joint dan kan je real time chatten met andere mensen. Verder heb ik geleerd wat bijvoorbeeld datasets, een data cycle diagram is etc.
RTW is bijna niet gebruikt, omdat dit vak niet goed terug kwam in onze case.
In dit vak heb ik geleerd om een prototype met een echt persoon 3x te testen. In dit geval had mijn test persoon een beperking, ze is doof. Ik heb een app gemaakt specifiek voor haar zodat zij met haar beperking de app net zo goed kan ervaren zoals andere mensen. Bijvoorbeeld een visuele podcast met tekst, dik gedrukte rode font als iemand schreeuwt bijvoorbeeld. Na elke test ronde had ik geleerd om de app te verbeteren hierdoor werd het gewenste eind resultaat behaald.
Ik heb geanimeerd met de chatbots. Als easter egg heb ik ervoor gezorgd dat als je op een chatbot klikt tijdens het proces om een boek te vinden dat de img src van de chatbot veranderd voor een x aantal seconden in een GIF bestand. Je ziet dan hetzelfde chatbot die aan het lachen is met een audio bestand die ook afspeelt. Je hoort en ziet de chatbot dan lachen, dat vinden de kinderen leuk dat bleek uit mijn test ronde bij de Oba. Kinderen vinden easter eggs heel leuk. Ook is gebleken dat kinderen snel door interfaces surfen, ze willen niet veel lezen en na mijn test ronde heb ik met Tristan besloten om een chatbot interface te maken met zo min mogelijk tekst.