✒️SAP BTPFIORI / La creación de un proyecto multitarget Por Roberto Santucho

1. El concepto de MTA(Multi target application)

• se compone de varias partes (modulos), creadas con diferentes tecnologias y desplegadas en diferentes entornos, PERO CON UN UNICO CICLO DE VIDA COMUN.
• es el descriptor de cada proyecto de CF, se utiliza para definir los elementos y las dependencias de una MTA.
• la definicion de los microservicios y su tiempo de ejecucion se puede encontrar en este descriptor.
• Tambien declara los servicios de respaldo usados y los vincula a los microservicios.

El descriptor MTA esta compusto por:

• Recursos y tipos de recursos, que no son parte de un MTA, pero son requeridos por modulos en tiempo de ejecucion o en tiempo de implementacion.
• dependencia entre modulos y recursos
• parametros de configuracion tecnica, como la URL y la configuracion de la aplicacion.
• parametros tales como variables de entorno.

2. LA CREACION DE UN PROYECTO MTA USANDO STANDALONE APPROUTER.

Accedemos al btp, seccion BAS

2.1. LA CREACION DE UN NUEVO PROYECTO MTA

• Abrimos la paleta de comando (View > Command Palette... o Ctrl + Shift + P )
• > Open Template Wizard
• "Basic Multitarget Application" , le damos un nombre (mimta en este caso) y Finalizar
• VEMOS QUE SE CREA EL ARCHIVO MTA.YAML

_schema-version: "3.2"

2.2 LA CONFIGURACION DE LA APLICACION PARA USAR EL ENRUTADOR DE APLICACIONES (APP ROUTER)

• cuando el usuario final accede a la app en el entorno Cloud Foundry, PRIMERO ACCEDE AL APP ROUTER
• se utiliza para SERVIR CONTENIDO ESTATICO, AUTENTICAR USUARIOS, REEESCRIBIR URL Y REENVIAR O ENVIAR SOLICITUDES A OTROS MICROSERVICIOS mientras se propaga la informacion del usuario.
• SU MISION ES LA DE REDIRIGIR LAS PRIMERAS LLAMADAS PARA OBTENER DEL SERVICIO XSUAA el Json Web Token (nuestro token de acceso) y gestionar las llamadas que hacemos hacia los distintos servicios disponibles en nuestro proyecto.
• Para crearlo, boton derecho sobre mta.yaml > "Create MTA Module from Template" > "Approuter configuration"
• Elegimos "Standalone Approuter", por el momento "no autorizacion" y agregaremos despues una UX. Finalizar y nos agrega los nuevos bloques modulos en el cuerpo del mta.yaml y un nuevo nodo nombreapp-approuter

PARA EJECUTAR UNA APP EN EL ENTORNO SAP BTP CL, DEBEN SUCEDER:

• Cargar la app en este repositorio
• necesitamos un app router para dirigir el trafico entrante a la app que reside en el servicio de repositorio.
• utilizar el servicio "portal" de CF para llevarlo a SAP FL.
• va a haber destinos involucrados que apuntan a los sistemas backend que proporcionan datos. Por lo tanto, tambien necesitamos mantener el destino en SAP BTP Cockpit.

2.3 LA GENERACION DE UNA APLICACION SAP FIORI BASADA EN LA PLANTILLA DE APLICACION SAPUI5

Vamos a crear un proyecto para AGREGAR LA IU A LA PARTE DE FIORI.

• > "New Project from template" > "SAP Fiori application" > START

NOTA: NOV.2024, AHORA SE VE COMO "SAP FIORI GENERATOR"

