Internship blog: Twintag 2024

Week 1:

Mijn eerste week verliep uitstekend. Ik heb het team ontmoet en ze hebben me hartelijk verwelkomd. In de eerste paar dagen heb ik kennisgemaakt met hun backend. Ze hebben me uitgelegd hoe we projecten opzetten en hoe we kunnen communiceren met hun databases. Het is een complex systeem, maar het voorkomt ook dat frontend-ontwikkelaars per ongeluk databases laten vallen.

Elke dag leer ik nieuwe dingen, zoals het werken met package.json. Ik dacht vroeger dat het slechts een bestand was om pakketten bij te houden, maar het blijkt veel meer te zijn. Ook ontdek ik voortdurend nieuwe repositories en werk ik met verschillende pakketten. Vaak krijg ik de opdracht om een nieuwe functie van een pakket te implementeren in het adminpaneel. Dit heeft me geleerd om documentatie grondig te lezen, iets waar ik voorheen niet goed genoeg in was.

Gedurende de week kreeg ik hier en daar taken toegewezen, zodat Twintag kon testen wat ik al kon. Tegen het einde van de week kreeg ik plotseling de opdracht om samen met mijn collega een demo voor te bereiden voor een nieuwe klant tegen volgende week.

Nu wordt mijn stage heel interessant.

Week 2:

Mijn tweede week verliep veel beter. In plaats van aan willekeurige taken te werken, kon ik me volledig concentreren op de demo voor de nieuwe klant.

We gebruikten een design document dat alles uitlegde wat de klant verwacht van ons, inclusief een ruwe schets van het ontwerp. We kregen veel meer vrijheid om zelf te ontwerpen dan ik had verwacht. Ze gaven ons de kleuren van hun bedrijf en welke fonts we moesten gebruiken maar voor de rest hebben wij alles gedesigned. Ik kon Twintag's backend gebruiken in een echte situatie, en elke keer dat ik dit deed, werd ik er beter in.

Ik werk hier niet alleen aan. Samen met een andere front-end ontwikkelaar en onder begeleiding van onze manager, zorgt ervoor dat alles goed verloopt en dat onze vragen aan de klant wordt doorgegeven.

Er was een Google Meeting met de klant waar ik aan mocht deelnemen. We gaven een korte introductie en demo over wat ze konden verwachten. Ze hadden de mogelijkheid om vragen te stellen en aan te geven wat ze niet goed vonden, daarna konden wij onze vragen stellen over zaken die niet duidelijk waren in de ontwerpdocumenten.

Week 3:

De derde week verliep erg goed. Mijn focus lag voornamelijk op het koppelen van gegevens aan specifieke producten. Ik moest grondig nadenken over de aanpak, omdat het niet zo eenvoudig was vanwege het ontbreken van data. Ik moest een extra tabel maken om twee verschillende tabellen met elkaar te verbinden, en in het begin zag het er behoorlijk ruw uit.

Het zal ook niet eenvoudig zijn voor de klanten om dit systeem te gebruiken, dus ik denk dat mijn meer ervaren collega's een paar aanpassingen gaan moeten maken. Naast het werken met gegevens heb ik ook meer UI-werk gedaan en veel vertalingen gemaakt. Tegen het einde van de week was mijn werk voltooid en kreeg ik de opdracht om de backend een beetje te verbeteren.

Tijdens het werken met de adminpanel had ik een bug gevonden en dit gerapporteerd aan onze backend developers.

Donderdag avond zijn we met de hele team samen gaan bowlen en eten voor teambuilding. Het was heel leuk en ik heb veel verschillende collega's op een meer persoonlijker niveau leren kennen.

Week 4:

Deze week wilde mijn mentor dat ik me meer zou concentreren op de backend. We hebben een team dat bezig is met het herontwerpen van het admin-paneel om het moderner te maken. Onze technologieën veranderen elk jaar en als je niet up-to-date blijft, kunnen onze applicaties verouderd lijken. Deze week heb ik voornamelijk gewerkt aan het leren van Angular. In het begin was het even wennen, omdat er zoveel regels zijn en alles heel strikt is in vergelijking met React. Ik zou het kunnen vergelijken met C#.

Ik moest het proces van het maken van objecten soepeler maken door een meer recente methode te implementeren. De huidige manier van werken verloopt erg traag, omdat je één voor één een rij moet toevoegen en één voor één een kolom moet aanmaken. Het is mijn taak om een systeem te implementeren waarmee in bulk rijen en kolommen kunnen worden gemaakt. Dit moet allemaal gebeuren met Angular , dus voordat ik hiermee aan de slag ga, moet ik vooral Angular leren gebruiken.

