Comment rendre vos applications - · Builder d’intégration (REST, Web services, database, ERP etc) Exemple: Création d’une requête en Base de données, formulaire de saisie

Comment rendre vos applications d'entreprise mobiles, à moindre coûts ?

Agenda

Le contexte Mobile

Quelles solutions pour y répondre ?▶ Panorama▶ Les applications Lotus Domino Mobile▶ Les solutions natives à WebSphere Portal ▶ Les outils de développement : Web Experience Factory, RAD▶ WorkLight▶ Mobile Portal Accelerator▶ Démo

Comment avancer ?

Agenda

Le contexte Mobile


Comment avancer ?

5

The PC era is over ....Tendances

6

Mais quelles sont vos priorités et contraintes ?

Quels sont les supports Mobile que vous souhaitez cibler ? Quel axe business : B2E, B2C ou B2B ? Quels sont les objectifs ? Quelles sont les applications/données concernées ? Quelles sont vos compétences de développement ? Quelles sont vos contraintes de développement ? Voulez-vous industrialiser vos développements ?

Agenda

Le contexte Mobile


Comment avancer ?

Tool

s

Panorama : Approches de développement d'applications mobiles

IBM WebSphere® Portal Mobile Experience

IBM Rational Application Developer

IBM Lotus® Domino®

Designer (XPages mobile)

Domino Portal

Mobile sites Web Mobile Applications

Native Mobile Applications

Exécution au sein du navigateur du Mobile Téléchargement depuis un AppStore puis installation

HTML5, Javascript, CSS3

HTML5, Javascript CSS3

Hybrid Mobile Applications

Car

acté

ristiq

ues

HTML5, Javascript+ Native device

'container'

IBM Mobile PlatformWorklight

Native OS platform + languages

IBM Web Experience FactoryIBM Mobile Platform

Worklight

IBM Mobile Platform

Worklight

IBM Web Experience + Phonegap

Agenda

Le contexte Mobile


Comment avancer ?

Applications IBM Lotus Domino Mobile

IBM LotusDomino Server

Mobile Device

Web Applications

Native Applications

Web

ser

ver

RE

ST

Web Browser

Native UI

Data+HTML UI

Data Only

Outline/Menu

Data View

Navigation Bar

Search Bar

Rendre les applications Domino mobiles à moindre coût

Comment ? Utilisation de xPages http://mobilecontrols.openntf.org ou

Domino 8.5.3 UP1 Ensemble de contrôles et

bibliothèques Navigation, contrôles, listes de

données Extensions de Dojo 1.6.1 Look and feel des applications

natives Accès aux services natifs Applications (Teamroom,

Discussion)

Support iOS 4 & 5, Android 2.3+, Blackberry*

http://mobilecontrols.openntf.org/



Agenda

Le contexte Mobile


Comment avancer ?

13

11

33

44

55

S'intègrent avec vos backends, y compris la gestion de contenu

Sont personnalisées selon un profil utilisateur, ses préférences, son comportement

Sont sécurisées

Un framework unique pour les applications web et mobiles

Afin de créer des applications mobiles qui:

Permettent une personnalisation par l'utilisateur final

Peuvent être analysées et optimisées grâce aux outils d'analyse

Peuvent adapter la présentation et les fonctionnalités selon le périphérique

22

66

L'intérêt du framework WebSphere Portal

IBM WebSphere Portal Mobile Experience Cibles les smartphones haut de gamme : Android, BlackBerry, iPhone Légé, riche visuellement, exploite les effets visuels CSS3 Widgets de navigation mobile – plusieurs modèles de navigations disponibles communs aux

smartphones Mise en page mobile –plusieurs modèles de mise en oeuvre de contenus Support du mode déconnecté – quelques exemple de mises en oeuvre pour mettre une partie

du site disponible en mode déconnecté

15

IBM WebSphere Portal Mobile ExperienceContrôle du « look and feel » ainsi que la navigation dans le site et entre les portlets

Site navigation utilisant les modes de navigation standard comme carousel, drill down et scrolling tabs

Look and feel de l'expérience mobile

Mise en page pour la navigation entre les portlets et les pages

16

Carousel Scroller Drill Down List

Mobile Navigation

17

CarouselSelect

SwapAccordionMobile Layouts

Agenda

Le contexte Mobile


Comment avancer ?

19

