Integrale oplossingen

ogh.nl

Integrale oplossingen

CB Goes ResponsiveAhead with smart logisticsHans Chris Amelink, Willem Cortenraad, Manager Systeemontwikkelingdirecteur22 9-4-2013 november 20121


Wie is CB?Missie• Bijdragen aan duurzaam succes van onze klanten doorintegrale logistieke oplossingenVisie• Met slimme ketenlogistiek duurzame voordelen realiserenvoor onze stakeholders.Kernwaarden• Toegewijd, initiatiefrijk en klantgerichtIntegrale logistieke oplossingenOndertitel van de presentatie2


Waarom CB?Integrale oplossingen• Distributie, administratie, informatie envervoerKetenlogistiek• Maximale efficiency door afgestemdeprocessen• Kostenbeheersing in de ketenDuurzaamheid als uitgangspunt• Duurzame klantrelaties• Continue aandacht voor de milieueffectenvan onze activiteitenIntegrale logistieke oplossingenOndertitel van de presentatie3


Onze marktenMedia• Boekverkopers en overige retail• UitgeverijenFashion• Retailers• Producenten en importeursHealthcare• Ziekenhuizen en zorginstellingen• Groothandels en producentenBeeld HCIntegrale logistieke oplossingenOndertitel van de presentatie4


Dienstverlening• Logistieke diensten• E-commerce logistiek• Digitale distributie• Informatie- en communicatiediensten• Facturatie en debiteurenbeheer• GroothandelIntegrale logistieke oplossingenOndertitel van de presentatie5


Een rijke historie1871Nederland is het eerste land met gecentraliseerde boekdistributie1985Start distributie in kantoorartikelenmarkt1999Start distributie voor webwinkels2001Volledig geautomatiseerd bestelsysteem voor retailers2003Introductie dienstverlening in Belgie2009Start digitale distributie (e-books)2012Actief in de markten Media, Fashion & Healthcare met 800 mensen in dienstIntegrale logistieke oplossingenOndertitel van de presentatie6


Systeemontwikkeling• ~ 30 man/vrouw• Designer/Developer, Forms, Reports, PL/SQL• Apex sinds: 2006• Scrum: ruim twee jaar• Druk van projecten is groot• Waar blijft innovatie? vrijdagmiddag projectenIntegrale logistieke oplossingenOndertitel van de presentatie7


Mark RooijakkersTechnisch Architect bij CBIntegrale logistieke oplossingenOndertitel van de presentatie8


“CB wants to go mobile” “CB goes Responsive”• Steeds meer mobile toepassingen• Als Systeemontwikkeling wil je ook Mobile-stappen zetten• In 2012 beperkte ervaring opgedaan in Apex4.1 + jQuery Mobile• Oktober 2012: nog (steeds) geen passende business case• Hoe pakken we dit aan?Integrale logistieke oplossingenOndertitel van de presentatie9


Apex4.2 geschikt voor mobile• Demo’s en webinars bekeken• Leuk in theorie maar werkt het ook?• Is er een passende business case?• Wat doen we ondertussen?• Eind november 2012: Yes, een case!!Integrale logistieke oplossingenOndertitel van de presentatie10


De business case - EDS• E-book verkopen gaan via CB maar ook via iBookstore• Verkoopgegevens 1 keer per maand in CB-verslaglegging aan uitgever• Actuele sales informatie is belangrijk voor de uitgever• De volgende vragen spelen bij de uitgever:• Verkoop gegevens (in euro’s) ten opzichte van vorige dagen?• Wat is de titel top 10 op een bepaalde dag?• Hoe ontwikkelt zich de verkoop (in aantallen) voor specifieke titels?• Zie ik een verandering nav promotie acties?• E-books Daily Sales - EDS• Alleen korte termijn analyses (5 weken)• Lange termijn via verslaglegging (obv daadwerkelijke verkoopcijfers)• E-book uitgevers zijn mobile(r dan andere uitgevers)• Idee: We maken van EDS een mobile Apex4.2 applicatieIntegrale logistieke oplossingenOndertitel van de presentatie11


Wat en Waarmee is bekend, en nu?• Wat = EDS• Waarmee = Apex4.2• Hoe = ?• Weinig kennis van mobile applicaties• We willen het wel zelf doen!• Innovatieteam met Apex-ontwikkelaars• “Vrijdagmiddag projectje”• Mobile kennis inhuren ter ondersteuning• Stijn van Raes van iAdviseIntegrale logistieke oplossingenOndertitel van de presentatie12


