Graficas de datos en App Inventor

En este nuevo articulo veremos como crear y mostrar graficas de datos en App inventor. Ya lo vimos en anteriores artículos, cuando mostramos como ver gráficos de datos desde una hoja de calculo de Google en App Inventor. Pero esta vez profundizaremos un poco mas en como es el procedimiento.

Te recomiendo que descargues esta guía gratuita en formato PDF para ver como crear direcciones web que muestran gráficos. Ya que en un simple articulo no se puede abordar toda la información relacionada.

Diseño para mostrar graficas de datos en App Inventor

Para este diseño se a utilizado una etiqueta en la parte superior que muestra un titulo de ayuda al usuario, en el que se le pide que ingrese datos numéricos. Mas abajo tenemos un campo de texto que esta configurado para solo admitir números. Debajo del campo de texto tenemos un botón al que se le ha resaltado con el color rojo y que tendrá la función de añadir los valores numéricos a la gráfica. También se ha añadido al diseño un desplegable, que tendrá la función de cambiar la manera de ver la grafica, es decir, podremos cambiar de una grafica de barras, a una grafica en forma circular, los elementos de cadena serán los siguientes «Gráfico de barras, Gráfico circular, Gráfico de líneas, Diagrama de Venn«.

También tendremos dos etiquetas, estas serán útiles a la hora de ingresar los datos a la dirección web que generemos. Las dejaremos ocultas y borraremos el texto que contiene por defecto. Esto último es muy importante ya que de lo contrario no funcionara. Y por último tendremos una imagen que será la encargada de recibir el grafico creado.

Programando nuestra App para mostrar graficas.

Lo primero será crear una variable global a la que llamaremos «ListaNúmeros» y que inicializaremos con una lista vacía. Esta lista contendrá los datos que mostrara nuestra grafica.

Ahora programaremos nuestro botón, cuando pulsemos este, comprobaremos que la caja de texto no este vacía, si no esta vacía añadiremos el número contenido en ella a nuestra lista. Recuerda que la caja de texto tiene que estar configurada para admitir solo números. Una vez que hemos introducido los datos contenidos en nuestra caja de texto, en nuestra lista, borraremos su contenido y también borraremos el contenido de nuestras etiquetas.

Ahora por cada elemento de la lista que hemos creado, ya contenga un solo elemento o dos, añadiremos a nuestra etiqueta números, el texto que ya contenía mas el valor de la posición recorrida en la lista y una coma. Haremos lo mismo para la etiqueta nombres pero esta vez sustituiremos la coma por el símbolo » | «.

Vamos a crear un procedimiento que se encargara de mostrarnos las grafica en nuestra imagen. Este procedimiento le vamos a llamar «Muestra_Grafica» . La mecánica será muy sencilla, por cada opción que tenga seleccionada en el componente desplegable, mostrare un tipo de grafico. Entonces lo único que tengo que hacer, es comprobar si el índice seleccionado es igual a uno. Si es cierto mostrare un grafico de barras.

Esto lo conseguimos poniendo la foto del componente imagen con la siguiente dirección web «https://chart.apis.google.com/chart?cht=bvs&chl=» donde cht=bvs mostrara un grafico de barras. Seguido el contenido de la etiqueta «nombres», menos el último carácter, ya que este es una coma, mas «&chco=FF000000&chxt=y&chbh=a&chs=300×250&chco=A2C180&chtt=» que configurara tanto el tamaño como color etc… Podréis encontrar mas información en el PDF que he dejado para la descarga. El titulo, yo he puesto titulo, vosotros podéis poner lo que queráis. Mas «&chd=t:» que mostrara el nombre a cada dato, estos nombre los sacaremos de nuestra etiqueta nombres, y haremos lo mismo que con la anterior etiqueta, quitaremos el último carácter.

Para todas las siguientes opciones del componente desplegable haremos exactamente lo mismo. Lo único que modificaremos es «cht=bvs«. que para cada opción seleccionada será de la siguiente manera:

Gráfico circular: cht=p

Grafico de líneas: cht=Ic

Diagrama de Venn: cht=v

Una vez ya tengamos creado por completo nuestro procedimiento, lo insertaremos al final de nuestro bloque que detecta el clic del botón.

