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 entorno para VS Code
• Éxodo – IV: De SAP WebIDE a Visual Studio Code

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.

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:

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:

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.

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.

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.

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:

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.

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.

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:

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:

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:

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.

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.

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