Mis aventuras en SAP AppGyver – desafío SAP (vol 1)
Hace un tiempo jugué un poco con AppGyver, y aunque no me gustan demasiado este tipo de plataformas decidir probar para ver que tal era y para tener mejor criterio para opinar de ella.
Un a vez hecha la típica aplicación de algún tutorial deje el tema, ya que por coste de licencias, era difícil que lo utilizase en un ámbito mas empresarial.
Pero a raíz de un un nuevo reto de la comunidad SAP para potenciar y dar a conocer este producto, le di una segunda oportunidad.
https://blogs.sap.com/2022/05/04/no-code-challenge-0-code-100-app-and-hoodies/
Y antes de empezar la serie os hago un poco de spoiler, esta es la entrada resumida que he publicado para este reto, aunque aquí entraré en mas detalle, también :
Tambien os quiero comentar que esta serie no sera como las entradas normales. Aunque voy a entrar en detalles de construcción, no voy a explicar como montar una aplicación de 0 con AppGyver, para eso ya hay bastantes videos y tutoriales. En esta entrada os voy a contar los problemas que he encontrado y como los he ido salvando/solucionando.
Si mas pasaré a detallar la construcción de cada una de las páginas, lo problemas que he encontrado y las bondades de AppGyver.
Página inicial
La página inicial ha sido la más fácil de construir ya que solo se ha añadido un titulo, una imagen y dos botones. Comparado con SAPUI5 ha sido muy rápida de desarrollar ya que no he tenido que preocuparme por los estilos ni configurar el fichero de routing.
La navegación la conseguimos arrastrando una caja de navegación y conectándola con el evento de click (que tiene prácticamente todos los componentes). Una vez conectados, en las opciones del componente, que es un menu que nos aparece a la derecha. Añadimos la página destino.
Todos los componentes los he creado añadiendo uno debajo del otro, así que sin darle mucho a las neuronas, ha quedado algo mas o menos bonito de una manera fácil. Los componentes los puedes ajustar mediante el menu, fijando su tamaño o indicando su alineación.
Y hasta aquí el menu inicial. Fue la parte mas fácil.
Página de selección de películas
Vamos a la parte que me costo más. Entre el poco conocimiento de la herramienta y que técnicamente lo que quería implementar según algunos foros no se podia hacer casi termino con mi reto antes de empezar.
La idea de esta página es que un botón activa la lectura de datos del acelerómetro y si el eje X del acelerómetro pasa de una cierta aceleración , realizamos una llamada a la API para que nos devuelva nuevas películas.
El primer paso fue configurar el origen de datos para luego poder montar la pantalla.
Origen de datos
Una cosa buena que tiene AppGyver, si eres un usuario sin conocimientos de programación es que puedes conectarte a una API OData de manera facil.
Como veis en el pantallazo, le damos un nombre a los datos y una URL y ya tenemos nuestra API apunto. En este caso, utilizo una API KEY, que por ser la primera añadí como parte de la URL por error… pero funciona.
Una vez tenemos la API configurada, podemos lanzar un test. Este test es interesante ya que nos permitirá crear generar un esquema o modelo de datos sin necesidad de crearlo nosotros. Pulsando el botón «Set schema from responste»
Y este es el resultado de nuestro esquema:
Si.. faltan campos… una vez has importado el esquema te puedes quedar solo con los que te interesa borrando el resto.
La vista
Para esta vista añadí una novedad, el reto requería algún componente reaprovechable, así que decidí hacer un footer para toda la app, pero no existía ningún componente o opción que fuera el footer. Así que añadir contenedores para formatear cada parte de la pantalla:
Partí la pantalla en 3 secciones: Header, Content y Footer:
Con esto pude fijar la posición del footer en la parte inferior de la app al mas puro estilo CSS
Una cosa que me gusto, es que AppGyver trabaja con el mismo esquema de CSS pero user friendly, como podéis imaginar, no es tan potente como modificar un CSS pero me pareció muy intuitivo para alguien con nociones básicas o avanzadas de CSS.
Las otras partes de la pantalla, utilicé la estrategia de la pantalla anterior, apilar componentes de arriba a bajo con mas o menos gracias hasta conseguir el resultado deseado.
Antes de terminar este volumen, vamos con el footer. Un componente que es reutilizable. En AppGyver, puedes convertir cualquier contenedor a componente reusable.
Al pulsar el botón tendrás la composición disponible en componentes creados «By me». Estos componentes se pueden arrastrar a la pantalla como el resto de componentes.
Como veis en el pantallazo, cree dos componentes, aunque solo utilicé el de footer. ya que me di cuenta que los componentes pueden estar bindeados a variables. Esto me llevo a la conclusión que si se crea un componente personalizado, hay que usar o variables de aplicación o copiar las variables de las páginas para que funcione el componente.
Hablando de variables hay 3 tipos de variables:
- App Variables: Son presentes para todas las páginas de manera «universal»
- Page Variables: Son presentes para la página actual
- Data variables: Se bindean a orígenes de de datos. Probablemente tendría que haver utilizado este tipo de variables para almacenar los datos de la API. En el siguiente volumen veréis la vuelta que le tuve que dar.
Y hasta aquí el primer volumen. En este punto todavía tenia la situación bajo control. En el próximo volumen veremos la lógica que hay detrás del selector de películas y la recuperación de datos.
Como siempre suscribete, dale a la campanita de notificaciones y comparte en redes para estar a la última. Vota Like / Dislike para aportar feedback.
Venga, que al final se lo puedes vender a Netflix… 😉