Aan het einde van de week kon ik dit succesvol implementeren, maar er is nog ruimte voor verbetering wat betreft het ontwerp en de responsiviteit. Volgende week ga ik iets implementeren waarmee je de gemaakte kolommen kunt slepen om de volgorde te wijzigen.

Week 5:

Aan het begin van deze week had ik al het werk aan de backend afgerond, maar mijn front-end voldeed niet aan hun verwachtingen. In eerste instantie dacht ik dat alles er goed uitzag, maar na vier revisies realiseerde ik me hoeveel beter het eigenlijk kon. Ze gaven me waardevolle feedback over kleuren, lay-out, marges en kleine details zoals deviders dat niet waardevol lijken maar het veel beter laat uitzien.

Na het toepassen van hun suggesties zag mijn werk er direct tien keer professioneler uit. Naast het gebruik van Tailwind CSS, kon ik ook veel Angular Material componenten gebruiken, zoals 'sidenav', 'portal' en 'drag-drop'. Angular biedt een rijke verzameling van vooraf gebouwde materialen die je simpelweg kunt integreren. Dit is iets wat React niet heeft. Alles heeft een vaste structuur, en functionaliteiten zoals translation, routing en nog veel meer zijn al vooraf geïnstalleerd, waardoor je niet hoeft te zoeken naar goede dependencies en direct kunt beginnen coderen.

De 'drag-drop'-functionaliteit was bijzonder handig, omdat het mogelijk maakte om de volgorde van kolommen eenvoudig aan te passen door ze te slepen. Er was echter een probleem: omdat de kolommen werden weergegeven met behulp van een 'ngFor'-loop, werkte de 'dragHandle' niet zoals verwacht. In plaats daarvan kon je de hele rij vastpakken in plaats van alleen de hendel aan het begin van de rij. Dit is een bekende bug die helaas niet eenvoudig op te lossen is. Ik heb het voor nu zo gelaten maar ook een comment bij geplaatst.

Dit weekend ga ik Rust leren, zodat ik volgende week kan helpen met projecten die gebruikmaken van die taal.

Week 6:

Maandag heb ik voornamelijk mijn tijd besteed aan het leren van Rust. Ik heb ontdekt dat Rust geen garbage collector heeft en dat deze verantwoordelijkheid bij de programmeur ligt. Daarnaast heb ik geleerd over het concept van ownership en over de 100de verschillende string types (niet letterlijk, maar er zijn er veel types dat je juist moet gebruiken). Dit draagt bij aan de snelheid van Rust ten opzichte van andere programmeertalen, maar het maakt het ook moeilijker. Veel mensen geven het op vanwege deze complexiteit.

Tegen het einde van de dag ben ik apart gaan zitten met mijn mentor om mijn Rust taak te bespreken. Het was allemaal nogal overwhelming, maar dit betekent ook dat ik veel zal leren. Ik moet een sql connector maken door apache arrow, datafusion te schrijven en al het data veranderen in graphs met Grafana.

Volgende week gaat er een nieuwe project van start en ik zal daar mee moeten helpen maar ondertussen zal ik Rust stap voor stap leren wanneer ik tijd over heb en misschien zelfs het boek kopen.

Tot nu toe merk ik dat ik snel vooruitgang boek in mijn werk en geen enkele dag voorbij gaat zonder dat ik iets nieuws leer. Ik heb ook onderzoek gedaan naar wat er allemaal nodig is om een full-stack developer te worden. Ik ben bekend met databanken, front-end frameworks en api development. Testing en back-end development moet verbetered worden. Er was een teambuilding event donderdag. Ze gingen op cafe samen iets drinken en een wandeling doen. Ik kon spijtig genoeg niet mee omdat ik aan het vasten was voor Ramadan maar ik kan altijd volgende maand mee doen. De teambuilding events zijn altijd een highlight van de maand dus het was spijtig dat ik niet mee kon.

Week 7:

Deze week was ik bezig met het opzetten van een MySQL-database zodat mijn Grafana zijn gegevens daaruit kon halen. Ik heb ze beiden gerunned in Docker en alle data getransfered van een SQlite naar MySQL.

Ik had dinsdag een call met een klant die al eerder met ons heeft samengewerkt. Hij wilde twintags op verschillende machines in het kantoor en magazijn plaatsen, zodat je eenvoudig documentatie en algemene informatie kunt verkrijgen door simpelweg een QR-code te scannen. Omdat het een oude klant is, betekende dit ook dat ik aan een reeds bestaand project moest werken en functies moest toevoegen.
Dit project werkte met een NX monorepo. Ik moest onderzoeken wat een monorepo precies was. Het is een bundel van verschillende repositories die allemaal samen kunnen werken. Dit wordt vaak gebruikt door grote bedrijven met veel projecten. Je kunt React in één repository gebruiken en Angular in een andere, met elk hun eigen pakketten. Het was allemaal heel cool, maar het wilde niet samenspelen met onze al bestaande React-template. Ik moest probleem na probleem oplossen totdat het eindelijk kon worden gerunned.

