CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB

Hola bienvenidos una vez más a inventordeaplicaciones.es, en esta nueva serie de post vamos a ver cómo manejar los datos en App Inventor 2.

A medida que nuestras aplicaciones crezcan en tamaño nos será de gran utilidad saber guardar datos, tanto para guardarlos de manera local en un dispositivo, como en la nube, para ello App Inventor ofrece distintas herramientas y nosotros veremos cómo se manejan en una serie de tutoriales que contendrá ejemplos prácticos, que una vez realizados obtendrás los conocimientos suficientes para crear aplicaciones que manejan todo tipo de datos. Empezaremos por los más sencillos, y terminando por los más avanzados. Bueno sin mas empecemos.

CAMBIO DE PANTALLA Y RECUPERACIÓN DE DATOS

En este primer ejemplo crearemos una aplicación con dos pantallas, en la primera, se nos pedirá que ingresemos nuestro nombre y edad, y pulsando un botón, abriremos la segunda pantalla, en la que recuperaremos los datos de la primera para construir una frase de bienvenida, para conseguir esto, necesitaremos guardar el valor de nuestras variables para más tarde utilizarlas, para ello utilizaremos el componente TinyDB.

QUE ES EL COMPONENTE TinyDB

YSukK8tXlhau8VoIjwB13h8Py7hhYXe0yQQPMoJ251ocOwNNnbwyw4uFcfIS1 vI121wD5z92nIcocrZWao  BlU0hFCEC50zoS7hLCV2ICBldgE6LadlLVAx3pI3BHFKQkCKCHy - CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB

TinyDB es un componente no visible que puede almacenar datos.

Las aplicaciones creadas con App Inventor se inicializan cada vez que se ejecutan, es decir, si inicializamos una variable con algún valor y salimos de la aplicación, el valor de esa variable se borrara, y no estará la próxima vez que se ejecutemos la aplicación.

TinyDB es por así decirlo un  almacén de datos persistente para la aplicación, de esta manera los datos estarán disponibles cada vez que se abra la aplicación.

Un ejemplo puede ser un juego que guarda las puntuaciones más altas cada vez que se juega.

Los datos se almacenan en etiquetas. Para almacenar datos, se debe de especificar la etiqueta que corresponde a ese dato dándole así una identificación, por ejemplo, continuando con el ejemplo del juego, la puntuación podría ser “2548” puntos, que la guardaremos en TinyDB con una etiqueta llamada “Puntuación”, de esta manera cada vez que queramos acceder a ese dato solo tendremos que referirnos al nombre con que se guardó, en este caso “Puntuación”.

Solamente existe una base de datos para la aplicación. Aunque se utilicen distintos componentes TinyDB en una aplicación, todas ellas serán el mismo almacén. A si en el ejemplo que veremos más adelante, cada pantalla tendrá un componente TinyDB, pero todo lo que guardemos estará ubicado en el mismo almacén. Se deben utilizar distintas etiquetas  para guardar diferentes datos, y no usar diferentes almacenes. TinyDB es única para cada aplicación, es decir no la podremos utilizar para pasar datos a otras aplicaciones instaladas en el mismo dispositivo, pero si la podremos utilizar para pasar datos entre las distintas pantallas de la misma aplicación.

CREANDO EL DISEÑO DE NUESTRAS PANTALLAS

Para nuestro ejemplo necesitamos dos pantallas, en la primera pantalla se le preguntará al usuario su nombre y edad, para ello utilizaremos dos etiquetas, dos cajas de campo de texto, un botón que te servirá para guardar los datos introducidos y cargar la segunda pantalla, y un componente no visible TinyDB.  La segunda pantalla mostrará un mensaje de bienvenida utilizando el nombre que anteriormente introdujo el usuario, más abajo mostrará si el usuario es mayor de edad o no lo es, para ello utilizaremos los datos de edad que introdujo, para esta segunda pantalla sólo utilizaremos dos etiquetas, en la primera pondremos el texto  “¡BIENVENIDO”, y en la segunda etiqueta la dejaremos vacía, más adelante la rellenaremos usando nuestro programa. Nos tiene que quedar de la siguiente manera.

