El SDK de SAPUI5 es la web de referencia para todo desarrollador Fiori. Aquí encontramos documentación, una guía detallada de todos los controles SAPUI5, ejemplos de implementación de los objetos y también varias herramientas como por ejemplo aplicaciones demo. Estas aplicaciones SAPUI5 permiten ver las características de su tecnología y pueden servir de base para nuestro trabajo. Es un detalle por parte de SAP, pero en algunas ocasiones no funcionan. No es algo común, pero a veces puede haber problemas que no permiten a nuestro proyecto cargar correctamente en nuestro entorno de desarrollo.
En este tutorial vamos a ver como importar en nuestro WebIDE de SCP la aplicación demo del carrito de la compra, que errores surgen y cómo solucionarlos:
PASO 1: DESCARGAR LA APLICACIÓN DEMO SAPUI5
Entra en la página del SDK de SAPUI5 y selecciona ‘Demo Apps’ en la barra de navegación.
Hay alrededor de 20 aplicaciones disponibles. Puedes verlas haciendo clic en sus nombres o incluso descargarlas para obtener el código y poder modificarlas.
Hemos escogido descargar la aplicación ‘Shopping Cart’ porque es especialmente didáctica. Para descargarla haz clic en el botón de descarga.
Esto nos mostrará una lista con las aplicaciones disponibles para descargar. Haz clic en el botón de descarga correspondiente a la aplicación ‘Shopping Cart’. Tras este paso deberías tener un archivo ‘ShoppingCart.zip’.
PASO 2: IMPORTAR LA APLICACIÓN A TU SAP WEB IDE
Hay muchos entornos de desarrollo con los que puedes trabajar con SAPUI5 (SAP WebIDE, Eclipse, Adobe Visual Studio, Atom,…) pero nosotros vamos a trabajar con SAP WebIDE. Para acceder a él, debes tener una cuenta en SAP Cloud Platform ya que SAP WebIDE es uno de los servicios que ofrece la plataforma SCP.
Si no estás familiarizado con este entorno, échale un vistazo a este tutorial:
https://developers.sap.com/mission.scp-1-start-developing.html
En la página principal de SAP Cloud Platform haz clic en el botón ‘Launch SAP Web IDE’ para acceder al servicio.
Entra en la sección ‘Development’.
Ahora importamos la aplicación que acabamos de descargar haciendo clic derecho en el nombre de nuestro workspace, seleccionamos ‘import’ y ‘File or Project’.
En la nueva ventana haz clic en ‘Browse’ y selecciona el archivo .zip de la aplicación. El segundo campo del formulario se rellenará automáticamente, es el nombre del proyecto que se creará en nuestro workspace.
Como puedes ver, da un error, esto es porque el nombre de nuestro fichero no puede contener ningún espacio, borra el espacio y el error desaparecerá. Haz clic en ‘ok’ para generar el proyecto de la aplicación.
La aplicación SAPUI5 debería tener esta pinta:
PASO 3: EJECUTAR LA APLICACIÓN
Vamos a probar la aplicación con las herramientas de desarrollador de Google Chrome, así que necesitamos ejecutarla con este navegador. Esta aplicación, como la mayoría de aplicaciones que verás, fue pensada para ejecutarse con el archivo ‘index.html’. Aquí tienes 3 posibles formas de ejecutarla con este archivo:
- Si es la primera vez que ejecutas la aplicación, puedes seleccionar su nombre y hacer clic en el botón verde de inicio. Después selecciona el archivo ‘index.html’ y haz clic en ‘ok’.
- Selecciona el archivo ‘index.html’ y haz clic en el botón de inicio.
- Selecciona la carpeta ‘webapp’, clic derecho, ‘run’. En este punto puedes bien seleccionar la opción ‘Run Index.html’ ó ‘Run as Web Application’. Esto se debe a que si miras en la opción ‘Run Configurations’, verás en la configuración de ‘Web Application’ que carga el archivo ‘index.html’ por defecto.
En definitiva, todas las formas que hemos visto de ejecutar la aplicación son válidas, escoge una y adelante.
PASO 4: COMPROBAR LA APLICACIÓN
Una vez que tenemos cargada la aplicación en Google Chrome, abrimos las herramientas de desarrollador del navegador haciendo clic en ‘F12’ o clic derecho, ‘Inspect Element (Q)’.
Como puedes ver, la aplicación no funciona, solo carga una pestaña en blanco, pero si comprobamos la opción ‘Network’ de la barra de navegación nos dice que tenemos un problema en el archivo ‘index.html’.
Vuelve al WebIDE y abre el archivo ‘index.html’. Ahí podemos ver dos rutas relativas que están bien para SAP, pero nosotros necesitamos cambiarlas para que sean absolutas y que nuestra aplicación pueda encontrar los datos.
Sustituimos la parte relativa de la ruta por la URL de la página de inicio donde hemos descargado la aplicación. Quedaría así:
De esta forma le estamos diciendo al Web IDE que coja las librerías necesarias de la propia página de SAP donde ellos han publicado la aplicación, el SDK de SAPUI5.
Volvemos a ejecutar la aplicación y comprobamos que dice el Network. No olvides guardar los cambios primero!
La aplicación continúa en blanco, pero el problema con el fichero index está resuelto. Ahora nos dice que no puede encontrar un archivo al que hacemos referencia en la aplicación llamado ‘initMockServer.js’.
En este punto es importante entender donde estamos y qué error tenemos. Las aplicaciones que suministrara SAP en el SDK de SAPUI5, ya sean pequeños ejemplos o aplicaciones más complejas como este carrito de la compra, nunca están conectadas a fuente de datos externa. En la inmensa mayoría de escenarios, una aplicación SAPUI5 actua como frontend de una sistema backend (que puede ser SAP o no) y esta comunicación se llevará a cabo mediante el protocolo Odata con el que se realizarán las diferentes operaciones CRUD sobre la fuente de datos. Mediante la construcción de un Mock Server lo que se hace es simular ese sistema Backend de forma que las consultas Odata se realizan exactamente igual, pero son redireccionadas para tomar los datos localmente, normalmente de un fichero Json. Puedes encontrar más información en el propio SKD.
https://sapui5.hana.ondemand.com/#/topic/69d3cbd4150c4ffb884e788f7f60fd93
El caso que nos ocupa es que tenemos un error en nuestra aplicación porque el fichero que inicia el Mock Server no exist een nuestro proyecto.
Para solucionarlo, vuelve al WebIDE para buscar dónde nos referimos a ese archivo.
Haz clic en la lupa de la barra de herramientas situada a la derecha y escribe el nombre del archivo en el área de búsqueda. Los resultados de la búsqueda nos indican que hacemos referencia a este archivo en el index.
Si haces clic en el resultado de la búsqueda, te llevará a la sentencia del index donde efectivamente llamamos a este archivo. Echa un vistazo entre los archivos de la aplicación y verás que ‘initMockServer.js’ no se encuentra entre ellos.
Vamos a volver a la página web del SDK de SAPUI5 para abrir la aplicación ahí, comprobarla con las herramientas del desarrollador y contrastarla con la nuestra.
https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/cart/webapp/index.html
Introducimos el nombre del archivo en el área de búsqueda de nuevo, y vemos que aquí es capaz de encontrarlo.
Si hacemos clic en el nombre del archivo podemos ver el código que debería contener. Y por la URL que nos ha dado el Network, también sabemos que este archivo debería estar localizado en la carpeta ‘webapp’ de nuestro proyecto.
Así que procedemos a crear el archivo con el contenido dado. No olvides darle formato al archivo con la extensión ‘.js’.
Después de esto, nuestra aplicación funciona!
