Teora

Departamento de Aprendizaje Visual

Introduccin a AppInventor2
A lo largo del mismo vamos a aprender el uso de esta entretenida utilidad web desarrollada por
Google y brindada por el MIT (Instituto Tecnolgico de Massachusetts) para el desarrollo de aplicaciones para telfonos celulares (as como otros dispositivos) con sistema operativo Android.
Para esto necesitaremos contar las siguientes herramientas:

Para Ingresar a la Pgina Web de App Inventor 2:

1) Computadora y Sistema Operativo:

Una Computadora con conexin a internet y puertos USB. Se puede optar por las siguientes 3 posibilidades:
a. PC con Windows, ya sea Windows XP, Windows Vista o Windows 7.
b. PC con GNU/Linux, ya sea Ubuntu 8, Debian 5 o versiones superiores de estos.
c. Macintosh con procesador Intel y Mac OS X 10.5 o superior.
2) Navegador:
Se puede optar por los siguientes:
a. Mozilla Firefox 3.6 o superior.
b. Google Chrome 4.0 o superior.
c. Apple Safari 5.0 o superior.
No se puede utilizar Microsoft Internet Explorer de momento.
3) Una Cuenta de Gmail.
Explicaremos como crear la misma en pasos posteriores.

Para probar las Apps:

Se puede optar por las siguientes 3 posibilidades:
a. Utilizando el emulador (el cual veremos ms adelante) directamente en la PC.
b. Utilizando un dispositivo Android conectado a travs de USB a la computadora.
c. Utilizando un dispositivo Android conectado a la misma red Ethernet que la
computadora a travs de WiFi.
Para los dos ltimos casos, el telfono o tablet debe contar con sistema operativo
Android 2.3 (Gingerbread) o superior y tener instalada la aplicacin MIT AI2 Companion
App que se puede descargar desde el siguiente link:
https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3

Adems, deberemos instalar en la PC el programa aiStarter. Este programa es necesario tanto

para enlazar como para emular el dispositivo Android. El mismos se puede descargar de aqu:
1

Departamento de Aprendizaje Visual

http://appinv.us/aisetup_windows
Este programa requiere del uso de Java, que es provisto por Oracle gratuitamente en esta direccin:
https://www.java.com/es/download/

Antes de comenzar a trabajar con el entorno necesitaremos disponer de una cuenta de Google, la
cual utilizaremos para loggearnos en el sitio de App Inventor. La misma la podremos crear en la
pgina de Gmail:
https://mail.google.com/

En la esquina superior derecha encontraremos el

botn Crear una cuenta (en azul). Le damos clic y
nos aparecer la siguiente pgina:

Departamento de Aprendizaje Visual

Rellenamos los campos que aparecen en la columna gris con

nuestra informacin (nombre, apellido, nombre de usuario, una
contrasea cualquiera de ocho caracteres, fecha de nacimiento,
sexo, nmero de telfono (opcional) y una direccin de correo
actualmente en uso)
Ingresamos el cdigo de verificacin o capcha de la imagen,
tildamos la casilla de verificacin al lado de Acepto las Condiciones del servicio y la Poltica de privacidad de Google, y damos clic en Siguiente paso.

Listo, ya tenemos nuestra cuenta de Google. Nos propondr

agregar ms informacin a nuestro perfil de usuario para usarlo
en Google+ (la red social de Google), pero esto no ser necesario para utilizar el servicio de App Inventor.
Ya estamos listos para dirigirnos a la pgina de App Inventor,
cuya direccin es:
http://appinventor.mit.edu/explore/

Departamento de Aprendizaje Visual

Para comenzar, damos clic en Create (el icono naranja

arriba a la derecha) y nos abrir una pgina de loggeo con
un cuadro como el de la derecha. Aqu debemos ingresar
la direccin de correo Gmail que creamos anteriormente
(nombre de usuario@gmail.com) y la contrasea de la
misma.
Damos clic en Iniciar Sesin y se nos abrir la siguiente
pgina:

Departamento de Aprendizaje Visual

En la misma verificamos que la cuenta que usaremos para loggearnos es la misma que ingresamos
en el paso anterior, damos clic en Permitir y ya estaremos listos para empezar a utilizar los servicios del MIT App inventor. Al hacer esto se nos presenta la siguiente pgina de bienvenida:

Hacemos clic en el botn Continue del cuadro de bienvenida y listo, ya habremos ingresado dentro del entorno de desarrollo App Inventor.
Es posible que antes de esto nos aparezca un recuadro proponindonos contestar una encuesta
para mejorar el servicio. De estar interesados en completar la misma mas tarde cliqueamos en
Take Survey Later, de otro modo daremos clic en Never Take Survey y ya no nos aparecer ms
este cartel.

Departamento de Aprendizaje Visual

Una vez hecho esto, nos aparecer otro cartel indicndonos que no disponemos de ningn proyecto dentro de AppInventor2, y que de haber trabajado en el AppInventor anterior (AppInventor 1,
por as decir), nuestros proyectos se encuentran a salvo todava en esa otra versin.

Simplemente ignoramos este cartel y nos disponemos a comenzar. Para esto basta cliquear en
cualquier parte de la pgina, con lo que vamos a cliquear directamente en el botn New Project
que se encuentra en la esquina superior derecha, debajo del logo del MIT App Inventor 2.
Automticamente nos parece un cuadro de dialogo en el cual vamos a indicar el nombre que llevar el proyecto, supongamos por caso Proyecto01.

Departamento de Aprendizaje Visual

