Probando nuestra aplicación SAPUI5 en BAS de manera Local
Introducción
Cuando desarrollamos una aplicación con Business Application Studio tenemos la posibilidad de ejecutarla en local y hacer debug.
Pero… ¿podemos ejecutar una aplicación UI5 con una destination de prueba en vez de tener que deployar? La respuesta es clara ¡Por supuesto!
Cuando configuramos una aplicación para ejecutar en local, podemos redirigir nuestra llamada de una destination hacia otra sin tener que modificar ni una sola línia de código.
Para el ejemplo que os mostraré utilizaremos una aplicación desarrollada des de BAS para deployar en un SAP Gateway.
Preparando la destination
Antes de nada, debemos preparar nuestra destination para que sea visible en Business application studio. Los que lleváis tiempo trabajando en cloud, sobre todo en Neo esto os será familiar, pero os prometo que estamos en Cloud Foundry 😉
Los campos de propiedades importantes a añadir son:
- HTML5.DynamicDestination = true
- WebIDEEnabled = true
- WebIDEUsage = odata_abap,dev_abap,ui5_execute_abap,bsp_execute_abap,odata_gen
Añadiendo nuestra aplicación en la configuración local
Lo primero es revisar que tenemos nuestra destination declarada en el fichero xs-app.json. Aquí hay un punto importante a matizar. Aunque la aplicación se deploya en un SAP Gateway ( 7.52 ), por lo que no seria necesario el archivo xs-app.json, lo utilizaremos en BAS de nuestra subaccount de CF por lo que si que sera relevante para poder hacer la prueba.
Así que revisamos el fichero, en mi caso, utilizo la destination minisapDeploy, el fichero tendrá este aspecto.
Siguiente paso, es añadir la aplicación en el entorno de pruebas. Para ello, vamos a la opción «Run configuration» y pulsamos sobre el botón «+»:
Lo siguiente sera seleccionar el proyecto al que queremos realizar la prueba:
La siguiente opción nos permite que al ejecutar nuestro código utilizando el folder build o la carpeta webapp. Esto se traduce en, por ejemplo, si utilizamos el component.js o component-preload.js. La diferencia entre uno y el otro es que en el primero podremos ver los ficheros como los tenemos en BAS, el segundo como los tendríamos una vez realizado el deploy. Para este ejemplo seleccionaré NO, ya que al estar en pruebas me puede interesar utilizar la consola.
Otra nota antes de seguir, en este punto, si seleccionamos Yes, nos tenemos que asegurar que tenemos el folder /dist. Para generarlo podemos ejecutar el comando «npm run build«.
En esta selección podemos escoger el fichero html de entrada. En mi caso escogeré «index.html»
Ahora nos pide la versión de librerías SAPUI5. En caso de no utilizar cnd para leer las librerías es importante saber la versión del gateway para no tener sorpresas.
Nos queda lo más fácil, dar un nombre y ya lo tendremos todo apunto.
Ahora nos aparecerá la aplicación lista para ejecutar… Un momento… ¿Lista? nos el último detalle.
Si desplegamos todos los niveles veremos las destinations asociadas a la aplicación, ahora pulsaremos el botón de binding (marcado en rojo, aparece al acercar el ratón sobre la destination ) :
Al pulsar el botón, nos aparecen todas las destinations configuradas para que sean visibles en BAS, seleccionamos la que mas nos interesa y ya lo tendremos todo a punto:
Ahora veremos que la destination esta bindeada con una destination de nuestra subaccount.
Es el momento de pulsar Play y accedemos a la URL que nos facilita el terminal.
Como veis, podemos tener varias destinations para poder hacer nuestras pruebas en local utilizando BAS. Esto es útil cuando por ejemplo tenemos servicios backend locales o APIS en fases beta. Por ultimo, os dejo un tutorial de SAP Yard que no enseña a hacer el deploy des del BAS a SAP Gateway.
Apuntes extra en caso de usar App router
Un apunte extra de Sara Moreno, os invito a seguir su blog http://sapworkbench.es/ que habla de muchos temas relacionados con SAP!
En el fichero xs-security.json hay que añadir la siguiente información
"oauth2-configuration": {
"redirect-uris": [
"https://*.eu10.applicationstudio.cloud.sap/**",
"https://*.cfapps.eu10.hana.ondemand.com/**"
]
}Gracias por el aporte Sara!!
Como dale a la campanita de notificaciones y comparte en redes para estar a la última.
