Het Javascript ecosysteem biedt krachtige oplossingen voor Fullstack web- en mobiele applicaties. Backends gedreven door Node.js en multiplatform frontends gebouwd in moderne frameworks als React en Angular vormen een groot deel van het moderne applicatielandschap voor bedrijven in o.a. Retail, E-commerce en Logistiek. Onze Fullstack experts maken gebruik van de laatste technologieën om web-apps zo snel mogelijk te laden op de apparaten van je gebruikers. Essentieel, in een wereld waar elke seconde een verschil maakt. We geloven bij LINKIT in het toepassen van design thinking in een vroeg stadium, om zo niet alleen een snelle en goede web-app te ontwikkelen, maar ook een die de gebruiker echt dient! 

Solution Advisor

Maaike Stoops 2.jpg

Maaike Stoops.jpg

volgens de laatste standaarden en met de beste performance

Geoptimaliseede mobile-first webapplicaties

Het is nu, terwijl de coronacrisis in alle hevigheid woedt, nauwelijks voor te stellen. Maar tot kort was het voor restaurants en cafés een forse uitdaging om geschikt personeel te vinden en zo hun serviceniveau op peil te houden. Een mogelijke oplossing daarvoor is digitalisering, waardoor restaurantbezoekers bijvoorbeeld zelf bestellen en afrekenen. Maar hoe je dat vervolgens doet, zonder af te doen aan de klantvriendelijkheid en klantbeleving, is nog een hele uitdaging. Bij restaurantapp MyDish hebben ze er alle vertrouwen in dat het wel kan. Met UX-design van LINKIT als ‘geheime wapen’. 

### Bestellen via de smartphone
Simon Bosschieter, de initiatiefnemer van MyDish kwam in februari 2020 op het idee toen hij uit eten ging bij een sushitent in Amsterdam. “Je kon daar zelf je eten bestellen via een iPad. Een leuk idee, alleen had je geen overzicht van het menu, die stond dan weer op een kaart. En ook had je geen idee van wat de rest aan het bestellen was. En achteraf gezien is het met corona natuurlijk niet handig om met een apparaat te werken waar vele anderen ook aan hebben gezeten. Ik miste de interactie en bedacht me dat dit veel beter kan.” 

### MyDish
“Op die manier kwam ik op het idee van MyDish. Een restaurantapp waarmee je via je eigen telefoon door middel van het scannen van een QR-code kunt bestellen en afrekenen. Zeker als het druk is moeten klanten hier vaak lang op wachten. En met corona is het bovendien heel prettig dat obers niet langs de tafels hoeven te lopen. Via de app kun je ook zien wat jouw tafelgenoten bestellen, kun je heel makkelijk gesplitst betalen en zelfs een bonnetje krijgen. Ideaal voor Nederlanders dus!”

### Op zoek naar digitale hulp
Arne Kleijn en Tim Jongens, beide eigenaar van restaurant IJver in Amsterdam hadden op hun beurt drie jaar daarvoor al onderzoek gedaan naar de mogelijkheden van een app voor hun restaurant. Samen met een aantal compagnons en andere restauranteigenaren in Amsterdam. Was het mogelijk om op die manier de business makkelijker te maken voor de eigenaren? Al snel kwamen ze erachter dat het maken van een dergelijke app enorm veel moeite, tijd en geld en expertise vergt. Niemand bood het aan en een geschikt product was simpelweg niet te vinden.  

### Lockdown
Toen kwam de lockdown en kwam er opnieuw behoefte aan een app, maar deze keer vanuit hygiëne perspectief. Hoe zorg je ervoor dat je het aantal klantcontacten zoveel mogelijk beperkt? Tim besloot met dezelfde groep opnieuw bij bedrijven langs te gaan om te kijken of er inmiddels een geschikte app op de markt was. 

### Match
Simon: “Op een uitgestorven Koningsdag liep ik langs het gesloten restaurant van Tim, die ik nog kende van vroeger. Toen ik zijn gesloten restaurant zag besloot ik mijn idee bij hem te gaan pitchen. Tim was enthousiast over MyDish en van het één kwam het ander. Meer mensen haakten aan en we vroegen aan developer Vincent van Doesburg om door middel van een Proof of Concept (PoC) te onderzoeken of de app technisch haalbaar was. Dat bleek inderdaad zo te zijn, waarna ook LINKIT instapte om de MVP (Minimal Viable Product) uit te gaan werken. MyDish ging van start.  

