Vamos a ver en este artículo como migrar un proyecto desde SAP WebIDE hasta Visual Studio Code, cómo adaptarlo al nuevo entorno, cómo probarlo y finalmente cómo desplegarlo a un sistema SAP on premise.

Migración

Para migrar tus repositorios desde el SAP WebIDE tienes que llevártelos físicamente desde el WebIDE hasta el Visual Studio Code. Esto lo puedes hacer exportando e importando los ficheros sin más (como en la edad de piedra) o a través de algún repositorio Git. Yo soy de GitHub así que utilizo su extensión para el Visual Estudio. Es una extensión muy extendida que está llegando ya al medio millón de instalaciones.

Para clonar el repositorio accedemos al panel de comandos con Control + Shift + P y buscamos el comando Git: Clone. Recuerda que por defecto estarás situado en la rama master del repositorio. Cambia a la rama correspondiente si tienes que hacerlo.

Adaptar el proyecto de WebIDE a VS Code

Para adaptar el proyecto al nuevo entorno necesitas la extensión SAP Fiori tools – Extension Pack para VS Code.

Por cierto, esta extensión básica de Fiori en VS Code no llega a las 5.000 instalaciones. Es decir, solo uno de cada 150 usuarios de GitHub usa Fiori. Para que veas lo tarde que llega SAP al mundo web… pero bueno, esa es otra historia.

Sigamos con la adaptación del proyecto. Una vez tienes el proyecto en VS Code tienes que hacer algunos ajustes para poder utilizarlo. Y esos ajustes pueden variar mucho. Básicamente la diferencia radica en si tu aplicación está hecha con Fiori Elements o no.

SAP cuida mucho sus cosas y lleva tiempo empujando hacía este camino. Si no estás familiarizado aún con Fiori Elements puedes echarle un ojo al post en que hablábamos de ello:

¿Qué es Fiori Elements?

Vamos a hacer un primer acercamiento al concepto de Fiori Elements, una tecnología fundamental en el desarrollo actual de interfaces de usuario en SAP.

Fiori se presento oficialmente allá por 2013 (para los que dicen que esto es nuevo) con un paquete inicial de 25 aplicaciones que pasaron a ser 81 en 2014…

Como te decía, si tu aplicación está basada en Fiori Elements no hay problema. Abres la paleta de comandos y buscas SAP Fiori tools – Migrate Web IDE project for use Fiori tools. El programa te preguntará el sistema SAP de destino y el puerto para la conexión y a continuación podrás ver en el terminal cómo se crean los módulos para node.js. De esta forma el repositorio ya está listo para ser ejecutado localmente. También se habrá actualizado tu fichero .gitignore metiendo aquí este nuevo directorio para node_modules.

Ya está! Perfecto! Todo maravilloso!!

Pero, ¿Qué pasa si tu aplicación es Freestyle? Pues básicamente que te tienes que buscar la vida. Aunque la hayas construido siguiendo todas las BxP de SAP con tu component, manifest, neo-app, etc. Si no es Fiori Elements te  tienes que hacer la adaptación tu mismo. A mano. Para cada aplicación. Si.

Duro, ¿no? Pero bueno, que da igual. ¡Hemos venido a jugar! Ya verás como no duele tanto. Básicamente se trata de ajustar o crear a mano los ficheros package.json, ui5.yaml, limpiar algún fichero que sobra y después instalar el módulo de node.

Venga vamos a ello.

Accedemos al terminal con Control + Shift + ñ. Con esto, si tenemos varios proyectos tendremos que seleccionar el que queremos en el panel de comandos.

Ahora en el terminal simplemente utilizamos el comando npm install para instalar node en nuestro repositorio. Si te falla esta simple instrucción posiblemente sea porque no tienes instalado node en tu equipo. Si es así revísate la entrada Éxodo – III: Configurando el entorno para VS Code de esta serie de posts. Si te ha ido bien se habrá creado el directorio node_modules con las librerías necesarias para que el repositorio actúe como servidor local.

Ahora es necesario que ajustes el fichero package.json. Es posible que no tengas este fichero en tu repositorio. Para ajustarlo depende lo pro que seas.

Si no quieres complicarte puedes hacer la construcción a mano. Su versión mínima podría ser esto:

