UTVECKLING AV CAMPUSKOST: Chatbot, Översättning & Animationer

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?! 👀 

React Bootcamp

React-plugg i soffan 👌

Efter tips har jag skapat mig ett konto på Scrimba, en plattform för interaktivt lärande av front-end. Hittills så är jag positivt överraskad och jag tycker verkligen om deras lektioner som är en kombination av kodeditor och videotutorial. Man kan alltså pausa videon och ändra koden!

Jag kodat med React (javascript-bibliotek) till och från i några år och var nu sugen på att fokusera ett tag på att plugga på olika koncept. När jag kodar på mitt hemmaprojekt Campuskost så händer det ofta att jag behöver få fram en lösning på ett specifikt problem och letar fram något som fungerar. Däremot kanske den lösningen inte blir särskilt sammanhängande med resten av koden och det blir snabbt stökigt (läs t ex mitt inlägg Utveckling av Campuskost: Clean code och användartester). Det känns därför kul att vända lite på det, att ta ett koncept (t ex använda React Context API) och använda det till något godtyckligt bara för att lära sig.

Det här känns som en kul grej nu när jag har mycket ledig tid på kvällar och helgar. Den här helgen hade jag som mål att komma fram 10% i kursen React Bootcamp – check! Jag är halvvägs igenom nu och ser redan fram emot att fortsätta koda egna projekt efter att ha lärt mig mer 😃 

Tips på Fler plattformar

.. som är smidiga för att snabbt komma igång med att öva front-end.

Vissa kan man koppla till att publicera sin hemsida/webbapp, åtminstone CodeSandbox och StackBlitz vilka också är de jag har använt mest. Lycka till 🚀

Så här ser det ut när man skapar en React-app i StackBlitz. Det går alltså att se resultatet alldeles intill där man kodar (eller öppna i helskärmsläge)

Till följd av utmaningen Elephant Edge

Här kommer en uppdatering kopplat till mitt förra blogginlägg, där jag berättade om att jag skickat in ett bidrag till utmaningen ElephantEdge. Mitt projekt blev utvalt till ett av de vinnande bidragen! 🐘 Hoff poff så har det också fått synas på LinkedIn, presenterats som ett ”featured project” på Hackster och i en artikel på Techcrunch (Can artificial intelligence give elephants a winning edge? ). Lite märkligt med så mycket lovord, som ”..With little resources and support, Sara built a full telemetry dashboard combined with ML algorithms..” medan det vore mer riktigt att beskriva det som ett proof of concept. Men ja det blir väl mer slagkraftiga artiklar så 😅. Väligt kul iallafall! Verkligen en påminnelse om att det kan vara värt att göra ett försök när det dyker upp något som verkar roligt (förutsatt att man har tid och energi), som jag nämnde i förra inlägget var jag ju nära att inte skicka in något alls när det var ett par dagar kvar.

Skärmdump från artikeln på TechCrunch

En annan följd från att jag var med i utmaningen är att jag blev kontaktad av Edge Impulse som var medarrangörer. De frågade om jag ville fortstätta mecka med hårdvara och deras verktyg för TinyML för att sedan skriva blogginlägg, göra tutorials etc. Och det ville jag! Så mer småprojekt i den här stilen blir det under 2021. 😃🧪 

Får snart en låda med hårdvara anpassat till maskininlärning på små enheter att pyssla med!

Ny på Hackster och med i utmaningen Elephant Edge

Jag har skapat ett konto på Hackster.io! 🤖 ”The world’s largest hardware and software developer network” enligt dem själva. Här kan den som vill beskriva sina hemmasnickrade lösningar och lära av andras. Jag har trillat in på sidan ett par gånger tidigare men nyligen släpptes en utmaning som hade med elefanter att göra och då kom jag till skott med att skapa ett konto. Uppgiften gick ut på att tänka sig att man utvecklar en IoT-lösning för ett litet sensorpaket som elefanter skulle kunna ha på sig. Det var ganska fritt var man fick göra och inga krav på att mecka ihop all hårdvara utan det gick bra att simulera hur lösningen kan fungera, däremot skulle både verktyget Edge Impulse och platformen IoTConnect användas. Några dagar innan deadline kändes det som att jag hade ett för spretigt och halvklart bidrag och funderade jag på om det ens värt att slutföra och skicka in. Men kul att försöka iallafall ju! Så jag satt uppe lite för sent de sista dagarna och sammanställde vad jag hade så gott det gick. Nu blir det spännande att invänta juryns besked om 2 veckor. Bara det att juryn, med t ex  Sarah Maston som startade Project 15 (se video nedan), kommer att läsa igenom vad jag gjort känns häftigt. Har insett att det är den typen av personer som jag blir starstruck av 😅🤩

Här kommer en länk till mitt bidrag: TinyML and IoT for Conservation Efforts

Virtuella tech-konferenser och Hackathon

