Uso de App Inventor en la asignatura de Tecnologas de la Informacin y la

Comunicacin

En el actual diseo del Bachillerato en Espaa se propone Tecnologas de la Informacin y la

Comunicacin como asignatura optativa. Entre los objetivos generales de esta asignatura se puede
leer Usar los recursos informticos como instrumento de resolucin de problemas especficos o
Integrar la informacin textual, numrica y grfica obtenida de cualquier fuente para elaborar
contenidos propios y publicarlos... y formatos que faciliten la inclusin de elementos multimedia
decidiendo la forma en la que se ponen a disposicin del resto de usuarios. Son muchos los
profesores que ensean algn lenguaje de programacin como una de las herramientas para alcanzar
estos objetivos.
En este artculo se propone usar App Inventor1 como parte del curriculum de esta asignatura. App
Inventor es al mismo tiempo un lenguaje de programacin, una herramienta de diseo y un entorno de
desarrollo de aplicaciones para mviles y tablets que funcionen con el sistema operativo Android. App
Inventor permite tambin ejecutar las aplicaciones en un emulador, por lo que no es imprescindible
disponer del telfono para probar los programas que se hagan.

App Inventor fue desarrollado por Google, pero en Agosto de 2011 2 fue publicado como Software Libre
bajo la licencia Apache 2.0 y su desarrollo se traspas al Instituto Tecnolgico de Massachusetts (MIT).

El lenguaje de programacin que se usa en App Inventor est claramente inspirado y toma muchos
elementos de Scratch3 que est siendo desarrollado por el mismo MIT desde hace ms de ocho aos.
En la imagen siguiente se puede apreciar la herramienta de diseo en el navegador con la que se
construye el interfaz grfico de la aplicacin:

Por qu App Inventor?

Casi todos los lenguajes de programacin tienen una sintaxis que al principiante le suena a chino. Son
una mezcla de ingls y extraas reglas de sintaxis. Como ejemplo, el programa ms pequeo que se
puede hacer en Java es algo as:
class Hola
{
public static void main(String [] args)
{
System.out.println("Hola mundo");
}
}
Es evidente que al aprender a programar la sintaxis provoca una curva de aprendizaje significativa.
Aunque hay lenguajes ms limpios en este sentido que Java, como Python, siempre requiere invertir
mucha prctica y tiempo en aprender los comandos, sus reglas de escritura, sentido de los distintos
signos de puntuacin, etc. Todo este tiempo es tiempo no empleado en aprender a disear algoritmos
para resolver problemas, tal y como peda el primero de los objetivos de la asignatura de TIC.
Con App Inventor se aprende a programar usando bloques de programacin. Estos bloques estn
hechos con elementos comunes a la mayora de los lenguajes de programacin existentes. Se colocan

bloques para construir bucles, condiciones, variables, etc. que permiten pensar lgicamente y
solucionar los problemas de forma metdica, sin perder el tiempo en encontrar el punto y coma o los
dos puntos que estn donde no deben y producen errores de compilacin o ejecucin.

Imagen 3: Diagrama de funcionamiento de App Inventor.

Es de esperar que, al igual que hicieron con Scratch, en el futuro los bloques de App Inventor estn
traducidos a otros idiomas. En la actualidad slo estn disponibles en ingls, lo que requiere un
pequeo esfuerzo de traduccin al estudiante para entender qu es lo que hace cada bloque. De todos
modos, los bloques estn clasificados mediante un criterio de colores que indica en parte su funcin o
el componente al que hacen referencia.
Adems de los elementos pedaggicos, App Inventor tiene algunas caractersticas que lo hacen
especialmente adecuado:
1. Es software libre, no es necesario la adquisicin de licencias por parte del profesor y los
alumnos
2. Es multiplataforma: requiere slo de un navegador y la mquina virtual de Java instalada,
con java web start.
3. Es programacin para dispositivos mviles. Los telfonos y las tabletas estn marcando
hoy en da buena parte del futuro de la informtica y es atractivo para los alumnos poder
ensear en sus propios telfonos el fruto de su trabajo.

Elementos de programacin en App Inventor

Veamos algunos de esos bloques de App Inventor:

Sentencias

