Instalar y configurar Eclipse para Fiori y SAPUI5

Hace unos días me decidí, por fin, a actualizar el Eclipse que tenía instalado en el equipo para trabajar con SAPUI5. Hasta ahora trabajaba con la versión Eclipse Mars, pero iba siendo hora de actualizarlo. Así que, aprovechando que lo hacía, pensé "pues ya puedo contar cómo hacerlo, porque lo mismo a alguien le interesa". Así que veamos cómo hacerlo.

Está claro que SAP ha apostado bien fuerte por usar su Web IDE como aplicación para desarrollar aplicaciones SAPUI5 y, aunque se siga manteniendo el desarrollo de SAP UI5 en Eclipse, hay una cosa con la que aún no podemos contar en esta herramienta: Con las plantillas predefinidas.

En su momento, en la antigua version Eclipse Juno, existía un add-on que podíamos añadir, el Fiori Toolkit, para hacer una aplicación de tipo Master-Detail. Pero se le dejó de dar soporte hace años. Hoy por hoy, no contamos con algo específico y con soporte que cuente con plantillas predefinidas.

Pero eso no quiere decir que no podamos usar Eclipse para SAPUI5. Podemos hacer desarrollos e incluso ampliaciones y probarlod en un sandbox local que cuenta con un Fiori Launchpad.

Así que, aunque siempre hemos hablado del Web IDE, en este artículo vamos a ver cómo instalar Eclipse y el software necesario para trabajar con SAPUI5 y Fiori. Vamos a ver los siguientes puntos:

• Cómo instalar Eclipse en nuestro ordenador.
• Añadir en Eclipse las ABAP Development Tools y la librería de SAPUI5.
• Instalar localmente un servidor web para poder probar nuestros desarrollos.
• Crear una aplicación SAPUI5 sencilla para probar (un Hola Mundo).
• Configurar el Fiori Launchpad en nuestro sandbox (localmente).

Instalar Eclipse

Lo primero, por supuesto, es bajarse el Eclipse. Hasta hace poco, cada nueva versión se identificaba con un nombre de un planeta o satélite o elemento de la tabla periódica, que comenzaba por la siguiente letra del alfabeto (vamos, como las versiones de Android con las chuches). Después del mencionado anteriormente Juno vino Kepler, Luna, Mars, Neon, Oxygen y Photon.

Ahora, parece que han cambiado la nomenclatura para hacerlo por año y mes. Menos didáctico, pero más claro.

Nos podemos bajar el eclipse en:

https://www.eclipse.org/downloads/

Atentos, que tenemos que comprobar nuestra versión de Java, ya que si es anterior a la 8, lo mismo tenemos que instalarnos una versión más antigua del Eclipse. Yo estuve un tiempo largo trabajando con la Kepler por tener la versión 7 de Java. En el artículo en el que veíamos cómo instalar el sap cloud connector podemos ver cómo saber qué versión de Java tenemos.

Como no creo que sea necesario explicar cómo se instala un programa, podemos pasar a la gestión de errores. Si nos da errores la instalación, ¡recurrimos a Google! Lo siento, se pueden dar tantos problemas, que yo aquí no puedo resolver nada. Soy un triste usuario de nivel usuario que cuentas sus experiencias como usuario. Pero si hay problemas, lo primero que podemos comprobar es la versión de Java... ah, que eso ya lo he dicho antes :P.

Al abrirlo, tenemos la página de bienvenida, que rápidamente cerraremos porque eso de leer tutoriales y ayudas no es lo nuestro.

¿Ah, que esto se lee?

Ya está, ya tenemos Eclipse. Si ya hemos trasteado con él, podemos configurar la perspectiva que queramos usar y, si no, pues nos conformaremos con la que venga por defecto. Aquí no vamos a entrar más en detalle en ese aspecto.

Ya tenemos el Eclipse funcionando

Añadir el software específico para ABAP y SAP UI5

Una vez instalado, vamos a añadir el software de SAP que nos permitirá desarrollar aplicaciones SAPUI5. Para eso, podemos ir a https://tools.hana.ondemand.com/ donde nos resumen el software que podemos instalar y las URLs que tenemos que usar en Eclipse para descargarlo.

Generalmente, la URL a usar es https://tools.hana.ondemand.com/version_de_eclipse. Por ejemplo, si hubiésemos instalado proton, sería https://tools.hana.ondemand.com/photon.

Como en el momento de instalarme este Eclipse (la 2018-12) no había una versión específica para hana.ondemmand, he usado la de photon. Espero que no me dé problemas despues :O.

Así que comenzamos: abrimos Eclipse, accedemos a Help -> Install New Software y añadimos (Add) una nueva URL, si no la tuviésemos ya, con el link mencionado antes.

Cuando accedamos a ese link, nos mostrará el software disponible y podremos elegir qué descargamos. En nuestro caso, nos interesa:

- ABAP Development Tools for SAP NetWeaver - Quizá hayamos oído ya las famosas ADT, que para nuestro caso nos permitirá conectarnos a SAP para subir y bajar aplicaciones, e incluso programar en ABAP directamente dentro del Eclipse en lugar de hacerlo mediante la SE80 (aunque para este caso no nos interesa).
- UI Development Toolkit for HTML5, que a lo mejor lo conocéis más por SAPUI5 ;).

Descargando aplicaciones. Fijaos que tengo desmarcado "Hide items that are already installed". Es porque estoy haciendo trampas, porque ya lo había instalado antes de esta captura. Pero lo suyo es tenerlo marcado para sólo mostrarnos nuevas versiones

Tendremos que aceptar las condiciones e instalar. Las condiciones son esas cosas en las que vendemos nuestra alma al diablo pero nunca leemos. Pues eso, aceptamos.