Application Type: "SAPUI5 freestyle" y el modulo SAPUI5 ( ESTILO LIBRE ES HACERLO SIN ELEMENTOS DE SAP FIORI, entonces tenemos total flexibilidad: podemos especificar el diseno, el flujo, la estructura del menu, colores, fuentes, patrones de interaccion, etc. Obviamente demandara tiempo extra, porque debemos escribir codigo de la interfaz de usuario para cada pantalla.

Con los elementos de SAP Fiori, LAS PLANTILLAS PROPORCIONAN CODIGO DE IU (INCLUIDA CIERTA LOGICA), por lo que los datos del back-end (al que se accede a traves del servicio OData) van exactamente donde deberian, la UI se comporta como deberia, segun en los metadatos que proportcione el OData.

• Elegimos Worklist page como el template
• Datasource, el backend ES5
• Service ZGWSAMPLE_BASIC (1) - OData V2

>Para el campo Project Folder Path VAMOS A SELECCIONAR NUESTRO YA CREADO PROYECTO MiAppFiori que es donde tenemos nuestro mta.yaml que se usa para el deploy.

>Para el radiobutton "Add deployment configuration" seleccionamos Yes (Se actualizara automaticamente los cambios al archivo mta que teniamos)

>Deployment Configuration: Configure deployment settings

Please choose the target* > Cloud Foundry

Destination name: ES5

2.4 LOS ARCHIVOS GENERADOS Y PRUEBAS UNITARIAS.

• Dentro del archivo index.html cambiar el soruce de src="resources/sap-ui-core.js" por src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"

2.5 LA REALIZACION DEL DEPLOY EN CLOUD FOUNDRY

DESPLEGAR / se le conoce como la actividad de llevar nuestro codigo al servidor de testing o productivo.

Verificamos si tenemos ya deployadas otras apps dentro de los espacios creados: lo vemos en la subcuenta en BTP

• tenemos que hacer el build del archivo mta.yaml haciendo boton derecho > Build MTA Project : se crea en la carptea mta_archives un archivo comprimido (se puede ver con winrar) nombre_version.mtar
• en BAS, via terminal nos logeamos al espacio, en este caso dev: Terminal > new terminal y escribimos el comando cf login (como tenemos un solo espacio, ya nos asigna la api endpoint), ingresamos email y password con que accedemos al trial BTP
• debemos hacer el deploy del archivo mtar creado en el paso 1, boton derecho > Deploy MTA Archive. Mensaje The Build/Deploy task has completed!
• si vamos al espacio en BTP, veremos la app deployada y la podemos ejecutar

3. LA CREACION DE UN PROYECTO MTA USANDO EL MANAGED APPROUTER (VS LO ANTERIOR QUE FUE STANDALONE ROUTER)

Caracteristicas:

• Simplificar y acelerar la experiencia de desarrollo e implementacion
• Alojamiento de los recursos ejecutando una aplicacion HTML5 sin servidor.
• menor mantenimiento de las apps y aprovechamiento de las capacidades de enrutamiento mas actualizadas
• satisfacer la demanda de apps HTML5 ajustando automaticamente el servicio para manterner un rendimiento coherente y predecible

en el ejemplo a construir, la app esta expuesta al sericio FL y esta visible en el administrador de contenido del Launchpad.

La app se implementa en el repositorio de aplicaciones HTML5 a traves del entorno CF Y UTILIZA EL SERVICIO DE AUTENTICACION Y AUTORIZACION (SERVICIO XSUAA) Y EL SERVICIO DE DESTINO.

Creacion:

• New project from template > Sap Fiori application
• seleccionar managed approuter.
• hacer el deploy y se podra ejecutar en el espacio en btp

4. LA CREACION DE UN PROYECTO USANDO YEOMAN.

• es un sistema de generacion de proyectos escrito en JavaScript.
• compuesto por un modulo de Node.js (ENTORNO DE EJECUCION QUE NOS PERMITE EJECUTAR JS POR FUERA DE UN NAVEGADOR, CONSTRUIDO BAJO EL MOTOR V8 DE Gooogle Chrome).
  • de esta forma, PODEMOS PROGRAMAR TANTO EL FRONTEND COMO EL BACKEND EN UN MISMO LENGUAJE: JAVASCRIPT.
• abrimos la terminal, verificamos que version esta instalada yo --version

Ejercicio: linea de comando

yo e ira preguntando cada paso de la creacion de la app.

5. Otros IDES de desarrollo para SAPUI5/OPENUI5

Tenemos disponibles un conjunto de herramienteas basada en linea de comandos. Para instalarlas debemos tener Node.js: cuando lo instalamos, se instalan multiples librerias y se instala NPM, el gestor de paquetes de Node.

node -v para verificar la version instalada

npm install -g @ui5/cli instala UI5 CLI

ui5 --version verifica correcta instalacion