Damos enter y por unos segundos veremos la siguiente pantalla, que es donde nos van a aparecer
todos los proyectos que vayamos creando en forma de listado:

Departamento de Aprendizaje Visual

Pero debido a que, slo contamos con este proyecto (por ser el primero), este se abrir automticamente, con lo cual estaremos frente a una pantalla como la que sigue a continuacin, a la cual
hemos agregado algunas descripciones generales:

Cmo podemos apreciar, en la parte superior de la pgina se encuentra una barra de mens de
color gris:

Estos mens son Project (Proyecto), Connect (Conectar), Build (Construir) y Help (Ayuda).
Dentro de Project encontraremos
-

My Projects: Nos devuelve a la pgina anterior, en la cual se encuentra el listado de

todos los proyectos que hayamos creado.

Start new Project: Nos permite comenzar un nuevo proyecto de cero.

Import Project (.aia) from my computer: Nos permite importar un proyecto que tengamos guardado en nuestra pc (o en un pendrive), el cual debe encontrarse en el formato con extensin aia.

Departamento de Aprendizaje Visual

Delete Project: Para eliminar un proyecto dentro de My Projects, luego de que hayamos tildado la casilla de verificacin a la izquierda de este. Tener en cuenta que una
vez borrados los proyectos, NO se podrn recuperar.

Save project: Guarda el proyecto actual, sin cerrar el mismo.

Save Project as: Permite guardar el proyecto con un nuevo nombre. Por defecto, se
nos propondr el mismo nombre de proyecto pero con el agregado del sufijo _copy.
Una vez hecho esto, el proyecto con el nuevo nombre se nos abrir automticamente
para que continuemos trabajando en este.

Checkpoint: Muy similar a Save Project as, con la diferencia de que el nombre propuesto llevara el sufijo _checkpointN, donde N es un nmero que se incrementa cada vez que generamos un checkpoint (punto de chequeo), y que el proyecto con el
nuevo nombre no se abrir automticamente.
Nos ser de mucha utilidad cuando no estamos seguros de que los cambios que vamos
a realizar, vayan a resultar como esperamos, y deseamos tener una copia del proyecto
hasta el punto actualmente alcanzado, para poder retomar desde aqu de ser esto necesario.

Export selected project (.aia) to my computer: Nos permite exportar el proyecto que
seleccionemos dentro de My Projects hacia la PC, creando un archivo con extensin
aia. Esto es muy til tanto para tener un backup como para compartir nuestro proyecto con otros usuarios.

Export all project: dem anterior pero seleccionando ms de un proyecto a la vez.

En dicha barra tambin aparecen los links My Projects, que nos devuelve a nuestra lista de proyectos, Guide donde encontraremos informacin de soporte, Report an Issue para enviar un informe
de error, y por ltimo nuestro nombre de usuario donde al cliquear podremos cerrar la sesin.

Departamento de Aprendizaje Visual

Conexiones y prueba de apps

-

Para probar las apps desde WiFi hace falta solo el MIT companion app en el dispositivo. Tanto la computadora como el dispositivo tienen que estar conectados a la misma
red WiFi o en el caso de la pc un cable modem con conexin WiFi y cable de red. Dentro del entorno de app inventor hay que seleccionar en conexiones la opcin AI companion. Aparecer un cdigo QR como el siguiente:

Iniciar la MIT AI2 Companion en el dispositivo y escanear el cdigo QR y listo.

-

Para usar el Emulador o la conexin por USB se debe tener instalado el software AppInventor_Setup_Installer_v_2_2, que se puede descargar de esta direccin:
http://appinv.us/aisetup_windows (si por alguna razn ya tuvieran instalada una versin anterior, ser necesario desinstalar dicha versin y reiniciar la mquina antes de
instalar la nueva versin).
En la mayora de los casos, App inventor es capaz de localizar y detectar el programa
por s mismo, pero en el caso de que el mismo consulte por la ubicacin del software,
la ruta por defecto es C:\Archivos de Programa\Appinventor\commands-forAppinventor.
Para el caso de utilizar una conexin USB para hacer las pruebas directamente en un
telfono celular u otro dispositivo Android, ser necesario instalar los driver de dicho
10

Departamento de Aprendizaje Visual

dispositivo en la computadora, para lo cual debern referirse al manual de usuario de

dicho dispositivo.
Tambin se necesita tener instalado en el dispositivo Android la App MIT AI2 Companion que se puede instalar desde Google Play a travs de este link:
https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3
Hay una pgina para probar la conexin de nuestro dispositivo que es:
http://appinventor.mit.edu/test/

11

Departamento de Aprendizaje Visual

Glosario de Trminos en App Inventor

