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 Androidapagan” 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 PICremoto”. 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?

Deja tu voto

0 puntos
Upvote Downvote

Total votes: 0

Upvotes: 0

Upvotes percentage: 0.000000%

Downvotes: 0

Downvotes percentage: 0.000000%

  • noha

    Excelente!! me gustaría ver mas proyectos de este estilo, mil gracias!! 😀

  • black star

    Impresionante!

  • MiguelF1

    Excelente, seguiré con ansia este tipo de artículos… lastima q no cuento con un celular con Android, pero en el momento que pueda manosear uno… créanme que lo probaré…

  • fulanitoo

    laa rommpee..es muy amigablee el sofware como rompecabesas.. mee recontraa enccantoooooo.. la pregunta es qe celuu usan ustedes y sii cualqiier celular con Adroid sirve?.. la verdad sigann con mas articulos asii..(:

    • SandroArg

      #4 cito: "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."
      Yo probé el App Inventor en un LG Optimus Me P350 (no es un gran aparato jeje) y las aplicaciones funcionan muy bien. Este tipo de app debe funcionar en cualquier móvil con Android. Saludos.. 😛

  • Anónimo

    Genial Mario, muchas gracias. Lo estoy probando pero sin celular porque el tablet chino que tengo no me acepta conectividad con el PC. Fantastica explicacion en videos, que mejor que esta clase intercativa de Android.

    Un abrazo

    • Anónimo

      Gracias a todos por los comentarios.
      #6 Yesbond inténtalo con el código QR del siguiente artículo 😉

      Saludos!
      Mario

  • solaresmty

    por esta y muchas razones mas me sigo quedando con android

  • Danny

    Que significa neoteo?

    • wdfaq

      #9 Neo: nuevo, Teo: Dios, Neoteo: nuevo Dios … somo unos paganos leyendo este sitio jajaja

  • juan

    estas aplicaciones funcionaran en una tablet viewsonic?

  • Anónimo

    Muy buen artículo, está claro que con Android y el AppInventor se pueden hacer cosas muy prácticas y funcionales en poco tiempo.
    Espero poder conseguir pronto algún dispositivo con Android para comenzar a utilizarlo 🙂
    Muchas Gracias!
    Saludos!
    Pd. Ojalá publiquen más aplicaciones con Android.

  • HERBERT

    hola atodos buenas tardes
    queria realizarte una consulta con respecto al tipo de celular con android sirve cualquier celular que funcione con android o debe haber alguna especificacion? ya que hay distintos procesadores al igual que versiones os android gracias que estes bien saludos desde chile

    • Anónimo

      #13 Hola Herbert

      Yo utilizo un Motorola Defy y la versión de Android es la 2.2 en mi caso. Entiendo que App Inventor genera las aplicaciones para cualquier móvil y cualquier versión de Android. Sería cuestión de que alguien que haga las aplicaciones nos cuente donde las ha probado y si le funciona.

      Saludos!
      Mario

  • herbert

    bueno seria interesante

    OTRA PREGUNTA segun lo que observe y por lo que entendí igual puedes realizar las aplicaciones y probarlas virtualmente sin la necesidad de tener el equipo con android verdad.
    bueno a mi me queda todavia adquirir algo con android haber que encuentro de bueno y se biene muy interesante esto gracias por responder

  • Herbert

    Estimados junto con saludar y con muchas ganas de introducirme al mundo app inventor ya adquiri un sansung fit algo basico para la gran variedad que hay de equipos con android y estoy en esta etapa ola mundo !!!!!!!!!! estoy en eso lo que no me queda claro sip o se me paso por alto es al boton conectar no hay que agregarle nada para que en lace al bluetooth ?? como se a que modulo conectarme como se asigna ese modulo?? saludos

  • Walter

    Hola felicitaciones por el post!
    Tengo una duda, no consegui conectar mi modulo HC-06 con el boton `conectar`, estoy usando un pic16f887. Tiene algo que ver que pic utilizo para la coneccion celular-modulo ?

  • Walter

    Hola felicitaciones por el post!
    Tengo una duda, no consegui conectar mi modulo HC-06 con el boton `conectar`, estoy usando un pic16f887. Tiene algo que ver que pic utilizo para la coneccion celular-modulo ?

  • julio cesar

    excelente trabajo y gracias por compartir.
    yo me quede con una duda como le hiciste para encender el bluetooth, apagarlo y que se conecte de forma automática ?
    falta otro vídeo? gracias

  • Paulo

    Excelente tutorial Mario, despues de leer el resto de los articulos HC-06+N41+bluetooth+android, finalmente pude ponerlo en funcionamiento. Bastante eficaz y sencillo el modulo bluetooth HC-06+18F4550.

    gracias

  • Mel

    Muy bueno, pero falta la parte mas importante que es trabajar con el editor de bloques para utilizar el botón conectar Bluetooth.

  • hola que tal..veo que ya tiene unos pocos años este “software” oye tal vez podrian hacer algo sobre TV online… bueno especificamente una ventana con botones con diferentes canales..esos botones que se enlacen al link de la pagina web.. pero que solo aperesca el reproductor de video de esa pagina web…hay una aplicacion que se llama “Futbol online gratis” que hace eso. solo que es puro futbol.

  • john

    Hola, muy buen blog, esta muy bien explicado el tema de la comunicación entre android y un PIC, sin embargo tengo un inconveniente o una duda, lo que sucede es que ya realice el programa en android para enviar datos, sin embargo a la hora de conectarme a un dispositivo bluetooth (todavía no he probado con el HC06), me sale un mensaje de error: “Error 507: Unable to conect. is the device turned on?”, estoy tratando de establecer la comunicación con otro celular porque no he comprado el modulo bluetooth para realizar la conexión con el PIC, pero mi pregunta es normal que salga ese error cuando intento conectarme a mi otro celular con bluetooth? es decir con el modulo se conectara sin problemas? o que estaré haciendo mal?

    Otra cosa es que appinventor cambio la interface y ya no se encuentran la sección de definiciones y bueno lo que hice fue conectar directamente la cadena de texto a la conexión del bluetooth.

    Saludos

  • Pablo Romero

    Hola. Vi todos los videos, muy bien las explicaciones paso a paso. Tengo una duda, entre el ultimo video y el penultimo no explicaste que hace el boton conectar, ni tampoco mostraste el bloque del mismo. Donde esta esa parte? en que video? Gracias y muy buen post.!