Ahora lo que haremos es mostrar una grafica distinta dependiendo de la selección del desplegable, si la opción seleccionada, es mostrar un grafico circular, la imagen cambiara para mostrarnos una imagen circular. Esto lo conseguimos llamando a nuestro procedimiento «Muestra_Grafica» cada vez que seleccionemos una opción del desplegable.

Bueno te invito a que experimentes con los tamaños, colores, formas, ayudándote con el PDF que podrás descargar. Ya sabes que si quieres que hablemos de algún tema o si tienes alguna duda, deja un comentario.

Foco en la Interfaces App Inventor

En este nuevo articulo vamos a ver como hacer foco en los objetos de la interfaces de App Inventor. Un usuario del canal de Youtube nos pregunto como podía desplazarse, de un lugar de la pantalla a otro, pulsando un botón. Bien, el proceso es sencillo, utilizando una etiqueta y haciendo foco en ella. Si bien es cierto, que no funciona igual para todos los objetos de la interfaces, vamos a ver un ejemplo donde crearemos una aplicación de registro de usuarios. Cada vez que pulsemos al botón de registro este comprobara si falta algún dato, si faltara alguno, hará foco en un objeto de la interfaces de app inventor y desplazara la pantalla.

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

DISEÑO DE LA APP FOCO EN LA INTERFACE

Ya que el diseño de la App es bastante complejo, y emplearía parte de este articulo, vamos a ver un poco por encima sus características. No obstante, si quieres ver con detalle el diseño de la app, puedes descargar mas adelante el proyecto AIA, o bien, ver el vídeo de Youtube de este articulo que encontraras mas abajo.

Descarga el proyecto AIA

Se a empleado un scroll vertical. Con el fin de repartir cada objeto de la interfaces mas aya de los limites de la pantalla. De esta manera se podrá apreciar mejor el efecto de foco en la interfaces de App inventor. Como ya decía al principio del articulo, crearemos una aplicación de registro, en la que utilizaremos una serie de etiquetas, cajas de texto, selectores de fecha y casillas de verificación, que el usuario tendrá que rellenar. Una vez terminado, si el usuario pulsa el botón y falta algún campo por rellenar, desplazaremos el scroll vertical hacia la zona donde este el campo vacío, usando el foco. Ademas usaremos un componente no visible notificación para mandar mensajes al usuario de que es lo que le falta.

PROGRAMANDO LA APP DE FOCO EN LA INTERFACE

Lo primero que realizaremos es crear las variables que usaremos para controlar o saber si algún componente de la interfaces esta vació o, no seleccionado. Para ello crearemos distintos métodos de control, y necesitaremos iniciar una serie de variables de distinta manera. La primera variable la llamaremos «Control_Completado» y sera la encargada de controlar que todos los campos de nuestra interfaces se han rellenado, la iniciamos con un valor falso. Nuestra segunda variable le daremos el nombre de «Texto_Fecha» y contendrá el texto que tengamos en el selector de fecha. Para nuestra tercera variable, crearemos una lista de seis elementos, los cuatro primeros indices contendrá el identificador de cada uno de los cajas de texto. Para los dos indices restantes de nuestra lista, utilizaremos los identificadores de nuestro campo de contraseña. A esta última variable la llamaremos «Lista_de_campos«.

Ahora cuando inicie nuestra aplicación meteremos el valor del texto de nuestro selector de fecha en la variable «Texto_Fecha«. Esto lo hacemos para guardar el valor inicial, es decir, antes de que tengamos alguna modificación, mas tarde lo compararemos si el selector de fecha se modifica.

Algunos componentes de la interfaces de App Inventor responden al comportamiento del usuario, modificando su apariencia, o bien mostrando distintos textos si el usuario pulsa o interactua con ellos. Vamos a programar el comportamiento de nuestros componentes de selector de fecha, casillas de verificación y selector de lista.

Si el usuario pulsa en el selector de fecha App Inventor desplegara inmediatamente un dialogo en forma de calendario para seleccionar una fecha. Después de seleccionar esa fecha, utilizaremos el bloque que maneja el evento «DespuesFechaRecibida» para que esa fecha quede en el texto del botón de selector de fecha.

Para programar las casillas de verificación tendremos que observar cuando a sido pulsada o cuando a cambiado. Ya que no queremos que estén las dos seleccionadas, si la primera de ellas se selecciona y la segunda ya estaba seleccionada, procederemos a desmarcar la segunda, y dejar marcada la primera. Y esto también tendremos que hacerlo a la inversa.

