¿Quieres aprender a programar Apps para dispositivos Android? Hoy vamos a utilizar AppInventor para crear nuestra primera aplicación móvil. Si nunca has usado AppInventor revisa estas instrucciones para preparar el entorno de desarrollo.

En este primer tutorial con AppInventor vamos a explorar el Sensor de Orientación de nuestro móvil para mover una canica a través de la pantalla cambiando la inclinación del dispositivo. Es por eso que a esta aplicación la hemos llamado:

La Canica Gravitatoria

A continuación un vídeo tutorial de cuatro minutos.. Pero como decimos siempre:

¡Vayamos por partes!

Vídeo Tutorial

El siguiente vídeo tutorial contiene las instrucciones completas de la versión simplificada de este tutorial:

Diseñador

Lo primero que vamos a hacer es utilizar el Diseñador de AppIventor para componer los elementos de la pantalla. Los componentes que vamos a utilizar son:

• Canvas o Lienzo: sera el área de la pantalla por donde se moverá nuestra Canica Gravitatoria. Lo puedes encontrar en la sección Dibujo y animación. Acuérdate de marcar el Ancho y el Alto como Ajustar a contenedor para que se expanda a toda la pantalla disponible.
• Pelota: también en la sección de Dibujo y animación. La colocaremos dentro del Canvas y la renombraremos a Canica.
• En la sección de Disposición escogeremos un panel de DisposicionHorizontal que colocaremos inmediatamente después del Canvas. Como su propio nombre sugiere, este panel distribuye los componentes que coloquemos dentro de modo horizontal.
• De la sección de Interfaz de usuario añadiremos cuatro Etiqueta que colocaremos dentro del panel DisposicionHorizontal. Estas etiquetas las utilizaremos para depurar los valores del SensorDeOrientacion. Es una buena practica renombrar cada uno de los componentes según la función que cada uno va a cumplir:
  • LabelForPitch: Etiqueta con el Texto “Pitch(Tono):”
  • pitch: Etiqueta que contendrá el valor en tiempo de ejecución de la propiedad pitch del sensor de orientación.
  • LabelForRoll: Etiqueta con el Texto “Roll(Lanzar):”
  • roll: Etiqueta que contendrá el valor en tiempo de ejecución de la propiedad roll del sensor de orientación.
• SensorDeOrientacion1: añadiremos a la pantalla un SensorDeOrientacion (sección Sensores). Este componente no es visible con lo cual aparecerá en el área del diseñador para componentes no visibles.

El nombre de las traducciones las tono y lanzar es ciertamente desafortunada y muy poco intuitiva. En la siguiente sección explicaremos que significan cada una de esos valores y como se relacionan con la orientación del dispositivo.

Bloques

En la sección de bloques implementaremos la lógica de nuestra canica gravitatoria. Para ello buscaremos el bloque <cuando SensorOrientacion1.CambioEnOrientacion>. El contenido de este bloque se ejecutara cada vez que se produzca el Evento CambioEnOrientacion en el dispositivo.

Este evento CambioEnOrientacion tiene tres parámetros:

• azimut o acimut (brújula): este valor esta relacionado con la función brújula del sensor. Tendrá el valor 0 cuando esta apuntando al Norte, 90 cuando apunta al Este, 180 apuntando al Sur y 270 cuando apunta al Oeste. Para implementar nuestra Canica Gravitatoria no vamos a necesitar usar este valor.
• pitch o tono (arriba-abajo): mide la inclinación arriba-abajo. Valdrá 0 cuando este en horizontal aumentando hasta 90 grados cuando la parte de arriba del móvil este apuntando hacia abajo y disminuyendo a -90 cuando sea la parte de abajo del móvil la que apunte hacia abajo. Si el móvil se gira boca abajo sus valores variaran entre +/-90 y +/-180.
• roll o lanzar (derecha-izquierda): al igual que pitch pero para inclinaciones derecha-izquierda tomando valores negativos cuando el lado izquierdo apunte hacia abajo y positivos cuando sea el lado derecho el que apunte hacia abajo.

Pues bien, usaremos los valores de pitch y roll (tono y lanzar en castellano) para cambiar la posición de la Canica Gravitatoria y para mostrar su valor en el Texto de las etiquetas correspondientes.

AI2 Companion

En este momento ya podremos probar nuestra aplicación usando IA2 Companion. Encontraras esta función en la barra de superior en la sección Conectar. Esto mostrara un código que deberás escanear o teclear desde el móvil con la aplicación AI2 Companion que previamente habremos instalado. Si aun no la has instalado puedes revisar estas instrucciones.

Si quieres instalar la aplicación de manera permanente tendrás que generar el archivo en formato .apk desde la sección construir y copiarlo vía USB o WiFi al dispositivo móvil para proceder a instalarla.

Código Fuente

AppInventor no permite compartir código con la comunidad de desarrolladores como la comunidad Scratch. Si quieres importar el código fuente puedes descargar el siguiente archivo: CanicaGravitatoria2.aia

Esperamos que hayas disfrutado con este tutorial. Si tienes alguna duda no dudes en hacer un comentario, estaremos encantados de conversar..

¡Nos vemos en el próximo tutorial!