Hello Low coders and SAP community.
Antes de este blog, ya había hecho otros dos blogs relacionados a LCNC en el #SAPCommunity
Sin embargo, la semana pasada que visité la página del SAP community, leí que había un reto de LCNC, he aquí los detalles https://blogs.sap.com/2022/05/04/no-code-challenge-0-code-100-app-and-hoodies/ -. Quise hacer un proyecto chusco y divertido en lugar de hacer uno muy serio o estricto; por supuesto cada vez que quiero hacer algo asi, siempre hay dos peques que me preguntan que pueden hacer porque están aburridos – así que decidí hacer esto para ellos también.
Para leer este blog en ingles ve esta pag - DadIamBored Low Code challenge
aqui va el enlace para mi app: DadIamBored
La historia de antemano
El proyecto “Dad, I am bored” es uno el cual mucho de nosotros los papas nos identificamos - creo. estaría divertido si se lo muestran a sus hijos solo por diversión. Mientras estaba buscando REST APIs disponibles sin costo, encontré el bored API, así que decidí ver de qué se trataba.
Los detalles tecnicos del backend
El bored API permite a los desarrolladores obtener sugerencias a activitdades, y también permite pasar parámetros como numero de participantes, tipo de actividad, precio, y otros filtros. Hay Buena documentación y se encuentra en el siguiente enlace https://www.boredapi.com/documentation.
Para mi demo, decidí usar el número de participantes ya que mis hijos quieren hacer cosas individuales o cuando hay algún amiguit@ de visita, entonces habrá 2 o más personas participando. Este app esta muy fit para mi escenario.
Primero que nada, hay que hacer el set up de los datos. Usemos el URL que proporcione arriba y luego vamos a la sección Data de la herramienta AppGyver. Hay varios tipos de request (Get collection, Get Record, Create, Update, Delete). Mas detalles de cómo usar un REST API puedes leer mis otros blogs antes mencionados.
El app mismo
Una vez que hayas hecho el set up de los datos y probado la funcionalidad de flujo, continua al UI.
Mi app tiene 3 páginas: un landing, una página de sugerencias, y una página de perfil.
La página landing muestra un título, un paragrafo con descripción, una imagen y un botón para navegar a la segunda página con texto “Show suggestions”, y abajo un icono de una persona para ver mi perfil en la tercer página. Se ve como la siguiente imagen.
En la segunda página de la aplicacion, anadi el título en la parte de arriba.
Después incluí un control de tipo drop-down que le permite al usuario seleccionar el numero de participantes de la actividad la cual al mismo tiempo se guarda en la variable de la página. El control de drop-down usa una lista de opciones, con 5 objetos en la lista de valores. Variables de la página son variables que se usan solo en la página en contexto y no se pueden acceder desde otra página. Use una variable de la página para guardar el valor del objecto seleccionado.
Hay otros tipos variables en la herramienta AppGyver como variables de datos Data variable y también parámetros de la página. Las variables son accesibles via el boton de toggle de View/Variables que está en la parte superior de la página del lado derecho como se muestra en la siguiente imagen.
Finalmente, dos botones; el primero mostrara la sugerencia y el otro es para cancelar la sugerencia y navegar de regreso a la página landing/home.
El botón de sugerencias tiene lógica para verificar el número de participantes. Si el número no es seleccionado (asumiré que nadie está participando) Simplemente muestro un mensaje para leer un libro “Read a book”. Sin embargo, si el número de participantes es entre 1 y 5, entonces llamo el bored REST API para mostrar la sugerencia obtenida en un mensaje de tipo Toast que se muestra en la parte baja de la pantalla.
Como puedes ver en la imagen anterior, la lógica de LCNC se puede construir en varios pasos:
Usando una condición de tipo If, si el valor no es un número, entonces sugiero leer un libro
Pero si la respuesta es válida, entonces maestro el mensaje de tipo Toast en la pantalla con la actividad sugerida de la respuesta del API.
¿Como saber si todo está funcionando correctamente? ¿Como ver las llamadas de la red?
La sugerencia presentada en las imágenes del blog aun coordina con algunas de las actividades que les gustan a mis hijos, así que ya voy de gane.
Mi hija juega deportes y de momento está participando en basketball. En la siguiente actividad ella selecciono 5 participantes. Me sugirió que también pusiera en el app una funcionalidad para notificar a los papas de sus amigas para ver si alguien estaba interesado en practicar. Esto suena mucho como si fuera un app de niños, pero si pensamos bien esto, este app pudiese ser como una aplicación de negocios. Cuando el input del usuario se someta en reglas de negocio y si son válidas, pudiéramos ejecutar un trigger para un workflow automático en el BTP como el que mi hija sugirió – quizá, un email, una notificación u otro proceso que se pudiera ejecutar. Muy interesante, no?
Bueno, es todo, disfruté mucho al desarrollar este app solo por diversión y poder participar en el reto de LCNC y también incluí una página con mi perfil abajo para los que no me conocen. La pagina sera visible cuando el usuario navega desde la pagina landing al presionar el icon en la parte de abajo. Esa foto fue de mi ultima participacion en el evento Tech Ed del 2019. Espero verlos en el siguiente - Hasta la vista.
En la parte de abajo de la página de mi perfil, hay otro botón el cual facilita la navegación hacia la página landing. Las flechas del teléfono también funcionan para la navegación por si acaso se llegaran a utilizar.
Lo que me gusto durante este reto LCNC y del blog:
Lo que pienso que puede ser mejor:
Gracias por leer este blog y espero que tengan preguntas y si no has puesto tu participacion en el reto, participa ahora. Este es una activitdad muy facil que te ayudara a entender como crear una aplicacion simple o compleja con LC.
Antes de este blog, ya había hecho otros dos blogs relacionados a LCNC en el #SAPCommunity
Sin embargo, la semana pasada que visité la página del SAP community, leí que había un reto de LCNC, he aquí los detalles https://blogs.sap.com/2022/05/04/no-code-challenge-0-code-100-app-and-hoodies/ -. Quise hacer un proyecto chusco y divertido en lugar de hacer uno muy serio o estricto; por supuesto cada vez que quiero hacer algo asi, siempre hay dos peques que me preguntan que pueden hacer porque están aburridos – así que decidí hacer esto para ellos también.
Para leer este blog en ingles ve esta pag - DadIamBored Low Code challenge
aqui va el enlace para mi app: DadIamBored
La historia de antemano
El proyecto “Dad, I am bored” es uno el cual mucho de nosotros los papas nos identificamos - creo. estaría divertido si se lo muestran a sus hijos solo por diversión. Mientras estaba buscando REST APIs disponibles sin costo, encontré el bored API, así que decidí ver de qué se trataba.
Los detalles tecnicos del backend
El bored API permite a los desarrolladores obtener sugerencias a activitdades, y también permite pasar parámetros como numero de participantes, tipo de actividad, precio, y otros filtros. Hay Buena documentación y se encuentra en el siguiente enlace https://www.boredapi.com/documentation.
Para mi demo, decidí usar el número de participantes ya que mis hijos quieren hacer cosas individuales o cuando hay algún amiguit@ de visita, entonces habrá 2 o más personas participando. Este app esta muy fit para mi escenario.
Primero que nada, hay que hacer el set up de los datos. Usemos el URL que proporcione arriba y luego vamos a la sección Data de la herramienta AppGyver. Hay varios tipos de request (Get collection, Get Record, Create, Update, Delete). Mas detalles de cómo usar un REST API puedes leer mis otros blogs antes mencionados.
El app mismo
Una vez que hayas hecho el set up de los datos y probado la funcionalidad de flujo, continua al UI.
Mi app tiene 3 páginas: un landing, una página de sugerencias, y una página de perfil.
La página landing muestra un título, un paragrafo con descripción, una imagen y un botón para navegar a la segunda página con texto “Show suggestions”, y abajo un icono de una persona para ver mi perfil en la tercer página. Se ve como la siguiente imagen.
En la segunda página de la aplicacion, anadi el título en la parte de arriba.
Después incluí un control de tipo drop-down que le permite al usuario seleccionar el numero de participantes de la actividad la cual al mismo tiempo se guarda en la variable de la página. El control de drop-down usa una lista de opciones, con 5 objetos en la lista de valores. Variables de la página son variables que se usan solo en la página en contexto y no se pueden acceder desde otra página. Use una variable de la página para guardar el valor del objecto seleccionado.
Hay otros tipos variables en la herramienta AppGyver como variables de datos Data variable y también parámetros de la página. Las variables son accesibles via el boton de toggle de View/Variables que está en la parte superior de la página del lado derecho como se muestra en la siguiente imagen.
Finalmente, dos botones; el primero mostrara la sugerencia y el otro es para cancelar la sugerencia y navegar de regreso a la página landing/home.
El botón de sugerencias tiene lógica para verificar el número de participantes. Si el número no es seleccionado (asumiré que nadie está participando) Simplemente muestro un mensaje para leer un libro “Read a book”. Sin embargo, si el número de participantes es entre 1 y 5, entonces llamo el bored REST API para mostrar la sugerencia obtenida en un mensaje de tipo Toast que se muestra en la parte baja de la pantalla.
Como puedes ver en la imagen anterior, la lógica de LCNC se puede construir en varios pasos:
- En el evento tap del botón, Valide el valor seleccionado
Usando una condición de tipo If, si el valor no es un número, entonces sugiero leer un libro
- Sin embago, si la opción seleccionada es en verdad un número, llamo la operación Get Record de la opción de la sección de Data que configure en mi API pasando la variable iParticipants (el cual es el valor seleccionado del control drop-down)
- Si el API regresa un error, entonces maestro una alerta para avisarle al usuario que algo no está funcionando…
Pero si la respuesta es válida, entonces maestro el mensaje de tipo Toast en la pantalla con la actividad sugerida de la respuesta del API.
¿Como saber si todo está funcionando correctamente? ¿Como ver las llamadas de la red?
La sugerencia presentada en las imágenes del blog aun coordina con algunas de las actividades que les gustan a mis hijos, así que ya voy de gane.
Mi hija juega deportes y de momento está participando en basketball. En la siguiente actividad ella selecciono 5 participantes. Me sugirió que también pusiera en el app una funcionalidad para notificar a los papas de sus amigas para ver si alguien estaba interesado en practicar. Esto suena mucho como si fuera un app de niños, pero si pensamos bien esto, este app pudiese ser como una aplicación de negocios. Cuando el input del usuario se someta en reglas de negocio y si son válidas, pudiéramos ejecutar un trigger para un workflow automático en el BTP como el que mi hija sugirió – quizá, un email, una notificación u otro proceso que se pudiera ejecutar. Muy interesante, no?
Bueno, es todo, disfruté mucho al desarrollar este app solo por diversión y poder participar en el reto de LCNC y también incluí una página con mi perfil abajo para los que no me conocen. La pagina sera visible cuando el usuario navega desde la pagina landing al presionar el icon en la parte de abajo. Esa foto fue de mi ultima participacion en el evento Tech Ed del 2019. Espero verlos en el siguiente - Hasta la vista.
En la parte de abajo de la página de mi perfil, hay otro botón el cual facilita la navegación hacia la página landing. Las flechas del teléfono también funcionan para la navegación por si acaso se llegaran a utilizar.
Lo que me gusto durante este reto LCNC y del blog:
- Facilidad de Desarrollo – crear páginas, navegación entre ellos y donde poner los controles
- Hacer el deploying de la aplicación fue más fácil de lo que pensé – sigue las instrucciones del Web builds aquí https://docs.appgyver.com/publishing/build-service/web-builds
- Mas y más documentación acerca de ejemplos están apareciendo en la página de la comunidad, especialmente al ver a los otros participantes y sus retos.
Lo que pienso que puede ser mejor:
- Poder compartir el proyecto hacia un code repo desde la misma herramienta AppGyver (si tener que descargarlo)
- Un lugar que incluya notas/documentacion dentro del proyecto en caso de que el proyecto sea trabajado por varios individuos
- El servicio Build service esta un poco escondido. No fue facil encontrarlo – Tuve que ir al icono Launch, despues en el navegador del lado izquierdo, tuve que ir a la seccion Distribute, luego darle click al servicio Build service. Actualmente no functiona el build de version 4.x y el de version 3.x sera deprecado el 3 de junion **
Gracias por leer este blog y espero que tengan preguntas y si no has puesto tu participacion en el reto, participa ahora. Este es una activitdad muy facil que te ayudara a entender como crear una aplicacion simple o compleja con LC.
- SAP Managed Tags:
1 Comment