Argumento
A menudo, en Ciencias de la Computacin, las entradas en los procedimientos o eventos se denominan argumentos. Estos argumentos son variables locales cuyo alcance est dentro de ese procedimiento o evento.
Comportamiento
Se dice que una aplicacin que tiene un comportamiento cuando responde a las acciones del
usuario y de los eventos externos que esta pueda percibir.
Bloque
App Inventor es un lenguaje de programacin por bloques. Los bloques son las piezas que se conectan para poder decirle a la aplicacin lo que debe hacer. Se pueden encontrar en el Editor de
bloques.
Blockly
Blockly es el nombre del editor de programacin visual que App Inventor utiliza para mostrar los
bloques en el navegador.
Editor de bloques
La pantalla se encuentra haciendo clic en el botn de Blocks en la pantalla de diseo. Aqu es donde usted dice a su aplicacin lo que debe hacer.
Comentario
Los comentarios permiten escribir recordatorios u observaciones rpidas sobre los bloques de
cdigo. Se pueden utilizar para explicar lo que ciertos bloques hacen o lo que se desea que hagan
en el futuro. Como los comentarios no se ejecutan, son para el programador y no para la mquina.
El uso de comentarios permite que se pueda entender mejor el cdigo cuando se llega de nuevo a
l ms adelante. Usted puede aadir o eliminar un comentario, haga clic en un bloque.
Componente
Los componentes, son las piezas de su aplicacin que hacen acciones para usted. En la pantalla de
diseo, los componentes se arrastran desde la paleta de componentes y se colocan en el telfono.
Ejemplos de componentes son Label, sonido, o botn.
Diseador
La pantalla en la que puede arrastrar y soltar las piezas componentes y el diseo utilizando la interfaz de usuario.
Cajn
El segundo cuadro en la jerarqua de bloques que va Paleta para Cajn de Block. Un ejemplo de un
cajn es de control.

12

Departamento de Aprendizaje Visual

Desplegable
Algunos bloques tienen una pequea flecha de la derecha a la derecha del nombre del bloque.
Puede hacer clic en esta flecha para cambiar el nombre y la funcin del bloque. El bloque get es un
ejemplo de un men desplegable. Para obtener ms ayuda sobre este tema, echa un vistazo a la
pgina de mens desplegables.
Emulador
El nombre del telfono falso que aparece en su computadora si usted no tiene un dispositivo Android a trabajar es un emulador.
Event Driven
Decimos que una aplicacin est orientada a eventos, ya que depende de los acontecimientos
para saber qu hacer. Usted no le dice a su aplicacin que esperar hasta que un mensaje de texto
antes de hacer otra cosa. En su lugar, mediante el uso de controladores de eventos, le dice a su
aplicacin que cuando se produce un evento, realizar esta tarea. Esto evita que el telfono de gastar toneladas de tiempo de espera para que los eventos suceden mientras se detiene todo lo dems que esperar. Con controladores de eventos, el telfono se puede seguir haciendo lo que se le
asign a hacer a menos que un controlador de eventos se interrumpe. Se dice que el flujo del programa se determina por los acontecimientos.
Getter
A Getter es el bloque que se encuentra en el cajn Variables que dice llegar con una lista desplegable al lado de l. Este bloque se utiliza para devolver una variable local o global.
Lista
Las listas se utilizan para almacenar informacin. Si queras hacer un seguimiento de todos los
nombres de usuario de las personas que utilizan la aplicacin, que se quiere almacenar esa informacin en una lista. Cuando se aaden elementos a una lista, que se colocan en una cierta posicin en la lista. La posicin de un elemento en una lista a menudo se llama su ndice. En App Inventor, el primer elemento de una lista tiene un ndice de 1, la segunda tiene un ndice de 2, y as sucesivamente.
Mutador
Algunos bloques tienen un signo ms blanco en ellos en una caja azul. Estos bloques se denominan
mutators. Si hace clic en el signo ms, una burbuja aparece con el bloque de la izquierda que representa su funcin y todas sus entradas y el bloque de la derecha con el nombre de una de las
entradas. Puede arrastrar este bloque de entrada en el bloque de funcin y entonces su bloque de
funcin tomar ahora una entrada adicional. Lista y max son ejemplos de mutators. Para obtener
ms ayuda sobre este tema, echa un vistazo a la pgina mutators.
Paleta
El cuadro ms amplio / exterior que tiene cajones.

13

Departamento de Aprendizaje Visual

Procedimiento
Un procedimiento es un conjunto de instrucciones. En App Inventor, un procedimiento es un conjunto de bloques bajo un bloque de procedimiento. Para obtener ms ayuda sobre este tema,
echa un vistazo a la pgina de los procedimientos.
Propiedades
Cada componente tiene propiedades que se pueden cambiar o inicializados en la pantalla del Diseador en virtud de las propiedades que se encuentran en el lado derecho. Tambin se pueden
cambiar o se utilizan en la vista mediante el uso de bloques de getter o setter bloques de propiedades. Estos bloques decir algo como get / set Button1.Height.
Setter
Un colocador es otro bloque que se encuentra en el cajn que dice Variables conjunto desplegable
para. Este bloque se usa para asignar nuevos valores a las dos variables locales y globales.
Variable
Una variable es contenedor que almacena un valor. Hay dos tipos de variables: globales y locales.
Para obtener ms informacin sobre este tema, echa un vistazo a la pgina de Global vs variables
locales.

14

Departamento de Aprendizaje Visual

15

Departamento de Aprendizaje Visual

Construccin de la primera aplicacin: HelloPurr

Ahora que ya hemos dado los primeros pasos en la construccin de una App, vamos a construir
una aplicacin completa y funcional. La misma se llamar HelloPurr.
Recomendamos antes de empezar, ya tener enlazado el dispositivos Android (o bien el emulador)
al entorno de AppInventor, de manera que los cambios que realicemos se vean reflejados rpidamente en dicho dispositivo.

HelloPurr: Acariciar al gatito para que haga miau!

HelloPurr es una aplicacin muy sencilla, la que podremos construir en un tiempo muy corto. Vamos a crear un botn, el cual contendr en el la imagen de un gato, y a continuacin, vamos a
programar dicho botn para que cuando se haga clic en l, se reproduzca en sonido de un "miau".
Por estas razones, vamos a necesitar dos archivos: un archivo de imgenes con la foto de un gato,
y un archivo de audio con el sonido de un "miau". Aqu estn los mismos, para que puedan copiarlos a su PC:

