Desarrollo de aplicaciones con SAP Fiori Elements List Report

2.1 Configuración del entorno de desarrollo

2.1.1 ABAP Development Tools

Las ABAP Development Tools (ADT), son herramientas proporcionadas por SAP para el desarrollo en un IDE basado en Eclipse. De esta manera, no necesitamos el acceso a SAP a través de la GUI como tradicionalmente se hacía.

Para empezar con la instalación, debemos acceder al enlace https://tools.hana.ondemand.com.

Una vez hemos entrado en el sitio, seleccionamos en el menú la opción de ABAP tal y como muestra la imagen siguiente:

Figura 2.1: Menú ABAP dentro de ADT

Dentro de esta sección, podemos ver el apartado de procedimiento (lo encontramos como Procedure). En este apartado, vemos todos los pasos para instalar las ADT:

Figura 2.2: Procedimiento para instalar las ADT

Vamos a hacer juntos este procedimiento:

• Descargar Eclipse: este va a ser nuestro IDE de desarrollo. Descargamos la versión que nos indican (en este caso Eclipse 2021-12). Para ello, hacemos clic sobre el enlace, que nos lleva al sitio web de Eclipse. Seleccionamos la versión Eclipse IDE for Java Developers:

Figura 2.3: Eclipse para desarrolladores Java

• En este punto, hacemos clic en el enlace de la derecha, según el sistema operativo que tengamos. Este enlace nos abrirá una nueva página web donde veremos el botón .

Figura 2.4: Descargar Eclipse IDE

• Hacemos clic en y se inicia finalmente la descarga de Eclipse.
• Preparar Eclipse: una vez tenemos Eclipse descargado, descomprimimos el archivo. Vemos que dentro de la carpeta descomprimida, tenemos una carpeta llamada Eclipse.

Figura 2.5: Contenido de la descompresión de Eclipse

• Vamos a renombrar esta carpeta, ya que puede darse el caso de que tengamos en nuestro ordenador más de una versión de Eclipse y necesitemos mantener estas versiones. La carpeta Eclipse la renombramos a eclipse202112.
• Vamos a aprovechar para crear también una carpeta en la unidad raíz de nuestro ordenador. Esta carpeta se llamará eclipses y contendrá todas las versiones de Eclipse que necesitemos. Una vez creada esta carpeta, movemos la carpeta eclipse202112 a la carpeta eclipses. El resultado final debería ser:

Figura 2.6: Carpeta con las versiones de Eclipse

• Creamos también un acceso directo para poder ejecutar Eclipse, de esta manera, no tendremos que entrar al explorador de Windows para encontrar el acceso a Eclipse. Para ello, entramos en la carpeta eclipse202112, buscamos el archivo eclipse.exe, hacemos clic con el botón derecho sobre el archivo y buscamos Enviar a • Escritorio (crear acceso directo) .

Figura 2.7: Crear acceso directo a Eclipse

• Java: para que Eclipse funcione, necesitamos tener Java instalado. Accedemos a la web de Oracle https://www.oracle.com/es/java/technologies/javase/jdk11-archive-downloads.html, buscamos la sección de descarga:

Figura 2.8: Sección de descarga de Java

• Descargamos Java según nuestro sistema operativo. Lo más común es descargar el instalador de la versión de Windows:

Figura 2.9: Instalador de Java para Windows

• Una vez descargado, ejecutamos el archivo. Nos aparecerá un asistente de instalación que nos guiará en todo el proceso.
• Iniciamos Eclipse: una vez realizada la instalación, iniciamos Eclipse y vemos que nos aparece la siguiente ventana:

Figura 2.10: Workspace de Eclipse

• En este punto, Eclipse nos pide que indiquemos el workspace que queremos utilizar. El workspace es la carpeta donde guardaremos nuestros proyectos. Podemos dejar la que viene por defecto o crear/seleccionar otra carpeta.
• Instalar ADT: tras iniciar Eclipse, debemos instalar las ABAP Development Tools. Para ello, desde la Ayuda , accedemos a Instalar nuevo software :

