Hojas de cálculo en App Inventor

Este tutorial está motivado por el anuncio por parte de Google del cierre de Fusión Tablets.

Sois muchos los usuarios que estáis preguntando qué alternativas tenemos al usar App Inventor 2. Este tutorial muestra una alternativa, que no la única, al uso de Fusión Tablets, utilizando una hojas de cálculo de Google en App Inventor 2.

En este ejemplo crearemos una aplicación en la que podremos ver en forma de lista los datos de nuestras hojas de cálculo. En la que podremos modificar desde el mismo App Inventor.

Nuestro ejemplo será de un almacén de ropa y complementos, donde los datos estarán registrados en una tabla excel de hojas de cálculo de Google. Desde la App podremos consultar datos de esa misma tabla y tambien añadir al final de la misma nuevos productos.

Diseño de la App, para modificar hojas de cálculo

El diseño de nuestra app consta de tres pantallas, la principal, que mostrará al usuario un par de botones. El primero con el texto “Ver producto” dará acceso a la segunda pantalla, el segundo botón con el texto “ Añadir producto”  dará acceso a la tercera pantalla.

La segunda pantalla mostrará un ListWiev que contendrá todos los datos de nuestra hoja de cálculo de Google en App Inventor 2. Al pulsar cualquiera de los registros, podremos ver un resumen más detallado del producto seleccionado. La tercera pantalla, tendremos la opción de añadir productos. Rellenando los campos requeridos podremos añadir más productos a nuestra hoja de cálculo de Google. Para todo esto nos ayudaremos de el componente no visible Web.

Como siempre, podréis descargar el diseño de la aplicación al final de estas líneas. Con el fin de que solo estés centrado en seguir los pasos de este tutorial con más claridad. Posteriormente recomiendo que se estudie el diseño para mejoras o la comprensión del mismo.

descarga proyecto AIA

Creando una hoja excel para App Inventor 2

Lo que vamos hacer es crear una nueva hoja de cálculo de Google, para ello nos dirigimos a la siguiente dirección: https://www.google.es/intl/es/sheets/about/.  Ingresa con tu cuenta de gmail, y una vez en la página ponle nombre a la hoja, pero no modifiques ninguna celda de la misma. En la barra de herramientas superior pulsa en Herramientas → crear formulario, se abrirá una nueva página donde podrás crear nuevas preguntas a modo de formulario. Las utilizarás más adelante en este tutorial para añadir artículos a tu hoja de cálculo.

Una vez situado en esta página el proceso para crear pregunta es sencillo modifica el título de la pregunta como muestro en la imagen 

en mi caso le pondré Id para hacer referencia a un código identificador de cada uno de  mis productos, seguido pulsa donde dice selección múltiple 

y de las opciones que salen selecciona respuesta corta.

Dependiendo del nombre que le pongamos a la pregunta, automáticamente el formulario nos detecta si la respuesta tiene que ser un nombre o un número. Si queremos que todo sea texto tendremos que cambiar las opciones que aparecen más abajo.

Para añadir más preguntas, pulsa en el signo más de la pequeña barra lateral. Yo en mi ejemplo voy a añadir dos más, una es el nombre del artículo y otro para el precio.

Si volvemos a nuestra hoja de cálculo, podrás observar que se han creado cuatro columnas y que estas coinciden con el nombre de cada pregunta creada anteriormente en el formulario, “Id, articulo y precio”, menos la primera que contiene el nombre de marca temporal, que contendrá la fecha y hora de la última  modificación de la pregunta.

bien de momento dejamos esto, sin cerrar ninguna ventana de de nuestro navegador ya que más adelante necesitaremos volver para consultar una serie de datos. 

https://www.amazon.es/dp/1795711817

Programando las pantallas para App Inventor y hojas de cálculo de google

Lo primero que vamos hacer es programar los botones de nuestra primera pantalla. Al pulsar el primero “Ver producto” nos mandara a la segunda pantalla y si pulsamos el segundo “ Añadir producto” nos mandara a la tercera pantalla. 

