sap fiori sapui5 - ausape.esausape.es/ausape/.../deleg_baleares/20151014_bussapui5fiori.pdf · 2 1....

Mallorca, 14 octubre de 2015

SAP FIORI / SAPUI5

2

1. INTRODUCCIÓN A LA MOVILIDAD 

2. SAP FIORI

Índice

3. SAP Ui5

5. POTENCIAL4. DESARROLLO 6. CONCLUSIONES

3

Cualquier Negocio

Cualquier Lugar

Cualquier Dispositivo

Cualquier Instante

CualquierUsuario

La movilidad se ha convertido en una necesidad empresarial

¿Por qué?

Introducción

4

Introducción

Accesibilidad Global

• En España la evolución en el número de líneas móviles desde el año 2000, ha aumentado un 126%.

• Desde 2006 se ha producido un descenso en el precio del móvil de casi el 50%.

5

Introducción

Soluciones Móviles SAP

SAP BusinessObjects Mobile

SAP Sales Manager

SAP Work Manager

SAP Customer Briefing

Otras

SAP Store VS. SAPUi5

SAPFiori

Otras

6

1. INTRODUCCIÓN A LA MOVILIDAD 

2. SAP FIORI

Índice

3. SAP Ui5

5. POTENCIAL4. DESARROLLO 6. CONCLUSIONES

7

¿Que es SAP Fiori?

• SAP Fiori es una colección de aplicaciones que representan el nuevo paradigma de experiencia de usuario de SAP

• Diseño coherente e intuitivo

• Infraestructura técnica común

• Supresión límites tradicionales

• Elementos de interfaz de usuario interactivos y atractivos

• Compatibilidad con todo tipo de dispositivos sin implementaciones adicionales

• Diseño y desarrollo con orientación funcional total 

8

¿Cómo funciona SAP Fiori?SA

P Ui5 • Basado en funciones

• Adaptable• Sencillo• Coherente• Valor instantáneo

Librerías SAP.UI Vistas Conjunto 

de DatosFIORI

• FIORI APP• Launchpad

Adaptación total

Acceso sencillo a la 

información

Nivel de personalización 

total

9

¿Por qué SAP Fiori?

• SAP Fiori nace para combatir los principales inconvenientes y obstáculos que presenta SAP ERP para la experiencia habitual del usuario 

Elevada rigidez

Acceso complejo 

a la información

Nivel de personalización 

bajo

10

Beneficios SAP Fiori

• La implantación de movilidad mediante SAP Fiori, permite:

• Mejorar la productividad del usuario mediante la simplificación yautomatización de las tareas del día a día a través de cualquier dispositivo.

• Impulsar la adopción del usuario con un diseño atractivo, adaptado a lastareas y actividades clave.

• Aumentar el cumplimiento y la calidad de los datos, haciendo que sea másfácil introducir la información en el sistema.

• Reducir los costes de capacitación y apoyo con pantallas sencillas, basadasen roles que aceleran la interacción y reducen al mínimo los errores deusuario.

• Ampliar y/o desarrollar fácilmente las aplicaciones, personalizando éstasmediante las herramientas y las tecnologías de desarrollo SAP.

11

Tipos de aplicaciones SAP Fiori

Existen tres tipos de aplicaciones SAP Fiori UX:

12

Tipos de aplicaciones SAP Fiori

Existen tres tipos de aplicaciones SAP Fiori UX:

1‐Transactional ApplicationsLas aplicaciones transaccionales SAP Fiori UX son aplicaciones diseñadas paraempleados, responsables, etc. Cada una de estas aplicaciones transaccionalesrequiere de la instalación de un Add‐On específico en el sistema.

Es el único tipo de aplicación SAP Fiori UX que no está necesariamente ligado a SAP HANA, sino que soporta cualquier otro tipo de Base de Datos en el sistema.

13

Tipos de aplicaciones SAP Fiori

2‐Fact SheetsEste tipo de aplicaciones SAP Fiori UX permite al usuario navegar por la información en diferentes capas. Permite el acceso a información global a un nivel contextual, acceder al detalle y si es necesario, navegar a más bajo nivel de dato y acceder a toda la información relacionada con él. 

Requisitos mínimos:‐ SAP HANA‐ SAP Web Dispatcher

