SAP Career Guide - A beginner’s manual on SAP careers for students and professionals

Themen werden sehr gut erklärt und mit anschaulichen Beispielen beschrieben.

N. Hildebrandt

Desarrollo de aplicaciones con SAP Fiori Elements List Report

Este libro permite aprender paso a paso cómo desarrollar una aplicación con Fiori Elements List Report, desde la definición del modelo hasta el despliegue en SAP Fiori Launchpad.El desarrollo se inicia creando el modelo de datos en SAP. Posteriormente, ge...

Leseprobe

Inhaltsverzeichnis

  • 1 Introducción
  • 2 ABAP Restful Application Programing Model
  • 3 SAP RAP Behaviors
  • 4 SAP Fiori Elements List Report
  • 5 Despliegue de la aplicación SAPUI5
  • 6 Ampliación de SAP Fiori Elements List Report
  • A El autor
  • B Aviso legal

Weitere Informationen

Autor/in:

Javier Martinez Solera

Katgorie:

SAP-Programming, Analytics

Sprache:

Spanisch

Leseprobe

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:

Fiori

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:

Fiori

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:

Fiori

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 Fiori.

Fiori

Figura 2.4: Descargar Eclipse IDE

  • Hacemos clic en Fiori 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.

Fiori

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:

Fiori

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 CalloutCaption y buscamos Enviar a CalloutCaption • Escritorio (crear acceso directo) CalloutCaption.

Fiori

Figura 2.7: Crear acceso directo a Eclipse

Fiori

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:

Fiori

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:

Fiori

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 CalloutCaption, accedemos a Instalar nuevo software CalloutCaption:

Fiori

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 Fiori 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:

Fiori

Figura 2.12: Repositorio de SAP HANA Tools

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

Fiori

Figura 2.13: Instalar ABAP Development Tools

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

Fiori

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 Fiori y se iniciará la instalación de ADT.

Fiori

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 CalloutCaption • New CalloutCaption • Other… CalloutCaption.

Fiori

Figura 2.16: Crear nuevo proyecto

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

Fiori

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 CalloutCaption y avanzamos CalloutCaption.

Fiori

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 Fiori.
  • Por último, nos pedirá que introduzcamos el mandante, usuario y contraseña. Introducimos los datos CalloutCaption y hacemos clic en FioriCalloutCaption.

Fiori

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 Fiori.

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

Fiori

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).

Atención

En ocasiones, SAP Cloud Connector está instalado en el entorno de desarrollo de nuestro sistema SAP. De ser así, la instalación de SCC en nuestra máquina no sería necesaria. Contactad con vuestro administrador de sistemas para confirmar.

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.

Fiori

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 CalloutCaption:

Fiori

Figura 2.22: Descargar SAP Cloud Connector

Una vez en la sección Cloud, buscamos el apartado de Cloud Connector CalloutCaption y descargamos el instalable. En este caso, descargamos la versión para Windows CalloutCaption, 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

Fiori

Figura 2.23: Pantalla de acceso a SAP Cloud Connector

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

Fiori

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 Fiori.

Atención

Para acceder a SAP Business Technology Platform nos sirve cualquier correo electrónico, pero sería mejor utilizar un correo electrónico que tenga asociado un S-User. La conexión entre SAP BTP y SCC requiere de una cuenta con S-User. Podemos ver el requisito en la siguiente nota: https://launchpad.support.sap.com/#/notes/2571763

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

Fiori

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 Fiori y nos llevará a la pantalla final, donde debemos seleccionar una contraseña para nuestra cuenta.

Fiori

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 Fiori.

Fiori

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.

Fiori

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 Fiori.

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.

Fiori

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.

Fiori

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 Fiori 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 Fiori 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 Fiori 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.

Fiori

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.

Fiori

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.

Fiori

Figura 2.33: Introducimos los datos de nuestro sistema

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

Fiori

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.

Fiori

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.

Fiori

Figura 2.36: Seleccionamos el host a utilizar en las peticiones

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

Fiori

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.

Fiori

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 CalloutCaption:

Fiori

Figura 2.39: Seleccionamos la subaccount

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

Fiori

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í:

Fiori

Figura 2.41: Destination para nuestro sistema S/4HANA

Alle Inhalte. Mehr Informationen. Jetzt entdecken.

et.training - Ihre Lernplattform für SAP-Software

  • Zugriff auf alle Lerninhalte1
  • Regelmäßige Neuerscheinungen
  • Intelligenter Suchalgorithmus
  • Innovatives Leseerlebnis
  • Maßgeschneidere Lernpfade
  • Zertifikate & QA-Tests2

Sie haben bereits ein Konto?

1 Sie erhalten Zugriff auf alle Lerninhalte. Online-Trainings, Zertifikate sind NICHT Teil der Flatrate.

2 Weitere Informationen auf Anfrage.