SAP WebIDE – Trucos y apuntes

Introducción

Después de dos años utilizando SAP WebIDE de manera satisfactoria, prácticamente he jubilado eclipse para centrarme en esta plataforma online de desarrollo proporcionada por SAP.

Logo WEBIDE

Paso sin mas a contar algunas lecciones aprendidas:

Organizar el trabajo con distintos Workspace

Una de las opciones mas útiles es el uso de múltiples entornos de trabajo bajo la misma cuenta de SAP. Estos entornos permiten agrupar el trabajo en como se desee.

Para gestionar y acceder a los distintos workspace seguiremos estos pasos:

  • Accedemos a la gestion de workspaces pulsando sobre «usuario@workspace» y en el menu accedemos a «Workspace Manager»:
Workspace
  • Una vez seleccionado, nos aparecerán todos los workspace disponibles y la posibilidad de crear nuevos. Los datos de workspace que nos apareceran son: Nombre, workspace seleccionado, opcion de abrir el nuevo workspace y los plugins seleccionados.
Gestion WORKSPACE
  • Para crear un nuevo workspace únicamente tenemos que seleccionar el botón «Create Workspace» y darle un nombre.

Problemas de acceso al servicio SAPWEBIde (¿Porqué me aparece esta pantalla de login?)

Uno de los problemas mas comunes cuando trabajamos en SAP Cloud Platform es la puesta en marcha de un proyecto, donde se inicia la construcción por parte de los desarrolladores mientras los arquitectos les vamos fastidiando el acceso configurando el SSO.

Inicialmente SAP Cloud viene con el sistema de usuarios propio de SAP (usuarios S o P) pero esto puede ser modificado para añadir el login corporativo o de alguna otra plataforma cloud como podria ser SSFF. Al acceder a WEBIde podemos ver una pantalla como esta.

Resultado de imagen de success factors login

Para solucionar los problemas que podamos tener relacionados con el acceso deberemos seguir un sencillo paso:

  • Lo primero sera tener un usuario creado en el nuevo entrono. En el ejemplo anterior, un usuario en SSFF.
  • Una vez creado el usuario, añadiremos los permisos para acceder a WEBIde. Nos vamos a «Services» > «SAP Web IDE Full-Stack «
  • Dentro de SAP Web IDE Full-Stack accedemos a «Configure Service»
Configuracion webIDE
  • Añadiremos los usuarios a los distintos roles preconfigurados para SAP WebIde. Seleccionaremos el ROL y mediante «Assing» añadiremos el usuario.
Gestion de roles WEBIDE

Compara distintos ficheros

Una de las novedades que presenta el servicio este 2019 es poder comprar ficheros dentro de un mismo workspace. Para ello seguiremos estos sencillos pasos.

  • Seleccionamos los dos ficheros a comprar. Esto lo haremos mediante la tecla «ctrl» + click con el ratón a los ficheros a comprar.
  • Una vez seleccionados pulsaremos click con el botón derecho y en el menu seleccionaremos comprar. (Ojo, tiene que ser 2 ficheros exactos, sino la opción no se muestra).
Ejemplo compare webide
  • Inmediatamente aparecerá el comparador que nos indicara las lineas eliminadas, añadidas o modificadas. Aun así, el apartado gráfico tiene que mejorar un poco por ahora.
Ejemplo compare webide

Plugins personalizados

Aunque el tema de los pluguis personalizados da para una entrada en el blog, a parte de los que ofrece SAP, podemos añadir muchos otros o crear los nuestros propios.

Uno de los que aconsejo utilizar a los desarrolladores SAPUI5 es el destinado a comprar las distintas definiciones de idioma (i18n) de un proyecto SAPUI5 para verificar que no nos dejamos ninguna traducción por realizar. Añado mas información en este punto.

Tools > I18n Helper ejemplo

https://blogs.sap.com/2018/04/29/sap-web-ide-plugin-ui5-internationalizationi18n-helper-open-source/

La manera mas segura de utilizar este plugin es tenerlo instalado en nuestro propia cuenta:

  • Nos bajamos el proyecto de GitHub en formato ZIP:
    https://github.com/fatihpense/webide-i18n-plugin
  • Lo importamos a nuestro webide y realizamos un deploy del proyecto importado.
  • Una vez realizado, creamos una destination como la siguiente. Nota: La url sera la misma que aparecerá al realizar el deploy
Destination para pluguin webide

Testear una aplicación SAPUI5 con el framework de testing

Una vez tenemos la aplicación apunto de finalizar podemos realizar pruebas para distintas resoluciones de pantalla o distintos idiomas de navegador de manera rápida.

Para ello, seguiremos estos sencillos pasos:

  • Pulsamos con el boton derecho sobre el proyecto a verificar. En el menu seleccionaremos «Run» > «Run Configurations»
Run configuration webide
  • Crearemos una nueva configuración run copiando la original, seleccionaremos «Run index.html» y pulsaremos el boton de copia:
Nueva configuracion webide
  • Una vez copiada, son aparecerá a la nueva configuracion «Copy of Run index.html». La renombraremos a «Test index.html» (aunque no es necesario este paso) y marcaremos las opciones «With frame» y «Run with support assistant» (si ademas queremos que SAP nos verifique las best practices).
Nueva configracion WEBIDE
  • Una vez modificados, puslaremos sobre Save and Run. Nos aparecerá la pantalla de ayuda.
Frame configuracion webide

Una de las opciones interesantes, al pulsar el botón de mas a la derecha aparece un código QR. Este código contiene la dirección para poder testear nuestra aplicación con dispositivos móviles.

  • Des del editor podremos seleccionar si disparar nuestra aplicación en modo normal o en modo test gracias al selector:
Ejemplo ejecución test

Cambiar color del editor

