App Inventor: Hola Mundo en Android

La tendencia de realizar programas para utilizarlos en un dispositivo móvil y, mediante estos desarrollos, operar un circuito electrónico a distancia es una actividad en continuo avance y por supuesto, en NeoTeo no podemos quedarnos de brazos cruzados. En el artículo anterior dimos un breve repaso de cómo se organiza una conexión Bluetooth con un módulo RN41 y un PIC 18F25K20. Además, comenzamos con la instalación de los elementos de software necesarios para crear cualquier aplicación futura para Android. Hoy comenzaremos a armar juntos la aplicación, en App Inventor, para conectar tu móvil con un circuito electrónico, mediante la conectividad Bluetooth. ¿Ya tienes todo listo? ¡A trabajar!

Sin olvidarnos que tenemos un sistema formado por un PIC (18F25K20) y un módulo Bluetooth (desarrollados en el artículo anterior), listos para ser operados a distancia, hoy veremos todos los pasos necesarios para armar la aplicación Android que irá instalada en el dispositivo móvil, en nuestro caso, un teléfono Motorola Defy. La aplicación será muy sencilla: consistirá en lograr el enlace entre el dispositivo y el módulo, mediante la acción de botones dispuestos sobre un fondo de pantalla diseñado por nosotros mismos, y observando el resultado de estos eventos mediante la iluminación o el apagado de un sencillo LED. Por lo tanto, vamos a utilizar un fondo de pantalla, botones y los elementos necesarios para mantener organizados los mencionados botones, dentro de la pantalla que vemos en la aplicación. Pero antes de hacer cualquier acción, debemos preparar nuestro sistema Android, para trabajar desde el ordenador (donde construiremos la aplicación), habilitando la opción “Depuración por USB”. A esto lo haremos ingresando en Configuración > Aplicaciones > Desarrollo y así llegaremos a la posibilidad de activar la opción necesaria. Según el dispositivo utilizado y la versión de Android que estemos usando, esta secuencia puede cambiar, pero básicamente ese es el procedimiento inicial que debemos hacer.

Luego, conectamos nuestro dispositivo Android al ordenador mediante un cable USB, abrimos la página de App Inventor (AppInventorBeta), utilizando nuestra cuenta Gmail y, como vimos en la entrega anterior, pulsamos sobre el botón “New” para crear una aplicación, ingresamos en ella y comenzamos a trabajar. Lo primero que debemos hacer antes de tocar algo es pulsar sobre el botón que habilita el “editor de bloques” y que se encuentra en el rincón superior derecho: “Open the Block Editor”. Luego de que activemos la sesión de Java que se inicia, al aparecer la pantalla del editor de bloques, encontraremos el espacio central donde trabajaremos con los bloques que utiliza el sistema y, sobre la parte superior de la imagen, encontraremos la ventana “Conect to Device”. Allí aparecerá la dirección de nuestro dispositivo, conectado vía USB, como una rara sucesión de números y letras. Pulsando allí, App Inventor se conectará con nuestro equipo y en la pantalla de nuestro móvil veremos todo lo que hagamos en el ordenador. De este modo, trabajaremos sobre la aplicación sin perder de vista como será el resultado final a cada momento. Todo esto (que no es poco), visto en un video, sería de este modo:

Una vez que tenemos definido el color que utilizaremos (de fondo) y el título que tendrá nuestra aplicación, App Inventor nos invita a cargar “cosas” en el lienzo, es decir, en lo que será la pantalla principal de nuestra aplicación inicial. Lo primero que tenemos al alcance de nuestra mano es, sobre el lado izquierdo de la pantalla, la posibilidad de cargar un botón. Un botón que pueda ser pulsado y que haga “algo”. Por ahora no tenemos definido que función cumplirá este botón, pero sí sabemos que lo colocaremos sobre la pantalla. ¿Cómo se realiza este trabajo? De la manera más sencilla: “pisar y arrastrar”. Así podemos llenar de botones la pantalla, con diferentes funciones cada uno, pero por ahora, con uno sólo basta para nuestra primera práctica con App Inventor. El botón no cae en cualquier lugar, sino que se ubica sobre el rincón superior izquierdo de la aplicación. Una vez hacho esto, en nuestro dispositivo Android, veremos el mismo botón que colocamos en el ordenador y al pulsarlo, sentiremos que allí está nuestro botón, listo para llenarlo de atribuciones y asignarle trabajos.