Ahora vas a programar la pantalla2, antes tenemos que recoger de nuestra excel un dato que nos servirá para mostrar la tabla en nuestra aplicación. Dirígete a tu hoja de cálculo  para conseguir el enlace. Para compartir, toca el botón de la parte superior derecha de la pantalla . En la ventana que se abre pulsa en copiar enlace para compartir. Copiala en una nueva ventana de tu navegador y sustituye la parte remarcada en rojo de la imagen por el siguiente texto, “export?format=csv”.

la nueva dirección quedará de la siguiente manera.

esto lo que hará es convertir tu hoja de cálculo en un archivo en formato csv.

Dirígete a App inventor, pulsa en el botón diseñador de la pantalla 2 y selecciona el componente no visible Web. Introduce la dirección web anteriormente copiada y modificada en la casilla de Url.

Pulsa el botón de bloques, y vamos a comenzar a programar la pantalla2. En primer lugar vamos a necesitar dos variables globales que inicializará como una lista vacía, a la primera la llamamos TablaProductos y la segunda ListaProductos.

Seguido le vas a decir que cuando inicie la pantalla haga una llamada HTTP utilizando la dirección web con la que configuraste tu componente no visible web. Para ello te ayudaras del bloque llamar web1.Obtener, quedará de la siguiente manera.

La llamada devolverá un texto que obtendrás con el bloque cuando Web1. ObtuvoTexto. De las cuatro variables que te ofrece este bloque escoge contenidoDerespuesta que contendrá nuestra hoja de cálculo en formato CSV. Esta variable se la asignamos a la variable global TablaProductos ayudándote con el bloque Lista desde tabla CSV texto, quedará de la siguiente manera.

Pulsa para saber más sobre las listas en App Inventor 2

Ahora va ser necesario construir un procedimiento que construirá una lista descartando los elementos que no vamos a necesitar. Como la fecha en la que se creó y el código Id que le hemos asignado. Entonces por cada elemento de la lista TablaProductos que creamos anteriormente, añadiremos a la lista ListadoProductos los índices que nos interesan, la descripción el artículo y su precio. Por tanto escogeremos el índice 3 y 4 para construir la nueva lista, quedando de la siguiente manera.

Este procedimiento lo vamos a llamar cada vez que obtengamos el texto de la llamada a la web. Por tanto lo colocaremos en el bloque que anteriormente utilizamos, y añadiendo a nuestro visor de listas, el contenido de nuestra variable global ListadoProductos. Quedando dela siguiente manera.

Antes de ver los resultados de nuestra aplicación vamos a otorgarle una nueva funcionalidad. Vamos hacer que cuando el usuario pulse un elemento de nuestra lista, la pantalla muestre una pequeña descripción del elemento seleccionado. Ya que el diseño de la aplicación consta de dos disposiciones, una a la vista del usuario y otra oculta al mismo, vamos a cambiar entre ellas después de la selección. y al texto que contiene la segunda disposición vertical, le asignaremos un elemento de ListadoProductos, cuyo índice será el elemento seleccionado en el visor de listas. Quedará de la siguiente manera.

Una vez en esta segunda disposición vertical, para que el usuario sea capaz de volver a la anterior. Cuando pulse al botón le vuelva a mostrar la disposición vertical que contenía nuestra lista de elementos. Tiene que quedar de la siguiente manera.

Si ejecutas la aplicación verás que la segunda pantalla muestra un registro que coincide con la primera fila de datos de tu hoja de cálculo. En este caso sería el nombre de cada columna nombre, id y precio.

“Por favor abstente de modificar manualmente la hoja de cálculo, ya que alteraría los resultados de este tutorial”

Ahora vamos a programar la tercera pantalla de nuestra aplicación. Esta pantalla tiene unas cajas de texto donde el usuario introducirá los datos, y al pulsar el botón, éstos se insertarán en nuestra hoja de cálculo. Para ello nos valdremos de nuestro formulario, es decir, cuando pulsemos el botón se mandará a la dirección web del formulario los registros de las cajas de texto. Para conseguir esto tendremos que mandar desde nuestra aplicación una serie de datos a la página web, y para ello necesitamos construir la dirección web donde se mandaran con los datos requeridos. Nos dirigimos a nuestro formulario de la hoja de cálculo y pulsamos en “Más” y del desplegable seleccionamos “Obtener enlace previamente rellenado”.

