[{"data":1,"prerenderedAt":327},["ShallowReactive",2],{"DefaultLayouten":3,"language-cases-slug-commtrac-i18n-slugs":134,"language-cases-slug-en-commtrac":140},{"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},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__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},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"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","B Corp logo",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":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135,138],{"locale":136,"value":137},"en","commtrac",{"locale":139,"value":137},"nl",{"page":141,"cases":247},{"title":142,"slug":137,"i18nSlugs":143,"social":146,"heroIllustration":150,"caseTeaser":154,"content":160,"metaData":208,"quote":164,"author":164,"pivots":223},"Commtrac",[144,145],{"locale":136,"value":137},{"locale":139,"value":137},{"title":147,"description":148,"image":149},"Commtrac | De Voorhoede","Our solution for managing shipping terminals in the browser: visual, realtime, and modular",null,{"url":151,"alt":137,"width":152,"height":153},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1539938877-commtrac.svg",720,310,{"title":155,"image":156},"Manage ship terminals worldwide in a web browser",{"url":157,"alt":149,"width":158,"height":159},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1539939018-commtrac-ship.jpg",1200,515,[161,166,170,180,184,199],{"__typename":162,"id":163,"title":164,"body":165},"TextSectionRecord","433560","","\u003Cp>Commtrac is a software package by DBIS that is used to manage shipping terminals. To be specific: terminals that process bulk and general cargo. Think of coal, corn, iron ore, automobiles, paper bales, et cetera.\u003C\u002Fp>",{"__typename":162,"id":167,"title":168,"body":169},"433561","The challenge: from Windows desktop to web","\u003Cp>With Commtrac, planning for cargo ships is organised, as well as loading, unloading and storage of cargo at terminals. It also includes a dashboard that displays various stats and graphs.\u003C\u002Fp>\n\u003Cp>The existing application had become outdated and was only available for Windows. Up until then, it had grown organically and consisted mostly of input forms built on top of large data tables. This impeded maintenance and development of new features. The user interface also suffered: the learning curve for new employees and its ease of use were not ideal.\u003C\u002Fp>\n\u003Cp>DBIS wished to renew the application. Our assignment was to implement a simplified application structure. This way, the unique workflow for every employee would be better supported with \u003Cstrong>clear overviews and intuitive input controls\u003C\u002Fstrong>.\u003C\u002Fp>",{"__typename":171,"id":172,"image":173,"caption":178,"captionPosition":179},"ImageRecord","176467296",{"url":174,"alt":175,"width":176,"height":177},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1539939224-commtrac-cargo.jpg","Overview of the cargo and containers",1024,449,"A crane operator, who is actually placing cargo in the ship’s hold, now has a tangible overview","left",{"__typename":162,"id":181,"title":182,"body":183},"433562","The solution: visual and modular with a web application","\u003Cp>By leaving the Windows desktop environment behind and moving towards a web application, we immediately met a couple of requirements:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>All data is stored centrally\u003C\u002Fli>\n\u003Cli>Employees don’t need to install software on their work station and will always be \u003Cstrong>up to date with the latest version\u003C\u002Fstrong>\u003C\u002Fli>\n\u003Cli>The application can be used on a variety of devices, including mobile\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":185,"id":186,"storyItem":187},"StorytellingBlockRecord","433563",{"title":188,"items":189},"The most important improvements of the new Commtrac:",[190,193,196],{"title":191,"body":192,"image":149},"Strongly visually oriented interface","\u003Cp>\u003Cspan>The user interface has been revamped and all screens have been redesigned. The loading and unloading of ships, for instance, has been graphically visualised. This way, the operator has a good view on what cargo is located anywhere in the ship during unloading. When loading, the operator can drag cargo directly from a work list into the cargo hold of the ship.\u003C\u002Fspan>\u003C\u002Fp>",{"title":194,"body":195,"image":149},"Complex relations managed smoothly","\u003Cp>\u003Cspan>The basis of our web application is AngularJS. A lot of forms are present in the application that can be very expansive and complicated. As an example: different input fields can have various limiting relationships. This means that when you have entered something in one input field, this might influence the options you have in another field. These \u003C\u002Fspan>\u003Cstrong>rapidly evolving complex relationships can be managed well\u003C\u002Fstrong>\u003Cspan> using AngularJS.\u003C\u002Fspan>\u003C\u002Fp>",{"title":197,"body":198,"image":149},"Scalability and customisation","\u003Cp>The application is built entirely out of components. A component is a small part with its own logic and layout, that can be placed in a new screen independently of other components. Together they are able to form a new component or a screen that didn’t exist before.\u003C\u002Fp>\n\u003Cp>This means that DBIS can easily build new forms and screens themselves. Now Commtrac can be\u003Cspan> \u003C\u002Fspan>\u003Cstrong>adapted to the wants and needs of any terminal\u003C\u002Fstrong>.\u003C\u002Fp>",{"__typename":171,"id":200,"image":201,"caption":206,"captionPosition":207},"176467297",{"url":202,"alt":203,"width":204,"height":205},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1539939240-commtrac-dashboard.jpg","Dashboard showing an overview of the operations",1046,408,"Another advantage is that AngularJS makes it easy to store and retrieve information directly while using the application. This way, what’s on the screen is always live.","right",{"expertisesTitle":209,"expertises":210,"deliverableTitle":213,"deliverables":214,"technologiesTitle":217,"technologies":218,"interestedTitle":164,"interestedLinkUrl":164,"interestedLinkLabel":164},"Expertises",[211],{"title":212},"Development","Deliverables",[215],{"title":216},"Web app","Technologies",[219,221],{"title":220},"AngularJS",{"title":222},"D3.js",[224,236],{"title":225,"body":164,"links":226,"mailchimpValue":164,"mailchimpName":164,"mailchimpId":164,"formType":227,"contactPerson":228},"Let's discuss what we can do",[],"contact",{"name":229,"lastName":230,"jobTitle":231,"image":232},"Nena","de Clercq","Operations Director",{"url":233,"alt":149,"width":234,"height":235},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535373-nena.jpg",2174,2898,{"title":237,"body":164,"links":238,"mailchimpValue":164,"mailchimpName":164,"mailchimpId":164,"formType":239,"contactPerson":240},"Subscribe to our newsletter",[],"newsletter",{"name":241,"lastName":164,"jobTitle":242,"image":243},"Vera","Marketer",{"url":244,"alt":149,"width":245,"height":246},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,[248,251,254,257,260,263,266,269,272,275,278,281,284,287,290,293,296,299,302,305,308,311,314,317,318,321,324],{"slug":249,"title":250},"quantum-inspire","Quantum Inspire",{"slug":252,"title":253},"life-terra","Life Terra",{"slug":255,"title":256},"geldmaat","Geldmaat",{"slug":258,"title":259},"pathe-thuis","Pathé Thuis",{"slug":261,"title":262},"viriciti","ViriCiti",{"slug":264,"title":265},"drop-and-fly","Drop & Fly",{"slug":267,"title":268},"15-apps-for-water-research-at-deltares","15 Apps for water research at Deltares",{"slug":270,"title":271},"a-brand-new-funda","A brand new Funda",{"slug":273,"title":274},"bouwen-is-macht","Bouwen is Macht",{"slug":276,"title":277},"world-water-atlas","World Water Atlas",{"slug":279,"title":280},"pick-up-10","Pick Up 10",{"slug":282,"title":283},"hike-one","Hike One",{"slug":285,"title":286},"dlr-inspection-app","DLR Inspection app",{"slug":288,"title":289},"tradus","Tradus",{"slug":291,"title":292},"trouw","Trouw, Volkskrant and Parool",{"slug":294,"title":295},"abn-amro-loan-wizard","ABN-AMRO loan wizard",{"slug":297,"title":298},"npo-dashboard","NPO Dashboard",{"slug":300,"title":301},"hotel-and-bungalowspecials","Hotel- and BungalowSpecials",{"slug":303,"title":304},"rtl-weekend-magazine","RTL Weekend Magazine",{"slug":306,"title":307},"2dehands-be","2dehands.be",{"slug":309,"title":310},"swipe-and-shop","Swipe & Shop",{"slug":312,"title":313},"ziggo-interactive-television","Ziggo Interactive Television",{"slug":315,"title":316},"giftforyou","GiftForYou",{"slug":137,"title":142},{"slug":319,"title":320},"stamp-postnl-design-system","PostNL",{"slug":322,"title":323},"tu-delft-spacefinder","TU Delft Spacefinder",{"slug":325,"title":326},"privacy-by-design-in-je-bol","In je bol",1776256183317]