La primera actividad estará centrada sobre el texto interno del botón, que puede ser “Cambiar Color”. Es decir que al pulsarlo, el cuerpo del botón cambie de color. Un trabajo sencillo, pero que nos ayudará en la primera etapa mientras nos familiarizamos con Android. Luego de cambiar el texto, el tamaño de letra, el color de la misma y todas las cosas que se nos ocurran, por supuesto, que se encuentren en la margen derecha de la pantalla. Allí, comienza la otra parte del trabajo: pasamos al editor de bloques. Sobre el costado izquierdo de la pantalla tenemos tres “solapas” y en la central encontraremos los elementos físicos (bloques) que tenemos en pantalla, que en este caso es un simple botón. Al pulsar sobre el texto que lo señala (al botón) se abren opciones que vienen presentadas en forma de piezas de un rompecabezas. La primera es, por supuesto, el evento de pulsar el botón (Botón Clic) y también encontramos entre otras opciones, la de pulsar el botón en forma prolongada (“Long Clic”). En forma ordenada llevamos estas piezas al área de trabajo del editor de bloques y a cada una le agregamos la pieza que nos permite cambiar el color de fondo. Por supuesto, si estamos hablando y trabajando con un botón, cambiará el color de éste y no de otra cosa. Pulsamos una vez (corto) y el botón adquiere un color; pulsamos nuevamente y más extenso y se cambia a otro color. ¿Lo vemos en video? Aquí está:

Como decimos en el video, aquí ya tendríamos nuestro primer “Hola Mundo” en Android, pero como nuestro proyecto es mucho más ambicioso que cambiar el color de un simple botón. Daremos por terminada la tarea al lograr operar un PIC a distancia, mediante un enlace Bluetooth. Lo que sigue ahora es comenzar a colocar los botones, que en verdad queremos en nuestra aplicación final, un fondo de pantalla adecuado al trabajo de la aplicación, que nos identifique (esto es opcional; hay mucha gente que es sobria y se contenta con un fondo de color negro) y los comandos necesarios para cerrar una aplicación cada vez que salimos de ella. Por defecto, la mayoría de los dispositivos que trabajan con Android “apagan” o “cortan” las aplicaciones luego de un período de inactividad de la misma (por lo general 2 minutos), pero nosotros aprenderemos a “apagarla” en forma directa, mediante el clic de un botón definido para esa función. Comencemos entonces a definir los botones que necesitamos: uno para conectar/desconectar el enlace Bluetooth, otro para encender el LED que tenemos en el hardware (que vimos en el artículo anterior), un tercero para apagar ese mismo LED y un cuarto botón para salir de la aplicación; para apagarla al salir sin esperar a que el sistema lo haga solo.  Esta costumbre es buena para cuando hagamos aplicaciones complejas, que absorban muchos recursos del dispositivo móvil. Es decir, salimos de nuestra aplicación y el teléfono queda libre, no queda “anclado” hasta que Android decida apagarla. Aprovechando que un botón se utilizará para cerrar la aplicación y salir de ella, colocaremos la acción de un clic sobre este botón y al evento le asignaremos la tarea de “cerrar la aplicación” (close application).

