Home Blog Tools app
DCC Tools app

Tools app

2 augustus 2021 Niels Rijnberg - Developer 4 min

Het afgelopen halfjaar hebben Niels en Marc stage gelopen bij Dutch Coding Company. De opdracht: een app maken voor Tools (onze inhouse ontwikkelde projectmanagement applicatie) met als een van de belangrijkste features de mogelijkheid om uren te schrijven op projecten voor klanten en intern. Ze zijn allebei geslaagd voor hun opleiding. Hieronder vertellen zij zelf over het eindresultaat van hun stage.

Als teamleden van Dutch Coding Company aan een project werken, voor een klant of intern, is het belangrijk om bij te houden hoeveel tijd er besteed is en wat er in die tijd is gerealiseerd. Dit wordt gebruikt voor verantwoording richting klanten, maar ook om bijvoorbeeld van te leren hoe zaken efficiënter kunnen.

Het loggen van deze uren wordt gedaan in Tools, een applicatie die Dutch Coding Company zelf heeft ontwikkeld. Dit is een (vervelend) taakje dat veel tijd in beslag kan nemen (of zo voelt het soms). Zeker als het niet dagelijks gebeurt, want van uur tot uur terughalen wat je precies hebt gedaan de afgelopen week, is lang niet altijd makkelijk. Hier ontstaat het risico op een verkeerde tijdsaanduiding. Een oplossing in de vorm van een app kan heel handig zijn om zo efficiënt mogelijk de tijd bij te houden, zonder dat je keer op keer hetzelfde formulier hoeft in te vullen. Dit was een mooie kans voor een afstudeerproject, dat wij, Niels Rijnberg en Marc Verwijmeren, samen hebben opgepakt voor onze afstudeerstage.

Requirements analysis

Om te zorgen dat de app voldoet aan de behoeftes van de gebruikers, is er een vooronderzoek gedaan. We zijn daarom begonnen met een gebruikersonderzoek. Tijdens de interviews met de eindgebruikers (in dit geval collega’s), werd bijvoorbeeld gevraagd wat voor handelingen de gebruiker nu deed in de webversie van Tools, wat vaak terugkerende handelingen waren en hoe die sneller zouden kunnen worden gemaakt. Daaruit is een lijst gekomen met de verschillende requirements voor de app.

We hebben de belangrijkste functionaliteiten gegroepeerd en gerangschikt door gebruik te maken van de MoSCoW-methode. Zo kregen alle onderdelen een bepaalde urgentie toegekend, die werden onderverdeeld in sprints en issues op GitLab.

Wireframes Tools app

Opzetten van een compleet design

De volgende stap was het bedenken van een basis design. Er is gekozen om het design van de app in lijn te laten zijn met het design van de webversie. Hoewel er verder geen grote eisen waren aan het design, was gebruiksvriendelijkheid natuurlijk wel erg belangrijk.

Nadat de belangrijkste features gerangschikt waren zijn we daarom begonnen met het opzetten van een grove schets van de schermen die de app zou gaan bevatten, oftewel wireframing. Dit is uitsluitend het indelen en plaatsen van functionaliteiten op de schermen, zoals knoppen, lijsten en navigatiestructuur. In deze fase worden er nog geen stijlen, lettertypes, enzovoorts meegenomen. Zo hou je focus op de gebruiksvriendelijkheid van het ontwerp.

Natuurlijk wil het oog ook wat en moet er daarom een stijl voor de app worden ontworpen. Daarvoor werkten we met een Design Systeem: één overzicht, waarin alle visuele bouwstenen worden gedefinieerd. Denk hierbij aan kleuren en lettertypes, maar ook hele componenten die de app gaat bevatten zoals lijsten en knoppen. Welke bouwstenen dat in ieder geval moesten zijn, was duidelijk geworden bij het opstellen van de wireframes. Het gebruik van een design systeem is erg belangrijk om alles in de app consistent te houden.

Design system Tools app

De laatste stap: het maken van het complete design. Hierin werden de schermen uit de wireframes en de gedefinieerde stijlen en componenten gecombineerd tot een mooi geheel. Op deze manier zag je precies hoe de app eruit zou komen te zien, nog voordat we zijn gaan programmeren.

Het ontwikkelen van de app

De app is ontwikkeld in Flutter, zodat er maar één app ontwikkeld hoefde te worden voor zowel Android als iOS. Ondanks dat we zelf nog niet veel ervaring hadden met Flutter, hebben we alles binnen de stage af gekregen. Alle uitgewerkte schermen inclusief functionaliteiten zijn verwerkt in de app.

Designs DCC Tools app

De belangrijkste functionaliteit die de app biedt is de grote blauwe knop; die springt ook meteen in het oog als je de app opent. Wanneer je er op klikt wordt de timer gestart voor een gekozen project. Op de achtergrond worden de uren bijgehouden voor de gebruiker. De gebruiker kan de timer pauzeren om deze vervolgens in een lijst met actieve timesheets op te slaan. Vanuit daar zijn er twee opties: het hervatten van de timesheet, of het stoppen en opslaan van die timesheet. Dit maakt het makkelijk om de gelogde uren in het moment zelf bij te houden en kost het schrijven van uren veel minder tijd.

We hebben daarnaast nog een tijdsbesparing geïmplementeerd. Door het gebruiksgedrag bij te houden, kan de app met een simpel, maar doeltreffend, algoritme suggesties doen voor een actie als de gebruiker de app opent.

Deze voorgestelde acties zijn te vinden op het home scherm onder de blauwe knop. Aanbevelingen kunnen variëren van het bekijken van timesheets, klanten, projecten en collega’s tot het aanmaken van timesheet met vooraf ingevulde data. De aanbevelingen worden automatisch real-time geüpdatet en veranderen op basis van het moment van de dag waarop de gebruiker de app opent. Alle verzamelde data en het algoritme werken on device; er wordt niets verstuurd naar de server, waardoor privacy altijd geborgd blijft.

Al met al was het een heel erg leerzame afstudeerstage. We hebben een hele nieuwe programmeertaal geleerd in korte tijd, waarmee we tot een mooi eindproduct zijn gekomen dat binnen het bedrijf gebruikt gaat worden om uren bij te houden. Iedereen van het team stond altijd klaar om te helpen. Ook door alle feedback tijdens de verschillende fases (analyse, design, implementatie) hebben we veel geleerd en hierdoor zijn we op alle vlakken gegroeid.

Niels & Marc

Op zoek naar een stageplek?

Zit jouw (afstudeer)stage eraan te komen en ben je nog op zoek naar een leuke opdracht? Wacht dan niet te lang, onze stageplaatsen zitten snel vol!

Solliciteer nu
Kiki Vodegel - Community Builder
Hi ik ben Kiki. Community Builder bij Dutch Coding Company
Heb je een vraag over stages bij Dutch Coding Company?

Dit vind je misschien ook interessant:

Heb jij een baanbrekend idee voor een applicatie, ben je toe aan een offerte aanvraag of op zoek naar wat voor input je nodig hebt? Wij helpen je hierbij.

Download de checklist