meow.mp3

16

Departamento de Aprendizaje Visual

Seleccionar los componentes para disear la aplicacin

Como comentamos anteriormente, los componentes que vamos agregar a nuestra App se encuentran en el lado izquierdo del entorno de diseo, dentro de la columna Palette.
Dichos componentes son los elementos bsicos que necesitamos para hacer nuestras aplicaciones
Android.
Estos son como los ingredientes de una receta. Algunos componentes son muy simples, como el
componente Label, que slo muestra un texto en pantalla, o el componente Button (punto 1 en la
imagen a la izquierda), que al tocarlo realiza una accin.
Otros componentes son ms elaborados: el componente Canvas puede almacenar imgenes fijas
o animaciones, el componente acelermetro que funciona como el control de una consola Wii, los
componentes que reproducen msica y video, etc.
Para utilizar un componente en su aplicacin, tendr que hacer clic y arrastrarlo hacia la ventana
Viewer en el centro de la pantalla Designer. Cuando se agrega un componente a la ventana Viewer (punto 1 en la imagen de ms abajo), este aparecer en la lista de componentes al lado derecho la misma.
Los componentes (punto 2 en la imagen a continuacin) tienen propiedades que se pueden ajustar
para cambiar la forma en la cual componente aparece o se comporta dentro de la aplicacin. Para
ver y cambiar las propiedades de un componente (punto 3 en la imagen a continuacin), primero
debe seleccionar el componente deseado en la lista de componentes.

17

Departamento de Aprendizaje Visual

Pasos para la seleccin de componentes y configuracin de sus propiedades

HelloPurr tendr un componente Button que muestra la imagen del gatito que se encuentra ms
arriba. Para lograr esto siga estos pasos:
-

Paso 1a. Desde la columna Palette, arrastre y suelte el componente Button sobre la
Screen1 (1).

Paso 1b. Para que el botn tenga la imagen del gatito, vaya a la propiedad Image dentro del panel Propierties, haga clic en el texto "None ..." y luego en "Upload File ..." (2).
Una ventana se abrir para que podamos elegir el archivo de imagen. Cliqueamos en
"Browse" y vamos a la ubicacin del archivo de imagen del gatito que copiamos a la PC
(3). Lo seleccionamos y damos clic en "Abrir", y a continuacin, en "OK".

Paso 2 - Cambiar la propiedad Text del botn Button1: Vamos a la propiedad Text
(texto), eliminamos la leyenda "Text de Button1", dejando dicha propiedad en blanco,
de modo que no aparezca nada escrito sobre la cara del gatito.
Si la imagen del gatito aparece incompleta, podemos solucionarlo seleccionando la
opcin Fill parent de las propiedades Height (alto) y Width (ancho) del botn.
18

Departamento de Aprendizaje Visual

Para ello, haga clic en el componente Button1, vaya debajo de todo en el panel propiedades, y haga clic en la palabra "Automtic ..." dentro de la propiedad Width. Se
activar una la lista desplegable, en la cual podr seleccionar la opcin "Fill parent"
(completar cuadro). Haga lo mismo con la propiedad Height.
-

Paso 3a. Desde la columna Palette, arrastre y suelte el componente Label a la ventana
Viewer (1), situndolo debajo de la imagen del gatito. Dicho componente aparecer
en su lista de componentes como Label1.

Paso 3b. Cambiemos ahora la propiedad Text de Label1 por el texto "Pet the Kitty"
(2). Podremos ver cmo cambia el texto dentro de entorno de diseo al mismo tiempo
que en el dispositivo (o el emulador, dependiendo del caso).

Paso 3c. Cambiemos tambin el tamao de la letra de Label1. Para esto, deberemos
hacer clic en la propiedad FontSize, y cambiar su valor, en este caso, a 30 (3).

Paso 3d. Por ltimo, Cambiemos el color de fondo de Label1, haciendo clic en el cuadro BackgroundColor (4). Se puede elegir cualquier color gusten. Tambin se puede
cambiar color del texto de Label1 haciendo clic en TextColor (5). En este caso, hemos
establecido el color de fondo como azul, mientras que para el color del texto elegimos
el amarillo.

Paso 4a. Dentro de la columna Palette, haga clic sobre el submen Media. Ah se encuentra el componente Sound, el cual debemos arrastrar y soltar dentro de la ventana
Viewer (1). No importa donde sea que este caiga, ya que el mismo aparecer en la
19

Departamento de Aprendizaje Visual

parte inferior de dicha ventana, en el rea de marcada como Non-visible components

(componentes no visibles).
-

Paso 4b. Hagamos clic ahora en el botn Upload File del cuadro Media (2). Dentro de
la ventana que se nos presenta (3), buscaremos a la ubicacin del archivo de sonido
que copiamos a la PC con anterioridad (meow.mp3); lo seleccionamos y lo subimos al
proyecto dando clic en OK.

Paso 4c. En el panel Propierties del componente Sound1, ver que la propiedad Source (fuente) muestra la leyenda None (Ninguno). Haga clic en la palabra None para
cambiar la fuente del componente Sound1 a meow.mp3 (4).

Programacin con el Editor de bloques

Hasta ahora slo hemos realizado la organizacin de la pantalla y de los componentes de la App en
el entorno Designer. Para empezar a programar el comportamiento de la App, es necesario ir al
Editor de bloques (Blocks). Hagamos clic en el botn Blocks para ir al editor de bloques.

