AppGyver. Desarrollo de apps multiplataforma profesionales sin código

Las herramientas “No-code” siguen avanzando con fuerza y de forma muy rápida. Cada día hay nuevas apps y servicios que nos permiten conseguir resultados profesionales con muy poco esfuerzo y, sin apenas conocimientos previos. En este curso aprenderemos a desarrollar aplicaciones nativas multiplataforma. Y no solo hablamos de apps para iOS y para Android, sino que también podremos hacer apps para escritorio, navegador o incluso TV.

Se trata de AppGyver; una herramienta gratuita y online, con una interfaz gráfica muy cuidada, intuitiva y sencilla de utilizar.

No importa el tipo de app que quieras desarrollar o si necesitas traer tus datos desde servidores o servicios externos. Con AppGyver, puedes hacerlo.

Transcript

1. imanolteran.com APPGYVER Desarrollo de apps multiplataforma sin código. AppGyver
2. AppGyver imanolteran.com HOLA, SOY IMANOL DESARROLLADOR WEB CONSULTOR DE ESTRATEGIA DIGITAL FORMADOR EN NUEVAS TECNOLOGÍAS hola@imanolteran.com @imanolteran
3. AppGyver imanolteran.com PODCAST SI DUDAS, HAZLO Spotify Apple Podcasts Google Podcasts imanolteran.com OBS Studio
4. AppGyver imanolteran.com OTROS PROYECTOS DE FORMACIÓN ACADEMIADEPRODUCTIVIDAD.COM REMOTEWORKTOOLS.ES NOCODETOOLS.ES
5. imanolteran.com 1. Introducción 2. Apps multiplataforma 3. Manejo y uso de la herramienta 4. Prácticas índice AppGyver
6. imanolteran.com 01 Introducción Pongámonos en situación AppGyver
7. AppGyver imanolteran.com • Cada vez es más importante tener conocimientos de programación. • Independientemente del sector. • Cada vez se está introduciendo más en educación. • Desde edades más tempranas. Introducción 01 7
8. AppGyver imanolteran.com • En los centros educativos se habla de conceptos como: • Lógica computacional. • Pensamiento analítico. • Trabajo por proyectos. • Learn by doing. Introducción 01 8
9. AppGyver imanolteran.com • Proyectos para aprender programación desde edades tempranas: • Swift Playgrounds. • Scratch. • code.org. • Code Monster. • Khan Academy. Introducción 01 9
10. AppGyver imanolteran.com • Es muy útil conocer cómo funcionan los sistemas de software. • Conceptos computacionales básicos: • Operaciones lógicas. • Condicionales. • Bucles. • …etc. Introducción 01 10
11. AppGyver imanolteran.com • Aún así, no en todos los proyectos es necesario ponerlo en práctica • Es el caso de las herramientas “no-code” • Creación de soluciones software sin introducir código de programación. Introducción 01 11
12. AppGyver imanolteran.com • Herramientas web o de escritorio que permiten desarrollar aplicaciones software sin tocar una sola línea de código. • Con ellas, podemos desarrollar software para uso profesional. • También son muy útiles para crear MVPs y validar/ descartar ideas. Introducción 01 12
13. AppGyver imanolteran.com
14. AppGyver imanolteran.com Introducción 01 14 VOLUMEN DE MERCADO EN 2015 $ 1.700M
15. AppGyver imanolteran.com Introducción 01 15 VOLUMEN DE MERCADO EN 2020 $ 21.000M
16. AppGyver imanolteran.com Introducción 01 16 INGRESOS ANUAL PARA PROVEEDORES SOLUCIONES NO-CODE ↑50%
17. AppGyver imanolteran.com Introducción 01 17 ESTIMACIÓN DE CRECIMIENTOS ANUALES ↑40%
18. AppGyver imanolteran.com Introducción 01 18 DE APPS DESARROLLADAS CON HERRAMIENTAS NO-CODE EN 2024 65%
19. AppGyver imanolteran.com • Desarrollo rápido. • Lo haces tú mismo. • Ahorro de tiempo. • Ahorro económico. • Validar ideas. • Control sobre el proceso. Introducción 01 19 VENTAJAS DEL NO-CODE
20. AppGyver imanolteran.com • Dependencia de las herramientas. • Efecto “Lock-in” • Límites a la hora de personalizar. • Límites de integración con otros servicios. • Falta de control. Introducción 01 20 INCONVENIENTES DEL NO-CODE
21. imanolteran.com 02Apps multiplataforma Crea una vez, distribuye donde quieras. AppGyver
22. AppGyver imanolteran.com • A la hora de plantear el desarrollo de una app, tenemos dos opciones principales: • App nativa. • Webapp. Apps multiplataformna 02 22
23. AppGyver imanolteran.com • iOS y Android. • Desarrolladas con APIs de Google y Apple. • IDE de desarrollo: • Xcode, Android Studio. • Lenguaje de desarrollo: • Swift, Java, JavaScript… 23 APP NATIVA Apps multiplataformna 02
24. AppGyver imanolteran.com • 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. • O con frameworks específicos. 24 APP NATIVA Apps multiplataformna 02
25. AppGyver imanolteran.com • 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. • Tiempo de ejecución de proyecto altos. 25 APP NATIVA Apps multiplataformna 02
26. AppGyver imanolteran.com • Hay otra vía, que es la de aprovechar nuestros conocimientos en desarrollo web (en caso de tenerlos). • Podemos construir apps de la misma forma que creamos páginas web. • Lenguajes: HTML, CSS, JavaScript. 26 APP NATIVA Apps multiplataformna 02
27. AppGyver imanolteran.com Las aplicaciones móviles multiplataforma son aquellas que se desarrollan en un lenguaje de programación general y que luego se puede “Compilar” o “Exportar” a cualquier plataforma o dispositivo con unos cambios mínimos. WIKIPEDIA
28. AppGyver imanolteran.com • Es una manera de abaratar costes de desarrollo y mantenimiento. • Generar aplicaciones móviles de forma nativa implica programar en diferentes lenguajes y entornos para cada sistema operativo. 28 WEB APP Apps multiplataformna 02
29. AppGyver imanolteran.com • Para crear apps multiplataforma, utilizamos lenguaje HTML5. • En este caso, con AppGyver no nos vamos a preocupar del código, pero siempre es interesante saber qué está pasando “por detrás”. • AppGyver genera apps utilizando el framework React Native. 29 WEB APP Apps multiplataformna 02
30. AppGyver imanolteran.com • De todas formas, si tenemos conocimientos de HTML y CSS, nos vendrán bien. • Los valores de muchas configuraciones, podremos definirlos con CSS. 30 WEB APP Apps multiplataformna 02
31. AppGyver imanolteran.com • El desarrollo de apps híbridas tiene una serie de ventajas frente al desarrollo nativo. • Desarrollo unificado. • Soporte offline. • Menores costes. • Facilidad de mantenimiento. 31 WEB APP > VENTAJAS Apps multiplataformna 02
32. AppGyver imanolteran.com • El desarrollo de apps híbridas tiene una serie de ventajas frente al desarrollo nativo. • Requerimientos mínimos: • HTML, CSS, JavaScript. • Herramientas no-code. 32 WEB APP > VENTAJAS Apps multiplataformna 02
33. AppGyver imanolteran.com • Facebook. • Twitter. • Instagram. • Evernote. • UBER. • Gmail. 33 WEB APP > EJEMPLOS Apps multiplataformna 02
34. imanolteran.com 03Manejo Y uso de la herramienta AppGyver
35. AppGyver imanolteran.com • Al crear un nuevo proyecto, nos encontramos con el “App Builder”. • Herramienta 100% online. • Navegadores soportados: • Safari. • Chrome. • Otros pueden funcionar, pero no se asegura comportamiento 100% fiable. Manejo y uso 03 35
36. AppGyver imanolteran.com • Resolución de pantalla mínima recomendada: • 1250 px de ancho. Manejo y uso 03 36
37. AppGyver imanolteran.com • Foros de soporte. • Documentación oficial. • Estado y peticiones nuevas funcionalidades. Manejo y uso 03 37 TUTORIALES, SOPORTE Y AYUDA
38. AppGyver imanolteran.com
39. AppGyver imanolteran.com • El App Builder consta de una serie de elementos de interfaz principales. • Barra de herramientas. • Zona de la vista. • Zona de lógica. • Barra lateral izquierda. • Barra lateral derecha. Manejo y uso 03 39 INTERFAZ GRÁFICA
40. AppGyver imanolteran.com • Funcionalidades: • Editar nombre del proyecto. • Cambiar página activa. • Acceso a herramientas globales. • Guardar y recuperar cambios. • Salir de la app actual. • Mostrar mensajes de información y error. Manejo y uso 03 40 INTERFAZ GRÁFICA > BARRA DE HERRAMIENTAS
41. AppGyver imanolteran.com • Launch: • Preview • Acceso a la app para previsualizar nuestro desarrollo. • Distribute • Creación y configuración de archivos para despliegue a las diferentes plataformas. Manejo y uso 03 41 INTERFAZ GRÁFICA > BARRA DE HERRAMIENTAS
42. AppGyver imanolteran.com Manejo y uso 03 42 INTERFAZ GRÁFICA > BARRA DE HERRAMIENTAS • Theme: • Theme • Definimos valores para las variables de aspecto de la app. • Valores relacionados con CSS. • Fonts • Añadir fuentes personalizadas.
43. AppGyver imanolteran.com Manejo y uso 03 43 INTERFAZ GRÁFICA > BARRA DE HERRAMIENTAS • Navigation: • Aquí gestionamos el menú de navegación nativo. • Podemos deshabilitarlo, para apps a pantalla completa. • También indicamos comportamiento de la cabecera de página.
44. AppGyver imanolteran.com Manejo y uso 03 44 INTERFAZ GRÁFICA > BARRA DE HERRAMIENTAS • Data: • Desde esta pestaña configuramos todo lo relativo a las diferentes fuentes de datos de la app.
45. AppGyver imanolteran.com Manejo y uso 03 45 INTERFAZ GRÁFICA > BARRA DE HERRAMIENTAS • Auth: • Si queremos requerir algún método de autenticación para nuestra app, hay que definirlo aquí. • Al habilitarlo, las páginas necesarias para gestionarlo, se crean de forma automática. • Initial View
46. AppGyver imanolteran.com Manejo y uso 03 46 INTERFAZ GRÁFICA > BARRA DE HERRAMIENTAS • Community: • Documentación oficial. • Foros. • Historial de cambios de la plataforma. • Feedback cambios y bugs. • Estado de la plataforma.
47. AppGyver imanolteran.com Manejo y uso 03 47 INTERFAZ GRÁFICA > ZONA DE LA VISTA • Representación WYSIWYG de la UI de la app. • View Canvas toolbar. • Header configuration. • View Canvas.
48. AppGyver imanolteran.com Manejo y uso 03 48 INTERFAZ GRÁFICA > ZONA DE LA VISTA • Manejo y selección visual de los elementos de la interfaz. • Acceso a los diferentes tipos de variables. • Selector de dispositivo para previsualización.
49. AppGyver imanolteran.com Manejo y uso 03 49 INTERFAZ GRÁFICA > ZONA DE LA VISTA • Para personalizar la apariencia de nuestros componentes, debemos entrar en “Isolation mode”. • De esta forma podemos añadir, quitar elementos…y darle los estilos que queramos.
50. AppGyver imanolteran.com Manejo y uso 03 50 INTERFAZ GRÁFICA > ZONA DE LA VISTA • Después podremos guardarlos: • Clone as new View Component. • Aparecen en la pestaña “By Me”. • Solamente disponible para utilizar en la app activa.
51. AppGyver imanolteran.com Manejo y uso 03 51 INTERFAZ GRÁFICA > ZONA DE LÓGICA • Se sitúa en la zona inferior del Canvas View. • Por defecto está oculto. • Seleccionar elemento o la página actual. • Pulsar en el botón “Add logic” • Aquí construimos toda la funcionalidad de la app.
52. AppGyver imanolteran.com Manejo y uso 03 52 INTERFAZ GRÁFICA > ZONA IZQUIERDA • Aquí encontramos la librería de componentes. • También podemos instalar nuevos componentes desde el “Component Market” • Y compartir los nuestros propios.
53. AppGyver imanolteran.com Manejo y uso 03 53 INTERFAZ GRÁFICA > ZONA IZQUIERDA • Para añadir un nuevo elemento en la interfaz de nuestra app, solo tenemos que “arrastrar y soltar”. • Encontramos diferentes tipos de componentes en el marketplace: • View Component. • Flow function. • Theme. • Page template. • Data connector.
54. AppGyver imanolteran.com Manejo y uso 03 54 INTERFAZ GRÁFICA > ZONA DERECHA • Aquí también manejamos los estilos de los elementos de interfaz. • Podemos guardar estilos para aplicar a elementos similares. • Reutilizar elementos. • Shared styles.
55. AppGyver imanolteran.com Manejo y uso 03 55 INTERFAZ GRÁFICA > ZONA DERECHA • También es el lugar desde el cual asignamos valores a nivel de contenido, a los distintos elementos de la interfaz. • Valores estáticos. • Fórmulas. • Valores desde variables. • …
56. AppGyver imanolteran.com
57. AppGyver imanolteran.com • Además de los componentes disponibles de serie, podemos añadir nuevos. • Hay que convertir un contenedor en un componente compuesto. • Después podremos reutilizarlos. • Podemos publicarlos en el marketplace, para compartirlos con otras personas. Manejo y uso 03 57 COMPONENTES
58. AppGyver imanolteran.com • Crear un nuevo componente. • Seleccionar un contenedor. • Al final del panel de propiedades: • “Turn into a new view component” Manejo y uso 03 58 COMPONENTES
59. AppGyver imanolteran.com • Crear un nuevo componente. • Una vez hecho esto, entramos en el “Isolation mode”. • Para editar cualquier componente compuesto, hacemos doble click sobre él y entramos en el citado modo. Manejo y uso 03 59 COMPONENTES
60. AppGyver imanolteran.com • Isolation mode: • Este modo nos permite editar la estructura y propiedades de un componente compuesto de forma independiente al resto de la vista. Manejo y uso 03 60 COMPONENTES
61. AppGyver imanolteran.com • Para cualquier componente compuesto, hay 3 aspectos a considerar: • Estructura. • Propiedades. • Lógica. Manejo y uso 03 61 COMPONENTES
62. AppGyver imanolteran.com • Funciona igual que en el view canvas. • Arrastramos objetos y definimos: • Propiedades. • Estilos. • Podemos anidar contenedores para crear interfaces más complejas. Manejo y uso 03 62 COMPONENTES > ESTRUCTURA
63. AppGyver imanolteran.com • Los componentes compuestos solo tienen una propiedad: visibilidad. • El resto de propiedades van a nivel de los elementos que componen la interfaz. Manejo y uso 03 63 COMPONENTES > PROPIEDADES
64. AppGyver imanolteran.com • En “Isolation mode”, editamos la lógica interna del componente. • Afecta a todas las instancias del componente. • No tiene conocimiento del resto de cosas que están ocurriendo en la app. Manejo y uso 03 64 COMPONENTES > LÓGICA INTERNA
65. AppGyver imanolteran.com
66. AppGyver imanolteran.com • Gracias a los themes podemos personalizar el aspecto de nuestra app de forma centralizada. • Lo haremos mediante las theme variables. • Variables globales compuestas por un nombre significativo y un valor asignado. • Van precedidas del símbolo $. Manejo y uso 03 66 THEMES
67. AppGyver imanolteran.com • Esta herramienta nos permite cambiar el aspecto de la app sin tener que modificar cada componente uno a uno. • Para ello, al editar los componentes, tendremos que asignar valores en forma de variable, y no valores absolutos. Manejo y uso 03 67 THEMES
68. AppGyver imanolteran.com • Las theme variables siguen una estructura jerárquica. • Por lo tanto, para hacer cambios en la app, bastará con modificar el valor de unas pocas variables. • Las que dependen de ellas, heredarán esos valores. • Podemos modificar esas relaciones. • El tipo de valor asignado tiene que ser el mismo. Manejo y uso 03 68 THEMES
69. AppGyver imanolteran.com • A una theme variable, también podremos asignarle un valor mediante una fórmula. • $colorInformativeTint = DARKEN(theme. $colorInformative, 0.05) • No hay limitaciones en cuanto al uso de fórmulas. • Estilos pueden cambiar por tamaño de pantalla, sistema operativo…etc. • IF(systemVars.os==“iOS”, 12, 18) Manejo y uso 03 69 THEMES
70. AppGyver imanolteran.com • Una buena práctica es acostumbrarse a asignar los componentes de nuestra interfaz con roles semánticos. • Así podremos modifica el aspecto de la app fácilmente. • Funcionará correctamente con otros themes, incluso de terceros. Manejo y uso 03 70 THEMES
71. AppGyver imanolteran.com • Para modificar el aspecto de nuestro theme, lo hacemos desde el Theme Editor. • Edit theme with preview. • Core theme variables. • All theme variables. • Crear theme variables propias. Manejo y uso 03 71 THEMES
72. AppGyver imanolteran.com
73. AppGyver imanolteran.com • Para previsualizar la app, podemos hacerlo en la zona de Canvas. • Ahí solo vemos el diseño de una pantalla. • No podemos hacer cosas como: • Navegación. • Interacción. • Carga de datos. Manejo y uso 03 73 PREVISUALIZACIÓN
74. AppGyver imanolteran.com • Tenemos dos opciones. • Previsualizar en navegador web. • Previsualizar en dispositivo móvil real. Manejo y uso 03 74 PREVISUALIZACIÓN
75. AppGyver imanolteran.com • Debemos instalar en nuestro dispositivo móvil la app de AppGyver. • Android Play Store. • iOS App Store. • macOS App Store. • Hay que loguearse en la app con el mismo usuario que estamos registrados en Composer. Manejo y uso 03 75 PREVISUALIZACIÓN
76. AppGyver imanolteran.com • Todo cambio que hagamos en la app, se actualiza de forma automática en el previsualizador. Manejo y uso 03 76 PREVISUALIZACIÓN
77. AppGyver imanolteran.com • Podemos indicar a cada componente cómo ha de comportarse en cada momento, en base a lo que esté ocurriendo en la app (eventos). • Hay una librería de acciones y un marketplace al igual que con los componentes. Manejo y uso 03 77 LÓGICA DE LA APLICACIÓN
78. AppGyver imanolteran.com • Para desplegar el panel, hay que seleccionar el componente al que queramos asignarle un comportamiento y pulsar en la parte inferior “Add logic to nombre elemento”. • Arrastramos elementos, unimos entre ellos y asignamos valores a sus propiedades. Manejo y uso 03 78 LÓGICA DE LA APLICACIÓN
79. AppGyver imanolteran.com • Las acciones pueden tener una o varias salidas. • Hay que tener en cuenta a qué salida asociamos los siguientes pasos. • Podemos obtener valores obtenidos en pasos previos. Manejo y uso 03 79 LÓGICA DE LA APLICACIÓN
80. AppGyver imanolteran.com
81. AppGyver imanolteran.com • Desde la pestaña Auth, tenemos opción de añadir sistema de login a nuestra app: • Hay 3 métodos diferentes: • AppGyver hosted user management • Hosted custom auth integration * Plan de Empresa • Direct third party authentication. Manejo y uso 03 81 AUTENTICACIÓN
82. AppGyver imanolteran.com • AppGyver hosted user management. • Backend propio de AppGyver • Hosted custom auth integration. • Soporte para backend de terceros • Direct third party authentication. • Integración personalizada Manejo y uso 03 82 AUTENTICACIÓN
83. AppGyver imanolteran.com • Las 3 opciones: • Crea automáticamente las vistas necesarias. • Crea las variables para almacenar datos de usuario…etc. • Cambia la vista inicial. • AppGyver hosted y Hosted custom: • Crea funciones para la autenticación. Manejo y uso 03 83 AUTENTICACIÓN
84. AppGyver imanolteran.com • Tutorial de ejemplo para construir un Authentication personalizada con Bubble. • https://forums.appgyver.com/t/tutorial-how-to-setup-3rd-party-authentication-using- bubble-as-an-example-backend/1233/2 Manejo y uso 03 84 AUTENTICACIÓN
85. AppGyver imanolteran.com
86. AppGyver imanolteran.com
87. AppGyver imanolteran.com • Para acceder a la configuración de variables, tenemos que usar el selector de la parte central superior. Manejo y uso 03 87 VARIABLES
88. AppGyver imanolteran.com • Hay diferentes tipos de variables: • Data variables. • Page variables. • Page parameters. • App variables. • Translation variables. Manejo y uso 03 88 VARIABLES
89. AppGyver imanolteran.com • Todos los tipos de variables tienen un esquema, que define su estructura: • String. • Número. • Booleano. • Array de objetos. Manejo y uso 03 89 VARIABLES
90. AppGyver imanolteran.com • Las data variables difieren ligeramente del resto de tipos de variables. • Su esquema se define en el configurado de DATA. Manejo y uso 03 90 VARIABLES > DATA VARIABLES
91. AppGyver imanolteran.com • En realidad, son como page variables que cuentan con un esquema específico. • Al añadir una nueva data variable, la lógica que recoge los datos del backend y rellena la variable, se crea de forma automática. • Las de tipo “New” se inicializan como objetos vacíos. Manejo y uso 03 91 VARIABLES > DATA VARIABLES
92. AppGyver imanolteran.com • Este tipo de variable nos permite definir diferentes traducciones para valores de texto. • Sólo esta disponible para plan Enterprise. Manejo y uso 03 92 VARIABLES > TRANSLATION VARIABLES
93. AppGyver imanolteran.com
94. AppGyver imanolteran.com • Podemos almacenar y consultar datos en nuestra app de diferentes maneras: • Client-side (en el propio dispositivo). • REST API (datos externos). • AppGyver Cloud Storage (para pruebas). • AppGyver Cloud Integration. • Marketplace Search. Manejo y uso 03 94 ALMACENAMIENTO DE DATOS
95. AppGyver imanolteran.com • Siempre que queramos utilizar una fuente de datos, debemos crear un Data Variable. • Ha de referenciar a la fuente de datos que hayamos creado. • Indicamos qué queremos hacer con ella: • Recibir una colección de datos. • Recibir un único datos. • Escribir valores. Manejo y uso 03 95 ALMACENAMIENTO DE DATOS
96. AppGyver imanolteran.com • Cuando recibimos datos, podemos configurar filtros o criterios de ordenación. Manejo y uso 03 96 ALMACENAMIENTO DE DATOS
97. AppGyver imanolteran.com • Dependiendo de la app, puede que queramos guardar los datos en local, sin utilizar ningún backend. • Muy útil para prototipar. • Lo gestionamos desde la pestaña “Data” • Add data resource. • Client-side-storage Manejo y uso 03 97 ALMACENAMIENTO DE DATOS
98. AppGyver imanolteran.com • Añadimos nombre y descripción • Añadimos las diferentes propiedades que vaya a tener ese tipo de dato. • Para cada propiedad, además del nombre y la descripción, es importante indicar el tipo de dato • String • Booleano • Número • ..etc. Manejo y uso 03 98 ALMACENAMIENTO DE DATOS
99. AppGyver imanolteran.com • Cambiamos de la pestaña “View” a “Variables” • Aquí almacenamos datos en tiempo de ejecución de la app. • Se guardan en memoria. • Hay distintos tipos de variables: • Data Variables. • Page Variables. • App Variables. Manejo y uso 03 99 ALMACENAMIENTO DE DATOS
100. AppGyver imanolteran.com • En los distintos elementos podemos cargar información estática o hacer un “binding”. • Carga de datos dinámica. • También podemos generar datos dinámicos mediante fórmulas. Manejo y uso 03 100 ALMACENAMIENTO DE DATOS
101. AppGyver imanolteran.com • Podemos traer datos de diferentes servicios externos. • En este caso, los datos son independientes del contexto de ejecución de la app. • También pueden estar almacenados en el propio dispositivo. Manejo y uso 03 101 CONSUMO DE DATOS EXTERNOS
102. AppGyver imanolteran.com • Lo malo es que estos datos no se pueden compartir con diferentes dispositivos. • AppGyver también ofrece planes de almacenamiento en la nube. • Suelen ser más interesantes servicios de consumo de datos vía API REST. Manejo y uso 03 102 CONSUMO DE DATOS EXTERNOS
103. AppGyver imanolteran.com • En primer lugar hay que definir una fuente de datos. • https://docs.appgyver.com/data/configuring- data-resources Manejo y uso 03 103 CONSUMO DE DATOS EXTERNOS
104. AppGyver imanolteran.com • APIs externas públicas. • https://github.com/public-apis/public-apis • https://rapidapi.com/collection/list-of-free-apis • https://any-api.com • https://apilist.fun Manejo y uso 03 104 CONSUMO DE DATOS EXTERNOS
105. AppGyver imanolteran.com • WordPress. • https://developer.wordpress.org/rest-api/ • https://tudominio/wp-json/wp/v2/post_type • Podéis probar los resultados, utilizando POSTMAN Manejo y uso 03 105 CONSUMO DE DATOS EXTERNOS
106. AppGyver imanolteran.com • La mejor forma de utilizar fuentes de datos externos es mediante data variables. • Se añaden a una página desde “Variable editor”. • Contienen lógica para rellenarse a sí mismas con datos desde la fuente. • Su esquema de datos siempre es el mismo que el de la fuente. Manejo y uso 03 106 CONSUMO DE DATOS EXTERNOS
107. AppGyver imanolteran.com • Existen 3 tipos de data variables: • Colección de registros. • Registro único. • Nuevo registro. Manejo y uso 03 107 CONSUMO DE DATOS EXTERNOS
108. AppGyver imanolteran.com • Colección de registros: • Nos da acceso a múltiples registros de la fuente de datos. • Se devuelve como un array de objetos. • Dependiendo de la API de la fuente, podremos acceder a determinadas propiedades. Manejo y uso 03 108 CONSUMO DE DATOS EXTERNOS
109. AppGyver imanolteran.com • Registro único • Accedemos a un único elemento de la fuente de datos. • Debemos contar alguna propiedad que defina a un objeto de forma única. • Tipo de dato devuelto es un objeto. Manejo y uso 03 109 CONSUMO DE DATOS EXTERNOS
110. AppGyver imanolteran.com • Nuevo registro • Define un objeto vacío, el cual aún no hemos añadido a nuestra BBDD. • Se diferencia del anterior, en que no tiene la lógica para recibir datos de la fuente, está vacío. • Útiles para formularios, para hacer un binding de lo introducido a la data variable. Manejo y uso 03 110 CONSUMO DE DATOS EXTERNOS
111. AppGyver imanolteran.com • Una funcionalidad muy utilizada es la de cargar una vista de detalle, al pulsar en un elemento determinado. • Tenemos que navegar entre páginas, llevando con nosotros esos datos para poder mostrarlos en la vista de destino. Manejo y uso 03 111 NAVEGACIÓN
112. AppGyver imanolteran.com • Volver atrás: • Para volver atrás, pulsamos el botón “atrás” generado de forma automática. • También podemos utilizar la función “Navigate back” en el editor de Lógica. • Si queremos retroceder varias páginas lo indicamos en el parámetro “Number of pages”. Manejo y uso 03 112 NAVEGACIÓN
113. AppGyver imanolteran.com • Pila de navegación • AppGyver gestiona la navegación mediante el concepto de “pila de navegación”. • Existe una página raíz a partir de la cual pueden ir abriéndose otras. • Si llamamos a la función “Navigate back” desde la página raíz, no ocurre nada. Manejo y uso 03 113 NAVEGACIÓN
114. AppGyver imanolteran.com • Pila de navegación • En apps con barra de pestañas, cada pestaña tiene su propia pila de navegación. • Aunque cambiemos de pestaña, cada una mantiene su estado. • Para volver al principio, tenemos la función “Navigate back to root”. Manejo y uso 03 114 NAVEGACIÓN
115. AppGyver imanolteran.com • Pila de navegación • En web, funciona el historial del navegador incluso entre pestañas. • Si pasamos de una pestaña a otra y pulsamos el botón “atrás” del navegador, volvemos a la pestaña anterior. Manejo y uso 03 115 NAVEGACIÓN
116. AppGyver imanolteran.com • Vista detalle • Cuando listamos una serie de elementos, normalmente queremos poder acceder al detalle de cada uno de ellos. • Al crear el listado, seleccionamos el primer elemento y vamos al editor de lógica. Manejo y uso 03 116 NAVEGACIÓN
117. AppGyver imanolteran.com • Vista detalle • Utilizamos el elemento “Open Page” y lo enlazamos al tap sobre el elemento de la lista. • En las propiedades del “Open Page”: • Page: seleccionar página de detalle (hay que crearla). • Params: id (currently repeated value). Manejo y uso 03 117 NAVEGACIÓN
118. AppGyver imanolteran.com • Vista detalle • En la página de detalle, añadimos los componentes de interfaz que necesitemos. Manejo y uso 03 118 NAVEGACIÓN
119. AppGyver imanolteran.com • Vista detalle • Para hacer el binding, hay que crear dos variables: • Page parameter: id de tipo String. • Data variable: single data record, del tipo de dato listado, y como id el page parameter value id. Manejo y uso 03 119 NAVEGACIÓN
120. AppGyver imanolteran.com • Búsqueda • Crear variable de página. • Añadir campo búsqueda en la interfaz. • Asignamos la propiedad “value” del campo a la page variable. • Seleccionar list item del listado. Manejo y uso 03 120 NAVEGACIÓN
121. AppGyver imanolteran.com • Búsqueda • Igualamos su propiedad “Visible” a la siguiente fórmula: • CONTAINS(LOWERCASE(current.nombre_campo), LOWERCASE(pageVars.nombre_page_variable)) • Así solo mostramos los elementos cuyo nombre coincida con lo escrito en el campo de búsqueda. Manejo y uso 03 121 NAVEGACIÓN
122. AppGyver imanolteran.com • Añadir nuevos elementos • Crear page variables para cada campo de entrada. • Crear página con listado. • Utilizar “Repeat with the property” ID del recurso • Seleccionar valor de Data Variable. Manejo y uso 03 122 NAVEGACIÓN
123. AppGyver imanolteran.com • Añadir nuevos elementos • Crear página con campos de formulario. • Crear campos de entrada y asignar sus valores a las page variables. Manejo y uso 03 123 NAVEGACIÓN
124. AppGyver imanolteran.com • Añadir nuevos elementos • Añadir botón • Lógica • Create record • Asigna las propiedades a cada valor • Asignar el label del campo con cada page variable • Rellenar listado con “currently repeated” y el valor correspondiente. Manejo y uso 03 124 NAVEGACIÓN
125. AppGyver imanolteran.com • La herramienta nos permite acceder a diferentes sensores del dispositivo • Acelerómetro. • Barómetro. • Brújula. • Geolocalización. • Giroscopio. • Magnetómetro.. Manejo y uso 03 125 SENSORES DE DISPOSITIVO
126. AppGyver imanolteran.com • Hay que tener en cuenta que no todos los dispositivos cuentan con todos estos sensores. • Aquí hay que trabajar con dos conceptos: • Sensor variables. • Sensor flow functions. Manejo y uso 03 126 SENSORES DE DISPOSITIVO
127. AppGyver imanolteran.com • Sensor variables • Variables compartidas a nivel global de la app recogidas por los sensores del dispositivo • Podemos acceder a ellas mediante funciones • sensorVars Manejo y uso 03 127 SENSORES DE DISPOSITIVO
128. AppGyver imanolteran.com • Todos tienen: • latestValue • values (histórico de valores) • active (boolean) Manejo y uso 03 128 SENSORES DE DISPOSITIVO
129. AppGyver imanolteran.com • Sensor flow functions • Cada sensor tiene disponibles las siguientes funciones: • Start sensor • Stop sensor • Obtener valor único de sensor • Reset sensor Manejo y uso 03 129 SENSORES DE DISPOSITIVO
130. AppGyver imanolteran.com • Tenemos diferentes formas de distribuir nuestra app • Web • iOS • Android Manejo y uso 03 130 DISTRIBUCIÓN
131. AppGyver imanolteran.com • Tanto en iOS como en Android, hay que preparar los diferentes assets gráficos necesarios • Nos aparecen en las guías de diseño de cada plataforma. • También en AppGyver al hacer la build.. Manejo y uso 03 131 DISTRIBUCIÓN
132. AppGyver imanolteran.com • Al construir la app en su versión web, se despliega a la nube de AppGyver. • Automáticamente se puede acceder desde myapp.appgyverapp.com • Plan enterprise. • Se define en la configuración de web build.. Manejo y uso 03 132 DISTRIBUCIÓN > WEBAPP
133. AppGyver imanolteran.com • También podemos descargar la webapp como un .zip. • De esta forma, la alojamos en nuestro propio servidor. • Cuando termine la build, nos llega un email de aviso. Manejo y uso 03 133 DISTRIBUCIÓN > WEBAPP
134. AppGyver imanolteran.com • Apple tiene normas de publicación más restrictivas que otras plataformas. • Solo se puede distribuir vía App Store Connect • Una vez subida, se puede probar con el programa TestFlight. Manejo y uso 03 134 DISTRIBUCIÓN > IOS
135. AppGyver imanolteran.com • Cuando se han hecho todas las pruebas y estamos decididos a subirla, se manda a revisión. • Tras la revisión, si todo está ok, estará disponible para descargar en el App Store. • Podemos limitar acceso a la app mediante Apple Business Manager. Manejo y uso 03 135 DISTRIBUCIÓN > IOS
136. AppGyver imanolteran.com • AppGyver genera un .apk prácticamente igual al que generamos con Android Studio de forma nativa. • Podemos compartirlo de varias formas: • Play Store. • Enlace directo. • Instalar vía USB. Manejo y uso 03 136 DISTRIBUCIÓN > ANDROID
137. imanolteran.com 04Prácticas ¡A trabajar! AppGyver
138. AppGyver imanolteran.com • Requerimientos: • Fuente personalizada. • Colores personalizados. • Aplicar fórmulas en colores y propiedades. • Variables globales Prácticas 04 138 PRÁCTICA 1 > PROTOTIPO
139. AppGyver imanolteran.com • Añadir componentes en las páginas. • Comunes. • Marketplace. • Crear componentes propios. • Embed. Prácticas 04 139 PRÁCTICA 1 > PROTOTIPO
140. AppGyver imanolteran.com • Crear shared styles. • Probar interfaz: • Añadir selectores de calendario. • Webview. Prácticas 04 140 PRÁCTICA 1 > PROTOTIPO
141. AppGyver imanolteran.com • Páginas: • Listado. • Contacto. • Información general. • Website incrustado. Prácticas 04 141 PRÁCTICA 1 > PROTOTIPO
142. AppGyver imanolteran.com • Listado de elementos. • Añadir elementos. • Eliminar elementos. • Aviso con nombre de elemento eliminado. • Vista de detalle. • Fórmulas. Prácticas 04 142 PRÁCTICA 2 > DATOS “APPGYVER CLOUD STORAGE”
143. AppGyver imanolteran.com • Pull-to-refresh. • Avisos, alertas y confirmaciones. Prácticas 04 143 PRÁCTICA 2 > DATOS “APPGYVER CLOUD STORAGE”
144. AppGyver imanolteran.com • Almacenamiento desde marketplace. • Listado de países. • Vista detalle: • Nombre país. • Capital. • Bandera. Prácticas 04 144 PRÁCTICA 3 > LISTADO PAÍSES
145. AppGyver imanolteran.com • Buscador de países. • Mapa + Geolocalizador. • Cámara. Prácticas 04 145 PRÁCTICA 3 > LISTADO PAÍSES
146. AppGyver imanolteran.com • API Airtable. • Listado de cursos. • Vista de detalle. • Añadir nuevos cursos. • Eliminar cursos. • Buscador de cursos. Prácticas 04 146 PRÁCTICA 4 > REST API
147. AppGyver imanolteran.com • Integración con automatizaciones. • Airtable. • Zapier • Publicar WordPress. Prácticas 04 147 PRÁCTICA 4 > REST API
148. AppGyver imanolteran.com PRÓXIMOS CURSOS ASTRA THEME (WORDPRESS) HERRAMIENTAS DE FORMACIÓN ONLINE OBS STUDIO PRODUCTO MÍNIMO VIABLE LANDING PAGES SIN CÓDIGO
149. imanolteran.com AppGyver hola@imanolteran.com Eskerrik asko