Se abrirá una nueva ventana con nuestro formulario donde copiaremos la dirección web sustituyendo la parte final ”prefill” por “formResponse”. Quedando de la siguiente manera: https://docs.google.com/forms/d/1MkqNfCk9RfG2KyC4hdxn8tiQmiFqsjCUfTlXUqqooMI/formResponse. Vamos a copiarlo en un lugar para mas tarde poder usarlo.

Ahora necesitamos un par de datos más, y para ello tendremos que rellenar previamente nuestro formulario, antes de solicitar el enlace que nos hace falta, no importa que introduzcas en las respuestas, como te muestro en la siguiente imagen yo voy a poner letras para conseguir el enlace.

Pulsamos en generar enlace y lo copiamos en el portapapeles. Ahora abre una nueva pestaña en el navegador y inserta en la barra de direcciones el enlace copiado, en mi caso es este:

https://docs.google.com/forms/d/e/1FAIpQLSfaFDSRO64zTwVI3lucHETEWvYygO3CGNdMMfjMhuYoSHiTsw/viewform?usp=pp_url&entry.510338503=a&entry.1148147912=b&entry.1297137201=c

Ahora con el enlace que tenemos vamos a construir una dirección web que insertará los datos de cada una de las cajas de texto. 

En primer lugar necesitamos descomponer la dirección web que te muestro arriba. Para ello cuando pulsemos el botón1, haremos una llamada a una dirección web que será, la dirección web que copiamos y modificamos. «https://docs.google.com/forms/d/1MkqNfCk9RfG2KyC4hdxn8tiQmiFqsjCUfTlXUqqooMI/formResponse«.

 Añade «&entry.510338503=a» sustituiremos la “a” por el contenido de la caja de texto1.

Seguido añade «&entry.1148147912=b» sustituiremos la “b” por el contenido de la caja de texto2.

Y por último «&entry.1297137201=c» sustituiremos la “c” por el contenido de la caja de texto3.

Sustituye el carácter “ampersand &” de la primera entrada por un signo de interrogación. Y codificaremos el texto de todas las entradas por si se insertan caracteres especiales.

Quedará de la siguiente manera

Una vez construida nuestra dirección web solo tendremos que llamarla y esta insertará una nueva línea en nuestra hoja de cálculo

Bien ahora solo tienes que ejecutar la aplicación que has construido en este artículo y si todo ha ido bien funcionara a la perfección.

Si quieres que hablemos de algún asunto en concreto, o te has quedado atascado en algún desarrollo. No olvides dejarlo en los comentarios. Sin más me despido hasta el próximo tutorial. Un saludo

Chat en App Inventor con CloudDb

Hola y bienvenido una vez más a inventordeaplicaciones.es. En este vídeo te enseñaré a usar el componente CloudDB en App Inventor 2 y ha abrir una cuenta gratuita en el software Redis para el almacenamiento en la nube.

Con la combinación de estos dos elementos crearás una aplicación de chat en app inventor con cloudDB. 

¿Qué es CloudDB?

CloudDB es un componente no visible que después de la actualización nb179 el componente deja de ser experimental para situarse en componentes de almacenamiento. Este componente te permite almacenar datos en un servidor de datos conectado a Internet (utilizando el software Redis). Esto permite que tu aplicación comparta datos con otros usuarios que tengan la misma aplicación.

De forma predeterminada, cuando estés creando una aplicación los datos se almacenarán en un servidor mantenido por MIT. Pero este servidor tiene una serie de inconvenientes. Los datos no se guardarán de forma persistente, es decir, en cualquier momento pueden desaparecer. La base de datos será compartida con otros usuarios de App Inventor 2 pudiendo alterar los datos almacenados. Por último este servidor es muy inestable, dándose el caso que pudiera caerse en cualquier momento, sin embargo, puedes configurar y ejecutar tu propio servidor.

 Podemos modificar la propiedad «RedisServer» y la propiedad «RedisPort» para acceder a tu propio servidor. Veremos un ejemplo creando una cuenta y usando el Software Redis.

