Mis aventuras en SAP AppGyver – desafío SAP (vol 2)
Seguimos con mis impresiones al crear una aplicación en AppGyver para el reto de SAP.
En este volumen vamos a ver la lógica de propuestas de películas y las peculiaridades que he tenido que superar para implementar (sin código) .
Si te perdiste la primera entrada, aquí la tienes:
https://ecastella.com/aventuras-con-appgyver—reto-sap-vol-1/
Sin mas, vamos a por la lógica.
Tabla resumen de contenido
Lógica de la página
Lo primero es que al crear una nueva página, por defecto se nos añade esta porción de lógica de manera automática.
Con estas dos cajas se oculta el indicador de ocupado de la página, por lo que si queremos hacer cargas iniciales de datos o otro tipo de operaciones, tendríamos que ampliar este punto.
Lo que me he podido fijar aquí es que la cosa va de eventos. Y de momento, se limita a eventos concretos en un horizonte temporal, es decir, al cargar la página, al salir de la página, al volver a la página, etc…
Aquí surgió el problema que casi hace que abandonase esta idea, ya que no hay un evento que sea durante la ejecución de la aplicación o de la página.
Como so podéis imaginar el problema era que no podría leer el acelerómetro cuando quisiera. Si pensaba en un reto mas fácil, como leer un código de barras o unas coordenadas GPS lo podia solucionar con un botón, pero en mi caso, quería algo con datos vivos, ya que sino, perdía toda la gracia el reto.
Hice varias aproximaciones, todas fallidas. Des de poner un boton que al pulsarlo intentase entrar en un proceso en loop (se bloqueaba la aplicación), hasta añadir un componente especial que es para Javascript para abrir un thread paralelo (se bloqueaba el navegador)
Obviamente lo primero fue ir a mirar a nuestro solucionador de problemas universal, Google, pero la respuesta fue tajante:
El mensaje fue muy desmotivador… un botón? entonces que gracia tiene mi aplicación… y lo mas importante… para una app de recomendación de películas aleatorias, que sensor del teléfono puede sustituir a mi idea.
Pues bien, después de varias noches acostándome tarde di con la solución:
Y aquí es donde un desarrollador, como es mi caso, ve el principal problema de AppGyver, cuando no te quieres limitar a pintar una lista de una API y necesitas hacer algún tratamiento.
El loop infinito
Pues bien, esta fue la solución que encontré a hacer loops después de buscar por la darkweb y con prueba y error.
Las lógicas de AppGyver se pueden resumir en construir workflows para cada página y componente de nuestra aplicación. En el primer volumen ya vimos que para crear una navegación podemos conectar 2 componentes lógicos para que interacturen.
En este caso, lo que me gusto, fue que de una manera muy visual puedes crear subprocesos, si os fijáis tengo el proceso del loop de lectura del acelerómetro, y luego un ramal para la propuesta de una nueva película.
Peor vámonos a centrar en el loop. Este se dispara al acceder a la aplicación y lo que hacemos es que iniciamos un proceso que su inició sera un delay de 5 ms. Es la excusa para poder crear este loop infinito, ya que sin este componente no era possible dejar el proceso activo durante la ejecución de la pagina.
Lo siguiente dentro del loop es añadir una condición, ya sea de fin de loop, o en mi caso de disparador de otro proceso. Para ello, utilice un componente llamado IF. Este componente simplifica lo que es un if en programación, es decir, tengo una condicion que genera un true o un false.
Por lo que os podéis imaginar que no podemos tener condiciones anidadas de manera fácil, sino que el componente solo acepta un booleano y tiene dos salidas, la que cumple y la que no.
Para ayudarme con esto, AppGyver tiene un tratamiento de datos llamado «Formula» que nos permite programar al mas estilo Microsoft Excel (un acierto si lo que quieres es que un usuario de a pie utilize este editor).
En las opciones del componente nos aparece un rayo que nos permite ver las formula.
El editor de formulas es bastante sencillo de utilizar, y como os digo es un clon de excel. Podemos acceder a las variables de la aplicación, de la página o lo mas interesante, a los datos de nodos que estén conectados al nodo que estamos editando. Esta es la opción «Output of another node».
Como podéis ver, para crear mi IF, he tenido que usar una formula de IF para poder añadir una condición y que me lo traduzca en booleano. Esta formula lo que hacer es que si el acelerómetro pasa de 5 y le he dado al botón de running devuelve un true:
Si seguimos con el bucle, veremos que en caso que no se cumpla vuelvo al delay de 5 ms, pero en caso que si que se cumpla, primero hago otro parón de 2 segundos, para que al usuario no le salten 3 películas y inicio el flujo de lectura.
El acelerómetro
Antes de seguir… como se obtiene los datos del teléfono. Aquí hay un tema que seguramente dará que hablar si la plataforma consigue éxito. Actualmente cunado arrancas la plataforma tienes unos componentes por defecto, pero los puedes ampliar «instalando» mas componentes de fabrica.
Estos componentes se instalan con un simple «install», sin que repercuta en la aplicación o en el espacio que va a ocupar nuestra app en AppGyver, por lo que me da que pensar en dos cosas. Que en un futuro se potencie mucho los componentes desarrollados por la comunidad, al mas puro estilo plugins de workdpress, y que en algún momento nos aparezca la palabra PAY para ciertos componentes
Lectura de la API
En AppGyver tenemos una sección dedicada a los data sources, lo mas destacado es que podemos obtener datos de una API o almacenadas en el dispositivo y AppGyver nos lo simplifica en un CRUD de registros independientemente del origen.
Esto se hace mediante data sources que configuramos de distintas maneras en función del tipo de origen de datos.
Para la recomendación de películas utilice una api concreta que te devuelve datos de una base de datos publica.
Una vez configurado el origen de datos, ya no tendremos apunto para usar con nuestra lógica.
Lo primero fue generar un número aleatorio, algo que en un lenguaje normal sera un Random antes de ejecutar la lectura, aquí fue un pequeño código Javascript que finalmente descubrir que al no poder usar librerías javascript (como en este caso la math) tube que crear una formula más:
Lo que veis en pantalla es el código JS mas tonto del mundo, pero lo mantuve a modo lecciones aprendidas para este blog. Al final use una formula para generar un numero aleatorio que seria el número de película a seleccionar de la API. Por lo que podría haver puesto en el filtro directamente la que obtiene los datos.
Con el número generado, ya podemos leer la API. Hay un componente que se llama get records que nos sirve para este fin.
En mi caso, necesitaba leer los datos de una lista, así que utilize el «Get record collection». Como con los otros componentes, AppGyver nos muestra unas opciones para semi programadores que nos permiten seleccionar los datos:
Como veis, le indicamos el origen de datos, y un filtro (aunque aparece «page», este es uno de los parámetros de filtro de la API). Y otra vez utilizo una formula:
Esta formula me permite obtener el valor del nodo anterior (el JS que me genero el número) y convertirlo a numero, ya que la formula me devolvió un string.
Y hasta aquí este segundo volumen donde hemos visto como crear loops, como obtener los datos de los sensores y como obtener datos de una API.
En el siguiente volumen veremos que hago con esos datos y como los muestro por pantalla
Como siempre suscribete, dale a la campanita de notificaciones y comparte en redes para estar a la última. Vota Like / Dislike para aportar feedback.