Instalar un servidor web para nuestras pruebas

Una vez hecho esto, vamos a instalar un servidor web, para que se puedan ejecutar nuestras aplicaciones localmente. Para ello, vamos a la pestaña Servers y pulsamos el enlace para crear uno nuevo.

Si ya tenemos uno instalado, nos valdrá con decirle donde está ubicado. Si no lo tenemos, podemos elegir algún servidor web que se nos instale automáticamente sin necesidad de pegarnos demasiado, como ocurre con algunas versiones del Tomcat.

Yo voy a instalar el Tomcat v8.0 porque se instala automáticamente
y yo soy más perezoso que Garfield en lunes.

Le asignamos un nombre y pulsamos sobre Download and install...

Nos pedirá que aceptemos las condiciones y, después, una ubicación donde instalarlo.

Tenemos que esperar un rato a que se acabe de instalar. Mientras no lo haga, nos mostrará un error en la pantalla, así que tenemos que esperar a que la instalación llegue al 100%. Eso lo podemos ver en la barra inferior.

Paciencia debes tener, mi joven padawan.

Tras instalarlo, nos pedirá las aplicaciones que queremos añadir al servidor. De momento no tenemos ninguna, así que finalizamos el proceso.

Y fin

Ya está, tenemos instalado el servidor.

Crear el Sandbox del Fiori Launchpad

Tras tener instalado el servidor, vamos a la siguiente tarea, ¡crear nuestro Sandbox de Fiori! Gracias a él, podremos probar aplicaciones como si estuviesen integradas en Fiori. Si nos creásemos una aplicación con un index.html, esto no nos haría falta, pero si la queremos crear con el formato Fiori (usando el Component.js) o queremos ampliar una estándar, necesitaremos este Sandbox.

Bueno, realmente no es crear, es ampliar el que nos viene con el software de SAPUI5 que hemos añadido. Pero digamos que lo estamos creando.

¿Y cómo lo creamos? Esto es fácil, sólo tenemos que recurrir a la documentación de SAP. Pero venga, también podemos hacerlo desde aquí.

Creamos un nuevo proyecto, de tipo Dynamic Web Project:

A ese proyecto lo llamamos appconfig y finalizamos el proceso.

Una vez creado, en la carpeta de WebContent, nos creamos un fichero llamado fioriSandboxConfig.json.

En dicho fichero añadiremos los tiles que se van a mostrar. Podemos ver la configuración del mismo en la documentación de SAP, aunque en la siguiente captura podemos ver un ejemplo.

SEMANTIC-ACTION será la acción semántica que nos dé la gana para llamar a la aplicación. Claro que si llamamos a una aplicación desde otra, sí que tendremos que preocuparnos de asignarle el correspondiente par semantic-action.

Crear una aplicación para probar

Está bien, ya tenemos montado todo, ahora nos vamos a crear una aplicación de ejemplo para acceder al Fiori Launchpad. Podríamos seguir el siguiente artículo para crearlo,
https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ , pero como va a ser un ejemplo sencillo, no vamos a crear nada de código, sólo una aplicación pelona.

Nos creamos un nuevo proyecto.

Lo crearemos de tipo SAPUI5 Application Development.

Le asignamos un nombre y que cree una vista inicial.

Elegimos el tipo de vista que usaremos (yo voy a optar por el clásico XML).

Y ya está, eso nos creará una aplicación vacía. No nos vamos a preocupar en desarrollar nada, sólo queremos ver el Fiori Launchpad.

En el fioriSandboxConfig.json, podemos configurar un tile para nuestra nueva aplicación. El nombre de la aplicación viene con el formato de la navegación semántica (nombre semántico y acción), y la url será el nombre del proyecto.

Ahora tenemos que añadir la aplicación al servidor. También añadiremos el appconfig, que hasta ahora no lo habíamos hecho. Vamos a la pestaña de Servers, elegimos el servidor, botón derecho y escogemos Add and Remove.

Y pasamos las aplicaciones de la sección Available a la sección Configured. Después, finalizamos.

Hala, ya están añadidos los proyectos

Ahora sólo nos falta iniciar el servidor para poder ejecutar la aplicación sobre el Fiori Launchpad. Seleccionamos el servidor, botón derecho y pulsamos Start. Esperamos un poco a que se inicie el servidor. Si vemos en el log muchos mensajes en rojo (es más, todos los mensajes en rojo), no nos alarmemos demasiado rápido. En buen momento se les ocurre usar el rojo para todo el log y no sólo para los errores.

Ejecutar el Fiori Launchpad

Venga, vamos a lo divertido de verdad, ejecutar el Fiori Launchpad. ¿Cómo sabemos cuál es la URL que tenemos que cargar? Pues lo primero es saber el puerto que tenemos configurado, que por defecto es el 8080 pero podría cambiar. Lo podemos ver en las propiedades del servidor (haz doble click sobre su nombre, pestaña Overview y te aparecerán).

Pues con ese dato, cargamos la siguiente url (mi aplicación se llama initial_app y el puerto era el 8080, así que en cada caso tendríamos que poner la aplicación que hayamos ejecutado).

http://localhost:8080/initial_app/test-resources/sap/ushell/shells/sandbox/fioriSandbox.html

¡Ya lo tenemos! Sí, hay muchas más aplicaciones que las que hemos añadido. Recordad que realmente hemos ampliado el sandbox que nos viene con el software. Nuestras aplicaciones son las de arriba.

Qué más podemos aprender

Bueno, pues con esto ya aprendido, nos quedan cosas como subir y bajar aplicaciones a SAP o configurar el proxy de Eclipse para poder conectarnos a un servicio oData sin que el navegador nos bloquee el acceso. Pero todo eso lo veremos en próximos artículos.