1.1

1.2

1.3

1.3.1

1.3.2

1.4

1.4.1

1.4.2

1.4.3

1.4.3.1

1.4.3.2

1.4.3.3

1.4.3.4

1.4.3.5

1.4.3.6

1.4.3.7

1.4.4

1.4.4.1

1.4.4.2

1.4.4.3

1.4.4.4

1.4.4.5

1.4.5

1.4.5.1

1.4.5.2

1.4.5.3

1.4.5.4

1.4.6

1.4.7

1.5

1.5.1

1.6

1.7

1.8

Table of ContentsIntroduction

Dankwoord

Introductie

Situering

Beschrijving Involved

Technisch

Werkwijze

Architectuur

API

ASP.NET

ASP.NET Web API

Dependency Injection

Unit of Work Repository pattern

Entity Framework

AutoMapper

WebSocket

Single Page Application

AngularJS

TypeScript

Angular Modules

Material Design Lite

Views

Authenticatie

ASP.NET Identity

OAuth2

OAuth flow

Refresh Tokens

Continuous Integration

Software en Tools

Involved Portal

MeteorJS

Resultaten

Conclusie en samenvatting

Bibliografie/Geraadpleegde bronnen

2

AbstractHet doel van het project is om een webapplicatie te ontwikkelen die de deeleconomie ondersteunt. Het is eenplatform waarop mensen spullen kunnen aanbieden om uit te lenen. Als de gebruiker iets wil aanbieden moet hijof zij een foto uploaden om het item op een duidelijke manier te kunnen beschrijven. Als laatste vult de gebruikerde naam van het item en ook een korte beschrijving in. Andere gebruikers van de applicatie kunnen dezeaangeboden items vinden door het gebruik van een buurtensysteem op basis van geolocatie. Indien zegeïnteresseerd zijn kunnen ze contact opnemen met de eigenaar voor verdere afspraken aangaande het uitlenen.Dit kan gebeuren via e-mail of via het geïntegreerde realtime commentsysteem.

Het is ook mogelijk om als gebruiker achter goederen te vragen. Dit verloopt op dezelfde manier als bij hetaanbieden van items met als enige verschil dat er geen foto kan geüpload worden.

Als tweede korte project is er een uitbreiding gemaakt op het involved portal waarop de getekende timesheets enfacturen van zowel interne als externe consultants upgeload moeten worden. De bedoeling was om eenbeheerbaar Wiki gedeelte toe te voegen aan het portal.

3

Antwerpen, 22 juni 2016Berten Bevers

DankwoordIn de eerste plaats zou ik graag Involved willen bedanken voor de stageplaats en kans op een eerste werkervaring.

Eveneens mijn promotors Patrick van Houtven en Bert Rymenams bedanken.

Ook Kristof Spaas zou ik willen bedanken voor de fijne samenwerking aan het project.

Als laatste zijn er nog een aantal mensen die ook een groot aandeel hebben in het resultaat van mijnbachelorproef; Rik Van Camp, Bram De Moor en Robin Vercammen. Bij jullie kon ik ook altijd terecht voor uitleg ofeen mening over bepaalde zaken.

4

SitueringWaarom heeft iedereen in een straat van 50 huizen een eigen grasmaaier? Waarom kunnen we deze niet vanelkaar lenen? Andere zaken zoals een boormachine of een draagrek voor fietsen heb je nu ook niet meteen elkedag nodig. Zou het niet interessant zijn dat we zaken die we niet elke dag nodig hebben zomaar ter beschikkinghebben zonder dat we hiervoor een dure aankoop moeten doen? Men kan bijvoorbeeld in een bepaalde buurtafspreken om een gezamelijke grasmaaier aan te kopen. Het concept van de deeleconomie zorgt er niet alleenvoor dat je van veel comfort of luxe kan genieten tegen een goedkoop prijskaartje, het sociaal aspect is ook wel eenleuk voordeel. Je leert nieuwe mensen in je buurt kennen, elke keer dat je iemand uit de nood helpt is het weer eenelement van verrassing. Wat ook heel leuk is, is het feit dat je vaak met mensen in contact komt die dezelfdeinteresses delen. Het vervolg van deze scriptie beschrijft de ontwikkeling van een applicatie die het concept van de deeleconomiesteunt.

5

Beschrijving InvolvedInvolved is een software-development en IT-consultancy bedrijf die line-of-businessapplicaties maken voor groteorganisaties en publieke instanties. Deze businessapplicaties worden telkens gebouwd in de vorm van modernewebapplicaties. Hiervoor zet Involved steeds de beste technologieën in die de .NET-wereld en de JavaScript-wereldte bieden hebben. Door zijn systematische focus op de essentie van de opdracht en het neerzetten van eenaangename projectervaring weet Involved zich te onderscheiden van de concurrentie. Het bedrijf maakt deel uit vande Cronos groep, een groep die als incubator gezorgd heeft voor de opstart van meer dan tweehonderd bedrijven.Cronos is een snelgroeiende groep die zijn bedrijven een sterke ondersteuning biedt en tevens alle niet-strategische taken uit handen neemt van haar dochterbedrijven.

Involved spitst zich toe op het leveren van business-software op maat van elke klant. Binnen een project bij Involvedwordt er gekozen voor een aanpak gebaseerd op technieken van de agile-methodologie en uit de wereld van user-centered-design. Involved betrekt zijn klanten in grote mate bij hun project. Een goede verstandhouding encommunicatie met de klant zorgt voor een vlot verloop van elk project. Betrokkenheid en letterlijk bij de klant gaanzitten staan centraal. De agile-aanpak en user-centered-design van Involved brengen veel voordelen met zich mee:een beter begrip voor noden en doelstellingen, snellere feedback, betere inschattingen qua tijd en ontwikkeling enbeperkte projectrisico’s.

Het huidige personeelsbestand van Involved bedraagt 13 medewerkers. Naast deze 13 vaste medewerkersworden ook 10 consultants via onderaannemers ingeschakeld. Al deze medewerkers en consultants houden zichbezig met het ontwikkelen van software en leveren elk een unieke bijdrage tot het bedrijf. Het is een sterk groeiendbedrijf en elk jaar neemt het aantal medewerkers toe. Involved staat bekend als een zeer betrouwbaar bedrijf enmaakt elke dag zijn naam waar in de IT-wereld. Involved investeert in zijn werknemers door elke maand eenactiviteit te organiseren, wat zeer geapprecieerd wordt door alle medewerkers. Eén van deze activiteiten is InvolvedCafé, dit is een avond waar alle werknemers samenkomen en een aantal op voorhand vastgelegde IT-topicsworden besproken. Deze topics worden gekozen in samenspraak met alle werknemers. Dit zorgt voor een avondwaar iedereen zich thuis voelt en veel interessante informatie kan vergaren. Een andere activiteit is de Involved Bot-Retreat waarbij de medewerkers in teamverband een bot kunnen uploaden en vechten met elkaar in een virtuelearena. De Bot-Retreat zorgt voor toffe taferelen en laat de creativiteit van de werknemers naar boven komen.Involved organiseert ook talrijke seminaries. Eén van de bekendste is JSValley. Dit is een meetup waar alle nieuween interessante technieken van JavaScript aan bod komen. Een 50-tal software-engineers komen samen om tepraten over de laatste trends en bewegingen binnen de wereld van JavaScript. Involved organiseert nog tal vanandere seminaries, zowel op hogescholen en universiteiten als op andere locaties.

6

WerkwijzeTijdens het verloop van het project is er op een agile manier tewerk gegaan. Er is gewerkt in korte sprints van eenweek zodat er snel feedback kon komen van de klant. Dit is een voordeel van op een agile manier te werken.Hiermee kunnen scenario's waarbij de klant uiteindelijk totaal iets anders in gedachte had vermeden worden.

