Inspirationsdag 24. april: Udvikling af mobil applikationer med XPages

247 views
166 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
247
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Inspirationsdag 24. april: Udvikling af mobil applikationer med XPages

  1. 1. Inspirationsdag 2013Optimér din forretning med IBM NotesMobile enhederUdfordringer og løsninger
  2. 2. Agenda●Hvad er en ”mobil”...?●Mobile udfordringer●Løsninger:– Responsivt design– ”Mobil app”-lignende web-design– ”Mobil app” - men med web-teknologi– Native mobil appInspirationsdag, 24. april 2013 2
  3. 3. Hvad er en ”mobil”...?●Mange typer enheder, der ikke er en computer– Telefoner – smartphones●Mange størrelser skærme– Tablets (iPads, etc.)●MANGE størrelser skærme●Computere med trykfølsom skærm– Størrelse Ok, men mus → finger...Inspirationsdag, 24. april 2013 3
  4. 4. Hvad er en ”mobil”...?●I dette indlæg:– Tablets●Kan ofte benytte et almindeligt web-design (uden ”fast”skærmstørrelse), så ikke en mobil her– Trykfølsomme skærme●Betragtes her ikke som en mobil– Smartphones●Betragter vi her som en ”mobil”Inspirationsdag, 24. april 2013 4
  5. 5. Mobile udfordringer●PLADS....– Meget mindre skærm●Navigering– Ingen mus – men en STOR finger●Netværks-båndbredde– Typisk meget langsommere dataforbindelse end fra encomputerInspirationsdag, 24. april 2013 5
  6. 6. Mobile udfordringer – eksempler●Svært at læse●Svært at navigere●Nogle elementer fungererslet ikke– F.eks. Flash på Apple devicesInspirationsdag, 24. april 2013 6
  7. 7. Mobile udfordringer – eksempler●Men vi kan zoome..!!!– Dog ikke helt godt– Noget af skærmen (hernavigeringen) bliver skjultInspirationsdag, 24. april 2013 7
  8. 8. Løsninger – hvad kan vi gøre?●Svaret er ikke eentydigt – men det ”afhængeraf....”– Hvordan løsningen skal bruges?●Online/offline●Få gange/regelmæssigt●Brug af enhedens hardware (kamera, etc.)●Hvordan brugeren skal ”finde” løsningenInspirationsdag, 24. april 2013 8
  9. 9. Løsninger●Vi vil her gennemgå følgende løsninger:– Responsivt design– Web-design, der ligner en ”mobil app”– En mobil app, der udviklet med web-teknologier– En native mobil appInspirationsdag, 24. april 2013 9
  10. 10. Responsivt design●Baseret på en bestemt organisering af et site(”fluid grids”)●Via CSS vises denne organisering forskelligt påforskellige størrelse skærme– Udvikler definerer de forskellige skærm-størrelser som”viewports”●Samme html sendes til alle enheder●Enhed afgør, hvordan siden skal visesInspirationsdag, 24. april 2013 10
  11. 11. Responsivt design – konceptInspirationsdag, 24. april 2013 11
  12. 12. Responsivt design – eksempler●Collaboration today– Meget nyttigt site om Notes/Domino– Baseret på BootStrap (fra Twitter)– Adresse: www.collaborationtoday.info– Se eksempler på næste sider...Inspirationsdag, 24. april 2013 12
  13. 13. Collaboration today - browserInspirationsdag, 24. april 2013 13
  14. 14. Collaboration today - iPadInspirationsdag, 24. april 2013 14
  15. 15. Collaboration today - iPhoneInspirationsdag, 24. april 2013 15
  16. 16. Responsivt design ogIBM XWork Server●XPages...– Responsivt design er blot ét ”layout” af den html dersendes til en browser– Nemt at lave på en XPage– XWork serveren er ligeglad– Alle komponenter til at vise/hente data fungerer upåvirketaf designetInspirationsdag, 24. april 2013 16
  17. 17. Responsivt design●Fordel– ”Lille” indgreb i forhold til ”normalt” site– Kræver ikke efterfølgende vedligehold– Nemt at lave med IBM XWork Server og XPages●Ulempe– Fuld båndbredde nødvendig, da al html sendes også tilmobiler– Ofte lange sider på mobilInspirationsdag, 24. april 2013 17
  18. 18. ”Mobil app”-lignende webdesign●Html5– Gode muligheder for at lave et layout, der ligner en mobil”app”– Navigering som i en app– One page application●Stadigvæk en web-side– Al html sendes over linien– Kræver online adgangInspirationsdag, 24. april 2013 18
  19. 19. ”Mobil app”-lignende webdesign●Hvordan?●Flere frameworks, bl.a.:– Dojo Mobile (kommer med IBM XWork Server og XPages)– jQuery Mobile●Udseende:– Ens for alle mobiler? … eller ...– Ligne den mobile platform?Inspirationsdag, 24. april 2013 19
  20. 20. Dojo mobile●Er indbygget i Domino Designer som ”MobileControls” for XPages●Er som udgangspunkt forskelligt for Android(sort/gul) og iPhone (blå/hvid)– Eksempel: Notesnet medlemmer●Kan dog ”styles” (css) til at se anderledes ud– Eksempel: Uddannelse Uden GrænserInspirationsdag, 24. april 2013 20
  21. 21. XPages Mobile ControlsInspirationsdag, 24. april 2013 21
  22. 22. Uddannelse Uden GrænserInspirationsdag, 24. april 2013 22
  23. 23. jQuery mobile●Deaktiver Dojo for at minimere overførsel afressourcer●Er som udgangspunkt ens for Android ogiPhone – flere standard layouts●Fylder mindre og er nemt at gå i gang med●Kan også ”styles” (css) til at se anderledes ud– Eksempel: Kalundborgmessen 2012Inspirationsdag, 24. april 2013 23
  24. 24. Kalundborgmessen 2012Inspirationsdag, 24. april 2013 24
  25. 25. ”Mobil app”-lignende webdesign●Nemt ogpraktisk attilføje somikon – en”app”....Inspirationsdag, 24. april 2013 25
  26. 26. ”Mobil app”-lignende webdesign ogIBM XWork Server●XPages...– Dojo mobile kommer med XPages– jQuery mobile kræver 2 filer...– Nemt at lave på en XPage– XWork serveren er ligeglad– Alle komponenter til at vise/hente data fungerer upåvirketaf designetInspirationsdag, 24. april 2013 26
  27. 27. ”Mobil app”-lignende webdesign●Fordel– Layout rettet direkte mod mobil (størrelse & navigering)– Godt til lejlighedsvis brug, f.eks. udstilling (QR-kode)– Nemt at lave med IBM XWork Server og XPages●Ulempe– Fuld båndbredde nødvendig, da al html sendes også tilmobiler●Kan i nogen grad afhjælpes med caching – men det er kompliceret...Inspirationsdag, 24. april 2013 27
  28. 28. ”Mobil app” - m. web-teknologi●Er en lokal app– Kaldt direkte fra en webside – eller...– Pakket som en ”native” app●Distribueres via app-stores●Udvikles én gang (til flere platforme)●Bærende sprog: JavaScript●Frameworks:– Sencha Touch– AppCelerators TitaniumInspirationsdag, 24. april 2013 28
  29. 29. ”Mobil app” - m. web-teknologi●Kendetegn– Kode kører lokalt – kan køre uden adgang til server– Stærkt/gennemarbejdet MVC (Model-View-Controller)eller MVVM (Model-View-ViewModel) pattern– Mindre fokus på formatering/udseende– Mere fokus på ”rigtig” programmering (funktioner,navigering, m.m.)– Udveksler kun data med server (typisk via JSON)●Langt mindre brug af båndbredde– Vil typisk gemme kopi af (nogle) data lokalt●Mindre brug af båndbredde – offline muligtInspirationsdag, 24. april 2013 29
  30. 30. ”Mobil app” - m. web-teknologi●Visuelt kan det være svært atse forskel, men koden kankøre lokalt – og langthurtigere...Inspirationsdag, 24. april 2013 30
  31. 31. ”Mobil app” - m. web-teknologi ogIBM XWork Server●Perfekt som JSON-webservice provider– XAgent (XPage uden UI) – fuldstændig kontrol– Sikkerhed (bruger-rettigheder)●Også som ”gateway” til andre systemer– Mange integrations-muligheder til f.eks. RDBMSer●Java: Masser af 3. parts værktøjer til JSON ogwebservicesInspirationsdag, 24. april 2013 31
  32. 32. ”Mobil app” - m. web-teknologi●Fordele– Udvikles kun én gang til flere platforme– Har de fleste karakteristika som native mobile apps– Kan køre lokalt/off-line– Kan cache data lokalt– Kan også ”pakkes ind” i Apache Cordova (PhoneGap) for atgive adgang til fysisk hardware (f.eks. kamera)– Optimeret kommunikation med serveren – lille forbrug afnetværks-båndbredde– Kører hurtigt– Kan styles via CSS (som web-apps)Inspirationsdag, 24. april 2013 32
  33. 33. ”Mobil app” - m. web-teknologi●Ulemper– Mere kompliceret udvikling end web-apps●Dog er der meget omfattende dokumentation og trænings-videoer– Tager længere tid at udvikle end en web-app.– Synkronisering mellem server og lokal DB skal egen-udviklesInspirationsdag, 24. april 2013 33
  34. 34. Native mobil app●Som vi kender...., f.eks.DMI Byvejret – medavancerede UI-egenskaberInspirationsdag, 24. april 2013 34
  35. 35. Native mobil app●Distribueres via ”app stores”– Android: Google Play– iPhone: Apples App Store●Skrevet i platformens ”eget” sprog– Android: Java, udvikles i f.eks. Eclipse– iPhone: Objective C, udvikles i Xcode (Mac)Inspirationsdag, 24. april 2013 35
  36. 36. Native mobil app●Anvendelsesområder:– Spil...!– Områder med store krav til UI og hastighed– Løsninger, som har brug for push-teknologi– … kan naturligvis også bruges til alle mulige administrativeløsningerInspirationsdag, 24. april 2013 36
  37. 37. Native mobil app ogIBM XWork Server●Perfekt som JSON (eller XML) Webserviceprovider....…. faktisk samme karakteristika som for”Mobil-app” m. web-teknologi ;-)Inspirationsdag, 24. april 2013 37
  38. 38. Native mobil app●Fordele:– ”Alt” kan lade sig gøre (events, UI, integration til hardware,etc.)– Kører hurtigt (hurtigst...)– Beskeder kan ”pushes” ud til telefonen– Økosystem for betaling for app.– Data kan lagres lokalt og integreres på samme måde somfor ”Mobil app” m. web-teknologi– XWork Server glimrende til at servere JSON dataInspirationsdag, 24. april 2013 38
  39. 39. Native mobil app●Ulemper:– INGEN genbrug af:●Programmerings-kompetencer●Forretningslogik– Derfor langt dyrere at udvikle– SKAL installeres på telefonen (dvs. mindre oplagt til adhocanvendelse)Inspirationsdag, 24. april 2013 39
  40. 40. Opsamling●Responsivt design●”Mobil app”-lignende web-design●”Mobil app” m. web-teknologier●Native mobil app●IBM XWork Server og XPages passer fint til allemodellerne :-)Inspirationsdag, 24. april 2013 40
  41. 41. OpsamlingInspirationsdag, 24. april 2013 41html og CSSResponsivt design:
  42. 42. OpsamlingInspirationsdag, 24. april 2013 42mobilt html og CSS”Mobil app”-lignende web-design:
  43. 43. OpsamlingInspirationsdag, 24. april 2013 43JSON - data”Mobil app” m. web-teknologi:DataApp storeEvt.
  44. 44. OpsamlingInspirationsdag, 24. april 2013 44JSON - dataNative mobil app:DataApp storeDataGoogle Play
  45. 45. Du er også velkommen til at kontakte mig:John DalsgaardDalsgaard Data A/SSolbjergvej 42, SolbjergDK-4270 HøngTelefon: +45 4914-1271Email: john@dalsgaard-data.dkwww.dalsgaard-data.dkInspirationsdag, 24. april 2013 45

×