Web Experience Factory: Bénéfices Automatiser la création d'applications optimisées pour poste de travail, smartphone et

tablettes en éliminant la programmation pour améliorer le coût et la productivité de

développement

Créer des interfaces utilisateurs riches qui exploitent les techniques et les apports

HTML5, Ajax et widgets Dojo

Tirer parti des fonctionnalités HTML5 comme la géolocalisation et le support en mode

déconnecté

Développer des applications Hybrides pour supporter des fonctions natives des

smartsphones & tablettes i.e camera

Stratégie multi-canaux : Créer une fois, utilisation sur de multiples supports:

▶ Applications optimisées pour les mobiles

iPhone, Blackberry, Android, iPad

Portlets, widgets ou Applications Web (WebSphere Application Server)

Intégration avec le SI: Jeu de connecteurs robustes

▶ SAP, Domino, RDBMS, WEB/REST Services, PeopleSoft, Siebel, et plus

“Profiling Dynamique” : génération d'applications personnalisées

Look natif: développer des applications smartphones & Tablettes attractives

20

Smartphones

WebSphere Portal WebSphereApplication Server

Tablettes

BureauBrowsers

Utiliser un outil commun à tous les mobiles avec les mêmes techniques, le même code applicatif ...

... et générer des applications pour de multiples supports mobiles

Web Experience Factory

...déployer sur de multiples plateformes...

Web Experience Factory: Capacités à offrir des applications multi-canaux

21

Les concepts de Web Experience Factory

LibrairiesEt templates

Web Experience FactoryMoteur de génération de code

Model Builder 1 Builder 2 Etc.

Code de l’Application

Web Experience Factory s’appuie sur la notion de Modèles et Builders.

Un Builder est un composant adaptable qui se configure au travers d’un assistant pour réaliser une fonction spécifique qui par la suite génère le code et artifacts associé (Java, XML,…) ▶ Plus de 150 Builders….

▶ Builder de business Logic pour transformation et manipulation

▶ Builder d’intégration (REST, Web services, database, ERP etc) Exemple: Création d’une requête en Base de données, formulaire de saisie depuis un schéma, ajouts d’images, formatages, controle de l’aspet des

pages d’une application

Les Builders sont regroupés au sein d’un model dans l’interface graphique de Web Experience Factory

Architecture Orientée Service

Presentation (consumer) model

Service (provider)model

DB or otherback end data

source

Serv

ice

Inte

rfac

e op

erat

ion

s an

d sc

hem

as

Builders for mobile UIData LayoutMobile UI theme

UI customization builders

Desktop

Smartphone

Presentation buildersService ConsumerView & Form or Data Services UIData Field Settings

Provider buildersSQL Data Services, Web services, REST services, SAP, Domino, PeopleSoft, Siebel, etc.Data transforms and schemasReferences to Java classes/libraries

Web Experience Factory

Architecture Producteur/Consommateur

23

Fonctionnalités pour SmartPhones

Lists & Details Service Consumer Wizard: Permet la construction de listes et de vues personnalisées

Page Navigation builder: permet une navigation par listes ou onglets avec un « look & feel » natif

Data Layout builder: Listes de défilement avec options configurables tels que les images miniatures et multi-lignes avec plusieurs styles

Geolocation builder: permet l'accès au service de géolocalisation du mobile sans efforts de développement

Mobile UI themes: thèmes smartphones avec look & feel optimisé et des effets “slide in”

Mobile Rich Data Definition library: Support automatique pour les contrôles d'interface utilisateur mobiles tels que les listes sélectionnables, entrée pavé numérique, des numéros de téléphone, etc ...

Mobile Device Type: profiles multi-canaux. Permet pour une même application de définir des formats de présentations dynamiques en fonction du type de périphérique

24

Exemple d'application utilisant la Géolocation “Builder” Geolocation permettant l'accès au GPS en utilisant HTML5 “Builder” Navigation permettant de la génération d'une navigation native

25

Application iPad en mode déconnecté utilisant HTML5

Saisie & revue des formulaires en mode déconnecté

Soumission des formulaires vers le Portail une fois connecté

HTML 5 permet l'exécution d'applications en mode connecté ou en déconnecté▶ Utilisation du “cache manifest” et des fonctions de stockage HTML 5

WEF permet:▶ la construction des interfaces utilisateurs en mode connecté et déconnecté▶ la génération d'applications HTML5 déconnecté