Una vez que tengamos el Editor de bloques en pantalla, continuaremos con los siguientes
pasos, para programar la aplicacin.

20

Departamento de Aprendizaje Visual

Reproducir un Sonido
-

Paso 1. Del lado izquierdo del Editor de bloques, en el panel Blocks, haremos clic en la
opcin Button1, debajo del submen Screen1. Se nos presentar una lista con los bloques que tenemos disponible para el botn Button1. Arrastre y suelte el bloque
when_Button1.Click en el rea de trabajo, dentro de la ventana Viewer.

Los bloques de color mostaza que tenemos dentro de este men, son lo que llamaremos bloques
de control de eventos. Los bloques de control de eventos especifican cmo debe responder el
dispositivo a ciertos eventos: un botn ha sido pulsado, el dispositivo est siendo sacudido, el
usuario est arrastrando su dedo sobre la pantalla, etc.
Podemos distinguir a los bloques de control de eventos porque comienzan con la palabra when
(cuando), adems de por su color. En este caso, when_Button1.Click es un ejemplo de bloque de
control de eventos.

21

Departamento de Aprendizaje Visual

Paso 2. Hagamos clic ahora sobre la opcin Sound1. Seleccionamos el bloque

call_Sound1.Play, y lo colocamos dentro de la seccin de tareas (do) del bloque
when_Button1.Click. Los bloques se conectan entre s como las piezas de un rompecabezas, y se puede or el sonido de un clic cuando estos se conectan.

Los bloques de color prpura se denominan bloques de comandos. Estos bloques se colocan dentro de la seccin de tareas de los bloques de control de eventos, de manera que cuando estos
ltimos son ejecutados, lo que se ejecuta es la secuencia de comandos dentro de ellos. Un comando es un bloque que especifica una accin a realizar (por ejemplo, la reproduccin de sonido)
cuando se activa un evento (al pulsar, por ejemplo, el botn Button1).
Al llegar a este punto, los bloques colocados deben tener este aspecto:

22

Departamento de Aprendizaje Visual

Ahora usted puede ver que el bloque de comandos se encuentra en el controlador de eventos.
Este conjunto de bloques significa; "Cuando se hace clic en el botn Button1, se reproduce el sonido Sound1".
Podemos decir que los bloques de control de eventos indican la categora de la accin a realizar
(por ejemplo, el presionar un botn), mientras que los bloques de comando especifican el tipo de
accin y sus detalles (por ejemplo, la reproduccin de sonido especfico).
Probemos la App! Al tener nuestro dispositivo Android enlazado a la PC (o al estar usando el emulador), veremos que dentro de mismo tenemos la pantalla con la imagen del gatito tal y como la
armramos dentro del entorno de diseo. Vern que al tocar (o hacer click) sobre el gatito se escuchara un maullido. Felicitaciones, su primera aplicacin se est ejecutando!
Empaquetado de la aplicacin
Si durante el armado de la App mantuvieron enlazado un dispositivo Android (o el emulador) a la
PC, habrn notado que la misma ha estado funcionando en tiempo real en dicho dispositivo, o sea,
se ha ido armando dentro del mismo.
En cuanto desconectemos el dispositivo (o cerremos el emulador) de la PC, la aplicacin va a desaparecer de dicho dispositivo. Podremos volver a enlazar con la PC todas las veces que queramos,
de manera que la App vuelva a ejecutarse dentro del dispositivo. Pero lo deseamos es tener la App
en ejecucin sin tener que estar conectado a App Inventor. Para esto necesitamos empaquetar la
aplicacin, de manera que obtengamos un archivo "paquete", cuya extensin ser .apk.
Para realizar el empaquetado de la aplicacin, haremos clic en el men Build, dentro de la barra
gris, en la parte superior de la pantalla. Dentro de este men tendremos dos opciones posibles,

App (provide QR code) y App (sabe to my computer):

1. App (provide QR code): Al cliquear esta opcin se nos presentar en pantalla un cdigo QR,
con el cual vamos a poder instalar la App en aquellos dispositivos que cuenten cmara de fotos y conexin a internet. Para poder utilizar esta opcin, ser necesario contar con alguna
aplicacin de escaneo de cdigos QR, tal como Googles o cualquier otra de las que se encuentran disponibles gratuitamente en Google Play.
Nota: el cdigo QR funcionar slo con aquellos dispositivos que tengan asociada la misma
cuenta de Google que la utilizada dentro de App Inventor.

23

Departamento de Aprendizaje Visual

2. App (sabe to my computer): Con esta opcin vamos a poder descargar la App a la PC en la
forma de un archivo apk, el cual podremos compartir con otras personas, sin necesidad de
que estas usen App Inventor. Para esto, una vez que tengamos nuestro archivo .apk, debemos copiarlo dentro de la memoria SD del dispositivo en el cual deseamos instalar la
App.
Luego, utilizando alguna de las aplicaciones de exploracin archivos que podemos en encontrar gratuitamente en Google Play, intentaremos abrir dicho archivo .apk. Nuestro dispositivo reconocer automticamente que se trata de un archivo de instalacin Android, y
nos propondr instalar entonces la App que este contiene. Tocamos en aceptar, y listo! Ya
tendremos instalada la App para usarla en cualquier momento que queramos.

Ejercicio Desafo! Hacer que el gato ronronee

Vamos a modificar la App para hacer que el gato ronronee. El reto es hacer que cuando hagamos clic sobre el botn que contiene la imagen, el telfono vibre al mismo tiempo que se reproduce el sonido.
Bloques a utilizar:
-