Bij de aanvang van het project is heel de architectuur van de applicatie uitgedacht en uitgewerkt. In het eerstestadium bovenden er zich 3 lagen in het project, elk met een minimum aan code. Alles was met elkaar verbonden,klaar om stap voor stap uitgebreidt te worden. Eens heel de architectuur opgezet was kon de applicatie met behulpvan userstories uitgebreidt worden. Feature per feature implementeren, zo is er gedurende heel de periode aan hetproject gewerkt. Deze werkwijze heeft ervoor gezorgd dat de verschillende lagen in de applicatie stap voor stap zijngegroeit tot wat ze nu zijn. Er was geen sprake van eerst heel de back-end af te maken en dan pas de front-end.Het is de bedoeling dat men als developer snel een resultaat kan laten zien naar de klant toe.

Er is aan dit project gewerkt door 2 studenten, elk afkomstig van een andere school. Het werk verdelen is op tweeverschillende manieren gebeurt. Gedurende de eerste helft van het ontwikkelproces is het werk vooral verdeelt perfeature waardoor de developer zowel in de front-end als in de back-end tewerk is gegaan. Naarmate het project ineen verder stadium stond is er telkens samen aan een feature gewerkt, de ene deed het front-end gedeelte, deandere zorgde ervoor dat de back-end klaar was.

Na elke sprint was er een afspraak met de klant om de behaalde resultaten te bespreken. Tijdens deze afspraakwerden de doelstellingen voor de volgende sprint ook vastgesteld.

7

ArchitectuurDe webapplicatie is opgebouwd uit een Single Page Application (SPA) in de front-end, en is geschreven in HTML5,CSS3 en Javascript (AngularJS). De back-end bestaat uit een ASP.NET Web Api geschreven in C#. De Web Apigaat via de Data Access Layer communiceren met een SQL Server database.

De applicatie is opgesplitst in verschillende lagen:

CrowdShare.Client (AngularJS Single Page Application)CrowdShare.API (REST API)CrowdShare.DAL (Connectie met Database)CrowdShare.Common (Bevat gemeenschapelijke functionaliteit)

Figuur 1: Architectuur

8

APIEen API of Application Programming Interface is een verzameling van functionaliteit die beschikbaar is via hetinternet. Vele bedrijven zoals google of facebook beschikken over één of meerdere API's die ze publiekelijkopenstellen naar andere developers. Bijvoorbeeld als developer kan men de API van google maps aanspreken omvrij eenvoudig een google maps te implementeren in je website of applicatie. Onze Single Page Application maaktgebruik van zo'n API om te communiceren met de back-end. Een groot verschil met bijvoorbeeld de API van googlemaps, waar men gewoon kan registreren om een API key te verkrijgen, is dat onze API enkel geconsumeerd kanworden door gebruikers van onze applicatie. De API wordt in ons geval enkel geconsumeerd door eenwebapplicatie. Het handige aan deze manier van werken is dat verschillende soorten van applicaties en devicesmet dezelfde back-end communiceren.

Figuur 2: Devices consuming an API (bron: pluralsight.com)

ASP.NETASP.NET is een open-source server-side web application framework en maakt deel uit van het .NET framework. Metdit framework kunnen developers dynamische websites, webapplicaties en web services zoals API's ontwikkelen.Omdat ASP.NET gebouwd is op de CLR (Common Language Runtime) is het mogelijk voor de developers omdeze applicaties in elke .NET programmeertaal te schrijven. De code wordt gecompileerd naar een CommonIntermediate Language, deze intermediate language wordt dan op zijn beurt beheerd en uitgevoerd door de CLR.De back-end van onze applicatie is een API gemaakt met ASP.NET Web API en is geschreven in C#.

ASP.NET Web API 2ASP.NET Web API is een framework waarmee het bouwen van RESTful applicaties met het .NET Framework zeereenvoudig wordt. Het definiëren van de routes voor de resources die je wilt aanspreken via de API gebeurt door hetaanmaken van een controller die alles zal afhandelen. By default wordt de naam van de controller ook de endpointdie de clients gaan aanspreken. Dit wordt ingesteld in de configuratie file van de API.

config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } );

9

Dependency InjectionDependency Injection is een design pattern dat gebruikt is doorheen het ontwikkelen van de Web API. DependencyInjection zorgt ervoor dat alle classes 'loosely coupled' zijn, waardoor de code veel beter onderhoud-en testbaarwordt. Een class A heeft een dependency wanneer deze gebruik maakt van een andere class B. Zonder het gebruikvan dependency injection zou class A zijn dependencies nog moeten instantiëren. Met dependency injection Wordtde instantie van een class meegegeven. Dit kan gebeuren op twee manieren namelijk via constructor injection ofvia setter injection. Met dependency injection maak je gebruik van interfaces, waardoor je het verhaal van Inversionof Control creëert. Het is belangrijk om te weten wat deze depencency juist doet (interface), niet hoe die class defunctionaliteit juist implementeerd. Stel je injecteert een depencency via de constructor van je class:

private readonly IUnitOfWork _unitOfWork;

public OfferController(IUnitOfWork unitOfWork) { _unitOfWork = unitOfWork; }

De functionaliteit van de UnitOfWork class staat beschreven in de bijhorende interface. Omdat de OfferController nuenkel de oplijsting van de functionaliteit van de UnitOfWork class kent, wordt het eenvoudig om andereimplementaties of een mock van de UnitOfWork class te maken. Deze functionaliteit kan gebruikt worden om decode te testen.

Unity

Unity Container is een lightweight dependency injection framework en wordt gebruikt om het DI pattern teimplementeren door de interfaces aan de juiste classes te koppelen door deze te registeren:

var container = new UnityContainer(); container.RegisterType<IUnitOfWork, UnitOfWork>(new HierarchicalLifetimeManager()); config.DependencyResolver = new UnityResolver(container);

Unity ondersteunt ook registration by convention, wat inhoud dat als de juiste naamgeving gebruikt wordt Unityclasses en interfaces automatisch zal registreren.

10

Unit Of Work Repository pattern

Figuur 3: Unit of Work Repository Pattern (bron: vivekcek.wordpress.com)

Dit is een manier om te vermijden dat er data access code verspreid geraakt binnen het project. Het zorgt ervoordat alle data access gebeurt op één dezelfde plaats, namelijk de repository. Met behulp van een generic repositorydie gemeenschappelijke functionaliteit bevat voor de verschillende entiteiten, zorgen we ervoor dat er een heel stukminder gedupliceerde code voorkomt in ons project. De Unit of Work zorgt ervoor dat de verschillende handelingenmet de database gebeuren in één transactie.

11

Entity frameworkEntity framework is een Object Relational Mapper (ORM). Dit framework zorgt ervoor dat een developer geen pureSQL queries moet schrijven maar gewoon op C# objecten kan werken met behulp van LINQ. Voor dit project makenwe gebruik van Entity framework Code First waarbij we ons geen zorgen moeten maken over het aanmaken van dedatabase, maar gewoon in code beschrijven hoe de database eruit ziet. Met andere woorden om een user tabel tegenereren maak je gewoon een class 'user', waarin je met behulp van properties beschrijft welke velden deze tabelbevat.

AutoMapperOm de applicatie performanter te maken, is het van cruciaal belang dat onze API nooit meer informatie naar onzefront-end stuurt dan nodig is. Enkel de data die effectief gebruikt wordt mag doorgestuurd worden. Bijvoorbeeld omeen lijst van topics weer te geven is er in die view enkel de titel en een id nodig van dat topic. De effectieve data overhet topic laten we achterwege. Enkel wanneer de gebruiker extra informatie wil over een topic zal de applicatie debijkomende informatie ophalen. Als er maar een tiental topics zijn zal dit goed meevallen, echter als dit er 1000 ofmeer worden zal het verschil in performantie al een pak groter zijn. Enkel terugsturen wat de gebruiker op datmoment nodig heeft is de boodschap. Dit wordt gedaan door ViewModels aan te maken voor de verschillendeentiteiten. Voor de 'view' topiclist wordt een TopicListViewModel aangemaakt met daarin enkel titel en Id. Als deapplicatie alle topics ophaalt kan men de titel en id van een topic mappen naar de TopicListViewModel. Men zou dithandmatig kunnen coderen, maar via een NuGet package genaamd Auto-Mapper, kan dit automatisch wordengedaan. Met één lijn code kunnen we een topic naar een TopicListViewModel mappen.

