1. No category

Teoría
Departamento de Aprendizaje Visual
Introducción 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 Tecnológico de Massachusetts) para el desarrollo de aplicaciones para teléfonos celulares (así como otros dispositivos) con sistema operativo Android.
Para esto necesitaremos contar las siguientes herramientas:

Para Ingresar a la Página Web de App Inventor 2:
1) Computadora y Sistema Operativo:
Una Computadora con conexión 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 más adelante) directamente en la PC.
b. Utilizando un dispositivo Android conectado a través de USB a la computadora.
c. Utilizando un dispositivo Android conectado a la misma red Ethernet que la
computadora a través de WiFi.
Para los dos últimos casos, el teléfono o tablet debe contar con sistema operativo
Android 2.3 (Gingerbread) o superior y tener instalada la aplicación MIT AI2 Companion
App que se puede descargar desde el siguiente link:
https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3
Además, 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 dirección:
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
página de Gmail:
https://mail.google.com/
En la esquina superior derecha encontraremos el
botón Crear una cuenta (en azul). Le damos clic y
nos aparecerá la siguiente página:
2
Departamento de Aprendizaje Visual
Rellenamos los campos que aparecen en la columna gris con
nuestra información (nombre, apellido, nombre de usuario, una
contraseña cualquiera de ocho caracteres, fecha de nacimiento,
sexo, número de teléfono (opcional) y una dirección de correo
actualmente en uso)
Ingresamos el código de verificación o capcha de la imagen,
tildamos la casilla de verificación al lado de Acepto las Condiciones del servicio y la Política de privacidad de Google, y damos clic en Siguiente paso.
Listo, ya tenemos nuestra cuenta de Google. Nos propondrá
agregar más información 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 página de App Inventor,
cuya dirección es:
http://appinventor.mit.edu/explore/
3
Departamento de Aprendizaje Visual
Para comenzar, damos clic en Create (el icono naranja
arriba a la derecha) y nos abrirá una página de loggeo con
un cuadro como el de la derecha. Aquí debemos ingresar
la dirección de correo Gmail que creamos anteriormente
(“nombre de usuario”@gmail.com) y la contraseña de la
misma.
Damos clic en Iniciar Sesión y se nos abrirá la siguiente
página:
4
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 página de bienvenida:
Hacemos clic en el botón 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 proponiéndonos 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á más
este cartel.
5
Departamento de Aprendizaje Visual
Una vez hecho esto, nos aparecerá otro cartel indicándonos que no disponemos de ningún proyecto dentro de AppInventor2, y que de haber trabajado en el AppInventor anterior (AppInventor 1,
por así decir), nuestros proyectos se encuentran a salvo todavía en esa otra versión.
Simplemente ignoramos este cartel y nos disponemos a comenzar. Para esto basta cliquear en
cualquier parte de la página, con lo que vamos a cliquear directamente en el botón New Project
que se encuentra en la esquina superior derecha, debajo del logo del MIT App Inventor 2.
Automáticamente nos parece un cuadro de dialogo en el cual vamos a indicar el nombre que llevará el proyecto, supongamos por caso Proyecto01.
6
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:
7
Departamento de Aprendizaje Visual
Pero debido a que, sólo contamos con este proyecto (por ser el primero), este se abrirá automáticamente, con lo cual estaremos frente a una pantalla como la que sigue a continuación, a la cual
hemos agregado algunas descripciones generales:
Cómo podemos apreciar, en la parte superior de la página se encuentra una barra de menús de
color gris:
Estos menús son Project (Proyecto), Connect (Conectar), Build (Construir) y Help (Ayuda).
Dentro de Project encontraremos
-
My Projects: Nos devuelve a la página 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 extensión aia.
8
Departamento de Aprendizaje Visual
-
Delete Project: Para eliminar un proyecto dentro de My Projects, luego de que hayamos tildado la casilla de verificación a la izquierda de este. Tener en cuenta que una
vez borrados los proyectos, NO se podrán 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á automáticamente
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 número que se incrementa cada vez que generamos un checkpoint (punto de chequeo), y que el proyecto con el
nuevo nombre no se abrirá automáticamente.
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 extensión
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 más de un proyecto a la vez.
En dicha barra también aparecen los links My Projects, que nos devuelve a nuestra lista de proyectos, Guide donde encontraremos información de soporte, Report an Issue para enviar un informe
de error, y por último nuestro nombre de usuario donde al cliquear podremos cerrar la sesión.
9
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 conexión WiFi y cable de red. Dentro del entorno de app inventor hay que seleccionar en conexiones la opción AI companion. Aparecerá un código QR como el siguiente:
Iniciar la “MIT AI2 Companion” en el dispositivo y escanear el código QR y listo.
-
Para usar el Emulador o la conexión por USB se debe tener instalado el software “AppInventor_Setup_Installer_v_2_2”, que se puede descargar de esta dirección:
http://appinv.us/aisetup_windows (si por alguna razón ya tuvieran instalada una versión anterior, será necesario desinstalar dicha versión y reiniciar la máquina antes de
instalar la nueva versión).
“En la mayoría 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 ubicación del software,
la ruta por defecto es C:\Archivos de Programa\Appinventor\commands-forAppinventor.”
Para el caso de utilizar una conexión USB para hacer las pruebas directamente en un
teléfono celular u otro dispositivo Android, será necesario instalar los driver de dicho
10
Departamento de Aprendizaje Visual
dispositivo en la computadora, para lo cual deberán referirse al manual de usuario de
dicho dispositivo.
También se necesita tener instalado en el dispositivo Android la App “MIT AI2 Companion” que se puede instalar desde Google Play a través de este link:
https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3
Hay una página para probar la conexión de nuestro dispositivo que es:
http://appinventor.mit.edu/test/
11
Departamento de Aprendizaje Visual
Glosario de Términos en App Inventor
Argumento
A menudo, en Ciencias de la Computación, 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 aplicación 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 programación por bloques. Los bloques son las piezas que se conectan para poder decirle a la aplicación lo que debe hacer. Se pueden encontrar en el Editor de
bloques.
Blockly
Blockly es el nombre del editor de programación visual que App Inventor utiliza para mostrar los
bloques en el navegador.
Editor de bloques
La pantalla se encuentra haciendo clic en el botón de Blocks en la pantalla de diseño. Aquí es donde usted dice a su aplicación lo que debe hacer.
Comentario
Los comentarios permiten escribir recordatorios u observaciones rápidas sobre los bloques de
código. 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 máquina.
El uso de comentarios permite que se pueda entender mejor el código cuando se llega de nuevo a
él más adelante. Usted puede añadir o eliminar un comentario, haga clic en un bloque.
Componente
Los componentes, son las piezas de su aplicación que hacen acciones para usted. En la pantalla de
diseño, los componentes se arrastran desde la paleta de componentes y se colocan en el teléfono.
Ejemplos de componentes son Label, sonido, o botón.
Diseñador
La pantalla en la que puede arrastrar y soltar las piezas componentes y el diseño utilizando la interfaz de usuario.
Cajón
El segundo cuadro en la jerarquía de bloques que va Paleta para Cajón de Block. Un ejemplo de un
cajón es de control.
12
Departamento de Aprendizaje Visual
Desplegable
Algunos bloques tienen una pequeña flecha de la derecha a la derecha del nombre del bloque.
Puede hacer clic en esta flecha para cambiar el nombre y la función del bloque. El bloque get es un
ejemplo de un menú desplegable. Para obtener más ayuda sobre este tema, echa un vistazo a la
página de menús desplegables.
Emulador
El nombre del teléfono falso que aparece en su computadora si usted no tiene un dispositivo Android a trabajar es un emulador.
Event Driven
Decimos que una aplicación está orientada a eventos, ya que depende de los acontecimientos
para saber qué hacer. Usted no le dice a su aplicación 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
aplicación que cuando se produce un evento, realizar esta tarea. Esto evita que el teléfono de gastar toneladas de tiempo de espera para que los eventos suceden mientras se detiene todo lo demás que esperar. Con controladores de eventos, el teléfono 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 cajón 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 información. Si querías hacer un seguimiento de todos los
nombres de usuario de las personas que utilizan la aplicación, que se quiere almacenar esa información en una lista. Cuando se añaden elementos a una lista, que se colocan en una cierta posición en la lista. La posición 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 más blanco en ellos en una caja azul. Estos bloques se denominan
mutators. Si hace clic en el signo más, una burbuja aparece con el bloque de la izquierda que representa su función 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 función y entonces su bloque de
función tomará ahora una entrada adicional. Lista y max son ejemplos de mutators. Para obtener
más ayuda sobre este tema, echa un vistazo a la página mutators.
Paleta
El cuadro más 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 más ayuda sobre este tema,
echa un vistazo a la página de los procedimientos.
Propiedades
Cada componente tiene propiedades que se pueden cambiar o inicializados en la pantalla del Diseñador en virtud de las propiedades que se encuentran en el lado derecho. También 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 cajón 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 más información sobre este tema, echa un vistazo a la página de Global vs variables
locales.
14
Departamento de Aprendizaje Visual
15
Departamento de Aprendizaje Visual
Construcción de la primera aplicación: HelloPurr
Ahora que ya hemos dado los primeros pasos en la construcción de una App, vamos a construir
una aplicación 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 rápidamente en dicho dispositivo.
HelloPurr: Acariciar al gatito para que haga miau!
HelloPurr es una aplicación muy sencilla, la que podremos construir en un tiempo muy corto. Vamos a crear un botón, el cual contendrá en el la imagen de un gato, y a continuación, vamos a
programar dicho botón 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 imágenes con la foto de un gato,
y un archivo de audio con el sonido de un "miau". Aquí están los mismos, para que puedan copiarlos a su PC:
meow.mp3
16
Departamento de Aprendizaje Visual
Seleccionar los componentes para diseñar la aplicación
Como comentamos anteriormente, los componentes que vamos agregar a nuestra App se encuentran en el lado izquierdo del entorno de diseño, dentro de la columna Palette.
Dichos componentes son los elementos básicos 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 sólo muestra un texto en pantalla, o el componente Button (punto 1 en la
imagen a la izquierda), que al tocarlo realiza una acción.
Otros componentes son más elaborados: el componente Canvas puede almacenar imágenes fijas
o animaciones, el componente acelerómetro que funciona como el control de una consola Wii, los
componentes que reproducen música y video, etc.
Para utilizar un componente en su aplicación, 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 más abajo), este aparecerá en la lista de componentes al lado derecho la misma.
Los componentes (punto 2 en la imagen a continuación) tienen propiedades que se pueden ajustar
para cambiar la forma en la cual componente aparece o se comporta dentro de la aplicación. Para
ver y cambiar las propiedades de un componente (punto 3 en la imagen a continuación), primero
debe seleccionar el componente deseado en la lista de componentes.
17
Departamento de Aprendizaje Visual
Pasos para la selección de componentes y configuración de sus propiedades
HelloPurr tendrá un componente Button que muestra la imagen del gatito que se encuentra más
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 botón 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 ubicación del archivo de imagen del gatito que copiamos a la PC
(3). Lo seleccionamos y damos clic en "Abrir", y a continuación, en "OK".
-
Paso 2 - Cambiar la propiedad Text del botón 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
opción Fill parent de las propiedades Height (alto) y Width (ancho) del botón.
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 "Automátic ..." dentro de la propiedad Width. Se
activará una la lista desplegable, en la cual podrá seleccionar la opción "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), situándolo 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 cómo cambia el texto dentro de entorno de diseño al mismo tiempo
que en el dispositivo (o el emulador, dependiendo del caso).
-
Paso 3c. Cambiemos también el tamaño 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. También 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 botón Upload File del cuadro Media (2). Dentro de
la ventana que se nos presenta (3), buscaremos a la ubicación 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).
Programación con el Editor de bloques
Hasta ahora sólo hemos realizado la organización 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 botón 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 aplicación.
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
opción Button1, debajo del submenú Screen1. Se nos presentará una lista con los bloques que tenemos disponible para el botón 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 cómo debe responder el
dispositivo a ciertos eventos: un botón 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…), además 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 opción Sound1. Seleccionamos el bloque
call_Sound1.Play, y lo colocamos dentro de la sección de tareas (do) del bloque
when_Button1.Click. Los bloques se conectan entre sí como las piezas de un rompecabezas, y se puede oír el sonido de un clic cuando estos se conectan.
Los bloques de color púrpura se denominan bloques de comandos. Estos bloques se colocan dentro de la sección 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 acción a realizar (por ejemplo, la reproducción de sonido)
cuando se activa un evento (al pulsar, por ejemplo, el botón 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 botón Button1, se reproduce el sonido Sound1".
Podemos decir que los bloques de control de eventos indican la categoría de la acción a realizar
(por ejemplo, el presionar un botón), mientras que los bloques de comando especifican el tipo de
acción y sus detalles (por ejemplo, la reproducción de sonido específico).
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
armáramos dentro del entorno de diseño. Verán que al tocar (o hacer click) sobre el gatito se escuchara un maullido. Felicitaciones, su primera aplicación se está ejecutando!
Empaquetado de la aplicación
Si durante el armado de la App mantuvieron enlazado un dispositivo Android (o el emulador) a la
PC, habrán 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 aplicación 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 ejecución sin tener que estar conectado a App Inventor. Para esto necesitamos empaquetar la
aplicación, de manera que obtengamos un archivo "paquete", cuya extensión será .apk.
Para realizar el empaquetado de la aplicación, 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 opción se nos presentará en pantalla un código QR,
con el cual vamos a poder instalar la App en aquellos dispositivos que cuenten cámara de fotos y conexión a internet. Para poder utilizar esta opción, será necesario contar con alguna
aplicación de escaneo de códigos QR, tal como Googles o cualquier otra de las que se encuentran disponibles gratuitamente en Google Play.
Nota: el código QR funcionará sólo 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 opción 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 exploración archivos que podemos en encontrar gratuitamente en Google Play, intentaremos abrir dicho archivo .apk. Nuestro dispositivo reconocerá automáticamente que se trata de un archivo de instalación 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 Desafío! 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 botón que contiene la imagen, el teléfono vibre al mismo tiempo que se reproduce el sonido.
Bloques a utilizar:
-
when_Button1.Click
call_Sound1.Play
call_Sound1.Vibrate
Bloque numérico
¡Manos a la Obra!
24
Departamento de Aprendizaje Visual
Canvas
Introduciremos el componente Canvas (lienzo) para crear gráficos simples en dos dimensiones.
Vamos a construir una App que nos permitirá dibujar en la pantalla del teléfono con diferentes
colores.
Objetivo
Vamos a construir una aplicación que llamaremos PaintPot, en honor a uno de los primeros programas desarrollados en la década de 1970, el cual demostraba el gran potencial de las computadoras personales. La aplicación 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 línea de dicho color.
Con un solo toque sobre la pantalla se dibujará un punto.
Al tocar un botón en la parte inferior de la pantalla, está se limpiará.
Incluir una imagen como fondo del dibujo.
Este módulo presenta los siguientes conceptos de App Inventor:




El componente Canvas, utilizado para dibujar.
Determinar la disposición en pantalla utilizando el componente Arrangement.
Bloque de control de eventos que utilizan argumentos.
Variables.
25
Departamento de Aprendizaje Visual
Antes de Comenzar
Asegúrese de que su PC y su dispositivo (o emulador) se encuentren enlazados. Inicie un nuevo
proyecto con el nombre "PaintPot".
Título de la pantalla
Empecemos por cambiar el título de la pantalla. Para esto, deberán seleccionar el componente
Screen1 dentro del panel Components. Luego, dentro del panel Properties encontraremos la propiedad Title (título). En ella debemos escribir el texto "PaintPot". Al apretar enter, veremos que el
título de la Screen1 cambiará, y que este cambio se verá automáticamente reflejado en el dispositivo enlazado (o emulador).
Hay tres elementos dentro de App Inventor a los cuales se puede considerar como nombres, y es
fácil confundirlos:
1. El nombre que elegimos para el proyecto en el cual hemos de trabajar (en este caso, PaintPot). Este será también 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 diseño. En la versión 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 (título) de la pantalla, que es lo que aparece en la barra de título 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 título del componente Screen1 son inicialmente iguales, pero
podremos cambiar el título, modificando la propiedad Title.
Seleccionar los componentes
Para armar la App PaintPot , vamos a necesitar los siguientes componentes:



Cuatro botones: Tres botones para la selección del color; uno rojo, otro azul, y uno verde;
y un botón 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. También es posible dibujar sobre un lienzo en blanco con sólo
dejar dicha propiedad como está por defecto.
También 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 Selección del Color



Vamos a colocar un botón, 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. Más abajo y dentro de
este mismo panel encontraremos el botón Rename... (Renombrar). Con dicho botón vamos a cambiar el nombre de dicho componente de "Button1" a "BotonRojo".
Del mismo modo, haremos dos botones más; uno para el azul y otro para el verde, y los
llamaremos “BotonAzul " y "BotonVerde" respectivamente. Dichos botones aparecerán
alineados verticalmente debajo del botón rojo.
El entorno de diseño nos debería quedar de manera similar a como aparece a continuación, 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
más legibles y fáciles de entender a la hora de revisarlos.
Mejorar la Disposición 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 (alineación horizontal).
27
Departamento de Aprendizaje Visual
1. Dentro del panel Palette, en la categoría 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 línea de color
azul que nos indicará donde quedará situada la pieza al momento de soltarla. Utilice dicha
guía 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 sangría. Esto quiere decir que los botones son ahora subcomponentes de “TresBotones”. Observemos además 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 diseño. Por
ejemplo, vemos un contorno alrededor del HorizontalArrangement dentro del entorno de diseño,
no así en el dispositivo.
En general, los distintos tipos de “Arrangements” se utilizan para crear diseños sencillos. Se pueden crear diseños más complejos anidando varios componentes de este tipo dentro de una misma
pantalla.
28
Departamento de Aprendizaje Visual
El Canvas y el Botón Borrar
Los dos últimos componentes son el Canvas y el Botón Borrar.
1. Coloquemos un componente Canvas dentro de la ventana Viewer. El mismo se encuentra
en la columna Palette, dentro de la subcategoría “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 píxeles.
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 usáramos para para la App HelloKitty, así como también cualquier otra imagen de la que dispongan.
Se puede utilizar cualquier imagen que se desee, pero para conseguir los mejores resultados, el tamaño de la imagen debe ser cercano al tamaño del Canvas que se mostrará
dentro del dispositivo (en píxeles). Además, cuanto mayor sea el tamaño de la imagen,
mayor será el tiempo que tardará en cargarse, y podrían exceder la capacidad de memoria
que el teléfono le asigna a las aplicaciones.
3. Coloquemos el último botón 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 debería verse
dentro del entorno Designer.
29
Departamento de Aprendizaje Visual
A continuación, vamos a definir cuál será el comportamiento de la App.
Determinar el Comportamiento de la Aplicación
Hagamos clic en el botón 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 sección 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 botón a configurar es el botón 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 sección de tareas de when_BotonRojo.Click.
Los bloques de los botones deberían 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 línea.

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 también se los conoce como variables locales, y se los pueden utilizar mediante cualquiera de los bloques para variables ya vistos. También 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 más sobre el “Click”
aparte del hecho de que sucedió.
Otros controladores de eventos, tales como when.CanvasDeDibujo.Touched necesitan información sobre el evento. En App Inventor, esta información 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 ocación.

Cuando este evento táctil se produzca, hará que dentro del Canvas se dibuje un pequeño
círculo en el punto de coordenadas (x, y). Seleccionamos el bloque
call.CanvasDeDibujo.DrawCircle y colocarlo en la sección 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 círculo,
y el valor de r, que es el radio del círculo. 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. También tendremos que especificar el radio del círculo a dibujar. Cinco (píxeles) es un
buen valor para esta App. Haga clic en un área vacía de la ventana Viewer, escriba el número 5 y presione enter; esto creará un bloque de numérico 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 sólo números. Coloquemos el bloque numérico
con el valor 5 en el encastre r.
Así es como debería 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 botón Borrar, debería limpiarse el dibujo y quedar como al principio.
------------------------------------------------------------------------------------------------------------Dibujar una Línea Cuando se Arrastra el Dedo
Por último, vamos a agregar el bloque de control para que al deslizar el dedo, se dibuje una línea.
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 línea curva, lo que sucede en
realidad es que se irán dibujando cientos de pequeñas líneas rectas entre cada punto del recorrido: cada vez que se mueve el dedo, aunque sea por muy poco, se extenderá la línea graficada desde la última posición que ocupara su dedo hasta la posición 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 posición del dedo donde comenzó el arrastre (startX y startY).
32
Departamento de Aprendizaje Visual


La posición actual del dedo (currentX y currentY).
La posición del dedo inmediatamente anterior a la actual (prevX y prevY).
Vemos también 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 línea:
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 ubicación 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 líneas y curvas. Toque la pantalla para hacer puntos. Utilice el botón Limpiar
para limpiar la pantalla.
FIN
33