when_Button1.Click
call_Sound1.Play
call_Sound1.Vibrate
Bloque numrico

Manos a la Obra!

24

Departamento de Aprendizaje Visual

Canvas
Introduciremos el componente Canvas (lienzo) para crear grficos simples en dos dimensiones.
Vamos a construir una App que nos permitir dibujar en la pantalla del telfono con diferentes
colores.
Objetivo
Vamos a construir una aplicacin que llamaremos PaintPot, en honor a uno de los primeros programas desarrollados en la dcada de 1970, el cual demostraba el gran potencial de las computadoras personales. La aplicacin cumplir los siguientes requisitos:

Se seleccionar con el dedo el color con el que se va a dibujar.

Al arrastrar el dedo por la pantalla, se dibujar una lnea de dicho color.
Con un solo toque sobre la pantalla se dibujar un punto.
Al tocar un botn en la parte inferior de la pantalla, est se limpiar.
Incluir una imagen como fondo del dibujo.

Este mdulo presenta los siguientes conceptos de App Inventor:

El componente Canvas, utilizado para dibujar.

Determinar la disposicin en pantalla utilizando el componente Arrangement.
Bloque de control de eventos que utilizan argumentos.
Variables.

25

Departamento de Aprendizaje Visual

Antes de Comenzar
Asegrese de que su PC y su dispositivo (o emulador) se encuentren enlazados. Inicie un nuevo
proyecto con el nombre "PaintPot".
Ttulo de la pantalla
Empecemos por cambiar el ttulo de la pantalla. Para esto, debern seleccionar el componente
Screen1 dentro del panel Components. Luego, dentro del panel Properties encontraremos la propiedad Title (ttulo). En ella debemos escribir el texto "PaintPot". Al apretar enter, veremos que el
ttulo de la Screen1 cambiar, y que este cambio se ver automticamente reflejado en el dispositivo enlazado (o emulador).
Hay tres elementos dentro de App Inventor a los cuales se puede considerar como nombres, y es
fcil confundirlos:
1. El nombre que elegimos para el proyecto en el cual hemos de trabajar (en este caso, PaintPot). Este ser tambin el nombre de la App, en el caso de que se la empaquete en un
archivo .apk para luego instalarla en un dispositivo.
2. El nombre "Screen1", que es el nombre del componente de pantalla, el cual puede verse
en el panel Components del entorno de diseo. En la versin actual de App Inventor no es
posible cambiar el nombre del primer componente de pantalla, pero s se pueden crear
nuevas pantallas, a las cuales se les podr cambiar el nombre de componente.
3. La propiedad Title (ttulo) de la pantalla, que es lo que aparece en la barra de ttulo del
dispositivo Android al ejecutar la App. Title es una propiedad del componente de pantalla
Screen1. El texto por defecto de la propiedad Title ser "Screen1", que es el que se ha
utilizado dentro HelloPurr. Sin embargo, este se puede modificar, como podemos observar
al reescribirlo como PaintPot.
Reiterando, el nombre y el ttulo del componente Screen1 son inicialmente iguales, pero
podremos cambiar el ttulo, modificando la propiedad Title.
Seleccionar los componentes
Para armar la App PaintPot , vamos a necesitar los siguientes componentes:

Cuatro botones: Tres botones para la seleccin del color; uno rojo, otro azul, y uno verde;
y un botn adicional para limpiar o borrar el dibujo.
Un componente Canvas (lienzo), que proveer la superficie sobre la cual dibujar. Dentro
de dicho componente colocaremos una imagen de fondo, la misma que usamos para
HelloPurr. Esto se logra cargando dicha imagen dentro de la propiedad BackgroundImage
del componente Canvas. Tambin es posible dibujar sobre un lienzo en blanco con slo
dejar dicha propiedad como est por defecto.
Tambin vamos a utilizar un componente no visible: el componente HorizontalArrangement para hacer que los tres botones de color aparezcan alineados.

26

Departamento de Aprendizaje Visual

Eso hace seis componentes en total. Vamos a por ellos para construir la App.
Botones de Seleccin del Color

Vamos a colocar un botn, al cual le cambiaremos la propiedad Text por la palabra "Rojo",
y seleccionaremos como color de fondo el rojo, seleccionando este color en la propiedad
BackgroundColor.
Luego, haremos clic sobre Button1 dentro del panel Components. Ms abajo y dentro de
este mismo panel encontraremos el botn Rename... (Renombrar). Con dicho botn vamos a cambiar el nombre de dicho componente de "Button1" a "BotonRojo".
Del mismo modo, haremos dos botones ms; uno para el azul y otro para el verde, y los
llamaremos BotonAzul " y "BotonVerde" respectivamente. Dichos botones aparecern
alineados verticalmente debajo del botn rojo.

El entorno de diseo nos debera quedar de manera similar a como aparece a continuacin, con
los nombres los componentes Button cambiados, en lugar de dejarlos con los nombres predeterminados como hicimos con HelloPurr. El uso de nombres significativos hace que los proyectos sean
ms legibles y fciles de entender a la hora de revisarlos.

Mejorar la Disposicin de los Componentes en Pantalla

Al momento debemos tener tres botones, alineados uno encima del otro. El siguiente paso es hacer que estos se alineen horizontalmente. Para ello, utilizaremos el componente HorizontalArrangement (alineacin horizontal).
27

Departamento de Aprendizaje Visual

