CB Goes Responsive Ahead with smart logistics Hans Chris Amelink, Willem Cortenraad, Manager Systeemontwikkeling directeur 22 9-4-2013 november 2012 1
Wie is CB? Missie Bijdragen aan duurzaam succes van onze klanten door integrale logistieke oplossingen Visie Met slimme ketenlogistiek duurzame voordelen realiseren voor onze stakeholders. Kernwaarden Toegewijd, initiatiefrijk en klantgericht 2
Waarom CB? Integrale oplossingen Distributie, administratie, informatie en vervoer Ketenlogistiek Maximale efficiency door afgestemde processen Kostenbeheersing in de keten Duurzaamheid als uitgangspunt Duurzame klantrelaties Continue aandacht voor de milieueffecten van onze activiteiten 3
Onze markten Media Boekverkopers en overige retail Uitgeverijen Fashion Retailers Producenten en importeurs Healthcare Ziekenhuizen en zorginstellingen Groothandels en producenten Beeld HC 4
Dienstverlening Logistieke diensten E-commerce logistiek Digitale distributie Informatie- en communicatiediensten Facturatie en debiteurenbeheer Groothandel 5
Een rijke historie 1871 Nederland is het eerste land met gecentraliseerde boekdistributie 1985 Start distributie in kantoorartikelenmarkt 1999 Start distributie voor webwinkels 2001 Volledig geautomatiseerd bestelsysteem voor retailers 2003 Introductie dienstverlening in Belgie 2009 Start digitale distributie (e-books) 2012 Actief in de markten Media, Fashion & Healthcare met 800 mensen in dienst 6
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 projecten 7
Mark Rooijakkers Technisch Architect bij CB 8
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? 9
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!! 10
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 applicatie 11
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 iadvise 12
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? 13
Wat is responsive? PEDIA Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience easy reading and 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 App Het 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 draait Perfect voor de doelgroep van de EDS-applicatie 14
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 Titeldetails 15
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 herbruikbaar f?p=223 Apex4.2 1 Responsive Appl. API Object-owner Oracle 11g 16
DEMO 17
Niet responsive 18
Wél responsive 19
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 verhaal 20
Hoe ga je responsive in Apex? Om responsive te gaan heb je nodig: Grid systeem Media queries 21
Hoe ga je responsive in Apex? Grid systeem 12 kolommen Kolommen verschuiven onder elkaar naarmate het scherm kleiner wordt dmv. media queries 22
Hoe ga je responsive in Apex? Grid systeem Veel voorkomend patroon: inhoud met linkse navigatie 23
Hoe ga je responsive in Apex? Grid systeem Op een desktop vertaalt dit zich in: 24
Hoe ga je responsive in Apex? Grid systeem Op een smartphone vertaalt dit zich in: 4 8 25
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 detecteren 26
Hoe ga je responsive in Apex? Implementatie in Apex Op een eenvoudige manier te configureren Templates Regions Items 27
Hoe ga je responsive in Apex? 2 keuzes Theme 25 Andere CSS frameworks 28
Hoe ga je responsive in Apex? Theme 25 Standaard meegeleverd met Apex 4.2 29
Hoe ga je responsive in Apex? CSS frameworks Twitter bootstrap 30
Twitter watstrap?!?!? 31
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 LESS 32
LESS is more? 33
Twitter bootstrap LESS CSS programmeer taal Je schrijft LESS Backwards compatible met CSS En genereert CSS Server side Simpless Winless Client side Javascript 34
Twitter bootstrap LESS Variabelen gebruiken 35
Twitter bootstrap LESS Functies (mixins) gebruiken 36
Twitter bootstrap LESS Nesten van CSS 37
EDS: Theme25 of TB? 2 prototypes gemaakt Dashboard scherm met Theme25 Titel scherm met TB Resultaten bekeken en als team een keuze gemaakt voor 38
Twitter bootstrap Waarom twitter bootstrap? Mooiere layout (volgens CB) Beter gedocumenteerd Beter gestructureerd Community driven Eenvoudig aan te passen 39
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 LESS 40
Moet je hiervoor geen CSS expert zijn? 41
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 ver 42
Hoe test je een responsive applicatie? Responsive design weergave Firefox (CTRL+SHIFT+M) Resizen zonder dat je de browser hoeft te resizen 43
Hoe test je een responsive applicatie? Ripple Web mobile emulator Extensie in chrome Gebruikt Apache Cordova (phonegap) Blackberry webworks Simuleert OS Browser 44
Hoe test je een responsive applicatie? Apex Grid Debug Developer toolbar > Show Grid 45
Hoe test je een responsive applicatie? MAAR, testen op verschillende devices blijft een must! 46
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 tag 47
Wat met oudere browsers? Respond.js Media queries gebruiken in oudere browsers 48
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 Android 49
Wat heb ik geleerd? 50
Enkele technische challenges 51
Fun!= onproductief 52
Project aanpak 53
En last but not least 54
Nederlanders zijn best oké ;) 55
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! 56
? 57