Package.json
{
  «name»«team-calendar-ui»,
  «dependencies»: {
    «@sap/approuter»«^6.0.1»
  },
  «scripts»: {
    «start»«node node_modules/@sap/approuter/approuter.js»
  }
}

Pero mi consejo es que partas de un fichero package.json válido y lo ajustes a tu repositorio.

Consejo: Si no tienes un fichero válido de otro repositorio puedes hacerte una aplicación Fiori Elements en un momento con el wizard de SAP Fiori tools – Application Generator: Launch. Y si esto no lo controlas bien, aquí te dejo tres enlaces:

  1. Set Up and Generate a New SAP Fiori App Project. Es un tutorial que está bien aunque es en Business Application Studio, no en VS Code.
  2. Developing SAP Fiori App using SAP Fiori Tools in Visual Studio (VS) Code. Un post donde lo explican todo muy bien.
  3. Introducing SAP Fiori tools: Application Generato. Un video muy detallado con todos los pasos.

Ojo, una cosa que no dicen en ningún sitio es que si es la primera vez que entras en el generador de aplicaciones de Yeoman, no tendrás cargado ningún generador que elegir. No pasa nada. En la parte superior derecha tienes el enlace Explore and Install Generators… donde acceder a una página con literalmente miles de posibles generadores. En la barra de búsqueda pones Fiori y se filtra unos pocos resultados. Quédate con la opción que dice @sap/generator-fiori-elements aunque está bien que explores las otras opciones también.

La parte más relevante del fichero package.json que tienes que construir es donde se especifican los scripts, empezando por el script de arranque «starts».

 

Package.json
[…]
«scripts»: {
    «postinstall»«npm i @sap/ux-ui5-tooling@^1.0.0 @sap/ux-specification@^1.76.12 –save-dev –save-exact=false»,
    «start»«fiori run –open test/flpSandbox.html?sap-language=ES#masterDetail-display»,
    «start-mock»«fiori run –open test/flpSandboxMockServer.html#masterDetail-display»,
    «start-local»«fiori run –config ./ui5-local.yaml –open test/flpSandboxMockServer.html#masterDetail-display»,
    «deploy»«npx nwabap upload»,
    «dev»«browser-sync start -s webapp/ -f . –no-notify»,
    «prod»«browser-sync start -s dist/ -f . –no-notify»,
    «build»«ui5 build»
  },
[…]

El siguiente fichero que tienes que ajustar y quizás crear desde cero también es ui5.yaml. Igualmente te recomiendo que partas de un fichero de una aplicación que ya exista y funcione. Probablemente lo único que tienes que ajustar es el nombre la aplicación.

ui5.yaml
specVersion1.0
metadata:
  nameappname
typeapplication
ui5Themesap_fiori_3
server:
  customMiddleware:
    – namefiori-tools-proxy
      afterMiddlewarecompression
      configuration:
        ignoreCertError: true # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be accepted
        backend:
          – path/sap
            urlhttps://yoursystem:44300/
        ui5:
          path:
            – /resources
            – /test-resources
          urlhttps://ui5.sap.com
          version:  # The UI5 version, for instance, 1.78.1. Empty means latest version
    – namefiori-tools-appreload
      afterMiddlewarecompression
      configuration:
        port35729
        path

Es posible que tengas tu aplicación encapsulada en la carpeta webapp o no. Depende de como tuvieras configurado tu WebIDE cuando creaste el proyecto. Si no la tienes creada tendrás que hacerlo y meter dentro todos tus ficheros de proyecto. El mismo consejo de antes, necesitas un proyecto sencillito funcionando para fijarte. Ahí verás que por ejemplo el componente, el manifest, las vistas y el controlador tienen que ir dentro de la carpeta webapp y otros ficheros no esenciales para la aplicación como son el .gitignore o el readme.md van fuera.

Antes de probar, puedes eliminar algunos ficheros que ya no se utilizan como .user.project.json, extensionDocu.properties, neo-app.json, package-lock.json, readme.txt o todo la carpeta .che. 

Ahora ya puedes probar tu aplicación y te debería funcionar. Para probarla te aconsejo directamente botón derecho del ratón en el nombre del repositorio y Preview Application. Y aquí elijes el arranque start normal.

Si con esto no te funciona, te aconsejo que reinicies VS Code, vuelvas a instalar el módulo de node con npm install y vuelvas a probar.