1. Dentro del panel Palette, en la categora Layout, encontraremos el componente HorizontalArrangement. Colocaremos uno de estos debajo de los botones de color. Luego, en el
panel Components cambiaremos su nombre de "HorizontalArrangement1" a "TresBotones".
2. En el panel Properties, cambiaremos la propiedad Width del componente TresBotones
por "Fill parent ...". Esto har que el mismo ocupe todo el ancho de la pantalla.
3. Moveremos ahora los tres botones dentro de dicho HorizontalArrangement, de manera
que estos queden uno al lado del otro.
Sugerencia: La mover un componente dentro de la pantalla, veremos una lnea de color
azul que nos indicar donde quedar situada la pieza al momento de soltarla. Utilice dicha
gua para lograr el orden deseado.
Si miramos en la lista de componentes del proyecto, veremos que los tres botones aparecen ahora
debajo del componente TresBotones, con un espacio de sangra. Esto quiere decir que los botones son ahora subcomponentes de TresBotones. Observemos adems que todos los componentes aparecen a su vez sangrados debajo de Screen1, o sea, son subcomponentes de la pantalla.

En este punto, debemos ser capaces de ver los tres botones alineados en la pantalla del dispositivo
(o emulador) enlazado, aunque no todo se ver exactamente como en el entorno de diseo. Por
ejemplo, vemos un contorno alrededor del HorizontalArrangement dentro del entorno de diseo,
no as en el dispositivo.
En general, los distintos tipos de Arrangements se utilizan para crear diseos sencillos. Se pueden crear diseos ms complejos anidando varios componentes de este tipo dentro de una misma
pantalla.

28

Departamento de Aprendizaje Visual

El Canvas y el Botn Borrar

Los dos ltimos componentes son el Canvas y el Botn Borrar.
1. Coloquemos un componente Canvas dentro de la ventana Viewer. El mismo se encuentra
en la columna Palette, dentro de la subcategora Drawing and Animation. Luego, cambiemos su nombre a "CanvasDeDibujo". Luego, estableceremos su propiedad Width como
"Fill parent", mientras que su propiedad Height la estableceremos en 300 pxeles.
2. Podremos agregar a dicho Canvas una imagen de fondo. Para esto, haga clic en el campo
que contiene el texto "None ..." junto a BackgroundImage dentro del panel Properties de
dicho Canvas. Podemos utilizar por ejemplo, el mismo archivo kitty.png que usramos para para la App HelloKitty, as como tambin cualquier otra imagen de la que dispongan.
Se puede utilizar cualquier imagen que se desee, pero para conseguir los mejores resultados, el tamao de la imagen debe ser cercano al tamao del Canvas que se mostrar
dentro del dispositivo (en pxeles). Adems, cuanto mayor sea el tamao de la imagen,
mayor ser el tiempo que tardar en cargarse, y podran exceder la capacidad de memoria
que el telfono le asigna a las aplicaciones.
3. Coloquemos el ltimo botn en la pantalla debajo del Canvas. Cambiaremos su nombre a
"BotonBorrar", y dentro del panel Properties, su atributo Text por el texto "Borrar".
Ya hemos completado los pasos para configurar el aspecto de la App. As es como debera verse
dentro del entorno Designer.

29

Departamento de Aprendizaje Visual

A continuacin, vamos a definir cul ser el comportamiento de la App.

Determinar el Comportamiento de la Aplicacin
Hagamos clic en el botn de Blocks para cambiar al Editor de Bloques. Primero que aremos ser
configurar los botones que cambian el color con el que se pinta. Posteriormente, agregaremos
bloques para definir lo que sucede cuando alguien se toca o se desliza el dedo sobre la pantalla.
Uso de los Controladores de Evento para los Botones
En el Editor de bloques:
1. Dentro de la columna Blocks, cliqueamos sobre BotonRojo y arrastramos el bloque
when_BotonRojo.Click.
2. Dentro de la columna Blocks, cliqueamos ahora sobre CanvasDeDibujo. Seleccionamos
el bloque set_CanvasDeDibujo.PaintColor_to y lo colocamos en la seccin de tareas de
when_BotonRojo.Click .
3. Dentro de la columna Blocks, cliqueamos sobre el submen Colors, seleccionamos el bloque de color rojo y lo encastramos al bloque set_CanvasDeDibujo.PaintColor_to
4. Repetiremos los pasos del 1 al 3 para hacer lo propio con los botones tanto Azul como
Verde.
5. El ltimo botn a configurar es el botn Borrar. Dentro de la columna Blocks, cliqueamos
sobre BotonBorrar y seleccionamos el bloque when_BotonBorrar.Click. Luego cliqueamos sobre CanvasDeDibujo, seleccionamos el bloque call_CanvasDeDibujo.Clear y lo
colocamos en la seccin de tareas de when_BotonRojo.Click.
Los bloques de los botones deberan resultar similares a esto:

30

Departamento de Aprendizaje Visual

Uso de los Bloques de Control para el Touch

Vamos con el siguiente paso: dibujar dentro del Canvas. Vamos a organizar las cosas para que al
tocar el Canvas, se obtenga un punto en el lugar donde se toca, pero si arrastra el dedo lentamente sobre este, se dibuja una lnea.

Dentro del Editor de bloques, en la columna Blocks, cliqueamos sobre CanvasDeDibujo y

seleccionamos el bloque when.CanvasDeDibujo.Touched. Tan pronto como colocamos dicho bloque en la ventana Viewer podremos observar tres nombres de argumentos (resaltados en naranja), ubicados en la parte superior del bloque; estos son X, Y, y touchedSprite. A estos argumentos tambin se los conoce como variables locales, y se los pueden utilizar mediante cualquiera de los bloques para variables ya vistos. Tambin podremos acceder a estas variables cliqueando sobre el nombre que aparece resaltado en naranja y seleccionando el bloque correcto en el men desplegable.