Diseñando la aplicación para el chat en App Inventor con CloudDb

Como el diseño es bastante complejo dejaré un enlace para descargar el proyecto de la aplicación en formato AIA para abrir con App Inventor. De esta manera podrás ver con más detalle cómo está diseñada la aplicación y por supuesto seguir este tutorial fácilmente.

Pincha en este enlace para descargar el archivo AIA.

https://www.amazon.es/dp/1795711817

Programando la aplicación de chat en app inventor con cloudDB

Lo primero que crearas para tu chat en app inventor con cloudDB, es una variable global a la que le darás el nombre de “USUARIO”. Te servirá para almacenar el valor que el usuario escoja al pulsar el botón en la primera pantalla. Inicializa la variable con un bloque de texto vacío.

Lo siguiente es programar los botones que servirán para definir quién es el usuario uno y el usuario dos. Y una vez hecho esto cambiar de pantalla. 

Comienza por el botón que definirá el usuario uno. Necesitas que al pulsar el botón “BtnUsuario1” guarde en la variable que anteriormente creaste el valor de “USUARIO1”. Seguido debes de cambiar de pantalla, o en este caso hacer visible la otra disposición vertical. Tiene que quedar de la siguiente manera.

Tendrás que hacer lo mismo para el botón “BtnUsuario2”. Pero esta vez a la hora de darle valor a la variable, le introducirás el valor “USUARIO2”. lo demas sera exactamente igual.

Una vez que has definido quien es cada uno de los usuarios, vas a programar la parte de envío de mensajes. Cuando el usuario introduzca un texto en la caja y pulse enviar este se envíe y guarde en la nube para posteriormente utilizarlo.

Lo primero que harás es decirle a tu aplicación que si se pulsa el botón “BtnEnviar” y la caja de texto no está vacía. Entonces guardarás el texto en la nube con ayuda del componente CloudDb. Pasándole como etiqueta el valor que tenga la variable global “USUARIO”. Y el valor a guardar, el texto que contenga en ese momento la caja de texto.

Una vez hecho esto, dejaremos la caja de texto vacía para el siguiente mensaje. Lo único que tienes que hacer para esto es cambiar el texto por una caja de texto vacía.

Ahora utiliza el bloque «Cuando CloudDb Datachanged» para detectar cambios en la base de datos. Este bloque no solo te detectará cuando se ha producido un cambio. Si no que devolverá cuál etiqueta y valor se ha introducido o se ha modificado. De esta manera, sabrás si se ha realizado algún cambio.

También necesitas saber cuál de los dos usuarios ha sido. Para ello te vas ayudar del bloque «IF«, y si la última etiqueta que se ha modificado es la del usuario 1. Entonces será la etiqueta de texto de este la que modificaras, asignándole el dato guardado en esta última etiqueta. Si por el contrario la última etiqueta que se ha modificado no es la del Usuario2. Entonces será la del usuario 2, y procederá a modificar la etiqueta de texto de este. Tanto si modificas la etiqueta de texto del usuario 1 o 2, pon un salto de texto ayudándote con «/n». Tiene que quedar de la siguiente manera.

Ahora solo te falta buscar a un amigo y ejecutar tu nueva aplicación. Usando dos dispositivos, uno será el usuario 1 y el otro el usuario 2.

Evidentemente esta aplicación podría mejorar infinitamente. Pero la intención de este artículo es solo la de ver un ejemplo sencillo de cómo puede ayudar el almacenar datos en la nube.

Cómo crear una cuenta en el Software Redis para el uso de cloudDB

Cómo bien te explicaba al principio de este artículo querido amigo, el MIT te ofrecerá almacenamiento en un servidor de pruebas. Pero solo se recomienda el uso mientras dure el desarrollo de la aplicación, una vez terminado se recomienda que se cree una cuenta en el Software Redis. Aquí veremos cómo crear una cuenta gratuita y como configurar el componente CloudDB para utilizarlo en tu chat en app inventor con cloudDB.