Un error muy común es el que se obtiene al trabajar con sistemas que tienen el certificado de seguridad autofirmado. Que son la mayoría de los sistemas SAP, al menos en desarrollo. Para solucionarlo solo tienes que especificar en el fichero ui5.yaml que ignore ese error del certificado.

Otras opciones más complejas es coger el certificado del servidor de SAP e instalártelo localmente en el directorio donde lo lee VS Studio o decir a tu sistema operativo que ignore ese tipo de errores. Estas opciones son complejas y no las recomiendo en principio. Al menos no tocar sin saber lo que estás haciendo.

Si con esto no te funciona… vas a tener que pegarte con ello. Los motivos pueden ser muchos dependiendo de como esté construida tu aplicación. Te dejo unos consejos:

Échale un ojo al artículo Migrating SAP Fiori Applications from SAP Web IDE to SAP Business Application Studio o también a este Neo to Cloud Foundry Migration. Si, ya se que ambos son para la migración hacia BAS y no hacía VS Code. Es lo que tiene pasarse al lado oscuro… Hay que investigar y pegarse más para ganar independencia y control.

Léete bien los mensajes que obtienes en tu terminal y el log que se genera. A veces es solo cuestión de leer lo que falla.

Prueba local

Como decíamos, para ejecutar localmente tu proyecto la mejor opción es hacer clic con el botón derecho del  ratón sobre el repositorio y Preview Application. Si todo va bien se abrirá una nueva pestaña en tu navegador y visualizarás tu aplicación.

Integración con sistema on premise

Para tener una integración entre VS Code y el Abap Server de SAP (ya sea un ECC o un S/4 HANA o cualquier otro producto basado en Netweaver) hay que tener la extensión ABAP remote filesystem

Esta extensión tiene solo 5.000 instalaciones, lo cual indica que muy pocos desarrolladores lo usan en el mundo. 

Para que la integración funcione, hay que editar el fichero de instalación como indica la página de la extensión. A este fichero puedes llegar desde el menú de configuración de la extensión o directamente yendo al fichero, que lo tendrás en una ruta parecida a esta: C:\Users\Admin\AppData\Roaming\Code\User\settings.json. El fichero tiene que ser más o menos esto:

settings.json
[…]
«NPL»: {
      «url»«http://vhcalnplci:8000»,
      «username»«rrollano»,
      «password»«secret»,
      «client»«001»// client is required for SAPGUI integration. Might need more
      «sapGui»: {
        «server»«127.0.0.1»,
        «systemNumber»«00»
      },
      «language»«EN»,
      «allowSelfSigned»true
    }
[…]

Una vez lo tienes editado el fichero de configuración puedes hacer la conexión. Para ello accede al panel de comando con Control  + Shift + P e introduce el comando AbapFs Connect to an ABAP system.

El establecer la conexión por primera vez puede ir a la primera… pero también puede darte bastante problemas. Solo la primera vez, luego ya va genial. Puede ser necesario reiniciar la aplicación, borrar la caché del navegador (esto va por HTTP, no por RFC como Eclipse). Y si eso falla reiniciar el ordenador local. Si va bien al lanzar la conexión no da ningún mensaje de error. Simplemente aparece el sistema replicado en el WorkSpace de VS Code, arriba a la izquierda. Si hay algún error lo verás en el terminal.

Construcción previa al despliegue

La construcción la podemos hacer con npm run build en el terminal del repositorio. También se puede utilizar npx ui5 build -a.

Si la aplicación estaba inicialmente bien construida este paso no debería dar ningún problema adicional. Y si lo hace lo que hay que hacer es leer con atención los mensajes del terminal.

Despliegue en sistema on premise

Para hacer el despliegue necesitamos instalar el paquete nwabap-ui5uploader con la instrucción npm install nwabap-ui5uploader.

Una vez que está instalado tenemos que crear el fichero de configuración con la información para el despliegue. Este fichero tendrá que llamarse .nwabaprc y estar ubicado en la raíz del proyecto.

En la web del paquete te ponen la configuración básica que debe tener el fichero:

.nwabaprc
{
  «base»«./dist»,
  «conn_server»«http://myserver:8000»,
  «conn_user»«upload»,
  «conn_password»«upl04d»,
  «abap_package»«$TMP»,
  «abap_bsp»«ZZ_UI5_LOCAL»,
  «abap_bsp_text»«UI5 upload local objects»
}