Figura 2.11: Instalar nuevo software en Eclipse

• Una vez dentro de la opción de instalar nuevo software, hacemos clic en el botón para poder añadir un nuevo repositorio y así añadir el repositorio de SAP. Esto nos abrirá una nueva ventana, donde debemos introducir el nuevo site de SAP para agregarlo:

Figura 2.12: Repositorio de SAP HANA Tools

• Una vez hemos introducidos los datos, hacemos clic en el botón y agregamos el nuevo repositorio.
• Seleccionamos el nuevo repostiorio y marcamos la opción de ABAP Development Tools y continuamos .

Figura 2.13: Instalar ABAP Development Tools

• En la siguiente pantalla, podemos revisar los detalles de lo que vamos a instalar de ADT.

Figura 2.14: Detalle de instalación de ADT

• Para iniciar la instalación, debemos leer y aceptar las licencias de utilización de ADT. Una vez leídas, marcamos el botón de opción de aceptar las licencias. Hacemos clic en y se iniciará la instalación de ADT.

Figura 2.15: Licencias de ADT

• Una vez finalizada la instalación, Eclipse nos solicitará reiniciar el programa. Reiniciamos Eclipse y ya tendremos ADT instalado.
• Crear ABAP Project: con ADT instalado en Eclipse, vamos a crear un ABAP Project. Un ABAP Project nos permite conectarnos a SAP mediante Eclipse y ver todos los objetos de desarrollo. Para crear el ABAP Project tenemos que ir a File • New • Other… .

Figura 2.16: Crear nuevo proyecto

• Una vez seleccionada la opción, nos aparecerá una ventana donde seleccionar qué queremos crear. Filtramos por ABAP , seleccionamos ABAP Project y continuamos .

Figura 2.17: Seleccionamos para crear ABAP Project

• Después de seleccionar ABAP Project y avanzar, nos pedirá que seleccionemos que conexión queremos utilizar en nuestro ABAP Project. Estas conexiones que aparecerán son las que tenemos configuradas en SAP Logon. Seleccionamos la conexión y avanzamos .

Figura 2.18: Seleccionamos la conexión a utilizar

• La siguiente pantalla que nos aparece, nos permite modificar algunos parámetros de la conexión. En nuestro caso, no modificaremos nada y haremos clic en .
• Por último, nos pedirá que introduzcamos el mandante, usuario y contraseña. Introducimos los datos y hacemos clic en .

Figura 2.19: Introducimos los datos de acceso

Una vez creado el ABAP Project, Eclipse nos preguntará si queremos abrir la perspectiva ABAP. Le decimos que sí haciendo clic en el botón .

Ahora ya tenemos nuestro proyecto ABAP listo para empezar a desarrollar nuestro servicio Odata.

Figura 2.20: Proyecto ABAP creado

Una vez tenemos el entorno de desarrollo listo para la parte de backend (servicio Odata), vamos a preparar el entorno de desarrollo de la parte de frontend.

Para el desarrollo de frontend, vamos a necesitar:

• Instalar SAP Cloud Connector.
• Crear una cuenta trial en SAP Business Technology Platform.

2.1.2 Instalación SAP Cloud Connector

El siguiente paso para nuestro entorno es la instalación de SAP Cloud Connector (SCC).

Y os preguntaréis, ¿para qué necesitamos esto?

Para desarrollar la aplicación SAP Fiori Elements vamos a utilizar un servicio de SAP Business Technology Platform (SAP BTP) llamado SAP Business Application Studio (SAP BAS). Este servicio es un entorno de desarrollo (IDE) en la nube basado en Visual Studio Code.

SAP BAS, como hemos comentado, está ubicado en la nube (en SAP BTP) por ese motivo no tiene visibilidad del entorno On Premise, ya que este suele estar protegido dentro de una intranet.

SCC nos ayuda a crear un túnel seguro entre SAP BTP y nuestro sistema On Premise. De esta manera, podemos utilizar los servicios que nos da la nube de SAP con nuestro entorno SAP On Premise.