Este truco nos permite cambiar el estilo del editor. Para ello, seleccionamos el icono de preferencias y pulsamos «Code Editor».

Modificar propiedades del editor

Verificar las Best practices mientras se construye

SAP WEBIde incorpora un analizador de código para asegurar que los desarrollos tiene la calidad marcada por SAP. Por defecto ya esta activado, pero en algunas ocasiones esto puede provocar que el navegador se cargue demasiado.

Una opción es que la verificación se haga al guardar. Para ello seguiremos estos pasos:

  • Accedemos a «Preferencias»
  • Seleccionamos «Code Check»
  • Modificamos la opción «Check On» e informamos «Change»
  • Guardamos los datos
Modificar code Checks

Para poder visualizar los errores, avisos e informaciones referentes a best practices pulsamos el log de avisos para ver las indicaciones del proyecto.

Resultado coche cheks

En el log aparece la descripción del aviso, la ubicación en el fichero, y el tipo de incidencia. Al pulsar sobre Description se nos abrirá una nueva pestaña con el detalle y ejemplos de como solucionarlo.

Autoguardado y auto prettyprinter

Un corte de la red o un F5 en el momento de inspiración puede frustra nuestro trabajo. Para evitarlo, podemos activar un autoguardado cada 30 segundos.

De la misma manera, para evitar tener que estar formateando el código, podemos seleccionar la opción de aplicar pretty printer al guardar.

Ambas opciones estan disponibles en las preferencias de SAP WEBIde


Hasta aquí algunos de los consejos que he ido recopilando. A la velocidad en la que SAP esta incluyendo nuevas funcionalidades en SAP WEB IDE estoy seguro que dará para otra entrada.

Si queréis estar al corriente de todo, os aconsejo seguir las redes sociales de SAP WebIde:

Por último y no menos importante Suscribete, me ayudaras a hacer crecer este blog 😉

9 respuestas a «SAP WebIDE – Trucos y apuntes»

  1. Buenas Enric,
    Me encuentro con un problema.
    Tengo que modificar un código y la gente que lo desarrolló no dejó el código fuente. Si importo la versión de productivo para usarla de fuente, al momento de hacer el cambio lo veo bien cuando hago el RUN del index o el RUN de Unit test pero cuando quiero deployar, si bien no da error, la nueva version no tiene el cambio.
    Yo sé que el problema es porque la versión deployada no tiene exactamente la misma estructura que la versión source y además ya tiene los archivos component-preload.js y algunas otras cosas.
    La pregunta es:
    Cómo hacer para usar la versión deployada como source en SAP Web ide full stack y no tener problemas al momento de deployar el nuevo cambio ????
    Desde ya muchas gracias !!!
    Oscar

    1. Hola Oscar,

      Lo primero es verificar que el proyecto tiene la estructura adecuada dentro de WEBIde, esto significa que los ficheros deberían estar en la carpeta webapp. Si no lo tienes así podrás ejecutar des de WEVIde pero no des de un deploy.

      Si no es esto, la segunda cosa es mirar como realizas el deploy, tienes distintas subcuentas para cada entorno? En caso afirmativo, si realizas el deploy mediante ZIP hay que activar la versión manualmente. (la recomendación es usar un MTA).

      Saludos!

  2. Hola, ¿como se agrega la conexión desde el Web IDE al ERP? , donde residen los programas desarrollados, ¿en el web ide asociado a mi cuenta? o ¿en el erp on premise al cual me conecto?.Alli va eso entre tantas dudas que tengo. Saludos

    1. Hola Jose!

      Gracias por visitar este blog. Sobre tu pregunta, intento hacer un resumen rápido:

      Las conexiones entre un ERP y WEB ide se realizan con un túnel virtual llamado cloud connector. Una vez tienes conectados los dos entornos es necesario crear una destination en SCP para poder obtener los datos.

      Una vez finalizas el desarrollo tu decides donde quieres alojar tu aplicación, puede ser en un SCP o en un GATEWAY (ERP). Al hacer deploy decides donde dirigir la aplicación.

      Te recomiendo este par de lecturas para poder entrar mas en detalle, ya que la respuesta a esta pregunta abarca mucho:
      https://help.sap.com/viewer/cca91383641e40ffbe03bdc78f00f681/Cloud/en-US/e6c7616abb5710148cfcf3e75d96d596.html

      http://www.kodyaz.com/sap-abap/deploy-sap-web-ide-application-to-abap-repository.aspx

    1. Hola!

      Gracias por leer mi blog! No conozco quias de SAPUI5 en español, pero te aconsejo que busques las guías oficiales de SAP (openSAP por ejemplo tiene subtítulos en varios idiomas, entre ellos español).
      No te aconsejo los cursos de sitios externos a SAP ya que tiene un coste y su material se basa en los oficiales.

      Saludos

  3. Buenas! Hablas en algunos de tus post de SAP Business One? Me parece muy interesante la forma en la que explicas SAP, siendo muy intuitiva y útil para comprender mejor el funcionamiento de los programas. Saludos!

  4. Buenas tardes Enric.

    Una consulta cuando usted menciona el tema de los Plugins personalizado s (i18n), corresponde actualmente en la plataforma SAP BUSINNES APPLICATION STUDIO, cuando uno abre el editor Layout, cuando el abre esta funcionalidad muestra una página con el título i18n.

    Agradezco su información.

    Cordial saludo

  5. Hola una consulta, en un desarrollo con sap web ide personal, cuando escribo muchas lineas en la vista worklist ya no permite ejecutar el aplicativo en chrome, lo unico que he hecho es juntar las lineas para que la capacidad de escribir aumente y he separado el codigo en otro js, por favor si tienes una idea para aumentar la capacidad sería genial.

    Muchas gracias

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.