Tur i oturen – i år när de flesta event blir virtuella har det blivit möjligt att ansluta till alla möjliga tech-konferenser. Ofta kan man se inspelade presentationer i efterhand men nu sköts även mingel och frågestunder online. Jag testade att anmäla mig till en one-on-one konsultation med en specialist inom IoT under Microsoft Ignite och det var så roligt! Lyxigt och motiverande att man som junoir utvecklare kan ta del av sådant bara sådär tycker jag. Här är några jag har kikat in på senaste tiden: Jamstack Conf Virtual (webb), Cloud Engineering Summit och Microsoft Ignite 2020.

Den senaste veckan har jag annars suttit lite för klistrad med Considition, ett återkommande Hackathon som brukar vara bra uppstryt! I år var uppgiften att skriva kod som styr hur en stad byggs upp och innebar många saker att ta hänsyn till. En viktig detalj om hur byggnaders temperatur hade jag missuppfattat tills det var ett par dagar kvar så det gick lite halvbra 😅 Men som vanligt roligt att försöka, samt lärorikt se lite ny kod! tips tips här finns det kod för API-anrop i flera programmeringsspråk att hämta hem. När jag ändå är igång och tipsar; i samband med detta började jag förresten lyssna på podcasten Utveckla. Gillar hur de ger en överblick av olika ämnen inom utveckling. Hej för ikväll! 

Utveckling av Campuskost: Clean code och användartester

Mitt kära evighetsprojekt! Ibland har det tagit veckor mellan att jag har suttit med det och i vissa perioder kan jag sitta någon timme varje kväll. Nu på slutet har det blivit mer och mer i och med att nya Campuskost är live vilket ju är superkul. Än så länge har den grundläggande funktionen fått komma upp: skapa konto, ladda upp och redigera recept, ändra profilinställningar, gilla recept och följa andra användare. Jag är supertaggad på att börja med det mer komplexa, som att kunna skapa receptlistor, följa andras listor, tipsa vänner om recept, sortera efter kategorier.. Mycket är påbörjat men tidigare i somras insåg jag att det kanske gick lite fort fram och att koden började bli rätt stökig. Jag läste boken Clean Code (skulle ju också vara bra inför arbetslivet hade man fått höra) och hade därefter en samling praktiska tips att jobba efter. Så nu ett tag har utseendet på Campuskost sett i princip likadant ut, men antalet kodrader har minskat drastiskt och enklare att arbeta med. 

I övigt har jag själv och personer jag tjatat på (hehe) skapat konto och letat brister och förslag, för att sedan uppdatera koden därefter. Det är en rolig process nu! 

Sen finns det verkligen många småsaker att trixa med för att skapa en komplett plattform. För att nämna några saker jag suttit med: 

  • Flytta domänen. Tidigare var Campuskost en hemsida på WordPress. Nu är nya versionen istället en React-app ihop med molntjänster från Firebase (för lagring av data och autentisering bland annat).
  • Att automatiskt uppdatera appen för användare utan att de själva ska behöva rensa cacheminnet. Eftersom Campuskost är en progressiv webbapp (webbsida som också fungerar som en mobilapp) så sker varken nedladdning eller uppdateringar via t ex App Store eller Google Play. Det har varit relevant att använda sig utav speciella JavaScript-program, så kallade service workers.
  • Att aktivera Google Analytics för att se hur många som är inne på sidan och vilken funktion som används. Tydligen svårt när de flesta använder någon slags ad-block i webbläsaren!? Också lite speciellt med SEO för en Single Page Application. Jag ska ge mig på att skapa en så kallad Sitemap.
  • Att se till att HTTPS används för att webbläsare ska anse Campuskost som en säker webbplats. Det här ordnade jag från Netlify där jag hostar sidan.
  • Få pushnotifikationer att fungera. Jag har precis börjat kika på Firebase Cloud Messaging då det vore kul att kunna skicka notifikationer. Efter att ha kollat på Netflix nya dokumentär The Social Dilemma blev jag dock lite.. velig. Notiser i lagom mängd kanske..
  • Med mera..! 

PS. Jag blir superglad för alla som vill hjälpa till att användartesta genom att skapa konto på https://campuskost.se och testa funktionerna. På förstasidan finns en länk till ett formulär för feedback. Tack på förhand!

Motiverande att skapa sin egen Engineering Wiki

Jag kan tänka mig att vi är många som gillar tanken på att ha sitt digitala liv välorganiserat. Som att ha alla foton sorterade i mappar och ha allt pluggrelaterat i bra ordning. Att alla kodprojekt skulle vara städade och väldokumenterade. Hehhh ja det vore ju en dröm. Jag påbörjar mitt organiserande titt som tätt men hinner inte bli klar innan det fylls på. Snart så! .. efter examen kanske 😄 