var topicsVm = Mapper.Map<List<TopicListViewModel>>(topics);

Door het leggen van foreign keys met Entity Framework kan zonder dat men het weet, sensitive data mee naar defront-end worden gestuurd. Tijdens het ontwikkelen van de applicatie werd er op een gegeven moment bij hetopvragen van een offered item effectief de passwordhash van de gebruiker mee naar de front-end gestuurd. Ditkwam omdat er in de offer table een foreign key staat naar een IdentityUser die een passwordhash in zijn tabelheeft staan. Daarom is het in mijn ogen zeer belangrijk om altijd gebruik te maken van ViewModels.

WebSocketWebSocket is een protocol voor full-duplex communicatie over een TCP verbinding. Dit protocol maakt meerdereinteracties tussen browser en server mogelijk, namelijk de real-time data communicatie van en naar de server.Deze real-time communicatie wordt mogelijk gemaakt door de manier waarop de server content naar de clientstuurt zonder dat de client hier om vraagt. Dit laat toe om berichten heen en weer te sturen terwijl de connectiegewoon open blijft staan.

12

SignalR

ASP.NET SignalR is een library dat is gebruikt om onze real-time comments te implementeren. SignalR maaktgebruik van WebSocket, een HTML5 API dat het toestaat om bi-directionele communicatie op te zetten tussen clienten server. Als er geen WebSockets beschikbaar zijn zal SignalR terugvallen op andere technieken zoals long-polling om de real-time communicatie open te houden.

Om het real-time comment systeem op te bouwen hebben we gebruik gemaakt van een SignalR hub op de API:

13

public class CommentHub : Hub { private readonly IUnitOfWork _unitOfWork;

public CommentHub(IUnitOfWork unitOfWork) { _unitOfWork = unitOfWork; }

public Task JoinRoom(string roomName) { return Groups.Add(Context.ConnectionId, roomName); }

public void PostComment(ReceiveCommentViewModel model) { var results = new List<ValidationResult>(); var context = new ValidationContext(model, null, null);

if (!Validator.TryValidateObject(model, context, results, true)) { Clients.Caller.broadcastError(results); return; }

var comment = Mapper.Map<Comment>(model); var userId = Context.User.Identity.GetUserId();

comment.UserId = userId;

_unitOfWork.CommentRepository.Add(comment); _unitOfWork.OfferRepository.IncreaseCommentCount(comment.OfferId); _unitOfWork.Complete();

comment.User = _unitOfWork.ProfileRepository.GetProfileByUserId(userId);

var pushableComment = Mapper.Map<PushCommentViewModel>(comment);

BroadCastComment(model.RoomName, pushableComment); }

private void BroadCastComment(string roomName, PushCommentViewModel model) { Clients.Group(roomName).broadcastComment(model); } }

Deze hub heeft 3 belangrijke functions, JoinRoom, PostComment en BroadCastComment. JoinRoom zal vanuit declient gecalled worden wanneer een pagina met real-time communicatie ingeladen wordt. Hierdoor zal de client decommunicatie met de hub opstellen. PostComment zal vanuit de client worden aangesproken wanneer er iemandeen reactie plaatst op een item. Deze comment zal in de database geplaatst worden waarna de functieBroadCastComment zal worden uitgevoerd. Deze function zal een javascript function op de client aanspreken metals data de juist geplaatste reactie.

14

(function () { angular.module('CrowdShare') .factory('signalRHubProxy', signalRHubProxy);

signalRHubProxy.$inject = ['$rootScope', 'crowdShareSettings', 'localStorageService']; function signalRHubProxy($rootScope, crowdShareSettings, localStorageService) { function signalRHubProxyFactory(hubName, roomName) { var authData = localStorageService.get('authorizationData'); var connection = $.hubConnection(crowdShareSettings.apiServiceBaseUri); connection.qs = 'access_token=' + authData.token; var proxy = connection.createHubProxy(hubName);

return { on: function (eventName, callback) { proxy.on(eventName, function (result) { $rootScope.$apply(function () { if (callback) { callback(result); } }); }); }, invoke: function (methodName, arguments, callback) { proxy.invoke(methodName, arguments) .done(function (result) { $rootScope.$apply(function () { if (callback) { callback(result); } }); }); }, connect: function () { connection.start().done(function () { proxy.invoke('JoinRoom', roomName); }).fail(function (error) { console.log('Error: ' + error); }); }, connection: connection }; }

return signalRHubProxyFactory; }})();

Bovenstaande code stelt de signalRHubProxy voor. Deze bevat 3 functies:

De 'connect' functie zorgt ervoor dat er vanuit de controller een connectie gemaakt kan worden met onzecommentHub.

De 'invoke' functie zal er voor zorgen dat we de functions die in onze commentHub staan kunnen aanspreken,deze zullen we gaan gebruiken wanneer we een comment pushen naar de API.

De 'on' functie zal aangesproken worden wanneer er vanuit de API een comment gepushed wordt naar declient.

15

var initializeHub = function () { commentHubProxy = signalRHubProxy('commentHub', roomName); setHubClientMethods(); setHubServerMethods(); startHubConnection(); };

var setHubClientMethods = function () { commentHubProxy.on('broadcastComment', function (data) { data.formattedDate = commonFactory.millisToDate(data.millis);

if (data.userPicture == null) { data.userPicture = '../images/profileimage.jpg'; }

if (data.userUserName == authService.authentication.userName) { data.userUserName = "Me"; }

vm.comments.push(data); vm.offer.commentCount++;

if (sentMessage) { vm.newComment.description = ''; sentMessage = false; } });

commentHubProxy.on('broadcastError', function (error) { var errors = [];

for (var key in error) { errors.push(error[key]['ErrorMessage']); }

sentMessage = false; $rootScope.pop(errors.join(' ')); }); };

var setHubServerMethods = function () { vm.postComment = function () { vm.newComment.millis = Date.now(); commentHubProxy.invoke('PostComment', vm.newComment);

sentMessage = true; }; };

var startHubConnection = function () { commentHubProxy.connect(); };

Bij het inladen van de controller zal de functie 'initializeHub' uitgevoerd worden. Hierbij worden via designalRHubProxy de verbinding met de API gemaakt alsook de verschillende methods en callbacks die gebruiktworden in de real-time communicatie.

Door deze functie te gebruiken kan men een comment naar CommentHub sturen:

commentHubProxy.invoke('PostComment', vm.newComment);

Onderstaande functie zal uitgevoerd worden wanneer er vanuit de server een comment naar de client gepushedwordt:

