Hola y bienvenidos una vez a Inventordeaplicaciones.es en este articulo veremos como utilizar y usar diccionarios en App Inventor 2. La actualización de febrero de 2020 de MIT App Inventor ( nb181c / nb182 ) agregó un tipo de datos de diccionario (diccionario). Este tipo de bloques nos permitirán manejar datos utilizando pares de claves con valores asociados.
Para ver el uso de los diccionarios crearemos una sencilla agenda que guardara contactos. Guardaremos el nombre del contacto su número de teléfono y correo electrónico. También podremos eliminar contactos ya creados y consultarlos. Por supuesto todos estos contactos quedaran guardados en la agenda de una forma permanente.
Diseño para el uso de diccionarios en App Inventor 2.
El diseño de nuestra aplicación consta de cuatro pantallas. Una pantalla principal desde donde podremos acceder a las otras y en las que podremos añadir, eliminar y consultar los datos introducidos. Nos ayudaremos de un componente no visible TinyDB para que nuestros datos sean persistentes y de un componente notificador que usaremos para mandar mensajes al usuario. Como siempre podrás descargar el proyecto AIA desde el enlace.
 |  |  |  |
Descarga el proyecto en formato AIA
Programando un diccionario en App Inventor 2
Comenzaremos programando la pantalla principal que será la encargada de dar acceso a las demás pantallas. Simplemente tendremos que hacer que al pulsar uno de los botones abramos la pantalla correspondiente.
Seguido comenzaremos programando nuestra segunda pantalla. Esta pantalla será la encargada de añadir usuarios a nuestra agenda usando como palabra clave o «Key» el nombre del usuario. Primero crearemos una variable global a la que llamaremos diccionario y que estará inicializada con un campo de texto vacío. Esta variable servirá para manejar nuestro diccionario.
A la hora de iniciar la pantalla comprobaremos que en TinyDb contiene datos. Añadiremos el diccionario contenido en la TinyDB a nuestra variable diccionario. Si es la primera vez y no contiene ningún dato construiremos un diccionario que será añadido a nuestra variable global, en el campo valorSiEtiquetaNoExixte. fijate que el diccionario que construimos está vacío. Solo introducimos campos de texto vacíos.
Seguido tendremos que conseguir que guardar los datos introducidos en nuestro diccionario. Pero antes nos tendremos que asegurar que todos los campos de texto este rellenados al pulsar el botón de añadir. De lo contrario notificaremos al usuario que tiene que rellenar todos los campos de texto.
Si están rellenos todos los campos de texto, tendremos que comprobar que el nombre no está ya en el diccionario. De lo contrario notificaremos al usuario que el nombre ya existe en el diccionario.
Si tenemos todos los campos de texto rellenados, y el nombre no existe en el diccionario, entonces añadimos al diccionario el nuevo usuario. Como key utilizaremos el nombre del usuario, y como valores asociados, el teléfono y correo electrónico. Una vez añadido al diccionario borraremos los campos de texto para evitar repetir la operación, y guardaremos el diccionario en la memoria del teléfono, utilizando el componente TinyDB. Por último abriremos la pantalla principal.
Programando la pantalla eliminar del diccionario
Ahora que ya somos capaces de guardar datos en nuestro diccionario, vamos a ver cómo eliminarlos. Comenzaremos programando la pantalla 3. Crearemos una variable global a la que llamaremos diccionario y que estará inicializada con un campo de texto vacío. Esta variable servirá para manejar nuestro diccionario como ya pasaba en la pantalla 2.
A la hora de iniciar la pantalla comprobaremos que en TinyDb contiene datos. Añadiremos el diccionario contenido en la TinyDB a nuestra variable diccionario. Si es la primera vez y no contiene ningún dato construiremos un diccionario que será añadido a nuestra variable global, en el campo valorSiEtiquetaNoExixte. fijate que es exactamente el mismo procedimiento que en la pantalla 2.
Ahora tenemos que comprobar que cuando el usuario pulsa el botón de eliminar el nombre introducido en el campo de texto está contenido en el diccionario. Si el nombre no existe se lo notificaremos al usuario.
Si el nombre está en el diccionario procederemos a eliminarlo. Seguido lo guardaremos en la memoria del teléfono, utilizando el componente TinyDB y volveremos a la pantalla 1.
También tenemos un botón para volver directamente a la pantalla 1 si el usuario a llegado a esta pantalla por error. El funcionamiento de este botón es simple, al pulsar abriremos la pantalla 1.
Programando la pantalla ver/consultar diccionario
En esta última pantalla vamos a ver cómo podemos realizar consultas a nuestro diccionario, introduciendo solo el Key o nombre a consultar. Para esto necesitaremos dos variables globales, una contendrá una lista vacía y la otra contendrá un campo de texto vacío.
A la hora de iniciar la pantalla comprobaremos que en TinyDb contiene datos. Añadiremos el diccionario contenido en la TinyDB a nuestra variable diccionario. Si es la primera vez y no contiene ningún dato construiremos un diccionario que será añadido a nuestra variable global, en el campo valorSiEtiquetaNoExixte. fijate que es exactamente el mismo procedimiento que en la pantalla 2 y pantalla 2.
Cuando pulsemos el botón 1 tendremos que comprobar que el campo de texto no está vacío, de lo contrario mostraremos una notificación al usuario avisando que el campo está vacío.
Si por el contrario el campo de texto no está vacío, comprobaremos que el nombre introducido en el campo de texto es «Key» en el diccionario. Si no esta en el diccionario se mostrará una notificación al usuario advirtiéndole que no existe.
Si el nombre introducido está en el diccionario, construiremos una lista con los valores obtenidos de la «Key».
Seguido pondremos en la etiqueta TxtResNombre con la unión del texto Nombre más el texto del campo CdtNombre. En la etiqueta TxtResTeléfono seleccionaremos de nuestra lista, creada anteriormente, el índice 2. Y para la etiqueta TxtResCorreo seleccionaremos de nuestra lista, creada anteriormente, el índice 1. Por último dejaremos el campo de texto vacío utilizando un cuadro de texto.
Por último como ya sucedía con las anteriores pantallas, programaremos el botón que nos devolverá a la pantalla principal.
Final del tutotorial
Bueno con esto terminamos esta pequeña aplicación que muestra un uso básico de los diccionarios. Sin duda como todo se podría mejorar y hacer un uso mas extendido de los bloques contenidos para el uso de diccionarios pero creo que para iniciarse y entender su uso está bien.
Si te ha gustado y quieres que hagamos mas artículos como este o tienes alguna duda que quieras resolver, no dudes en dejarlo en los comentarios. Un saludo.
No hay comentarios:
Publicar un comentario