Crear una app SAPUI5 con Web IDE y servicio oData (I)

Habíamos usado SAP Web IDE para crear una app sencillota en plan Hola Mundo y también nos habíamos creado un servicio oData con el Gateway. ¡Pero queremos más! Queremos aprovechar ese servicio oData para crear una app que muestre datos de un servidor SAP. ¡Pongámonos en marcha!

Pasos a seguir y a tener en cuenta

Debemos seguir los siguientes pasos para crear la aplicación:

• Para conectar la app con SAP, necesitaremos un destination creado en SAP HCP. Eso ya lo hicimos en un post anterior.
• Nos crearemos una app inicial en el Web IDE a partir de una plantilla que nos permita usar un servicio oData, como pueden ser una de tipo full screen, worklist o master and detail. Que no se nos olvide especificar la versión SAPUI5, que no sea superior a la de nuestro front-end. 
• La app generada es sólo un esqueleto sobre el que trabajar (no nos lo va a hacer todo el Web IDE), así que la adaptaremos a nuestros requisitos. Pero gracias al template ya tendremos mucho código (complicado) escrito. Esta parte la haremos en un post siguiente (y espero no olvidarme de enlazarlo aquí).

Además, debemos tener en cuenta tres cosas:

• Lo aconsejable a la hora de crear una aplicación, es usar un único servicio oData. Está claro que podríamos usar más si lo necesitásemos, pero entonces podríamos acabar teniendo una aplicación compleja, y normalmente para este tipo de apps (cuyo fin es ser usadas en Fiori) buscamos la sencillez en su uso.
• Si nuestro front-end no está expuesto al exterior, puede que nos toque usar el SAP Cloud Connector. En este post (en el apartado intranet inaccesible) ya cuento algo al respecto.
  Si para hacer este ejemplo estamos en este caso, podemos usar el servicio oData gratuito de Northwind y una entidad que queramos (por ejemplo, Customers) en lugar del que habíamos creado de ejemplo. Prometo hacer un post para explicar como instalar y configurar el SAP CC.
• Ojo, que puede que primero hagamos la aplicación y luego tiremos el código del servicio oData (nos hemos creado el servicio en la SEGW pero no hemos picado nada de código ABAP). En este caso, trabajaríamos con mock data (datos ficticios que pueden ser guardados, por ejemplo, en un fichero json).

Crear la aplicación

Para crear la aplicación, accedemos al Web IDE, al menú File -> New -> Project from template. Aquí obtendremos un listado con los distintos tipos de aplicaciones que podemos crear.

Tenemos que elegir primero el tipo de versión SAPUI5, ya que dependiendo de la versión el listado de aplicaciones podría cambiar, así como el código que se genere internamente. Escojamos siempre una versión igual o inferior a la de nuestro front-end. Si no, luego, puede que no nos funcione al subirla a SAP.

En mi caso, yo elegí una "anticuada" versión 1.28 para crear una aplicación de tipo SAP Fiori Full Screen Application. La elección te suele mostrar una imagen a la derecha para que veas cómo quedará.

Elige versión SAPUI5 (no te olvides) y luego el tipo de aplicación

En el siguiente paso le asignamos a la app el nombre de proyecto, sin espacios en blanco ni caracteres raros, y es así como se nos mostrará en nuestra área de trabajo (workspace). Es el equivalente al nombre de "Aplicación BSP" con el que se guarda en SAP (en la SE80), pero no nos preocupemos en ponerle una Z delante si no nos interesa, eso lo podremos hacer cuando lo subamos a SAP.

Después tenemos que elegir el servicio oData que vamos a utilizar. Sólo nos permite elegir uno durante la creación, así que si fuésemos a necesitar más, lo tendríamos que añadir luego nosotros en el código. Pero, como dije al principio, lo suyo es usar sólo un servicio oData.

Seleccionamos"Service Catalog" y el sistema (destination) que apunta a nuestro servidor SAP. Entonces nos saldrán los servicios disponibles, donde elegiremos el que nos habíamos creado antes.

El siguiente paso es añadir las propiedades de la aplicación. Dependiendo del tipo de aplicación, tendremos una serie diferente de campos.

El namespace será como el "nombre propio interno" de la aplicación, que se usará dentro del código. Podemos usar nomenclatura de puntos para definir el nombre. Por ejemplo, yo usaré jorgcalleja.mistextos. Las aplicaciones estándar de sap para HCM, por ejemplo, se llaman hcm.nombreaplicacion.