Hursom, när jag lyckas få (någorlunda) ordning så motiveras jag av det. Det är något med känslan av nystart som är så skön, att veta att från och med nu kommer jag kunna arbeta i en trivsam och fokuserad miljö. Just nu är jag taggad på att organisera mitt programmerande och allt som rör det! Speciellt så har jag inte haft något bra sätt att spara artiklar, tutorials, github-repos eller liknande. Nu har jag fått tips (♥!) om att använda Notion och gillar det verkligen. Kortfattat är det ett slags verktyg för anteckningar och dokumentation – med många smarta funktioner. Det går t ex att bädda in videoklipp från Youtube, Figma-skisser m.m. Jag tänker att det blir en perfekt vertyg att samla alla de kodsnuttar, länkar och annat som jag använder när jag kodar. Hittills har jag påbörjat dokumentation för det som jag vill ha lättillgängligt när jag sysslar med webbprogrammering.

Skärmdump av min påbörjade Notion för programmeringsanteckningar

Till jämförelse så har jag tidigare sparat orimligt många bokmärken (se bild till höger..). Jag gjorde en snabb översikt nu och jag har tydligen mellan 200-300 kodrelaterade bokmärken.. Det blir alltså snarare att jag på nytt söker reda på det jag letar efter. Alternativt att jag letar i mina egna programmeringsprojekt, typ ”i denna fil borde jag ha ett API-anrop där jag uppdaterar ett dokument i Firebase”. Från och med nu kommer jag istället kunna gå in i min egna koddokumentation och hitta direkt. Pepp!

Bara av anledningen att det ska bli kul att lägga in saker jag lär mig i min Wiki blir jag sugen på att testa fler programmeringsspråk och verkyg, nördig som jag är. 🙂 Det kanske är något för dig med!?

Inne och nosar på hackathons

Först och främst, som en kortfattad beskrivning så är ett hackathon ett event där programmerare träffas och kodar på projekt under endast en eller ett par dagar. Projekt som står ut lite extra inom olika kategorier brukar belönas med ett pris, så det ses ofta som en tävling. Värt att nämna är också det kan handla om att skapa idéer och designa prototyper, så det behöver inte innebära kod för alla. Hursomhelst, jag gillar verkligen konceptet med hackathons. Det är så häftigt hur mycket man kan göra på kort tid om man bara är sådär galet engagerad och lösningsfokuserad. 

Ett antal gånger har jag gått in helhjärtat i hackathons, framförallt när vi var iväg på East Sweden Hack och faktiskt tog hem ett pris, eller mitt sista-minuten-hack på Stanford Tree Hacks.
Andra gånger har jag nöjd mig med att vara inne och nosa på eventen. Under ett hackathon serveras det nämligen en massa spännande kunskaper och resurser att ta del av och det kan vara helt ok att anmäla sig just för att lära sig mer i en så stöttande miljö. 

De två senaste åren har jag också varit anmäld till The Considition, ett längre hackathon online som hålls årligen av företaget Consid. Ena gången skulle man koda en bot till ett 2D-spel som skulle ta sig igenom ett förenklat triathlon, och andra gången träna en CNN-model som skulle segmentera drönarbilder. Otajmat nog så var den första utmaningen innan jag läst kursen där jag och Emma gjorde detta projekt med just en bot i ett 2D-spel, och den andra utmaningen innan mitt nuvarande exjobb med mycket CNN-modeller. Det gick inte topptopp med andra ord! Trots att jag inte skickat in ett slutgiltigt bidrag så har det känts värt att vara anmäld och testa lite. Jag tror att en stor anledning är just att få tillgång till en uppsättning kod att lära sig av. 

Gemensamt för det är kodtävlingarna är att man blir inbjuden till något slags chattforum, nästan alltid Slack, och där kan man få hjälp och inspiration av arrangörerna, sponsorer och andra deltagare. Just nu sitter jag och skummar igenom alla idéer som publicerats i Slack för Hack The Crisis (Sveriges officiella covid-19 hackathon). Själv har jag varit så trött i veckan så jag tror inte en hel helg framför datorn är vad jag behöver. Däremot ska jag helt klart kika igenom de verktyg som nämns i dokumentet ”The Ultimate Hackathon Tools Bible”, och öppna dataset samt API:et som det tipsas om. I övrigt gällande tekniska lösningar för covid-19 har jag nu i dagarna lyssnat igenom den konferens om AI-lösningsar i koppling till pandemin som Stanford höll online.

Mitt i allt elände är det ändå fint att så mycket blir tillgängligt för alla. Min pojkvän Samuel har även kontinuerligt skickat länkar till olika gratiskurser man kan ta nu (t ex denna) och som resultat av det har jag påbörjat kursen Practical Ethical Hacking på Udemy. 

Summa summarum: det finns så mycket att ta del av, utnyttja det!! 😃

Till vänster: Meddelande från Telia som bidrar med öppet dataset för Hack The Crisis. Ovan: vänner på Hackathon för ett par år sedan!

..