Creación de aplicaciones con App Inventor (4)

Continuamos conociendo las diferentes herramientas que aparecen en la paleta de App Inventor.

Paleta - Disposición

- Disposición horizontal: si elegimos ésta y lo arrastramos al interior de la pantalla, aparece un cuadro donde se colocarán los diferentes componentes. A la izquierda nos aparecen las distintas opciones para configurar este cuadro: podemos colocar los componentes de su interior (izquierda, centrado, a la derecha, arriba, centro, abajo), ancho, alto, imagen de fondo del cuadro.

En este cuadro introduciremos diferentes componentes. Por ejemplo varios botones. Vemos que se colocan siguiendo una disposición horizontal.

- Disposición vertical: funciona de forma similar al anterior, aunque en este caso los elementos de su interior se colocarán uno encima del otro.

- Disposición tabular: nos permite distribuir los componentes en una tabla. Nos deja elegir número de filas y columnas, ancho y alto.

Podemos combinar también todas estas disposiciones: arrastramos, por ejemplo, una disposición vertical, y en su interior arrastramos varias disposiciones horizontales. La primera horizontal podría ser el menú, la segunda podría ser una tabular para distribuir ciertos componentes, y en el pie otra disposición horizontal, por ejemplo.

Paleta - Medios

En esta paleta aparecen los componentes que nos permiten interactuar con las opciones que tiene el teléfono, relacionadas con elementos multimedia.
Casi todos estos componentes serán componentes no visibles, que permitirán activar/desactivar estas herramientas en nuestro teléfono.

- Selector de imagen: es un botón que abrirá la galería de imágenes. Se configura igual que las propiedades del botón.

- Reproductor de vídeo: carga una pequeña ventana donde se reproducirá un vídeo. Nos deja ahora configurar qué vídeo se cargará, así como el tamaño de la ventana.

Para ver el resto de componentes, debemos configurarlos en "bloques", ya que son elementos ocultos que no se verán en pantalla.

En primer lugar vamos a colocar un botón, de manera que cada vez que pulsemos sobre él se cargue el componente que queramos. Después, vamos a ir arrastrando los componentes a la pantalla, que se cargarán como componentes no visibles.

- Grabador: no tiene ninguna propiedad.

- Cámara: podemos seleccionar que se active la frontal o la trasera.

- Reproductor: permite reproducir un sonido. Podemos seleccionar que se reproduzca en bucle, solo con pantalla activa, qué sonido queremos ejecutar, volumen inicial. El intervalo mínimo es el número de milisegundos que va a pasar desde que se ejecuta el primer sonido hasta que se vuelva a repetir.

- Grabadora de sonidos: nos permite indicar dónde guardará el sonido que se grabe.

- Reconocimiento de voz: para ejecutar acciones.

- Texto a voz: nos permite traducir texto a un archivo de sonido.

- Traductor: sería necesaria la conexión a internet porque accede al servidor de Yandex.

En cuanto tenemos todos estos componentes cargados en la pantalla1, nos vamos a la edición de bloques.

Primero cargaremos el botón. Cuando hagamos click en el botón, se ejecutará algo.

Ahora nos vamos, por ejemplo, al botón de imagen, para que llame a "abrir".

Lo mismo pasaría con el reproductor de vídeo. Ahora podemos configurar que cuando hagamos ckick en el botón1, llamemos al reproductor de vídeo y se inicie. También prodríamos crear otro botón que pause el vídeo, definir una duración, etc.

Una vez que hayamos finalizado la reproducción del vídeo, podríamos ejecutar una acción que ponga un mensaje del estilo "reproducción finalizada".

- Grabador: similar a los anteriores. Una vez finalizada la grabación del vídeo, podremos ejecutar un mensaje del tipo "clip grabado".

- Cámara: podríamos llamarla también haciendo click con el botón.

- Reproductor: podríamos crear una serie de botones que nos permitan iniciar/detener el reproductor. La opción: vibrar un número de milisegundos es importante también. Una vez que hayamos reproducido el archivo, podremos ejecutar cuando reproductor1 haya sido completado, que nos muestre un mensaje, o se desactive, etc.

- Sonido: es similar. Podemos crear varios botones, de tal manera que podamos iniciar, reproducir, vibrar, etc.

