Comment rendre vos applications - · Builder d’intégration (REST, Web services, database, ERP...
Transcript of Comment rendre vos applications - · Builder d’intégration (REST, Web services, database, ERP...
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
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 ?
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
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 ?
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
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 ?
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*
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 ?
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
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 ?
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
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 ?
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
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 ?
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
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
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
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 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