Mis aventuras en SAP AppGyver – desafío SAP (vol 3)
Seguimos con mis impresiones al crear una aplicación en AppGyver para el reto de SAP.
En este volumen vamos a ver que hacemos con los datos de la API, como los mostramos por pantalla y como lo guaramos en el dispositivo.
Si te perdiste la entrada anterior, aquí la tienes:
https://ecastella.com/mis-aventuras-en-sap-appgyver—desafio-sap-vol-2/
Sin mas, vamos a por la visualización.
Mostrando datos
Mapeando los datos a una variable
Este punto me gustaría pensar que hay alguna manera mas automática de tener los datos en una variable, pero por lo poco que he investigado preferí tirar por la solución manual aunque vi que había algo para hacer mapping.
El truco es que después de leer los datos, añadimos un componente especial para añadir datos a una variable. Esta variable la crearemos en la sección «variables».
Para declarar variables complejas tenemos un editor que nos permite crear una variable tipo «Objecto» y indicar la estructura que queremos. Como en Javascript, también podemos crear variables genericas.
La principal diferencia es que si fijamos la estructura, una vez hacemos el binding entre la vista y el controlador, AppGyver nos propondrá las variables a utilizar.
Una vez tenemos la variable con una estructura definida, el binding es bastante fácil, en mi caso he tenido que utilizar otra fórmula ya que a interface me devuelve una lista de 20 películas por página.
El componente para añadir los datos a una variable tiene básicamente dos parámetros, la variable y su assignacióm de valores:
En assigned value, es donde hacemos el «mapping» manual:
La API me devolvía una parte de la URL de la imagen de la portada de la película, así que aprovechando las formula, he tenido que hacer un concatenate:
Como veis, la entrada de datos la seleccionamos de otro nodo, allí como si fuera JS, accedemos al índice que nos interesa y de allí a la variable.
En editor de formulas, si en la definición de la variable hemos añadido un valor de ejemplo, nos muestra el resultado de la fórmula y sugerencias o errores.
Una vez tenemos la variable con datos, ya podemos pintar la pantalla.
Visualizando datos
Como ya os he comentado, fui apilando componentes para mostrar los datos de manera un poco curiosa, me voy a centrar en los 3 componente dinámicos: La foto, el título y la descripción.
Como en el paso anterior ya he preparado los datos me ha sido muy fácil mostrarlos.
Cada componente visual lleva propiedades, algunas especificas del componente, pero el común en todos es el «Source» o origen del dato a mostrar, que puede ser un texto, una variable o una formula:
El editor para asignar la variable nos permite jugar con seguridad, puesto que, por ejemplo, no nos permite asignar variables de distinto formato.
Esta operación de asignación la vamos a repetir para cada uno de los elementos visuales de la pantalla. De manera sencilla y sin necesitar un teclado.
Guardando datos
Otra parte del desafío era guardar los datos en el dispositivo, así que pensé que lo más sensato era añadir una opción para el usuario que le permita guardar las películas propuestas.
Lo primero para guardar datos en AppGyver es crear un nuevo origen de datos:
Aquí es donde vi un punto bueno y uno malo. El punto bueno es que los datos se guardan de manera no relacional, es decir, podemos guardar datos complejos. El punto malo es que como la base de datos del dispositivo no es relacional no podemos crear una clave personalizada.
Esto no es malo, el problema que he tenido es que la API que utilizo tiene como campo «ID» para el identificador de la película, esto hace que no se pueda guardar tal cual ya que al guardar en el dispositivo el ID se autogenera.
Aun así el guardado es fácil, con el componente «Create record»
Para poder guardar el registro he añadido un botón que al ser pulsado guarda los datos y enseña un mensaje.
Gracias al wizard el guardado es igual que la asignación de campos a una variable, es decir, seleccionamos el origen (o en este caso destino) de datos y añadimos el mapeo:
Si comparáis con el pantallazo del origen de datos anterior, donde teníamos el ID y el ID_API, en este punto solo podemos mapear el id_api ya que el otro como so comentaba se autogenera.
Con estos pasos he conseguido tener los datos guardaros en el dispositivo.
Ya solo nos queda la recuperación de los datos que he guardado y las conclusiones finales del reto.
Como ya os comente, esta serie no pretende que aprendáis AppGyver, sino plasmar como has sido la construcción de una aplicación donde se han fijado unos objetivos al igual que lo seria una aplicación empresarial para un sistema productivo.
Como siempre suscribete, dale a la campanita de notificaciones y comparte en redes para estar a la última. Vota Like / Dislike para aportar feedback.
