Inspirationsdag 24. april: Udvikling af mobil applikationer med XPages

  • 88 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
88
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Inspirationsdag 2013Optimér din forretning med IBM NotesMobile enhederUdfordringer og løsninger
  • 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. 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. 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. 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. 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. Mobile udfordringer – eksempler●Men vi kan zoome..!!!– Dog ikke helt godt– Noget af skærmen (hernavigeringen) bliver skjultInspirationsdag, 24. april 2013 7
  • 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. 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. 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. Responsivt design – konceptInspirationsdag, 24. april 2013 11
  • 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. Collaboration today - browserInspirationsdag, 24. april 2013 13
  • 14. Collaboration today - iPadInspirationsdag, 24. april 2013 14
  • 15. Collaboration today - iPhoneInspirationsdag, 24. april 2013 15
  • 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. 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. ”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. ”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. 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. XPages Mobile ControlsInspirationsdag, 24. april 2013 21
  • 22. Uddannelse Uden GrænserInspirationsdag, 24. april 2013 22
  • 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. Kalundborgmessen 2012Inspirationsdag, 24. april 2013 24
  • 25. ”Mobil app”-lignende webdesign●Nemt ogpraktisk attilføje somikon – en”app”....Inspirationsdag, 24. april 2013 25
  • 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. ”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. ”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. ”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. ”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. ”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. ”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. ”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. Native mobil app●Som vi kender...., f.eks.DMI Byvejret – medavancerede UI-egenskaberInspirationsdag, 24. april 2013 34
  • 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. 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. 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. 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. 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. 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. OpsamlingInspirationsdag, 24. april 2013 41html og CSSResponsivt design:
  • 42. OpsamlingInspirationsdag, 24. april 2013 42mobilt html og CSS”Mobil app”-lignende web-design:
  • 43. OpsamlingInspirationsdag, 24. april 2013 43JSON - data”Mobil app” m. web-teknologi:DataApp storeEvt.
  • 44. OpsamlingInspirationsdag, 24. april 2013 44JSON - dataNative mobil app:DataApp storeDataGoogle Play
  • 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