App Inventor

En este post vamos a ver cómo guardar datos en la nube que sean accesibles para todos  los usuarios y podamos modificarlos cuando queramos para añadir más contenido a nuestra aplicación. Para ello usaremos el componente FirebaseDB , que nos dará acceso a Firebase, una popular plataforma (página web) gratuita* para desarrolladores gestionada por Google donde crearemos nuestra base de datos en la nube llamada Realtime Database . * Firebase es gratuito para un uso moderado. En caso que nuestra aplicación empiece a tener miles de usuarios hay un coste fijo de 25€ al mes o pago por uso. Más información en:  https://firebase.google.com/pricing 1) Configuración de FirebaseDB Podemos encontrar el componente FirebaseDB en la Paleta de AppInventor dentro de Experimental > FirebaseDB. Igual que con TinyDB, lo arrastramos y nos aparecerá en Componentes no visibles. Si hacemos click en el componente, en la barra de la derecha de Propiedades vemos que hay un campo lla...

Vamos a ver cómo podemos guardar datos de la aplicación en nuestro teléfono móvil para que cuando el usuario cierre la app y la vuelva a abrir, pueda recuperar la información que ha guardado. El componente que usaremos será TinyDB . 1) Estructura de la TinyDB Para guardar datos en TinyDB se debe usar una combinación de Etiqueta  -->  Valor Nosotros elegiremos el nombre de la Etiqueta , y le pondremos el  Valor  que nos interese guardar. Luego cuando queramos recuperar ese valor, le preguntaremos a TinyDB qué Valor  tiene la Etiqueta . Por ejemplo: Etiqueta: NombreDeUsuario Valor: Alex Aquí he decidido crear una Etiqueta  llamada "NombreDeUsuario", y como mi nombre es Alex, al usarla, guardaré el valor de " Alex" . Pero ese valor es Variable , es decir, otro usuario, que use la app, en la misma  Etiqueta "NombreDeUsuario" podría guardar por ejemplo el valor " Maria ". Luego en la app, podríamos usar ese valor para sa...

En el final de la Sesión #3 de Navegación y Listas  vimos como abrir una nueva pantalla pasándole información sobre lo que el usuario había seleccionado. En ese caso teníamos una lista donde podíamos seleccionar un elemento (el país) y abría una nueva pantalla con ese valor inicial . Vamos a crear esa segunda pantalla, qué contendrá por ejemplo un mapa, pero lo que muestre el mapa cambiará según el valor inicial que haya seleccionado el usuario. 1) Mismo diseño, Distinto contenido Vamos a crear nuestra nueva pantalla, y llamarla por ejemplo " Detalle ". Para empezar le pondremos únicamente una Etiqueta donde mostraremos el valor inicial que ha recibido (para repasar el concepto de valor inicial revisar la  Sesión #3 ) . Ponemos pues la Etiqueta en el Diseñador, y en los Bloques le ponemos el texto que recibamos como valor inicial: Ahora podemos probar la app, seleccionar un elemento de la lista y veremos que esta pantalla nos muestra el nombre que hemos ...

En el apartado de navegación vimos el concepto de Onboarding, es decir, introducir al usuario a nuestra aplicación, explicándole qué hace y cómo usarla. Vamos a ver un ejemplo de Onboarding que aprovecharemos también para pedir algunos datos. 1) Composición Cada pantalla que queramos hacer de onboarding será una pantalla distinta en AppInventor, aunque como vemos en el ejemplo de arriba serán muy parecidas. Como recomendación, cada pantalla debería consistir de: - Una Imagen : que tenga relación con el contenido a explicar. - Texto : explicando la funcionalidad al usuario - Navegación : botones para ir a la siguiente pantalla / saltarse el onboarding / continuar a la app. 2) Ejemplo y Disposición: La primera pantalla del Onboarding ( para una app que muestra países europeos ) podría ser algo así: Aquí vemos una imagen descriptiva en relación a la app y la explicación de lo que encontrarán los usuarios. Abajo del todo vemos un botón a la izquier...

Vamos a comenzar a ver en más detalle cómo funcionan los bloques de programación y montar una navegación entre pantallas para nuestra app. En cuanto un usuario abra la aplicación, el objetivo será mostrar una Lista de elementos si ya ha hecho login, si no  le mostraremos la pantalla de Registro. Ejemplo de Lista con App Inventor 1) Estructura Lo más importante cuando creamos una aplicación es pensarla bien, pero también programarla de forma que sea flexible al cambio. Es imposible pensar la aplicación perfecta y luego no querer hacerle cambios a medida que la vamos creando, de hecho es algo común que se hace siempre! El objetivo es pensarla lo mejor posible y luego crearla de forma que estemos abiertos a hacer cambios y mejoras sin que nos rompa la app entera. Vamos a ver cómo. Hasta ahora hemos creado una pantalla de Registro en la pantalla inicial de la aplicación ( Screen1 ) .  Alguien del equipo investigando por internet, se ha dado cuenta que un 30% de n...

Vamos a empezar a usar algunos elementos de la Paleta del apartado de "Interfaz de Usuario" para conseguir montar una simple pantalla de Registro para nuevos usuarios que quieran usar nuestra aplicación. El resultado será una pantalla con un campo de texto donde el usuario podrá introducir el Email  y otro para el Password . Finalmente habrá un botón para finalizar el Registro. Nuestro objetivo será crear una pantalla (más simplificada) como esta: Vamos a abrir el proyecto que habíamos creado en la Intro y empezar a trabajar! 1) UI La sección de App Inventor donde añadimos los elementos, el " Diseñador ", es donde podremos crear nuestra UI (User Interface) .  UI es el término que se usa para expresar todo aquello que el usuario puede Ver , es decir, los menús, botones, textos, listas,... en resumen, todo lo que es visible en la pantalla del móvil. Antes de empezar a programar la app con App Inventor, deberemos siempre tener dibujadas las distin...