inspirationsdag 24. april: udvikling af mobil applikationer med xpages

Inspirationsdag 2013Optimér din forretning med IBM Notes

Mobile enhederUdfordringer og løsninger

Agenda● Hvad er en ”mobil”...?● Mobile udfordringer● Løsninger:

– Responsivt design– ”Mobil app”-lignende web-design– ”Mobil app” - men med web-teknologi– Native mobil app

Inspirationsdag, 24. april 2013 2

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...


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”


Mobile udfordringer● PLADS....

– Meget mindre skærm

● Navigering– Ingen mus – men en STOR finger

● Netværks-båndbredde– Typisk meget langsommere dataforbindelse end fra en

computer


Mobile udfordringer – eksempler● Svært at læse● Svært at navigere● Nogle elementer fungerer

slet ikke– F.eks. Flash på Apple devices


Mobile udfordringer – eksempler● Men vi kan zoome..!!!

– Dog ikke helt godt– Noget af skærmen (her

navigeringen) bliver skjult


Løsninger – hvad kan vi gøre?● Svaret er ikke eentydigt – men det ”afhænger

af....”– Hvordan løsningen skal bruges?

● Online/offline● Få gange/regelmæssigt● Brug af enhedens hardware (kamera, etc.)● Hvordan brugeren skal ”finde” løsningen


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 app


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 vises


Responsivt design – koncept


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...


Collaboration today - browser


Collaboration today - iPad


Collaboration today - iPhone


Responsivt design og IBM XWork Server

● XPages...– Responsivt design er blot ét ”layout” af den html der

sendes til en browser– Nemt at lave på en XPage– XWork serveren er ligeglad– Alle komponenter til at vise/hente data fungerer upåvirket

af designet


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å til

mobiler– Ofte lange sider på mobil


”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 adgang


”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?


Dojo mobile● Er indbygget i Domino Designer som ”Mobile

Controls” 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ænser


XPages Mobile Controls


Uddannelse Uden Grænser


jQuery mobile● Deaktiver Dojo for at minimere overførsel af

ressourcer● Er som udgangspunkt ens for Android og

iPhone – flere standard layouts● Fylder mindre og er nemt at gå i gang med● Kan også ”styles” (css) til at se anderledes ud

– Eksempel: Kalundborgmessen 2012


Kalundborgmessen 2012


”Mobil app”-lignende webdesign● Nemt og

praktisk at tilføje som ikon – en ”app”....


”Mobil app”-lignende webdesign og IBM 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åvirket

af designet


”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å til

mobiler● Kan i nogen grad afhjælpes med caching – men det er kompliceret...


”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 Titanium


”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 muligt


”Mobil app” - m. web-teknologi● Visuelt kan det være svært at

se forskel, men koden kan køre lokalt – og langt hurtigere...


”Mobil app” - m. web-teknologi og IBM 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. RDBMS'er

● Java: Masser af 3. parts værktøjer til JSON og webservices


”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 at

give adgang til fysisk hardware (f.eks. kamera)– Optimeret kommunikation med serveren – lille forbrug af

netværks-båndbredde– Kører hurtigt– Kan styles via CSS (som web-apps)


”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-

udvikles


Native mobil app● Som vi kender...., f.eks.

DMI Byvejret – med avancerede UI-egenskaber


Native mobil app● Distribueres via ”app stores”

– Android: Google Play– iPhone: Apple's App Store

● Skrevet i platformens ”eget” sprog– Android: Java, udvikles i f.eks. Eclipse– iPhone: Objective C, udvikles i Xcode (Mac)


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 administrative

løsninger


Native mobil app ogIBM XWork Server

● Perfekt som JSON (eller XML) Webservice provider....

…. faktisk samme karakteristika som for ”Mobil-app” m. web-teknologi ;-)


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 som

for ”Mobil app” m. web-teknologi – XWork Server glimrende til at servere JSON data


Native mobil app● Ulemper:

– INGEN genbrug af:● Programmerings-kompetencer● Forretningslogik

– Derfor langt dyrere at udvikle– SKAL installeres på telefonen (dvs. mindre oplagt til adhoc

anvendelse)


Opsamling● Responsivt design● ”Mobil app”-lignende web-design● ”Mobil app” m. web-teknologier● Native mobil app

● IBM XWork Server og XPages passer fint til alle modellerne :-)


Opsamling


html og CSS

Responsivt design:

Opsamling


mobilt html og CSS

”Mobil app”-lignende web-design:

Opsamling


JSON - data

”Mobil app” m. web-teknologi:

Data

App storeEvt.

Opsamling


JSON - data

Native mobil app:

Data

App store

Data

Google Play

Du er også velkommen til at kontakte mig:

John Dalsgaard

Dalsgaard Data A/SSolbjergvej 42, SolbjergDK-4270 Høng

Telefon: +45 4914-1271

Email: [email protected] www.dalsgaard-data.dk


inspirationsdag 24. april: udvikling af mobil applikationer med xpages

Documents

uddannelse

mobil app

collaboration

kalundborgmessen

lignende web

app

design

til