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
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.
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.
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.
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.
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.
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.
lo primero que vamos a hacer es crear dos variables globales iguales a las de la primera pantalla y le daremos el mismo nombre.
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.
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.
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.
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.
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.
No hay comentarios:
Publicar un comentario