upwEmwn7Cyfbqy R9Vi2vArhhofj87ySge rs211A6C2Ljrjap0uA8Zz9ZDBEFLOs11jL3q92Q QlRq 8e7JlHZiIpqMbBX7v9HXegttCiZcctGL3e0irKFgLpVRoF5Pq4Ooioun - CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB
Ffa8dqYac5NhqnJE7TLn0LQaUSMuHQRJ10xJ3K vvXTitPKSZzzoOGTJ1sH0crAI4VyK6ra4VNhp1IX2COb0WbZpO40ev9mfeRkBX9VXpol 0Y7bXU vlKyqOopkJuxr3a1U7QZK - CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB
lpskA8pnD4lmmkLKhLGrquNrGh6XS5LX5pg8z5WuiERBLAHOdH  Gniu2UpxFozgi8CNZrpmoGw DK9JXYx7lF5zMjOWLsg WdRi4kdlxHjfUCifgjnxYqfYDDyvj3Br4ASkCftr - CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB
WO3QfCvkof1x2Bkth4BHb2JmHXQ2yZUh4mgQLr2OIqfS337AMsk NeY54pSyZ6wYQvikU9BvnebXHbuV6rVqVhfi8HMgnwZCkDrL81Eg5pWfJpqFbqAsnGMmbR88yDz1WFwMrgVA - CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB

Como el propósito de este post es ver la utilización del componente TinyDB no nos centraremos mucho en el diseño, mas adelante podras descargar el archivo del proyecto para que veas como yo he estructurado el diseño de los componentes.

CREANDO LA LÓGICA DEL PROGRAMA

Bien lo que necesitamos es que cuando el usuario introduzca en los campos de texto el nombre, edad y pulsemos el botón, guarde la información y cargue otra pantalla, pero antes tenemos que asegurarnos de que el los campos de texto no están vacíos, además de una buena práctica en programación, nuestra aplicación no sería muy funcional, a esto añadiremos un mensaje al usuario avisando que tiene que rellenar toda la información.

Lo primero inicializamos las variables globales, la primera la llamarás nombre y a la segunda edad, ambas contendrán un bloque de texto vacío.

Seguido arrastramos el bloque Cuando BTNGC.Clic al visor e introduciremos dentro un bloque condicional SI. Este bloque lo utilizaremos para para comprobar si las cajas de texto están vacías, para ellos introduciremos dentro el bloque de lógica ”O” y dentro del mismo en el primer hueco colocaremos un bloque de texto está vacío que devolverá cierto si la longitud del texto es 0, y a este le uniremos CTNombre.texto. Para el segundo hueco del bloque introduciremos la misma combinación de bloques, cambiando el bloque CTNombre.texto por el de CTEdad.texto.

Volviendo al bloque SI a continuación del entonces colocaremos el bloque Llamar notificador1.Mostrar Alerta de nuestro componente no visible notificador, al que en su hueco aviso pondremos el siguiente texto, “POR FAVOR RELLENE TODOS LOS CAMPOS”.  Tiene que quedar de la siguiente manera.

Cf msTKUApF1Z5fgAAHdsirsDH4IEccroKOtz5SEb19Dc  ih YdI6BlpW9ItLzSPxxeXPnd9Po rDMpNSDXQFA9Izaq8zDw15pGnsT4LZvC5gowq0L49 V2 R22NFOvtAUJ3Zd7 - CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB

De esta manera si el usuario pulsa el botón y falta rellenar algún campo o los dos, mostraremos el aviso, y la aplicación no cambiará de pantalla.

