Crea prototipos de apps totalmente funcionales sin conocimientos de programación

Las herramientas “no-code” están a la orden del día, al igual que las apps. En muchos casos, para proyectos propios o de clientes, necesitamos validar una idea, o crear pequeños prototipos.
En este taller aprenderás a crear prototipos de aplicaciones, totalmente funcionales, utilizando diferentes herramientas.

De esta forma, podrás utilizar la que más se adapte a tus necesidades, ya que en algunas podrás importar tus diseños desde Figma o Sketch, desde otras importar datos desde Google Sheets o Airtable...Hay muchas opciones, con un denominador común, no vas a escribir ni una línea de código de programación.

Transcript

1. Crea prototipos de apps funcionales Sin conocimientos de programación
2. HELLO, AQUÍ IMANOL Desarrollador Web, Consultor y Formador IT @itermar / imanol@itermar.io ♂
3. SI DUDAS, HÁZLO Podcast sobre emprendimiento, desarrollo web, productividad y marketing online https://itermar.io/podcast Apple Podcasts · Spotify · iVoox
4. ACADEMIA DE PRODUCTIVIDAD Gestión de tareas · Gestión de tiempo · Productividad https://academiadeproductividad.com ⚡
5. ÍNDICE Desarrollo de prototipo de app funcional Definición, ventajas, procedimientos... introducCiÓn Protopie, Glide, Thunkable, Bubble Herramientas Práctica 01 02 03
6. Definición, ventajas, procedimientos... INTRODUCCIÓN 01
7. “Un prototipo en software es un modelo del comportamiento del sistema que puede ser usado para entenderlo completamente o ciertos aspectos de él y así clarificar los requerimientos... Un prototipo es una representación de un sistema, aunque no es un sistema completo, posee las características del sistema final o parte de ellas.” —WIKIPEDIA
8. “Tienes que prototipar. Tienes que testar. Tienes que verlo en vivo. Tienes que ver a alguien usándolo. Solo entonces tienes un diseño refinado. Nadie acierta en su primer intento.” —DAN SAFFER
9. INTRODUCCIÓN Beneficios Los beneficios de crear prototipos antes de pasar a desarrollo, son innumerables: • Ahorro de costes • Reducción de errores • Aclarar ideas • Definir funcionalidades • Descartar opciones • Validar ideas • Probar distintos enfoques • ...etc
10. INTRODUCCIÓN Errores Comunes A la de hora de plantear el desarrollo de una app, se suelen cometer errores como: • Empezar a desarrollar desde el minuto 1 • No respetar las fases de desarrollo • No saber comunicar correctamente los objetivos
11. INTRODUCCIÓN desarrollo A la de hora de plantear el desarrollo de una app, tenemos dos opciones • App nativa • Webapp
12. INTRODUCCIÓN Apps nativas • iOS y Android • Desarrolladas con APIs de Google y Apple • IDE de desarrollo: XCode, Android Studio • Lenguajes de desarrollo: Swift, Java, JavaScript…
13. INTRODUCCIÓN Apps nativas • Sujetas a actualizaciones de sistema • Usuarios descargan desde Google Play o App Store • Nuestras actualizaciones tienen que ser aprobadas por equipos de revisión • Hay que desarrollar una para cada SO, de forma independiente
14. INTRODUCCIÓN Apps nativas • Hay que seguir guías de estilo de cada plataforma a la hora de diseñar la app ◦ iOS Human Interface Guidelines ◦ Android Design Guidelines • Necesitamos muchos perfiles con capacitaciones específicas en diseño y desarrollo • Altos costes en presupuesto • Tiempos de ejecución de proyecto altos
15. INTRODUCCIÓN WEBAPPS • Hay otra vía, que es la de aprovechar nuestros conocimientos en desarrollo web • Podemos construir apps de la misma forma que nuestras páginas web • Lenguajes: HTML, CSS, JavaScript
16. INTRODUCCIÓN WEBAPPS • Estas apps se ejecutan en el navegador • No dependemos de ningún sistema operativo • No hay que instalar nada • Actualizaciones instantáneas • Ejemplo: Twitter
17. INTRODUCCIÓN WEBAPPS • Cualquier web que ejecute alguna funcionalidad al usuario, puede considerarse una aplicación web • Existe debate de en qué punto una web deja de ser una simple web y pasa a ser una aplicación web.
18. INTRODUCCIÓN PWA • Solución intermedia entre app nativa y webapp • Básicamente es una página web multivitaminada • Es una metodología que consiste en la mejora progresiva de una web, para conseguir aproximarla lo máximo posible a una app nativa.
19. INTRODUCCIÓN OPCIONES No siempre tendremos que utilizar una herramienta de software para crear prototipos. Dependerá de: • Fase de desarrollo en la que nos encontremos • Nivel de detalle que queramos alcanzar • Tipo de funcionalidad a testear.
20. INTRODUCCIÓN FASES Normalmente, en fases iniciales, querremos probar: • Reacción del público objetivo • Validar la idea
21. INTRODUCCIÓN OPCIONES Para fases iniciales de desarrollo o testado de funcionalidades básicas/generales, bastará con: • Lápiz y papel • Nuestra herramienta de diseño habitual
22. INTRODUCCIÓN FASES En cambio, en fases más avanzadas, querremos probar: • Interfaz de usuario • Interacciones • Animaciones
23. INTRODUCCIÓN FASES En este momento es cuando necesitamos incluir en nuestro flujo de trabajo, herramientas de prototipado específicas • Podemos hacer tests de usuarios muy fiables • Nos permiten hacernos una idea muy cercana a la realidad de cómo va a comportarse la app
24. INTRODUCCIÓN FASES • Facilitamos mucho la comprensión del sistema al equipo de desarrollo ◦ Les ahorramos trabajo, ya que hemos probado que funciona ◦ Esto supone un ahorro de tiempo y de costes asociados al proyecto
25. Glide, Protopie, Thunkable, Bubble HERRAMIENTAS 02
26. THUNKABLE https://thunkable.com
27. HERRAMIENTAS THUNKABLE • Programación mediante bloques • Multi-plataforma ◦ Todas las apps se ejecutan en iOS y Android • Proyecto desde cero o a partir de plantillas o compartidos por la comunidad • Comunidad activa y chat de soporte
28. HERRAMIENTAS THUNKABLE Planes de precios • Free • Pro (20$/mes o 200$/año) https://thunkable.com/#/pricing
29. BUBBLE https://bubble.io
30. HERRAMIENTAS BUBBLE Diseño • Editor “Drag and Drop” • Aplicaciones responsive • No es necesario introducir HTML y CSS para personalizar • Biblioteca de componentes • Plugins para integrar servicios de terceros • Carga de contenido dinámico • Cambiar aspecto app de forma condicional
31. HERRAMIENTAS BUBBLE Desarrollo • Indicar paso a paso qué debe hacer la app • Almacenamiento en local • Conexión a BBDD SQL o REST API • Planificador de acciones • Se puede extender con plugins JavaScript y APIs
32. HERRAMIENTAS BUBBLE Planes de precios • Hobby • Personal (25$/mes) https://bubble.io/pricing
33. PROTOPIE https://www.protopie.io
34. HERRAMIENTAS PROTOPIE • Herramienta multiplataforma ◦ Mac y Windows • Ideal para crear prototipos de forma rápida ◦ App móvil o web • Sin código • Se pueden importar diseños de Sketch, Figma y Adobe XD
35. HERRAMIENTAS PROTOPIE • Interacciones • Animaciones • Dentro de cada opción tenemos una ❓ que nos lleva a la documentación oficial
36. HERRAMIENTAS PROTOPIE • Podemos probar nuestros prototipos de varias maneras: ◦ Simulador incorporado ◦ En dispositivo real ◦ Compartir mediante URL
37. HERRAMIENTAS PROTOPIE Planes de precios • Free (Prueba de 10 días) • Individual (129$) https://my.protopie.io/buy
38. HERRAMIENTAS PROTOPIE • Recursos de aprendizaje ◦ https://blog.protopie.io/video-series-beginners-guide-to-microinter actions-in-protopie-2a90f97039b4 ◦ https://www.udemy.com/course/protopie-uiux ◦ https://www.skillshare.com/classes/Prototyping-with-ProtoPie-Bri ng-Your-App-Designs-to-Life-with-Motion/1664322344/lessons ◦ https://www.protopie.io/learn/ ◦ https://designcode.io/protopie
39. HERRAMIENTAS PROTOPIE • Ejemplos para descargar: ◦ https://www.protopie.io/demo/
40. HERRAMIENTAS PROTOPIE • Recursos de app externas ◦ https://www.uistore.design ◦ Sketch ▪ https://www.sketchappsources.com ◦ Figma: ▪ https://www.figma.com/resources/ ◦ Adobe XD ▪ https://www.xdguru.com
41. HERRAMIENTAS PROTOPIE • Animaciones para descargar (también se pueden utilizar en desarrollo) ◦ https://lottiefiles.com
42. HERRAMIENTAS PROTOPIE Principales ventajas de utilizar Protopie • Sencillez de uso • Interfaz similar a la de las herramientas de diseño más populares • Sin código (interacciones y acciones) • Soporte multi-touch y a sensores de dispositivo • Prueba en dispositivo real
43. HERRAMIENTAS PROTOPIE Protopie trabaja con capas • De igual forma que las herramientas de diseño más populares • Cada capa tiene diferentes propiedades ◦ Posición, tamaño, rotación, opacidad...etc • Hay distintos tipos de capas ◦ Audio, vídeo, texto, input...etc • Constraints (similar a responsive) • Las capas se agrupan dentro de contenedores
44. HERRAMIENTAS PROTOPIE Contenedores • Gracias a los contenedores, podemos crear páginas con scroll o paginación • El usuario puede ajustar estas características dentro del panel de propiedades del contenedor • Basta con que el contenedor tenga dentro una capa para poder hacer uso de esta funcionalidad
45. HERRAMIENTAS PROTOPIE • Interfaz • Importar diseños • Buenas prácticas • Previsualizar • Prototipado rápido • Componentes • Animación • Escenas • Shortcuts
46. HERRAMIENTAS PROTOPIE Interfaz
47. HERRAMIENTAS PROTOPIE Importar • Aplicación desde la que queremos importar, debe estar ejecutándose • Archivo que queremos importar tiene que estar abierto
48. HERRAMIENTAS PROTOPIE Importar • Para diferentes escenas (pantallas), hay que ir importándolas de una en una ◦ Renombrar ◦ Cuidado con la resolución ◦ Agrupar las capas de la forma en las que las queramos animar
49. HERRAMIENTAS PROTOPIE Importar Importar desde Sketch • Herramienta que va instalada en local (Mac) ◦ https://www.sketch.com • Prueba gratuita de 30 días (99 $)
50. HERRAMIENTAS PROTOPIE Importar Importar desde Figma • Herramienta online • Plan gratuito con limitaciones ◦ https://www.figma.com/pricing/ • Al ser Figma una herramienta online, hay que dar permisos al navegador • Tenemos que estar logueados en nuestra cuenta de Figma
51. HERRAMIENTAS PROTOPIE Importar Importar desde Adobe XD • Plan gratuito con limitaciones • Suscripción mensual ◦ https://www.adobe.com/es/products/xd.html
52. HERRAMIENTAS PROTOPIE Importar Las 3 son herramientas similares • Utilizar la que mejor se adapte a nuestro workflow • Diseño por pantallas (y por capas) • Orientadas a diseño de apps (móviles y web) • Facilitan exportación de assets • Ampliación de funcionalidad mediante plugins
53. HERRAMIENTAS PROTOPIE Importar No es obligatorio partir de diseños hechos en otras herramientas • Podemos ir creando las diferentes capas desde Protopie • Lo más cómodo y lo más eficiente es cargar las capas de un diseño previamente realizado
54. HERRAMIENTAS PROTOPIE Buenas prácticas • A la hora de diseñar, evitar las máscaras en la medida de lo posible • De esta forma, podemos trabajar mejor las animaciones en elementos concretos • Si no queda más remedio, agruparlas en un contenedor antes de pasar a animar • Organizar bien las capas y prepararlo todo bien en fase de diseño
55. HERRAMIENTAS PROTOPIE Buenas prácticas • Diseñar en aplicación propio de diseño y después importar a Protopie • Organizar bien las capas y prepararlo todo bien en fase de diseño
56. HERRAMIENTAS PROTOPIE Previsualizar Protopie nos proporciona diferentes formas de probar nuestros prototipos • Previsualizador • Dispositivo real • Compartir mediante enlace
57. HERRAMIENTAS PROTOPIE Previsualizar Previsualizador • Dentro de la propia aplicación, se abre una ventana con el tamaño de dispositivo que elijamos, para ver cómo funcionan las animaciones, interacciones, transiciones...etc • Determinados tipos de interacción no pueden probarse desde aquí
58. HERRAMIENTAS PROTOPIE Previsualizar Previsualizador • Tenemos unos tamaños predefinidos por plataforma ◦ iOS, Android, Desktop • Podemos crear tamaños personalizados
59. HERRAMIENTAS PROTOPIE Previsualizar Previsualizador • Para enviar demostraciones a clientes, o grabar guías en vídeo, el previsualizador nos permite grabar hasta 5min de uso en pantalla
60. HERRAMIENTAS PROTOPIE Previsualizar Dispositivo Real • Si queremos probar nuestro prototipo en un dispositivo real, debemos realizar una serie de acciones ◦ Instalar una app en el dispositivo ▪ https://www.protopie.io/learn/protopie-player/ ◦ Pulsar en “Device” ◦ Abrir la app y escanear el QR que aparece ▪ También podemos conectar dispositivo por USB
61. HERRAMIENTAS PROTOPIE Previsualizar Dispositivo Real • Si queremos probar nuestro prototipo en un dispositivo real, debemos realizar una serie de acciones ◦ Instalar una app en el dispositivo ▪ https://www.protopie.io/learn/protopie-player/ ◦ Pulsar en “Device” ◦ Abrir la app y escanear el QR que aparece ▪ También podemos conectar dispositivo por USB
62. HERRAMIENTAS PROTOPIE Previsualizar Compartir mediante enlace • La tercera opción sería compartir nuestro documento con alguien que no tenga acceso a la aplicación de escritorio • Podemos compartir mediante un enlace de forma remota • Tenemos que pulsar en la opción “Cloud”
63. HERRAMIENTAS PROTOPIE Previsualizar Compartir mediante enlace • Antes de poder compartirlo, debemos subirlo a la nube de Protopie • Para ello, pulsamos sobre “Upload” ◦ El documento debe estar previamente guardado en local
64. HERRAMIENTAS PROTOPIE Previsualizar Compartir mediante enlace • Esto nos genera un enlace, el cual podemos compartir con cualquier usuario, sin necesidad de que instale nada en su equipo
65. HERRAMIENTAS PROTOPIE Previsualizar Compartir mediante enlace • Desde la ventana de compartir podemos: ◦ Probar el prototipo desde el navegador ◦ Descargar el fichero .pie ◦ Abrir con la app “Protopie Player”
66. HERRAMIENTAS PROTOPIE Prototipado rápido • Si importamos un diseño ya creado en Sketch, Figma o Xd, podemos crear un prototipo de forma muy rápida. • Solo tenemos que conectar cada una de las escenas entre sí, para poder pasar de una a otra. • Obtenemos una navegación completa dentro de la app, mediante triggers y actions
67. HERRAMIENTAS PROTOPIE Prototipado rápido • Triggers ◦ Evento que desencadena una acción como respuesta ▪ Tap, double tap, long press, drag... • Actions ◦ Incluye muchas acciones para animar, una vez disparado el trigger ▪ Para prototipado rápido: Jump
68. HERRAMIENTAS PROTOPIE Prototipado rápido • Interacciones de dispositivo ◦ Son las que se encuentran bajo el menú “Sensors” ◦ Solo podemos acceder a estos triggers si estamos probando la app en un dispositivo real, no desde el simulador
69. HERRAMIENTAS PROTOPIE Prototipado rápido • Jump ◦ Seleccionamos escena a la que queremos ir, y escogemos el tipo de transición que prefiramos. ▪ Fade, Pop, Slide In, Slide Out, Flip ◦ Hay que tener en cuenta los comportamientos por defecto de los diferentes SO
70. HERRAMIENTAS PROTOPIE Prototipado rápido • Jump ◦ Para volver a la pantalla anterior ▪ “Previously shown scene” ▪ Muy útil para botones de “volver atrás”
71. HERRAMIENTAS PROTOPIE Prototipado rápido • Contenedor “scrollable” ◦ Container / Scroll container ◦ Establecer tamaño de la zona que puede tener scroll ◦ Podemos utilizar porcentajes al establecer el tamaño ◦ Meter todo el contenido dentro del contenedor
72. HERRAMIENTAS PROTOPIE Prototipado rápido • Contenedor “scrollable” ◦ Podemos cambiar dirección de scroll ◦ Efecto al pasarse de la zona de scroll ◦ Establecer punto de partida del scroll
73. HERRAMIENTAS PROTOPIE Prototipado rápido • Componentes ◦ Muy útil si tenemos elementos que se van a repetir a lo largo de la interfaz de nuestra app, en diferentes lugares. ◦ Podemos convertir cualquier elemento en un componente
74. HERRAMIENTAS PROTOPIE Prototipado rápido • Componentes ◦ Una vez creado un componente, habría que sustituir los elementos que queremos que compartan ese aspecto y comportamiento ◦ Los tenemos disponibles en la pestaña “Components”
75. HERRAMIENTAS PROTOPIE Prototipado rápido • Componentes ◦ A partir de ahí, un cambio en cualquiera de las instancias, solo afecta a esa instancia ◦ Si queremos que el cambio se replique en todas las instancias de un componente, hay que hacerlo directamente en la pestaña “Components”
76. HERRAMIENTAS PROTOPIE Prototipado rápido • Componentes ◦ Muy útil también para reutilizar animaciones, podemos crearlas en el componente, para que se replique en todas sus apariciones
77. HERRAMIENTAS PROTOPIE Prototipado rápido • Constraints ◦ En este aspecto se comporta como cualquier herramienta de diseño ◦ Además de las capas y propiedades, funciona con constraints ◦ En base a cómo estén definidos los constraints, las animaciones y acciones que realicemos sobre un contenedor y los elementos que contiene se adaptarán de forma automática
78. HERRAMIENTAS PROTOPIE Prototipado rápido • Área de interacción ◦ Si el área para intereactuar con un botón u otro elemento es demasiado pequeña, podemos ampliarla ◦ “Hit Area”
79. HERRAMIENTAS PROTOPIE Prototipado rápido • Tener en cuenta que todo se importa como bitmaps ◦ No podremos modificar textos importados ◦ Habrá que crear una nueva capa de texto e intentar recrear el importado para poder sustituirlo
80. HERRAMIENTAS PROTOPIE Animación Las animaciones son una gran herramienta para dar fluidez al diseño, y mejorar la experiencia del usuario con el uso de la app • Protopie cuenta con herramientas muy útiles para animar
81. HERRAMIENTAS PROTOPIE Animación • Cada vez es más frecuente el uso de animaciones tanto en web como en app • Hay que tener cuidado con ellas ◦ Son muy vistosas ◦ Consumen muchos recursos ◦ Pueden distraer al usuario
82. HERRAMIENTAS PROTOPIE Animación • Por norma, utilizaremos animaciones lo más suaves posibles, dejando las más llamativas para los casos en los que haya que destacar un elemento de la interfaz por encima del resto.
83. HERRAMIENTAS PROTOPIE Animación • En primer lugar hay que seleccionar la capa que se quiera animar ◦ Importante tener las capas bien ordenadas, sobre todo si las animaciones se van a suceder de forma secuencial
84. HERRAMIENTAS PROTOPIE Animación • Para centrarnos en la parte de la interfaz que vamos a animar, podemos establecer el punto de partida del scroll
85. HERRAMIENTAS PROTOPIE Animación • Indicar el trigger que va a disparar la animación ◦ Para empezar, “Start” es una buena opción, indica el momento de arranque de la vista de la aplicación • “Add Trigger” > “Start”
86. HERRAMIENTAS PROTOPIE Animación
87. HERRAMIENTAS PROTOPIE Animación • Una vez que tenemos el evento que va a ejecutar la animación, solo nos queda indicar qué tipo/s de animación/es vamos a aplicar sobre el elemento seleccionado ◦ Mover ◦ Escalar ◦ Rotar / Rotar 3D ◦ Opacidad ◦ ...etc
88. HERRAMIENTAS PROTOPIE Animación
89. HERRAMIENTAS PROTOPIE Animación
90. HERRAMIENTAS PROTOPIE Animación
91. HERRAMIENTAS PROTOPIE Animación
92. HERRAMIENTAS PROTOPIE Animación • En caso de ser elementos creados desde Protopie (no capas de bitmaps), podremos animar además las siguientes propiedades: ◦ Color ◦ Radio ◦ Borde ◦ Sombra • Todas las animaciones tienen propiedades específicas, una duración y un retardo.
93. HERRAMIENTAS PROTOPIE Animación • “Reset” es muy útil, cuando queremos que un elemento vuelva a su estado original. • De esta forma nos evitamos tener que volver a meter las propiedades de su estado original, una a una, a mano. • Siempre hay que tener en cuenta que hay que indicar claramente la capa sobre la que se aplica la animación
94. HERRAMIENTAS PROTOPIE Animación • Para que cada animación vaya una después de la otra, hay que jugar con el delay • Se pueden ajustar los valores desde el panel de propiedades o directamente desde la propia acción, moviendo la barra a izquierda y derecha
95. HERRAMIENTAS PROTOPIE Animación • Para que cada animación vaya una después de la otra, hay que jugar con el delay • Se pueden ajustar los valores desde el panel de propiedades o directamente desde la propia acción, moviendo la barra a izquierda y derecha
96. HERRAMIENTAS PROTOPIE Animación • Cada animación tiene un tiempo para desarrollarse ◦ Esto es, el tiempo que tarda en pasar de un estado a otro ◦ Cuanto más tiempo, más suave será la animación
97. HERRAMIENTAS PROTOPIE Animación • Hay diferentes tipos de animación, los cuales indican el modo en el que ésta se desarrolla ◦ Más brusco, más suave, más rápido al principio y más lento al final, de forma progresiva...etc ◦ Propiedad Easing
98. HERRAMIENTAS PROTOPIE Animación Easing • Linear • Ease • Ease In • Ease Out • Ease In & Out • Cubic Bezier • Spring Más información: https://www.protopie.io/learn/basics/index.html?utm_source=propert y-easing#Animation_Curve
99. HERRAMIENTAS PROTOPIE Animación Assets animados • Protopie permite añadir a nuestros proyectos elementos animados en los formatos: ◦ GIF ◦ MP4 https://lottiefiles.com
100. HERRAMIENTAS PROTOPIE Escenas • Si una app tiene más de una vista, en Protopie se conocen como escenas. • Debemos tener una escena por cada una de estas vistas • Tenerlo en cuenta a la hora de importar diseños realizados en otras aplicaciones ◦ Hay que importarlas una a una • Para pasar de una escena a otra, recordamos “Jump”
101. HERRAMIENTAS PROTOPIE Shortcuts • Protopie cuenta con un gran número de útiles atajos de teclado: ◦ https://www.protopie.io/learn/basics/#Shortcut
102. GLIDE https://www.glideapps.com
103. HERRAMIENTAS GLIDE • Herramienta online • Crea apps sin código • Contenido cargado a través de Google Sheets • Aspecto de la app configurable desde la herramienta • Actualización de datos automática
104. HERRAMIENTAS GLIDE • Puedes compartir la app mediante un link • Dispone de plantillas de las que partir • Soporta localización (para interfaz, no datos)
105. HERRAMIENTAS GLIDE Requerimientos del navegador: • Constructor ◦ Chrome 60 o superior ◦ Safari 11 o superior ◦ Firefox 60 o superior • Apps ◦ Chrome en Android ◦ Safari en iOS
106. HERRAMIENTAS GLIDE Requerimientos del sistema operativo móvil: • Android Oreo 8.0.0 o superior • iOS 11 o superior
107. HERRAMIENTAS GLIDE Requerimientos de tamaño de pantalla: • Para el constructor ◦ Monitor de 11” o superior • Para la app ◦ Actualmente, solo smartphone ◦ En tablet o desktop renderiza la pantalla de ejecución
108. HERRAMIENTAS GLIDE Planes de precios • Free (0$/mes) • Pro (19$/mes) • Business (199$/mes) https://www.glideapps.com/pricing
109. HERRAMIENTAS GLIDE • Primeros pasos • Organizar la hoja de cálculo • Icono, tema y nombre app • Listas y propiedades • Estructura y componentes • Personalizar componentes • Relaciones • Botones • Formularios • Imágenes • Vistas • Data Editor • Publicar y compartir
110. HERRAMIENTAS GLIDE Primeros pasos • Crear una cuenta con nuestra cuenta de Google • Conecta automáticamente con nuestra cuenta de Google Sheets • Podemos crear una nueva app o partir de una plantilla ◦ En ambos casos, se establece una relación con una hoja de cálculo de Google Sheets • Glide analiza los datos, para intentar “darles forma” dentro de la estructura general de la app
111. HERRAMIENTAS GLIDE Primeros pasos • En todo momento, desde la interfaz de Glide, podemos editar los datos en Google Sheets • Filas de la hoja de cálculo se corresponde con un elemento de la app • Las hojas de la hoja de cálculo, se corresponden con las pestañas de la app
112. HERRAMIENTAS GLIDE Organizar hoja de cálculo • Crear una nueva hoja de cálculo desde la que partir ◦ http://sheets.new • Se compone de 4 elementos: ◦ Filas ◦ Columnas ◦ Celdas ◦ Hojas
113. HERRAMIENTAS GLIDE Organizar hoja de cálculo • Introducimos cabeceras para cada columna • De esta forma, vamos a poder categorizar los datos de la aplicación • Permitimos a Glide que “lea” el contenido para que pueda “traducirlo” a su idioma • Podemos introducir distintos tipos de contenido
114. HERRAMIENTAS GLIDE Icono, tema y nombre app • Al hacer la importación desde Google Sheets, Glide hace una adaptación del contenido, que nosotros podemos personalizar • Podemos cambiar el aspecto general de la app, así como el icono y nombre, desde la pestaña “Settings”
115. HERRAMIENTAS GLIDE Icono, tema y nombre app
116. HERRAMIENTAS GLIDE Icono, tema y nombre app
117. HERRAMIENTAS GLIDE Pestañas y menú lateral • Disponemos de dos formas de añadir vistas a nuestra app ◦ Barra de pestañas ◦ Menú lateral
118. HERRAMIENTAS GLIDE Listas y propiedades • Glide carga de forma automática los datos de Google Sheets como un listado de elementos • Este listado muestra diferentes atributos: ◦ Título, detalles e imagen ◦ Si no hay imagen, crea una automática con el nombre
119. HERRAMIENTAS GLIDE Listas y propiedades • Podemos subir imágenes directamente en la interfaz de Glide • La imagen se sincroniza con Google Sheets • Previamente debemos haber creado una columna para almacenar la URL de la imagen • Conectamos la imagen “propiedad” del listado con la columna de Google Sheets ◦ Si no aparece, recargar
120. HERRAMIENTAS GLIDE Estructura y componentes • Tenemos varias formas de distribuir nuestros elementos en pantalla
121. HERRAMIENTAS GLIDE Estructura y componentes • Independientemente del modo elegido, al seleccionar un elemento de la lista, accedemos a vista detalle • Esta vista muestra todo el detalle de los datos que Glide ha reconocido en nuestra Google Sheet
122. HERRAMIENTAS GLIDE Estructura y componentes • Una vez entramos en vista de detalle, el panel de propiedades pasa a ser el panel de COMPONENTES • Los componentes, al igual que las propiedades, van ligados a las columnas
123. HERRAMIENTAS GLIDE Estructura y componentes • Podemos añadir tantos componentes como queramos a la vista de detalle • No estamos limitados como con las propiedades en el listado general • Hay muchos tipos de componentes diferentes
124. HERRAMIENTAS GLIDE Estructura y componentes
125. HERRAMIENTAS GLIDE Personalizar componentes • Cada componente tiene distintas propiedades • Podemos darle valor a todas, pero no es obligatorio • En base a los valores que rellenemos, la apariencia cambia
126. HERRAMIENTAS GLIDE Personalizar componentes • Hay que tener en cuenta que los cambios que hago en un elemento, se replican en el resto de la app • Si añadimos un nuevo componente, Glide intenta reconocer qué contenido del que tenemos en Google Sheets es el más adecuado ◦ Una vez recogido, podemos personalizar el aspecto, o cambiar la fuente de los datos
127. HERRAMIENTAS GLIDE Personalizar componentes • Cambiar el orden de los componentes mediante “arrastrar y soltar” • También podemos eliminar componentes de la vista de detalle ◦ Solo dejan de mostrarse, no se eliminan los datos de Google Sheets
128. HERRAMIENTAS GLIDE Relaciones • Automáticamente, Glide procesa cada fila de nuestro Google Sheets, como un nuevo elemento a listar en la app • Hay ocasiones en las que un valor, contiene a otro valor • Para tratar con estos casos, tenemos las Relaciones
129. HERRAMIENTAS GLIDE Relaciones • Tipo de columna que añadimos, para establecer enlace entre dos tablas diferentes • No enlazamos cada elemento de una tabla con todos los de la otra tabla ◦ Creamos una regla que indica cómo deben establecerse esas relaciones
130. HERRAMIENTAS GLIDE Relaciones • La columna de relación la creamos desde la interfaz de Glide, en la pestaña “Data” • Una vez dentro, vamos a “Add column”
131. HERRAMIENTAS GLIDE Relaciones • La columna de relación la creamos desde la interfaz de Glide, en la pestaña “Data” • Una vez dentro, vamos a “Add column”
132. HERRAMIENTAS GLIDE Relaciones • Determinanos: ◦ Nombre de la relación ◦ Campos que relaciona ◦ Tipo de relación
133. HERRAMIENTAS GLIDE Relaciones • Hay dos tipos de relaciones ◦ Relaciones simples ◦ Relaciones múltiples
134. HERRAMIENTAS GLIDE Relaciones SIMPLES • Pasos para crear correctamente una relación simple 1. Rellena los datos 2. Relaciona las columnas 3. Añade a la interfaz de la app un componente de tipo “Relation” 4. Relacionar elementos en la misma lista
135. HERRAMIENTAS GLIDE Relaciones SIMPLES • Rellenar los datos ◦ Es importante que los datos coincidan de forma exacta, sino Glide no será capaz de establecer la relación entre ambos
136. HERRAMIENTAS GLIDE Relaciones SIMPLES • Relacionar las columnas ◦ “Add column” ◦ Darle un nombre a la columna ◦ Seleccionar tipo “Relation” ◦ Seleccionar las columnas que deben relacionarse de cada tabla
137. HERRAMIENTAS GLIDE Relaciones SIMPLES • Añadir a la interfaz un elemento de tipo “Relation”
138. HERRAMIENTAS GLIDE Relaciones SIMPLES • También es posible relacionar elementos que estás en la misma tabla ◦ Crear en Sheets una columna indicando el valor de ese concepto ◦ Si no tienen, se puede dejar en blanco ◦ Crear nueva columna de tipo “Relation” en Data ◦ Relacionar ambas columnas de la misma table ◦ Crear en layout, componente de tipo “Relation”
139. HERRAMIENTAS GLIDE Relaciones Múltiples • Pasos para crear correctamente una relación múltiple 1. Rellena los datos 2. Relaciona las columnas 3. Marcar “Match Multiple” 4. Añade a la interfaz de la app un componente de tipo “List” 5. Relacionar elementos en la misma lista
140. HERRAMIENTAS GLIDE Relaciones Múltiples • Rellenar los datos ◦ Al igual que con las relaciones simples, es importante que los datos coincidan de forma exacta, sino Glide no será capaz de establecer la relación entre ambos
141. HERRAMIENTAS GLIDE Relaciones Múltiples • Rellenar los datos ◦ Al igual que con las relaciones simples, es importante que los datos coincidan de forma exacta, sino Glide no será capaz de establecer la relación entre ambos
142. HERRAMIENTAS GLIDE Relaciones Múltiples • Relacionar las columnas ◦ “Add column” ◦ Darle un nombre a la columna ◦ Seleccionar tipo “Relation” ◦ Seleccionar las columnas que deben relacionarse de cada tabla ◦ Importante marcar “Match multiple” ▪ Sino, solo nos devolverá el valor de la primera fila ✅
143. HERRAMIENTAS GLIDE Relaciones Múltiples • Añadir a la interfaz un componente de tipo: ◦ “Inline List” ◦ “List Relation”
144. HERRAMIENTAS GLIDE Botones • Con el Componente “Button”, podemos insertar un botón que ejecute la opción que elijamos • Hay distintos tipos de botones ◦ Normal ◦ Formulario ◦ Compra *Pro
145. HERRAMIENTAS GLIDE Botones • Con el botón normal, podemos elegir: ◦ De qué hoja debe coger los datos ◦ Forma de mostrarlo ◦ Acción a realizar al pulsarlo
146. HERRAMIENTAS GLIDE Botones • Posibles acciones a realizar con un botón ◦ Abrir como enlace ◦ Llamada de teléfono ◦ Mensaje de texto ◦ Email ◦ Enlace a otra página ◦ ...etc
147. HERRAMIENTAS GLIDE Formularios • Con el Componente “Form Button”, podemos insertar un formulario dentro de la vista de detalle de un elemento • Los datos que se rellenen aquí, irán directamente a una hoja dentro de Google Sheets
148. HERRAMIENTAS GLIDE Formularios • Tenemos dos aproximaciones ◦ Insertar datos en una hoja existente para permitir a los usuarios añadir nuevo contenido en la app ◦ Crear una hoja nueva solo para recoger información por parte de los usuarios, pero no reflejarla en la app
149. HERRAMIENTAS GLIDE Formularios • Al enviar un formulario, Glide nos permite recoger información sobre el usuario ◦ Email ◦ Fecha y hora de envío
150. HERRAMIENTAS GLIDE Formularios • Para ello, debemos crear las columnas correspondientes en Google Sheets • Después las ligamos con los tipo de componentes correspondientes, bajo “Special values”
151. HERRAMIENTAS GLIDE Formularios • Como en resto de botones, podemos personalizar el texto y forma de mostrarse
152. HERRAMIENTAS GLIDE Formularios
153. HERRAMIENTAS GLIDE Imágenes • Hay distintas consideraciones a tener en cuenta a la hora de trabajar con imágenes en Glide ◦ Layout ◦ Alojamiento ◦ Componente “Image” ◦ Carousel de imágenes ◦ Formatos de imagen
154. HERRAMIENTAS GLIDE Imágenes • Layout ◦ Casi todos los layouts cuentan con la propiedad “Imagen” ◦ El aspecto de una misma imagen cambia en función del tipo de layout que estemos usando ▪ Pueden varias entre distintas pestañas
155. HERRAMIENTAS GLIDE Imágenes • Layout ◦ También visualizamos imágenes en la vista de detalle ▪ Componentes • Componente “Image” • Componente “Title” • Componente “Markdown”
156. HERRAMIENTAS GLIDE Imágenes • Alojamiento ◦ Para poder mostrar una imagen, Glide necesita un enlace de una imagen almacenada online ◦ En los elementos de una lista, podemos arrastrar la imagen directamente ▪ En este caso, la imagen se almacena en su plataforma
157. HERRAMIENTAS GLIDE Imágenes • Alojamiento ◦ Si queremos alojarlas nosotros mismos, necesitamos un enlace de tipo compartir público (cualquiera puede ver) ◦ Si usamos Google Drive ▪ https://drive.google.com/uc?id=ID DE LA IMAGEN
158. HERRAMIENTAS GLIDE Imágenes • Componente “Image” ◦ Es la forma en la que más podemos personalizar la visualización de una imagen ▪ Size ▪ Fill ▪ Style
159. HERRAMIENTAS GLIDE Imágenes • Componente “Image” ◦ Además, podemos realizar alguna opción cuando el usuario hace tap sobre la imagen: ▪ Agrandar imagen ▪ Ir a un formulario ▪ Enlazar con otra vista de la app
160. HERRAMIENTAS GLIDE Imágenes • Carousel de imágenes ◦ Muy útil si queremos mostrar varias imágenes dentro de un mismo componente “Image” ◦ En Google Sheets, hay que nombrar todas las columnas igual (una por imagen) pero añadiendo números al final, de forma secuencial
161. HERRAMIENTAS GLIDE Imágenes • Formatos de imagen ◦ Glide reconoce imágenes en los formatos más populares: ▪ JPG ▪ PNG ▪ GIF ▪ SVG
162. HERRAMIENTAS GLIDE Imágenes • Formatos de imagen ◦ Para el icono de la app, lo mejor es utilizar un simple SVG ◦ Así, se puede escalar todo lo que haga falta sin pérdida de calidad y se mostrará bien en todos los tamaños
163. HERRAMIENTAS GLIDE Añadir, editar y borrar • Además de consumir contenido, podemos darles a los usuarios de nuestra app la posibilidad de ◦ Añadir nuevo contenido ◦ Editar contenido existente ◦ Eliminar contenido
164. HERRAMIENTAS GLIDE Añadir, editar y borrar • Editar contenido ◦ Hay componentes que son editables por defecto, aunque no hayamos habilitado la edición ▪ Choice ▪ Image Picker ▪ Notes ▪ Number field ▪ Phone field
165. HERRAMIENTAS GLIDE Añadir, editar y borrar • Editar contenido ◦ Para permitir a los usuarios editar todo el contenido, debemos ir a la vista de detalle. ◦ Pulsamos “Allow editing”
166. HERRAMIENTAS GLIDE Añadir, editar y borrar • Editar contenido ◦ Ahora podemos permitir editar todo el contenido o solo algunos componentes ◦ Glide asigna esos componentes editables de forma automática a las columnas correspondientes, pero también podríamos modificar esta asociación ◦ Estos cambios, se reflejan en la hoja de cálculo de Google Sheets
167. HERRAMIENTAS GLIDE Añadir, editar y borrar • Añadir contenido ◦ Dentro de la vista de listado, podemos permitir a nuestros usuarios añadir contenido nuevo a la aplicación ◦ Este contenido se añadirá también a la hoja de cálculo de Google Sheets
168. HERRAMIENTAS GLIDE Añadir, editar y borrar • Añadir contenido ◦ Esta funcionalidad, al igual que la de editar, va a nivel de pestaña ◦ Por tanto, podemos permitir que usuario añada contenido de un tipo concreto pero no de otro
169. HERRAMIENTAS GLIDE Añadir, editar y borrar • Valores especiales ◦ Cuando se edita o se añade un nuevo elemento, Glide puede almacenar información sobre esas acciones ◦ Se hace mediante lo que se conoce como “Special Values” ▪ Email del usuario ▪ Fecha y hora de la operación
170. HERRAMIENTAS GLIDE Añadir, editar y borrar • Valores especiales ◦ Si los añadimos, no vemos nada en la app ◦ Podemos indicarle en qué columna almacenar el valor dentro de Google Sheets ▪ Lo ideal es crear una columna al efecto
171. HERRAMIENTAS GLIDE Añadir, editar y borrar • Valores especiales ◦ Glide siempre tiene acceso a la fecha y hora del dispositivo ◦ En el caso del email del usuario, solo si: ▪ Hemos determinado que el uso de la app es público con email ▪ Hemos añadido una email whitelist ◦ No hay un histórico, siempre veremos el valor de la última edición
172. HERRAMIENTAS GLIDE Añadir, editar y borrar • Eliminar contenido ◦ Dentro de la vista de detalle marcar “Allow users to delete” ◦ Aparecerá un botón dentro de la lista de detalle para eliminar el elemento ◦ Esa información desaparecerá de Google Sheets, ¡cuidado!
173. HERRAMIENTAS GLIDE Choice • El componente “Choice” permite al usuario seleccionar un elemento de una lista de opciones • Cuando el usuario elige una opción, se actualiza la hoja de cálculo en Sheets
174. HERRAMIENTAS GLIDE Choice • Este componente requiere dos columnas en Google Sheets ◦ Una para almacenar el valor de la elección de usuario ◦ Otra que contenga la lista de opciones • Podemos pre-rellenar los datos, para que al usuario le salga una opción por defecto.
175. HERRAMIENTAS GLIDE Favorite • Este componente permite al usuario que marque sus elementos favoritos • Después puede acceder a ellos en un listado separado • Para que los favoritos se almacenen, debemos pedir que el usuario este logueado con su email
176. HERRAMIENTAS GLIDE Favorite • El componente “Favorite”, es muy simple de configurar • Solo tiene una opción que hay que especificar: Key • Esta clave tiene que ser un valor único para cada valor, que no se repita a lo largo de una columna en Sheets
177. HERRAMIENTAS GLIDE Favorite • Si no utilizamos una clave, sigue funcionando • Glide no tendrá forma de identificar el elemento en caso de que eliminemos, movamos o cambiemos contenido • El funcionamiento no será el esperado
178. HERRAMIENTAS GLIDE Vista detalle • Cada vez que hacemos tap en un elemento de una lista, se carga de forma automática su vista de detalle • En esta vista, podemos cambiar los datos que mostramos, mediante el uso de los distintos componentes
179. HERRAMIENTAS GLIDE Vista detalle • También podemos hacer que la vista de una pestaña de la aplicación, sea directamente una vista de detalle • Esto tiene sentido para una página de contacto, de about...etc ◦ Para ello tenemos que tener solo un valor en Google Sheets ◦ Sino se mostrará solamente el primero
180. HERRAMIENTAS GLIDE Vista detalle • Otros usos serían ◦ Página específica de usuario ◦ Listas múltiples
181. HERRAMIENTAS GLIDE Vista detalle • Página específica de usuario ◦ Podemos crear una página con solamente información relevante sobre el usuario logueado ◦ Asegurarnos en Google Sheets que tenemos una columna con el campo email y que todos los emails sean diferentes
182. HERRAMIENTAS GLIDE Vista detalle • Página específica de usuario ◦ La app tiene que estar configurada como “Public with email” o “Email whitelist” ◦ Indicar en la página “Filter data by user” ◦ Definir en qué columna se encuentra el email
183. HERRAMIENTAS GLIDE Vista detalle • Página específica de usuario ◦ Podemos previsualizar el contenido de la vista de detalle específica de un usuario desde la interfaz de Glide, cambiando el email
184. HERRAMIENTAS GLIDE Vista detalle • Listas múltiples ◦ Cuando seleccionamos un layout, únicamente vemos un tipo de lista ◦ Dentro de la vista de detalle, podemos crear layouts más complejos, incluyendo múltiples listados diferentes ◦ Cada uno de estos listados puede tener su propio layout diferente
185. HERRAMIENTAS GLIDE Vista Mapa • Gracias a la vista de mapa es posible mostrar información relativa a localización dentro de nuestra app • El “Map layout”, muestra cada elemento de la lista como un “pin” dentro de un mapa • Podemos alternar si queremos ver primero mapa o listado de pines
186. HERRAMIENTAS GLIDE Vista Mapa • Es necesario que en la hoja de cálculo tengamos almacenadas direcciones correctas • Además de la dirección, que es obligatoria, podemos configurar alguna propiedad más: ◦ Título ◦ Detalles ◦ Imagen ◦ Notas
187. HERRAMIENTAS GLIDE Vista Calendario • La vista de calendario muestra una serie de elementos ordenados por fecha • Interesante para mostrar información en la que la fecha sea una información relevante.
188. HERRAMIENTAS GLIDE Vista Calendario • Para poder utilizar esta vista, en Google Sheets debemos tener una columna con datos de fechas • El formato a utilizar debe ser el siguiente: ◦ MM/DD/YYYY HH:MM AM/PM ◦ Si no introducimos la hora, el calendario mostrará 12:00 AM • Se puede utilizar como un componente dentro de la vista de detalle de otro elemento
189. HERRAMIENTAS GLIDE DATA EDITOR • Las hojas de cálculo son muy útiles para almacenar datos • Hay tareas que no podemos realizar con ellas, más allá de cosas simples como buscar o filtrar
190. HERRAMIENTAS GLIDE DATA EDITOR • Gracias a Glide, y a su Data Editor, vamos a poder realizar funcionalidades más avanzadas sobre esos mismos datos que tenemos almacenados ◦ Relacionar datos entre sí ◦ Utilizar templates ◦ Condicionales ◦ ...etc.
191. HERRAMIENTAS GLIDE DATA EDITOR Template Column • Podemos componer textos basándonos en los valores que tengamos en otras columnas • Estos textos compuestos cambiarán de forma dinámica junto con el contenido del que se componen
192. HERRAMIENTAS GLIDE DATA EDITOR Template Column • Especificamos el texto que queremos que aparezca, acompañado de la variable que vamos a sustituir por valores reales de la app • Podemos ponerlo en mayúscula para tener claro que es una variable, pero no es imprescindible • Se pueden crear textos compuestos por valores de diferentes columnas
193. HERRAMIENTAS GLIDE DATA EDITOR Template Column
194. HERRAMIENTAS GLIDE DATA EDITOR Single Value Column • A veces puede que queramos que un mismo valor se muestre para todos los elementos • La primera opción sería replicar esa contenido (Copiar y pegar), para esa columna en todas las filas
195. HERRAMIENTAS GLIDE DATA EDITOR Single Value Column • El principal problema es que si surgen nuevos items en nuestro listado, habrá que volver a replicar ese contenido de nuevo. • Si ese contenido común cambia, tendremos que cambiarlo para todos los items.
196. HERRAMIENTAS GLIDE DATA EDITOR Single Value Column • La opción “Single Value Column” nos va a permitir rellenar todas las celdas de una columna, con el mismo valor que le indiquemos. • Tenemos que crear una nueva hoja dentro de la hoja de cálculo ◦ Una única columna ◦ Valor a compartir debe ir en la primera fila tras el encabezado
197. HERRAMIENTAS GLIDE DATA EDITOR Single Value Column • La opción “Single Value Column” nos va a permitir rellenar todas las celdas de una columna, con el mismo valor que le indiquemos. • Tenemos que crear una nueva hoja dentro de la hoja de cálculo ◦ Una única columna ◦ Valor a compartir debe ir en la primera fila tras el encabezado
198. HERRAMIENTAS GLIDE DATA EDITOR Single Value Column • A partir de aquí, solo habrá que hacer los cambios una única vez y se replicará en todas las celdas de la columna correspondiente
199. HERRAMIENTAS GLIDE DATA EDITOR IF/THEN/ELSE COLUMN • Vamos a poder cargar contenido de forma condicional, en función del valor existente en otras celdas • Se puede aplicar a valores de tipo: ◦ Texto ◦ Número ◦ Fecha ◦ Switch (TRUE/FALSE)
200. HERRAMIENTAS GLIDE DATA EDITOR IF/THEN/ELSE COLUMN • Podemos tener varios IF/ELSE anidados • Las opciones de comparación varían en función de la naturaleza de los datos tratados
201. HERRAMIENTAS GLIDE DATA EDITOR LOOKUP COLUMN • Similar a “RELATION COLUMN” pero diferente • De hecho, LOOKUP funciona a través de una relación, no podemos utilizarlo sin tener creada una relación previamente
202. HERRAMIENTAS GLIDE DATA EDITOR LOOKUP COLUMN • Con una relación relacionamos dos tablas, y podemos acceder a todos los datos de un campo en la tabla relacionada, mediante una pulsación • En el caso de LOOKUP, traemos una columna concreta de esa relación, y lo mostramos directamente, sin navegar hacia él.
203. HERRAMIENTAS GLIDE DATA EDITOR LOOKUP COLUMN • Con una relación relacionamos dos tablas, y podemos acceder a todos los datos de un campo en la tabla relacionada, mediante una pulsación • En el caso de LOOKUP, traemos una columna concreta de esa relación, y lo mostramos directamente, sin navegar hacia él.
204. HERRAMIENTAS GLIDE Instalar la app • La aplicación creada en Glide puede “instalarse” tanto en iOS como en Android • Para ello, se añade un acceso directo en la homescreen del dispositivo
205. HERRAMIENTAS GLIDE Instalar la app • En iOS, Glide nos saca un aviso con las indicaciones necesarias: ◦ Pulsar en el botón de compartir dentro de Safari ◦ Pulsar “Añadir a pantalla de inicio”
206. HERRAMIENTAS GLIDE Instalar la app • En iOS, Glide nos saca un aviso con las indicaciones necesarias: ◦ Pulsar en el botón de compartir dentro de Safari ◦ Pulsar “Añadir a pantalla de inicio”
207. HERRAMIENTAS GLIDE Instalar la app • En Android (Chrome), nos saca de forma nativa un aviso para poder añadir la app a la pantalla de inicio de forma automática:
208. HERRAMIENTAS GLIDE Instalar la app • En muchos smartphone de última generación, las cámaras reconocen códigos QR • Podemos compartir la app mediante un código QR que genera Glide automáticamente por nosotros.
209. HERRAMIENTAS GLIDE Instalar la app • Para acceder a él, podemos ir a la opción de menú “Share app” • Además, si abrimos en navegador (open app in browser), veremos la app como la ve el usuario, sin opciones de editar la aplicación
210. HERRAMIENTAS GLIDE Instalar la app • Podemos modificar la url de la app antes de compartir el enlace
211. HERRAMIENTAS GLIDE Publicar y compartir • Podemos compartir la app mediante un enlace o QR como comentábamos anteriormente • Si lo estimamos oportuno, existe la posibilidad de permitir a cualquier usuario que duplique nuestra app (y Google Sheet), de forma que funcione como una plantilla
212. Desarrollo de prototipo funcional de una app con Glide y Protopie PRÁCTICA 03
213. ESKERRIK ASKO! ¿Any Questions? @itermar / imanol@itermar.io / https://itermar.io