Al programar necesitamos a menudo decirle al ordenador que haga algo. En App Inventor existen
numerosos bloques que son sentencias de programacin. Se distinguen rpidamente porque expresan
una accin a realizar con un verbo en imperativo. Los ms habituales son call, set y def (abreviatura
de define). Adems, los bloques que son sentencias slo estn disponibles en dos colores: azul para
modificar variables o propiedades de un objeto y naranja para llamar a funciones. En la imagen
siguiente se ven algunos ejemplos de las sentencias para dividir un texto en partes, convertirlo a
maysculas, cambiar la altura, texto o visibilidad de un recuadro de texto o definir una variable.

Condiciones
Con frecuencia necesitamos realizar distintas acciones en funcin de que ocurra o no algo. En App
Inventor para condicionar nuestro programa tenemos las estructuras if-then, if-then-else , while y
choose:

En todos estos bloques se puede ver como tenemos en la parte superior un espacio para encajar el
test o pregunta que se hace el programa para decidir por donde continuar su flujo. Las tres primeras
estructuras son habituales en la mayora de los lenguajes, la ltima, choose, es prcticamente igual
a if-then-else con la diferencia de que permite devolver una variable en funcin de que se cumpla o no
el test.

Bucles
Un bucle provoca la ejecucin repetida de varias sentencias. En App inventor disponemos de los
bucles while, for range y foreach.

El primero ejecutar el bloque de sentencias que se encajen en el apartado do mientras se cumpla la

condicin que refleje el test. for range es el tpico bucle for de otros lenguajes de programacin y,
como tal, tiene las opciones de elegir el nombre de la variable que itera, su comienzo, fin y el tamao
de los saltos de iteracin. Finalmente, foreach es un iterador sobre los elementos de una lista.

Variables
Disponemos de las herramientas para definir y cambiar variables. El tipo puede ser numrico o un
texto y se declara al asignarle un valor por primera vez.

En el grfico anterior se ve como se declara una variable llamada total_alumnos y se le da un valor

numrico de 30. Adems se ven dos bloques muy importantes en App Inventor. Su lenguaje cuenta
con una estructura de datos llamada list (lista) que es similar a los Arrays de otros lenguajes de
programacin. Se ve el bloque con el que se define la lista alumnos (se define vaca al no aadirle
ningn item) y tambin se ve el bloque en el que se le aaden dos elementos a la lista alumnos. En
este ejemplo se le aade el texto que contienen los cuadros de texto TextBox1 y TextBox2.

Eventos
Es indispensable que los programas que sean capaces de responder a la interaccin del usuario con
el interfaz. Es ah donde toman su importancia los bloques de App Inventor, para ejecutar acciones en
respuesta a los eventos que se produzcan en el telfono o el tablet.
El nombre de los distintos eventos depende del objeto que los provoca. Un botn avisa de cuando se
ha hecho clic sobre l, mientras que el acelermetro avisa de cuando se ha agitado el mvil, la
mensajera de cuando se ha recibido un mensaje, el objeto de Twitter de cuando hemos sido
mencionados en esa red social, la cmara de fotos de cuando se ha hecho una foto y as
sucesivamente.

En la imagen anterior se pueden ver algunos de estos eventos. De esta seleccin se aprecia que con
App Inventor no slo se dispone de objetos que se pueden colocar en la pantalla como un botn o
imagen, sino tambin de otros muchos objetos que nos dan acceso a las funcionalidades que tienen
los telfonos y tablets Android. Tenemos acceso a Internet, Bluetooth, hacer llamadas, enviar y recibir
mensajes, las coordenadas de posicin GPS, etc.
Tambin se puede apreciar como todos los eventos tienen la estructura When evento do, y son de
color verde. Tienen este color porque son parte de la seccin My blocks en el entorno de desarrollo.
My blocks es donde se leen o manipulan las propiedades de los distintos elementos que hayan sido
colocados manualmente en el entorno de diseo: botones, brjula, etiquetas, cuadros de texto, etc.

Como usar App Inventor

App Inventor requiere que el ordenador tenga alguno de estos sistemas operativos:
o

GNU/Linux: Ubuntu 8+, Debian 5+

Macintosh (con procesador Intel): Mac OS X 10.5, 10.6

Windows: Windows XP, Windows Vista, Windows 7