Figura 2.21: Esquema de conectividad usando SAP Cloud Connector

Ahora que ya sabemos cómo nos ayuda SAP Cloud Connector, vamos a proceder a instalarlo.

Primero debemos bajar el instalable de SCC. Para ello, volvemos al sitio web de SAP HANA Tools (https://tools.hana.ondemand.com). Esta vez iremos a la sección Cloud :

Figura 2.22: Descargar SAP Cloud Connector

Una vez en la sección Cloud, buscamos el apartado de Cloud Connector y descargamos el instalable. En este caso, descargamos la versión para Windows , pero esta descarga dependerá del sistema operativo que se utilice.

Instalamos SCC y nos guíamos por el asistente. Una vez instalado, accedemos al sitio web https://localhost:8443. La primera vez que conectemos a SCC, deberemos usar los siguientes datos de autenticación:

• Usuario: Administrator
• Contraseña: manage

Figura 2.23: Pantalla de acceso a SAP Cloud Connector

Una vez dentro, nos solicitará que cambiemos nuestra contraseña. La cambiamos y seguimos.

Figura 2.24: Cambiar contraseña

Con estos pasos, ya tenemos SAP Cloud Connector funcionando. Ahora debemos crear una cuenta en SAP Business Technology Platform para poder configurar nuestro sistema SAP en SCC.

2.1.3 Configuración de SAP Business Technology Platform

Para crear una cuenta en SAP Business Technology Platform, debemos acceder al sitio web https://sap.com. Una vez accedamos, debemos hacer clic en el botón .

Nos aparecerá una página de registro donde debemos introducir nuestros datos. Introducimos los datos y nos registramos.

Figura 2.25: Registro en SAP

Después de registrarnos, recibiremos un correo electrónico para que procedamos a activar nuestra cuenta. Tenemos que hacer clic en el botón y nos llevará a la pantalla final, donde debemos seleccionar una contraseña para nuestra cuenta.

Figura 2.26: Seleccionar contraseña para nuestra cuenta en SAP

Una vez tenemos la cuenta creada, accedemos a https://account.hanatrial.ondemand.com y, desde ahí, debemos elegir qué región queremos utilizar. En este caso, vamos a utilizar US East, pero cada usuario deberá utilizar la más cercana a su país. Tras seleccionarla, hacemos clic en .

Figura 2.27: Seleccionamos la región para nuestra cuenta

Una vez seleccionada nuestra región, se lanzará un proceso de configuración donde se configurará todo lo necesario para poder utilizar nuestra cuenta de BTP.

Figura 2.28: Resultado de la configuración de SAP BTP

En este punto, ya podemos acceder a nuestra cuenta de BTP para ello hacemos clic en .

2.1.4 Enlace de SAP Business Technology Platform con SAP Cloud Connector

Una vez creada la cuenta en SAP BTP, tenemos que configurar SAP Cloud Connector para que realice la conexión con SAP BTP. Para ello accedemos a SCC y nos aparecerá una pantalla para configurar la cuenta de BTP. Introducimos los datos.

Figura 2.29: Datos de SAP BTP en SAP Cloud Connector

Vamos a comentar los datos introducidos:

• Region: aquí debemos seleccionar la región donde está nuestra cuenta de BTP.
• Subaccount: aquí tenemos que introducir el identificador de nuestra subcuenta de BTP.

Figura 2.30: Subcuenta de SAP Business Technology Platform

• Display Name: el nombre con el que visualizamos la conexión en SCC.
• Login E-Mail: correo electrónico utilizado en la cuenta de SAP BTP.
• Password: contraseña utilizada para la cuenta de SAP BTP.

Una vez introducidos los datos, guardamos la configuración haciendo clic en y ya tendremos creada la conexión entre SAP BTP y SCC.

2.1.5 Enlace de SAP Cloud Connector y S/4HANA

Una vez configurada la cuenta de SAP BTP en SAP Cloud Connector, vamos a añadir nuestro sistema SAP para finalizar la comunicación entre SAP BTP y nuestro sistema backend. Para ello, hacemos clic en el botón del menú izquierdo.

Nos aparece una tabla vacía con un conjunto de botones en la parte superior derecha. Hacemos clic en el botón y aparecerá una ventana para iniciar la configuración de la nueva conexión. Introducimos los datos:

• Seleccionamos el tipo de sistema SAP que vamos a utilizar. Lo común es utilizar ABAP System o SAP Gateway, en función de si nuestro landscape dispone de SAP Gateway o no.

Figura 2.31: Seleccionamos el tipo de sistema backend

Seleccionamos el protocolo de comunicación que vamos a utilizar para conectarnos al sistema SAP. Lo común es utilizar HTTP o HTTPS, dependiendo de la configuración de nuestro sistema.

Figura 2.32: Seleccionamos el protocolo de comunicación

• Introducimos la URL y el puerto de nuestro sistema. En caso de no saberlo, podemos encontrar esta información en la transacción SMICM, en el menú Go To • Services.

Figura 2.33: Introducimos los datos de nuestro sistema

• Especificamos el host y el puerto virtual. Indicamos una url que sea amigable.

Figura 2.34: Introducimos los datos de conexión virtual

• Seleccionamos si vamos a utilizar un certificado o Kerberos en nuestra conexión a SAP.

Figura 2.35: Seleccionamos el tipo de propagación

• Elegimos que host vamos a utilizar en nuestra conexión para informar en el header de las peticiones.

Figura 2.36: Seleccionamos el host a utilizar en las peticiones

• Podemos indicar una descripción para nuestra conexión:

Figura 2.37: Descripción de la conexión a SAP

• Finalizamos nuestra creación de la conexión a SAP. Si marcamos la casilla de verificación Check Internal Host, al finalizar la creación se verificará que la conexión se puede establecer satisfactoriamente.

Figura 2.38: Finalizamos la creación de la conexión

2.1.6 Configuración de destino en SAP BTP

Una vez configurada la conexión entre SAP Cloud Connector y S/4HANA, vamos a crear un destino en SAP Business Technology Platform (BTP). Este destino nos servirá para crear un enlace entre SAP BTP y el SAP Cloud Connector. De esta forma, cerraremos toda la conexión entre SAP BTP y nuestro S/4HANA.

Para crear la conexión, accedemos a la cuenta de SAP BTP mediante el enlace https://account.hanatrial.ondemand.com.

Una vez dentro, seleccionamos la subaccount que tenemos creada :

Figura 2.39: Seleccionamos la subaccount

Luego, seleccionamos la opción Destinations y vamos a crear un destination :

Figura 2.40: Creamos un nuevo destination

Al hacer clic en crear nuevo destination, nos aparecen una serie de campos en blanco. Vamos a rellenarlos:

• Name: nombre que le queremos dar a nuestro destination.
• Type: el tipo de conexión que va a ser.
• Description: descripción sobre qué es el destination.
• URL: aquí indicamos la URL del virtual host de SCC que habíamos creado anteriormente.
• Proxy Type: debemos indicar si nuestro sistema es On Premise o Cloud. En nuestro caso es On Premise.
• Authentication: indicamos el tipo de autenticación que vamos a utilizar.
• Location ID: especificamos el identificador de ubicación para cuando hay más de un SCC conectado a SAP BTP.
• User: rellenamos con el usuario con el cual nos vamos a autenticar.
• Password: rellenamos con la contraseña del usuario con el que nos vamos a autenticar.

También añadiremos las siguientes propiedades adicionales:

• HTML5.DynamicDestination: true
• HTML5.Timeout: 60000
• sap-client: 100
• WebIDEEnabled: true
• WebIDEUsage: odata_abap,dev_abap,ui5_execute_abap,bsp_execute_abap

Estas propiedades adicionales nos ayudan a habilitar el destination para poder utilizarlo en SAP Business Application Studio.

Nuestro destination debe quedar así:

Figura 2.41: Destination para nuestro sistema S/4HANA