Luke van Genechten - Stage

Welkom bij mijn stageportfolio

Hey! Welkom bij het stagesemester. Hier laat ik zien waar ik me het afgelopen halfjaar mee bezig heb gehouden met stage. Ik laat zien wat ik heb ontwikkeld m.b.t. het grote project en wat ik heb geleerd. Bekijk de leeswijzer voor een gemakkelijk overzicht voor de leeruitkomsten.

Mijn naam is Luke van Genechten, en ik ben een 23 jarige media-designer in opleiding. Waar mijn voornaamste interesses en talenten liggen is bij alles grafisch. Dit omvat logo’s, videobewerken, websites en interface design. Beroepsgewijs is dit ook waar ik naar streef. Zowel front-end app ontwikkeling als website ontwikkeling hebben de voorkeur qua beroepskeuze.

Qua programmeren is mijn sterke punt ook frontend development. Hoewel ik mezelf meestal prima kan redden als ik wat meer richting backend programmeer, vooral als ik na een paar weken gewend ben aan de taal, gaat mijn voorkeur uit naar talen HTML, CSS en Javascript. Dit zijn de talen waar ik het meeste ervaring mee heb.

Ik ben perfectionistisch, wat zich in de context van media design vertaalt naar dat ik ervoor zorg dat elke kleur, elk lettertype en elke vorm precies klopt. Voor mij is iets als een website of portfolio eigenlijk nooit echt af, want er zijn altijd verbeteringen mogelijk.

In groepsverband ben ik een sociaal persoon, die erg zijn best doet om ervoor te zorgen dat niemand vastloopt en dat meningsverschillen niet te hoog oplopen. Dit is in bepaalde mate ook mijn valkuil, omdat ik er goed op moet letten dat ik wel kritisch blijf en niet te snel over me heen laat lopen.

Voor dit semester zijn er een aantal leerdoelen die ik wil bereiken. Het eerste is meer initiatief nemen. Aangezien ik iemand ben die graag wat op de achtergrond werkt, is het mogelijk dat mijn aandeel in het werk kleiner lijkt dan het daadwerkelijk is. Om toch op de radar te blijven heb ik een doelstelling bedacht rondom initiatief nemen. Ik stel minstens één keer per week iets nieuws voor tijdens de dagelijkse standups.

Het tweede leerdoel heeft te maken met technische kennis. Tijdens mijn zoektocht voor een stage ben ik meerdere malen niet aangenomen vanwege mijn gebrek aan React-kennis. Mijn doelstelling is dat ik aan minstens één React app meewerk, waarbij ik het proces van begin (onderzoek en design) tot het einde (development) meemaak.

Ten slotte heb ik een leerdoel voor planning. Vele semesters zijn voor mij chaotisch verlopen. Dit geldt ook voor het afgelopen semester, waarbij ik het werk allemaal netjes op tijd af had, maar achterliep met het vinden van een stage. Mijn doelstelling m.b.t. planning is dat ik elke week op maandag een overzicht maak van taken die er die week op stage te doen zijn. Daarmee houdt ik het verloop van de stage overzichtelijk.

Leeswijzer

Analysis/problem definition

Door middel van het projectplan beschrijf ik duidelijk de scope van het probleem.

Tijdens de literature study onderzoek ik wat de beste technische oplossing is voor het probleem waar Profix en haar klanten tegenaan lopen.

Advice

Het projectplan biedt een advies over de organisatie van het project en de planning.

Door middel van een competitive analysis adviseer ik Profix IT over de beste manieren om onderscheidend te blijven.

Door een literature study uit te voeren onderzoek ik of een ontwikkelingsframework gelijkwaardig is aan native development. Bovendien onderzoek ik welk framework het meest geschikt is en geef hier advies over.

In het adviesrapport geef ik update-advies aan Profix over de toekomst van de applicatie en waar nog verbeteringen aan te brengen zijn.

Design