### Charlotte 
Dat was ook het moment dat UX-designer Charlotte Postma van LINKIT met MyDish aan de slag ging. “Als UX-designer vertegenwoordig ik eigenlijk de rol van de klant tijdens het ontwikkelingsproces,” legt ze uit. “En in het geval van MyDish is dat zelfs een dubbelrol; zowel die van klant (restauranteigenaren) als die van de gast. Ik probeer ervoor te zorgen dat de gebruikerservaring zo goed mogelijk is, juist voordat de app wordt gelanceerd.

### De makkelijkste route
Op zich lijkt dat vanzelfsprekend, maar dat is het niet vindt Charlotte. “Vanuit de business ontstaat vaak het idee en ‘moet’ het ook echt op die manier worden uitgevoerd. Hoewel dat idee goed kan zijn, kunnen op detailniveau inconsistenties ontstaan waardoor de gebruiksvriendelijkheid soms ver te zoeken is. Hetzelfde geldt voor de ontwikkelaars. Vaak denken zij heus wel aan het belang van de gebruiker, maar als het technisch ingewikkeld wordt komen ze soms toch in de verleiding om voor de makkelijkste route te kiezen. Het is aan mij om de gebruikservaring te bewaken, waarbij ik ook heus wel gevoelig ben voor de onderliggende (technische) discussies.”

### Werk aan de winkel
Bij MyDish wilde iedereen dergelijke problemen voorkomen. Charlotte: “De basis, in de vorm van PoC, stond er al toen ik binnenkwam. Het eerste wat ik dan doe is simpel kijken wat ik er vanuit gebruikersperspectief van vind. Zijn dingen logisch? Of juist niet? Vrijwel altijd vind je dingen die (nog) niet kloppen. Zo stonden bij MyDish in het begin de knoppen niet bij alle pagina’s op dezelfde plek en was de samenhang en beleving nog niet voldoende. Dat kan natuurlijk niet, dus daar ben ik mee begonnen.”

### Dubbel testen
De volgende stap in het UX-proces is testen. Veel testen. Bij MyDish een extra uitdaging omdat er niet één maar twee gebruikersgroepen zijn. Charlotte: “Je hebt zowel een interface voor de gast die de app gebruikt om te bestellen, maar ook eentje voor de restauranteigenaar die de bestellingen moeten verwerken. Beide zijn even belangrijk. Voor mij een leuke opdracht omdat ik dus dubbel moest testen.”

### Het zakelijk belang van UX
Simon onderstreept het belang van UX vanuit zijn invalshoek. “Horeca- en retailondernemers zijn vaak van het type rouwdouwer. Ze zijn continue bezig met het pleasen van gasten, waardoor kwaliteit enorm belangrijk is. Als iets goed werkt dan omarmen ze je en als het niet gelijk goed werkt dan hoeven ze je niet. Veel ruimte voor fouten is er dus niet. Zowel de restaurantbezoeker als de gast moet MyDish echt zien als een hospitality app die hen meerwaarde biedt. Een app die bruikbaar is in alle soorten horeca. Van simpele bar tot Michelinster tot aan grote events. Mensen willen vaak iets vieren en daarbij is de beleving erg belangrijk. Met MyDish concurreer als je het ware met de ober. De gebruiksvriendelijkheid moet dus top zijn en UX-design is daarvoor erg belangrijk.” 

### ‘Verlengstuk’ van de kassa
De restauranteigenaar op zijn beurt moet na het bestellen niet opgescheept zitten met een online bestellijst, die hij of zij vervolgens weer over moet tikken in het kassasysteem. MyDish wordt dan ook geïntegreerd in het kassasysteem, zodat alles automatisch gaat en het restaurant zich meer kan richten op gastvrijheid. Simon: “Daarmee wordt Mydish als het ware ook een verlengstuk van het kassasysteem. Vrijwel alle providers van kassasystemen zijn hier enthousiast over. De meesten van hen vinden MyDish baanbrekend.”

### Gebruikerstesten
De belangen van Charlotte haar werk zijn dus groot, wat precies de reden is waarom ze bij MyDish alle ruimte krijgt om verbeteringen voor te stellen. “We zitten inmiddels in de laatste fase voor de MVP (Minimal Viable Product) klaar is en daar horen ook de echt serieuze gebruikerstesten bij. Tijdens zo’n test volgt Charlotte het gedrag, en de daaruit voortkomende keuzes van relevante proefpersonen, om zo te achterhalen wat er nog verbeterd kan worden. 

### Testen en verbeteren
“Bij MyDish is het bijvoorbeeld belangrijk dat de restaurantbezoekers makkelijk door het bestelproces heen rollen. Is het direct duidelijk hoe ze moeten bestellen? En vervolgens kunnen afrekenen? Door continu te testen, te verbeteren en weer te testen kun je de beleving steeds verder verbeteren. Bij de laatste grote gebruikerstest verliep het proces vrijwel vlekkeloos.”

