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

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.

6c68edbaa40e50a0420ee1c125d17189?s=128

Imanol Terán

October 29, 2019
Tweet

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