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.

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

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.