Lo primero es dirigirte a tu navegador e introducir la siguiente direccion web https://redislabs.com/ . Que te mandara a la página de Redis Labs donde crearemos una cuenta gratuita. Si te fijas justo en el centro de la página tienes un botón con un recuadro. Donde te pide un correo y un botón donde dice que comiences gratis, introduce tu correo y pulsa al botón.

Inmediatamente después recibirás en la misma cuenta de correo que has introducido un e-mail de bienvenida. Para confirmar el correo y donde se te pedirá que actives la cuenta pulsando al botón.

Al pulsar el botón “Ativate Now” te redirigirá a una página para terminar de configurar su cuenta. Si no está seleccionada la opción de la nube selecciónala y rellena los campos, además de aceptar los términos y condiciones, nos redirigirá a una página que nos dará la bienvenida.

Pulsa el botón donde dice “Create your subscription” para terminar de configurar tu cuenta. Selecciona la opción  “Essentials”  que es la opción gratuita y sin servidos que nos ofrece 30 megas y por cada giga adicional se cobrará 5$.

Nuevamente te dirigira a una nueva página para una nueva suscripción, selecciona nuevamente la opción free si no quieres pagar y pulsa continuar.

Ya está, pon nombre a tu base de datos yo para el ejemplo pondré Prueba0001.

deja como esta las demas opciones y pulsa en “Activate”

Pues bien ya tenemos activada nuestra cuenta. Ahora pulsa sobre ella para coger unos datos que usaremos en nuestro proyecto de App Inventor 2. Solo coge los datos que te muestro en la siguiente imagen he introducelos en la configuración del componente CloudDb

Solo tienes que utilizarlo en la aplicación que has construido en este artículo. Si todo ha ido bien funcionara tu chat en app inventor con cloudDB a la perfección.

Si quieres que hablemos de algún asunto en concreto, o te has quedado atascado en algún desarrollo, no olvides dejarlo en los comentarios. Sin más me despido hasta el próximo tutorial. Un saludo

Como crear listas en App Inventor

Hola y bienvenidos una vez más a Inventordeaplicaciones.es. En este tutorial hablaremos de una problemática que nos expone un usuario de nuestro canal de Youtube. Como crear listas en App Inventor 2 sin repetición. El nos comentaba que deseaba hacer un listado con resultados al azar sin un orden y sobretodo sin que se repitan. Bueno voy hacerlo de una manera que no es la única y que para mi es la más sencilla. Crearemos una aplicación con una lista de cuatro frutas, que al pulsar un botón, este muestra una fruta de la lista. Por supuesto que no se repita, mostraremos los resultados más abajo para comprobar que esto está sucediendo tal como queremos.

https://www.amazon.es/dp/1795711817

El diseño de la aplicación para crear listas en App Inventor

El diseño de nuestra aplicación consta de una disposición vertical donde meteremos una etiqueta a modo de título. Esta tendrá el texto de ELEMENTOS DE UNA LISTA AL AZAR. Y que estará en negrita y con un tamaño de 24, para diferenciarlo del resto de etiquetas. Más abajo pondremos una etiqueta que contendrá el texto “Elemento seleccionado”, y debajo una caja de texto que en su opción habilitado la dejamos desactivada. Más abajo pondremos otra etiqueta con el texto “Pulsa el botón”. Para elegir un elemento al azar. Debajo el botón con el texto “Pulsa” y más abajo dos etiquetas. Una que contendrá el texto “Elementos de la lista que no pueden repetirse” y la etiqueta de más abajo sin texto. Tiene que quedarte como muestro en la imagen.

Programando la aplicación

Lo primero que vamos a crear es una variable global a la que llamaremos “ListaFrutas”. La inicializamos construyendo una lista con cuatro frutas Manzana, Pera, Piña y Naranja, en este mismo orden.

Listas en App Inventor 2.

Ahora que ya tenemos nuestra lista de frutas, crearemos otra variable global que llamaremos “ListaFrutasRepetidas”. La inicializamos con una lista, esta vez la lista estará vacía.

Seguido crearemos una tercera variable global que llamaremos “Elemento”. Contendrá una caja de texto vacía, su uso será simplemente el de almacenar los elementos seleccionados al azar temporalmente, para su manejo.

