Sprint 4: Ontwikkeling
Hoe kan het design uitgewerkt worden in code?

In sprint 4, de development sprint, is een deel van de applicatie ontwikkeld. Met verschillende hulpmiddelen is het gelukt om een interactieve versie te maken gebaseerd op het prototype.

Na het ontwikkelen en testen van het high fidelity prototype werd de applicatie uitgewerkt in code. Omdat de scope van mijn opdracht was gericht op UI/UX is er gekozen om slecht een deel van de applicatie uit te werken om mijn ICT vaardigheden aan te tonen. Er is samen met Robert en Jo-An gebrainstormd om de beste interactie uit de app, om te zetten in code. We kwamen tot de conclusie dat het posten van een bericht essentieel is voor de applicatie. Tevens is het schrijven van deze functionaliteit in code voldoende om mijn development competentie aan te tonen. Daarom is er gekozen om met deze functionaliteit aan de slag te gaan in de ontwikkelings sprint.

Userflow voor het posten van een bericht

Codetaal

Voordat ik ben gaan coderen heb ik eerst onderzoek gedaan naar de meest passende codetaal die mij kon helpen met het realiseren van deze functionaliteit. In de unit waarin ik werkzaam ben word veel front-end development gedaan. Ik besloot daarom om eerst op de afdeling rond te vragen naar een passende codetaal. In eerste instantie was het idee om een native applicatie te ontwikkelen maar dit werd mij afgewezen omdat ik hier te weinig tijd voor zou hebben met de kennis die ik momenteel heb. Ik zou me dus moeten richten op een webapplicatie voor nu. Mij werd aangeraden om met javascript aan de slag te gaan waar ik vervolgens een library/framework aan zou toevoegen. Omdat in de toekomst wel het idee is om een native applicatie te bouwen, is er gekozen voor React. React heeft namelijk ook een framework genaamd React Native waar native applicatie in te bouwen zijn. In een later stadium zou veel van de code hergebruikt kunnen worden voor de native applicatie. Daarnaast maakt React het mogelijk om zonder teveel poespas interactieve gebruikersinterfaces te ontwikkelen door het hanteren van zogenaamde componenten. Doordat React gebruikt maakt van html en javascript is het ook nog eens gemakkelijk te leren en daarom is het een perfecte match voor het ontwikkelen van deze applicatie.

Database

Aangezien er gekozen is om het posten van een bericht op de tijdlijn uit te werken, moet er data opgeslagen worden in een database. Hier had mijn collega snel een antwoord op en dat is Firebase. React zorgt namelijk voor snelle interacties en daarvoor is ook een efficiënte database nodig. Omdat firebase een real-time database platform is kan er in een split seconde data worden verzonden en verkregen vanuit de database. Dit maakt het mogelijk dat het geplaatste bericht direct zichtbaar is op de tijdlijn. In de toekomst is het ook makkelijk om bijvoorbeeld een chatfunctie in te bouwen en push notificaties in real-time te verzenden. Een voorproefje van de notificaties is te zien in het proof-of-concept. Kortom zijn er vele functionaliteiten die het mogelijk maken om een sociaal intranet te ontwikkelen.

Mogelijkheden met Firebase

Libraries

Na het vaststellen van deze benodigdheden is aan de hand van tutorials een begin gemaakt aan de applicatie. Eerst werd de database ingericht om het mogelijk te maken om informatie in de database op te slaan. Hierbij werd gebruik gemaakt van de applicatie Postman om te kijken of er daadwerkelijk informatie uit de database gehaald kon worden. Ook het opslaan van data werd getest. Toen de database succesvol was ingericht werd er gestart aan de applicatie zelf. Stap voor stap werd de applicatie ontwikkeld en werden er nieuwe functionaliteiten toegevoegd. Ook werden er in dit proces een aantal libraries opgehaald zoals Redux, axios, jwt-decode en dayjs. Voornamelijk Redux heeft grote rol gespeeld in de ontwikkeling van de applicatie gemakkelijker te maken. Redux zorgde dat het delen van data tussen componenten logischer werd door deze data centraal op te slaan. Naarmate de applicatie groter werd moest er steeds meer data doorgespeeld worden naar verschillende componenten. Door het gebruik van Redux is dit versimpeld. De andere libraries loste voornamelijk kleine problemen op.

Het voordeel van Redux

Styling

Na het succesvol inrichten van de applicatie is vervolgens ook de styling toegevoegd met behulp van de library Material-UI. Deze library maakt het mogelijk om componenten snel vorm te geven door stukken code her te gebruiken. De styling is gebaseerd op Google’s material design waardoor het clean en netjes oogt. Aangezien het een proof-of-concept is heb ik hiervoor gekozen omdat het veel tijd bespaard.

Een voorbeeld van een UI skeleton te implementeren met Material UI

Versiebeheer

Tot slot is er tijdens de ontwikkeling van de applicatie gebruik gemaakt van Git(hub). Git maakt het mogelijk om de code die wordt ontwikkeld tijdig op te slaan. Op deze manier werd er voorkomen dat er urenlang gezocht werd naar een in fout in de code. Er werd namelijk naar iedere redelijke update een ‘commit’ gemaakt naar Github om de ontwikkelde code veilig te stellen.