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.
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.
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í.
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
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.
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.