Una vez comprobado que el usuario a cumplimentado la información, vamos a pulsar en la rueda dentada del bloque if, y le vamos a añadir el bloque si no, dónde pondremos las variables anteriormente inicializadas con el valor de las cajas de texto, utilizaremos dos bloques poner global donde uniremos los contenidos de la caja de texto. Quedará de la siguiente manera.

Jm69lh8xTc5osBuxS VompOUQKudtwNT36W2wsERu i ZIGGUCZCeLxo0DO7YfYHt0akCyXP8vpEXk BgMB MQzP50StCL5qVvTrxcnkj7dxLFUWArMvHYO62J1nIUKUUS6M OKz - CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB

Ahora colocaremos justo debajo un bloque Llamar TinyDB. guardar valor , y en el hueco correspondiente a etiqueta pondremos el texto “NOMBRE” este será el nombre con el que guardaremos nuestro dato contenido en la caja de texto, para más tarde recuperarlo. Ahora en el hueco correspondiente aValorAGuardar pondremos el dato a guardar que será nuestra variable global nombre. Seguido colocaremos otro bloque Llamar TinyDB. guardar valor pero esta vez en etiqueta pondremos “EDAD” y en ValorAGuardar pondremos la variable global edad.

Quedará de la siguiente manera.

OlNJYpigg8LSb2h jiliUNS xc q1rex94aPiMRyKOa8lqrQPCpCpVQNblQcTFcz5mQO2Bot1sPavCLjSDhKdXFk7D3o izdybxwDd71pcfQHYFkjD9zJoQ2UgPzPckw9zusCFem - CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB

Solo nos falta una última cosa ahora que tenemos los datos guardados, y es abrir nuestra segunda pantalla, para ello colocaremos un bloque Abrir otra pantalla nombre de la pantalla, al que le uniremos el nombre de nuestra segunda pantalla, en este caso Screen2. Todo quedará de la siguiente manera.

cen0jbWwuEEwxJ4nGUec89KZX7fgOpQBaCKRTylIgh5CbWL2 ID8wS40s6oxk2AsFFQJ6ahMkZPtdI2qH8LNXfh1oLkGbghwmZX3C01qQGdNWqNFa8L9KvS rUIGc VqYFx9ik8f - CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB

Ahora sin salir de la pantalla de bloques seleccionaremos nuestra segunda pantalla, en esta segunda pantalla recuperaremos los datos guardados en la primera pantalla, y construiremos una frase con ellos.

Q MexO9 Za9hB9qqpQTWrBW bqfaOnWZ QGwDs0xAndESVld5OEgPfHx0e07iC2BoFpTD5bE3INyzSWWP2pyG6M4o0fGAjS 7oKPiNlIwdkHqVXsd4XwEL xD6FObobmot xwh0T - CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB

lo primero que vamos a hacer es crear dos variables globales iguales a las de la primera pantalla y le daremos el mismo nombre.

e3bjkgt1MqDdBgG5gFDSO1jjTSmlFNVgpSs kGsdyw1k7RAMpqG7lHrKfPFA1mYeIftOkMkjMaz  0uukZq04O4qwtoncnoX6qyaJjIt1J0kDi61JJfJW76r T CKgiP vNy ygr - CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB

Ahora utilizaremos el bloque cuando Screen2 inicialize para una vez iniciada esta pantalla, poder recuperar los datos sin que el usuario tenga que hacer nada. Ahora daremos valor a nuestras variables globales utilizando para ello los bloques llamar TinyDB.ObtenerValor que en su hueco etiqueta utilizaremos el nombre de la etiqueta con el de la guardamos respetando las mayúsculas y minúsculas, si no la hacemos dará error. Para el campo Valor SiEtiquetaNoExiste podemos poner ERROR, una vez unido todos los bloques nos tiene que quedar de la siguiente manera.

