Chat en App Inventor con CloudDb

Hola y bienvenido una vez más a inventordeaplicaciones.es. En este vídeo te enseñaré a usar el componente CloudDB en App Inventor 2 y ha abrir una cuenta gratuita en el software Redis para el almacenamiento en la nube.

Con la combinación de estos dos elementos crearás una aplicación de chat en app inventor con cloudDB. 

¿Qué es CloudDB?

CloudDB es un componente no visible que después de la actualización nb179 el componente deja de ser experimental para situarse en componentes de almacenamiento. Este componente te permite almacenar datos en un servidor de datos conectado a Internet (utilizando el software Redis). Esto permite que tu aplicación comparta datos con otros usuarios que tengan la misma aplicación.

De forma predeterminada, cuando estés creando una aplicación los datos se almacenarán en un servidor mantenido por MIT. Pero este servidor tiene una serie de inconvenientes. Los datos no se guardarán de forma persistente, es decir, en cualquier momento pueden desaparecer. La base de datos será compartida con otros usuarios de App Inventor 2 pudiendo alterar los datos almacenados. Por último este servidor es muy inestable, dándose el caso que pudiera caerse en cualquier momento, sin embargo, puedes configurar y ejecutar tu propio servidor.

 Podemos modificar la propiedad «RedisServer» y la propiedad «RedisPort» para acceder a tu propio servidor. Veremos un ejemplo creando una cuenta y usando el Software Redis.

Diseñando la aplicación para el chat en App Inventor con CloudDb

Como el diseño es bastante complejo dejaré un enlace para descargar el proyecto de la aplicación en formato AIA para abrir con App Inventor. De esta manera podrás ver con más detalle cómo está diseñada la aplicación y por supuesto seguir este tutorial fácilmente.

Pincha en este enlace para descargar el archivo AIA.

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

Programando la aplicación de chat en app inventor con cloudDB

Lo primero que crearas para tu chat en app inventor con cloudDB, es una variable global a la que le darás el nombre de “USUARIO”. Te servirá para almacenar el valor que el usuario escoja al pulsar el botón en la primera pantalla. Inicializa la variable con un bloque de texto vacío.

Lo siguiente es programar los botones que servirán para definir quién es el usuario uno y el usuario dos. Y una vez hecho esto cambiar de pantalla. 

Comienza por el botón que definirá el usuario uno. Necesitas que al pulsar el botón “BtnUsuario1” guarde en la variable que anteriormente creaste el valor de “USUARIO1”. Seguido debes de cambiar de pantalla, o en este caso hacer visible la otra disposición vertical. Tiene que quedar de la siguiente manera.

Tendrás que hacer lo mismo para el botón “BtnUsuario2”. Pero esta vez a la hora de darle valor a la variable, le introducirás el valor “USUARIO2”. lo demas sera exactamente igual.

Una vez que has definido quien es cada uno de los usuarios, vas a programar la parte de envío de mensajes. Cuando el usuario introduzca un texto en la caja y pulse enviar este se envíe y guarde en la nube para posteriormente utilizarlo.

Lo primero que harás es decirle a tu aplicación que si se pulsa el botón “BtnEnviar” y la caja de texto no está vacía. Entonces guardarás el texto en la nube con ayuda del componente CloudDb. Pasándole como etiqueta el valor que tenga la variable global “USUARIO”. Y el valor a guardar, el texto que contenga en ese momento la caja de texto.

Una vez hecho esto, dejaremos la caja de texto vacía para el siguiente mensaje. Lo único que tienes que hacer para esto es cambiar el texto por una caja de texto vacía.

Ahora utiliza el bloque «Cuando CloudDb Datachanged» para detectar cambios en la base de datos. Este bloque no solo te detectará cuando se ha producido un cambio. Si no que devolverá cuál etiqueta y valor se ha introducido o se ha modificado. De esta manera, sabrás si se ha realizado algún cambio.

También necesitas saber cuál de los dos usuarios ha sido. Para ello te vas ayudar del bloque «IF«, y si la última etiqueta que se ha modificado es la del usuario 1. Entonces será la etiqueta de texto de este la que modificaras, asignándole el dato guardado en esta última etiqueta. Si por el contrario la última etiqueta que se ha modificado no es la del Usuario2. Entonces será la del usuario 2, y procederá a modificar la etiqueta de texto de este. Tanto si modificas la etiqueta de texto del usuario 1 o 2, pon un salto de texto ayudándote con «/n». Tiene que quedar de la siguiente manera.

