La programación de aplicaciones es uno de los campos de la informática que cuenta con un mayor número de profesionales. En los últimos tiempos, este sector está en auge debido a la proliferación de los teléfonos inteligentes, como el iPhone de Apple, cuya tienda de aplicaciones ha permitido que pequeños grupos de programadores consigan pingües beneficios al disponer de una gran plataforma de distribución.
App Inventor es un servicio creado por Google con el fin de acercar al público la programación de aplicaciones para terminales Android. Para ello, ofrece un entorno amigable que permite a los menos instruidos aprender a diseñar software de forma gráfica a través de bloques.
Para la realización de este práctico, hemos usado un ordenador con Windows 7, el navegador Google Chrome y un terminal Nexus One. Los requisitos para poder usar App Inventor son disponer de un navegador web con Java, una cuenta de Gmail y una conexión a Internet, imprescindible por tratarse de un servicio en línea.
Es muy recomendable disponer de un móvil Android si queremos ver el resultado real sobre un teléfono. Tampoco nos vendrá mal saber un poco de inglés para entender mejor el entorno y profundizar sobre la documentación disponible.
NIVEL:AVANZADO
Paso 1. Proceso de alta
El primer paso para adentrarnos en el mundo de la programación para Android es darnos de alta en el servicio App Inventor. Este entorno se encuentra en fase beta, por lo que deberemos solicitar explícitamente formar parte de él.
Para hacerlo, accederemos a su página oficial y pulsaremos sobre this form. Se abrirá una ventana en la que nos pedirán una serie de datos personales. Como apuntábamos, para darnos de alta, es preciso contar con una cuenta de correo Gmail. Una vez cumplimentado el formulario, pulsaremos sobre Submit. Al cabo de unos días, si se aprueba nuestro registro, recibiremos un correo de confirmación, invitándonos a probarlo.
Paso 2. Prepara el sistema
Antes de empezar a desarrollar aplicaciones, es obligatorio preparar nuestro ordenador. Lo primero es asegurarse de tener Java instalado. Una forma de comprobarlo es accediendo a la página oficial. Si lo tenemos, nos lo confirmará con el mensaje Your Java is working. Si no, se nos ofrecerá la posibilidad de instalarlo.
Paso 3. En el móvil
El siguiente paso es instalar los drivers oportunos para poder comunicar App Inventor con nuestro móvil Android. Para ello, tendremos a nuestra disposición el paquete App Inventor Extras Software, que reúne los controladores de algunos de los móviles Android más conocidos y está disponible para varias plataformas. Para Windows, debemos acceder ahttp://appinventor.googlelabs.com/learn/setup/setupwindows.html.
Asimismo, hay que cambiar algunos aspectos de la configuración de nuestro terminal Android. Desde el móvil, pulsaremos sobre Menú/Ajustes/Aplicaciones y marcaremos la opción Orígenes Desconocidos para habilitar la instalación de aplicaciones externas. Sin salir del menú Aplicaciones, accedemos al submenú Desarrollo y habilitaremos las opciones Depuración USB y Pantalla Activa.
Una vez hecho, ya podremos conectar nuestro terminal al ordenador mediante un cable de USB. El mensaje dispositivo de depuración USB conectado nos confirmará que terminal se encuentra preparado para la ejecución de aplicaciones.
Paso 4. Crea un proyecto
El entorno de desarrollo de App Inventor está basado en web y, para acceder a él, deberemos escribir en un navegador la dirección http://appinventor.google.com. Cada aplicación que deseemos crear se corresponde con un proyecto. Al pulsar sobre My Projects, se abrirá una ventana donde encontraremos un listado de todos los desarrollos que hayamos hecho hasta la fecha. Para crear un nuevo proyecto, pincharemos sobre New y le asignaremos un nombre, lo que nos conducirá a una nueva ventana.
Paso 5. Vista de diseño
La vista de diseño, View, es una de las partes fundamentales del desarrollo de una aplicación. Desde ella, podremos diseñar la parte visual de la misma. Esta vista se divide en varias secciones. La zona central, Viewer, es la representación de la pantalla del teléfono móvil y, sobre ella, iremos ubicando los distintos componentes de nuestras aplicaciones.
A la izquierda, Palette contiene todos los elementos que podremos usar en nuestro proyecto, desde los más sencillos, como imágenes o botones, hasta los más complejos, como los sensores de posición. A nivel visual, los componentes se dividen en visibles, como un botón, y no visibles, como el componente Clock.
La sección Components proporciona información sobre todos los elementos que hayamos añadido a nuestro proyecto. Al seleccionar uno de los componentes, la sección Properties nos permitirá conocer las propiedades de ese componente, por ejemplo, su color de fondo, el tamaño de la letra o su alineación.
Cada componente puede tener propiedades específicas; así, un componente Clock, que ofrece funciones con tiempo, cuenta con una propiedad TimerInterval, con la que podremos elegir su periodo. Por último, la sección Media nos servirá para incorporar cualquier elemento multimedia a nuestro proyecto, esto es, imágenes, sonidos, vídeos…
Paso 6. Vista de bloques
Una vez colocados todos los componentes de una aplicación, es necesario dotarles de funcionalidad. Esto lo podremos hacer a través Blocks Editor, que representa a cada uno de ellos como un bloque.
A cada uno de esos bloques se les puede asociar otros para definir la estructura del programa. Blocks Editor los divide en dos: Built-in, que engloba a los bloques que forman las estructuras de control del programa; y My Blocks, que cuenta con cada uno de los bloques que representan los componentes que hemos añadido sobre la pantalla en el paso anterior, así como todas sus funcionalidades asociadas.
El color del bloque define su rol; por ejemplo, el verde engloba a los que se conocen como eventos. En la imagen que acompaña a este paso, el bloque rotulado como Button1.Click nos brinda la oportunidad de asociar acciones cuando pulsamos sobre el botón Button1. En este ejemplo, lleva asociado un bloque violeta, que representa la llamada a un método de otro componente, es decir, una función que ese componente puede realizar. En este caso, el PhoneCall1, un elemento no visible con el que podremos realizar llamadas telefónicas a través de la función MakePhoneCall.
Si no tenemos un terminal Android...
A pesar de que es muy recomendable contar con un terminal Android para comprobar in situ el correcto funcionamiento de las aplicaciones que vayamos desarrollando, App Inventor nos brinda la posibilidad de emplear un emulador. Esta utilidad viene incluida en el paquete App Inventor Extras Software.
Para poderlo usar, es necesario lanzar el proceso por lotes run-emulator.bat, que se encuentra ubicado en la carpeta donde hayamos instalado el paquete anterior. Tras un breve proceso de carga, se abrirá una aplicación que simula el completo funcionamiento de un terminal gobernado por Android. Para probarlo, solo tendremos que pulsar sobre Connect to Phone desde el Block Editor.
Problemas al instalar el móvil
Uno de los problemas más frecuentes que nos podemos encontrar durante el proceso de instalación, es que nuestro móvil Android no sea reconocido por nuestro equipo más allá de un dispositivo de almacenamiento, a pesar de haber instalado el paquete de controladores App Inventor Extras Software.
Esto puede deberse a dos motivos: que aquellos no se hayan instalado correctamente o que nuestro terminal no esté soportado, en cuyo caso deberemos encontrar los drivers pertinentes en la web del fabricante del móvil y descargarlos. En ambos casos, podremos solventar este problema conectando nuestro móvil al equipo y accediendo al Administrador de dispositivos.
Con toda probabilidad, nos encontraremos con un dispositivo desconocido con una señal de alerta. Pulsaremos con el botón derecho del ratón sobre él y elegiremos la opción Actualizar software de controlador. Se lanzará otra ventana donde escoger entre buscar el software automáticamente o buscarlo en el equipo. Pulsaremos sobre la segunda opción.
Una nueva ventana nos ofrecerá la posibilidad de examinar nuestro disco duro para localizar los drivers. Si nuestro terminal es de los soportados por Extras Software, deberemos elegir la subcarpeta usb_driver. Si no lo está, tendremos que escoger la ruta del controlador que hayamos descargado previamente desde la web oficial. Una vez definida la ruta correcta, pulsaremos sobre Siguiente.
De esta forma, el sistema se encargará de instalar los controladores oportunos y reconocerá nuestro dispositivo, lo que nos permitirá usarlo dentro de App Inventor. Os aconsejamos echar un vistazo al foro oficial, que recoge muchas soluciones a diversos problemas similares.
Tus aplicaciones en Android Market
App Inventor es un excelente recurso para adentrarnos en el mundo de la programación de aplicaciones para Android. Sin embargo, debido a sus limitaciones, es muy probable que en poco tiempo deseemos dar un paso más. Para poder sacar todo el partido a este sistema operativo, deberemos obtener el kit de desarrollo oficial SDK que podremos descargar desdehttp://developer.android.com/index.html
En esta misma página, hay todo tipo de guías de desarrollo, foros donde exponer dudas y todo lo necesario para convertirnos en programadores. Llegado el momento, deberemos dar el siguiente paso: publicar nuestra aplicación. Para ello, tendremos que crear una cuenta de desarrollador en Android Market accediendo a http://market.android.com/publish/ y rellenando un formulario. Uno de los requisitos para disponer de una cuenta de desarrollador es abonar 25 dólares en concepto de alta y aceptar los términos del servicio. Google se quedará con el 30% de los beneficios que consiga nuestra aplicación.
Un ejemplo de aplicación: LlamaFácil
Para ilustrar el funcionamiento de App Inventor, vamos a proponer el desarrollo de una aplicación. Nuestra idea es crear un sencillo programa que nos permita hacer llamadas y escribir mensajes a dos contactos previamente definidos. En el ejemplo, están representados gráficamente por una madre y un padre.
Paso 1. El diseño
Lo primero que debemos hacer es crear un proyecto. Nosotros lo hemos denominado LlamaFacil. Esta aplicación cuenta con tres imágenes: un logotipo superior en el que puede leerse PCActual Ejemplo de App Inventor y un par iconos con las siluetas de hombre y de mujer.
A continuación, vamos a comenzar a diseñar el aspecto de nuestra aplicación. Hemos renombrado la propiedad Title del componente Screen1 para que aparezca el título: Llama Fácil. El primer elemento que vamos a añadir es una superficie Canvas, a la que llamamos Superficie1. Canvas es un componente contenedor que nos permite ubicar sobre él imágenes de tipo Ball e ImageSprite.
Además, cuenta con múltiples funcionalidades, aunque en nuestro ejemplo solo lo usaremos para poder colocar elementos visuales con precisión. Vamos a añadir un elemento ImageSprite, al que llamaremos LogoPCA y al que asociaremos el logotipo de PCActual mediante la propiedad Picture.
Seguidamente, vamos a colocar una etiqueta con fondo anaranjado y título Pulsa sobre el icono para llamar. En paralelo, la parte central está compuesta por tres elementos visibles: un componente Canvas, al que hemos asignado el nombre de Superficie2 y cuyas dimensiones deberemos definir para que ocupe una buena parte de la pantalla; y otras dos imágenes, de tipo ImageSprite, a las que vamos a asignar el nombre deImagenMama e ImagenPapa.
Son necesarios dos elementos no visibles de tipo PhoneCall, que estarán asociados a cada imagen y que nos permitirán realizar una llamada cuando pulsemos sobre ellas. A estos componentes les vamos a asignar el nombre LlamaPapa y LlamaMama, y escribiremos el número de teléfono correspondiente en la propiedad PhoneNumber.
La última parte de nuestra aplicación, precedida por una etiqueta de fondo anaranjado titulada Escribe mensaje de texto, nos permite escribir un SMS y enviárselo a uno de los dos destinatarios predefinidos. A su lado, hemos añadido una etiqueta llamada Info, que nos indicará que el mensaje de texto ha sido enviado satisfactoriamente. Para poder remitir mensajes de texto, hemos de añadir dos componentes no visibles de tipo Texting, que nombraremos EnviaSMSMama y EnviaSMSPapa y serán los encargados de enviar los mensajes de texto.
Paso 2. Acciones
Una vez desplegados todos los componentes sobre la pantalla, es el momento de dotarles de funcionalidad, para lo cual pulsaremos sobre Open the Blocks Editor, de modo que accedamos al editor de bloques. En primer lugar, pincharemos sobre My Blocks y buscaremos ImagenMama.
Podremos elegir distintos bloques relacionados con la imagen, entre los cuales seleccionaremos ImagenMama.Touch y lo arrastraremos a la parte central del editor. Este bloque nos deja definir el comportamiento de la imagen ImagenMama al ser tocada (Touch).
Como deseamos que se realice una llamada, localizaremos el componente LlamaMama y seleccionaremos el bloque que contiene la llamada al método MakePhoneCall, que sirve para efectuar llamadas telefónicas. Al posicionarlo dentro del bloque anterior, se creará una asociación del estilo «cuando se pulse sobre la imagen, se realizará una llamada telefónica». Esta se hará al número que hayamos definido en el paso anterior. De la misma forma, haremos lo propio con ImagenPapa.
Paso 3. Funciones
Lo siguiente que debemos hacer es dar funcionalidad a los botones encargados de enviar un SMS. Desplegaremos el menú de bloques relacionado con BotonEnviaSMSMama y seleccionaremos BotonEnviaSMSMama.Click arrastrándolo al centro de la pantalla. Mediante este bloque, podremos definir el comportamiento del botón al ser pulsado.
Son tres las acciones que vamos a realizar al pulsar sobre él. El componente principal es EnviaSMSMama, de tipo Texting, encargado de enviar SMS. Este componente tiene una propiedad llamada Message que contiene el texto que se va a enviar. Como por defecto Message está vacía y lo que queremos es que se mande el contenido de la caja de texto TextoSMS, necesitaremos relacionar ambos.
Para hacerlo, colocaremos el bloque Set EnviaSMSMama.Message to y, a continuación, el bloque TextoSMS.Text. De este modo, se copiará el contenido de la caja de texto sobre la propiedad Message. La segunda acción consiste en enviar el mensaje. Esto se logra posicionando el bloque call EnviaSMSMama.SendMessage.
Tras el envío, la última acción que hemos de nombrar es meramente informativa. Queremos que la etiqueta de nombre Info, hasta el momento vacía, muestre un mensaje confirmando que se ha producido el envío del SMS. Necesitaremos el bloque set Info.Text to y, luego, elegiremos un bloque de texto, donde escribiremos textualmente SMS Enviado. Todo esto lo deberemos repetir con el botón BotonEnviaSMSPapa. Es importante remarcar que el orden de ejecución de las acciones asociadas a una caja es descendente.
Paso 4. Representación y empaquetado
Una vez terminado el diseño del programa, es momento de probarlo. Existen varias formas de hacerlo. Si tenemos un terminal Android conectado, pulsaremos sobre el botón Connect to Phone. Nuestro proyecto se enviará al terminal y en unos instantes podremos probarlo in situ. Eso sí, en el momento en que desconectemos el terminal, nuestra aplicación desaparecerá. En este sentido, podría ser de nuestro interés encontrar una vía para dejar el programa instalado.
App Inventor nos ofrece una solución: al pulsar sobre Package for Phone, podremos escoger entre dos opciones: Download to this Computer, que creará un archivo con extensión .apk, que contendrá el programa completo y podremos instalar en cualquier terminal; y Download to Connected Phone, lo que dejará instalada la aplicación en el terminal conectado a nuestro ordenador.
