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

Inspirationsdag, 24. april 2013 3

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

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

Inspirationsdag, 24. april 2013 5

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

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

Inspirationsdag, 24. april 2013 6

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

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

navigeringen) bliver skjult

Inspirationsdag, 24. april 2013 7

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

Inspirationsdag, 24. april 2013 8

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

Inspirationsdag, 24. april 2013 9

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

Inspirationsdag, 24. april 2013 10

Responsivt design – koncept

Inspirationsdag, 24. april 2013 11

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

Collaboration today - browser

Inspirationsdag, 24. april 2013 13

Collaboration today - iPad

Inspirationsdag, 24. april 2013 14

Collaboration today - iPhone

Inspirationsdag, 24. april 2013 15

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

Inspirationsdag, 24. april 2013 16

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

Inspirationsdag, 24. april 2013 17

”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

Inspirationsdag, 24. april 2013 18

”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

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

Inspirationsdag, 24. april 2013 20

XPages Mobile Controls

Inspirationsdag, 24. april 2013 21

Uddannelse Uden Grænser

Inspirationsdag, 24. april 2013 22

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

Inspirationsdag, 24. april 2013 23

Kalundborgmessen 2012

Inspirationsdag, 24. april 2013 24

”Mobil app”-lignende webdesign● Nemt og

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

Inspirationsdag, 24. april 2013 25

”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

Inspirationsdag, 24. april 2013 26

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

Inspirationsdag, 24. april 2013 27

”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

Inspirationsdag, 24. april 2013 28

”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

Inspirationsdag, 24. april 2013 29

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

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

Inspirationsdag, 24. april 2013 30

”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

Inspirationsdag, 24. april 2013 31

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

Inspirationsdag, 24. april 2013 32

”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

Inspirationsdag, 24. april 2013 33

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

DMI Byvejret – med avancerede UI-egenskaber

Inspirationsdag, 24. april 2013 34

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)

Inspirationsdag, 24. april 2013 35

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

Inspirationsdag, 24. april 2013 36

Native mobil app ogIBM XWork Server

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

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

Inspirationsdag, 24. april 2013 37

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

Inspirationsdag, 24. april 2013 38

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)

Inspirationsdag, 24. april 2013 39

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 :-)

Inspirationsdag, 24. april 2013 40

Opsamling

Inspirationsdag, 24. april 2013 41

html og CSS

Responsivt design:

Opsamling

Inspirationsdag, 24. april 2013 42

mobilt html og CSS

”Mobil app”-lignende web-design:

Opsamling

Inspirationsdag, 24. april 2013 43

JSON - data

”Mobil app” m. web-teknologi:

Data

App storeEvt.

Opsamling

Inspirationsdag, 24. april 2013 44

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: john@dalsgaard-data.dk www.dalsgaard-data.dk

Inspirationsdag, 24. april 2013 45