- Grabadora de sonidos: puede ser iniciada o detenida, como el anterior.

- Reconocimiento de voz: nos va a permitir ejecutar acciones en función de instrucciones que se le den a través de la grabadora. Una vez que llamemos el reconocimiento de voz haciendo click en un botón, se obtendrá un resultado con el que haremos lo que queramos.

- Texto a voz: un texto escrito se traducirá a voz, tras lo que haremos lo que queramos.

- Traductor Yandex: permite traducir una palabra de un idioma a otro. Si lo incluimos en la pantalla, vamos a crear un pequeño programa que nos permita traducir de una palabra a otra. Cuando hacemos click en el botón, se ejecutará el traductor yandex. El lenguaje a traducir se lo tendremos que poner en los códigos. Ejemplo, de español a inglés. pondremos como "Texto" los códigos del lenguaje: ES - EN (de español a inglés) y el texto a traducir será casa.

Una vez que este texto haya sido traducido, la traducción recibida la tendremos almacenada. En este caso, haremos que se muestre un aviso mediante una alerta con la traducción.

Con este pequeño programa, al hacer click en el botón1 aparecerá un mensaje con la traducción de la palabra "casa" (en este caso, home).

Paleta - Sensores

Tenemos 7 sensores diferentes. Ninguno de ellos será visible en nuestra pantalla principal, pero podremos programarlos a través de los bloques.

- Acelerómetro: sensor que detecta el movimiento que tiene el teléfono, en los ejes X, Y, Z. Mirando en los bloques, podemos mirar dos acciones del acelerómetro: cuando movemos el teléfono en una dirección o cuando lo agitamos.
Un ejemplo agitando el teléfono:

En la pantalla incluiremos una etiqueta vacía, sin texto, y en bloques añadimos lo siguiente:
al ejecutar "agitar", la etiqueta va a cambiar su mensaje y va a poner "deja de agitar el móvil":

- Código de barras: de nuevo estamos ante un componente no visible. Ejecutará el lector de código de barras que tenga instalado el teléfono. Los bloques son muy sencillos.
Ejemplo: añadimos en la pantalla, interfaz de usuario, un botón y una etiqueta, de forma que cuando hagamos click en el botón, ejecute la llamada al código de barras. Cuando este haya terminado de escanear, que ejecute la opción de que dentro de la etiqueta introduzca un texto, que será el propio del código.

- Reloj: componente no visible muy útil. Debemos indicar en sus propiedades que esté habilitado, que esté siempre funcionando (aunque la app no esté puesta) y cada cuánto tiempo se va a ejecutar el temporizador (en milisegundos).
Ejemplo: cuando el reloj reciba señal del temporizador (cada segundo), que se vea en la pantalla la hora. Añadimos una etiqueta donde aparecerá la hora actual. Este momento actual vendrá con la instrucción "llamar ahora", si bien viene con mucha información (toda la fecha, hora, segundos, minutos, etc). Nosotros necesitamos decir qué queremos extraer de esa hora. Por ejemplo, solo la hora.

Podríamos añadir más texto, con la opción unir: hora y minuto:

Y si queremos hora, minutos y segundos:

- Sensor de ubicación: componente no visible que permite detectar la ubicación del teléfono. Necesita que las aplicaciones estén empaquetadas y descargadas en el teléfono, por lo que no podemos comprobar su funcionamiento con el emulador. Detecta la ubicación del teléfono en un intervalo que nosotros escojamos.

- NearField: componente no visible que detecta etiquetas distribuidas en otros dispositivos. Nuestro teléfono, al acercarse a estas etiquetas, ejecutaría ciertas acciones.

- Sensor de orientación: permite detectar la orientación que tiene el teléfono respecto a un eje. En los bloques vemos que tiene pocas opciones. Ejemplo: añadimos una etiqueta, de manera que en el momento en que haya un cambio en la orientación del teléfono, en la etiqueta se pondrá el valor del sensor de orientación que nos diga el ángulo.

- ProximitySensor: permite detectar a qué distancia se encuentra el teléfono de un objeto en centímetros. Cuando el teléfono detecta un cambio en la proximidad a un objeto, se ejecuta una instrucción. No puede comprobarse su funcionamiento mediante emulador o AI Companion.