Aplicaciones UI5 en la Plataforma SAP usando WEB IDE

este blog es la version en espanol de

Developing UI5 Apps via the SCP WEB IDE

Recientemente me uni a un equipo de trabajo nuevo y comparti diferentes formas para crear prototipos de aplicaciones UI5 (esperemos que eventualmente se conviertan en aplicaciones reales) usando herramientas como BUILD, el WorkBench :/sap/web/ide/editor y ahora por este medio en la Plataforma SAP en la nuve  – basado en experiencia anteriomente de otros proyectos. En este blog, quiero mostrar algunos pasos para crear aplicaciones Fiori usando la herramienta conocida como el WEB IDE de la Plataforma de SAP (SCP). (Acceso a la plataforma es gratuito y solo necesitas un correo eletronico para obtener una cuenta)

La SCP ofrece varios servicios en la nuve. El servicio del cual voy a escribir hoy se llama WEB IDE. Algunos de estos servicios estan disponibles para usarse pero desactivados por default. El primer paso es asegurarse que este servicio, WEB IDE, este activado.

Una vez que estes dentro de la plataforma (SCP), mira en el panel de navegación de la izq y selecciona la opcion Services (Servicios) Despues, encuentra el servicio que mencioné y dale click.

Por lo regular este proceso de activación se lleva un par de minutos. Espera a que el status cambie a color verde. Una vez activado, dale click en el link Go To Service.

como mencioné anteriormente, hay varias formas de desarrollar una aplicación UI5, también conocida como Custom Fiori. En mi ejemplo, mostraré los pasos desde como empezar a desarrollar esta aplicacion.

Cuando primeramente entras al WEB IDE, tendras un folder llamado Workspace. Dale click on el lado derecho, depues selecciona New –> Project –> From Template (otra opciones incluyen: deploy, create un plug in para una aplicacion mobile, una extension o clonar un espacio de GIT)

sigue los pasos del wizard * una cosa que note aqui es que dentro de las opciones que me dieron estaba la version 1.48 (hoy 30/8/2017), solo que la version 1.48 no esta disponible en el ui5 (la mas reciente es 1.46) solo en la version open source del openui5. me pregunto que ira a pasar – si todavia tengo tu atención continue leyendo ????

algo bueno que pasa cuando usamos templates, es que anteriormente a empezar a desarrollar una aplicacion ya sabemos mas o menos como se va a ver casi al final de nuestro proyecto. Después de todo un template es lo que es (alguien mas ya hizo el codigo y solo lo adaptaremos a nuestro requerimiento) aqui les muestro una de las templates disponibles

una vez que selecciones el tipo de template, sigue los pasos. Dale un nombre y namespace(opcional)

tambien puedes dar el nombre de la vista inicial. Una vez finalizado el wizard, puedes ver como se generó el proyecto en tu espacio de desarrollo (workspace)

** sin embargo… fijate que la versión de la libreria ui5 no concuerda con la version original que seleccioné en un paso anteriormente ***

y la version que aparece en mi archivo manifest.json

cuando corras tu aplicación para ver como se muestra en tu browser (dale click al boton play verde) asegurate que los popups esten activados, de otra manera activalos al darle click al icono de la parte superior derecha y acepta el prompt

ahora que SCP ha hecho la parte mas dificil (el set up y configuracion de los archivos del proyecto) lo siguiente es que añadas contenido a tu app.

Anteriormente a añadir contenido (vistas, controladores, archivos js, entre otros) es importante comprender y saber donde, cuando, y como desarrollar en este framework:

1. MVC – Model- View-Controller (lo explique en otro blog) https://blogs.sap.com/2016/05/26/using-hcp-to-develop-a-custom-fiori-app/
2. JSON vs OData Data Models – es una parte critica y debe entenderse la diferencia entre modelos del lado del cliente y del servidor y cuando usar cada uno o usar una version hybrida. Normalmente, yo uso una version hybrida de caso a que uso un OData model (del servidor) para leer datos y usar en mi app si no hay que modificar del lado del cliente (tablas por ejemplo. SIn embargo, cuando se que del lado del cliente habrá interacciones entre el usuario y la applicacion, entonces uso un JSON Data model.
3. Que esta (y que no) disponible en cierto framework. en otros proyectos en los que he trabajado anteriormente tuve que usar librerias como momentjs (para hacer parse, validacion y syntax de fechas), d3js (libreria de graficas)
4. Donde ver controles que se pueden utilizar en mi app https://sapui5.hana.ondemand.com/demoapps.html – las posibilidades son infinitas

Beneficios y ventajas de usar el SAP WEB IDE:

1. set up del proyecto (usando templates, folders dentro del proyecto, y todos los archivos de configuracion como el Component, manifest.json, etc)
2. Facilidad de uso del WEB IDE (navegacion, codigo, syntax, pasos faciles de seguir, mensajes)
3. Facilidad de deployment al GIT
4. Facilidad de hacer testeo de unidades (Google chrome browser tambien)
5. Facilidad de cambiar entre proyectos (si tienes mas de 1)

He usado mi cuenta gratis de la plataforma por un buen tiempo y he aprendido muchisimo. Añado tambien que con esta cuenta he podido desarrollar suficientemente para escribir otros blogs. Uno de mis mentores siempre me dijo que para aprender a desarrollar tienes que desarrollar – el esta en lo cierto y pues SCP me ha dado la oportunidad de aprender y compartir cierto conocimiento. Se que tambien hay otras formas de aprender y suplementar el conocimiento como lo es el opensap, scn, youtube, eventos del code jam y libros (mi metodo menos preferido para aprender a programar) pero SCP me ha dado esta oportunidad y hay que aprovecharla.

por favor compartan su conocimiento y sus experiencias!