Muchas veces mirando en la red me he encontrado muchos tutoriales de como crear un cronometro en App Inventor 2 y todos o la gran mayoría utilizan un método que aunque válido no es el correcto, recuerda que en programación no hay una única manera de hacer las cosas y que dos programadores pueden obtener el mismo resultado creando distinto código.
En el artículo de hoy vamos a ver como crear un cronometro haciendo uso de los bloques que nos ofrece el componente no visible Reloj.
Vamos a crear una aplicación en la que tendremos dos contadores, uno de ellos contara hacia delante (Cronometro) y otra hacia atras (Cuenta atras) que se activaran a la vez cuando pulsemos el botón inicio, podremos pausar la cuenta pulsando al botón correspondiente y reiniciarla.
Creando el diseño del cronómetro en App Inventor 2
El diseño de la pantalla se a creado utilizando una DisposicionVerticaly dentro de esta una etiqueta con el título cronómetro, más abajo una DisposiciónHorizontal donde introduciremos la etiqueta que mostrará el cronómetro, seguido y más abajo meteremos otra etiqueta con el título cuenta atrás y más abajo de esta colocaremos otra DisposiciónHorizontal donde introduciremos la etiqueta que mostrará la cuentra atrás, abajo volveremos a colocar una DisposiciónHorizontal donde colocaremos tres botones que contendrán los textos inicio pausa y reiniciar, el botón de pausa lo dejaremos oculto desmarcando en sus propiedades la casilla visible.
También necesitaremos un componente no visible reloj , que se encuentra en Paleta → Sensores → Reloj. Arrastra el componente Reloj al lienzo.
Al final de este articulo podras descargar el archivo AIA para abrir en App Inventor y de esta manera poder ver más detenidamente el ejemplo.
Programación de la aplicación de cronómetro en App Inventor 2
Lo primero que vamos a necesitar es crear tres variables globales para el control de nuestra aplicación, la primera la nombraremos contador y la inicializamos a cero. La segunda la nombraremos milisegundos y la inicializamos con un cuadro de texto vacío. Y por último nombraremos a nuestra tercera variable global como cronómetro y terminaremos este paso dándole un valor booleano de falso.
Los siguiente será dar el valor a la variable global milisegundos de la hora actual al inicializar la aplicación, para ello utilizaremos el bloque del componente no visible reloj, que devuelve un instante de la hora actual obtenida del reloj del teléfono.
Ahora lo que vamos hacer es programar la lógica de nuestros botones, recordar que ya dejamos oculto el botón pausa en nuestro layout. El primero que programaremos es el botón que hará disparar nuestros cronómetros, para ello al hacer click al botón inicio pondremos la variable global Cronómetro con el valor lógico cierto. Seguido ocultaremos el botón de reinicio y haremos visible el botón de pausa.
Seguido programaremos el botón pausa, este revertirá o hara exactamente lo contrario que el anterior cambiará el valor lógico de la variable global Cronómetro a falso, también hará visible el botón de reinicio y ocultaremos el botón de pausa.
Ahora toca el botón de reinicio, lo primero pondremos la variable global Cronómetro con el valor lógico falso esto hará parar nuestros cronómetros, ahora tanto la etiqueta TxtCónometro como TxtCuentaatrás las uniremos con un bloque de texto que en su interior pondremos el siguiente texto 00:00:00:00 y pondremos la variable contador a cero, el uso de esta variable lo veremos más adelante.
Antes de empezar a programar nuestro cronómetro y cuenta atrás, tenemos que asegurarnos de que el componente no visible reloj en sus propiedades tiene marcado todas sus opciones y que el valor del intervalo del temporizador es 100, de lo contrario la aplicación no funcionará correctamente.
Ahora si vamos a comenzar a programar los cronómetros. Necesitamos que cada vez que se dispara el reloj, se compruebe que la variable global cronómetro tenga el valor de cierto y si esto es así, a la variable contador le sumaremos 100, de esta manera estaremos creando un bucle en el que cada vez que se dispare el reloj se sumará 100 a la variable contador y parará cuando el valor de la variable global cronómetro sea falso.
Vamos a comenzar por el funcionamiento del cronómetro, para ello asignaremos la la etiqueta TxtConómetro el valor de de un instante representado en el formato de hora, minuto, segundo y centésimas que lo expresaremos de la siguiente manera “HH:mm:ss:SS”. Puedes ver los formatos posibles aquí. El instante que utilizaremos lo tenemos que sacar en milisegundos y estos milisegundos lo sacaremos de hacer la operación de la duración o diferencia del momento actual con la suma de la variable contador más el momento actual. Recuerda que el momento actual se lo asignamos a la variable global milisegundos al inicializar la aplicación.
Fijate que a la operación matemática del final de los bloques le he restado 3600000, que equivale a al número de milisegundos que tiene una hora, esto lo hago para evitar que el cronómetro se inicie con una hora de más, efecto que no le encuentro explicación, pero que con esto se resuelve.
El funcionamiento de la cuentra atrás es igual, para ello asignaremos la etiqueta TxtCuentraAtras el valor de de un instante representado en el formato de hora, minuto, segundo y centésimas que lo expresaremos de la misma manera “HH:mm:ss:SS” el instante que utilizaremos lo tenemos que sacar de milisegundos y estos milisegundos lo sacaremos de hacer la operación de la duración o diferencia del momento actual, con la resta de la variable contador, más el momento actual. recuerda que el momento actual se lo asignamos a la variable global milisegundos al inicializar la aplicación.
De esta manera tenemos un código bastante optimizado haciendo uso del componente reloj y que a mi manera de entender es la manera correcta de crear un cronometro.
Me gustaría que participarán en este blog dejando un comentario, también puedes compartir este artículo en las redes sociales y seguirnos en las mismas un saludo.
A veces el usuario tendrá la necesidad de establecer el tiempo en nuestra aplicación. Al hacer esto en vez de pedir al usuario que introduzca los datos de tiempo en forma manual rellenando una serie de campos, le podemos crear una bonita interfaz gráfica de usuario para ingresar los datos.
App Inventor 2 está equipado con un componente no visible llamado SelectorDeHora (TimePicker) que podemos integrar en nuestra aplicación para proporcionar la selección de hora a los usuarios. Cuenta con un bonito diseño y aspecto. Por ejemplo, el SelectorDeHora muestra lo siguiente:
La hora se cambia girando la manecilla de color verde, una vez seleccionada las horas se podrá seleccionar los minutos. Con este sistema, nos aseguramos que el usuario nunca puede ingresar un tiempo no válido.
SelectorDeFecha (DatePicker) presenta una visualización similar pero en lugar de horas y minutos, SelectorDeFecha muestra el mes, el día del mes y el año.
El diseño que se muestra en las imágenes se consigue cambiando el tema de nuestra aplicación, cambiando de Classic a Device Default. No se si este tema está en distintos dispositivos y imagino que dependerá de la versión de android en el mismo.
La vista del diseñador
Para ver el uso de SelectorDeHora y SelectorDeFecha ,vamos hacer un sencillo programa con un botón para cada uno de los selectores, el primero para seleccionar la hora y el segundo para seleccionar una fecha. Después de seleccionar la fecha o la hora, el valor seleccionado se muestra en la pantalla mediante una serie de etiquetas:
El diseño de la pantalla se a creado utilizando una DisposicionVertical y dentro de este dos DisposicionVertical y dentro de cada una de estas en la parte superior un SelectorDeHora y un SelectorDeFecha, en la parte inferior dos DisposicionHorizontal, que contendrán dos etiquetas cada una que mostrarán el resultado de la selección. Al final de este articulo podras descargar el archivo AIA para abrir en App Inventor y de esta manera poder ver más detenidamente el ejemplo
También necesitaremos un componente no visible reloj , que se encuentra en Paleta → Sensores → Reloj. Arrastra el componente Reloj al lienzo.
Programacion de la aplicación con bloques
Para obtener la fecha y hora actuales, nuestra aplicación llama al Reloj1. La hora o el tiempo se devuelve en un formato interno que se basa en milisegundos, desde el año 1970. Este formato se tiene que convertir en valores de año, mes, día, hora y minuto.
Lo primero es inicializar una variable local que nombraremos como TiempoActualy que le daremos el valor de 0, seguido le guardaremos el valor de obtener la hora actual del sistema. Esto se hace haciendo referencia a la propiedad Llamar Reloj1.HacerInstanteDesdeMilisegundos y luego se la pasa al método llamar Reloj1.HoraDelSistema.
Lo segundo es convertir el valor de la variable TiempoActualutilizando métodos adicionales de Reloj1. Para el año , mes y día del mes .
Seguido obtendremos las horas y los minutos, pero lo haremos utilizando un método alternativo para Llamar Reloj1.Ahora para obtener la hora actual.
El Selector de fecha se activa automáticamente cuando se presiona el botón, no es necesario llamar a DatePicker. El uso es automático. Sin embargo, una vez seleccionada la fecha, se produce el evento despuésFechaRecibiday aquí es donde se debe insertar el código para utilizar la fecha seleccionada. En este ejemplo, el año, mes y día seleccionados se convierten en una cadena de texto y se muestran en la pantalla de la aplicación:
El SelectorDeHoraes similar a DatePicker– TimePickerse activa automáticamente cuando se pulsa el botón Establecer hora en la pantalla. Una vez que se haya seleccionado el tiempo, el código procesa el evento DespuésdeDefinirHoray obtiene los valores SelectorDeHora1.Hora y SelectorDeHora1.Minutos .
Con este código, tienes las piezas para ingresar fechas y horas. Los valores pueden almacenarse en una tabla de TinyDB o MiniWebDb.
El visor web no es un navegador completo. Por ejemplo, al presionar la tecla Atrás del del dispositivo saldrá de la aplicación, en lugar de retroceder en el historial del navegador, esto se puede arreglar programáticamente, pero en este ejemplo solo veremos cómo manejar el componente.
Para crear este ejemplo vamos a utilizar el componente WebViewer o VisorWeb para la visualización de páginas web en App Inventor 2. La URL o dirección web se puede insertar en el Diseñador mediante una caja de texto o en el Editor de bloques. En el diseño se puede configurar un botón para abrir la dirección web cuando se pulse.
El diseño de la aplicación
El diseño consta de una disposición vertical que contendrá un campo de texto, donde el usuario podrá ingresar la URL de la web y justo debajo un botón que abra la dirección ingresada, justo debajo de este botón arrastramos el componente WebViewer desde paleta → interfaz de usuario → VisorWeb
El VisorWebno es un navegador completo, es un componente que solo muestra la página web. VisorWebno admite las funciones de un navegador, como guardar el contenido de la página web ni proporciona un historial de las páginas visitadas.
Dejare mas abajo el enlace para descargar el proyecto en formato AIA, y de esta manera verás como se ha construido el diseño.
La programación con bloques
En esta aplicación haremos una serie de comprobaciones al pulsar el botón1.
En primer lugar nos aseguraremos con un bloque If que nuestra caja de texto contiene una dirección, es decir no esta vacía, y si esto es cierto nos aseguraremos que la dirección contenga o empiece por http://, si no es así, programáticamente se lo insertamos para después dirigirnos a la página.
La página se muestra en la pantalla donde colocó el componente Web (en la vista de Diseñador). Eso es todo lo que hace falta para mostrar una página web en una aplicación programada en App Inventor2
Podéis ver que es muy sencillo abrir páginas web en app inventor. Solo tienes que introducir una dirección válida en el cuadro de texto y la aplicación abrirá la web.
Me gustaría que participarán en este blog dejando un comentario, también puedes compartir este artículo en las redes sociales y seguirnos en las mismas.
App Inventor 2 incorpora un componente no visible que cuenta los pasos que el usuario hace a la hora de andar, este componente es el podómetro. Este componente hace uso de los sensores de movimiento (acelerómetros) del dispositivo para comprobar que se está caminando con él, y nos devuelve la cantidad de pasos que se da al caminar. Podemos también indicar al componente cual es la longitud del paso, ya que en cada individuo la distancia de la zancada es distinta debido a factores como la altura o la pisada, una vez configurada dicha distancia el podómetro nos dará una distancia aproximada que se ha recorrido.
Para este ejemplo crearemos una aplicación donde introduciremos la distancia del paso en metros, seguido tendremos dos botones, uno para que comience a contar los pasos y otro para parar, también tendremos varias etiquetas para mostrar toda la información.
CREANDO EL DISEÑO
En el Diseñador, arrastra una disposición horizontal en la parte superior, introduce una etiqueta y cambiale su texto por Introduce distancia del paso :, luego arrastra un campo de texto a su derecha.
Arrastra al diseño otra disposición horizontal y introduce dentro dos botones. Cambia el nombre de cada uno, uno para el botón Iniciar medición y el otro para el botón Detener medición
Luego, arrastra otra disposición horizontal introduce dentro dos etiquetas: una tendrá el texto «Distancia recorrida:» y la segunda mostrará la distancia recorrida.
También arrastraremos el componente no visible “podómetro” al diseño, el podómetro se encuentra en paleta → interfaz de usuario → sensores.
Más abajo de este artículo dejaré un enlace para descargar el proyecto y que podáis ver y estudiar más detenidamente el diseño de la aplicación
PROGRAMACIÓN DE BLOQUES
El podómetro se iniciara pulsando el botón 1 y llamando a su método .Start, pero antes tendremos que comprobar que en el campo de texto se ha introducido la distancia de la zancada, si no es así haremos que la aplicación le de el valor de 0,5 metros por defecto.
Para parar el podómetro pulsaremos el botón 2, como se puede ver no solo se parará si no que también se reiniciara, es decir sus valores se pondrán a cero.
A medida que se camine con la aplicación, el bloque cuando Podometer1.Paso nos devolverá dos parámetros : Pasos y Distancia. El parámetro de distancia devuelve la distancia recorrida.
Ahora por último nos queda ejecutar la aplicación con nuestro método favorito, meternos el dispositivo en el bolsillo, veremos que poco a poco a medida que andemos el contador de pasos se irá incrementando y por supuesto también se incrementará la distancia.
Me gustaría que participarán en este blog dejando un comentario, también puedes compartir este artículo en las redes sociales y seguirnos en las mismas.
Es difícil crear una aplicación que se vea igual en diferentes pantallas de dispositivos. Una forma de intentar solucionar esta problema es saber cuánto espacio de pantalla ocupará cada componente, indistintamente del tamaño de la pantalla. Imagina que tienes una imagen y un botón. Si quieres que la imagen ocupe el 80% de la altura total de la pantalla y el botón que ocupe el 20% restante, tendrás que calcular el alto de la pantalla del móvil y de esta manera ajustar cada componente.
En App Inventor nos ofrece una serie de bloques con los que podemos consultar el ancho y alto de la pantalla, que son el ancho y el alto del de la pantalla del dispositivo real en el que se esté ejecutando la aplicación en ese momento. Y podemos usarlos para calcular el espacio que nuestros componentes deben ocupar en la pantalla del dispositivo indistintamente del tamaño que tenga.
En el diseño del layout, tenemos cuatro componentes principales: una etiqueta en la parte superior, una disposición horizontal, una disposición vertical y un botón en la parte inferior. Cada disposición tiene un componente de etiqueta.
Queremos que la etiqueta superior tenga el 10% de la altura, que cada disposición ocupe el 40%, y el 10% en el botón inferior. Eso es un total del 100%. Por supuesto que todos los componentes tengan el ancho total de la pantalla.
Como puedes ver, utilizamos el ancho de la pantalla para todos los componentes. Luego le damos la altura a cada componente utilizando la altura de la pantalla multiplicado por el porcentaje de pantalla que queremos que tenga, a si por ejemplo para las etiquetas superiores y el botón tenemos 0.10, qué es el resultado de dividir 10/100. Ten en cuenta que hay una etiqueta dentro de cada disposición. En el diseño, configuramos el ancho y el alto para Ajustarlo al padre para tomar todo el ancho y alto de su disposición.
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.
FirebaseDB te proporciona una base de datos en la nube para tus aplicaciones de App Inventor y admite el intercambio de datos entre usuarios simultáneamente. Cuando se cambian los datos en tu FirebaseDB , todas las aplicaciones reciben alertas de los datos actualizados.
En este momento, FirebaseDB es una función experimental con limitaciones, aún no puede configurar su propia cuenta personal de FirebaseDB, sino que debe usar una única FirebaseDB ejecutada por MIT como una «cuenta compartida». El uso compartido está limitado a todos los usuarios de una sola aplicación y no está disponible entre diferentes aplicaciones.
La interfaz de programación para FirebaseDB es casi la misma que la utilizada para TinyWebDB . TinyWebDB es una base de datos simple basada en la nube: para usar, debe configurar TinyWebDB en su propio servidor o en los servidores de Google. Con sus datos almacenados en la «nube», sus datos pueden ser compartidos entre muchas aplicaciones. Para la demostración de FirebaseDB, no necesita configurar su propio servidor, ni necesita usar TinyWebDB:
Una aplicación de ejemplo
vamos a crear una aplicación simple que almacene y recupere un valor de texto desde FirebaseDB. Al igual que con TinyDB o TinyWebDB ,vamos a utilizar un campo de texto donde introduciremos el valor a buscar, por ejemplo, un valor a buscar podría ser el nombre de una persona y el resultado podría ser el número de teléfono de esa persona.
La aplicación funciona ingresando un nombre y un valor en cada uno de los campos de texto. Los valores ingresados se guardaran en la base de datos FirebaseDB “en la nube”.
Después de que se haya guardado los valores, podremos recuperarlos ingresando el nombre con el que se guardó y presionando Recuperar valor. Los datos correspondientes al nombre se recuperan de FirebaseDB y se muestran en el campo Valor, de la pantalla.
Si la aplicación se ejecuta simultáneamente en otros dispositivos, cualquier actualización de datos realizada en los otros dispositivos hará que todos los dispositivos reciban una notificación de cambio de datos. Cuando se cambian los datos en FirebaseDB, los nuevos datos se muestran en todos los dispositivos.
Vista del diseño
Se utiliza una combinación de disposiciones verticales y horizontales para organizar tanto los botones como las cajas de texto y etiquetas.
Necesitaremos dos botones a los que introduciremos los textos de Almacenar valor y Recuperar valor. Utilizaremos dos etiquetas una para el nombre y otra para el valor o número de teléfono y dos cajas de texto justo al lado de cada etiqueta.
Arrastre el componente FirebaseDB desde la sección Experimental de la paleta de interfaz de usuario.
Programando la aplicación
El botón btnGuardarValor lee el valor numérico insertados en los cuadros de texto en la pantalla y luego los guarda en FirebaseDB . Ve a bloques → screen1 → FirebaseDB1 y arrastra el bloque GuardarValor de FirebaseDB al visor de bloques.
Obtener el valor guardado es muy fácil, utilizaremos el bloque ObtenerValor de FirebaseDB y tendremos que darle el valor de la etiqueta. A diferencia de TinyDB (pero similar a TinyWebDB ), el valor no se lee instantáneamente, sino que, una vez que los datos están leídos, se llama al evento ObtenerValor. Donde estarán los datos recogidos de nuestra aplicación, y los datos se se mostraran nuevamente en el cuadro de texto Valor, en la pantalla.
Una característica única de FirebaseDB es la capacidad de la base de datos para alertar a las aplicaciones de que se han cambiado los datos dentro de la base de datos. Esta alerta provocó que ocurriera un evento DataChanged , y que entrega la etiqueta y el valor que se actualizaron en la aplicación.
FirebaseDB es experimental e incompleto, está sujeto a cambios y no debes confiar que te funcione siempre. Sin embargo, puedes usarlo para aprender y experimentar.
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 contenidoes 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. Clicejecuta, 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.
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.
