Presentation x pages-mobile-2014-01-08-a

39

description

Hoe bouw je een mobiele APP met XPages & jQuery mobile? - Pettrie de Bondt Aan de hand van een praktijk voorbeeld bekijken wat er nodig is om een mobile APP te maken. Deze APP is gemaakt op basis van XPages en jQuery Mobile. Kort wordt de project aanpak aangestipt daarna bekijken we alle aspecten van de bouw, ontwerp & test van deze applicatie. Doormiddel van korte duidelijke stukken code wordt uitgelegd hoe je zelf de volgende mobile APP kunt bouwen!

Transcript of Presentation x pages-mobile-2014-01-08-a

Page 1: Presentation x pages-mobile-2014-01-08-a
Page 2: Presentation x pages-mobile-2014-01-08-a

XPages

Is geen eiland!

XPAGES - 2014

MOBILE

Page 3: Presentation x pages-mobile-2014-01-08-a

Pettrie de Bondt

[email protected]

twitter.com/Pettrie

Skype:

Pettrie_de_Bondt

ilionx

VOORSTELLEN

Mobile First

Page 4: Presentation x pages-mobile-2014-01-08-a

AGENDA

1. Achtergrond / Doel

2. Landschap

3. Mogelijkheden

4. Praktijk

5. Demo

6. Code

7. Discussie

Page 5: Presentation x pages-mobile-2014-01-08-a

De klant

Page 6: Presentation x pages-mobile-2014-01-08-a

Gebr. Janssen

50 Dakdekkers

60 Loodgieters

15 man op kantoor

Lotus Notes

CRM / Relatiebeheer

Projecten = PIMS

Planning

Facturen!

Mobile

CRM -> Verkopers

PIMS -> Inspectie, planning, etc..

Fase 1

Alles lezen

ACHTERGROND / DOEL

Page 7: Presentation x pages-mobile-2014-01-08-a

DE APPLICATIE !!

14 databases

Page 8: Presentation x pages-mobile-2014-01-08-a

Bestaande Lotus Notes client applicatie (deels) omzetten naar

mobile applicatie

xPages

Gefaseerd (lezen/Toevoegen/schrijven/processen)

Praktisch

Flexibel

Devices: iPhone + iPad (mini)

OPLOSSING

Page 9: Presentation x pages-mobile-2014-01-08-a

LANDSCHAP

Front-end

web

Mobile

iPad / iPhone

Web -

Browser

Front-end

Notes client

8.53

Services

Soap / JSON Domino

ODBC

Back-End

MySQL

DB

DB

Page 10: Presentation x pages-mobile-2014-01-08-a

The future is

hereMOBILEFIRST

Page 11: Presentation x pages-mobile-2014-01-08-a

Mobile APP

Native

xCode / ObjectiveC, Eclipse /Java

AppCelerator / JavaScript

Visual Studio / VB.net, C#

IBM Worklight, Phonegap / JavaScript

Hybrid

Native wrapper

Use native capabilities

Generic HMTL

Re-Use HMTL application

100% Web

HTML5

CSS 3

Responsive design (RDW)

LANDSCHAP

Page 12: Presentation x pages-mobile-2014-01-08-a

NATIVE /HYBRID / WEB

Page 13: Presentation x pages-mobile-2014-01-08-a

Bestaande

Xpage

Custom

Controls

MOBILE XPAGE

Page 14: Presentation x pages-mobile-2014-01-08-a

Wat zijn de mogelijkheden

Alles zelf bouwen (framework)

Extension library Mobile controls

TeamStudio Unplugged

OpenNTF

MOBILE XPAGES

Page 16: Presentation x pages-mobile-2014-01-08-a

Advantages of jQuery:

Fast

Well documented

Easy to use

Chaining

Easy-to-use Ajax

Nice event handlers

CSS selectors

Small (only 30 KB)

Nice little built-in effects

Plugins

OOP no Class hierarchy

JQUERY VS DOJO

Advantages of Dojo: OOP (and other paradigms)

Widget infrastructure

