Creator Image - Myself
Gunnar Van Remoortere
Web Developer

Gunnar Van Remoortere

Hi, nice to meet you! I'm an Interactive Multimedia Design student who loves to design and develop.

My Blog

Eerste twee weken bij PixelLab

Momenteel draait mijn stage rond het aanleren van Ruby on Rails. Dit is een framework waarmee je snel en efficient een web applicatie kan coden. Ik was dan ook vooral bezig met de taal Ruby en het framework Ruby on Rails te leren kennen. Tot zo ver heb ik al een kleine webapplicatie gecode die te vinden is op mijn Github onder de repo 'LDRFlights'. Het is nog een beetje mijn weg vinden in het framework, maar grotendeels kan ik mijn eigen plan wel trekken nu. Maar een Webapplicatie draait niet enkel rond puur de functionaliteiten of de API of de frontend. Testing is ook heel belangrijk. De laatse aantal dagen was ik mezelf daar in aan het verdiepen. Ik werk namelijk met Rspec en Cypress, backend en frontend testing.

Mijn stage zelf verloopt voornamelijk remote, maar in principe vind ik dit geen al te groot probleem. We callen regelmatig en communiceren de hele dag door, voornamelijk als ik met vragen zit, stuur ik die gewoonweg via Slack. Als het een klein probleem is, verhelpen we dit over chat en anders springen we snel in een call waarbij Jens me dan uitgebreid uitlegt hoe het juist in elkaar zit en waar we dan samen naar een oplossing toe werken.

Ik denk dat dit voornamelijk mijn eerste twee weken omschrijft en ik vind persoonlijk dat ik al heel wat heb bijgeleerd. Ik kan niet wachten tot ik alles wat onder de knie heb zodat we aan het echte werk kunnen beginnen!

Periode 2 bij PixelLab

In de eerste week van deze periode gingen vooral over het afwerken van de web applicatie die ik als ‘tutorial’ heb gemaakt. De puntjes op de i zetten zodat alle code up to date is, goed geschreven is en alles tip top in orde is. Dit verliep natuurlijk niet altijd zo soepel, als je plots code gaat aanpassen dan loopt het wel eens fout hier en daar. Maar met de hulp van Jens (mijn stagebegeleider) liep alles wel vrij vlotjes natuurlijk.

Eens alles in orde was, kreeg ik de opdracht om de applicatie te gaan deployen met ‘Heroku’. Ik ging dus aan de slag, maakte een account aan en verdiepte me al snel in de documentatie over hoe je een ‘Ruby on Rails x React web application’ kon gaan deployen met Heroku. Zoals gewoonlijk, liep dat ook niet zonder problemen, that’s the world of coding! Dit kwam door een aantal version fouten, een configuratie fout en door het gebruik van npm & yarn door elkaar. Opzich geen grote problemen, die waren dan ook vrij snel opgelost en toen waren we er. De webapp loopt live sinds het einde van week 1 in periode 2.
Deze is hier te vinden: https://ldr-flights.herokuapp.com

In de tweede week wou Jens ook mijn ‘design’ skills uittesten en gaf me dan ook de opdracht om een Facebook advertentie te maken met als doel ‘Bizzey’ te promoten. Bizzey is een applicatie die vooral freelancers, small businesses en accountants helpt door middel van een dashboard waarop je je hele business administration kan managen. Klik hier om Bizzey te bekijken.

Ik heb voor deze opdracht dan ook mijn voorbereiding gedaan d.m.v. de website te analyseren en de ‘huisstijl’ en ‘design guidelines’ op te maken voor mezelf. De volgende stap was ideeen op doen en brainstormen naar wat ik exact op de advertentie wil zetten. ‘Wat is er belangrijk, wat brengt de boodschap over, gebruik ik foto’s of illustraties, ... Eens de voorbereiding klaar was, was het tijd om Illustrator en Photoshop te openen en aan de slag te gaan. Het heeft me dan ook de volledige tweede week gekost om hier aan te werken (op vrijdag was het zo goed als af, maar ik had zeker nog een maandag en eventueel dinsdag nodig van de oplvolgende week om het volledig af te werken).

Periode 3 bij PixelLab