Voor het designen van de app ben ik gestart met het maken van prototypes. Hierin verklaar ik de belangrijkste designkeuzes en laat ik de ontwikkeling van de prototypes zien.

Door middel van de usability test valideer ik of het design in de praktijk gebruiksvriendelijk is.

Het gerealiseerde design is bij de Profix app te vinden.

Realisation

De volledig uitgewerkte applicatie is in de Google Play Store te vinden als de laaddock app, en is gelijk aan het eerder gemaakte design. De app is ontwikkeld volgens het eerdere onderzoek en is ook daadwerkelijk in gebruik genomen door Profix IT.

Manage and control

Tijdens het project is gewerkt volgens de SCRUM-methode voor organisatie.

Voor versiebeheer is gebruik gemaakt van een Git omgeving.

Judgement

In het projectplan heb ik de onderzoeksvragen bedacht.

Deze zijn nog enigszins veranderd en zijn bij de onderzoeksvragen te vinden.

De onderzoeken zelf inclusief antwoord op de onderzoeksvragen is te zien bij het onderdeel onderzoek.

Communication

Elke week spreek ik met Pim, de coach vanuit school. Daarnaast bespreek ik tijdens de dagelijkse standup met de bedrijfsbegeleider. Ook spreek ik regelmatig ongepland met de bedrijfsbegeleider over mijn voortgang en problemen waar ik tegenaan loop.

Learning ability

In de introductietekst is te lezen waar mijn voornaamste talent ligt, en welke ambities ik heb om dit semester te leren.

De uitkomsten van de leerdoelen zijn te lezen in de reflectie.

Intro - Fullstak

Mijn stagebedrijf is Fullstak in Breda. Dit bedrijf houdt zich bezig met softwareontwikkeling voor diverse klanten. Het is onderdeel van OnlineExperts. Hoewel dit overkoepelende bedrijf uit meerdere kleinere bedrijven bestaat, zijn deze veelal verantwoordelijk voor SEO en SEA, terwijl de developers bij Fullstak zitten. Wel werk ik regelmatig samen met de andere personen in het bedrijf, zoals met SEO en technische zaken voor websites.

Hoewel ik twijfelde, onder andere omdat de titel van de stage ‘softwareontwikkeling’ was, ben ik door de omschrijving en het gesprek toch erg enthousiast geworden. Ik krijg veel kansen om aan alle aspecten van Media Design te werken. Ik kan zowel aan designs werken als (frontend) programmeren, precies waar mijn passie en talent ligt. Afgelopen halfjaar heb ik aan een grote hoeveelheid projecten gewerkt, en ik licht de grootste en belangrijkste opdracht uit in dit portfolio.

Het project - Profix IT

Het hoofdproject voor dit halfjaar was die voor Profix IT. Dit softwarebedrijf heeft een opdracht deels uitbesteedt aan Fullstak om een organisatie-app te ontwikkelen voor groente- en fruittelers. Profix is verantwoordelijk voor de backend, en Fullstak voor frontend.

De details

Profix is een IT-software bedrijf, die zelf software ontwikkelen voor hun klanten. Dit bedrijf heeft een opdracht waarbij ze een softwareplatform ontwikkelen voor de organisatie van fruit- en groentetelers.

Voor fruit- en groentetelers is het oogsten een proces dat efficiënter kan. Het bijhouden van de producten, op welke pallets ze staan en wat de status is momenteel niet goed gestructureerd.

Om die reden heeft Profix IT de opdracht gekregen om een app te maken om dit proces te vergemakkelijken. Door een samenwerking aan te gaan met Fullstak kan Profix zich richten op backend-werk terwijl wij als groep richten op front-end ontwikkeling.

Voor aanvang van het project schrijf ik een projectplan. Hierin omschrijf ik hoe ik het project aan wil pakken, hoe het tijdschema in grote lijnen eruit komt te zien en schrijf ik de onderzoeksvragen.

