[{"data":1,"prerenderedAt":323},["ShallowReactive",2],{"DefaultLayoutnl":3,"language-cases-slug-commtrac-i18n-slugs":132,"language-cases-slug-nl-commtrac":138},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140903","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140909","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140910","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140911","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140913","Over ons",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"NnUFs73_Saa8XE_jYZFHcw","Werken bij",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185271",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185272",{"__typename":50},{"id":75,"title":53,"link":76},"144185273",{"__typename":55},{"id":78,"title":79,"link":80},"144185274","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185275",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185276",{"__typename":38},{"id":89,"title":90,"link":91},"144185277","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licentie en disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","PDF bestand van De Voorhoede privacy statement","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455427-vh-isms-007-privacy-statement-de-voorhoede-nl.pdf",[100,112,122],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png",null,404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":118},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":104,"width":116,"height":117},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png",627,480,{"__typename":108,"id":119,"title":120,"url":121},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":123,"image":124,"link":127},"MT5SCyNxSTSr_v5eeATMZw",{"url":125,"alt":104,"width":126,"height":126},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png",518,{"id":128,"title":129,"link":130},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":131},"impact\u002Fdigitale-producten-privacy-by-design",[133,136],{"locale":134,"value":135},"en","commtrac",{"locale":137,"value":135},"nl",{"page":139,"cases":243},{"title":140,"slug":135,"i18nSlugs":141,"social":144,"heroIllustration":147,"caseTeaser":151,"content":157,"metaData":204,"quote":161,"author":161,"pivots":219},"Commtrac",[142,143],{"locale":134,"value":135},{"locale":137,"value":135},{"title":145,"description":146,"image":104},"Commtrac | De Voorhoede","Onze oplossing voor het aansturen van scheepsterminals in de browser: visueel, realtime, en modulair",{"url":148,"alt":135,"width":149,"height":150},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1539938877-commtrac.svg",720,310,{"title":152,"image":153},"Beheer scheepsterminals wereldwijd vanuit de browser",{"url":154,"alt":104,"width":155,"height":156},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1539939018-commtrac-ship.jpg",1200,515,[158,163,167,177,181,196],{"__typename":159,"id":160,"title":161,"body":162},"TextSectionRecord","433570","","\u003Cp>Commtrac is een software pakket van DBIS waarmee scheepsterminals worden aangestuurd. Om specifiek te zijn: terminals die bulk en stukgoederen verwerken. Denk aan kool, graan, ijzererts, auto’s, balen papier, enzovoorts.\u003C\u002Fp>",{"__typename":159,"id":164,"title":165,"body":166},"433571","De uitdaging: van Windows desktop naar web","\u003Cp>Met Commtrac wordt de planning van de schepen geregeld, het laden en lossen en de opslag van goederen op terminals. Daarnaast is er een dashboard waarop verschillende statistieken te zien zijn.\u003C\u002Fp>\n\u003Cp>De bestaande applicatie was verouderd en alleen voor Windows beschikbaar. De applicatie was tot dan toe organisch gegroeid en bestond uit grote gegevenstabellen waarop invoerformulieren waren gebouwd. Dit bemoeilijkte het onderhoud en ontwikkeling van nieuwe features. De user interface leed er ook onder: de leercurve voor nieuwe werknemers en het gebruiksgemak was niet altijd optimaal.\u003C\u002Fp>\n\u003Cp>DBIS wilde de applicatie vernieuwen. Onze opdracht werd om een versimpelde applicatiestructuur neer te zetten. Zo wordt de unieke workflow per medewerker beter ondersteund met \u003Cstrong>heldere overzichten en intuïtieve invoerformulieren\u003C\u002Fstrong>.\u003C\u002Fp>",{"__typename":168,"id":169,"image":170,"caption":175,"captionPosition":176},"ImageRecord","176467298",{"url":171,"alt":172,"width":173,"height":174},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1539939224-commtrac-cargo.jpg","Overzicht van de lading en containers",1024,449,"Zo heeft een kraanmachinist die de goederen daadwerkelijk in het ruim van het schip plaatst een tastbaar overzicht.","left",{"__typename":159,"id":178,"title":179,"body":180},"433572","De oplossing: visueel en modulair met een webapplicatie","\u003Cp>Door de Windows-desktopomgeving los te laten en ons te richten op een webapplicatie voldoen we meteen aan een aantal eisen:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Alle data wordt centraal opgeslagen\u003C\u002Fli>\n\u003Cli>Medewerkers hoeven niets op hun werkstation te installeren, en hebben \u003Cstrong>altijd de meest recente versie\u003C\u002Fstrong>\u003C\u002Fli>\n\u003Cli>De applicatie kan worden gebruikt op allerlei verschillende apparaten, ook mobiel\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":182,"id":183,"storyItem":184},"StorytellingBlockRecord","433573",{"title":185,"items":186},"De belangrijkste ontwikkelingen aan het nieuwe Commtrac:",[187,190,193],{"title":188,"body":189,"image":104},"Sterk visueel georiënteerde interface","\u003Cp>\u003Cspan>De interface is op de schop gegaan en alle schermen zijn opnieuw ontworpen. Het laden en lossen van het schip is bijvoorbeeld grafisch gevisualiseerd. Hierdoor heeft een operator bij het lossen goed overzicht in welke goederen zich waar in het schip bevinden. Bij het laden kan de operator goederen direct vanaf een lijst in het ruim van het schip slepen.\u003C\u002Fspan>\u003C\u002Fp>",{"title":191,"body":192,"image":104},"Complexe relaties eenvoudig beheerd","\u003Cp>\u003Cspan>Als basis voor de webapplicatie kozen we AngularJS. In de applicatie bestaan veel formulieren die zeer uitgebreid en gecompliceerd kunnen zijn. Als voorbeeld: er zijn diverse beperkende verbanden die tussen verschillende invoervelden bestaan. Dat wil zeggen: wanneer je iets in het ene invoerveld hebt ingevoerd kan dit invloed hebben op de opties die je mag invoeren in een ander veld. Met AngularJS kunnen deze \u003C\u002Fspan>\u003Cstrong>snel complex wordende verbanden goed worden beheerd\u003C\u002Fstrong>\u003Cspan>.\u003C\u002Fspan>\u003C\u002Fp>",{"title":194,"body":195,"image":104},"Schaalbaarheid en customization","\u003Cp>De applicatie is geheel uit componenten opgebouwd. Een component is een klein onderdeel met eigen logica en layout, dat onafhankelijk van andere componenten in een scherm kan worden geplaatst. Samen vormen ze zo een nieuw component of een scherm dat eerder niet bestond.\u003C\u002Fp>\n\u003Cp>Dit betekent dat DBIS gemakkelijk zelf nieuwe formulieren en schermen kan maken. Zo kan Commtrac worden\u003Cspan> \u003C\u002Fspan>\u003Cstrong>aangepast aan de wensen en behoeften van elke terminal\u003C\u002Fstrong>.\u003C\u002Fp>",{"__typename":168,"id":197,"image":198,"caption":203,"captionPosition":176},"176467299",{"url":199,"alt":200,"width":201,"height":202},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1539939240-commtrac-dashboard.jpg","Dashboard met een overzicht van de bewerkingen",1046,408,"Een ander voordeel is dat het eenvoudig mogelijk wordt om gegevens direct op te slaan en uit te lezen. Zo is de informatie in het scherm altijd ‘live’.",{"expertisesTitle":205,"expertises":206,"deliverableTitle":209,"deliverables":210,"technologiesTitle":213,"technologies":214,"interestedTitle":161,"interestedLinkUrl":161,"interestedLinkLabel":161},"Expertises",[207],{"title":208},"Development","Deliverables",[211],{"title":212},"Web app","Platforms",[215,217],{"title":216},"AngularJS",{"title":218},"D3.js",[220,232],{"title":221,"body":161,"links":222,"mailchimpValue":161,"mailchimpName":161,"mailchimpId":161,"formType":223,"contactPerson":224},"Laten we bespreken wat we kunnen doen",[],"contact",{"name":225,"lastName":226,"jobTitle":227,"image":228},"Nena","de Clercq","Operations Director",{"url":229,"alt":104,"width":230,"height":231},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535373-nena.jpg",2174,2898,{"title":233,"body":161,"links":234,"mailchimpValue":161,"mailchimpName":161,"mailchimpId":161,"formType":235,"contactPerson":236},"Meld je aan voor onze nieuwsbrief",[],"newsletter",{"name":237,"lastName":161,"jobTitle":238,"image":239},"Vera","Marketeer",{"url":240,"alt":104,"width":241,"height":242},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,[244,247,250,253,256,259,262,265,268,271,274,277,280,283,286,289,292,295,298,301,304,307,310,313,314,317,320],{"slug":245,"title":246},"quantum-inspire","Quantum Inspire",{"slug":248,"title":249},"life-terra","Life Terra",{"slug":251,"title":252},"geldmaat","Geldmaat",{"slug":254,"title":255},"pathe-thuis","Pathé Thuis",{"slug":257,"title":258},"viriciti","ViriCiti",{"slug":260,"title":261},"drop-and-fly","Drop & Fly",{"slug":263,"title":264},"15-apps-voor-wateronderzoek-bij-deltares","15 Apps voor wateronderzoek bij Deltares",{"slug":266,"title":267},"het-nieuwe-funda","Het nieuwe Funda",{"slug":269,"title":270},"bouwen-is-macht","Bouwen is Macht",{"slug":272,"title":273},"world-water-atlas","World Water Atlas",{"slug":275,"title":276},"pick-up-10","Pick Up 10",{"slug":278,"title":279},"hike-one","Hike One",{"slug":281,"title":282},"dlr-inspectie-app","DLR Inspectie app",{"slug":284,"title":285},"tradus","Tradus",{"slug":287,"title":288},"trouw","Trouw, Volkskrant en Parool",{"slug":290,"title":291},"abn-amro-lening-kieswijzer","ABN-AMRO lening kieswijzer",{"slug":293,"title":294},"npo-dashboard","NPO Dashboard",{"slug":296,"title":297},"hotel-en-bungalowspecials","Hotel- en BungalowSpecials",{"slug":299,"title":300},"rtl-weekend-magazine","RTL Weekend Magazine",{"slug":302,"title":303},"2dehands-be","2dehands.be",{"slug":305,"title":306},"swipe-and-shop","Swipe & Shop",{"slug":308,"title":309},"ziggo-interactieve-televisie","Ziggo Interactieve Televisie",{"slug":311,"title":312},"giftforyou","GiftForYou",{"slug":135,"title":140},{"slug":315,"title":316},"stamp-postnl-design-system","PostNL",{"slug":318,"title":319},"tu-delft-spacefinder","TU Delft Spacefinder",{"slug":321,"title":322},"privacy-by-design-in-je-bol","In je bol",1776256182279]