Les formulaires déconnectés peuvent ensuite être réutilisés par le Portails en mode connecté

26

1.Selectionner le bouton “Prendre Photo ” depuis le Formulaire

2. Prendre une photo avec le smartphone

3. Visualiser le résumé et soumission du formulaire avec la photo vers le serveur

▬

Exemple d'applications accédant la Camera du smartphone avec PhoneGap

Web Experience Factory est utilisé pour la construction des formulaires et vues. Phonegap permet l'accès aux services natifs du smartphone comme la camera

RAD - Développement Web 2.0 simplifié

Utiliser RAD pour construire des applications Internet riches et améliorer l’expérience utilisateur

Abaisser les barrières d’adoption des technologies Web 2.0

• Exposer les composants serveurs comme des fournisseurs de services Web 2.0

• Développement visuel de pages Web 2.0

• Outils d’aide aux développement de sources javascript et Dojo et Dojo Mobile

• Capacités de debogage avec l’intégration de Firebug

• Previews utilisant de multiples browsers

Serveur de test léger pour prévisualiser rapidement des pages incluant des images, des scripts, des services et des données.

New in V8

Développement visuel de pages Web 2.0 avec Page Designer

Construct pages by dragging and dropping rich web components from a customizable Palette

Les pages sont construites par “Drag and Drop” de composants web riches, depuis une palette customisable.

Capacité à importer des librairies JSF ou javascript tierces dans RAD, avec insertion des widget correspondants dans la palette

La vue Données permet de configurer et faire un “drag and drop” des donner pour créer automatiquement une interface utilisateur liée à ces données

La vue “Propriétés permet une customisation aisée du composant sélectionné

Rapid UI Creation

Simple Data Access via JPA

Instant binding of UI to Services

Third party library support for JSF and JavaScript

Web Application Development is Drag and Drop Simple!

Un “Split pane” permet une visualisation synchronisée du source et des vues de conception ou de prévisualisation

25

IBM Rational Application Developer (RAD) fournit des outils pour le développement mobile

Editeur WYSIWYG pour le périphérique

ciblé

La vue Propriété permet de

paramétrer un widget

Dojo widgets

Simulateur de périphériques

dans le navigateur

Agenda

Le contexte Mobile


Comment avancer ?

Worklight ServerGestion unifiée des notifications, gestion de version applicative, styles dynamiques, sécurité, intégration back ends

Worklight ConsoleConsole web pour suivi analytique temps réel, contrôle des applications mobiles et de l’infrastructure.

Worklight StudioEnvironnement de développement complet et extensible permettant la création de code portable et l’optimisation de certaines parties selon le type d’appareil cible.

Composants de la Solution Worklight

Worklight Runtime ComponentsLibrairies et API clientes permettant d’accéder aux fonctionnalités natives des appareils←

Sites Hybrides – Web Experiences & Worklight

IBM MAP (Worklight) - Accès aux capacités natives du périphérique (camera, contacts,etc...)- Envoi de Notifications vers les Mobiles- Présence sur un App Store- Gestion d’Applications

WebSphere Portal/WCM - Navigation- Personnalisation, - Contenus, - Roles & Sécurité - etc

Hybrid Container

Fonctionnalités natives Périphérique

Web Site

Hybrid Container

Web Site

Fonctionnalités natives du Périphérique

Worklight permet d’étendre les fonctionnalités de WebSphere Portal

The information on the new product is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information on the new product is for informational purposes only and may not be incorporated into any contract. The information on the new product is not a commitment, promise, or legal obligation to deliver any material, code or functionality. The development, release, and timing of any features or functionality described for our products remains at our sole discretion

Principe de fonctionnement entre Worklight & WebSphere Portal Worklight facilite la création et le déploiement d’applications multi-

canal qui intéragissent avec les fonctions natives du périphérique mobile▶ Un Shell Worklight est un conteneur sur le périphérique qui gère de nombreux services comme:

pont vers fonctionnalités natives , APIs d’accès au serveur, l’authentification, la sécurité, lancement de l’application, controles, post-déploiement, base de données encryptée, etc. Le Shell peut être personnalisé en fonction de règles conforme à la politique de l'entreprise

Le Shell lance l’application

Une page Portail agrége des portlets qui produisent un markup qui exploite les fonctions natives▶ Le Shell Worklight pointe vers un point d’entrée du Portail▶ Le Shell Worklight peut être packagé afin d’être distribué dans un App Store ou déployé au travers d’un