14

Tipos de aplicaciones SAP Fiori

3‐Analytical Applications

También llamadas Smart Business Applications.Éstas tienen el objetivo de analizar y evaluar los KPI estratégicos u operativos en tiempo real y desencadenar las tomas de decisiones correcta.

Las aplicaciones analíticas SAP Fiori UX requieren:‐ SAP HANA con una Arquitectura 2‐Tier usandoModelos Virtuales (VDM)‐ Aplicaciones incluidas como paquetes en cada componente de SAP (ERP, CRM…)

15

Aplicaciones SAP Fiori

https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#

16

Análisis Aplicación‐ SAP Fiori

Margen NetoEsta aplicación muestra el indicador clave de rendimiento (KPI) Margen Neto. Además permite ir al detalle para profundizar y conocer:‐ La tasa neta de margen de beneficios en un período seleccionado del año fiscal 

en curso.‐ Comparar dicha tasa con la tasa prevista, así como también respecto el mismo 

periodo del año anterior.

17

Análisis Aplicación‐ SAP Fiori

Información para la implementación ‐ Instalación

Net Margin ‐ SAP Fiori APP

18

Análisis Aplicación‐ SAP Fiori

Información para la implementaciónInformación para la implementación ‐ Instalación

19

Análisis Aplicación‐ SAP Fiori

Información para la implementación ‐ Configuración

20

Análisis Aplicación‐ SAP Fiori

Información para la implementación ‐ Configuración

21

Launchpad‐ SAP Fiori

SAP Fiori Launchpad es un escritorio que aloja aplicaciones SAP Fiori y proporciona a las aplicaciones servicios como la navegación, personalización, soporte y configuración de la aplicación.

El Launchpad es el punto de acceso a las aplicaciones de SAP Fiori aplicaciones desde los dispositivos móviles y/o PC’s.

22

SAP Fiori ‐ Adaptaciones

Codificar

Publicar

Crear/Modificar

Diseñar

23

1. INTRODUCCIÓN A LA MOVILIDAD 

2. SAP FIORI

Índice

3. SAP Ui5

5. POTENCIAL4. DESARROLLO 6. CONCLUSIONES

24

SAP UI5 ‐ ¿Qué es?

SAPUI5 es un conjunto de libreríasJavascript para el desarrollo ydiseño de aplicaciones de negocioSAP basadas en HTML5.

Características Básicas

Diseñado para patrón MVC

Responsive

Bindeo bidireccional

Tematizable

Más de 200 controles UI (extensibles)

25

SAP UI5 vs OpenUI5

• OpenUI5 es la versión gratuita disponible bajo lalicencia de código abierto Apache 2.0

• Todo el núcleo de OpenUI5 y SAPUI5 (que contienetoda la funcionalidad central) es idéntico.

• La diferencia está en algunas bibliotecas de controlmás exótica que todavía no se han publicado bajo lalicencia de código abierto.

• Una de las principales diferencias, es que el soporteque SAP ofrece a SAPUI5, que garantiza la correcciónde errores, mientras que en OpenUI5, no existe estagarantía.

26

SAP UI5 – Principios

Es un framework de programación que facilitael desarrollo de aplicaciones web de ladocliente que cumplen los principios de la SAPUser Experience Strategy (UX).

27

SAP UI5 – Principios

1 ‐ Aplicaciones SAPUI5 orientadas a roles

Las aplicaciones SAPUI5 deben estar pensadas para losusuarios que van a utilizarlas. Sólo deben mostrar los datos queun determinado rol de negocio quiere ver y ninguno más.

Se trata de dividir las transacciones que conocemos hastaahora, en pequeñas aplicaciones orientadas a las tareasconcretas del rol que las va a utilizar.

28

SAP UI5 – Principios

2 ‐ Aplicaciones SAPUI5 responsive

Las aplicaciones SAPUI5 deben ofrecer una interfaz deusuario atractiva, a la vez que sencilla e intuitiva que ofrezcauna experiencia de usuario buena y equivalente sea cual sea laplataforma o dispositivo desde la que se acceda,independientemente de versión, sistema operativo, navegador,resolución etc.

29

SAP UI5 – Principios