Ahora solo te falta buscar a un amigo y ejecutar tu nueva aplicación. Usando dos dispositivos, uno será el usuario 1 y el otro el usuario 2.

Evidentemente esta aplicación podría mejorar infinitamente. Pero la intención de este artículo es solo la de ver un ejemplo sencillo de cómo puede ayudar el almacenar datos en la nube.

Cómo crear una cuenta en el Software Redis para el uso de cloudDB

Cómo bien te explicaba al principio de este artículo querido amigo, el MIT te ofrecerá almacenamiento en un servidor de pruebas. Pero solo se recomienda el uso mientras dure el desarrollo de la aplicación, una vez terminado se recomienda que se cree una cuenta en el Software Redis. Aquí veremos cómo crear una cuenta gratuita y como configurar el componente CloudDB para utilizarlo en tu chat en app inventor con cloudDB.

Lo primero es dirigirte a tu navegador e introducir la siguiente direccion web https://redislabs.com/ . Que te mandara a la página de Redis Labs donde crearemos una cuenta gratuita. Si te fijas justo en el centro de la página tienes un botón con un recuadro. Donde te pide un correo y un botón donde dice que comiences gratis, introduce tu correo y pulsa al botón.

Inmediatamente después recibirás en la misma cuenta de correo que has introducido un e-mail de bienvenida. Para confirmar el correo y donde se te pedirá que actives la cuenta pulsando al botón.

Al pulsar el botón “Ativate Now” te redirigirá a una página para terminar de configurar su cuenta. Si no está seleccionada la opción de la nube selecciónala y rellena los campos, además de aceptar los términos y condiciones, nos redirigirá a una página que nos dará la bienvenida.

Pulsa el botón donde dice “Create your subscription” para terminar de configurar tu cuenta. Selecciona la opción  “Essentials”  que es la opción gratuita y sin servidos que nos ofrece 30 megas y por cada giga adicional se cobrará 5$.

Nuevamente te dirigira a una nueva página para una nueva suscripción, selecciona nuevamente la opción free si no quieres pagar y pulsa continuar.

Ya está, pon nombre a tu base de datos yo para el ejemplo pondré Prueba0001.

deja como esta las demas opciones y pulsa en “Activate”

Pues bien ya tenemos activada nuestra cuenta. Ahora pulsa sobre ella para coger unos datos que usaremos en nuestro proyecto de App Inventor 2. Solo coge los datos que te muestro en la siguiente imagen he introducelos en la configuración del componente CloudDb

Solo tienes que utilizarlo en la aplicación que has construido en este artículo. Si todo ha ido bien funcionara tu chat en app inventor con cloudDB a la perfección.

Si quieres que hablemos de algún asunto en concreto, o te has quedado atascado en algún desarrollo, no olvides dejarlo en los comentarios. Sin más me despido hasta el próximo tutorial. Un saludo

Como crear listas en App Inventor

Hola y bienvenidos una vez más a Inventordeaplicaciones.es. En este tutorial hablaremos de una problemática que nos expone un usuario de nuestro canal de Youtube. Como crear listas en App Inventor 2 sin repetición. El nos comentaba que deseaba hacer un listado con resultados al azar sin un orden y sobretodo sin que se repitan. Bueno voy hacerlo de una manera que no es la única y que para mi es la más sencilla. Crearemos una aplicación con una lista de cuatro frutas, que al pulsar un botón, este muestra una fruta de la lista. Por supuesto que no se repita, mostraremos los resultados más abajo para comprobar que esto está sucediendo tal como queremos.

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

El diseño de la aplicación para crear listas en App Inventor

El diseño de nuestra aplicación consta de una disposición vertical donde meteremos una etiqueta a modo de título. Esta tendrá el texto de ELEMENTOS DE UNA LISTA AL AZAR. Y que estará en negrita y con un tamaño de 24, para diferenciarlo del resto de etiquetas. Más abajo pondremos una etiqueta que contendrá el texto “Elemento seleccionado”, y debajo una caja de texto que en su opción habilitado la dejamos desactivada. Más abajo pondremos otra etiqueta con el texto “Pulsa el botón”. Para elegir un elemento al azar. Debajo el botón con el texto “Pulsa” y más abajo dos etiquetas. Una que contendrá el texto “Elementos de la lista que no pueden repetirse” y la etiqueta de más abajo sin texto. Tiene que quedarte como muestro en la imagen.