Para el selector de lista sera muy sencillo. Utilizando el bloque «Después de selección», es decir, después de que el usuario haya pulsado y seleccionado un elemento de la lista. Sustituiremos el texto del botón por el texto de la selección.

Ahora que ya tenemos programado el comportamiento de cada uno de nuestros objetos de la interfaces de App Inventor, vamos a proceder a verificar. Cuando el usuario pulsa el botón de registro, no quede ningún elemento por rellenar. Si alguno elemento esta vacío aremos foco en el. Si son varios los elementos, intentaremos que haga foco en el elemento de mas arriba. Algunos componentes no se puede hacer foco directamente, pero si que podemos mostrar una notificación directamente al usuario.

COMPROBAR QUE TODO ESTA RELLENADO PARA HACER FOCO EN LA INTERFACES DE APP INVENTOR

Vamos a ver distintas formas de verificar si se ha rellenado todos los campos. Empezaremos por los campos de texto. Para ello si pulsamos en el botón de registro, recorreremos nuestra lista «Lista_de_campos«. Ayudados por un bucle «for«. Pero solo recorremos los indices en los que tenemos datos de dichos campos, es decir, del indice uno al cuatro. Si el texto del componente es menor de uno, no se a escrito nada. En ese caso haremos foco sobre el campo y mostraremos una notificación al usuario. Como queremos hacer foco al primer campo que no tenga texto, nos ayudaremos del bloque «break» para finalizar el bucle. Si no lo hacemos de esta manera el bucle «for» continuara, y terminara haciendo foco en el último campo de texto. Por último daremos el valor de falso a nuestra variable global «Control_completado«.

Vamos a ver como comprobar los campos de contraseña. haremos lo mismo que con los campos de texto, pero esta vez en nuestro bucle «for» solo recorreremos los indices cinco y seis. Volveremos hacer los mismo, nos ayudaremos del bloque «break» para finalizar el bucle. Si el texto del componente es menor de uno, haremos foco sobre el campo y mostraremos una notificación. Pondremos el valor de nuestra variable global «Control_completado» a falso.

Pero al ser una contraseña también deberemos de comprobar que las dos contraseñas escritas son iguales. Compararemos los textos de cada contraseña, y si no son iguales, mandaremos una notificación al usuario. Ademas colocaremos el valor de nuestra variable global «Control_completado» a falso.

COMPROBAR CAMPOS DE CONTRASEÑA, FECHA, CASILLAS DE VERIFICACIÓN Y LISTA

Es el turno del selector de fecha. Si recuerdas al principio de este tutorial creamos una variable a la que llamamos «Texto_Fecha«. Esta variable guardaba el texto del componente en el preciso instante en el que se inicia la aplicación, pues si eso es, solo tenemos que comparar los textos de el selector de fecha con el guardado en la variable, si son iguales, quiere decir que no se a cambiado nada. Ademas como venimos haciendo colocaremos el valor de nuestra variable global «Control_completado» a falso.

Para el selector de lista solamente tendremos que comprobar que el índice seleccionado es distinto de cero. De lo contrario mostraremos de nuevo la notificación y pondremos nuestra variable global «Control_completado» a falso.

Las casillas de verificación seran igualmente faciles. Simplemente deberemos de comprobar que al menos una de ellas esta seleccionada, de lo contrario mostraremos una notificación, y pondremos nuestra variable global «Control_completado» a falso.

TERMINAR NUESTRA APP DE FOCO EN LA INTERFACES DE APP INVENTOR

Por último si todo es correcto pondremos nuestra variable global «Control_completado» a verdadero y comprobaremos que esto sea cierto. Si la variable «Control_completado» es cierto, mostraremos una notificación como que el registro se ha completado con éxito. Con esto quedara terminada nuestra app de foco en la interfaces de App Inventor

Como siempre si te ha gustado compártelo, si tienes alguna duda házmelo saber. Y si quieres recibir en tu correo electrónico artículos como este, no te olvides suscribirte al blog de inventordeaplicaciones.es donde obtendrás un magnifico regalo.

Como crear una App Libro

Bueno hace ya algún tiempo un suscriptor del canal de Youtube me preguntaba como podría hacer para abrir un archivo de texto en App inventor. De esta manera lo que el quería poder crear una app libro. Bien la solución es sencilla, o mejor dicho, soluciones, porque vamos a ver tres soluciones distintas.

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

