Aplicación de Glovo en Power Apps
Desde mi persona, me considero que soy un maldito culo inquieto, y me gusta mirar muchas cosas relacionadas con mi profesión, para poder mejorar tanto profesionalmente como desde el lado del cliente.
He de confesar, que llevaba tiempo rondándome hacer algo de diseño en Power Apps para probar mis capacidades. Así que puse en práctica todas las cosas que he visto por internet, para poder presentarme al reto, con un mínimo de diseño rompedor en una aplicación de Power Apps.
El caso, es que al siguiente mes de la emisión del 'The Power Show!', cuando llego la hora de presentar los diseños presentados por todos los participantes, resulto que el diseño que presente ambientado en la aplicación de 'Glovo', resulto ser el ganador del reto, por lo que me veo en la obligación y en el placer de explicar cómo he realizado el diseño de mi aplicación de 'Glovo' para que todo el que quiera aprender hacer algo similar, tenga un punto de inicio.
En el siguiente enlace, os dejo video en el canal de Cepa Code, donde se ve el video que se utilizó en el reto de 'The Power Show!'
Web de recursos
En un principio voy a explicar de dónde saque los principales recursos utilizados para montar la aplicación de Glovo.
Imágenes e iconos:
- https://www.flaticon.es/
- https://unsplash.com/es
- Banco de imágenes de Office 365, que se ofrece desde SharePoint
Efectos y animaciones:
- https://www.blobmaker.App
- https://getwaves.io/
- https://svgwave.in/
- https://loading.io/
- https://bgjar.com/
NOTA: Todos los recursos que se han empleado se han agregado a la sección de multimedia de la Power Apps. En un desarrollo real, aquellas imágenes que no sean fijas en la aplicación de negocio deberían estar fuera de esta sección de la Power Apps y colocarlas en algún repositorio compatible con Power Apps, ya sea SharePoint, Dataverse o Azure.
Configuración de la Power Apps
La aplicación de Power Apps es una aplicación de tipo móvil, con las siguientes configuraciones esenciales activadas o desactivadas, según las necesidades de mi aplicación.
-
Desactivar la opción 'Ajustar tamaño al contenido' para que la aplicación se expanda por todo el dispositivo, sin tener zonas negras en la parte superior e inferior del dispositivo móvil.
-
Activar la opción 'Bloquear la orientación', ya que el diseño está pensado para un dispositivo móvil, en posición vertical y el cambio de orientación perjudica gravemente su diseño.
-
Activar la opción 'Botón de atrás de Android', para poder utilizar el botón de volver de Android dentro de nuestro dispositivo.
-
Activar la opción 'Función ParseJSON y objetos sin tipo'. Esta opción la tenía activada por si manejaba estructuras de Json más complejas, para poder trabajar con ellas, pero al final con las opciones de las colecciones, no se ha empleado.
NOTA IMPORTANTE: En mis pruebas de optimización de la aplicación, probe algunas configuraciones adicionales, para intentar mejorar el rendimiento, pero tengo que confesar que no funcionaron como yo esperaba, probablemente debido a que no lo manejaba como es debido.
Conectores y repositorios
La implementación de esta aplicación de Power Apps, no utiliza ningún conector o repositorio para almacenar la información que se muestra, sino que se han utilizado estructuras de Json, con datos preconfigurados, que se han sido agregados a las colecciones de Power Apps.
Carga inicial de la aplicación
En la sección 'OnStart' de la aplicación, se ha establecido todos los procesos iniciales de la aplicación, como la carga de las distintas ofertas de Glovo, como el cálculo de las coordenadas, donde colocar los menús iniciales de las secciones que ofrece Glovo.
NOTA IMPORTANTE: Para que el proceso de carga sea lo más optimo y la experiencia de usuario no se vea afectada, se debe usar el comando 'Concurrent' que tiene la capacidad de realizar distintas tareas en paralelo, con lo que se puede reducir los tiempos iniciales de carga de la aplicación.
Sección de los servicios que ofrece Glovo
Al entrar en la aplicación oficial de Glovo, te ofrece un menú circular interactivo, donde elegir qué servicio necesitas que Glovo te realice por ti, una compra, regalos o traerte fármacos.
Este menú tan interactivo, no se puede reproducir fielmente, por limitaciones que tiene producto, pero a través de fórmulas matemáticas, sí que se puede hacer un menú circular muy similar al que ofrece la aplicación de Glovo.
Por desgracia, para hacer este tipo de diseños, no se puede utilizar una galería y asociar una colección con toda su información, con lo que se ha tenido que realizar a través de agrupaciones de controles dentro de un contenedor centrado en el ancho del dispositivo.
La dificultar consistía en relacionar la información de la colección del menú de la sección de servicios que ofrece Glovo con los componentes de las agrupaciones de controles utilizados para su representación visual en la aplicación de Power Apps.
Por desgracia, no hay un mecanismo que te permita recorrer o encontrar controles dentro de un control o pantalla en Power Apps, así que utilice la propiedad 'AccessibleLabel' para poder relacionar los componentes de esa agrupación, con los datos de la colección de datos correspondiente.
De esta forma, se puede hacer que los controles sean un poco más dinámicos al contenido que se maneja en ese momento y evitar el uso del 'Hard-code' en la aplicación de Power Apps
En la siguiente imagen muestro como se establece esta relación entre la colección de datos y los controles del diseño.
La transición de las ofertas de Glovo
Toda la sección de las ofertas de Glovo, que se muestra en la aplicación está en un contenedor con las siguientes características.
- El contenedor tiene el mismo tamaño de anchura que la pantalla del dispositivo
- El contenedor tiene reducido un 10% el tamaño de altura que la pantalla del dispositivo.
- El contenedor está en las primeras capas de la pantalla, para poder estar por encima del círculo de servicios que ofrece Glovo.
- Este contenedor contiene en agrupaciones de contenedores los demás componentes que se muestran como la sección de ofertas, las galerías y la animación en forma de ola.
- Este contenedor está ubicado en la parte inferior del dispositivo móvil, para luego realizar el efecto de transición hacia arriba.
- Para realizar el efecto de transición hacia arriba, se ha utilizado el componente 'Timer' con una duración de 3000 milisegundos.
-
Al pulsar sobre el texto de las ofertas, se ejecuta este componente 'Timer' y a través de la división las propiedades 'Value' y 'Duration' del componente, se obtiene un porcentaje que se utilizaba para modificar las coordenadas Y del contenedor principal y realizar así el efecto de levantar las ofertas de Glovo.
- Para volver al estado inicial, con reiniciar los valores de configuración del componente 'Timer', el contenedor, volvía a su estado inicial.
Imágenes con bordes redondeados
Para montar los bordes redondeados, había montado una imagen a modo de mascara, con los bordes en blanco y el centro transparente.
La realidad es que, mientras redactaba esta entrada, me he dado cuenta de que el componente imagen, ofrece de serie la posibilidad de poner los bordes de la imagen redondeados, con lo que es más fácil de usar y ahorras recursos en la aplicación de Power Apps
Me imagino que mi mente para poder diseñar cosas muy distintas a las habituales en Power Apps, me ha jugado una mala pasada. Recordad que de todo se aprende, en esta vida.
Sección de descuentos
En cada una de las galerías de las ofertas que ofrece Glovo, hay una etiqueta que muestra un descuento que se aplica al realizar el pedido. Para ambos casos la forma de montar esta sección de la oferta es igual.
Ese efecto de la etiqueta de descuento está realizado a través de la utilización de un componente de tipo rectángulo y un botón desactivados, que al tener el mismo color y estar el botón, ubicado por debajo del componente rectángulo, da ese efecto de etiqueta de descuento.
Con una componente etiqueta de texto, por encima de estos componentes, ya se dispone de una etiqueta de descuento.
NOTA: Los demás efectos visuales que se muestran en la aplicación, se han realizado con técnicas parecidas, con diferentes componentes, por lo que solo hay que echar un poco de imaginación para diseñar cosas espectaculares.
En resumen
Esta es la explicación de como he montado mi diseño de la aplicación de Glovo en una Power Apps.
Espero que os haya gustado aprende como se ha realizado, como a mí me ha gustado explicarlo.
No me quiero ir de este post, sin antes dar las gracias, Nacho Cepa y Andrés Álvarez Skinner, por el trabajo de divulgación que realizan estos crack, así como a todos a los participantes de este reto, que, sin vosotros, todo esto no es posible.
NOTA: He tomado nota de ciertos conceptos que han aplicados mis compañeros en sus aplicaciones presentadas para el reto y espero poder aplicar esos conceptos en algunas ideas que se me pasan por mi mente.