Bekijk het projectplan

Hoe ziet de meest passende applicatie voor Profix IT eruit?

Met het schrijven van het projectplan, heb ik ook onderzoeksvragen bedacht. De hoofdvraag, hoe ziet de meest passende applicatie voor Profix IT eruit, wil ik beantwoorden met een set deelvragen, die als de basis moet dienen voor een aantal onderzoeken die ik ga uitvoeren.

Onderzoeksvragen

Hoe zit de meest passende applicatie voor Profix IT eruit?

Welke functionaliteiten moeten aanwezig zijn binnen de app om competitief te blijven?

Wat voor informatie moet er zichtbaar zijn in de Profix IT applicatie?

Is de app gemakkelijk te begrijpen en gebruiken?

Is een React Native applicatie een volwaardig alternatief voor een native Android of IOS app?

Voor het beantwoorden van deze onderzoeksvragen leg ik eerst de methodiek vast. Vervolgens beschrijf ik hoe versiebeheer in dit project wordt toegepast. Daarna beantwoord ik de onderzoeksvragen aan de hand van verschillende onderzoeken.

Methodiek

Voor de aanvang van dit project heb ik een projectplan gemaakt. Hierin definieer ik onder andere het tijdschema en de onderzoeksvragen, maar ook welke soort methode wordt gebruikt tijdens het project. Voor het Profix project wordt gebruik gemaakt van SCRUM. Alles is gepland in sprints en er vinden elke dag standups plaats.

Qua planning is ook alles volgens het projectplan verlopen, en het project lag het grootste gedeelte van de tijd voor op de planning. Het project is als volgt verlopen.

Sprint 0

Zoals gepland in het projectplan, heb ik in deze sprint onderzoek gedaan naar concurrenten van Profix. Bovendien heb ik een wireframe gemaakt en deze vervolgens volledig gedesignd. Het design wordt door de klant beoordeeld. Deze sprint heeft slechts drie weken geduurd, ten opzichte van de vijf die ervoor stonden ingepland.

Sprint 1

Hoewel de klant erg enthousiast is geworden van het design zijn er nog wel enkele opmerkingen. Tijdens deze sprint maak ik nieuwe designs die volledig moeten aansluiten bij de wensen van de klant. Door middel van feedback evolueren de prototypes naar een hoger niveau. Ook onderzoek ik wat het beste framework is om deze app mee te ontwikkelen. De software-stagaires zijn intussen gestart met het programmeren, en leggen de basis voor de app. Het design is momenteel nog gebaseerd op het wireframe, het is later aan mij om dit aan te passen naar het daadwerkelijke design. Deze sprint heeft drie weken geduurd, waarmee de voorsprong die in sprint 0 is ontstaan intact blijft.

Sprint 2

Tijdens sprint 2 start ik met programmeren. Ik ben in deze sprint verantwoordelijk voor het realiseren van het design. Het wireframe-design dat momenteel aanwezig is moet vervangen worden door het goedgekeurde design. Hiervoor wordt React native gebruikt, de beste optie qua frameworks, iets dat bleek uit het framework onderzoek van vorige sprint. Deze sprint heeft ook drie weken geduurd.

Sprint 3

Sprint 2 is relatief stil overgegaan in sprint 3, omdat het grotendeels dezelfde werkzaamheden zijn. Het design in nog niet volledig geïmplementeerd, waardoor dat deze sprint afgemaakt moet worden. Naast het realiseren is een usability test deze sprint aan de orde. Ik wil graag weten in hoeverre de app gebruiksvriendelijk is en wat er verbeterd kan worden. Ten slotte wordt de app tijdens deze sprint opgeleverd en in de Play store gezet. Zoals de vorige sprints heeft sprint drie ook drie weken geduurd. Daarmee is de hoofdfase van het project afgerond op 29 april.

GIT