En oData Collection especificaremos el nombre de la colección que vamos a usar en la página principal.

Los demás campos se usan para mostrar en distintas partes de la aplicación el correspondiente atributo del servicio oData. Podemos jugar con ellos para ver qué obtenemos. 

En una aplicación full screen, tendremos dos páginas, la Master (página 1, la de detrás) y la Detail (página 2, la de delante).

Para este ejemplo, la página 1 será una tabla de resumen. El campo Item Title se mostrará en la primera columna y el campo Atribute (que no se ve en la captura) en la segunda. Después se mostrará un atributo numérico con medida (por ejemplo, un importe y su moneda), correspondiente a los campos Numeric Attribute y Unit of Measure. Y un último elemento de status, en la quinta columna, correspondiente con Status Attribute.

OJO: Si no nos aparece nuestra colección en oData Collection, puede que se nos haya olvidado marcar la opción Addressable  en la definición del servicio oData. Rápido, revisa este post.

La página dos es la de detalle, donde se nos va a abrir información adicional de la selección que hagamos en la primera página (la maestra).

Además, nos permite añadir una navegación, que es un tipo de elemento del servicio oData que nos permite enlazar dos colecciones, de tal forma que a partir de los datos de una colección podamos obtener los datos de otra. Como si trabajásemos con tablas relacionales, enlazadas entre sí.

Como nuestro servicio sólo tiene una colección (hemos sido vaguetes al crearla), aquí no nos saldrá nada de nada.

Al finalizar habremos creado nuestra primera aplicación. ¡Hip, hip, hurra! Si ejecutamos la aplicación, obtendremos algo como esto:

Sencillota sencillota... pero menos da una piedra

Si pulsamos una de las entradas, navegaremos a los detalles de ese texto. Hay una tabla en la parte inferior, que es en la que mostraríamos los datos de la navegación, si es que hubiésemos tenido alguna que indicar. Como no es el caso, nos vendrá vacía. Ya la eliminaremos más tarde.

 ¿Y cómo la ejecutamos?

Para ejecutarlo, seleccionamos la aplicación en el workspace y pulsamos el botón verde de play que aparece en la barra de herramientas. 

Junto al play (a la izquierda) aparece un recuadro desplegable, donde podemos elegir en qué formato realizamos la ejecución: como aplicación independiente (partiendo de un fichero index.html), integrado en un Fiori Launchpad, etc. La primera vez nos aparecerá en blanco, pero luego podremos añadir nuestras configuraciones.

A mí me sale un texto "usar el index" porque ya he configurado algunas opciones de ejecución

Si es la primera vez que ejecutamos una aplicación desde el Web IDE, puede que no nos aparezca nada y que nos quedemos con cara de bobos. Pero si somos observadores (o si el propio Web IDE nos avisa) veremos que hay uno de esos malditos mensajes de aviso del navegador, indicando que el Web IDE está intentando hacer alguna travesura e intenta abrir un pop-up. Así que le tenemos que dar autorización.

Así se ejecutará nuestra aplicación correctamente.

Para configurar la forma en la que podemos ejecutar dicha aplicación (cada app se hace de forma independiente), seleccionamos la carpeta en el workspace y elegimos en el menú Run -> Run Configurations. 

Obtenemos una ventana como la siguiente, para poder crear nuestras opciones de ejecución:

En el botón + podemos añadir nuevas opciones de configuración, donde nos interesará una de dos:

• Web Application si lo usaremos como una aplicación independiente. Entonces tendremos que indicar como archivo de inicio (en el campo File Name) el index.html que el Web IDE suele crear por nosotros.
• SAP Fiori Component on Sandbox si lo integraremos con el Fiori Launchpad. En este caso indicaremos como fichero de inicio el Component.js.

En ambos casos, la opción With Frame nos permite, en la ejecución, añadir una barra superior para hacer pruebas con el tamaño de la pantalla (por aquello de ser responsive y tal).

Si configuramos una opción con "With Frame", al ejecutar la aplicación nos añadirá esa barra superior negra para poder simular el tamaño de la ventana y ver cómo responderá ante diferentes resoluciones con sólo pulsar un botón. Pero esto es sólo para el Web IDE, esa barra no se verá cuando subamos la aplicación al portal correspondiente

¿Dónde y cómo se guardan los datos?

Con esta plantilla que nos hemos creado, hemos conseguido un montón de código y no hemos añadido nada. ¿Y dónde está todo ese código tirado por la cara? Repartido entre multitud de ficheros. Pero eso lo veremos en el siguiente tutorial.