Otros dos botones serán necesarios para encender/apagar el LED en el hardware montado con el PIC sobre el protoboard. En realidad con uno solo alcanzaría, pero en este ejemplo utilizamos dos. Cada botón estará asociado al simple envío de un texto gracias a la conexión Bluetooth del dispositivo Android que estemos utilizando hacia el PIC “remoto”. Recordemos que para encender un LED necesitábamos enviar un “100” y para apagarlo un “200”. La instrucción HSERIN utilizada en Amicus, necesita recibir (luego del número) un caracter “que no sea numérico” para interpretar que todo lo anterior es el número. Es decir, si le enviamos el 100 solo, se quedará esperando más datos numéricos, porque siempre espera eso, datos numéricos. Cualquier caracter “no numérico” finaliza la recepción y define lo recibido como la información útil. Es decir, si recibe un 100 se queda esperando más números. Si en cambio recibe 100A, detecta que la A es el caracter “no numérico” que cierra la recepción de datos. Por lo tanto, eso enviaremos nosotros.

Para enviar datos por Bluetooth, antes debemos realizar un procedimiento lógico y elemental; debemos “pisar y arrastrar” un cliente Bluetooth hacia adentro de la pantalla que estamos organizando en la web de App Inventor. Eso nos habilitará la posibilidad de utilizar las opciones que brinda un enlace Bluetooth dentro del editor de bloques. Esto es, seleccionamos la acción de enviar texto y disponemos su contenido, tanto para un botón como para el otro. Solamente haremos eso con esos botones, enviaremos texto mediante Bluetooth desde Android. Ya tenemos entonces tres botones, solo nos falta el que se encarga de realizar el enlace vía Bluetooth tanto para su conexión como para su desconexión. Porque hasta ahora no hemos entablado conexión, sólo hemos preparado las partes. En este video puedes ver lo explicado hasta aquí, en imágenes.

Dentro de la paleta de elementos, que se encuentra a la izquierda de la página, encontramos un sector dedicado a las herramientas separadoras de elementos dentro de la pantalla. Esto es, para separar por ejemplo, un grupo de botones (de otros) en forma horizontal, vertical o disponer de ellos en forma de una tabla. En nuestro caso, utilizaremos la herramienta que nos facilita posicionar los botones como en una tabla y además agregaremos “espacios vacíos” que serán etiquetas (Label) y que nos servirán como separadores de los botones entre si. Esto es para que no estén juntos, pegados uno a otro. Al proceso de organización, lo realizamos de la siguiente manera:

Por último, utilizaremos una imagen de fondo como si fuera el papel tapiz de nuestro ordenador para “decorar” la aplicación y darle nuestro toque mágico. Para esto, debes tener en cuenta que la imagen tenga las proporciones de formato acordes a la pantalla de tu equipo móvil y que sea una imagen “liviana” (de pocos KB) con una extensión JPG. Una de las cosas que debemos tener en cuenta, al momento de cargar el icono (que veremos en la pantalla de aplicaciones), es que no debe ser con extensión ICO, sino que deberá ser también con extensión JPG y de un tamaño de 80 pixeles por lado para alcanzar buenos y agradables resultados. Estas dos imágenes se insertan en forma directa seleccionando la pantalla inicial (Screen1) y su acceso estará a la derecha de la imagen. Una vez finalizado este proceso, terminaremos la “vista” de nuestra aplicación. La imagen, la estética. El diseño que hablará por ti.

¿Qué nos falta para terminar? La conexión Bluetooth, habilitar (o no) los botones que utilizamos, cambiar el color del texto de un botón y muy pocos ingredientes más para disfrutar de este enlace vía Bluetooth, entre nuestro dispositivo móvil con Android y un desarrollo externo con un microcontrolador. En la próxima entrega (la última) terminaremos de utilizar el editor de bloques y veremos una interesante alternativa para trabajar sin depender del cable USB. Ya estamos llegando, ¿Te vas a perder el final? Estás en los umbrales de los desarrollos que dominarán la tecnología móvil de los años venideros. Android llegó para quedarse en NeoTeo, ¿tú te piensas ir?