Programando la aplicación

Lo primero que vamos a crear es una variable global a la que llamaremos “ListaFrutas”. La inicializamos construyendo una lista con cuatro frutas Manzana, Pera, Piña y Naranja, en este mismo orden.

Listas en App Inventor 2.

Ahora que ya tenemos nuestra lista de frutas, crearemos otra variable global que llamaremos “ListaFrutasRepetidas”. La inicializamos con una lista, esta vez la lista estará vacía.

Seguido crearemos una tercera variable global que llamaremos “Elemento”. Contendrá una caja de texto vacía, su uso será simplemente el de almacenar los elementos seleccionados al azar temporalmente, para su manejo.

Bien ahora vamos a ver como armar la lógica para que al pulsar el botón nuestra aplicación  muestre elementos sin repetir y al azar. Para ello cuando pulsemos el botón, pondremos la variable global “Elemento” con el valor de escoger un elemento al azar de nuestra lista “ListaFrutas”. Como muestro en la siguiente imagen.

Una vez que hemos hecho esto, comprobaremos que la fruta que hemos introducido en nuestra variable global “Elemento” no esté ya en la lista “ListaFrutasRepetidas”.

Si no está en dicha lista, lo que haremos es poner el texto de nuestra caja de texto con el nombre de la fruta que tengamos en ese momento en la variable global “Elemento”. Y añadiremos la misma fruta de esa variable a la lista “ListaFrutasRepetidas”.

Solo nos queda una única cosa. Qué es añadir la fruta que ha salido, a una lista que se mostrar en nuestra última etiqueta. Lo haremos tal como muestro en la imagen.

Solo nos queda probar nuestra App y veremos que al pulsar el botón se irán mostrando al azar las frutas contenidas en nuestra lista. Pero solo una única vez. Por supuesto que se puede mejorar la App. Pero la misión de este tutorial es mostrar una manera de no repetir elementos de una lista al azar.

Si quieres que hablemos de algún asunto en concreto, o te has quedado atascado en algún desarrollo, no olvides dejarlo en los comentarios, intentaremos solucionarlo,

si quieres descargar el proyecto AIA para abrirlo en App Inventor pulsa aquí.

LÍMITE PANTALLAS APP INVENTOR 2

Hola y bienvenidos una vez más a inventordeaplicaciones.es. En el artículo de hoy vamos a ver cómo solucionar el problema de límite de pantallas en App Inventor 2.

Hace ya algunas semanas un usuario de nuestra página web nos hizo una consulta sobre las pantallas en App Inventor 2, él estaba desarrollando una aplicación en la que necesitaba crear un número bastante importante de pantallas, y me comentaba que App Inventor 2 no le permitía seguir su desarrollo ya que estaba limitado en el número de pantallas, eso le hacía sentir bastante frustrado  porque llevaba tiempo desarrollando la aplicación y veía que no podía culminar su proyecto. vamos a ver cómo podemos ayudar a nuestro amigo dandole una solución práctica y muy simple, solo creando dos pantallas y solucionarlo.

Diseño de la aplicación de límite de pantallas en App Inventor 2

Para nuestra nueva aplicación crearemos dos pantallas y antes de hacer nada, en la propiedad animación de cierre de pantalla y animación al abrir la pantalla seleccionar zoom, con esto conseguiremos un efecto de cambio de pantalla más profesional, también he seleccionado del desplegable de la opción Theme de la Screen 1, la opción Device default .

Continuando con el diseño en la primera pantalla pondremos dos disposiciones verticales que tanto el alto como el ancho esté ajustado al contenedor, a la primera disposición vertical, la llamaremos Pantalla 3 y la segunda Pantalla 1, en la primera disposición a la que llamamos Pantalla 3, meteremos dentro una etiqueta en la que introduciremos el texto ESTAS EN LA PANTALLA 3, y seguido metemos debajo una disposición vertical en la que dentro meteremos un botón, este contendrá el texto de siguiente, para la segunda disposición a la que llamamos Pantalla 3 haremos exactamente lo mismo, pero el texto de la etiqueta será ESTÁS EN LA PANTALLA 1,  a la disposición vertical Pantalla 3 le desactivaremos la casilla de visible, de esta manera cuando ejecutemos nuestra aplicación solo veremos una disposición vertical, ya vas intuyendo cómo lo vamos a solucionar…