3 ‐ Aplicaciones SAPUI5 simples

Las aplicaciones SAPUI5 además de estar orientadas a roles,deben ofrecer la funcionalidad de una manera sencillay simple.

En el desarrollo de aplicaciones SAPUI5 se sigue la regla 1‐1‐3:

1 usuario, 1 caso de uso, 3 pantallas como máximo. 

Si la aplicación que estamos desarrollando no puede resumirseen 3 o menos pantallas, deberemos rediseñarla o dividirla envarias aplicaciones SAPUI5.

30

SAP UI5 – Principios

4 ‐ Aplicaciones SAPUI5 coherentes

Las aplicaciones SAPUI5 deben hablar el mismo idioma. Esto serefiere a que deben utilizar elementos y estilos comunes demanera que un usuario que sepa utilizar unaaplicación SAPUI5, sepa utilizar cualquiera otra.

Para ello, existen themes y recursos web a disposición delos desarrolladores SAPUI5

31

SAP UI5 – Principios

5 ‐ Aplicaciones SAPUI5 disponibles al instante

Este principio está más relacionado con las aplicaciones SAP Fiori UX enmarcadas en el enfoque estrategia UserExperience de SAP. 

Se refiere a la disponibilidad de una de estas aplicaciones Fiori, que también son aplicaciones SAPUI5 ya desarrolladas y puestas a disposición por SAP que pueden instalarse y usarse en poco tiempo.

32

SAP UI5 ‐ Arquitectura

Como ya se ha comentado anteriormente, las aplicacionesSAPUI5 son aplicaciones de lado cliente que ofrecen unainterfaz SAP a través de la que consumir o nutrir de datos aSAP.

Desarrollar una aplicación SAPUI5 significa por tanto, diseñaruna interfaz y definir de dónde se va a obtener los datos que vaa tratar esta interfaz. Para ello, se utiliza elparadigmaMODELO‐VISTA‐CONTROLADOR.

33

SAP UI5 ‐ Arquitectura

Modelo: Serán las fuentes de datos de los que se nutrirá laaplicación, podrán ser SAP o no SAP y podrán estar basados endiferentes formatos como JSON, XML u oData

Vistas: Ficheros en los que se diseñará la estructura y formatode la aplicación SAPUI5 en cuestión: layouts, controles, tablas,etc. Pueden desarrollarse en los siguientes formatos:Javascript, XML, HTML o JSON.

Controlador: Ficheros Javascript en los que se definirá la lógicade negocio de la interfaz, se atenderá a eventos, se realizaránvalidaciones y se crearán modelos con los que establecer larelación entre la aplicación y el backend de donde procedan losdatos a tratar.

Vista

Modelo

JSON, XML, oDATA

Controlador

JavaScript

Modelo Vista Controlador

JavaScript, XMLJSON o HTML

SAP UI5 ‐ Arquitectura

35

SAP UI5 ‐ Desarrollo

A la hora de desarrollar un proyecto SAPUI5 debemos pensarqué tipo de aplicación SAPUI5 queremos desarrollar, quéelementos queremos mostrar en ella y de qué forma.

Por ello, es necesario conocer qué componentes podemosutilizar y qué librerías SAPUI5 tenemos a nuestra disposiciónpara implementar la funcionalidad que requiramos.

36

SAP UI5 – Desarrollo ‐ Librerías

sap.ui.commons

Si la aplicación va a ser preferentemente accedidadesde escritorio, crearemos una interfaz con controlespara páginas web comunes ( siempre asegurando que sise visualiza desde un móvil o una tablet la experienciade usuario también vaya a ser buena),

En librería SAPUI5 sap.ui.commons encontraremostodas las clases y métodos de diversos controles típicosde aplicación web:

‐ botones (sap.ui.commons.Button),‐ campos de entrada de texto (.InputField),‐ listas (sap.ui.commons.ComboBox) .

37

SAP UI5 – Desarrollo ‐ Librerías

sap.m

Si la aplicación va a ser accedida principalmentedesde dispositivos móviles: (teléfonos, tablets, ..)podemos optar por desarrollar una interfazmóvil que no sólo se adapte a la pantalla deldispositivo en cuestión si no que también ofrezcacontroles que se beneficien de su carácter móvil:gestos, interacción táctil etc.

