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

Transcription

1

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

3 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 Tendances The PC era is over... 5

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? 6

8 Caractéristiques Panorama : Approches de développement d'applications mobiles Mobile sites HTML5, Javascript, CSS3 Hybrid Mobile Applications HTML5, Javascript CSS3 HTML5, Javascript + Native device 'container' Exécution au sein du navigateur du Mobile Native Mobile Applications Téléchargement depuis un AppStore puis installation Domino Portal Tools Web Mobile Applications IBM WebSphere Portal Mobile Experience IBM Lotus Domino Designer (XPages mobile) IBM Web Experience Factory IBM Mobile IBM Mobile Platform Platform Worklight Worklight IBM Web Experience + Phonegap IBM Rational Application Developer Native OS platform + languages IBM Mobile Platform Worklight

10 Applications IBM Lotus Domino Mobile Native UI Mobile Device Native Applications Data+HTML UI Data Only REST Web Applications Web server Web Browser IBM Lotus Domino Server

11 Rendre les applications Domino mobiles à moindre coût Comment? Utilisation de xpages ou Domino UP1 Ensemble de contrôles et bibliothèques Navigation, contrôles, listes de données Extensions de Dojo Look and feel des applications natives Accès aux services natifs Applications (Teamroom, Discussion) Support ios 4 & 5, Android 2.3+, Blackberry* Outline/Menu Navigation Bar Search Bar Data View

13 L'intérêt du framework WebSphere Portal Afin de créer des applications mobiles qui: 1 S'intègrent avec vos backends, y compris la gestion de contenu 2 Sont personnalisées selon un profil utilisateur, ses préférences, son comportement 3 Permettent une personnalisation par l'utilisateur final 4 Sont sécurisées 5 Peuvent être analysées et optimisées grâce aux outils d'analyse 6 Peuvent adapter la présentation et les fonctionnalités selon le périphérique Un framework unique pour les applications web et mobiles 13

14 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 Experience Contrôle du «look and feel» ainsi que la navigation dans le site et entre les portlets Look and feel de l'expérience mobile Site navigation utilisant les modes de navigation standard comme carousel, drill down et scrolling tabs Mise en page pour la navigation entre les portlets et les pages 15

16 Mobile Navigation Carousel Scroller Drill Down List 16

17 Mobile Layouts Accordion Swap Select Carousel 17

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 19

20 Web Experience Factory: Capacités à offrir des applications multi-canaux Web Experience Factory 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 Bureau Browsers Smartphones Tablettes...déployer sur de multiples plateformes... WebSphere Portal WebSphere Application Server 20

21 Les concepts de Web Experience Factory 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 Code de l Application Web Experience Factory Moteur de génération de code Model Builder 1 Builder 2 Etc. Librairies Et templates 21

22 Architecture Orientée Service Architecture Producteur/Consommateur DB or other back end data source Provider builders SQL Data Services, Web services, REST services, SAP, Domino, PeopleSoft, Siebel, etc. Data transforms and schemas References to Java classes/libraries Service Interface operations and schemas Web Experience Factory Presentation (consumer) Service (provider) model model Presentation builders Service Consumer View & Form or Data Services UI Data Field Settings Builders for mobile UI Data Layout Mobile UI theme UI customization builders Desktop Smartphone

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 23

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 24

25 Application ipad en mode déconnecté utilisant HTML5 HTML 5 permet l'exécution d'applications en mode connecté ou en déconnecté WEF permet: Utilisation du cache manifest et des fonctions de stockage HTML 5 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é Saisie & revue des formulaires en mode déconnecté Soumission des formulaires vers le Portail une fois connecté 25

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

27 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

28 Développement visuel de pages Web 2.0 avec Page Designer Un Split pane permet une visualisation synchronisée du source et des vues de conception ou de prévisualisation Construct Les pagespages sont by dragging and construites par dropping rich web Drag and Drop components from de composants a customizable web riches, depuis Palette une palette customisable. La vue Propriétés permet une customisation aisée du composant sélectionné 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 Web Application Development is Drag and Drop Simple! Rapid UI Creation Instant binding of UI to Services Simple Data Access via JPA Third party library support for JSF and JavaScript