Pero esto es muy básico, en un escenario real necesitarás pasar un paquete de desarrollo real y por tanto también una orden de transporte. Y de paso hay decir que no sea estricto con el SSL porque si no se va a conectar. Algo como esto:

.nwabaprc
{
  «base»«./dist»,
  «conn_usestrictssl»false,
  «conn_server»«https://yoursystem:44300/»,
  «conn_client»«100»,
  «conn_user»«rrollano»,
  «conn_password»«secret»,
  «abap_package»«ZDEV»,
  «abap_transport»«XXXXXXXXXX»,
  «abap_bsp»«ZAPPSAPUI5»,
  «abap_bsp_text»«UI5 upload local objects»
}

Con esto ya puedes desplegar al sistema con la instrucción npx nwabap upload.

Esto te puede funcione directamente pero si estás trabajando contra un servidor autofirmado necesitas sincronizar el certificado localmente. Es decir, coger el certificado del servidor e instalarlo donde lo vea tu VS Code. Esta parte es complicada y aún no está nada pulida. La alternativa fácil, aunque no muy ortodoxa, es decirte a tu sistema operativo que admita este tipo de conexiones. Esto lo podemos hacer fijando la variable global de sistema NODE_TLS_REJECT_UNAUTHORIZED  con el valor 0.

Y en efecto se despliega… pero no es suficiente… Tu aplicación  SAPUI5 se despliega correctamente. Puedes verla en  el repositorio BSP en tu SAP on premise. Pero falta una  cosa, no se actualiza el código en el Fiori Launchpad!

Aquí la verdad es que yo sufrí bastante. En principio pensé «bueno no pasa nada, ejecuto el report /UI5/APP_INDEX_CALCULATE para actualizar el índice de las apps y listo».

Pues no. Tampoco funciona.

«Bueno, ya no me importa nada. Tiro de artillería pesada. Limpió cache de navegador, cierro sesión, invalido cache global en el sistema…».

Todo… y nada… que no funciona…

Y justo antes de arrancarme la piel a tiras me dio por mirar el código del paquete nwabap-ui5uploader, que al ser código abierto lo puedes encontrar en GitHub.

Y aquí encuentro por casualidad el parámetro oculto calcappindex!

Así que te aconsejo que incluyas este nuevo parámetro en tu fichero de configuración:

.nwabaprc
{
  «base»«./dist»,
  «conn_usestrictssl»false,
  «conn_server»«https://yoursystem:44300/»,
  «conn_client»«100»,
  «conn_user»«rrollano»,
  «conn_password»«secret»,
  «abap_package»«ZDEV»,
  «abap_transport»«XXXXXXXXXX»,
  «abap_bsp»«ZAPPSAPUI5»,
  «abap_bsp_text»«UI5 upload local objects»,
  «calcappindex»: true
}

Y ahora si. De nuevo con la instrucción npx nwabap uploa, nuestra applicación no solo se despliega sino que automáticamente se actualiza el índice en el Fiori Launchpad y podemos probarla allí directamente.

Diferencia entre Business Application Studio y Visual Studio Code

Finalmente, te cuento una cosa más relacionada. El paquete de moda ahora es @sap/abap-deploy, que es mucho más actual que el nwabap-ui5uploader que estamos utilizando.

El caso es que el nuevo, aunque es compatible con VS Code, está pensado para Business Application Studio, el nuevo IDE de Cloud Foundry.

Si consigues hacerlo funcionar en tu máquina local te agradecería si me lo cuentas. Yo no lo he conseguido. SAP no da soporte y parece que no hay prisa en ello.

El principal problema que te encontrarás es el de la seguridad y la transmisión de certificados. Tienes que coger el certificado del SAP de destino y tenerlo instalado localmente en tu PC. Y tiene que ser un certificado de tipo .crt, etc, etc.

Ya lo retomaré pero por ahora se puede vivir sin él.

Conclusiones

¿Qué te ha parecido el proceso de migración? En mi opinión es demasiado complejo y me sorprende la poca cantidad de información que hay al respecto. Bueno, en BAS hay poca, en VS Code diría que ninguna.

Posiblemente las cosas vayan mejorando con el paso de las semanas, pero por ahora es lo que tenemos.