Para nuestra segunda Screen, haremos exactamente los mismo, pondremos dos disposiciones verticales a las que llamaremos Pantalla 2 y Pantalla 4 y dentro nuevamente meteremos dos etiquetas y dos disposiciones verticales, donde meteremos dos botones, las etiquetas contendrán el texto  ESTAS EN LA PANTALLA 2 y ESTAS EN LA PANTALLA 4, los botones contendrán el mismo texto menos el botón de la disposición vertical pantalla 4, a este último le pondremos el texto VOLVER. Las dos disposiciones verticales creadas en esta segunda pantalla le dejaremos la casilla de visible desactivada, de esta manera por ahora la única disposición vertical visible será la de la Pantalla 1. Te quedara algo asi como lo que te muestro en la imagen.

Programando la aplicación de límite de pantallas en App Inventor 2

Ya que tenemos el diseño de nuestra aplicación terminada vamos a comenzar la programación de la primera Screen para solucionar el límite de pantallas en App Inventor 2. Empezaremos por esta ya que es la que por defecto App Inventor mostrará al iniciar nuestra aplicación.

Vamos a crear en primer lugar una variable global que utilizaremos para saber y controlar en qué pantalla estamos en ese momento nos y que llamaremos NúmeroPantalla.

“Cuando nombro pantalla en este tutorial me refiero a la disposición vertical que tengo activada la vista en ese momento”

Lo segundo que haremos es que cuando arranque nuestra Screen le diremos programáticamente que muestre la disposición vertical (Pantalla3) y oculte la disposición vertical 2 (Pantalla1). Más adelante y según vayamos construyendo nuestra aplicación añadiremos más bloques, pero de momento lo dejaremos tal cual se muestra en la imagen.

Ahora le diremos a nuestra aplicación que cuando pulsemos el botón 1 abra la Screen 2 pero pasandole un valor inicial a esa pantalla, utilizaremos para ello el bloque:

Abre otra pantalla con valor inicial, nombre de pantalla, valor inicial.

Para el nombre de pantalla pondremos Screen 1, para el valor inicial que le pasaremos a esta pantalla le pondremos el valor de 2.

Para el botón 2 haremos exactamente lo mismo, la diferencia estará en el valor que le pongamos al valor inicial que será 4. Date cuenta que el valor corresponderá a la pantalla que queramos mostrar en ese momento.

Bien ahora iremos a la pantalla de bloques de la Screen2, y crearemos una variable global a la que también llamaremos NúmeroPantalla y le daremos el valor de cero.

Cuando inicie la Screen 2, lo que haremos es darle a nuestra variable el valor que nos manda la Screen 1 y comprobaremos que el valor de la variable sea igual a 2, si es así, pondremos nuestra Pantalla 2 visible y ocultaremos nuestra Pantalla 4, si de lo contrario la variable no contiene el valor de dos, entonces haremos lo contrario, haremos visible la Pantalla 4 y ocultaremos la Pantalla 2.

Para el botón 1 y 2 de la Screen 2 haremos exactamente lo mismo que con los dos botones de la Screen 1, la diferencia estará que abriremos esta vez la Screen1 y en el valor que le pongamos al valor inicial será para el botón 1  el valor de 3, y para el botón 2 será 1. Te recuerdo que el valor corresponderá a la pantalla que queramos mostrar en ese momento.

Bien antes de probar la aplicación vamos a volver a nuestra Screen 1, y es que ahora deberemos meter la lógica necesaria para que cuando volvamos de nuestra Screen 2, nuestra primera Screen nos muestre la pantalla que corresponda al valor mandado por el valor inicial, esto es facil, solo deberemos hacer lo mismo que en la Screen 2, comprobaremos que el valor de la variable sea igual a 3, si es así, pondremos nuestra Pantalla 3 visible y ocultaremos nuestra Pantalla 1, si de lo contrario la variable no contiene el valor de tres, entonces haremos lo contrario, haremos visible la Pantalla 1 y ocultaremos la Pantalla 3. Quedará de la siguiente manera.