### De opbrengst van UX
“Aan de kant van de restauranteigenaars kwam ik nog wel een aantal verbeterpunten tegen. Bijvoorbeeld dat je beter het woord ‘tafel’ kunt gebruiken in plaats van het woord ‘sessie’, dat in de IT gebruikelijk is. En bij de laatste test bleken testers zonder dat ze het doorhadden de hoofd- en subcategorieën van het menu door elkaar te halen. Dan heb je bijvoorbeeld hoofdgerechten als hoofdcategorie met daaronder nog subcategorieën zoals burgers of wraps. Het gebeurde tijdens de test nog te vaak dat de burgers onbewust als hoofdcategorie werden neergezet, dus daar was nog wat werk aan de winkel. Het zijn kleine dingen, maar we willen dit perfect doen. En juist met UX haal je dit soort punten er op tijd uit.”

### Juist voor de startup
“Natuurlijk kun je live gaan zonder UX,” geeft Charlotte tot slot aan. “Er zijn nog steeds genoeg bedrijven die dat doen, maar ik vraag me af of dat een succesverhaal wordt. Je kunt een eerste indruk maar één keer achterlaten. Als het slecht is ben je die kans kwijt. En juist voor kleine bedrijven is UX naar mijn idee extra belangrijk. Grote bedrijven hebben vaak nog wel een bekende naam die mensen trekt. Startups, zoals MyDish, moeten het hebben van de kwaliteit. En zonder UX is dat lastig te leveren.”