Necesita tambin de conexin a Internet (los programas y las aplicaciones se cargan siempre desde
Internet) y uno de los siguientes navegadores web con estas versiones mnimas:
o

Mozilla Firefox 3.6, sin la extensin NoScript instalada

Apple Safari 5.0

Google Chrome 4.0

Microsoft Internet Explorer 7

Se necesita tambin una cuenta de correo electrnico de Gmail y Java Web Start instalado en el
ordenador.
El

software

para

ejecutar

los

programas

se

descarga

de http://appinventor.mit.edu/explore/content/install-app-inventor-software.html , donde se elegir una

opcin u otra dependiendo del sistema operativo que se est usando. En el caso de Macintosh o
Windows se dispone del tpico instalador para estos entornos. En sistemas Gnu/Linux Debian o
derivados se proporcionan los paquetes deb de instalacin 4 o la opcin de instalar directamente desde
un archivo comprimido tar.gz5. Nota importante: En el caso de instalar en un sistema Linux de 64 bits

es necesario asegurarse de que estn instalados algunos paquetes para que el software funcione.
En 6 se puede ver la lista de paquetes necesarios.
Este software permitir no solo ejecutar los programas en nuestro mvil o en el emulador, sino que
dispone adems de un intuitivo interfaz de depuracin que ayuda a encontrar errores de programacin.
Para que App Inventor pueda comunicarse desde el ordenador con el mvil usando el cable USB es
necesario ir a los ajustes del mvil ->Opciones de desarrollador y activar la opcin Depuracin de
USB.
Importante: Es conveniente instalar este software, pero no necesario para hacer los programas. Si no
se instala saldr un mensaje de error cada vez que se carga la aplicacin de desarrollo avisando de
que no encuentra el entorno de emulacin, pero se puede realizar el programa igualmente.
Si el ordenador est conectado a Internet, dispone del sistema operativo y el navegador adecuado y
tiene Java instalado ya se puede empezar a programar. En el navegador hay que introducir la
direccin http://beta.appinventor.mit.edu/ . Entonces pedir nuestros datos de acceso al correo de
Gmail y, si es la primera vez que se accede, pedir permiso para usar esa cuenta de correo. Una vez
que se le concede el permiso se carga la siguiente pantalla:

Se puede apreciar que se trata de una simple vista del listado de proyectos hechos por el usuario. En
App Inventor los proyectos se guardan en la nube, es decir, en los servidores del MIT. Por tanto,
podemos abrir nuestros proyectos desde cualquier ordenador con conexin a Internet sin que
tengamos que llevar los archivos de un lado a otro. En cualquier caso, este mismo interfaz da las
opciones para descargar el archivo del proyecto si se quiere.
Haciendo clic sobre el botn New, pedir el nombre que queramos darle al proyecto e inmediatamente
se abrir la siguiente ventana:

Se trata de la ventana del diseador en la que se construye, mediante el ratn, sin necesidad de usar
ningn lenguaje de programacin, todo el interfaz grfico que va a tener la aplicacin. En ella se han
marcado con nmeros cada una de sus partes principales:
1. La paleta contiene todos los elementos que podemos insertar en nuestra aplicacin. Hay
elementos grficos como cuadros de texto, botones, lienzo de dibujo (Canvas) y elementos
que no se ven en la pantalla del mvil, como base de datos (TinyDB), acelermetro, cmara de
vdeo, etc.
2. Viewer: El visor de la pantalla, simula la apariencia visual que tendr la aplicacin en el mvil.
Para aadir un elemento a la pantalla hay que arrastrarlo desde la paleta y soltarlo en el visor.
Los elementos que no tengan visibilidad hay que arrastrarlos tambin al viewer y
automticamente se desplazarn debajo de l bajo el epgrafe Non-visible components
3. Components muestra la lista de los componentes que se han colocado en el proyecto.
Cualquier componente que haya sido arrastrado y soltado desde la paleta al visor aparecer
ah. Si se quiere borrar alguno es en la lista de componentes donde est el botn que permite
borrarlo.
4. Media muestra las distintas imgenes y sonidos que estarn disponibles para el proyecto.
Cualquier archivo de imagen o audio que se quiera usar en la aplicacin hay que insertarlo
usando este apartado para que est disponible.
5. Properties: cada vez que en el Viewer se seleccione un componente, en Properties
aparecern todos los detalles que se puedan cambiar de ese componente. Por ejemplo, al
hacer clic sobre un componente TextBox se podr cambiar en Properties su color, texto,
fuente, etc. Para aquellos que hayan usado antes entornos de desarrollo del tipo de Visual
Studio en Windows o Gambas en Linux le ser muy familiar esta forma de trabajar.
Este es el entorno en el que se disea la aplicacin. Para poder realizar la programacin es necesario