Si ahora ejecutamos nuestra aplicación y  pulsamos los correspondientes botones, pasaremos de una disposición vertical a otra utilizando la animación de cierre de pantalla y de abrir pantalla, de esta manera queda solucionado el problema de límite de pantallas en Appinventor 2.

Si quieres que hablemos de algun asunto en concreto, o te has quedado atascado en algun desarrollo, no olvides dejarlo en los comentarios, intentaremos solucionarlo,

si quieres descargar el proyecto AIA para abrirlo en App Inventor pulsa aquí.

Sin más me despido hasta el próximo videotutorial. Un saludo

Calcular GPS App Inventor 2

Este artículo ha surgido tras la petición de un lector que tras leer el artículo de cómo crear un Podómetro en App inventor nos preguntaba cómo podíamos Calcular distancias con el GPS de App Inventor o medir la distancia recorrida con el GPS. Bien vamos a explicar cómo se puede hacer esto.

Calcular la distancia entre dos puntos sobre un plano podría llegar a ser relativamente sencillo.

Tendríamos un punto de origen A y un punto de destino B, pero esto nos daría como resultado una línea recta.

Cómo en nuestro caso queremos medir la distancia total de un trayecto A, D pasando por B y C y este no es en línea recta, la distancia resultante entre dos puntos no nos servirá. En este caso tendremos que ir calculando la distancia de A y B y sumarla a la distancia de B y C y el resultado sumarlo a la distancia de C y D.

De esta manera dará como resultado la distancia total recorrida.

En segundo lugar cuando estos dos puntos los ubicamos sobre la esfera terrestre, (latitud + longitud), la cosa se complica. Ya que para calcular la distancia sobre una esfera no es lo mismo que sobre un plano. Pero tranquilos que también le daremos solución, y es aquí donde utilizaremos la fórmula de Haversine.

Creando el diseño para calcular distancias con el GPS de App Inventor.

El diseño de la pantalla se a creado utilizando dos DisposiciónVertical y una DisposiciónHorizontal, en la primera meteremos dos DisposiciónHorizontal  una contendrá dos etiquetas una con el texto «Latitud» y otra con cero esta última nos valdrá para mostrar los datos de nuestro GPS, en la segunda etiqueta pondremos  el texto Longitud y otra con cero esta última nos valdrá para mostrar los datos de Longitud de nuestro GPS.

En la segunda DisposiciónVertical meteremos cuatro etiquetas las dos primera mostraran la longitud y latitud del punto de partida y las dos últimas mostraran la longitud y latitud del punto de destino, estos datos los iremos actualizando programáticamente.

la última DisposiciónHorizontal tendrá en su interior tres etiquetas la primera contendrá el texto distancia, la segunda la utilizaremos para mostrar los kilómetros recorridos y la tercera contendrá la siglas Km para referirse a la unidad de distancia con la que estamos midiendo. Y por último necesitaremos un componente no visible posicionamiento, que dejaremos su configuración por defecto.

Podrás descargar al final de este artículo el proyecto AIA para ver como se ha diseñado más detenidamente

Programando la aplicación.

Vamos a utilizar la fórmula de Haversine para calcular la distancia entre dos puntos en una esfera terrestre

Sin entrar en demasiados detalles en términos matemáticos, la Fórmula del Haversine es:

R = radio de la Tierra

Δlat = lat2− lat1

Δlong = long2− long1

a = sin²(Δlat/2) + cos(lat1) * cos(lat2) * sin²(Δlong/2)

c = 2 * atan2(√a, √(1−a))

d = R * c

Para utilizar la Fórmula del Haversine necesitamos, además de las dos posiciones (latitud + longitud), el radio de la Tierra, que es 6371, pero este dato lo usaremos más adelante.

Entonces lo primero que haremos es crear cuatro variables globales a las que llamaremos LongitudA, LatitudA, LongitudB, LatitudB, y las inicializamos a cero. Como lo que queremos es medir dos puntos las dos primeras guardarán la longitud y latitud del punto de partida y las segundas guardarán la latitud y longitud del punto de destino.

Seguido crearemos otra variable global a la que llamaremos PrimeraLocalización y que contendrá un valor lógico, en este caso cierto, está variable se encargará de que no comencemos la aplicación con una de nuestras coordenadas a cero ya que esto daría como resultado una distancia enorme y errónea. También crearemos una variable global que más adelante guardará la distancia recorrida y que inicializamos a cero.