Tenslotte is er ook een probleem met de documenten dat wij normaal gezien moeten linken met de assets. Er zijn heel veel duplicaten. Ze hebben allemaal dezelfde Id en link naar de document maar een kleine detail is anders dat zorgt dat we niet alle duplicaten eruit kunnen halen. We gaan dit oplossen door een script te schrijven dat regelmatig alle data refetched en in onze databanken zet. Dat is de oplossing van onze kant terwijl onze klanten de duplicaten eruit halen aan hun kant.

Week 8:

Deze week heb ik me vooral gericht op oude projecten. Ik stuitte op verschillende problemen, zoals het niet ophalen van vertalingen vanuit de backend. Onze klanten voegden nieuwe talen toe, maar deze verschenen niet in de taalselector omdat ze niet werden opgehaald en hardcoded waren. Daarnaast heb ik ook enkele UI-problemen opgelost.

Naast deze taken heb ik veel tijd besteed aan het verbinden van mijn Grafana met mijn Flight Arrow-server. Ik vermoed dat het probleem is ontstaan doordat ik mijn MySQL-database en Grafana draai op Docker, terwijl mijn Apache Arrow op mijn lokale machine draait. Ik zal proberen dit op te lossen door Grafana op mijn eigen apparaat te laten draaien.

Tegen het einde van de week begon een nieuw project. Opnieuw met een klant waarmee ik eerder heb samengewerkt. Ze wilden een QR-code die tijdens evenementen gescand kan worden, zodat deelnemers meer informatie kunnen krijgen over een persoon of bedrijf. Aan het einde van het evenement kunnen ze ook een enquête invullen. Ik denk dat ik minder begeleiding zal krijgen dan normaal, aangezien dit al mijn derde project is.

Week 9:

Deze week heb ik de hele week besteed aan een nieuw project. Dit keer kreeg ik veel vrijheid en werd er weinig gecontroleerd. Ik ben begonnen met het ontwerpen van de UI in Figma en vervolgens begonnen met het implementeren ervan met React en Tailwind. Tijdens het maken van de tabellen in de backend heb ik gebruik gemaakt van de ontwerpdocumenten als guidance. Het moeilijkste deel was het extracten van de data. Het verloopt nog steeds niet helemaal soepel. De bedoeling is dat mijn klant zijn eige informatie inserten in onze database en dan de qr code kan delen met klanten tijdens events.

Er zijn enquêtes op de pagina die alleen na een bepaalde tijd getoond mogen worden. Ik heb een 'surveyReveal' kolom gemaakt en wanneer de huidige tijd later is dan de onthullingstijd, wordt er een enquête op de pagina weergegeven. De enquêtes moeten alleen zichtbaar zijn tegen het einde van het evenement, zodat onze klant zelf kan bepalen wanneer dat is.

Week 10:

Ik heb deze week vooral gewerkt aan het survey gedeelte van onze project. Het was allemaal heel moeilijk want je kon de css heel moeilijk editen door die npm package dat ik moest gebruiken dat json veranderde in een form. Ik vond het in het begin alles ingewikkelder maken maar als je wilt dat onze klanten hun eige forms kunnen maken in de toekomst is deze package een van de weinige opties dat je hebt. Buiten de css te editen was er ook een probleem dat je de data uit de form niet kon uithalen dus ik heb voor de eerste keer een formRef gebruikt. Wanneer er werd gesubmit, creerde ik een event waar alle data inzat en haalde ik alle antwoorden en vragen eruit en dit savde ik in de backend. Buiten het makkelijk maken van surveys, zorgde deze package ook voor veel security features. Een voorbeeld was dat het package je niet liet spammen en resubmitten. Nadat je 1 keer hebt gesubmit, liet ik de form niet meer zien en toonde ik een message om onze klanten te bedanken voor hun mening en dit was allemaal mogelijk door die package. Op de einde van de week ontdekte ik dat mijn tabbelen helemaal verkeerd was dus dat ik een deel opnieuw moest doen. De bedoeling was dat je veel personen kon linken aan een event en de event tabel had alle data zoals surveys. Hoe ik het gedaan kon je 1 persoon linken met veel events. Ik had ook de informatie van alle mensen in een aparte tabel gestoken. Ik ga dit volgende week opnieuw moeten doen.