hacer clic en el botn de la esquina superior derecha con el texto Open the blocks editor. Eso har
que el navegador avise de que va a descargar una aplicacin que arrancar con Java Web Start.
Mientras se descarga la aplicacin aparecer en la parte inferior de la pantalla un texto indicativo de la
carga:

Al terminar la carga, si no est instalada la aplicacin que permite la ejecucin o simulacin del mvil
aparecer este mensaje:

Tras aceptar el mensaje aparecer por fin el editor de bloques de programacin:

Esta es la pantalla que usaremos para hacer los programas que interaccionan con el interfaz grfico.

Se puede apreciar cmo est dividida en dos partes muy claras: un enorme lienzo en blanco a la
derecha donde se irn arrastrando los bloques de programacin y a la izquierda los mens que dan
acceso a esos bloques.
El men est formado por tres pestaas: Built-In, My Blocks y Advanced, y bajo cada una de ellas
aparecen a su vez distintos mens que permitirn seleccionar los bloques disponibles en cada caso.
1. Built-In contiene los bloques que componen el lenguaje de programacin propiamente dicho,
distribuidos en las secciones Definition, Text, Lists, Math, Logic, Control y Colors.
2. My Blocks ya se ha nombrado anteriormente y contendr una lista de los elementos que hayan
sido colocados en la pantalla Viewer del diseador para poder acceder mediante el programa
a sus propiedades y eventos
3. Advanced es una pestaa que permite acceder de forma global a algunas propiedades
comunes a todos los elementos que hemos colocado en el Viewer y que sean de un mismo
tipo. Por ejemplo, al colocar un par de botones aparecer Any Button y se podrn cambiar
ah algunas propiedades que afecten simultneamente a los todos los botones.
En la parte superior derecha del editor de bloques de programacin se pueden ver tambin los
botones que dan acceso a conectar con un telfono Android que estuviera enchufado al ordenador o
lanzar el emulador.

Programando
La mejor forma de ilustrar la forma de trabajar con App Inventor es mediante un ejemplo hecho paso a
paso. En la pgina oficial hay un enlace bien visible llamado Teach donde se puede acceder a
decenas de ejemplos y tutoriales de uso. Es casi un clsico empezar con la aplicacin Hello Purr en
la que un gatito maulla al pulsar en la pantalla 7. Se pueden encontrar por Internet tambin ejemplos
avanzados8 que usan bases de datos y el reconocimiento de voz 9 o desarrollos curriculares completos.
En concreto, hay varios10 11 que estn orientados para alumnos del primer curso universitario en
facultades de ciencias, y con pequeas adaptaciones para disminuir la dificultad de los proyectos
propuestos pueden ser usados en 1 de Bachillerato en la asignatura de TIC.
En lugar de seguir el criterio habitual en los tutoriales que muestran cmo hacer aplicaciones visuales
para los mviles, a continuacin se expondr cmo hacer una aplicacin con un interfaz sencillo en el
que prime ms la parte de solucin de problemas. Para ello , vamos a hacer el ejercicio tpico en los
cursos de lenguajes de programacin de decir cul el mayor nmero de entre tres o ms.
Primero hay que hacer el diseo en el navegador, usando el diseador de App Inventor. En la paleta,
en la seccin Screen Arrangement se escoje un VerticalArrangement y se suelta sobre la pantalla
del Viewer. El componente VerticalArrangement es para forzar una distribucin vertical de los
componentes que se suelten sobre l. As se asegura que la disposicin de los elementos en la
pantalla es en vertical, independientemente del tamao y los componentes que pongamos.
Despus

se aade, sobre el VerticalArrangement1, un TextBox (de la pestaa Basic), un

HorizontalArrangement y un Label. Despus se aaden dos Button sobre el HorizontalArrangement

con lo que se asegura que los botones van a estar siempre colocados uno al lado del otro, en
horizontal.
Debe quedar una pantalla como la siguiente:

