Efter React-kursen som jag berättade om i förra inlägget och mycket omskrivande av gammal kod så jag äntligen lagt till lite nytt i mitt hemmaprojekt Campuskost!
Nytt är en chatbot, påbörjad översättning till engelska och animationer. Först kommer här en kort videodemo och nedanför beskriver jag lite om varje del. Jag blev glatt överraskad över hur smidigt de olika sakerna gick att implementera, det är ju inte sällan något krånglar lite först 😅
- Chatbot: För detta använder jag react-chatbot-kit, ett bibliotek med React-komponenter och funktionalitet för att sätta upp logiken för en chatbot. Man får definera sin MessageParser, Config och ActionProvider som avgör bland annat vad botens initiala meddelande är, hur användarens meddelande ska analyseras och vad jag vill ska hända vid olika scenarion. Jag gillar hur flexibelt biblioteket verkar vara, t ex går det att anpassa hur chatrutan ska se ut och lägga till egna ”widgets” i configen, alltså små komponenter som läggas till i chatten. I videosnutten ovan är valet mellan ”Om Campuskost” och ”Ladda upp recept” en widget, en liten komponent med två knappar. Hittills har jag lagt till ett par fördefinerade meddelanden samt att den lyssnar efter nyckelord för t ex hälsningsfraser eller om man ber om tips på recept – tillsvidare är tipset alltid pannkakor.. 🥞😉 Jag tänker mig att det är möjligt att integrera maskininlärning med detta senare, alltså att just botens svar genereras av en AI-algoritm istället för hårdkodade. Det vore kul att testa!
- Animationer: Först testade jag Framer API men kände sedan att react-anim-kit
(från samma utvecklare som chatbot-kitet faktiskt) passade bättre att börja med för ett par enklare fadein-effekter. Jag gillar hur appen plötsligt känns mer levande! 🌟 Kanske att jag ger Framer API en till chans sen för andra typer av animationer. - Översättning: För översättning valde jag att använda react-i18next som jag använt motsvarande fast Angular-varianten i projekt på Gaia. Det blir inte en massa if-satser utan översättningen defineras i json-filer och sedan sätter man ett globalt state för vilket språk som är aktuellt. För att förenkla översättningen ytterligare så körde jag igång en testversion av verktyget BabelEdit (bild nedan) där man kan fylla i översättningen i ett gränssnitt och där man även får förslag på översättningar. Sedan har jag fått gå in i koden på alla ställen jag har hårdkodad text och ändra från t ex Välkommen till campuskost till ett funtionsanrop {translate(”startpage.welcome”)}
Ett annat sånt här roligt hack som jag tänkt på är att de bilder man lägger upp ska analyseras med en bildklassificerare för att upptäcka olämpligt innehåll automatiskt. Så håll utkik ifall det dyker upp – kanske dags att börja premenurera på bloggen?! 👀