Om van een goed versiebeheersysteem voorzien te zijn, maak ik samen met de andere stagaires en de bedrijfsbegeleider gebruik van Gitlab. Hoewel ik uiteraard niet de interne GIT omgeving kan delen vanwege bedrijfsgevoelige informatie, kan ik wel laten zien en omschrijven op welke manier er gebruik is gemaakt van Git. Elke functionaliteit krijgt een eigen branch toegewezen. Zo heeft het inloggen een eigen branche, de API ook en algemene design zaken is ook een aparte branch. Zo worden alle functionaliteiten gescheiden van elkaar zodat ze elkaar niet in de weg zitten.

In de praktijk krijgt dit in GIT en het SCRUM bord dus vorm als PROF- met bijbehorende beschrijvende naam, bijvoorbeeld PROF-37-responsiveness. Door de functionaliteiten te scheiden in branches worden merge conficts tot een minimum beperkt.

Zelf maak ik gebruik van Github Desktop om de commits en pushes te doen, al doet iedereen dit anders. In principe heeft de manier van Git gebruiken geen invloed op het uiteindelijke versiebeheer. Iedereen is uiteindelijk samen verantwoordelijk geweest voor de merges. Dit kwam voornamelijk bij degene die veel toevoegingen hadden gedaan.

Let op: de interne vertrouwelijke repository kan ik niet delen, daarom is het project geëxporteerd en opnieuw op de fhict git server gezet. De geschiedenis is daarom niet beschikbaar. De commits zijn hieronder te vinden als screenshots.

Bekijk de repository

Previous image

Next image

Onderzoek

Welke functionaliteiten moeten aanwezig zijn binnen de app om competitief te blijven? - Competitive analysis

Profix bevindt zich in een hele krappe markt. Het aantal bedrijven dat software maakt voor de AGF sector is veel groter dan ik had ingeschat. Hoewel de meeste bedrijven zich niet exclusief op AGF richten, zijn er ook een aantal bedrijven die hier echt hun business model van hebben gemaakt, net als Profix.

Ook van de bedrijven die zich minder specialiseren kan Profix concurrentie ervaren. Ondanks dat ze niet specifiek een AGF bedrijf zijn, maken ze er wel software voor en zijn het dus wel concurrenten.

Om ervoor te zorgen dat Profix kan concurreren dient de app aan de volgende voorwaarden te voldoen.

De app moet enkel voor de AGF sector ontworpen zijn en geen andere doelen hebben, zodat er voldoende focus is,
De app moet bij eerste gebruik in het Nederlands ingesteld zijn om de communicatie vertrouwd te maken. Ook eventuele beheerdersmeldingen moeten in het Nederlands zijn,
Tegelijkertijd moet er een zeer duidelijke optie zijn om de taal eenvoudig te wijzigen, waardoor medewerkers die de taal niet machtig zijn in de eigen taal kunnen lezen,
De Profix app moet daarnaast geschikt zijn voor cross-platform. Dit kan bijvoorbeeld een daadwerkelijke cross-platform app zijn of een die gemakkelijk geschikt kan worden gemaakt voor meerdere platforms.

Deze vier punten zijn dan ook antwoord op de onderzoeksvraag: Welke functionaliteiten moeten aanwezig zijn binnen de app om competitief te blijven?

Competitive analysis

Is een React Native applicatie een volwaardig alternatief voor een native Android of IOS app? - Literature study

Er zijn vele keuzes voor cross-platform development. Echter dienen ze niet allemaal hetzelfde doel. Zo is Ionic bedoeld voor grafisch simpele applicaties waar niet veel prestaties nodig zijn, en Xamarin voornamelijk als brug tussen Visual Studio en mobiel.

De meest voor de hand liggende keuzes zijn React Native, Flutter en native development.

Omdat Flutter en React native qua prestaties min of meer identiek zijn, valt de keuze op degene die de grootste community heeft, namelijk React native. Dit heeft als bijkomend voordeel dat ik met Javascript ervaring heb, in tegenstelling tot Dart.