Lo segundo que haremos es que al iniciar la aplicación pondremos el intervalo de tiempo del sensor de ubicación en 3000, esto hará que solo compruebe que se ha cambiado de posición cada 3 segundos.

Bien lo tercero es comprobar un cambio de localización y si es la primera vez que esto sucede, para lo que entra en juego la variable global PrimeraLocalización, que comprobando con un bloque IF que el valor de nuestra variable sea cierto, sabremos  que es la primera vez que obtenemos una ubicación y guardaremos las coordenadas de Longitud y Latitud de nuestro GPS que nos devolverá el bloque cuando SensorDeUbicación.CambioEnUbicación en nuestras variables globales LongitudA, LongitudB y LatitudA, LatitudB que ya creamos, y por supuesto justo después pondremos a falso la variable PrimeraLocalizacion. De esta manera lo que conseguiremos es que en el siguiente cambio de ubicación ya no sea la primera vez y por tanto cada vez que haya un cambio de posición, lo que antes era la posición de destino ahora sea la posición de origen y así sucesivamente, esto lo lograremos solo si nuestra condición es falsa, es decir el valor de la variable PrimeraLocalizacion es falso, si es así daremos el valor de la LatitudB a la LatituA y el valor de la LongitudB a la LongitudA. Con esto conseguimos que la posición de destino se convierta en la posición de origen.

En este punto aprovecharemos para mostrar los datos de nuestras cuatro variables en su correspondientes etiquetas.

Lo cuarto será calcular en base a los datos de nuestras variables globales la distancia, para ello vamos a crear en App inventor 2 un procedimiento que devuelva un resultado al que llamaremos  Haversine, el cual tendrá la responsabilidad de calcular la distancia entre ambas posiciones; en definitiva, contendrá la Fórmula del Haversine.

Dentro de este procedimiento inicializamos cuatro variables locales a las que inicializamos a 0, a las dos primeras las llamaremos NLatitud y NLongitud, y a las segundas las llamaremos A y C.

Ahora pasamos ya a las operaciones matemáticas. Pero antes deberemos arrastrar el bloque ejecutar resultado situado en bloques → control, sin él no podríamos obtener el resultado de la operación. El primer cálculo que debemos hacer es obtener la diferencia entre las latitudes y longitudes de ambas posiciones, dividiendo entre dos y a ese resultado sacar el coseno elevando al cuadrado. Si NLatitud con Lat1 y Lat2 y NLongitud con Lon1 y Lon2, entonces tendremos algo así:

El segundo paso es calcular la mitad del cuadrado de la distancia en línea recta (acorde a la longitud) entre los dos puntos y que vamos a representar en la variable “A” y la raíz cuadrada de “A” representada por “C” y por último el resultado será la del diámetro de la tierra  multiplicado por el valor de “C” pasado a radianes elevado al cuadrado.

Solo nos queda llamar a nuestro procedimiento y mostrar el resultado en nuestra etiqueta correspondiente, para ello nos ayudaremos de una nueva variable global a la que llamaremos DistanciaTotal y que inicializamos a cero.

Seguido asignaremos a nuestra variable global distancia el resultado del cálculo de nuestro procedimiento y a la variable global DistanciaTotal le daremos el valor de la suma de la DistanciaTotal más Distancia, todo ello metido al final de el bloque cuando SensorDeUbicación.CambioEnUbicación.  Después solo nos faltara mostrar el resultado en nuestra etiqueta, quedará de la siguiente manera.

A tener en cuenta

Pese a que la Fórmula del Haversine es de las más utilizadas para el cálculo de distancias entre dos puntos. La fórmula asume que la Tierra es completamente redonda, con lo que cabe esperar una tasa de error que se podría llegar a asumir.

Bueno solo queda instalar en nuestro dispositivo la aplicación para calcular distancias con el GPS de App Inventor, y salir a dar una vuelta para probarla. No olvides encender el GPS en tu teléfono o de lo contrario no funcionara bien.

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.

Descarga el proyecto AIA de la aplicación.

Cronómetro en App Inventor 2

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 DisposicionVertical y 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.

Descarga el proyecto en formato AIA.