Week 11:

Deze week moest ik een deel van mijn project opnieuw maken omdat de tabellen niet correct waren. Het was allemaal heel stresvol want onze klant bleef elke dag bellen om zeker te zijn dat het af was. Ik heb ook een stuk van de UI aangepast met tips van mijn collega's. Zoals altijd is hun input erg waardevol.

Er moesten ook aparte QR-codes zijn voor booths gemaakt worden in plaats van bezoekers, die nu doorverwezen naar de website van onze klant. Ik heb dit gedaan door een 'type' column aan te maken voor elke tag. Voordat de website zelfs open gaat word er gechecked wat de type is van de tag met een useEffect Zoals altijd werkt de enquête normaal bij android, maar iOS speelt niet mee. Normaal gesproken schuift de enquête een beetje omhoog wanneer je op een invoerveld drukt, maar iOS is niet slim genoeg, dus het toetsenbord bedekt het invoerveld en je kunt niet zien wat je typt. Dit heb ik opgelost door onFocus te gebruiken. Wanneer je op een invoerveld drukt, worden er marges toegevoegd die het formulier handmatig omhoog duwen.

Onze klant liet ook weten dat een van de documenten die hij heeft geüpload moeilijk zichtbaar is. Ik wilde dit oplossen door een pdf-viewer te gebruiken van ons bedrijf met ingebouwde zoomfunctionaliteit, maar die was meer gemaakt voor pc's en scrollwheel van je muis. Deze tags zouden worden gebruikt met een gsm, dus moest ik een andere oplossing vinden. Mijn oplossing was "useGesture". Het is een custom hook gemaakt om je website interactiever te maken door je vingers te gebruiken. Je kunt dingen verplaatsen en inzoomen met deze hook. Het was niet zo makkelijk om op te zetten, maar uiteindelijk is het gelukt. Ik heb dit gebruikt in combinatie met de eerder genoemde pdf-viewer. Ik moest natuurlijk ook grenzen instellen zodat je het document niet uit het zicht kon gooien en de pagina opnieuw moest laden.

Week 12:

Ik heb me vooral beziggehouden met het maken van boothtags deze week. Voor het identificeren van de bezoekers gebruikte ik localStorage. Wanneer je tijdens het evenement een stand ziet die je interessant lijkt, kun je deze scannen. De website controleert dan of er al informatie over de gebruiker in de localStorage staat. Zo niet, dan krijg je een QR-code scanner op je scherm te zien en een tekst die vraagt om je eigen bezoekers-Twintag te scannen, dat om je nek hangt.

Wanneer je je eigen tag scant, haalt de website jouw informatie op en wordt jouw naam in de localStorage opgeslagen. Vanaf dat moment wordt elke keer dat je een stand scant, deze informatie opgeslagen in de database zodat we bedrijven kunnen koppelen aan bezoekers. Ook wordt bij elke stand een nieuwe knop ontgrendeld waar je een beoordeling aan de booths kunt geven.

Tegen het einde van de week ontdekte ik dat er een probleem was met een van de packages die ik had gebruikt voor vCards. Het pakket heet 'vcards-js' en is meer gemaakt voor node-applicaties dan voor React. Ik moest de webpack aanpassen in de node-modules en sommige variabelen, zoals 'fs', 'path' en 'test', standaardwaarden geven. Dit loste het probleem alleen op voor mij, maar als iemand in de toekomst hieraan zou moeten werken, zouden dezelfde fouten terugkomen. Daarom heb ik een 'webpack.config' gemaakt dat wordt gebruikt bovenop de standaard config die er al is elke keer dat je de applicatie aanzet. Dit was een veel betere oplossing en ik had het niet kunnen doen zonder mijn trouwe vriend 'Stack Overflow'.

Ook heb ik een kleine PowerPoint-presentatie gemaakt voor onze klant, zodat hij de applicatie beter kan begrijpen. Alles wat er behind the scenes gebeurt, wordt uitgelegd in mijn Twintag themed presentatie.

Week 13:

Deze week ging het veel smoother. Ik werkte vooral aan refinements terwijl mijn collega alles teste. We moeten zeker zijn dat alles perfect werkt voordat het in de field word gebruikt. Eén van de grote improvements dat ik heb gemaakt was het automatisizer van de surveys. Onze klant geeft ons een JSON en de npm package creert de form. De moeilijk deel was de antwoorden van de user eruit te halen toen er gebruikt werkt gemaakt van checkboxes of radioboxes. Er was ook niet echt een manier om te checken wanneer het gewoon een input field was en wanneer het een checkbox is.