Nu ik het meest geschikte framework voor dit project heb uitgekozen, is het ook belangrijk om te weten of React native een volwaardig alternatief is voor native development. Hoewel de prestaties een klein verschil hebben in het voordeel van native development, is het niets schokkends. Zeker voor een relatief kleine en simpele app, is React native voldoende. Ook is React native zo gebouwd dat het standaard gebruik kan maken van OS-niveau UI elementen. Daarmee is de look and feel gelijk aan een native app.

Kortom, React Native is een volwaardig alternatief voor native development.

Literature study

Wat voor informatie moet er zichtbaar zijn in de Profix IT applicatie? - Prototyping

Hoewel de Profix IT applicatie niet al te ingewikkeld is met betrekking tot het aantal schermen en de hoeveelheid informatie, is overzicht en duidelijkheid van groot belang. Zoals in de competitive analysis al beschreven is, wordt de app veelal gebruikt door personen die geen Nederlands kunnen. Taal en visuele hints zijn dus erg belangrijk.

Om te testen of deze informatie goed overkomt, ben ik begonnen met de prototypes. De wireframe was de start, waar nog redelijk wat op aan te merken was. Zo was er geen taalknop, miste de pauzeknop en was de app onoverzichtelijk omdat alle informatie op één regel stond.

Vervolgens heb ik deze feedback verwerkt in het highfidelity design. Daarbij was de informatie overzichtelijker verspreidt over het scherm. Alles is bij het design in duidelijke vakken verdeeld. Hoewel het een verbetering was t.o.v. het wireframe, is de informatiedichtheid nu te laag.

Vervolgens heb ik twee nieuwe designs gemaakt, één met kleinere vakken, en één met een lijst. De keuze is gevallen op de lijst. Hoewel het design net wat minder aansluit bij het moderne uiterlijk, is de informatiedichtheid hier het grootst.

Wat voor informatie moet er zichtbaar zijn in de Profix IT applicatie?

Als antwoord op de onderzoeksvraag beschrijf ik welke informatie in de app zichtbaar moet zijn.

Loginscherm

Gebruikersnaam-veld
Wachtwoordveld
Taalknop

Selectiescherm

Uitlogknop
Werkopdrachten
Laaddocks

Werkopdrachten overzicht

Werkopdrachten detailscherm

Laaddocks

Ook de gemaakte designs geven antwoord op de onderzoeksvraag. Deze zijn te vinden in het bijgesloten onderzoek.

Prototyping

Is de app gemakkelijk te begrijpen en gebruiken? - Usability testing

De app is in grote lijnen al positief uit de usability test gekomen. Tijdens de testen zijn er geen grote verrassingen geweest. Zaken zoals de lange laadtijd en de onduidelijkheid van de lijst zijn dingen waar ik al van op de hoogte was.

Wat mij verbaasde was dat het inlogsysteem soepel verliep. Hierin had ik wel wat problemen verwacht, omdat het via de browser verloopt. Wat naar alle waarschijnlijkheid helpt is dat de login automatisch ingevuld wordt en dat er geen standaardapp geselecteerd hoeft te worden voor het openen van laaddock, wat bij eerste gebruik wel moet.

Met deze resultaten duidelijk, was mijn hypothese grotendeels correct. De app was in grote lijnen inderdaad op orde, en er zijn details die ik heb gemist. Echter had ik wel verwacht dat er wat meer details niet op orde waren. Met deze test is gebleken dat ook de meeste details in de app al duidelijk zijn, en daarmee zijn er minder UX problemen dan ik had verwacht.

Het antwoord op de onderzoeksvraag, is de app gemakkelijk te begrijpen en gebruiken, is dus geen complex antwoord. De app is in gebruik erg duidelijk, en over het algemeen is te verwachten dat de meeste gebruikers de app kunnen gebruiken zonder problemen. Het enige kleine punt waar men tegenaan kan lopen, is de onduidelijkheid van de lijst en de lange wachttijd bij het openen van de dashboards.