Para que cuando se haga el programa podamos identificar bien los objetos que estn en la pantalla es
conveniente darles nombres identificativos de su funcin. Para renombrar los objetos que se han
puesto en el paso anterior hay que seleccionarlos en el apartado Components y pulsar el
botn Rename. En este programa renombramos el cuadro de texto, los botones y el label a
txtInput,btnNuevo, btnFin y lblresultado

Una vez que han sido renombrados los objetos, a algunos de ellos se le cambian las propiedades.

Para este programa vamos a hacer que el txtInput slo acepte nmeros, por lo que activamos la
propiedad NumbersOnly en sus propiedades, tal y como se ve en la imagen anterior.
El interfaz de la aplicacin ya est completo, ahora toca hacer el programa mediante el editor del de
bloques de programacin, que se abrir pulsando en el botn Open the Block Editor del diseador.
Una vez abierto, para empezar, se definen mediante el bloque que se encuentra en Built-in ->
Definition, dos variables. Una de ellas es una lista a la que se ha llamado lista_numeros. Su bloque
se arrastra desde Built-In->Lists->make a list. En esta lista se irn almacenando cada uno de los
nmeros que el usuario introduzca cuando quiera comparar varios.

La otra variable se llama maximo y se usar cuando el usuario pulse el botn Fin. En ese momento se
recorrer lista_numeros, se ir comparando cada valor que contiene con el mximo y se ir
almacenando ah el mayor de los nmeros revisados. Como ser un nmero, hay que arrastrarlo
desde Built-in->Math->number
A continuacin se ha programado el evento Click de btnNuevo. Cada vez que el usuario pulse en ese
botn se harn los siguientes pasos:
o

Aadir el texto de txtInput como un nuevo elemento de lista_numeros

Poner a cero el texto de txtInput

Asegurase de que lblResultado tiene el texto Introduciendo nmeros

Finalmente se ha programado la parte ms compleja, lo que ocurre cuando el usuario pulsa btnFin:

Primero aade el valor que haya todava en txtInput a la lista

A continuacin recorre lista_numeros, asignando a una variable llamada valor cada uno de los
elementos de la lista segn los recorre.
o

Si valor es un nmero comprueba

Si valor es mayor que mximo, mximo pasa a ser valor

Despus de averiguar el mximo lo muestra en lblResultado

Reinicia maximo a 0 para volver a empezar

Vaca lista_numeros asignndola de nuevo sin ningn elemento

Es algo tedioso el tener que ir cambiando continuamente de las pestaas de Built-In a My

Definitions porque cada vez que se haga referencia a una variable creada o a un componente
colocado en el diseo hay que buscarlo en My Definitions, mientras que cada vez que se quiera
poner una sentencia, bucle, un nmero, un texto en blanco o una condicin hay que localizarlo en la
pestaa Built-In. Con la prctica se hace fcil encontrar cada cosa, pero al principio suele ocurrir que
el usuario no encuentra en qu apartado est lo que necesita.
En cualquier caso, como todo el programa se ha hecho arrastrando y soltando bloques no es posible
cometer errores de sintaxis. Se puede ver tambin como, sin definir las variables, la aplicacin se
encarga automticamente de convertir textos o strings a nmeros y viceversa.
Finalmente podemos probar en nuestro mvil o en el emulador el programa y comprobar si todo ha ido
bien. Para ello pulsamos el botn Connect to Device... de la esquina superior derecha del editor de
bloques y le decimos que transfiera el programa al dispositivo deseado.

Podemos ir modificando tanto el programa de bloques como el diseo grfico despus de haber
conectado al mvil o al emulador y se ver en tiempo real como cambia el diseo de la aplicacin en el
dispositivo. Adems, en caso de que hubiera errores en la lgica del programa que quisiramos
depurar, tambin existe un sistema de depuracin 12 muy completo para poder ver el flujo del programa,
valores de variables, etc.
En la web oficial de App Inventor existe una completa referencia 13 que explica la funcionalidad de todos
y cada uno de los bloques disponibles para el lenguaje de programacin. Explica breve y
concisamente los bloques y es un sitio ideal para familiarizarse con las posibilidades de App Inventor y
consultar las dudas que puedan surgir al hacer los programas.