29 IBM Rational Application Developer (RAD) fournit des outils pour le développement mobile Editeur WYSIWYG pour le périphérique ciblé Dojo widgets La vue Propriété permet de paramétrer un widget 25 Simulateur de périphériques dans le navigateur

31 Composants de la Solution Worklight Worklight Studio Environnement 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. Worklight Server Gestion unifiée des notifications, gestion de version applicative, styles dynamiques, sécurité, intégration back ends Worklight Runtime Components Librairies et API clientes permettant d accéder aux fonctionnalités natives des appareils Worklight Console Console web pour suivi analytique temps réel, contrôle des applications mobiles et de l infrastructure.

32 Sites Hybrides Web Experiences & Worklight Worklight permet d étendre les fonctionnalités de WebSphere Portal Hybrid Container IBM MAP (Worklight) Hybrid Container Web Site Web Site - 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 Fonctionnalités natives Périphérique - Personnalisation, - Contenus, - Roles & Sécurité - etc Fonctionnalités natives du Périphérique 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

33 Principe de fonctionnement entre Worklight & WebSphere Portal Worklight facilite la création et le déploiement d applications multicanal 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 Customizable Native Mobile Browser Shell Code Inner Application Web Code Customizable Web Shell Code 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 Native Shell Web Code <!DOCTYPE html PUBLIC <html> <! - - created <head><title>xyz</title </head> </body> </html> Device APIs Native Shell Web <!DOCTYPE html PUBLIC created </p> </body> </html> Native Device APIs Device APIs

35 Mobile Portal Accelerator: Solution Multi-canal WebSphere Portal Basé sur les Rôles Personnalisation Contextuel Experience Web Mobile Portal Accelerator PCs et tous les Browsers Mobile Devices Multi-Chanel Server (MCS) Dynamique, adapté & formaté à 10,000 appareils mobiles 35

36 Mobile Portal Accelerator Extension de WebSphere Portal qui délivre du contenu et des applications pour pratiquement tous les appareils mobiles. Adapter vos contenus à plus de 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. 36

37 Principe de fonctionnement 1 Un utilisateur appelle une URL à partir de son m obile 3 2 Portailtraite la requete,envoie la réponse à l'agrégateur Le M PA récupère les caractéristiques spécifiques de l'appareil m obile appelantla page parm ison référentielde plus de 8000 périphériques M o bile D evic e D a ta ba s e 5 Le m arkup estgénéré puis retourné vers le m obile form até pourla m eilleure expérience utilisateurpossible 4 Le M PA agrège les données,les thèm es,le contenu ainsides directives spécifiques de présentation associé au périphérique 37

38 Rendu du Contenu 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"> </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> 38

39 IBM Mobile Portal Accelerator 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. 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) Write once, rendu sur plusieurs périphériques Plus de 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 39

41 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?

42 Social Business Agenda Business Value Assessment (BVA) AGENDA Strategy Quels sont les objectifs stratégiques? Les contraintes? Gisements de Valeur Day in the Life et roadmap Business Case/ROI 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? Solution Workshop Illustrer dans mon environnement? Hocine Ziani Objectifs et Initiatives Audiences et contraintes Valeur et usages en regard des objectifs? Les leviers dans l organisation? Scénario métier? Processus et communautés prioritaires? Métriques d alignement sur les objectifs Sheila Animi

43 Prochains ateliers techniques ICS Lieu : Bois Colombes Inscriptions : 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

44 Vos sources d'informations Customer Experience Suite on IBM.com (ibm.com/software/info/customerexperience) Project Northstar on IBM.com IBMXWebX YouTube Channel ( Integration Whitepapers IBM Lotus Domino AppDev IBM WebSphere Portal IBM WorkLight IBM Web Experience Factory IBM Mobile Portal Accelerator 44