Bien ahora vamos a ver como armar la lógica para que al pulsar el botón nuestra aplicación  muestre elementos sin repetir y al azar. Para ello cuando pulsemos el botón, pondremos la variable global “Elemento” con el valor de escoger un elemento al azar de nuestra lista “ListaFrutas”. Como muestro en la siguiente imagen.

Una vez que hemos hecho esto, comprobaremos que la fruta que hemos introducido en nuestra variable global “Elemento” no esté ya en la lista “ListaFrutasRepetidas”.

Si no está en dicha lista, lo que haremos es poner el texto de nuestra caja de texto con el nombre de la fruta que tengamos en ese momento en la variable global “Elemento”. Y añadiremos la misma fruta de esa variable a la lista “ListaFrutasRepetidas”.

Solo nos queda una única cosa. Qué es añadir la fruta que ha salido, a una lista que se mostrar en nuestra última etiqueta. Lo haremos tal como muestro en la imagen.

Solo nos queda probar nuestra App y veremos que al pulsar el botón se irán mostrando al azar las frutas contenidas en nuestra lista. Pero solo una única vez. Por supuesto que se puede mejorar la App. Pero la misión de este tutorial es mostrar una manera de no repetir elementos de una lista al azar.

Si quieres que hablemos de algún asunto en concreto, o te has quedado atascado en algún desarrollo, no olvides dejarlo en los comentarios, intentaremos solucionarlo,

si quieres descargar el proyecto AIA para abrirlo en App Inventor pulsa aquí.

LÍMITE PANTALLAS APP INVENTOR 2

Hola y bienvenidos una vez más a inventordeaplicaciones.es. En el artículo de hoy vamos a ver cómo solucionar el problema de límite de pantallas en App Inventor 2.

Hace ya algunas semanas un usuario de nuestra página web nos hizo una consulta sobre las pantallas en App Inventor 2, él estaba desarrollando una aplicación en la que necesitaba crear un número bastante importante de pantallas, y me comentaba que App Inventor 2 no le permitía seguir su desarrollo ya que estaba limitado en el número de pantallas, eso le hacía sentir bastante frustrado  porque llevaba tiempo desarrollando la aplicación y veía que no podía culminar su proyecto. vamos a ver cómo podemos ayudar a nuestro amigo dandole una solución práctica y muy simple, solo creando dos pantallas y solucionarlo.

Diseño de la aplicación de límite de pantallas en App Inventor 2

Para nuestra nueva aplicación crearemos dos pantallas y antes de hacer nada, en la propiedad animación de cierre de pantalla y animación al abrir la pantalla seleccionar zoom, con esto conseguiremos un efecto de cambio de pantalla más profesional, también he seleccionado del desplegable de la opción Theme de la Screen 1, la opción Device default .

Continuando con el diseño en la primera pantalla pondremos dos disposiciones verticales que tanto el alto como el ancho esté ajustado al contenedor, a la primera disposición vertical, la llamaremos Pantalla 3 y la segunda Pantalla 1, en la primera disposición a la que llamamos Pantalla 3, meteremos dentro una etiqueta en la que introduciremos el texto ESTAS EN LA PANTALLA 3, y seguido metemos debajo una disposición vertical en la que dentro meteremos un botón, este contendrá el texto de siguiente, para la segunda disposición a la que llamamos Pantalla 3 haremos exactamente lo mismo, pero el texto de la etiqueta será ESTÁS EN LA PANTALLA 1,  a la disposición vertical Pantalla 3 le desactivaremos la casilla de visible, de esta manera cuando ejecutemos nuestra aplicación solo veremos una disposición vertical, ya vas intuyendo cómo lo vamos a solucionar…

Para nuestra segunda Screen, haremos exactamente los mismo, pondremos dos disposiciones verticales a las que llamaremos Pantalla 2 y Pantalla 4 y dentro nuevamente meteremos dos etiquetas y dos disposiciones verticales, donde meteremos dos botones, las etiquetas contendrán el texto  ESTAS EN LA PANTALLA 2 y ESTAS EN LA PANTALLA 4, los botones contendrán el mismo texto menos el botón de la disposición vertical pantalla 4, a este último le pondremos el texto VOLVER. Las dos disposiciones verticales creadas en esta segunda pantalla le dejaremos la casilla de visible desactivada, de esta manera por ahora la única disposición vertical visible será la de la Pantalla 1. Te quedara algo asi como lo que te muestro en la imagen.