Native App of een website die op Tablet/Smartphone werkt?• Dit was de eerste vraag van Stijn• Gebruikers van EDS zijn “Desktoppers” en ook “Mobilers”• Het doel is niet om een Native Mobile App te maken• Stijn: “Met Apex4.2 kun je responsive websites maken”• Wat is Responsive?Integrale logistieke oplossingenOndertitel van de presentatie13


Wat is responsive?PEDIAResponsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy readingand navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)Het betreft dus een responsive Website en geen Native AppHet volgende kan daarom niet:-Swipen (scrollen kan wel)-Aanspreken van device resources (bijv. Camera, Contacten, Agenda enz.)We gaan dus een Responsive website maken, die in de browser draaitPerfect voor de doelgroep van de EDS-applicatieIntegrale logistieke oplossingenOndertitel van de presentatie14


Ontwerp van Responsive Webapplicatie• Applicatie ontwerpen voor verschillende devices• Grid design• Think Mobile First• Prototyping om gevoel te krijgen bij Responsive gedrag• Balsamic Mockup voor schermontwerp• 2 schermen:• Dashboard• TiteldetailsIntegrale logistieke oplossingenOndertitel van de presentatie15


Opbouw applicatie• Meeste logica in Oracle database (data dagelijks laden vanuit iBookstore)• Herbruikbare componenten in/onder API laag• 1 Responsive Apex applicatie voor alle devices• Andere UI in de toekomst (Native App of Webservice?) API is herbruikbaarf?p=223Apex4.21 Responsive Appl.APIIntegrale logistieke oplossingenOndertitel van de presentatieObject-ownerOracle 11g16


DEMOIntegrale logistieke oplossingenOndertitel van de presentatie17


Niet responsiveIntegrale logistieke oplossingenOndertitel van de presentatie18


Wél responsiveIntegrale logistieke oplossingenOndertitel van de presentatie19


Wat was mijn rol in het verhaal?• Consultant bij iAdvise@stijnvanraes• Sterke focus op:– Apex– Mobile– User Experience– Kennis delen– Ondersteunen en coachen• Past perfect in het verhaalIntegrale logistieke oplossingenOndertitel van de presentatie20


Hoe ga je responsive in Apex?• Om responsive te gaan heb je nodig:– Grid systeem– Media queriesIntegrale logistieke oplossingenOndertitel van de presentatie21


Hoe ga je responsive in Apex?• Grid systeem• 12 kolommen• Kolommen verschuiven onder elkaar naarmatehet scherm kleiner wordt dmv. media queriesIntegrale logistieke oplossingenOndertitel van de presentatie22


Hoe ga je responsive in Apex?• Grid systeem– Veel voorkomend patroon: inhoud met linkse navigatieIntegrale logistieke oplossingenOndertitel van de presentatie23


Hoe ga je responsive in Apex?• Grid systeem– Op een desktop vertaalt dit zich in:Integrale logistieke oplossingenOndertitel van de presentatie24


Hoe ga je responsive in Apex?• Grid systeem– Op een smartphone vertaalt dit zich in:48Integrale logistieke oplossingenOndertitel van de presentatie25


Hoe ga je responsive in Apex?• Media queries– CSS– Geven de mogelijkheid om conditioneel css uit te voeren– Deze condities laten toe om resoluties te detecterenIntegrale logistieke oplossingenOndertitel van de presentatie26


Hoe ga je responsive in Apex?• Implementatie in Apex– Op een eenvoudige manier te configureren• Templates• Regions• ItemsIntegrale logistieke oplossingenOndertitel van de presentatie27


Hoe ga je responsive in Apex?• 2 keuzes– Theme 25– Andere CSS frameworksIntegrale logistieke oplossingenOndertitel van de presentatie28


Hoe ga je responsive in Apex?• Theme 25– Standaard meegeleverd met Apex 4.2Integrale logistieke oplossingenOndertitel van de presentatie29


Hoe ga je responsive in Apex?• CSS frameworks– Twitter bootstrapIntegrale logistieke oplossingenOndertitel van de presentatie30


Twitter watstrap?!?!?Integrale logistieke oplossingenOndertitel van de presentatie31


Twitter bootstrap• Twitter bootstrap– Ontwikkeld door Twitter voor intern gebruik– Open source– Veel componenten en CSS styles– Goed gedocumenteerd: twitter.github.io/bootstrap/– Gestructureerd door het gebruik van LESSIntegrale logistieke oplossingenOndertitel van de presentatie32


LESS is more?Integrale logistieke oplossingenOndertitel van de presentatie33


Twitter bootstrap• LESS– CSS “programmeer taal”– Je schrijft LESS• Backwards compatible met CSS– En genereert CSS• Server side– Simpless– Winless• Client side– JavascriptIntegrale logistieke oplossingenOndertitel van de presentatie34