MDM

Customizable Native Shell Code

Device APIs

Mobile Browser

CustomizableWeb Shell Code

Inner ApplicationWeb Code

Native Shell

Web Native

Device APIs

<!DOCTYPE html PUBLICcreated 2003-12</p></body></html>

100101010101110100101010101010100100100101111001001100

10

Native Shell

Web Code

<!DOCTYPE html PUBLIC<html><! - - created 2003-12-1<head><title>XYZ</title</head></body></html>

Device APIs

Agenda

Le contexte Mobile


Comment avancer ?

35

WebSphere Portal

Mobile Portal

Accelerator

PCs et tous les Browsers

Mobile Devices

Dynamique, adapté& formaté à 10,000 appareils mobiles

Basé sur les RôlesPersonnalisationContextuel Experience Web

Multi-ChanelServer (MCS)

Mobile Portal Accelerator: Solution Multi-canal

36

Extension de WebSphere Portal qui délivre du contenu et des applications pour pratiquement tous les appareils mobiles.

Adapter vos contenus à plus de 10 000 appareils mobiles . MPA fournit des capacités de serveurs multi-canaux intelligents qui fournissent dynamiquement du contenu en fonction des caractéristiques et capacités spécifiques de chaque appareil mobile.

Accélérer vos développements avec le Mobile Portal Toolkit qui permet de développer et tester vos portlets au format XDIME(XHTML avec Device Independent Markup Extensions) dans IBM Rational Application Developer (RAD).

Mise à jour régulière des caractéristiques des derniers appareils mobiles avec IBM Mobile Portal Accelerator Device Update. Mises à jour des caractéristiques disponibles dès qu'elles sont publiées par les constructeurs.

Mobile Portal Accelerator

37

M obileDevice

Databas e

Le M PA r cup re les é ècaract ristiques é

sp cifiques de l'appareil ém obile appelant la page parm i son r f rentiel de é é

plus de 8000 p riph riquesé é

Un utilisateur appelle une URL partir àde son m obile

Portail traite la requete, envoie la r ponse é àl'agr gateur é

Le m arkup est g n r é é épuis retourn vers le ém obile form at pour la ém eilleure exp rience éutilisateur possible

Le M PA agr ge les èdonn es, les th m es, le é è

contenu ainsi des directives sp cifiques de épr sentation associ au é é

p riph riqueé é

1 2 3

45

Principe de fonctionnement

http://images.google.it/imgres?imgurl=gfx.dagbladet.no/dinside/2002/11/05/02_email_sak.jpg&imgrefurl=http://www.dagbladet.no/dinside/2002/11/05/353094.html&h=538&w=280&sz=23&tbnid=47089noOCHEJ:&tbnh=128&tbnw=67&prev=/images%3Fq%3DQtek%26hl%3Dit%26lr%3D%26ie%3DUTF-8%26oe%3DUTF-8

http://images.google.it/imgres?imgurl=www.airliners.net/graphics/wap-example4.jpg&imgrefurl=http://www.airliners.net/wap/web/&h=380&w=240&sz=29&tbnid=qPHpTL1sMO8J:&tbnh=118&tbnw=75&prev=/images%3Fq%3Dwap%26hl%3Dit%26lr%3D%26ie%3DUTF-8%26oe%3DUTF-8

http://www.cingular.com/cell-phone-service/cell-phone-details/?q_list=true&q_phoneName=BlackBerry+7290&q_sku=sku1000004-1

38

Pane: Assigner une signification a du contenu

<canvas layoutName="/stockLayout.mlyt" type="portlet" class="body">

<pane name="Name"> <b>JK Telecom</b> </pane>

<pane name="Ticker"> JKT </pane>

<pane name="Price"> 192.73 +0.25 </pane>

<pane name="Logo"> <img src="/logo.mimg" /> </pane>

<pane name="Chart"> <img src="/chart.mimg" /> </pane>

<pane name="Additional"> <hr/> JK Telecom is a industry leading communication services provider. </pane>

</canvas>

Rendu du Contenu

39

Capitaliser et tirer parti de votre système d'information existant Réduit les délais de commercialisation, accélére le développement et déploiement d'applications)

Extension de WebSphere Portal permettant de délivrer du contenu et des applications pour pratiquement tous les appareils mobiles.