Programando la aplicación de límite de pantallas en App Inventor 2

Ya que tenemos el diseño de nuestra aplicación terminada vamos a comenzar la programación de la primera Screen para solucionar el límite de pantallas en App Inventor 2. Empezaremos por esta ya que es la que por defecto App Inventor mostrará al iniciar nuestra aplicación.

Vamos a crear en primer lugar una variable global que utilizaremos para saber y controlar en qué pantalla estamos en ese momento nos y que llamaremos NúmeroPantalla.

“Cuando nombro pantalla en este tutorial me refiero a la disposición vertical que tengo activada la vista en ese momento”

Lo segundo que haremos es que cuando arranque nuestra Screen le diremos programáticamente que muestre la disposición vertical (Pantalla3) y oculte la disposición vertical 2 (Pantalla1). Más adelante y según vayamos construyendo nuestra aplicación añadiremos más bloques, pero de momento lo dejaremos tal cual se muestra en la imagen.

Ahora le diremos a nuestra aplicación que cuando pulsemos el botón 1 abra la Screen 2 pero pasandole un valor inicial a esa pantalla, utilizaremos para ello el bloque:

Abre otra pantalla con valor inicial, nombre de pantalla, valor inicial.

Para el nombre de pantalla pondremos Screen 1, para el valor inicial que le pasaremos a esta pantalla le pondremos el valor de 2.

Para el botón 2 haremos exactamente lo mismo, la diferencia estará en el valor que le pongamos al valor inicial que será 4. Date cuenta que el valor corresponderá a la pantalla que queramos mostrar en ese momento.

Bien ahora iremos a la pantalla de bloques de la Screen2, y crearemos una variable global a la que también llamaremos NúmeroPantalla y le daremos el valor de cero.

Cuando inicie la Screen 2, lo que haremos es darle a nuestra variable el valor que nos manda la Screen 1 y comprobaremos que el valor de la variable sea igual a 2, si es así, pondremos nuestra Pantalla 2 visible y ocultaremos nuestra Pantalla 4, si de lo contrario la variable no contiene el valor de dos, entonces haremos lo contrario, haremos visible la Pantalla 4 y ocultaremos la Pantalla 2.

Para el botón 1 y 2 de la Screen 2 haremos exactamente lo mismo que con los dos botones de la Screen 1, la diferencia estará que abriremos esta vez la Screen1 y en el valor que le pongamos al valor inicial será para el botón 1  el valor de 3, y para el botón 2 será 1. Te recuerdo que el valor corresponderá a la pantalla que queramos mostrar en ese momento.

Bien antes de probar la aplicación vamos a volver a nuestra Screen 1, y es que ahora deberemos meter la lógica necesaria para que cuando volvamos de nuestra Screen 2, nuestra primera Screen nos muestre la pantalla que corresponda al valor mandado por el valor inicial, esto es facil, solo deberemos hacer lo mismo que en la Screen 2, comprobaremos que el valor de la variable sea igual a 3, si es así, pondremos nuestra Pantalla 3 visible y ocultaremos nuestra Pantalla 1, si de lo contrario la variable no contiene el valor de tres, entonces haremos lo contrario, haremos visible la Pantalla 1 y ocultaremos la Pantalla 3. Quedará de la siguiente manera.

Si ahora ejecutamos nuestra aplicación y  pulsamos los correspondientes botones, pasaremos de una disposición vertical a otra utilizando la animación de cierre de pantalla y de abrir pantalla, de esta manera queda solucionado el problema de límite de pantallas en Appinventor 2.

Si quieres que hablemos de algun asunto en concreto, o te has quedado atascado en algun desarrollo, no olvides dejarlo en los comentarios, intentaremos solucionarlo,

si quieres descargar el proyecto AIA para abrirlo en App Inventor pulsa aquí.

Sin más me despido hasta el próximo videotutorial. Un saludo