Twitter bootstrap• LESS– Variabelen gebruikenIntegrale logistieke oplossingenOndertitel van de presentatie35


Twitter bootstrap• LESS– Functies (mixins) gebruikenIntegrale logistieke oplossingenOndertitel van de presentatie36


Twitter bootstrap• LESS– Nesten van CSSIntegrale logistieke oplossingenOndertitel van de presentatie37


EDS: Theme25 of TB?• 2 prototypes gemaakt– Dashboard scherm met Theme25– Titel scherm met TB– Resultaten bekeken en als team een keuze gemaakt voor …Integrale logistieke oplossingenOndertitel van de presentatie38


Twitter bootstrap• Waarom twitter bootstrap?– Mooiere layout (volgens CB)– Beter gedocumenteerd– Beter gestructureerd– Community driven– Eenvoudig aan te passenIntegrale logistieke oplossingenOndertitel van de presentatie39


Twitter bootstrap in Apex• Zeer eenvoudig te implementeren dankzij grid layout• Aanpassen van templates– Omzetten naar Apex met 2 ontwikkelaars = halve dag werk• Uploaden van files– CSS en geen LESSIntegrale logistieke oplossingenOndertitel van de presentatie40


Moet je hiervoor geen CSS expert zijn?Integrale logistieke oplossingenOndertitel van de presentatie41


Twitter bootstrap in Apex• JA, want– Goede CSS kennis is nodig om TB uit te breiden• NEE, want– Veel componenten en CSS styles– We hebben het gedaan zonder CSS experten– Met basis kennis kom je al verIntegrale logistieke oplossingenOndertitel van de presentatie42


Hoe test je een responsive applicatie?• Responsive design weergave– Firefox (CTRL+SHIFT+M)– Resizen zonder dat je de browser hoeft te resizenIntegrale logistieke oplossingenOndertitel van de presentatie43


Hoe test je een responsive applicatie?• Ripple– Web mobile emulator– Extensie in chrome– Gebruikt• Apache Cordova (phonegap)• Blackberry webworks– Simuleert• OS• BrowserIntegrale logistieke oplossingenOndertitel van de presentatie44


Hoe test je een responsive applicatie?• Apex Grid Debug– Developer toolbar > Show GridIntegrale logistieke oplossingenOndertitel van de presentatie45


Hoe test je een responsive applicatie?• MAAR, testen op verschillende devices blijft een must!Integrale logistieke oplossingenOndertitel van de presentatie46


Wat met oudere browsers?• Modernizr:– Feature detection HTML 5 & CSS3– Conditionele css en javascript– Opvangen van oudere browsers• Bv. IE8 zonder flash en HTML5– Verschillende classes worden toegevoegd aan de html tagIntegrale logistieke oplossingenOndertitel van de presentatie47


Wat met oudere browsers?• Respond.js– Media queries gebruiken in oudere browsersIntegrale logistieke oplossingenOndertitel van de presentatie48


Welke problemen zijn we tegengekomen?• HTML5 Datepicker– Geen ondersteuning in oudere browsers– Máár, met modernizr een workaround ingebouwd– Op iphone niet mogelijk om onChange op te vangen– Uiteindelijk voor selectlist gekozen• Automatisch submitten bij het invullen van een ISBN nummer– Niet mogelijk op AndroidIntegrale logistieke oplossingenOndertitel van de presentatie49


Wat heb ik geleerd?Integrale logistieke oplossingenOndertitel van de presentatie50


Enkele technische challengesIntegrale logistieke oplossingenOndertitel van de presentatie51


Fun != onproductiefIntegrale logistieke oplossingenOndertitel van de presentatie52


Project aanpakIntegrale logistieke oplossingenOndertitel van de presentatie53


En last but not least …Integrale logistieke oplossingenOndertitel van de presentatie54


Nederlanders zijn best oké ;)Integrale logistieke oplossingenOndertitel van de presentatie55


CB Goes Responsive; Conclusie• Bepaal mobile strategie voor de toepassing(Native App, Mobile Website, Responsive, Niet)• Apex4.2 biedt mogelijkheid om mobile te gaan• Haal mobile kennis in huis (laat je adviseren/begeleiden)• Innovatie is fun èn serious• Focus op resultaat, doel(groep)• Doel bereikt: Mobile Applicatie met Apex 4.2!Integrale logistieke oplossingenOndertitel van de presentatie56


?Integrale logistieke oplossingenOndertitel van de presentatie57

More magazines by this user
Similar magazines