Mobile Portal Toolkit permet de développer des portlets indépendantes du périphérique Mobile Device Update Service permet la mise à jour du Référentiel d'appareils mobiles dès qu'elles

sont publiées par les constructeurs.

Write once, rendu sur plusieurs périphériques

Plus de 8 000 + terminaux mobiles supportés

Navigation et expérience utilisateur personnalisée pour chaque périphériques

Sécurité, contrôles d'accès et SSO

Modèles prêts à l'emploi permettant une prise en main rapide

Solution extensible permettant d'adapter des markups à destination de nouveaux terminaux XHTML

Agrégation d'un large éventail d'applications en un affichage unifié

Permet d'exposer facilement le contenu d'IBM WCM pour les utilisateurs mobiles

Modèles pour développer rapidement des sites et styles

Mises à jour de périphériques permettant d'assurer la compatibilité avec les modèles récents

IBM Mobile Portal Accelerator

Agenda

Le contexte Mobile


Comment avancer ?

Agenda

Le contexte Mobile


Comment démarrer ?

Social Business Agenda

Illustrer dans mon

environnement?

Quels sont les objectifs

stratégiques ? Les contraintes ?

Quels sont les apports

dans le contexte de

mes métiers?

Quelle est l’expérience utilisateur ?

Quelles priorités ?

Les leviers ?

Quels sont les

indicateurs de succès

qualitatifs et quantitatifs ?

Business Value Assessment (BVA)

Gisementsde Valeur

“Day inthe Life” et roadmap

BusinessCase/ROI

AGENDA Strategy

Solution Workshop

Objectifs et Initiatives

Audiences et

contraintes

Scénario métier ?

Processus et communautés prioritaires ?

Valeur et usages en regard des objectifs ?

Les leviers dans

l’organisation ?

Hocine Ziani Sheila AnimiHocine Ziani Sheila Animi

Métriques d’alignement

sur les objectifs

43

Prochains ateliers techniques ICS Lieu : Bois Colombes

▶ Inscriptions : http://www-05.ibm.com/fr/events/tec/formulaire_inscription_tec.html

Domino Administrateur 20 et 21 Mars 2012

Quickr Domino 27 Mars 2012

Sametime 3 et 4 Avril 2012

Domino Administrateur 12 et 13 Avril 2012

WebSphere Portal et Lotus Web Content Management 22 et 23 Mai 2012

IBM Connections 24 et 25 Mai 2012

Domino Administrateur 5 et 6 Juin 2012

44

IBM Lotus Domino AppDev http://www-10.lotus.com/ldd/ddwiki.nsf

IBM WebSphere Portal http://www-10.lotus.com/ldd/portalwiki.nsf

IBM Web Experience Factory http://www-10.lotus.com/ldd/pfwiki.nsf

IBM WorkLight http://www.worklight.com/

IBM Mobile Portal Accelerator http://www-10.lotus.com/ldd/portalwiki.nsf/xpViewCategories.xsp?lookupName=IBM%20Mobile%20Portal%20Accelerator

Vos sources d'informations

Project Northstar on IBM.comhttp://www-01.ibm.com/software/info/northstar/

Customer Experience Suite on IBM.com(ibm.com/software/info/customerexperience)

IBMXWebX YouTube Channel(http://www.youtube.com/user/IBMXWebX)

Integration Whitepapers

http://www-10.lotus.com/ldd/ddwiki.nsf

http://www-10.lotus.com/ldd/portalwiki.nsf

http://www-10.lotus.com/ldd/pfwiki.nsf

http://www.worklight.com/

http://www-10.lotus.com/ldd/portalwiki.nsf/xpViewCategories.xsp?lookupName=IBM%20Mobile%20Portal%20Accelerator

http://www-01.ibm.com/software/info/northstar/




http://www-01.ibm.com/software/info/customerexperience/

http://www-01.ibm.com/software/info/customerexperience/

http://www.youtube.com/user/IBMXWebX

http://www.youtube.com/user/IBMXWebX

http://www-10.lotus.com/ldd/portalwiki.nsf/xpViewCategories.xsp?lookupName=IBM%20Customer%20Experience%20Suite

Documents

Comment rendre vos applications - · Builder d’intégration (REST, Web services, database, ERP etc) Exemple: Création d’une requête en Base de données, formulaire de saisie