Como hemos visto anteriormente, el uso de los bloques de control eventos tales como
when.BotonRojo.Click es bastante simple, porque no hace falta saber nada ms sobre el Click
aparte del hecho de que sucedi.
Otros controladores de eventos, tales como when.CanvasDeDibujo.Touched necesitan informacin sobre el evento. En App Inventor, esta informacin se expresa como el valor de los argumentos relacionados con el bloque de control de eventos. Para el evento
when.CanvasDeDibujo.Touched, los dos primeros argumentos representan la coordenadas X e Y
de donde ocurri el contacto. Dejaremos el uso de touchedSprite para otra ocacin.

Cuando este evento tctil se produzca, har que dentro del Canvas se dibuje un pequeo
crculo en el punto de coordenadas (x, y). Seleccionamos el bloque
call.CanvasDeDibujo.DrawCircle y colocarlo en la seccin de tareas del bloque
when.CanvasDeDibujo.Touched.

Del lado derecho del bloque call.CanvasDeDibujo.DrawCircle encontraremos tres encastres en los
que se debe especificar los valores para las coordenadas X e Y en los que se debe dibujar el crculo,
y el valor de r, que es el radio del crculo. Para X e Y, utilizaremos los valores de los argumentos
que suministrados por el bloque when.CanvasDeDibujo.Touched, para esto:
1. Haremos clic sobre la variable local X (resaltada en color naranja). Dentro del men que se
despliega encontraremos el bloque get.x; lo seleccionamos y colocamos en el encastre correspondiente a x en el bloque call.CanvasDeDibujo.DrawCircle.
31

Departamento de Aprendizaje Visual

2. Haremos lo mismo con la variable local Y.

3. Tambin tendremos que especificar el radio del crculo a dibujar. Cinco (pxeles) es un
buen valor para esta App. Haga clic en un rea vaca de la ventana Viewer, escriba el nmero 5 y presione enter; esto crear un bloque de numrico con un valor igual a 5. Escribir
en el rea en blanco de la pantalla se llama typeblocking y resulta muy til como atajo. Esto puede hacerse con cualquier bloque, no slo nmeros. Coloquemos el bloque numrico
con el valor 5 en el encastre r.
As es como debera quedar el bloque when.CanvasDeDibujo.Touched:

En el caso de que estemos trabajando con un dispositivo android enlazado, podremos probar lo
realizado hasta ahora en el mismo. Toque alguno de los botones de color. Ahora, toque dentro del
Canvas; deber observarse una mancha en cada lugar donde toca. Al tocar el botn Borrar, debera limpiarse el dibujo y quedar como al principio.

------------------------------------------------------------------------------------------------------------Dibujar una Lnea Cuando se Arrastra el Dedo

Por ltimo, vamos a agregar el bloque de control para que al deslizar el dedo, se dibuje una lnea.
Aqu est la diferencia entre un toque y un arrastre:

Un toque es cuando ponemos el dedo sobre la pantalla y lo levantamos sin moverlo.

Un arrastre es cuando ponemos el dedo sobre la pantalla y lo movemos manteniendo el
contacto.

Al arrastrar el dedo por la pantalla, describiendo por ejemplo una lnea curva, lo que sucede en
realidad es que se irn dibujando cientos de pequeas lneas rectas entre cada punto del recorrido: cada vez que se mueve el dedo, aunque sea por muy poco, se extender la lnea graficada desde la ltima posicin que ocupara su dedo hasta la posicin inmediatamente posterior.
Para cumplir con la tarea, vamos a utilizar un bloque de control llamado Dragged (arrastrado), el
cual se encuentra entre los bloque que operan dentro del Canvas. Este cuenta con 6 argumentos.
Se trata de tres pares de coordenadas X e Y, las cuales describen:

La posicin del dedo donde comenz el arrastre (startX y startY).

32

Departamento de Aprendizaje Visual

La posicin actual del dedo (currentX y currentY).

La posicin del dedo inmediatamente anterior a la actual (prevX y prevY).

Vemos tambin que existe un argumento llamado draggedSprite, que no vamos a utilizar por el
momento.
Vamos a colocar ahora los bloques que necesitamos para lograr dibujar una lnea:
1. Seleccionamos el bloque when.CanvasDeDibujo.Dragged y lo colocamos en el rea de
trabajo. Para esto, vamos a la columna Blocks, cliqueamos sobre CanvasDeDibujo, y arrastramos dicho bloque (el cual aparece al principio de la lista) hacia la ventana Viewer.
2. En la misma ubicacin de la columna Blocks vamos a encontrar el bloque
call.CanvasDeDibujo.DrawLine. Lo seleccionamos y colocamos dentro del rea de tareas
del bloque when.CanvasDeDibujo.Dragged.
3. Por ltimo, completamos el bloque call.CanvasDeDibujo.DrawLine. Para esto, cliqueamos
sobre el argumento prevX, seleccionamos el bloque get.prevX y lo colocamos en el encastre x1. Haremos lo mismo con los otros encastres: get.prevY para y1, get.currentX para x2
y get.currentY para y2.
Aqu est el resultado:

Pruebe ahora la App dentro del dispositivo android (o emulador) enlazado: arrastre el dedo por la
pantalla para dibujar lneas y curvas. Toque la pantalla para hacer puntos. Utilice el botn Limpiar
para limpiar la pantalla.
FIN

33