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 😉

6 Comments

Add a Comment

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

Pin It on Pinterest