Zoals voorspeld had ik nog een aantal dagen nodig om de advertentie tot in de puntjes af te werken. Met bijkomende feedback van Jens, zijn we tot een goed eindresultaat gekomen. Of de advertentie wellicht gebruikt zal worden, hangt natuurlijk af van Jens, wanneer het goed uitkomt. Zelfs als de advertentie uiteindelijk niet gebruikt wordt, heb ik toch weer een heleboel geleerd, en een goede challenge achter de rug! Het was nu wel een drukke periode voor Jens waardoor hij me even verdere zelfstudie opgaf omtrent Ruby on Rails en React. Dit was extra voorbereiding voor de volgende opdracht. Niet zomaar een willekeurige opdracht, maar een grote stap hoger.

Mijn nieuwe opdracht: ‘Ik zou graag een nieuwe functionaliteit toevoegen aan Bizzey. Nl. een functionaliteit waarbij gebruikers hun eigen helpdesk kunnen aanmaken binnen het dashboard van Bizzey. Stel je voor: Een tab in het dashboard waar men artikels en groepen kan aanmaken, om zo tot een gehele FAQ te komen. Ik heb al gelijkende functionaliteiten uitgebouwd in Bizzey zelf, maar deze is aan jou om uit te werken.’

Stap 1: Bekijk de stijl en guidelines opnieuw binnen in Bizzey, zoals van de contacten-tab of facturen-tab.
Stap 2: Maak een gelijkend of bijpassend design voor de helpdesk-tab.
Stap 3: Codeer de helpdesk-tab in een nieuw Ruby on Rails x React project.

De resterende tijd van deze periode had ik dan vooral in gebruik genomen om voldoende research te doen naar bestaande FAQ pagina’s of FAQ creators, om daarna een design op te maken waarbij de volledige achterliggende functionaliteiten uitgedacht waren.

Periode 4 bij PixelLab

Nu het design en de logica eigenlijk af was. Was het tijd om alles te gaan coderen natuurlijk. M.a.w. kijken wat ik er nog van wist, van mijn vorig ‘inleidend project’. Dat viel al bij al heel goed mee, ik was al snel opgestart met een volledig project. Tuurlijk wist ik niet alles nog vanbuiten, dus een aantal kleine dingen zoals een bepaalde gem die ik vergeten was, brachten af en toe wel een onverstaanbare error naar boven. MAAR, de meeste errors kreeg ik wel opgelost op mijn eentje (om trost op te zijn). Al bij al de eerste week had ik al snel de hele API lopende met alle werkende endpoints.

Mijn tweede week was iets uitdagender, met react alle routes correct uitleggen en de frontend beginnen uitbouwen met de correcte data en styled-components. Hier was ik niet mee klaar geraakt in de tweede week van deze periode. Maar geen nood, volgende week is er weer een nieuwe week!

Periode 5 bij PixelLab

De voorlaatste periode van 2 weken is aangekomen... En uiteraard is mijn job om de helpdesk functionaliteit af te krijgen. Daar ben ik dan ook meteen op verder beginnen werken. Vorige week had ik de basis al opgezet, het hele project opgezet, alle gem files, de database structuur, ... De basis route was al gelegd nl. naar de ‘helpdesk tab’, de UI was ook uitgebouwd a.d.h.v. styled-components. Dus ik was bezig met de data van de database correct uit te lussen in de UI. Nu kom ik op het probleem dat ik het mezelf blijkbaar een beetje moeilijk gemaakt heb... Ik zal een beetje een ‘back story’ geven, zodat jullie mee zijn met het probleem.

Aangezien ik nog vrij nieuw ben in Ruby on Rails en er eigenlijk veel ‘achter de schermen’ gebeurt, of beter gezegd automatisch (een beetje like magic ✨)... Anyways, bij het leggen van de relaties van de kolommen ‘Groep’ en ‘Artikel’ had ik blijkbaar (per ongeluk!) iets vrij ingewikkelds gedaan. Waardoor ik bij het uitlussen alle groepen en alle artikels weldegelijk kreeg... Maar niet de relatie tussen beiden, wat wel even een *facepalm* moment was... Ik had dus alle nodige informatie, maar ik kon de groepen niet linken aan de artikels...

Dit was dus een vrij groot probleem en wist ook niet direct hoe dit op te lossen. Uiteraard wou ik niet per-direct om hulp vragen dus probeerde ik een oplossing te vinden, maar tevergeefs. De dag erna besloot ik dan toch vanaf de dag startte Jens om hulp te vragen. Jens had het wel enorm druk dus zei: “Ik ga er zo snel mogelijk naar kijken zodat je verder kan werken, het kan wel zijn dat dit een aantal dagen kan duren aangezien er heel wat op de planning staat. Maar geen probleem, in de tussentijd kan je al research doen naar hoe exact ‘Froala Editor’ te gebruiken. Deze ga je nodig hebben wanneer je aan de ‘edit-article’ page begint.”

