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

Post on 05-Jul-2015

245 views 0 download

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

XPages

Is geen eiland!

XPAGES - 2014

MOBILE

Pettrie de Bondt

PdeBondt@ilionx.com

twitter.com/Pettrie

Skype:

Pettrie_de_Bondt

ilionx

VOORSTELLEN

Mobile First

AGENDA

1. Achtergrond / Doel

2. Landschap

3. Mogelijkheden

4. Praktijk

5. Demo

6. Code

7. Discussie

De klant

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

DE APPLICATIE !!

14 databases

Bestaande Lotus Notes client applicatie (deels) omzetten naar

mobile applicatie

xPages

Gefaseerd (lezen/Toevoegen/schrijven/processen)

Praktisch

Flexibel

Devices: iPhone + iPad (mini)

OPLOSSING

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

The future is

hereMOBILEFIRST

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

NATIVE /HYBRID / WEB

Bestaande

Xpage

Custom

Controls

MOBILE XPAGE

Wat zijn de mogelijkheden

Alles zelf bouwen (framework)

Extension library Mobile controls

TeamStudio Unplugged

OpenNTF

MOBILE XPAGES

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

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

Admin’s

In de zaal?!SECURITY

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

DMZ

ARCHITECTUUR

PIMS

JanDom01

Mobile

iPad / iPhone

PIMS

JanDom03

Web - Browser

VOORBEELD 1

Leer van andere applicaties

VOORBEELD 2

VOORBEELD 3

VOORBEELD 4

GEBR. JANSSEN - OPLOSSING

Show me the

moneyDEMO 1

Fase 1A

DEMO CRM

More PIMSDEMO 2

Fase 1B

DEMO PIMS

Coding is an

artCODE

Holy gra i l

HMTL5 + CSS3

HTML5

Good code

CODE

Chrome

Developer

Scherm formaat

Doorlopen van de panelen

Debuggen van javascript

DEBUGGEN

Chrome

Fiddler

DEBUG

Test prototype

tool

JSFIDDLE

Er zijn geen

domme

vragen, alleen

domme

antwoorden!

VRAGEN

Leren van

elkaar?DISCUSSIE

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