Lazy loading of modules dynamically

Asynchronous loading of modules if desired

Simple integration with CDN

Sheer breadth of available modules in DojoX including graphics, charting

Attention to details in widgets

Support for i18n (including LTR and RTL languages)

Support for l10n (including standard date, currency, number formatting)

Provisions for people with special needs

Page 17: Presentation x pages-mobile-2014-01-08-a

Wat hebben we zelf onderzocht, wat zijn we tegen gekomen

Single page, diverse problemen

Unplugged, licentie probleem, niet handig opgezet

Buiten Xpages gezocht naar voorbeelden

jQuery mobile, BLUG

Conclusie

Event afhandeling in Dojo is !@#

Controls van anderen zijn moeilijk te doorgronden

Slechte/geen documentatie, weinig/geen voorbeelden

GJ Framework = jQuery Mobile

Mooi degelijk framework, grote community, veel examples

Zelf xPage controls maken

ZOEKTOCHT

Page 18: Presentation x pages-mobile-2014-01-08-a

Admin’s

In de zaal?!SECURITY

Page 19: Presentation x pages-mobile-2014-01-08-a

Security aspecten

Domino productie omgeving

DMZ

Gevoelige data

Verlies van apparaat

Trade-Off

A) Gemak in gebruik

Helpdesk ondersteuning, it just works

B) Veiligheid

VPN / SSL / Tokens / Wachtwoord / PIN

SECURITY

Page 20: Presentation x pages-mobile-2014-01-08-a

DMZ

ARCHITECTUUR

PIMS

JanDom01

Mobile

iPad / iPhone

PIMS

JanDom03

Web - Browser

Page 21: Presentation x pages-mobile-2014-01-08-a

VOORBEELD 1

Page 22: Presentation x pages-mobile-2014-01-08-a

Leer van andere applicaties

VOORBEELD 2

Page 23: Presentation x pages-mobile-2014-01-08-a

VOORBEELD 3

Page 24: Presentation x pages-mobile-2014-01-08-a

VOORBEELD 4

Page 25: Presentation x pages-mobile-2014-01-08-a

GEBR. JANSSEN - OPLOSSING

Page 26: Presentation x pages-mobile-2014-01-08-a

Show me the

moneyDEMO 1

Page 27: Presentation x pages-mobile-2014-01-08-a

Fase 1A

DEMO CRM

Page 28: Presentation x pages-mobile-2014-01-08-a

More PIMSDEMO 2

Page 29: Presentation x pages-mobile-2014-01-08-a

Fase 1B

DEMO PIMS

Page 30: Presentation x pages-mobile-2014-01-08-a

Coding is an

artCODE

Page 31: Presentation x pages-mobile-2014-01-08-a

Holy gra i l

HMTL5 + CSS3

HTML5

Page 32: Presentation x pages-mobile-2014-01-08-a

Good code

CODE

Page 33: Presentation x pages-mobile-2014-01-08-a

Chrome

Developer

Scherm formaat

Doorlopen van de panelen

Debuggen van javascript

DEBUGGEN

Page 34: Presentation x pages-mobile-2014-01-08-a

Chrome

Fiddler

DEBUG

Page 35: Presentation x pages-mobile-2014-01-08-a

Test prototype

tool

JSFIDDLE

Page 36: Presentation x pages-mobile-2014-01-08-a

Er zijn geen

domme

vragen, alleen

domme

antwoorden!

VRAGEN

Page 37: Presentation x pages-mobile-2014-01-08-a

Leren van

elkaar?DISCUSSIE

Page 38: Presentation x pages-mobile-2014-01-08-a

Delen van code

Native / Hybrid / 100% HTML

Beveiliging

iPhone vs iPad (mini)

Apple iOS / Google Android / MS Mobile

Javascript, Dojo vs jQuery

Maken van voorbeelden / OpenNTF / StackOverflow / Skype

Presentatie bekijken

Zie: http://XPagesAndBeer.nl

DISCUSSIE

Page 39: Presentation x pages-mobile-2014-01-08-a