Usability testing

Profix app

De uiteindelijke app is in de week van twee mei gelanceerd in de Play store en is op de volgende link te vinden.

https://play.google.com/store/apps/details?id=com.laaddock

De ontwikkeling heeft ongeveer twee maanden full-time ontwikkeling gekost. Hoewel ik niet al te veel betrokken was bij het eerste gedeelte van de ontwikkeling, omdat het voornamelijk API zaken waren, heb ik in de tweede helft van het project min of meer de leiding genomen over het project. Ik maakte dan ook de meeste veranderingen in die tijd en heb het uiterlijk gematcht met het design. Op de blur en het loginscherm na is het volledig overgenomen uit het design.

Conclusie - Hoe ziet de meest passende applicatie voor Profix IT eruit?

Voor het antwoord op de hoofdvraag, Hoe ziet de beste app voor Profix eruit, te beantwoorden, combineer ik de gevonden resultaten uit de verschillende onderzoek en het werk dat ik gedaan heb.

Met het antwoord op de deelvragen duidelijk, kan ik het antwoord op de hoofdvraag het beste als volgt beschrijven. De meest geschikte oplossing voor de organisatie van AGF logistiek en dus de beste variant van een Profix app is meertalig, cross-platform en gemakkelijk in gebruik. Een modern design wordt toegepast en de leesbaarheid is optimaal, door middel van contrasten en grote lettertypes. De ontwikkeling gebeurt door middel van React native. Het meest passende design is te zien in de app zelf en in de prototypes.

Het meertalige aspect is dan ook geïntegreerd. Zowel een Nederlandse, Engelse en Poolse optie is beschikbaar binnen de app. Hiermee is de app zeer geschikt voor werknemers die gebruikmaken van deze app, die veelal geen Nederlands spreken. De app start wel in het Nederlands, wat een betrouwbare uitstraling heeft voor de werkgever en de Nederlandse werknemers die de app voor het eerst opstarten.

Door gebruik te maken van rounded corners en een sans-serif lettertype (roboto) heeft de app een moderne uitstraling. Ook zijn alle elementen groot en hebben een ruime marge, zodat de gebruiksvriendelijkheid maximaal is. Zeker in de AGF wereld, waar hard gewerkt wordt en alles op maximaal tempo moet, is een UI met veel ruimte heel nuttig. Zo verminderd het de kans dat de gebruiker op de verkeerde knop drukt. Ook het kleurgebruik is duidelijk en begrijpelijk. Zo heeft de annuleerknop een rode gradient, wat al een onbewuste hint geeft over de functie van de knop.

Daarnaast is React native de beste keuze voor een aantal redenen. Het is het meest gebruikte framework ter wereld, wat uit het library/community onderzoek bleek, waardoor er een enorme community is voor ondersteuning. Het gebruikt Javascript als programmeertaal, waardoor de learning curve niet al te steil is. React native heeft ook een brede ondersteuning voor cross-platform ontwikkeling, en zijn de prestaties niet veel minder dan native ontwikkeling.

In de toekomst wordt de app nog verbeterd door een geschikter inlogscherm en het gebruik van de browser wordt beter geïntegreerd t.o.v. direct Google Chrome te openen.

Advies

De Profix IT app voldoet aan het grootste gedeelte van de gestelde eisen in o.a. het projectplan. Er zijn nog wel wat details en UX zaken waar verbetering nodig is. Daarnaast zijn er wat update aanbevelingen die er zijn voor deze app. Deze heb ik samengevat in het adviesrapport.

Reflectie

Terugkijkend op dit semester is er een grote hoeveelheid vooruitgang geweest. Hoewel voorgaande semesters regelmatig pittig waren, was dit absoluut het lastigste, en tegelijkertijd meest interessante semester dat ik heb gehad.

Bekijk de reflectie