5G7Gs GDKmTTceZwbSCQkyo99hYw2az tKiwONJ465bXtSGJyCDbQueNKK 5KlN p ofWlFPSSYr95L44LunRnCDZSUUMqQaGQefOdUPM F2SWCsMoR5zelSYAJ ty20GfvCJ4b6 - CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB

una vez recuperado nuestros datos utilizaremos estos para crear nuestro mensaje, para ello nos ayudaremos del bloque poner etiqueta1.texto al que añadiremos un bloque de texto unir. Necesitaremos añadir el texto que ya tenía la etiqueta1, los valores guardados en la pantalla Screen1,  para ello utilizaremos el bloque etiqueta1.Texto, más un espacio, utilizando el bloque de texto entrecomillado vacío, más el valor que se ha guardado en la variable nombre, y por último añadiremos un bloque de texto con el símbolo cerrado de exclamación.

Una vez unidos todos los bloques nos tiene que quedar de la siguiente manera.

9dr gMPSoBXBW3eDNr9uV2SjsgBb7mHvTJeLLe6xvncgS3XbTjKKQqYbYrL1suE LzssCmZkeIbom YVuhPyn91gcqS 2ONdCJDsP0Otg4oGrzjfdSpbb2pE5xFerBOD7 ktUq3S - CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB

Ahora vamos a comprobar que el dato guardados en la variable edad sea menor de 18, si esto fuera cierto mostraremos el siguiente mensaje “Lo sentimos eres menor de edad” en caso contrario mostraremos este otro “Genial eres mayor de edad”.

Para hacer esta comprobación utilizaremos el bloque condicional SI, utilizaremos también los datos contenido en nuestra variable edad, para ello utilizaremos el bloque tomar global edad, un bloque matemático de comparación menor que < y el bloque matemático vacío que en su interior pondremos 18. Por último, pulsando la rueda dentada superior izquierda del bloque  SI, le añadiremos el bloque SI NO. Dónde en caso contrario a lo anterior pondremos el texto “genial eres mayor de edad” para ello utilizaremos el bloque poner etiquetas2.como y un bloque de texto que contengan en  el interior el texto antes mencionados. Unidos quedarán de la siguiente manera.

mKkI2lCj vMzno4kmBeIiHyDrMGWaVtNY67ezeHCEHVGxz6lPA0xUXNop78fRewptKt3hTrLylQe5tfV7EzZa xTmEKzO mJF3oJCmL0GWQcRwNUmg mGx5ntpRjsZOtvOfI4rhw - CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB

Solamente nos queda ejecutar nuestra aplicación con nuestro método favorito, pero antes nos aseguramos de estar en la Screen1 de lo contrario nuestra aplicación comenzará a ejecutarse desde Screen2, y no obtendremos los resultados deseados.

GnUIH2tvGj jm7JSuLEeBnHLm7JPfdQjiGdb1Dko4sh9ZhJeD7hjKJyHhuZCvPQo3xrNN 9vSowK5huuw63ilYyuxUdex7G4hb sK9WFKjsK iWMyr4CKgMmLF7pH9l0KTcQl5zJ - CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB
VrVFsFbBWyo5chUmIYoFuQagTIKUC4gniNtVYAbcIwi4JQzrLZEoMFsjqtvcHLV87B6 flCxvp2UJ53S6ISpLwZGw0PMflZfPEzqeYfF2PBUj4CR 5dNhm4uo3vZ52BAt151NlW9 - CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB

bueno creo haber explicado bastante bien los bloques TinyDB, siéntete libre de hacer cualquier tipo de comentario o duda que quieras resolver, y si te ha gustado compártelo.

DESCARGA  EL PROYECTO DE EJEMPLO

4 comentarios en «CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB»

  1. Hola yo tengo solo visor web, y quiero que la app me permita la descargas de la web , si visitó la página con Chrome descarga pero al abrir la app web no descarga ni hace la acción de preguntarme donde guardar, me podría apoyar

    Responder

Deja un comentario

error: Content is protected !!