{
"type": "category",
"label": "Which topic(s) of the event did you find most valuable? (multiple answers possible)",
"bind": "question3",
"children": [
{
"type": "input",
"subtype": "checkbox",
"label": "topic1",
"bind": "question3.topic1",
"options": {
"optionalField": true
}
}, ...

Door de bind zo te schrijven kreeg je als output een dictionary genaamd question3 en die dictionary zijn keuzen waren allemaal geoutput met topic1: true/false. Dit maakte alles veel gemakkelijker want voor dat ik deze verandering heb gemaakt was het altijd 1:true, 2: false, etc... Ik schreef een functie dat checkte of typeOf van alle questions gewoon een string of een object is. Als het een object is word het gefiltered op alle keys met value true en tenslotte .toString zodat ik het kon opslagen in de backend. Het was allemaal heel leerrijk en ik heb eindelijk de project kunnen afronden. Er gaan waarschijnlijk revisies komen in de toekomst omdat er op elke event wel nieuwe ideeen naar boven komen.

Buiten dit heb ik ook een paar extra features gemaakt zoals 'contact me' button dat jouw localstorage name opgeslaagt in de backend met de booth zelf zodat je later gecontacteerd kan worden. Er waren ook klanten die te laat inschreven voor het evenement en voor hen moest er een formulier worden gemaakt zodat ze zelf hun eigen informatie konden invullen en er ter plekke een gepersonaliseerd label voor hen werd aangemaakt.

Week 14:

De klant had deze week een bug gevonden waarbij sommige bezoekers de booth tag opnieuw scanden in plaats van hun eigen badge, en dit werd nog steeds geaccepteerd. Dit was een heel simpele fix. Het is heel nuttig wanneer gewone gebruikers met je programma kunnen spelen. Als je er zelf de hele dag aan werkt, begin je dingen zoals dit te missen. Qua UI laat ik regelmatig mijn collegas, famillie of vrienden ernaar kijken want meestal als je 4u lang naar 1 zelfde ui zit te staren begin je kleine details of improvements te missen. Afgezien van het oplossen van allerlei kleine details in verschillende projecten en het fixen van kleine bugs, was deze week heel rustig. Omdat ik meer vrije tijd had, kreeg ik de opdracht om alvast te beginnen aan een toekomstig project. Dit zijn projecten waarbij ons salesteam nog niet klaar is met de onderhandelingen, dus het is niet zeker dat ze daadwerkelijk gemaakt gaan worden. Het project waar ik nu aan moest beginnen, was een uitbreiding van een project waaraan ik aan het begin van mijn stage heb gewerkt. Het was iets heel simpel maar nu gaan we dingen toevoegen zoals problemen te rapporteren van producten door fotos ervan te maken. Volgende week ga ik dit afronden en tests schrijven voor mijn oude projecten, zodat ik daar zeker mee in contact ben gekomen. Ik ga selenium-webdriver gebruiken in combinatie met Jest, maar dit ligt nog niet vast. Ik heb ervaring met beide, dus het zou niet moeilijk moeten zijn. Wat ik specifiek ga testen, weet ik nog niet zeker.

Week 15:

De vijftiende week en tevens mijn laatste week bij Twintag is aangebroken. Helaas is er niet genoeg tijd om aan een nieuw project te beginnen of om mee te doen aan een lopend project. De tijd is echt voorbijgevlogen en ik heb zoveel geleerd tijdens mijn stageperiode.

Deze week heb ik me vooral beziggehouden met testing. Omdat er maar een week over was, ben ik door al mijn oude projecten gegaan en heb ik hier en daar tests geschreven. Het probleem met front-end testing is dat de tools behoorlijk beperkt zijn, vooral als je Jest gebruikt. Ik wilde heel graag testen of de data die werd opgehaald juist was, omdat het niet altijd dezelfde soort data was die je bij elke tag terugkreeg. Helaas was dit niet mogelijk met de tools die ik had en dit soort testen zijn meer geschikt voor back-end testing.

Ondanks deze beperking heb ik veel waardevolle ervaring opgedaan. Het schrijven van tests heeft me geholpen om mijn eigen code beter te begrijpen en om ervoor te zorgen dat alles goed werkte. Het heeft me ook inzicht gegeven in de uitdagingen en beperkingen van front-end testing, wat zeker nuttig zal zijn in mijn toekomstige werk.

Reflecterend op mijn tijd bij Twintag, ben ik dankbaar voor de begeleiding die ik heb gekregen en de kansen die ik heb gehad om verschillende projecten te ervaren. Ik heb nieuwe technologieën en tools leren kennen en ik ben comfortabel geworden met de workflow van Twintag.