sábado, 25 de mayo de 2019

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.

GPS App Inventor. Calcula distancias.

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.

Calcular distancias linea recta App Inventor 2

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.

Calcular la suma de distancias en App Inventor 2

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.

Diseño calculo distancias App Inventor 2
Componentes para app calculo de distancias App Inventor 2

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.

Variables calculo de distancias

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.

variables calculo distancias App Inventor 2

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.

Sensor Ubicacion App Inventor 2

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.

Cambio ubicación App Inventor 2

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 bloquescontrol, 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í:

Formula Haversein App Inventor 2

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.

Formula matematica calculo distancias App Inventor 2

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.

Sensor ubicacion calcular distancias App Inventor 2

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.



miércoles, 24 de abril de 2019

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.

Componente cronómetro App Inventor 2

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.

Diseño app pantalla cronómetro
Componentes para App Inventor

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.

variables conometro

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.

llamar reloj ahora app inventor 2

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.

boton iniciar cronometro
botón pausar App Inventor 2

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.

botón reiniciar app inventor 2

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.

Propiedades reloj app inventor 2

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.

texto muestra cronómetro app inventor 2

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.

muestra cronómetro app inventor 2

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.


sábado, 13 de abril de 2019

USO DE SELECTOR DE HORA Y SELECTOR DE FECHA EN APP INVENTOR 2

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 TiempoActual  y 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 TiempoActual utilizando 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ésFechaRecibida y 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 SelectorDeHora es similar a DatePicker TimePicker se 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ésdeDefinirHora y 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.

Descarga el archivo AIA en tu ordenador


domingo, 31 de marzo de 2019

COMO VISUALIZAR UNA WEB EN TU APLICACION DE APP INVENTOR 2


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 VisorWeb no es un navegador completo, es un componente que solo muestra la página web. VisorWeb no 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.

Descarga el ejemplo WebViewer AIA

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.

domingo, 17 de marzo de 2019

CREA UN PODÓMETRO CON APP INVENTOR EN CUESTIÓN DE MINUTOS

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.


DESCARGA EL ARCHIVO AIA

Acceda al archivo del programa en Podometro


domingo, 10 de marzo de 2019

COMO ADAPTAR TU APP A DIFERENTES PANTALLAS CON UNOS SENCILLOS PASOS

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.




martes, 19 de febrero de 2019

FIREBASEDB EN APP INVENTOR 2

¿Qué es FirebaseDB?

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.

Descargar el código AIA

Descargar: EjemploFirebaseDB.aia

Compartir archivos y texto con Sharing

En alguna ocasión, tendrás que crear una aplicación en app inventor en la que quieras mandar fotos y videos a otras aplicaciones instaladas ...