commentHubProxy.on('broadcastComment', function (data) {

16

Single Page ApplicationEen Single Page Application (SPA) is een webapplicatie of website waarbij de gebruiker steeds op één en dezelfdepagina blijft. De gebruiker kan tussen verschillende delen van de applicatie navigeren zonder ook maar één pagerefresh. Op deze manier krijgt de gebruiker een zeer vloeiende gebruikservaring die zeer dicht aanleunt bij deze vaneen desktop applicatie. Dit komt omdat men bij de initial page load de hele webapplicatie binnenhaalt en vanaf datpunt enkel nog maar de nodige content injecteert wanneer nodig.

Figuur 4: Overview of a single page application (bron: www.c-sharpcorner.com)

AngularJS

Figuur 5: AngularJS (bron: www.w3schools.com)

AngularJS is een javascript framework (onderhouden door google) dat gebruikt wordt om zeer eenvoudig SinglePage Applications te ontwikkelen. Met angularJS bouw je eigenlijk een model-view-controller (MVC) applicatie opde client. AngularJS maakt gebruikt van two-way databinding die ervoor zorgt dat wanneer er een verandering is inhet model, dit ook meteen zichtbaar is in de view en omgekeerd. Een groot voordeel van AngularJS is dat hetgebruik maakt van dependency injection waardoor de javascript code goed unit testbaar is. In onze applicatiemaken we gebruik van Angular 1.x.

De front-end is voor het grootste deel geschreven in plain old javascript. Na het bijwonen van enkele seminaries iser begonnen met het implementeren van TypeScript. Vanaf dan zijn toen zijn alle controllers, factories en servicesgeschreven in TypeScript. Deze overstap is interresant omdat Angular 2 gebruikt maakt van typescript.

17

TypeScriptTypeScript is een open source programmeertaal ontwikkeld door Microsoft. Het is een uitbreiding op javascript metenkele extra features zoals static typing en class-based Object oriented programming. Men kan gebruik maken vanclasses en interfaces. Je krijgt zelfs intellisense wat toch wel zeer handig is als men programmeertalen zoals C#of Java gewoon is. De TypeScript code wordt gecompileerd naar javascript. Dit gebeurt door handmatig eencommando in te geven of door gebruik te maken van een watcher die .ts files in het oog houdt op veranderingen.Eveneens handig is het feit dat men in de html gewoon de javascript bestanden kan blijven includen.

TypeScript Code:

namespace CrowdShare { 'use strict';

export interface IPosition { latitude: number; longitude: number; }}

Transpiled naar Javascript:

var CrowdShare;(function (CrowdShare) { 'use strict';})(CrowdShare || (CrowdShare = {}));

Angular Modules

ngRoute

Deze ngRoute module wordt in onze applicatie gebruikt om aan client-side routing te doen. In deze module zit eenservice $routeProvider, die kan gebruikt worden om verschillende routes in je singlepage application te voorzien.Aan deze routes kan je dan de desbetreffende template (of view) met de bijhorende controller koppelen. De routeskunnen ook verschillende parameters accepteren. de meegegeven parameters kunnen dan opgevangen wordenin de bijhorende controller met de service $routeParams.

LocalStorageModule

De LocalStorageModule is een module die het voor de developer zeer eenvoudig maakt om bepaalde zaken in delocal storage van de browser op te slaan. Bij oudere browsers gaat deze module gebruik maken van cookies. Deopgeslagen data in het geheugen van de browser is de authorizationData van de gebruiker die ingelogd isnamelijk: username, refreshtoken en accesstoken. Bijkomend wordt ook de profile picture van de gebruikeropgeslagen.

ngTouch

Om de drawer menu met gestures te kunnen bedienen maakt de applicatie gebruik van ngTouch, in deze angularmodule zitten verschillende touch events en andere helpers voor devices met touchscreen. Deze functionaliteit isgebaseerd op jQuery Mobile. De twee directives die in deze module zitten ingebakken, namelijk ngSwipeLeft enngSwipeRight worden gebruikt om de functies die de drawer menu openen en sluiten aan te spreken. Ten slotte ziter nog een laatste directive in, ngClick. Deze neemt de 300ms delay na een click op mobile browsers weg, dit geeft

18

een soepeler gevoel aan de applicatie. Echter vanaf Angular 1.5 is deze functie niet meer beschikbaar by default. Erwordt aangeraden om over te schakelen naar FastClick. Tenslotte heeft de ngTouch module een andere modulenamelijk ngAnimate nodig om te werken.

Geolocation

Geolocation is de module die we gebruiken om de locatie van gebruikers op te vragen. Het is een wrappergeschreven rond de huidige HTML5 Geolocation API. Deze module maakt het uitermate eenvoudig om decoördinaten in latitude en longitude op te vragen.Met deze lijn code: this.geolocationService.getMyPosition()

Wat hieruit verkregen wordt is een coordinaten-object. Dit bevat informatie zoals latitude en longitude dat effectiefook in de applicatie gebruikt wordt. Het bevat ook bijkomende informatie zoals hoogte, nauwkeurigheid, richting ensnelheid.

ngMoment

Angular-Moment is een module die gebruikt wordt om de functionaliteiten van Moment.js te implementeren binneneen angular applicatie. MomentJS is een library die speciaal ontworpen is voor het parsen, valideren, manipulerenen weergeven van datums en tijdsnotaties in JavaScript. Met deze library is het kinderspel om vanuit detijdseenheid 'millis' alle soorten weergaven van tijd of datum te genereren. Angular-Moment heeft met de directive'am-time-ago' de functionaliteit geïmplementeerd om 'millis' om te zetten naar bijvoorbeeld: 'An hour ago'. Moment-with-locales is een uitbreiding op momentJS waarbij deze verschillende tijdsnotaties nog eens beschikbaar zijn ineen groot assortiment van verschillende talen.

19

Material Design LiteMaterial design is een 'style guide' ontwikkeld door google, deze biedt verschillende richtlijnen omtrend beweging,interactie en design van applicaties. Om de applicatie de android look and feel te geven is er voor gekozen omMaterial Design Lite als CSS framework te gebruiken. Dit framework bevat buiten het grid systeem voor responsivedesign ook alle basiscomponenten zoals buttons, cards, sliders, icons, etc. Het gebruik van dit framework heeft ervoor gezorgd dat onze applicatie er veel strakker uitziet dan dat we bootstrap zouden gebruiken. De verschillendecomponenten zijn hier te vinden: https://getmdl.io/components/.

ViewsIn dit hoofdstuk worden de belangrijkste views even kort besproken.

Login

De gebruiker kan hier kiezen om via een lokaal account in te loggen, dus via gebruikersnaam en wachtwoord. Alshij of zij al geregistreerd is bij Google+ kan de gebruiker dit account gebruiken om op onze applicatie in te loggen.Als het inloggen met Google+ voor de eerste keer gebeurt komt de gebruiker op een associatie view uit. Hier vult degebruiker dan een username en wachtwoord in om zo toch nog een lokaal account te hebben. Het leuke hieraan isdat de gebruiker zowel met google als met die lokale gegevens kan inloggen op hetzelfde account. Dit heeft alsvoordeel dat wanneer google ooit beslist om te stoppen met zijn authenticatie service, de gebruiker nog steeds kaninloggen met zijn lokale gegevens. De gebruiker kan er uiteraard ook voor kiezen om zich enkel lokaal teregistreren en niet via Google+.

Zie figuur 6

Drawer Menu

Het drawer menu functioneert als de basis navigatie binnen de applicatie, vanaf hier kan de gebruiker naar deonderliggende niveaus navigeren. De niveaus daaronder zoals detail views of contact forms zijn niet via dit menu tebereiken. Links boven in de drawer menu staat de profielfoto en gebruikersnaam van een user die ingelogd is.

Zie figuur 7

Dashboard

Op het dashboard kan men de meest populare aangeboden en gevraagde items uit jouw buurt bezichtigen. Dezeworden afgebeeld met behulp van cards die men kan terugvinden in de components library van Material DesignLite. De populariteit hangt af van het aantal views dat een post heeft. Vanuit het dashboard kan men naar dedetailpagina gaan van een post, hier haalt de applicatie de resterende data op vanuit de database. Vanaf hier kande gebruiker contact opnemen met de eigenaar via mail, of via het realtime chat systeem.

Zie figuur 8

Comments

Op de detailpagina van een offered item kan de gebruiker via het realtime chatsysteem communiceren metgeïnteresseerde gebruikers. Het chatsysteem is zeer leuk te gebruiken omdat alles effectief realtime gebeurt, alser iemand op een offer reageert waarnaar je aan het kijken bent, komt deze comment er quasi instant bij. Met

20

MomentJS kan men aan de hand van een millis variabelen in de comment realtime updaten hoe lang het geledenis dat een comment gebeurd is. Dit gebeurt trouwens over de hele applicatie, en bijgevolg ook met offers enrequests.

Zie figuur 9

My offers

In my offers zie men een lijst met alle items die men als gebruiker heeft aangeboden in zijn buurt. Vanaf hier kanmen al de aangeboden items beheren. Men kan hier nieuwe items toevoegen, verwijderen, bewerken etc.

Zie figuur 10

Neighbourhood

Op de neighbourhoods detailview vindt men meer informatie over een neighbourhood. De pagina bestaat uit eenbeschrijvende foto van de desbetreffende buurt. Het address dat het middelpunt van de buurt moet voorstellenwordt onder de foto weergeven. Wanneer men deze pagina ophaalt zal er ook berekend worden hoever deze buurtvan de huidige locatie ligt. Vervolgens staat er nog een korte beschrijving over de buurt. In deze view kan men ooksubscriben op deze neighbourhood, men kan ook aangeven dat dit de buurt is waarin men woont. Op deze viewkan men ook bekijken welke aangeboden items of welke requests zich in deze buurt bevinden. Er zijn enkel itemszichtbaar van mensen die hebben aangegeven dat ze in deze buurt wonen. Met behulp van een tab control kan degebruiker switchen tussen offers en requests.

Zie figuur 11

Add Neighbourhood

In deze view kan de gebruiker zelf een buurt aanmaken. Hierin kan de gebruiker de locatie en radius van een buurtgaan instellen. De applicatie zal de gebruiker helpen met het zoeken van de locatie door de huidige locatie van degebruiker op te halen en deze als standaard in te stellen. Nadien kan de gebruiker deze locatie nog manueelaanpassen. Na het instellen van de locatie is het de bedoeling dat de gebruiker een foto upload die de buurt moetvoorstellen. Gevolgd door een naam en een korte beschrijving is de buurt klaar om in de applicatie gebruikt teworden.

Zie figuur 12

Reviews

In de reviews sectie op het profiel staan de verschillende reviews over deze gebruiker. Andere gebruikers van deapplicatie kunnen na het uitlenen of gebruiken van items een review geven over deze persoon. Er kan een scoregegeven worden tussen 1 en 5 sterren, in de info tab op het profiel wordt dan de gemiddelde score weergeven ophet aantal reviews. Dankzij deze reviews kunnen andere gebruikers beter inschatten of de desbetreffendegebruiker wel betrouwbaar is.

Zie figuur 13

Dit waren zowat de belangrijkste views, de afbeeldingen van de views kan je op de volgende bladzijde vinden.

21

Figuren

Figuur 6: Loginscreen Figuur 7: Drawer menu

Figuur 8: Dashboard Figuur 9: Comments

22

Figuren

Figuur 10: My offers Figuur 11: Neighbourhood

Figuur 12: Add Neighbourhood Figuur 13: Reviews

23

AuthenticatieOm de verschillende gebruikers van de applicatie van elkaar te kunnen onderscheiden, is authenticatienoodzakelijk. We willen ten allen tijde weten wie juist onze applicatie aan het gebruiken is, en of deze gebruiker weldegelijk is wie hij of zij zegt te zijn. Om de gebruikers te authenticeren moeten ze inloggen op onze applicatie metofwel een zelfgekozen username en password, of via google+. Het authenticeren gebeurt op het gebied van'kennis'. Er wordt vanuit gegaan dat enkel de gebruiker zijn credentials kent. Als de authenticatie van de gebruikergebeurt is, kan overgegaan naar de volgende stap namelijk autorisatie.

ASP.NET IdentityIdentity is een uitbreiding op het vroegere ASP.NET Membership systeem. Het is een framework dat gebruikt wordtom authenticatie en autorisatie te doen binnen je ASP.NET applicaties. De uitbreiding op het bestaandemembership systeem is het feit dat je nu ook external login providers kan combineren met ASP.NET Identity. MetASP.NET Identity is men niet meer afhankelijk van SQL Server, je kan nu ook perfect een NoSQL databasegebruiken om de gegevens van je gebruikers op te slagen. Buiten het feit dat het met Identity eenvoudig is om aanauthenticatie te doen, is er ook nog het voordeel dat je niet zelf een systeem of algoritme in elkaar moet steken. Hetis veel verstandiger om een systeem te gebruiker dat door veel verschillende ervaren developers is gemaakt engetest, dan zelf een systeem te schrijven dat vol met gaten zit.

OAuth2OAuth2 is een authorization framework dat er voor zorgt dat applicaties op een veilige manier toegang kunnengeven aan beveiligde inhoud van de applicatie. Het zorgt ervoor dat de applicatie die OAuth2 gebruikt zich geenzorgen moet maken over het authenticeren van een gebruiker, vermits dit wordt gedaan door third-party applicatieszoals Google of Facebook. OAuth2 bevat authorization flows voor web, desktop en mobile devices.

OAuth flow

Wanneer een user wilt inloggen, bijvoorbeeld via google, zal hij geredirect worden naar de login pagina van google,met als redirect URL de url van de applicatie waarop hij wilt inloggen. De user voert zijn credentials van google in.Nadat de user is ingelogd bij google krijgt hij of zij een melding om te accepteren dat de applicatie gegevens vanzijn google account gebruikt. Als de user dit toelaat, stuurt google een external access token (van google) terugnaar de applicatie. Het is nu de bedoeling dat deze external access token wordt nagekeken of deze wel valid is. Deapplicatie gaat nu nakijken bij google of deze wel bruikbaar is, zoja zal de gebruiker er een access token van deapplicatie zelf krijgen. Als de user deze access token in de header van de requests meegeeft zal de gebruikerbeveiligde content kunnen opvragen.

24

Figuur 14: OAuth flow (bron: docs.apigee.com)

Refresh Tokens

Een refresh token is een speciaal soort token dat gebruikt kan worden om automatisch de access token van de APIte vernieuwen. Het staat de gebruiker toe om gedurende een onbepaalde tijd ingelogd te zijn op de applicatie. Doorde access token van de API maar voor een korte tijd geldig te maken, bijvoorbeeld een half uur, wordt het voormogelijke hackers veel moeilijker om iets te gaan doen wanneer ze een access token van de API hebben kunnenonderscheppen. Wanneer de access token niet meer geldig is zal de applicatie een request naar de API sturen ommet deze refresh token een nieuwe access token op te vragen. Het aanvragen van een nieuwe token gebeurt achterde schermen, de gebruiker zal hier niets van merken.

25

Continuous IntegrationDit is een manier om automatisch code te builden op een buildserver, het zorgt ervoor dat de code automatischgebuild wordt wanneer er een commit wordt gedaan. Omdat de machine, waar later de applicatie op draait andersgeconfigureerd kan zijn (andere versie .NET framework of andere versie C#), is het belangrijk om automatisch tetesten of de code wel kan builden als men uit de development omgeving gaat. Zo kunnen bugs veel snelleropgespoord worden. Als je een paar dagen of enkele weken aan het coderen bent zonder continuous integrationzal het veel moeilijker zijn om bugs op te sporen wanneer de code niet build buiten de development omgeving. Metandere woorden kort op de bal spelen. In het stagebedrijf maken ze gebruik van TeamCity. TeamCity is een buildmanagement en continuous integration server van JetBrains. Men kan hier verschillende stappen configureren vancontinuous Integration tot continuous deployment van je applicatie.

Octopus DeployOctopus Deploy is een geautomatiseerde deployment server die men zelf moet installeren, net zoals de Team Cityserver. Octopus deploy maakt het eenvoudig om automatisch ASP.NET web applications en windows services tegaan deployen in test en productie omgevingen.

Deployment flow

De developer schrijft C# code in zijn project. Als hij deze code commit en pushed naar de version control server, zalde continuous integration server die aan het wachten is op changes de code compileren en eventueel unit testsuitvoeren. Wanneer de build gedaan is neemt de continuous integration server alle files (binaries, images, scriptsen configuratie files) samen in een NuGet package. De taak van Octopus Deploy is dan om deze NuGet packageste pushen naar de machines waarnaar gedeployed moet worden. In Octopus deploy is het de bedoeling dat je deconnectionstring naar de database automatisch verandert naar die van de omgeving waarnaar je gaat deployen.Een belangrijke die moet gebeuren voor dat de continuous integration server de NuGet packages maakt is hetveranderen van sommige omgevingsvariabelen in de javascript bestanden van de client. Wanneer dit juist gebeurtkan men instellen op de configuraties van je build server. Waar op gelet moet worden is dat al de projecten in desolution een ASP.NET web project zijn, anders kan TeamCity geen NuGet package maken van dat project. Wehebben hier even op vastgezeten omdat onze Angular app een gewone map was in plaats van een web project.

Front-end build

Vroeger gebeurde er bijna niets in de Front-end, buiten wat validatie en animaties. De dag van vandaag gebeurt erzoveel meer op de Front-end. Dit geeft problemen omtrent performantie, onderhoudbaarheid en security.

Het eerste probleem dat zich voordoet is het aantal requests dat moet gebeuren voor je webapplicatie geladen is.De projecten van nu bevatten alsmaar meer javascript en css bestanden. Als developers wordt graag gewerkt metkleine files omdat het overzichtelijk is. Dit geeft als resultaat dat je filecount in een project zeer groot kan worden.Wat als het project zo'n 150 javascript files heeft die request per request binnengehaald moeten worden? Ditsamen met het feit dat er nog eens een latency is bij elke request zorgt ervoor dat het zeer lang kan duren voor jeapp geladen is. Dit probleem kan opgelost worden door het samenvoegen van alle javascript files tot één grootbestand. Er wordt juist hetzelfde gedaan voor alle css bestanden. Op deze manier kan men het aantal requests van200 (150 js files, 50 css files) zomaar terugbrengen tot juist 2 files, wat de performantie ten goede komt. Wekunnen zelfs verder gaan dan dat, door te gaan minifyen en uglifyen van de bestanden kan de file size ook nogeens onderdrukt worden.

26

Een bijkomend probleem is dat de huidige browsers niet de laatste nieuwe features van javascript ondersteunen.Een oplossing voor dit probleem is het transpilen van javascript. Dit laat toe om de laatste nieuwe features vanjavascript te gebruiken. In ons project maken we gebruik van TypeScript, deze code kan niet werken in de browser.Om dit op te lossen compileren we onze TS code naar javascript code dat door de browsers wordt ondersteunt.Normalerwijze zitten de javascript bestanden niet in source control omdat er gebruik gemaakt wordt van TypeScript.Op de buildserver zou er dan een extra stap moeten zijn om al onze TypeScript bestanden te compileren naarjavascript. Aangezien er pas in de helft van de stage gebruik is gemaakt van TypeScript is er voor de eenvoudigheidgewoon in de developmentomgeving al getranspiled.

Om dit alles te realiseren wordt er gebruik gemaakt van een javascript task-runner. De 2 bekendste task-runnerszijn Grunt en Gulp. In het project wordt er gebruik gemaakt van gulp omdat dit allemaal wat logischer in elkaar zat.Een verschil tussen grunt en gulp is dat er bij grunt een task geconfigureerd wordt en bij gulp een task gevormdwordt door middel van code.

Gulp

Omdat men niet met elke deploy alle bovenstaande zaken handmatig zouden moeten doen hebben is er eenmanier gezocht om dit te automatiseren. Met een javascript task-runner zoals Gulp kan men deze zakenautomatiseren en zelfs met een commando uitvoeren op de build server.

Om dit alles te gaan realiseren is het belangrijk om te weten hoe Gulp juist werkt. Gulp werkt met streams, eenstream van files die door een pipeline van verschillende functions vloeit. In je gulpfile.js definieërt men deverschillende taken die men wilt uitvoeren. Men definieërt een taak in javascript die alle css files moetsamenvoegen en minifyen:

gulp.task('minify-concat-css', function () { var opts = { comments: true, spare: true }; gulp.src("index.html") .pipe(assets.css("cssTag")) .pipe(concatCSS("styles.min.css")) .pipe(minifyCSS(opts)) .pipe(gulp.dest("dist/"));});

Deze task zal uitgevoerd worden door het commando 'gulp minify-concat-css', via de code gulp.src("index.html") wordt de gulp stream gestart. In deze stream bevindt zich nu index.html. In deze file staan all onze css filesgeïncluded, het commando assets.css("cssTag") gaat al deze css files in de stream steken om vervolgens door defuncties concatCSS en minifyCSS te gaan. Uiteindelijk wordt alles weggeschreven in één file.

Met gulp is het ook mogelijk om verschillende files te gaan 'watchen'. Wanneer er iets in deze files veranderd kan erautomatisch een task uitgevoerd worden. Dit kan handig zijn om bijvoorbeeld automatisch less naar css tecompileren, het kan zelfs zover gaan dat gulp je browser triggerd met een refresh.

27

Software en ToolsTijdens de ontwikkeling van de webapplicatie is er gebruik gemaakt van verschillende software paketten en tools.Sommige tools waren van cruciaal belang om het project tot een goed einde te brengen, andere tools hebben onsleven als ontwikkelaar eenvoudiger gemaakt.

Dit zijn de gebruikte tools:

Visual StudioVisual Studio CodeSource TreeJiraFiddlerPostmanEF PowerTools

Visual StudioVisual Studio was de programmeeromgeving die het meeste gebruikt is tijdens het ontwikkelen van dewebapplicatie. Met Visual Studio is het eenvoudig om te programmeren in VB.NET, C#, C++ en F#. Visual Studiokan gebruikt worden om desktop apps te ontwikkelen, alsook ASP.NET webapplicaties, webservices, en mobileapps. Visual Studio is een echte volwaardige IDE. Het bevat alle toeters en bellen om een softwareproject tot eengoed einde te brengen. Visual Studio komt ook met IIS Express, dit is gebruikt om de webapplicatie lokaal tetesten.

Visual Studio CodeOm tijdens het ontwikkelen van het project het overzicht een beetje te kunnen behouden. Is er gekozen om onzefront-end applicatie in een andere editor te gaan bouwen. De front-end applicatie zit nog steeds in de Visual Studiosolution maar we gebruiken gewoon VScode om de code te bewerken. VScode is een lightweight IDE die gebruiktkan worden om alle soorten web en cloud applicaties te ontwikkelen. VScode is niet alleen lightweight maar nogeen cross-platform, VScode is beschikbaar op zowel Linux, OS X en Windows. VScode ondersteund meer dan 30talen op het gebied van syntax highlighting. VScode werkt zeer goed samen met TypeScript en JSlint, wat voor onstoch wel een groot voordeel is omdat onze front-end voor een groot deel geschreven is in TypeScript. Als laatste kanje VScode nog uitbreiden met verschillende extensies, zoals code snippets voor controllers, factories en services inAngularJS.

Source TreeOm samen te werken aan de webapplicatie is er gebruik gemaakt van het version control systeem GIT. Ik ben nietecht een fan van CLI, dus ik gebruik graag een Git client. Op school heb ik altijd gebruik gemaakt van SmartGitomdat mijn docent software ontwikkeling dit ook gebruikte. Tijdens de stage zag ik iedereen Source Tree gebruikendus wou ik dit ook graag uittesten. Na het uitzoeken waar alle functionaliteit zich in Source Tree bevind was ik directverkocht. Buiten het feit dat Source Tree er veel mooier uitziet lijkt ook alles veel logischer in elkaar te zitten. Desamenwerking met Bitbucket (Een ander product van Atlassian) is ook een groot pluspunt, je kan via Bitbucketrechtstreeks naar Source Tree clonen.

28

Figuur 15: Clone repository

JiraGedurende heel het project is er gebruik gemaakt van een online tool genaamd Jira. Jira is een tool die gebruiktwordt door software teams om aan bug reports, issue tracking en project management te doen. Het helpt teamsom samen betere software te schrijven. Met Jira is het mogelijk een backlog op te stellen met alle verschillendetaken, user stories en bugfixes die nog moeten gebeuren. Deze taken kunnen dan verschillende prioriteitentoegewezen krijgen om vervolgens in de vorm van een sprint gegoten te worden. Met Jira kan men goed de evolutievan je sprint opvolgen, wie is met welke task bezig etc. Ook kan men verschillende reports bekijken zoals eenburndown chart, sprint report, velocity chart en zoveel meer. Tijdens de stage is er vooral gebruik gemaakt van debacklog en de verschillende sprints. Er is binnen Jira zoveel meer om te gaan gebruiken en vereist wat oefeningom dit allemaal juist te gebruiken.

FiddlerFiddler is een HTTP debugging applicatie. Het kan HTTP en HTTPS trafiek onderscheppen waarna de developerkan gaan kijken naar de verschillende requests en responses. Fiddler is een beetje vergelijkbaar met WireSharkmaar dan voor HTTP en HTTPS trafiek.

Men kan soms heel veel tijd verliezen met het debuggen van requests die naar de back-end gestuurd worden. Menkan zich dan afvragen waarom de request niet bij de back-end terecht komt. Dit kan soms simpelweg zijn dat defront-end applicatie niet de juiste headers meestuurt. Met fiddler kan men dan bijvoorbeeld de uitgaande requestsgaan onderscheppen en analyseren. Dit is vooral de reden waarom er Fiddler gebruikt is doorheen de ontwikkelingvan de applicatie. Het heeft nog tal van andere features zoals performance testing, web session manipulation ensecurity testing.

PostmanPostman is een tool die gebruikt kan worden om API's te testen. Met postman kan je alle verschillende soortenrequests (Get, Post, Put, Patch, etc) versturen naar je API. Op deze manier kan je de API op alle gebieden testen en100% zeker zijn dat alles werkt. In principe kan heel de back-end worden ontworpen om later te kunnen beginnenaan de front-end. Ook het opsplitsen van werk tussen collega's loopt vlotter. Men wilt bijvoorbeeld een featurebouwen waarbij de gebruiker een foto kan uploaden naar de server. Men kan in principe perfect het werk verdelen,de ene ontwikkelt de back-end, de andere zorgt ervoor dat er in de front-end een file naar de back-end gestuurd kanworden. De back-end API kan met postman volledig getest worden of deze naar behoren werkt. Je bent nietafhankelijk van de persoon die bezig is met de functionaliteit in de front-end.

29

EF PowerToolsOm de database aan te maken is er gebruik gemaakt van Entity Framework Code First. Om na te kijken wat deoutput zal zijn na het schrijven van een Code First class. Kan het handig zijn om met behulp van een databaseschema te controleren of men daadwerkelijk het gewenste resultaat bekomt. Entity Framework PowerTools kanhierbij helpen. EF PowerTools is een Visual studio extensie die gebruikt kan worden om van de DbContext eendatabase schema te genereren.

Je doet dit door rechtermuisknop op de class te doen waar je DbContext in zit:

Figuur 16: EF Powertools

Nu zal EF PowerTools een database schema genereren:

Figuur 17: DB Schema

30

Involved PortalGedurende eén week van de stage heb ik niet aan de bachelorproef gewerkt. Er werd gevraagd om gedurende eenweek aan een intern project van Involved te werken. Het Involved Portal wordt elke maand gebruikt om degetekende timesheets en facturen van zowel interne als externe consultants up te loaden. Er werd ons gevraagdom de bestaande applicatie uit te breiden met een Wiki. Het was de bedoeling dat de admin en managers van hetInvolved Portal deze Wiki kunnen beheren. Dit zou moeten gebeuren met een soort van 'custom' contentmanagement systeem.

MeteorJSHet Involved Portal is gemaakt met MeteorJS. We hadden allebei nog geen ervaring met dit framework en daaromleek het juist zo interessant. We zijn direct begonnen met een course op pluralsight te kijken, al snel was duidelijkdat MeteorJS niet zomaar een Javascript framework is.

MeteorJS is een full-stack Javascript framework, gebaseerd op Node.js. Full-stack wilt zeggen dat er voor zowel defront-end en de back-end binnen hetzelfde framework gewerkt wordt. Met MeteorJS kan men zeer snel veel featuresbouwen en de applicatie is nog eens cross-platform ook. MeteorJS maakt standaard gebruik van MongoDB. Meteormaakt gebruik van het Distributed Data Protocol om via een publish en subscribe patroon automatisch data tesynchroniseren tussen verschillende clients. Het synchroniseren van data tussen clients en server gebeurt real-time omdat de communicatie gebeurt via websockets. Als websockets niet beschikbaar zijn zal Meteor automatischgebruik maken van long-polling.

Distributed Data Protocol (DDP)

Op de server kan men met behulp van Meteor.publish de collection of slechts een deel van de collectionbeschikbaar stellen. Op de client kan men dan met Meteor.subscribe abonneren op publications die op de serverzijn ingesteld. Hierdoor krijgt men de data binnen, en zal deze constant up to date gehouden worden. Deimplementatie van DDP zorgt ervoor dat dit kan werken. DDP zal op een bepaalde manier gaan kijken of erveranderingen zijn in de database. DDP zal op zijn beurt deze veranderingen nemen en deze naar de verschillendeclients sturen.

Shared Code

Met MeteorJS is het mogelijk om gemeenschapelijke code te hebben tussen client en server. In het begin lijkt ditwat verwarrend omdat het toch wel een totaal andere manier van werken is. Voor sommige taken zoalsbijvoorbeeld form-data validatie is het wel handig dat je gemeenschapelijke code kan hebben. Zo moet men nietvoor de client en server afzonderlijk de code schrijven voor het valideren van ingevulde data door de gebruiker. Hetis zelfs mogelijk om gemeenschapelijke code te hebben in dezelfde file. Met behulp van if(Meteor.isClient) en if(Meteor.isServer) kan men bepalen welke code er op de client of server moet werken. Men kan dit ook bepalendoor de juiste mappenstructuur te hanteren in het project:

/client - werkt enkel op client/server - werkt enkel op server/private - assets voor server/public - static files/tests - werkt nergens/anythingelse - werkt op client EN server/main.* - wordt als laatste gerund

31

MiniMongo

Minimongo is implementatie van bijna de hele MongoDB API in de browser, het is een soort van MongoDBemulator. Men kan hier data invoegen, zoeken, sorteren en updaten. Het handige aan MiniMongo is dat men deapplicatie offline kan blijven gebruiken. Alle data dat normaal zou verstuurd worden naar MongoDB, zal nu in deMiniMongo komen. Vanaf dat de connectie met het internet terug is zal de MiniMongo gaan synchroniseren met deMongoDB op de server.

Rapid Prototyping

Met MeteorJS kan men snel een werkende applicatie bouwen. Het is echt verbazingwekkend hoe snel men ietshiermee kan bouwen. Dit hadden we al door tijdens het kijken van de pluralsight course, en werd nog eenbevestigd tijdens het ontwikkelen van de Wiki. Het CrowdShare project dat is gebouwd met Web API en AngularJShad met MeteorJS op een veel sneller tempo kunnen ontwikkeld kunnen worden. Ik denk zelfs dat het juist is om tezeggen dat de tijd die gestoken zou worden in het developpen tot 3 keer minder kan zijn. Dit is te verklaren door deaanwezigheid van duizenden packages die beschikbaar zijn om het ontwikkelen te versnellen. Het leuke aan dezepackages is dat deze op een "magische" wijze functionaliteit geven aan de applicatie. Ik denk dat magisch wel eenjuist woord is, omdat deze packages zowel code toevoegen op zowel client als op de server.

Meteor packages

Op atmospherejs.com kan men tussen de beschikbare packages zoeken. Op het moment van schrijven zijn er10672 packages beschikbaar. Hieronder worden de twee packages die gebruikt zijn bij het ontwikkelen van de Wikibeschreven.

AutoForm met WYSIWYG

AutoForm is een Meteor package dat UI compontents en helpers toevoegt om basis CRUD forms te bouwen. Hetgebruik van autoform maakt het leven als developer zoveel eenvoudiger. Het normaal repitieve werk van hetbouwen van CRUD forms wordt nu gereduceerd tot enkele lijnen code in je template en een kleine configuratie. Code nodig om een CRUD form met WYSIWYG (What you see is what you get) te bouwen:

Figuur 17: Autoform code

32

WikiTopics.attachSchema(new SimpleSchema({ title: { type: String, label: "Title" }, content: { type: String, label: "Content", autoform: { afFieldInput: { type: 'summernote', settings: { height: "500px" } } } } }));

Resultaat:

Figuur 17: WYSIWYG editor

33

Resultaten

DoelstellingenHet was de bedoeling om een webapplicatie te ontwikkelen waarop gebruikers spullen met elkaar kunnen delen.De gebruiker zou kunnen inloggen via een lokaal account of via google+. Vanaf dat de gebruiker geregistreerd waszou hij of zij kunnen vragen om bepaalde spullen of ze zelf aanbieden. Het moest een applicatie worden waaropmensen die andere personen uit de nood willen helpen met elkaar in contact zou brengen.

De grootste doelstellingen:

Opzetten van de ArchitectuurGebruikers authenticeren via Google+Gebruiker kan zoekertjes plaatsenGebruiker kan spullen aanbiedenGebruikers met elkaar in contact brengenEen manier bedenken en implementeren waarop gebruikers spullen kunnen vindenEen applicatie ontwikkelen die er goed uitzietEen eerste versie online krijgenVeel bijleren

Behaalde doelstellingen

Alle doelstellingen zijn volledig afgerond. Er is een applicatie ontwikkeld die na wat tweaking in gebruik genomenkan worden.

User Stories

Sprint 1

Dit was een inleidende sprint om de architectuur van de applicatie op te zetten.

Entity Framework gebruiken om te connecteren naar de databaseDashboard tabel aanmaken met code firstWEB API Project aanmakenUnit of Work Repository Pattern gebruiken om te connecteren naar de databaseWeb API Dashboard controller aanmakenAanmaken web applicatie met AngularJSAls men naar de website surft moet men de gegevens die in de dashboard tabel zitten zienVoeg een Dependency Injection Container toe.

34

Sprint 2

Als je als gebruiker op registreren klikt dan moet je je google account gegevens ingevenEens je je gegevens correct hebt ingegeven dan halen we de voornaam, achternaam, email en eventueel fotoop vanuit het google profielAls een gebruiker aanmeld met zijn google gegevens gaan we kijken of die al bestaatAls de gebruiker voor de eerste keer is aangemeld in de applicatie moet die een aantal velden vervolledigenop zijn profiel pagina.Afmelden

Sprint 3

Als gebruiker wil ik zoekertjes kunnen aanmakenAls de gebruiker op het dashboard komt ziet hij een selectie van zoekertjesDe gebruiker kan op een zoekertje klikken om meer informatie te zienDe gebruiker kan vanuit het dashboard naar een lijst gaan van al de zoekertjesDe gebruiker kan haar of zijn zoekertjes bekijken

Sprint 4

De gebruiker kan vanuit de detailpagina van een zoekertje de andere persoon contacterenDe gebruiker kan via de lijst van zijn eigen zoekertjes een zoekertje verwijderenMaterial Design introducerenAls gebruiker wil ik met een gesture het menu laten openen

Sprint 5

Deze sprint is gebruikt om bugs op te lossen en de applicatie te optimaliseren.

Sprint 6

Als gebruiker wil ik een detailpagina van een item met alle detailinformatie kunnen bekijkenAls gebruiker wil ik via een contactpagina een aanbieder een private message via email kunnen sturen.Als gebruiker wil ik een door mij aangeboden item kunnen verwijderen.Als gebruiker wil ik een nieuw aangeboden item kunnen toevoegenAls gebruiker wil ik een door mij aangeboden item kunnen wijzigenAls gebruiker wil ik een overzicht van alle door mij aangeboden items kunnen bekijkenAls gebruiker wil ik een overzicht met alle in mijn buurt aangeboden itemsAls gebruiker wil ik op mijn dashboard de drie meest populaire aangeboden en gevraagde items zien

Sprint 7

Als gebruiker wil ik naar buurten kunnen zoeken op basis van naamAls gebruiker wil ik de detailinformatie van een buurt kunnen bekijkenAls gebruiker wil ik een buurt als "mijn buurt" kunnen instellenAls gebruiker wil ik alle personen binnen een buurt kunnen raadplegenAls gebruiker wil ik alle aangeboden items binnen een buurt kunnen raadplegenAls gebruiker wil ik het overzicht van buurten op locatie gesorteerd zienAls gebruiker wil ik mijn eigen buurt kunnen toevoegen en bewerkenFront-end build met gulp

35

ConclusieVoor het aanvangen van mijn stage had ik geen flauw idee van hoe een software project nu echt in elkaar zou zitten.Hiermee bedoel ik niet enkel de gebruikte technologiën of design patterns, maar ook de weg die afgelegd moetworden om een project tot een goed einde te brengen. Op school hebben we enkel de basis meegekregen. Wehebben op school geleerd hoe we object georiënteerd moeten programmeren, welke voordelen dit heeft endergelijke. Ook hebben we met verschillende projecten op een Agile manier leren werken, maar telkens weer nietgoed of niet helemaal toegepast. Ik vind het soms wel spijtig dat we op deze zaken niet wat dieper zijn ingegaan.Dat we ons niet overal in verdiept hebben is eigenlijk wel logisch omdat we in een zeer brede richting zitten waarnooit alles tot in detail bekeken kan worden. Om deze 'achterstand' weg te werken was deze stage de perfecteoplossing.

Ik heb tijdens mijn stage zoveel zaken bijgeleerd. Van belangrijke frameworks zoals ASP.NET, en Entity Frameworktot design patterns zoals dependency injection en unit of work repository pattern. Op het gebied van back-end wasC# het enige waar ik al enige ervaring mee had. Daarom was de uitdaging voor mij groot genoeg om aan te slag tegaan met deze frameworks. Ik had al eens een Rest API opgezet met behulp van Node.js en Express.js. Maar eenAPI bouwen met ASP.NET Web Api en C# lijkt voor mij veel logischer en overzichtelijker. Bijkomend was het ookhandig omdat je visual studio kon gebruiken met de verschillende tools en features, en vooral de intellisense.

Op het gebied van front-end development zijn mijn ogen ook open gegaan. Het is een full-time job om op de hoogtete blijven over alles wat met front-end development te maken heeft. De javascript frameworks springen alspaddestoelen uit de grond. Wat ik ook niet wist is het feit dat de browsers niet de laatste nieuwe features vanjavascript ondersteunen. En al zeker niet dat er transpilers gebruikt worden om toch maar deze features 'na tebootsen'.

Voor mij is deze stage de belangrijkste periode geweest in mijn opleiding. Het is een ideale manier om een soortvan eerste werkervaring op te doen en jezelf voor te bereiden op het echte werk. Als je keuze van stagebedrijf ooknog eens super goed meevalt, vliegt de tijd echt zo voorbij. Als het van mij zou afhangen had ik liever heel hetlaatste jaar een stage gedaan.

36

Bibliografiehttp://joelabrahamsson.com/inversion-of-control-an-introduction-with-examples-in-net/ - Inversion-of-controlhttps://app.pluralsight.com/library/courses/inversion-of-control/table-of-contents - Inversion-of-controlhttps://www.youtube.com/watch?v=CWwe9Z0Gyew - Inversion-of-controlhttps://www.youtube.com/watch?v=FuAhnqSDe-o - Inversion-of-controlhttps://www.youtube.com/watch?v=rtXpYpZdOzM - Unit of work repositoryhttp://www.asp.net/web-api/overview/security/authentication-and-authorization-in-aspnet-web-apihttp://www.asp.net/web-api/overview/security/individual-accounts-in-web-apihttp://bitoftech.net/2014/06/01/token-based-authentication-asp-net-web-api-2-owin-asp-net-identity/ - Tokenbased authenticationhttp://www.asp.net/identity/overview/getting-started/introduction-to-aspnet-identity - ASP.NET Identityhttps://angularjs.org/ - AngularJShttps://www.typescriptlang.org/docs/tutorial.html - Typescripthttps://ngmap.github.io/ - ng-map google maps wrapperhttps://github.com/SignalR/SignalR/wiki - SignalRhttp://www.asp.net/signalr/overview/getting-started/introduction-to-signalr - SignalRhttps://getmdl.io/ - Material design lite

37