Mi motivación para hacer esta entrada tan larga y pesada es primero aprender bien el proceso, compartirlo con mis compañeros y también tener unos buenos apuntes para el futuro. Y si además he conseguido ayudar a alguien con ello pues me alegro.

Con esto termina esta serie Éxodo de 4 capítulo. O eso espero.

Éxodo – IV: De SAP WebIDE a Visual Studio Code

Este post forma parte de la serie Éxodo creada tras el anunciado cierre del servicio trial de SAP Cloud Platform, en el entorno NEO: Éxodo – I: El fin de SCP NEO y de SAP WebIDE Full-Stack Éxodo – II: ¿Hay alternativa al Business Application Studio de Cloud Foundry? Éxodo - III: Configurando el...

Éxodo – III: Configurando el entorno para VS Code

Este post forma parte de la serie Éxodo creada tras el anunciado cierre del servicio trial de SAP Cloud Platform, en el entorno NEO: Éxodo – I: El fin de SCP NEO y de SAP WebIDE Full-Stack Éxodo – II: ¿Hay alternativa al Business Application Studio de Cloud Foundry? Éxodo - III: Configurando el...

Éxodo – II: ¿Hay alternativa al Business Application Studio de Cloud Foundry?

Este post forma parte de la serie Éxodo creada tras el anunciado cierre del servicio trial de SAP Cloud Platform, en el entorno NEO: Éxodo – I: El fin de SCP NEO y de SAP WebIDE Full-Stack Éxodo – II: ¿Hay alternativa al Business Application Studio de Cloud Foundry? Éxodo - III: Configurando el...

Éxodo – I: El fin de SCP NEO y de SAP WebIDE Full-Stack

Probablemente ya sepas que el próximo 13 de Noviembre se cierra el servicio trial de SAP Cloud Platform en el entorno de NEO. Y con él todos sus servicios asociados. SAP continuará el mantenimiento para los clientes que lo tengan contratado. Que estarán super felices de quedarse en esa vía...

¿Que pasó en el Fiori Practitioners Forum? (el de Agosto)

¿Qué tal llevas la vuelta al trabajo? Ya, bueno, como todos... Te encontrarías con decenas o cientos de correos ahí esperándote, no? ¿Y qué haces con ellos? ¿Los marcas como leídos todos? Te pones a leerlos uno a uno aunque muchos de ellos sean irrelevantes? Puff... Yo soy un poco maniático con...

Tecnología SAP para Muggles: ¿Qué es Cloud Foundry?

Cloud Foundry hace referencia a una plataforma de servicio de tipo multinube basada en código abierto. ¿Te has quedado igual? Vamos a desengranar esa frase. ¿Que es una plataforma de servicio? Hoy en día conoces muchísimos: Gmail, Netflix, Spotify, etc. Se trata de un una plataforma computacional...

Magic Quadrant: ¿Cómo ha quedado SAP?

A lo mejor te suena Gartner y a lo mejor no. Si no lo conoces te cuento que es una compañía fundada a finales de los 70 con sede en Stamford y que se dedica, entre otras cosas, a ver que es lo que se cuece en el mundo de las tecnologías. Analiza todo tipo de empresas público y privadas, sectores,...

SAP Cloud Platform Practitioners Forum for July 2020

El pasado martes 21 de Julio se celebró la reunión del SAP Cloud Platform Practitioners Forum. Si no te suena, este es un grupo de expertos de SAP Cloud Platform que se reúne mensualmente para compartir casos de éxito, comentar novedades e inquietudes y sesiones temáticas dirigidas por expertos de...

SAP Fiori Tools Overview in Practitioner Forum July 2020

¿No te suena eso de SAP Fiori Practitioner Forum? Se trata de un grupo privado de expertos de SAP Fiori que se reúne el tercer jueves de cada mes para ver lo último de SAP Fiori de la mano de los primeros espadas en la materia. Suena un poco a los Carbonari pero si  estás interesado en participar...

¿Qué es Fiori Elements?

Vamos a hacer un primer acercamiento al concepto de Fiori Elements, una tecnología fundamental en el desarrollo actual de interfaces de usuario en SAP. Fiori se presento oficialmente allá por 2013 (para los que dicen que esto es nuevo) con un paquete inicial de 25 aplicaciones que pasaron a ser 81...

Si quieres navegar por esta web tienes que aceptar nuestra política de cookies y sus términos de uso

ACEPTAR
Aviso de cookies