Hola comunidad, feliz año nuevo 2022! Ya ha pasado un buen tiempo desde mi último blog y como estamos empezando el año nuevo con nuevas resoluciones, nuevo aprendizaje y nuevos retos, decidí volver al mundo de los blogs y compartir mis investigaciones. Escuche mucho acerca de este tema al fin del año pasado así que quiero ver de qué se trata. Se que este tema es un poco delicado para ciertos desarrolladores así que vamos a ver. Si deseas leerlo en ingles, visita aqui. Por favor comparte tus comentarios de lo que te gusta o te gustaría ver de esta herramienta. Tengo pensado hacer una serie de blogs al respecto.
La razón principal de mi investigación es para ver que tan fácil (o no) es este tipo de desarrollo con mínimo código para alguien sin conocimiento previo en esta herramienta. Hay tantas herramientas que son ofrecidas tanto a los desarrolladores como a los clientes. También quiero saber que tan cerca o tan lejos estamos de poder usar una herramienta semejante para proyectos de empresas mayores o si es solo para pequeños proyectos. Otra pregunta que escuche, quizá errónea, es si AppGyver remplazaría Fiori? Y la respuesta es NO, es simplemente una alternativa al desarrollo.
Que es AppGyver y que es poco código o no código?
AppGyver es una Plataforma de no-codigo* que permite a los desarrolladores construir aplicaciones para diferentes dispositivos (desktop, móviles, tv, browser). Se esucha muy bueno para que sea verdad, no crees? Inclui el asterisco en la frase no-codigo porque también demostrare un ejemplo en este blog donde requerí un poco de código, asi que no es 100% no código.
Aquí puedes ver como se ve la herramienta una vez que hayas entrado al sitio de AppGyver y empiezes a mover controles dentro del canvas. Yo empeze por mover un campo de tipo input, un control de tipo drop-down y lo conecte a un servicio OData. Finalmente, incluí un botón para ver lo que el usuario ha capturado. Escogí estos controles porque puedo demostrar texto simple, una lista de objectos y también un evento que es llamado desde la pagina. Por que escogí OData? Porque es la forma mas normal de exponer y capturar datos en el mundo SAP mediante servicios web, especialmente en aplicaciones Fiori. Pude haber escogido otras opciones y las explicare una vez entre al folder llamado Data.
Una ventaja inmediata es que el usuario no tiene que ir dentro de otra herramienta de SAP como lo es el BTP. Yo puede empezar leyendo acerca de la herramienta y casi inmediatamente, puede crear mi cuenta al registrarme en el sitio https://www.appgyver.com/ - si lo se que esta herramienta es de SAP, sin embargo, es más fácil de tener acceso inmediatamente en lugar de ir dentro del BTP, y tratar de encontrar un servicio, subscribirte y luego esperar que se haga disponible dentro de mi cuenta.
Ok, ahora que tengo acceso a la herramienta voy a ver que tengo que hacer para sentirme agusto y empezar a usarla. Lo primero que note fue la vista de default mostrando un WYSIWYG (what you see is what you get) es de un dispositivo móvil pero tu puedes cambiar el view dependiendo de tu situación. Otras opciones para la vista del dispositivo es iPhones, Android pones, tabletas y también el browser de tu computadora si desear cambiarlo.
Vivimos en un mundo móvil y debemos de diseñar y desarrollar con eso en mente. Estoy contento porque pude fácil y rápidamente hacer pruebas desde mi propio dispositivo, descargué la aplicación de AppGyver testing del app store y listo. Hay también una forma de testear tu aplicación desde un dispositivo móvil pero requiere bajar la aplicación del Google store.
Ahora que he descargado la versión SAP AppGyver de iOS en mi teléfono, voy a compartir unas imagines nativas al aparato, pero, antes de hacer eso, me gustraria conectarme directo a un servicio OData y ver como funciona la integración de live data en esta herramienta. En mi experiencia siempre que he desarrollado un POC, los clientes quieren ver datos con los que ellos son familiares y pueden identificar fácilmente, en lugar de mostrar random strings en la pantalla. Hagámoslo!
En este tutorial, empecé usando el famoso servicio gratis de Northwind que se encuenta en la liga siguiente:
https://services.odata.org/Experimental/OData/OData.svc
La herramienta tiene una forma de integrar directamente vía REST API así que investiguemos este feature.
En el menú de la izquierda, empieza con el BASE set up. Provee un ID para el resource ID así podrás identificar tus datos después dentro de la aplicación. Puedes poner una descripcion corta del servicio. Finalmente proporciona el URL para el servicio.Nota que puedes proporcionar http headers, o query string parameters.
Una vez que el base set up ha sido proporcionado, procede al GET collection (GET method). Proporciona un endpoint de los datos que quieras ver y desplegar en tu aplicación. Para no hacerla tan dificil, yo utilize el endpoint Products.
Cambia hacia el tab TEST y corre una prueba. Ok, recivi un error, analicémoslo. El mensaje dice que el resultado no es un array. Quiza los datos que buscas están dentro de un objeto en la respuesta. Muy bien, si vemos el error puedes ver la respuesta del servicio un poco mas abajo del error y puedes ver que la propiedad que buscamos se llama value. Veamos que es lo que tenemos que hacer al respecto.
Regresa hacia el set up de la operación GET y cambia la siguiente propiedad: Response key path
Después de arreglar esa configuración y guardar tus cambios, regresa al tab TEST y corre un test para ver si es lo que ocupábamos hacer para ver la respuesta de forma array de los Products entity. Voila!
Puedes también seleccionar el botón SET SCHEMA FROM RESPONSE asi podras acceder las propiedades después en tu aplicación. Cambia de tab al SCHEMA y veeras que el schema se ha configurado de igual manera. Muy bien! Ya hemos configurado los datos. Cierra la configuración de datos y regresa al canvas para continuar el desarrollo.
Antes de continuar hacia la siguiente ronda de explicaciones, quiero recalcar que hay otros tutorials en la parte baja de la pagina y que te ayudaran a empezar con tu desarrollo, ciertas dudas. Me agrada la forma en la que esta herramienta también ofrece ayuda a los desarrolladores, muy bien hecho Appgyver. Puedes también ver su documentación en el sitio web https://docs.appgyver.com/
Bueno, ya que nos movemos de la parte de los datos a la sección de la aplicación, pensemos como vamos a conectar los puntos entre los campos y el evento del botón. Analicemos cada uno de los 3 controles.
Empezemos con el campo de tipo input. Igual que en cualquier otro tipo de Desarrollo web, nota las propiedades como label, value, placeholder, disable, entre otras propiedades de HTML. Decidí crear una variable para sostener el valor y poder utilizarlo dentro del evento del botón. Las variables deben de ser creadas antes de ser asignadas y utilizadas por un control.
Como ya has de saber, las variables ayudan a capturar valores dentro de un context de la aplicación. Hay diferentes tipos de variables, app variables, page variables, data variables, etc. Las variables puedes ser accedidas desde la parte superior de la aplicación al darle click en el enlace que dice Variables y luego ver los tipos de variables desde el menú del lado izquierdo.
Yo cree la variable Data para guardar los datos que creamos arriba. Tambien cree una variable en la pagina para guardar el valor del campo vName y finalmente dos variables selectedProductID y selectedProductName como se muestran abajo.
Ahora veamos el control drop-down. Por mucho más espuerzo, este control me tomo más en configurar que cualquier otro, y por mucho más me refiero a no tener previo conocimiento de la herramienta y pasar varias horas investigando como se hace el set up.
Hize el set up del Label text, the Option list, Selected value and selected label con variables; repito, porque los usare en el evento del botón más adelante.
Una cosa importante que quiero mostrar aquí es como la lista de opciones, option list, se hace el set up para los datos del control de tipo dropdown.
No como las listas simples las cuales son mucho mas facil de configurar y las mostrare en el siguiente blog. Aqui quiero mostrar como se hace el set up. En la variable de tipo data, creamos una llamada products_list. Debemos usar la función MAP y pasar la lista de objetos, y luego un objeto con propiedades, label y value para que sean mostradas en cada línea del control dropdown. Puedes observar la formula en la siguiente imagen. Otras variables pueden ser accedidas usando la palabra data. Para acceder las propiedades de cada objeto, debes de usar la palabra item.
Al fin, hemos llegado al set up del botón. Hay diferentes tipos de botones y puedes escoger el botón que sea necesario a tus ejemplos. Yo seleccione solamente random. Nota que hay dos flechas en las que quiero explicar cierto contenido abajo.
La primera flecha se refiere al tab PROPERTIES y muestra el Label and la propiedad disabled. Decidí usar esta propiedad para deshabilitar el botón cuando no haya algún valor en el campo que usa mi variable vName. La razón principal es para añadir una validación y forzar al usuario que proporcione un valor en dicho campo.
Segundo, la fleche que se dirige hacia abajo muestra un evento y una alerta que se mostrara dinámicamente como también un mensaje dinámico. Esto se puede lograr por medio de variables.
Let’s launch the application to see how it works. Save your code and select the LAUNCH tab at the top of the screen. A screen like the one below will be shown.
If you scan the QR code with your device, the app will open in the iOS (iPhone in my case) or if you copy and paste the URL provided by the Text box next to the QR code, you can launch it directly in your browser.
En seguida hay fotos de como se ve la aplicación desde mi celular y como puedes apreciar, los controles son responsivos, las variables se usaron perfectamente y la alerta despliega lo que escribí y seleccione.
Para cerrar:
Pienso que la herramienta SAP Appgyver tiene muy buen potencial y requiere poco entrenamiento para la gente que la quiera usar. Hay un monto de envolvimiento de parte de la comunidad (fuera y dentro de SAP) y bastante documentación para cualquier persona que desea empezar en el tema. Conectar los controles y la lógica fue fácil de conseguir. La parte difícil para mi en la herramienta fue la manera en que tenemos que distinguir el tipo de variables para poder utilizarlas.
Lo que me gustaría ver luego es la navegación de paginas lo cual no investigue en mi primer blog. Me gustaría también ver el proceso de deployment y como dar mantenimiento a las aplicaciones que una vez ya están corriendo en producción o ver si versiones múltiples son soportadas y como por esta herramienta. Finalmente, me gustaría ver si themes multiples son también soportados por la aplicación.
Sobre todo, no se me hizo difícil aprender y creo que es fácil de seguir estos pasos. Espero escuchar o leer de las experiencias de otros y si hay algún ejemplo que les gustaría ver, con mucho gusto comenten abajo para ver si lo incluyo en mi siguiente blog. Muchas gracias de antemano por su tiempo.
- SAP Managed Tags:
1 Comment
