Es un componente no visible que sirve para recuperar o guardar archivos de texto plano en el dispositivo, se puede escribir archivos en el directorio privado de la aplicación, donde no podrá ser accedido por ninguna otra aplicación del dispositivo. Pero si la dirección del archivo comienza con una barra invertida (/), el archivo se guardará en la tarjeta de memoria.
¿UN EJEMPLO SENCILLO?
Bien en nuestro ejemplo crearemos una simple aplicación donde podremos anotar lo que queramos a modo de notas, podremos guardarlo y más tarde recuperarlo, para si queremos modificarlo, para ello lo que haremos es crear el layout donde utilizaremos un VerticalScrollArrangement, en donde introduciremos una Etiqueta y una DisposiciónHorizontal, dentro de esta disposición horizontal pondremos tres botones, uno para cargar el texto, otro para guardarlo, y por último un botón para poder editar texto, en un CampoDeTexto. Por último y no menos importante necesitaremos dos componentes no visibles, un Notificador, que nos avisara si se ha guardado correctamente nuestro archivo o si se ha cargado sin ningún problema, y un componente File.
Como el objetivo de este tutorial es el de ver el uso del componente File, el diseño vamos a dejarlo en un segundo plano, mostraré las capturas de como me ha quedado a mi y mas abajo podreis descargar el proyecto.
LA LÓGICA DE NUESTRO EJEMPLO
Lo primero que vamos a necesitar es una variable global que contendrá un cuadro de texto vacío, a la que daremos el nombre de Texto.
Ahora lo que necesitamos es pasar lo que escribamos en nuestro campo de texto a nuestra etiqueta, indiferentemente si ya teníamos algo escrito o no, usando nuestro botón BTNponertxt, para ello necesitamos hacer que cuando el usuario pulse el botón, ponga la etiqueta TextNota con el resultado de unir el texto que contenga TextNota (si lo tuviera), con el de la caja de texto. Tiene que quedar de la siguiente manera.
Bien, el siguiente paso podría ser guardar el texto en un archivo dentro de nuestro dispositivo, para asegurarnos de que la próxima vez que abramos la aplicación podamos recuperarlo. para ello necesitamos que al pulsar nuestro botón BTNGuardar la variable global Texto obtenga el texto de nuestra etiqueta TextNota, y seguido guardar la variable en un fichero con el nombre de txtNota.txt. quedará de la siguiente manera.
Vamo a necesitar saber si se a guardado correctamente, para ello necesitamos el bloque cuando Archivo1.AfterFileSaved que nos indicará si el contenido de un archivo a sido escrito, y si es cierto llamaremos al nuestro componente notificador, que mostrará un cuadro de diálogo mostrando un mensaje, que será el resultado de unir dos textos. En primer lugar será tomar el nombreDeArchivo y lo uniremos con un bloque de texto vacío que en su interior pondremos el texto “Se guardó con éxito.” en el título pondremos el texto “Aviso” y en textoEnBotón “Aceptar”. Tiene que quedar de la siguiente manera.
Bien ya hemos creado un texto, con ayuda de un botón lo guardamos y ahora solo nos falta cargar el texto guardado. Para ello cuando pulsemos nuestro botón BTNCargar.Clic llamaremos a nuestro componente llamar Archivo.LeerDesde y en nombreDeArchivo pondremos un bloque de texto con el nombre del archivo con el que se guardó. Quedará de la siguiente manera
Igual que cuando guardamos nuestro archivo, mostramos un cuadro de diálogo para decirle al usuario que todo estaba correcto, ahora haremos lo propio utilizando el bloque cuando Archivo1.ObtuvoTexto que llamara si es cierto al bloque llamar Notificador1.MostrarDiálogoMensaje, en donde el mensaje pondremos el texto “Se cargó con éxito” en título el texto “Aviso” y en el textoEnBotón“Aceptar”. Por último pondremos el texto de nuestra etiqueta TextNota con el valor de nuestra variable local texto, quedando de la siguiente manera.
Bien, si ahora ejecutamos la aplicación con nuestro método favorito, podremos escribir en la caja de texto, pulsando el botón de añadir texto copiarlo a nuestra etiqueta, guardar el texto y volverlo a cargar pulsando en los respectivos botones.
Aquí tienes el enlace del proyecto de ejemplo en formato AIA para App Inventor.
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.