Diseño de la App

Para esta aplicación el diseño va a ser de lo mas sencillo. Tendremos nuestra pantalla principal con tres botones, cada uno de estos botones abrirá una nueva ventana. Cada una de estas ventanas nos ofrecerá un texto para poder leer, pero la diferencia esta en que cada una conseguirá el texto de una manera distinta. En la pantalla pantalla 2, que sera nuestro primer método, abriremos el archivo de texto desde la memoria del teléfono. Nos ayudaremos de un componente no visible archivo y por supuesto cargaremos nuestro archivo de txt en medios. Pondremos una etiqueta dentro de una disposición vertical con scroll.

En la pantalla 3 utilizaremos al igual que en la anterior pantalla un scrooll vertical, una etiqueta y un componente no visible web. De esta manera conseguiremos mostrar el texto desde un archivo alojado en un sitio web. En realidad utilizaremos el archivo desde Google drive, donde tendremos que descargar un complemento.

En la última pantalla utilizaremos el último de nuestros métodos. Al igual que ya hicimos en la anterior pantalla constara de una disposición vertical con scrooll y dos componentes no visibles. un componente web y un componente archivo. De esta manera descargaremos el archivo alojado en Google drive a la memoria del teléfono para visualizarlo.

Programando la Aplicación

Como ya comentaba al principio del articulo, la aplicación contendrá una pantalla principal con varios botones que darán acceso a las demás pantallas para poder crear una app libro. Pues queda claro que el proceso de programación sera sencillo, Al pulsar un botón abriremos la pantalla correspondiente.

Ahora vamos ha programar la segunda pantalla y primer método. Este es el método mas sencillo de todos, simplemente tendremos que leer el archivo dentro de la memoria del teléfono al abrir la pantalla. Después simplemente mostrar el texto leído en la etiqueta TxtLibro.

Bueno ahora que ya tenemos nuestro primer método vamos con el segundo. El resultado en nuestro teléfono sera el mismo pero sera diferente internamente, ya que el archivo sera leído de Internet y no de la memoria interna. Para lograr esto vamos a leer el archivo desde Google drive.

Los archivos de Google drive se pueden compartir con cualquier usuario. Si un usuario quiere descargar el archivo se abrirá una ventana de Google drive con el contenido que se va a descargar. Pero esta forma no nos servirá, necesitamos un enlace de descarga directa. Para esto último vamos a instalar un complemento en Google drive. Vamos al archivo que queremos compartir, pulsamos con el botón derecho del ratón y seguido en Abrir con –> Conectar en más aplicaciones en el cuadro de búsqueda buscaremos el complemento Download link Generator.

Una vez instalado el complemento solo tendremos que volver a pulsar con el botón derecho del ratón en el archivo que queremos que tenga descarga directa. Se abrirá una nueva ventana en el navegador que contendrá el enlace para descarga directa. Simplemente copia este enlace.

Ahora al iniciar nuestra Screen 3 pondremos la url copiada como web a abrir. Seguido la abriremos y cuando nuestro complemento web no visible obtenga texto, solo tendremos que poner en nuestra etiqueta TxtLibro el contenido de dicho texto. Con esto ya tendremos el texto de nuestro libro, pero esta vez desde Internet.

El último método sera una copia del segundo, pero esta vez guardaremos el archivo en la memoria del teléfono. Una vez que obtengamos el texto del componente Web lo guardaremos en la memoria del dispositivo con el componente file. Después solo tendremos que abrir el archivo guardado y mostrarlo en la etiqueta.

Bueno con este articulo hemos visto como poder crear una app libro o consultar textos. Lo mejor es que tenemos un método que nos asegura, en cierta manera, que el texto este alojado en Internet. De esta forma el texto podría modificarse sin tener que actualizar la App, o simplemente que fuera imposible copiarlo para difundirlo fuera de la aplicación.

Bueno me despido con unas merecidas vacaciones de verano, y como siempre si te ha gustado compártelo, si tienes alguna duda házmelo saber. Y si quieres recibir en tu correo electrónico artículos como este, no te olvides suscribirte al blog de inventordeaplicaciones.es, y obtendrás un magnifico regalo.

Diccionarios en App Inventor 2

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.

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

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.