En el anterior artículo terminamos un apequeña App en la que podíamos probar la visualización y guardado de datos en nuestra tabla de fusion tables . Si todo fue bien pudiste ver el resultado, y ver como en la pagina de fusion tables ese mismo dato se contemplaba, pues bien, ahora vamos a crear con lo que ya sabemos una App a la que aplicaremos todo lo aprendido.
DISEÑANDO LA APP
Como venimos haciendo ya varios artículos, el objetivo de estos tutoriales no es la de mostrar y enseñar a crear el diseño de la aplicación, si no el uso de ciertos componentes no visibles del entorno de App Inventor, no obstante soy consciente de que este tutorial no tendría un buen fin si no se diera una visión del diseño de la app, y por ello se explicara que necesitamos, pero también quiero aclarar que cada texto, cuadro de texto, e incluso botones pueden ser colocados en diferentes posiciones para poder crear la App con nuestro propio estilo.
Bien lo primero que necesitamos es borrar de la Screen1 todo componente que anteriormente pusimos tanto del Diseñador como de los bloques.
Seguido necesitaremos para esta nueva App una disposición vertical donde meteremos una etiqueta y dos botones, además de añadir el componente no visible de Fusion Tables.
A la etiqueta de texto le cambiaremos el nombre, le pondremos TituloApp, marcaremos la casilla de negrita y le pondremos el tamaño de letra en 24, y en la propiedad de texto le pondremos CONTROL ALUMNADO.
Para el botón1 le cambiaremos el nombre, le pondremos BtnAñadeAlumno, el tamaño de letra en 24 y el texto que contendrá el botón AÑADIR ALUMNO. Para nuestro segundo botón le daremos de nombre BtnConsultaAlumno, en sus propiedades el tamaño de letra en 24 y el texto que mostrará este segundo botón sera CONSULTA ALUMNO.
Crearemos una segunda pantalla a la que daremos el nombre de CrearAlumno, recuerda que la única pantalla a la que no sele puede cambiar el nombre es la primera, es decir a la Screen1.
Necesitaremos una DisposicioVertical, donde meteremos dentro una etiqueta que la usaremos como descripción, y una campo de texto que la utilizaremos para introducir los campos requeridos, necesitaremos repetir la operación, tantas veces como columnas agregamos a nuestra tabla, y cada etiqueta mostrará el nombre de cada columna de nuestra tabla, seguido y dentro de nuestra disposición vertical meteremos una DisposicionHorizontal donde introduciremos un botón al que añadiremos el texto AÑADIR ALUMNO.
También añadiremos dos componentes no visibles, el primero será el componente FusionTables, y el segundo un notificador, su uso lo veremos a lo largo de este tutorial.
Crearemos una segunda tercera pantalla a la que daremos el nombre de ConsultaAlumno, en esta nueva pantalla necesitaremos agregar lo mismo que en la pantalla anterior una DisposicioVertical, donde meteremos dentro una etiqueta, que la usaremos como descripción, y un campo de texto que lo utilizaremos para introducir los campos requeridos, necesitaremos repetir la operación, tantas veces como columnas agregamos a nuestra tabla, y cada etiqueta mostrará el nombre de cada columna de nuestra tabla. Seguido y dentro de nuestra disposición vertical meteremos una DisposicionHorizontal donde introduciremos un botón al que añadiremos el texto AÑADIR ALUMNO. Ahora añadiremos una segunda DisposicioVertical está fuera de la anterior, en la que meteremos una serie de DisposicionHorizontal cada una con dos etiquetas, esta primera etiqueta mostrará el nombre de nuestra columna y la segunda la dejaremos como está, y por supuesto realizaremos esta acción por cada una de las columnas de nuestra tabla. También añadiremos una última DisposicionHorizontal a la que meteremos un botón. El objetivo de esta nueva DisposicioVertical y todo su contenido es la de mostrar el resultado de nuestra consulta una vez pulsemos nuestro botón, por tanto necesitaremos que no esté visible, y para ello desmarcamos la opción de visible,
más tarde mediante programación haremos que se muestre, también por supuesto que tendremos que arrastrar el componente no visible de fusion tables. Nos tiene que quedar de la siguiente manera.
PROGRAMANDO LOS BLOQUES DE NUESTRA APP
Comenzaremos programando nuestra app por la pantalla Screen1, que nos servirá de pantalla home, es decir volveremos a ella después que salgamos de las demás pantallas, y utilizaremos cada uno de sus botones para acceder a dichas pantallas, para ello necesitaremos que pulsando el botón correspondiente abra la nueva pantalla..
Comenzaremos creando la lógica del primer botón, arrastramos el bloque Cuando BtnAñadeAlumno. Clic ejecuta, al que le añadiremos el bloque Abrir otra pantalla Nombre de la pantalla y le encajaremos un bloque de texto vacío en el que escribiremos el nombre de la pantalla que utilizaremos para añadir alumnos, en mi caso su nombre es CrearAlumno.
Ahora programaremos el segundo botón BtnConsultaAlumno, de la misma manera que el anterior, pero esta vez en el campo de texto que utilizamos para abrir la pantalla pondremos el nombre que le dimos a la pantalla que utilizamos para hacer consultas, en mi caso ConsultaAlumno.
Con esto ya tenemos programada nuestra pantalla inicial, ahora vamos a ver como programar para insertar nuevos datos en nuestra tabla desde la pantalla CrearAlumno.
Para ello seleccionamos esa pantalla y pulsamos en el botón de bloques.
Cuando se pulse el botón1 de esta segunda pantalla, necesitamos verificar que cada campo de texto donde introducimos los datos contiene algún texto, ya que de lo contrario introduciremos nuevo alumnado con falta de datos, para ello necesitamos el bloque Cuando Botón1.Clic Ejecutar , dentro de este mismo bloque utilizaremos un bloque condicional Si, donde comprobaremos que cada campo no está vacío, ayudándonos del bloque lógico NO, y el bloque de texto está vacío, al que uniremos el contenido de la caja de texto, esta operación la repetimos tantas veces como campos de texto tenemos, y cada uno estará unido al anterior por un bloque lógico O quedando de la siguiente manera.
Si los campos de texto no están vacíos, insertamos cada valor de los campos en nuestra tabla, para ello necesitamos el bloque de FusionTables Llamar Fusióntables1.InsertRow y en su campo tableId pondremos el id de nuestra tabla, en su campo columns añadiremos el nombre de las columnas de nuestra tabla separado por comas, y por último en su campo values insertamos el valor de cada uno de nuestro campos de texto, presta mucha atención a este paso ya que cada uno de ellos tiene que estar escrito dentro de un entrecomillado simple y separado por comas.
Una vez hecho esto borraremos el contenido de los campos de texto, para evitar duplicar contenido y seguido cargaremos otra vez la pantalla Screen1.
Pero claro, nos puede dar el caso que falte algún campo de texto por rellenar, o incluso que ninguno esté lleno, en este caso utilizaremos nuestro notificador para alertar de esto al usuario, para ello pulsamos en la rueda dentada del Si condicional y arrastraremos el bloque si no dentro
Se abrirá un nuevo hueco, y en este mismo pondremos el bloque Llamar notificador1.MostrarAlerta Aviso, donde pondremos el texto “Rellenar todos los campos”
Pero se nos da otro caso, suponiendo que hemos llegado por error a esta pantalla, y no queremos añadir ningún alumno, y queremos volver a la pantalla de home, al pulsar el botón de retroceso de nuestro dispositivo, tenemos que poder volver a nuestra pantalla de inicio y no salir directamente de la aplicación.
Para ello utilizaremos el botón Cuando CrearAlumno.BotónAtrás ejecutar y dentro pondremos el bloque de Abrir otra pantalla Nombre de la pantalla poniendo el nombre de Screen1, de esta manera volveremos sin tener que insertar obligatoriamente ningún dato.
Con esto terminamos la programación de la pantalla CrearAlumno, ahora vamos a comenzar a programar la pantalla ConsultaAlumno donde podremos consultar los datos que hayamos guardado en la anterior pantalla.
Comenzaremos abriendo la pantalla de ConsultaAlumno y pulsaremos en el botón de bloques.
Lo primero que necesitamos es que al pulsar el botón1 nuestra aplicación haga la consulta a la tabla, buscando el contenido de nuestra consulta, ya sea por el nombre del alumno o por su nota final de matemáticas, para ello utilizaremos el bloque Cuando Botón1.Clic ejecutar y dentro le añadiremos un bloque condicional Si, que comprobara si el campo de texto o caja de texto del nombre está vacía, y para ello nos ayudaremos de un bloque lógico NO, seguido de un bloque de texto está vacío, y por último el bloque CtxNombre.Texto, quedando dela siguiente manera.
Esto lo que hará es comprobar que si la caja de texto no está vacía, ejecutemos la consulta, y para hacer la consulta utilizaremos el bloque llamar fusiontables1.GetRowWithConditions, que en su hueco tableId pondremos el id de nuestra tabla, en su hueco columns pondremos una lista con el nombre de las columnas de nuestra tabla, separado por comas y por último pondremos la condición que será unir el texto Alumno=’contenido del campo de texto’, recuerda introducir el contenido del campo de texto dentro de las comillas simples, quedando de la siguiente manera.
Ahora vamos a pulsar en la rueda dentada del Si condicional y vamos a unir el bloque si no, si
y haremos las misma operación anterior, pero esta vez mirando que no esté el campo de texto de número de alumno vacío, y la condición de la consulta de fusiontables sea NumeroAlumno=’contenido del campo de texto CtxtNuemeroalumno’, esta operación tendremos que repetirla por cada columna de nuestra tabla, de esta manera podremos hacer la consulta por cualquier campo, tendrá que quedar de la siguiente manera.
«Tengo que decir que esta no es la manera mas optima de hacer la consulta, pero nuestro objetivo es familiarizarnos con el uso de fusion tables.»
Ahora lo que vamos hacer es que cuando nuestra tabla nos devuelve el resultado ocultaremos la DisposiciónVertical1 que estamos visualizando ahora, y con ello ocultaremos también todos los campos de texto, etiquetas y botones que contenga dentro, y activaremos la DisposiciónVertical2 que dejamos oculta en el diseño.
Para ello utilizaremos el bloque Cuando FusionTables. ResultadoObtenido Ejecutar y le uniremos el bloque poner Disposicionvertical1.Visible como al que uniremos el bloque falso, para el bloque poner Disposicionvertical2.Visible le añadiremos cierto, quedara de la siguiente manera.
Ahora tenemos un pequeño inconveniente, el resultado que nos devuelve nuestra Fusión Tables forma una sola línea de texto separado por comas, y nosotros queremos coger cada valor de la tabla y añadirlo a un campo de texto, para conseguir esto vamos a introducir o convertir el texto en una lista, descomponiendo el texto en espacios y borrando las comas, para ello lo primero que necesitamos es crear una variable global que contenga una lista vacía, a la que llamaremos SegmentoTxt.
Seguido utilizamos esta misma variable a la que le añadiremos el bloque de texto dividir por espacios, y seguido le uniremos recortar texto en, que en su campo texto añadiremos el bloque Resultado de nuestra consulta y en su hueco En, pondremos un bloque de texto con lo que queremos eliminar de nuestro texto, que en nuestro caso son las comas, tendrá que quedar de la siguiente manera.
Ya tenemos nuestro texto descompuesto y guardado en una lista, ahora solo tendremos que añadir cada texto de la lista a nuestras etiquetas, para ello utilizaremos el bloque Poner etiqueta7.texto como que esta dentro de la DisposicionVertical2 y le añadiremos un bloque de listas seleccionar un elemento de la lista donde en el hueco lista pondremos o tomaremos la variable Segmentotxt, y en el índice pondremos el número 6, te estarás preguntando por qué 6 y no otro, bien la razón es que al descomponer el texto, cada palabra que lo formaba ahora ocupa una posición en la lista, para la posición 1 tenemos Alumno para la posición 2 tenemos Númerodealumno, a si hasta llegar al final de los nombres de las columnas, donde el nombre de Notas será la posición 5, por tanto si seguimos la cuenta, el primer valor de la columna Alumno será el 6, lo puedes ver mejor en este gráfico que te muestro.
Y realizaremos la misma operación por cada etiqueta que pusimos, dándole el número de índice de la lista que le corresponde, tiene que quedarnos de la siguiente manera.
Ahora solo nos queda programar el botón2 para que cuando pulsemos visualicemos la anterior disposición vertical donde teníamos las cajas de texto, y así poder hacer una nueva consulta, para ello arrastraremos el bloque cuando botón2.Click ejecutar y dentro de este lo que haremos es poner DisposiciónVertical2.visible como falso y poner DisposiciónVertical1.visible como cierto. Quedará de la siguiente manera.
Pero al igual que hicimos con la pantalla de crear alumnos, si queremos volver a la pantalla principal ya sea por error o simplemente que queremos volver, haremos que al pulsar el botón de retroceso de nuestro teléfono volvamos para atrás, para ello arrastraremos el bloque Cuando ConsultaAlumno BotonAtras ejecutar y al que encajaremos el bloque abrir otra pantalla nombre de la pantalla y dentro meteremos un bloque de texto donde pondremos el nombre de nuestra pantalla de inicio, quedará de la siguiente manera.
Bien ahora es el momento de ejecutar nuestra aplicación y ver cómo todo funciona correctamente, veréis que si introducimos los datos en la pantalla de crear alumno y pulsamos el botón de crear alumno, en nuestra página de fusion tables al actualizarla podemos ver los cambios, y si consultamos desde nuestra aplicación también podremos verlo, podremos hacer la consulta por nombre o por fecha de nacimiento etc…
Una apreciación importante es que cuando hagamos la consulta tenemos que poner el dato, ya sea el nombre la nota o la fecha de nacimiento de la misma manera con la que lo guardamos en la base de datos, respetando las mayúsculas y acentos, de lo contrario no encontrará nada y nos mandara un mensaje de error, hos dejo en vuestras manos solucionar ese asunto ya que no me quiero extender mucho que ya es bastante largo este artículo.
Enlace de descarga del proyecto de fusiontables
Me gustaría tu participación en este blog, si tienes alguna pregunta o comentario que hacer, por favor quiero que lo hagas. Además que compartas esta publicación en tus redes sociales y no dejes de comentar.