Daar begon ik dan ook meteen mee, en probeerde een aantal voorbeelden met Froala editor uit te werken. Opzich kon ik daarnaast ook wel verder met de UI van de edit page uit te werken. Daar heb ik me in week 1 dan ook vooral mee bezig gehouden.

In week 2 gaf hij me dan al meteen een oplossing, hoe ik het wel moest doen. Ik begon al snel alles aan te passen zodat de data wel degelijk op zijn bestemming terecht kwam. De rest van de week was ik vooral bezig met het creëren van de edit pagina, zowel backend als frontend...

Week 2 eindigde al snel, ik heb dan ook niet alles kunnen afwerken. Dus de rest is natuurlijk voor de laatste periode, maar ik ben er zeker van dat alles wel af zal geraken.

Periode 6 bij PixelLab

Het is aangekomen, de laatste periode gaat van start... Tijd om verder te werken aan de helpdesk functionaliteit voor Bizzey. De eerste aantal dagen, nam ik nog de tijd om de views tiptop in orde te maken, met de nadruk op de Froala editor en de buttons voor interactie mogelijkheden met de gebruiker. De gebruiker moet namelijk telkens een sectie naar keuze kunnen aanmaken. Bijvoorbeeld: een titel, een subtitel, een body text, een afbeelding, ... Al deze functionaliteiten worden nl. met React aangepakt, dus dit heeft me ook wel wat tijd gekost.

Inmiddels zijn we al voorbij de helft van de week geraasd, de frontend is in orde geraakt... En het is tijd om de logica te gaan uitwerken wanneer de er op de buttons geklikt wordt en er sections aan gemaakt worden met data. Ik wist eerst niet goed hoe hieraan te beginnen, dus ik vroeg snel even wat raad bij Jens die me dan ook meteen ter hulp schoot. Ik moest namelijk al de input data op gaan slaan in objecten die ik daarna moest gaan opslaan in een jsonb array. Zodat dit weggeschreven kan worden naar de database en dus onthouden kan worden om later opnieuw te kunnen weergeven.

Uiteraard zoals altijd, klinkt het allemaal heel simpel. Wat het dus helaas nie direct was, jsonb weer iets nieuws waar ik nog nooit echt mee gewerkt had. Ik had dus opnieuw wel wat hulp nodig of toch een aantal tips om me in de juiste richting te wijzen. Ik volgde Jens zijn gegeven tips en begon er meteen aan.

Week 1 was dan al snel geeindigd, net zo snel was week 2 begonnen. Mijn laastse week stage, dus ik besloot er opnieuw direct in te vliegen. Toch stootte ik weer op een antal problemen met het gehele JsonB verhaal. Jens had helaas wel de hele namiddag een meeting in Brussel, waardoor hij even niet te hulp kon schieten. Waardoor ik dus vooral op eigen houtje naar een oplossing probeerde te zoeken.

Met heel wat bloed, zweet en tranen was ik uiteindelijk toch aan een oplossing geraakt. Of toch soort van, want er waren wel een aantal bugs en misschien ook niet de meest correcte code. De volgende dag had Jens wel voldoende tijd om samen eens te bekijken wat ik fout had gedaan, en wat ik kon verbeteren. Hij wou ook niet zomaar het antwoord open en bloot leggen, dus hij gaf opnieuw een aantal hulpmiddelen waardoor ik het wel op de correcte manier kon uitvoeren.

Na heel wat tijd, en een aantal vragen was ik er wel geraakt. Aan een vrij goede en stabiele code die alles deed werken zoals de opdracht luidde. Nogmaals gingen we samen over de code, om nog een aantal kleine dingen te verbeteren en zo kon hij me nog verder uitleg geven over wat er exact gebeurde. On that note was mijn opdracht afgerond, en was het ook al snel het einde van mijn stage bij PixelLab. We hebben dan ook nog een kort gesprek gehad over vanalles en nog wat, over mijn toekomstplannen enzovoort... Hij liet me ook weten dat ik hem altijd kon contacteren en bij hem terecht kon met vragen voor als ik bezig was met job aanbiedingen en alles wat daar bij komt kijken. En dat was het dan, de stage zat erop.