*Wil je weten wat LINKIT voor jouw bedrijf kan doen met UX? Neem dan contact op met Charlotte voor meer informatie. Of lees onze [whitepaper](https://www.linkit.nl/cases/Een-app-voor-de-horeca-of-retail-Die-moet-gelijk-goed-zijn!?whitepaper=open) over het belang van goede web performance voor jouw website.* 

large_IJver Amsterdam-7306.jpg

medium_IJver Amsterdam-7306.jpg

small_IJver Amsterdam-7306.jpg

thumbnail_IJver Amsterdam-7306.jpg

IJver Amsterdam-7306.jpg

Hoe UX-design restaurantapp MyDish een kickstart geeft   

Een app voor de horeca of retail? Die moet gelijk goed zijn!

Download whitepaper 'Waarom optimale mobiele webprestaties een wereld van verschil maken!'

Het is voor restaurants en cafés een forse uitdaging om geschikt personeel te vinden en zo hun serviceniveau op peil te houden. Een mogelijke oplossing daarvoor is digitalisering, waardoor restaurantbezoekers zelf bestellen en afrekenen. Maar hoe je dat vervolgens doet, zonder af te doen aan de klantvriendelijkheid en klantbeleving, is nog een hele uitdaging. Bij restaurantapp MyDish hebben ze er alle vertrouwen in dat het wel kan. Met UX-design van LINKIT als ‘geheime wapen’ en Fullstack skills als het 'werkpaard'.

Hoe UX-design restaurantapp MyDish een kickstart geeft

Jumbo Supermarkten.png

Jumbo Supermarkten

thumbnail_logo_mydish_witgoud_gradient_2.png

logo_mydish_witgoud_gradient_2.png

MyDish

bookspot bv copy.png

Bookspot BV

Klanten die we blij maken

Het klinkt als een ridicule vraag. Als je een webformulier hebt en je wilt graag dat bezoekers deze versturen, moet de verzendknop dan rood of juist groen zijn? Het punt is dat dit helemaal geen ridicule vraag is. Het is een keuze die serieuze impact kan hebben op de hoeveelheid leads die dit formulier zal opleveren. Wil je weten wat de beste keuze is en belangrijker nog, hoe je daar achter komt? Ontdek het aan de hand van deze drie tips!

### 1.	Kleine veranderingen kunnen leiden tot grote successen

Om er achter te komen wat het beste werkt, rood of groen, moet je een A/B test uitvoeren. Het werkt als volgt. Je legt het formulier met de groene knop voor aan een willekeurige testgroep, groep A en kijkt wat ze doen. Vervolgens leg je hetzelfde formulier, maar dan met een rode knop, voor aan een tweede testgroep. Groep B.  Na een paar weken testen kom je er achter dat in groep A (groene knop) dertig procent het formulier verzond, terwijl dit in groep B (rood) veertig procent was. Duidelijk bewijs dat rood de beste kleur is. 

En ja, iets simpels als de kleur van een knop kan werkelijk tot zulke grote verschillen leiden. Kleuren, figuren, nummers en grootte zijn allemaal belangrijk in ons onderbewustzijn. Ook bij onszelf trouwens. Op het moment dat je aan de gang gaat met het ontwerpen van bijvoorbeeld een website komen ze vanzelf naar de oppervlakte. Maar om zeker te weten dat je aannames ook echt kloppen kan je dus het beste een A/B test uitvoeren. 

### 2.	Testen totdat je erbij neervalt

Als alleen al het veranderen van de kleur van één knop tot significante verbeteringen kan leiden, hoe veel meer kun je dan bereiken als je de hele interface van je website zou onderzoeken? Behoorlijk wat waarschijnlijk! Veel bedrijven investeren veel geld in advertenties en SEO om klanten naar hun website te trekken, maar vergeten om hetzelfde te besteden aan de daadwerkelijke conversie waarmee het geld wordt verdiend. De beste tool die je daarvoor hebt is zonder twijfel de A/B test.

Dus, als tweede tip, test niet alleen voor en net na de lancering van je website, maar blijf het doen. Het uitvoeren van A/B testen moet onderdeel zijn van het dagelijkse werkritme. Daar komt bij dat de huidige markt zeer veranderlijk is. Wat vandaag werkt, kan morgen weer anders zijn. De resultaten van een test van drie jaar oud zijn dus zeker niet betrouwbaar. Dit betekent dat als je eindelijk alle 216 knoppen van je site hebt onderzocht, je dus weer rustig van vooraf aan kunt beginnen. 

### 3.	Voldoende de tijd nemen

Zoals je wellicht weet moet een testgroep groot genoeg zijn voor het behalen van betrouwbare testresultaten. Als je slechts vijf mensen hebt, waarvan er vier toevallig een voorliefde hebben voor rood omdat ze dan gelijk moeten denken aan de bos rode rozen die ze gisteren voor hun partner hebben gekocht, dan heb je een probleem. De beste manier om dit te ondervangen is door de tijd te nemen. Hoe langer je testen laat duren, hoe betrouwbaarder de uitkomst wordt. Als je in week zes merkt dat de uitkomt nauwelijks afwijkt van die uit week vier en vijf, weet je zeker dat je goed zit. 
 
*Wil je meer weten over A/B testen, of kun je wel wat hulp gebruiken bij de keuze tussen rood en groen? Neem dan contact op met één van onze experts voor meer informatie.*


WEB-ABtesting.jpg

Welke kleur op je UI? Heb je moeite met het kiezen tussen groen of rood? Laat je users dit doen door middel van A/B testen met behulp van deze 3 tips!

A/B testen als een pro? Het kan, met deze drie tips!

Niet alles dat er op papier goed uit ziet, is dat ook in de realiteit. Dit geldt zeker ook bij het ontwikkelingen van websites, webapplicaties en meer. Om zijn of haar voortgang te valideren voert een ontwikkelaar dan ook continu testen uit. Dit wordt ook wel stresstesting genoemd. Gelukkig zijn de meeste tegenwoordig geautomatiseerd. Dat geldt echter niet voor de belangrijkste component: de test zelf. 

### Testen in drievoud
Het testen van een webapp gebeurt meestal in de drie lagen, weergegeven in onderstaande piramide. 

![test pyramid](https://s3.eu-west-1.amazonaws.com/nl.linkit.production.user-data/test_pyramid_2e07f832df.jpeg)

Door Unit testing controleer je of bijvoorbeeld een verzendknop doet waar hij voor gemaakt is. Je test één simpele functie, simpelweg om te checken of hij goed geprogrammeerd is. 

Heb je echter een online formulier, dan wil je natuurlijk ook controleren of alle vereiste invulvelden wel ingevuld zijn voordat je kunt verzenden. Het testen van een combinatie van functies wordt ook wel integration testing genoemd. 

De laatste vorm van testen probeert *menselijk gedrag* (user interface) te simuleren. Het test iedere functie in het formulier en iedere stap die daaraan verbonden is. Ieder veld, iedere manier om ze in te vullen, het versturen van het formulier en zelfs het ontvangen van de automatisch verstuurde ontvangstbrief.

### Automatisch testen bespaart tijd
Je kunt je ongetwijfeld voorstellen dat het handmatig uitvoeren van al deze stresstesten veel tijd in beslag neemt. Gelukkig zijn er tegenwoordig veel applicaties beschikbaar die het uitvoeren van de testen automatiseren. Gemiddeld verlaagt dit de bestede hoeveelheid tijd met 36 procent. Een aanzienlijk percentage. Het zorgt er bovendien voor dat ieder stukje nieuwe code automatisch wordt gecontroleerd en dus niet per ongeluk de hele app in de testmodus laat crashen.  

Het hebben en uitvoeren van een stresstest voor je webapp is dus een noodzaak wanneer je er eentje bouwt. Het bespaart veel tijd en creëert extra veiligheid. 

### Stresstest bouwen 
Hiermee is het verhaal echter nog niet ten einde. Er is namelijk één ding dat niet kan worden geautomatiseerd en dat veel kennis en ervaring vereist: het bouwen van de test. 

### Alle factoren begrijpen
Om een voorbeeld te geven. Als je realistisch menselijk gedrag wil nabootsen, dan moet je wel weten hoe jouw doelgroep zich gedraagt. Zo gaat een ouder persoon anders om met een app dan een jonger persoon, waardoor een andere aanpak en gebruikservaring nodig is. Alles bij elkaar zijn er vele van dit soort factoren waar je rekening mee moet houden wanneer je een test bouwt. 

### Het dataprobleem
Verder kan ook het testen van de ‘pijpleidingen’ die de data als het ware transporteren tussen de server en de frontend een uitdaging zijn. In veel gevallen wijkt de testdata namelijk af van wat er in de praktijk gebruikt zal worden. Dit kan ervoor zorgen dat de testresultaten worden gemanipuleerd. Er zeker van zijn dat de test zo dicht mogelijk in de buurt komt van werkelijk menselijk gedrag is duidelijk geen simpele opdracht en vereist veel inzicht en ervaring. 

### Slimme investering
Wil je er zeker van zijn dat jouw webapp optimaal gaat functioneren, neem dan geen halve maatregelen. Zorg er ten eerste voor dat alle voortgang drievoudig wordt getest. Zorg er ten tweede voor dat dit zoveel mogelijk automatisch wordt uitgevoerd en tot slot: bespaar niet in de kosten en tijd bij het (laten) bouwen van de test. Bovendien zal deze test een stuk langer meegaan dan alleen het ontwerpproces. Ook wanneer je jouw app gaat updaten of upgraden zal hij zijn waarde zonder meer bewijzen. 

*Wil je meer weten over het belang van testen of kun je wel wat extra ervaring en kennis gebruiken op dit gebied? Dan kunnen we je zeker helpen! Neem contact op met één van onze experts voor meer informatie. Ben je benieuwd naar een voorbeeld uit de praktijk? Lees dan vooral [onze business case](/cases/Een-digitale-'gereedschapskist'-maken-voor-de-mecaniciens-van-KLM) over KLM voor meer inspiratie.*

WEB-stresstest.jpg

Hoe test je je app? Wil je dat je webapp optimaal functioneert? Neem dan geen halve maatregelen en maak gebruik van unit, integration en unit interface testing.

Waarom stresstesting alleen niet voldoende is voor je webapp!

Op sommige vragen is meer dan één antwoord mogelijk. Zo is er de makkelijke: waarom een mobiele website belangrijker zou moeten zijn dan een desktopsite? Omdat de meerderheid van je bezoekers niet hun computer gebruiken (42%), maar hun mobiel (52%). Meer nog: 40% gebruikt alleen maar zijn of haar telefoon bij het bezoeken van websites. 

Wanneer je een website ontwikkelt is het dus belangrijk om voorrang te geven aan de ontwikkeling van je mobiele website. Tegelijkertijd gebeurt het in de praktijk vaak toch niet. Waarom? Dat is het moeilijke antwoord!

### Makkelijke resultaten krijgen voorrang
Misschien herken je het wel bij jezelf, of anders bij je buurman. De neiging om altijd te streven naar behalen van makkelijke resultaten. In veel gevallen is dit prima, maar niet wanneer je een website ontwikkelt. In veel gevallen, zowel bij ontwikkelaars als klanten, is de desktopsite gewoon veel aantrekkelijker. Letterlijk, omdat de pagina’s groter zijn en het resultaat daardoor visueel aantrekkelijker is. Maar ook figuurlijk omdat het ontwikkelen en implementeren van de functionaliteiten relatief makkelijk is. Bovendien is het bij een desktopsite makkelijker om met creatieve oplossingen te komen, aangezien er meer ruimte beschikbaar is. Alles bij elkaar zorgt dit ervoor dat de desktopsite de makkelijkste manier is om je opdrachtgever tevreden te stellen. 

### Van desktop naar mobiel  
Wanneer de supermooi ogende desktop site echter klaar is, is het vaak erg moeilijk én vooral duur om vervolgens een mobiele variant te ontwikkelen die er net zo gaaf uitziet. Het scherm is een stuk kleiner en in plaats van een muis gebruik je vingers, wat er voor zorgt dat de hele gebruikservaring totaal verandert. In veel gevallen is het resultaat een stuk minder dan de originele desktopsite. 

Om mobiel echt voorop te zetten, moet je eerst mobiel ontwikkelen. Wees dus niet tevreden met (alleen) een mooie desktopsite. Je doel moet altijd de best mogelijke gebruikservaring zijn: mobiel eerst en desktop als tweede. 

### Mobiel op de eerste plaats
Om dit voor elkaar te krijgen moet je vooral zaken veranderen in je organisatie. Zo moet de mobiel-eerst-strategie door je hele bedrijf heen omarmd worden. Zowel vanuit klantperspectief als bij de programmeurs. Een goede manier om dit te bereiken is door een ‘ambassadeur’ in het ontwikkelteam te plaatsen wiens taak het is om mobiel gedurende het gehele ontwikkel en design traject prioriteit te geven. Iemand die er voor zorgt dat het beste van de middelen, tijd, energie en creativiteit in het ontwikkelen van een supergave mobiele website wordt gestopt. 

Aan het einde van de rit is er een groot verschil tussen een goede en een fantastische mobiele site. Kleine veranderingen in design en functionaliteit kunnen grote veranderingen teweeg brengen in het gedrag van jouw bezoekers. Hierdoor vergroot je de waarde van de website voor jouw bedrijf, simpelweg door mobiel bovenaan te plaatsen. 

*Wil jij ook een supergave mobiele website? Of ben je op zoek naar bruikbaar advies? Neem dan contact met één van onze experts voor meer informatie. Of lees [onze business case](/cases/Meer-entertainment-met-de-nieuwe-webshop-van-BookSpot) 'Meer entertainment met de nieuwe webshop van Bookspot' voor meer inspiratie.*


WEB-mobilefirst.jpg

Mobile first, desktop second! Lees waarom je mobiel de voorrang geeft tijdens het ontwikkelen van je website.

Mobile first, desktop second! Maar waarom eigenlijk?

Artikelen over Fullstack development

JavaScript software developer

Ilker Altin 2.jpg

Ilker Altin.jpg

Je bent al een echte Explorer! Door je nieuwsgierigheid krijg je een uniek inkijkje in de spannende expedities van onze FullStack squad! Schrijf je hieronder in voor onze talent community en ontdek wie wie is, leer meer over onze ambities, projecten en expertise en ontdek hoe je bij LINKIT de ultieme Explorer kunt worden.

Enthousiast geworden? Kom langs tijdens één van onze aankomende events, of neem contact op met [thijs-jan.dijk@linkit.nl](mailto:thijs-jan.dijk@linkit.nl) voor meer informatie!


Full-stack Developer

Full-Stack Developer

Fullstack

Hey, Fullstack hero!

Senior .NET developer

Sami Beyoglu 1.jpg

Sami Beyoglu.jpg

.NET team

Jurian Vink 2.jpg

Onze Fullstack helden

Ondanks dat mensen steeds minder lezen, blijft de boekenmarkt het prima doen. Dat komt mede doordat de online keuze enorm is en je via een webshop unieke mogelijkheden hebt om mensen aan een boek te ‘koppelen’. Voor online boek- en mediaverkoper BookSpot zijn beide aspecten, keuze en personificatie, dan ook enorm belangrijk. Om deze aspecten nog beter terug te laten komen besloot het bedrijf om de front-end van haar e-platform voor een groot gedeelte opnieuw te laten ontwikkelen. Onder andere met de hulp van LINKIT. 

### De uitdaging
Het idee van de platformeconomie is dat schaalgrootte leidend is. Hoe groter het aanbod, des te beter. Voor BookSpot was het dan ook enorm belangrijk om hun grote, tientallen jaren oude catalogus met media ook online aan te bieden. Hierdoor zou het aanbod op de webshop aanzienlijk groter worden. Van alleen boeken naar ook muziek, games en films.  

Om de forse groei van BookSpot te ondersteunen moest het nieuwe platform, dat draait op Intershop, bovendien gebruiksvriendelijker worden, beter schaalbaar en makkelijker te beheren. 

Maar wat de opdracht echt lastig maakte was dat het oude platform gewoon door moest draaien en beheerd moest worden, terwijl er ondertussen aan de nieuwe werd gebouwd. 

### De oplossing:
JavaScript developer André Teixara was één van de LINKIT experts die meehielp aan deze opdracht. In totaal werkten er meer dan 25 specialisten aan de nieuwe BookSpot website. 

De eerste fase van het traject waar hij mee aan de slag ging was het ontkoppelen van de front-end applicatie van e-commerceplatform Intershop. Op die manier ontstond meer flexibiliteit en was het makkelijker om de oude applicatie te beheren. 

### Uitbreiding capaciteit 
Tegelijkertijd ging een ander team aan de slag met de nieuwe front-end en het upgraden van Intershop. Door parallel te werken konden bezoekers nog steeds bestellingen uitvoeren op de oude site, terwijl ondertussen de API’s werden uitgebreid en aangepast aan de nieuwe behoeftes. Ook de capaciteit van het nieuwe platform, plus de bijbehorende pipelines werd aangepast zodat de nieuwe app miljoenen verzoeken per dag kan afhandelen. Op deze manier werd verzekerd dat het platform mee kan groeien met het succes van BookSpot. 

### Modules stapelen 
De belangrijkste stack die werd gebruikt is ReactJS. Met deze stapeling van modules, die volgens het principe ‘first in first out’ werken, is het mogelijk om deze snel en duidelijk op te leveren terwijl ze ook makkelijk te beheren zijn. Daarnaast werd Webpack gebruikt om de code en content te optimaliseren en snel op te kunnen leveren. 

Tot slot hebben André en zijn team het aantal externe koppelingen geminimaliseerd. Degenen die overbleven worden alleen geladen op het moment dat ze nodig zijn. 

### Tevreden over het resultaat 
Voor André was het verbouwen van een varend schip een interessante uitdaging. Hij is zeer tevreden over de parallelle werkmethode en de inzet van de verschillende teams. Door Agile te werken was het mogelijk om de communicatielijnen kort en duidelijk te houden. Ook kon feedback zo snel worden verwerkt. De nieuwe tech stack wordt nu optimaal ingezet waardoor het project meer dan geslaagd is. 

### Klaar voor de toekomst 
Voor zowel BookSpot als de developers was het een bijzonder moment toen het nieuwe front-end met een druk op de knop werd ingeruild voor de nieuwe. Niet alleen is het aanbod aan entertainment nu veel groter, ook de gebruiksvriendelijkheid is fors verbeterd. Vooral op het gebied van zoeken, bestellen, betaling en bezorging. Met deze website is BookSpot klaar voor de toekomst. En die komt wellicht sneller dan gedacht. Er staat inmiddels een hele wachtlijst aan nieuwe features klaar voor ontwikkeling die het bestellen van een boek of een film nog makkelijker én leuker gaat maken. 

*Wil je weten wat LINKIT voor jouw webshop of e-commerce kan betekenen? Neem dan contact op met één van onze experts voor meer informatie. Of lees onze [whitepaper](https://www.linkit.nl/cases/Meer-entertainment-met-de-nieuwe-webshop-van-BookSpot?whitepaper=open) over het belang van optimale (mobiele) web prestaties.*


WEB-bookspot-ratio-min

Personalisatie & keuze is waar Bookspot voor staat. Om dit te garanderen hebben Andre Texeira & zijn team een nieuw platform gebouwd met ReactJS als mainstack.

Een schaalbaar e-commerce platform bouwen

Meer entertainment met de nieuwe webshop van BookSpot

Je zou zeggen dat er weinig digitaals is aan het werk als mecanicien. Aan sleutels, bouten en moeren draaien gaat het beste met goed gereedschap. Toch is de digitale revolutie bij KLM ook bij deze afdeling aanbeland. Met de nieuwe iMech app krijgen de mecaniciens een digitale gereedschapskist in handen die hun werk op een positieve manier blijvend heeft veranderd.

### Een extra digitale gereedschapskist
Behalve een echte gereedschapskist krijgen de mecaniciens tegenwoordig ook een tablet mee naar hun werkplaats. Hiermee kunnen ze een veelvoud aan taken een stuk makkelijker uitvoeren. Veel van hun werk wordt via zogenaamde tickets voor hen ingevuld. Iedere ticket staat voor een taak. Normaal gesproken moeten de mecaniciens daarvoor naar een computer lopen, inloggen en vervolgens aangeven dat ze die ene bout, moer of schroef hebben aangedraaid. In de vliegwereld enorm belangrijk, want zonder een ‘go’ mag het vliegtuig niet ingezet worden. 

Ook hierbij is tijd geld. Via de app op de tablet kunnen mecaniciens direct op de werkvloer aangeven wanneer ze een taak hebben afgehandeld. 

Daar houdt het echter niet op. Via iMech kunnen ook handleidingen tevoorschijn worden getoverd voor het uitvoeren van complexe handelingen. Komt de mecanicien erachter dat een collega ook nog iets moet doen, kan hij of zij dat direct invoeren. 

### Önder Ceylan

De app maakt het werk van de mecanicien kortom een stuk makkelijker. Voor de developers van de app daarentegen was het een behoorlijke klus om zo’n veelzijdige app te bouwen. Full-stack developer Önder Ceylan van LINKIT werkte voor KLM aan de app als lead application developer. Hij was verantwoordelijk voor zowel de oplevering als voor het trainen van zijn collega’s in zowel de nieuwe technieken als in de agile werkmethode die werd toegepast. 

### Breed team

“We hebben hier met twee teams aan gewerkt,” legt Önder uit. “Daarin zaten app developers, api developers, informatieanalysten, business analysten, een product owner, een mecanicien van KLM, testers, designers en nog meer. Een hele club dus bij elkaar, wat aangeeft hoe omvangrijk deze app is.”

### Een app bouwen in een hangar

Een bijzonder detail was de plaats waar de app gebouwd werd. Önder: “Wanneer je een app bouwt voor mecaniciens is het natuurlijk enorm belangrijk om zoveel mogelijk input van hen te krijgen. Anders doe je het nooit goed. Om dat te optimaliseren hebben we in een hangar gewerkt, vlak naast de werkplek van de mecaniciens. Op die manier waren we heel dicht in de buurt als we vragen hadden. Bovendien was er een mecanicien onderdeel van ons team die constant feedback deelde, plus de nieuwe verzoeken vanuit het team.” 

### Ionic

“De belangrijkste techniek die we gebruikten was Ionic. Een framework voor hybride mobiele apps die op Angular and Cordova is gebouwd. Ionic hielp ons om de ontwikkeltijd flink te verkorten en was bovendien een logische keuze omdat hij is gebaseerd op bekende web technologieën zoals JavaScript, CSS en HTML, waar iedereen in het team mee overweg kan. Tot slot maakte het framework van Ionic het mogelijk om de app te gebruiken op meerdere platformen en devices.”

### Testmethodes 

“Ook het testen was een belangrijk onderdeel. We hebben zowel gebruikerstesten als e2e testen uitgevoerd waarbij we Jasmine en Protractor hebben gebruikt. Ook deze werkmethodes zijn bekend en maken het leven van onze developers een heel stuk makkelijker, omdat ze aan de hand van de testresultaten veel gerichter kunnen programmeren.”

### Groot belang voor KLM

Naast de druk van het programmeren op zich, lag de druk nog iets hoger vanwege het enorme belang van de app voor KLM. iMech is onderdeel van een breder digitaliseringsprogramma van de vliegtuigmaatschappij waarbij de werkmethodes zoveel mogelijk worden gedigitaliseerd en geautomatiseerd. 

### Bezorgde moeder

Önder: “Het was duidelijk dat iMech, net zoals de rest van het programma, enorm belangrijk is. Operations hield onze voortgang nauwlettend in de gaten, als een soort van bezorgde moeder. De verandering in werkmethode is onontkoombaar. Digitaal is de toekomst voor KLM. Tegelijkertijd is het natuurlijk van cruciaal belang dat deze nieuwe apps perfect werken en doen waarvoor ze bedacht zijn: effectiever en efficiënter werken.”

### Veel vrijheid en verantwoordelijkheid 

“Voor mijzelf was het vooral gaaf om een dergelijk project Agile uit te voeren. Zonder omslachtige regels of beperkingen op onze manier van werken of onze voorkeur voor technologie. We kregen de vrijheid om als team keuzes te maken en daardoor optimaal samen te werken. Dat verhoogde weliswaar de verantwoordelijkheid, maar zorgde ook voor een groot gevoel van tevredenheid toen de app eenmaal klaar was.”  

*Wil jij weten hoe Onder jou kan helpen met het ontwikkelen van een mobiele app of website? Neem dan contact met hem op voor meer advies.*


KLM toolbox.jpg

Een app bouwen in een hangar

Een digitale ‘gereedschapskist’ maken voor de mecaniciens van KLM

Fullstack cases

large_abstract-blur-organic-fresh-fruits-vegetable-grocery-shelves-supermarket-store-defocused-bokeh-light-background-min.jpg

medium_abstract-blur-organic-fresh-fruits-vegetable-grocery-shelves-supermarket-store-defocused-bokeh-light-background-min.jpg

small_abstract-blur-organic-fresh-fruits-vegetable-grocery-shelves-supermarket-store-defocused-bokeh-light-background-min.jpg

thumbnail_abstract-blur-organic-fresh-fruits-vegetable-grocery-shelves-supermarket-store-defocused-bokeh-light-background-min.jpg

abstract-blur-organic-fresh-fruits-vegetable-grocery-shelves-supermarket-store-defocused-bokeh-light-background-min.jpg

Thema's, expertises & markten

Fullstack Javascript

Softwareontwikkeling in een van de meest dominante programmeertalen