En sap.m encontraremos también numerososcontroles con los que presentar la información deuna manera mucho más parecida a lo que estamosacostumbrados con cualquier app móvil: 3

38

SAP UI5 – Desarrollo ‐ Librerías

sap.ui.coresap.ui.tablesap.ui.ux3sap.me

…

39

SAP UI5 – Desarrollo ‐ Librerías

https://sapui5.hana.ondemand.com/sdk/test-resources/testsuite/testframe.html

40

1. INTRODUCCIÓN A LA MOVILIDAD 

2. SAP FIORI

Índice

3. SAP Ui5

5. POTENCIAL4. DESARROLLO 6. CONCLUSIONES

41

SAP UI5 – Desarrollo ‐ Entorno

42

SAP UI5 – Desarrollo ‐ Entorno

Eclipse es una plataforma de desarrollo, diseñada para serextendida de forma indefinida a través de plug‐ins. Fueconcebida desde sus orígenes para convertirse en una plataformade integración de herramientas de desarrollo. No tiene en menteun lenguaje específico, sino que es un IDE (IntegratedDevelopment Environment ) genérico.

Proporciona herramientas para la gestión de espacios de trabajo,escribir, desplegar, ejecutar y depurar aplicaciones.

43

SAP UI5 – Desarrollo ‐ Entorno

https://tools.hana.ondemand.com/#sapui5

44

SAP UI5 – Desarrollo ‐ Entorno

45

SAP UI5 – Desarrollo ‐ Entorno

Sap Gateway es una tecnología que proporciona una manerasencilla de conectar dispositivos.

OData tratar de dar solución a la exposición de orígenes de datos,relacionales o no, a través de un Servicio Web ejecutandooperaciones con un lenguaje “estándar” basandose en:

•La creación de una forma uniforme de representación de datosestructurados a través de Atom oJSON (JavaScript Object Notation)•La utilización de convenciones URL uniformes tanto para lanavegación, filtrado, orden y paginación de datos (entre otros)•La creación de operaciones uniformes dirigidas por direcciónmediante las acciones GET, POST,PUT y DELETE.

46

SAP Fiori ‐ Adaptaciones

Codificar

Publicar

Crear/Modificar

Diseñar

47

SAP UI5 – Desarrollo ‐ Aplicaciones

Transacción /UI5/UI5_REPOSITORY_LOAD

48

SAP UI5 – Desarrollo ‐ Gateway

Transacción SEGW

49

SAP UI5 – Desarrollo ‐ LaunchPad

Transacción LPD_CUST

50

SAP UI5 – Desarrollo ‐ Aplicaciones

51

SAP UI5 – Desarrollo ‐ Perfiles

Perfil Funcional

AnálisisRequerimientos

Perfil ABAP/Basis

Desarrollo ABAPDefiniciones Odata

Perfil Web

Desarrollo HTML5Desarrollo JavaScriptDesarrollo Eclipse

¿Es necesario contar con nuevos perfiles en nuestra organización?

52

SAP UI5

53

1. INTRODUCCIÓN A LA MOVILIDAD 

2. SAP FIORI

Índice

3. SAP Ui5

5. POTENCIAL4. DESARROLLO 6. CONCLUSIONES

54

Potencial

El potencial es ilimitado, pero que pasaría si…

• Queremos tener funcionalidades Offline.• Queremos crear APPs Nativas.• Queremos gestionar el despliegue de 

actualizaciones.• Queremos funcionalidades PUSH• …

55

SAP UI5 – SMP 3.0

12/09/2013 © 2013, Bussap Consulting, S.L. All rights reserved 56

57

1. INTRODUCCIÓN A LA MOVILIDAD 

2. SAP FIORI

Índice

3. SAP Ui5

5. POTENCIAL4. DESARROLLO 6. CONCLUSIONES

58

Conclusiones

• Desarrollo personalizado de las aplicaciones• Mejora de la productividad.• Diseño atractivo, adaptado a las tareas y actividades clave.• Interacción sencilla del usuario con el sistema.• Baja gestión del cambio• Entorno de desarrollo de fácil uso

Todo un mundo posibilidades a nuestro alcance

59

Gracias por su atención