Taller App Inventor

1. Mi primera aplicación en App Inventor.
Para crear una aplicación con App Inventor debemos realizar tres tareas básicas:
1. Crear el aspecto visual de la aplicación utilizando el Diseñador de Componentes que nos
permitirá seleccionar los botones, cajas de texto, imágenes y otros componentes que van a
aparecer en la pantalla del teléfono cuando la aplicación se ejecute.
2. Modificar las propiedades de esos componentes y
3. Establecer el comportamiento de esos componentes utilizando para ello el Editor de Bloques.
Crear la interfaz de usuario.
Empezaremos con un ejemplo sencillo: una aplicación que, permita al usuario introducir un número
entero y a continuación muestre el cuadrado de ese número. Para generar la aplicación debemos
ingresar a la herramienta App Inventor utilizando nuestra cuenta de Google:
http://beta.appinventor.mit.edu
A continuación vamos a crear un proyecto. En la ventana hacemos clic en el botón New.
Figura 1: Crear un proyecto.
Figura 2: Escribir el nombre del proyecto.

2. Se mostrará una ventana de diálogo que nos solicitará el nombre del proyecto al que denominaremos:
DobleNumero (el nombre no lleva espacios). Después de introducir el nombre del proyecto hacemos
clic en el botón OK. Con la acción anterior se crea nuestro proyecto y entonces podemos observar el
Diseñador de Componentes:
Figura 3: Diseñador de Componentes.
En el lado izquierdo de la ventana tenemos la Paleta de Componentes que podemos utilizar en nuestras
aplicaciones. Al lado derecho de la Paleta de Componentes tenemos el Visor, una superficie que
simula una pantalla del teléfono que aparecerá cuando se ejecuten nuestras aplicaciones. Para dibujar
la interfaz de nuestras aplicaciones simplemente arrastramos el componente de la Paleta de
Componentes y lo colocamos en el Visor. Para empezar a crear nuestra aplicación, necesitaremos dos
componentes: una caja de texto y un botón. Estos componentes los ubicamos en la sección Basic de la
Paleta de Componentes y lo que tenemos que hacer es arrastrarlos y colocarlos en el Visor.
Figura 4: La Paleta de Componentes y el Visor.

3. Cada componente que se encuentra en el Visor aparecerá en la sección de Componentes a la derecha del
Visor. Por defecto, a cada componente se le asigna un nombre que incluye su tipo y un número (por
ejemplo TextBox1, Button1).
Figura 5: El Visor y sus Componentes.
Propiedades de los componentes.
Podemos seleccionar un componente en la sección Components y cambiar sus propiedades en la
sección Properties.
Figura 6: Componentes y sus propiedades.
Para la caja de texto vamos a dejar vacía la propiedad Text y escribimos en la propiedad Hint el texto:
“Introduce un Número”.

4. Figura 7: Propiedad Hint de la caja de texto.
Realizamos el mismo procedimiento para el botón (Button1), lo seleccionamos de Componentes y en
Propiedades modificamos la propiedad Text con el texto: “Calcular”.
Figura 8: Propiedad Text de un Botón.
Programar el comportamiento de la aplicación.
Para programar el comportamiento de la aplicación hacemos clic en el botón que lleva por título:
“Open the Blocks Editor”.
Figura 9: Abrir el Editor de bloques.
A continuación se nos solicita descargar en nuestra computadora un archivo de Java con extensión de
jnlp. Hacemos clic en el botón Aceptar.

5. Figura 10: Descargar archivo para iniciar el Editor de Bloques.
Una vez descargado el archivo lo ejecutamos para iniciar el Editor de Bloques. Nos mostrará una
advertencia de seguridad. Hacemos clic en el botón Ejecutar.
Figura 11: Antes de iniciar el Editor de Bloques.
El Editor de Bloques se compone de dos pestañas: Built-In y My Blocks. En Built-In tenemos los
bloques de programación disponibles. Utilizaremos la sección My Blocks para agregar funcionalidad
de nuestra aplicación (observa que los elementos de las pestañas se identifican por colores).

6. Figura 12: El Editor de Bloques con sus pestañas Built-In y My Blocks.
Vamos a seleccionar de la pestaña de My Blocks el componente Button1.
Figura 13: Eventos disponibles para el Button1.

7. A continuación vamos a seleccionar el evento Click y lo arrastramos en el área de bloques del
programa.
Figura 14: Evento Click del botón.
Este bloque significa lo siguiente: “cuando el usuario hace un clic sobre el botón, hacer ...”. En
nuestro caso, cuando el usuario haga un clic sobre el botón, la aplicación debe recuperar el contenido
de la caja de texto, realizar calcular el doble del número y a continuación asignar el resultado de nuevo
a la caja de texto. Primero vamos a realizar el cálculo aritmético, seleccionamos de la pestaña
Built-In la opción Math y a continuación seleccionamos el bloque para multiplicar.
Figura 15: Editor de Bloques, opción Math.

8. Lo colocamos en el área de trabajo:
Figura 16: Componentes
para multiplicar.
De la pestaña My Blocks seleccionamos la caja de texto con el componente TextBox1.Text de el bloque
TextBox1:
Figura 17: El componente TextBox1.
Luego lo ensamblamos (colocamos) en el componente para multiplicar:
Figura 18: Componentes.
Para poder multiplicar el contenido de la caja de texto con el valor 2 seleccionamos el bloque number y
modificamos el texto por omisión (123) por el valor de 2:

9. Figura 19: Sección Math, componente para un número.
Lo ensamblamos al componente de la multiplicación:
Figura 20: La multiplicación de TextBox1 y number.
Para mostrar el resultado del cálculo agregamos el bloque TextBox1.Text de TextBox1:
Figura 21: TextBox1.Text de TextBox1.
A TextoBox1.Text le asociamos el resultado del calculo aritmético:

10. Figura 22: Ensamblado de componentes.
Finalmente asociamos las operaciones definidas anteriormente con el evento Click del botón:
Figura 23: Asociar las operaciones con el evento Click de Button1.
Ejecutar la aplicación.
Para ejecutar nuestra aplicación en App Inventor tenemos que crear un emulador del teléfono. Para ello
tenemos que hacer un clic en el botón que dice New emulator.
Figura 24: New Emulator.

11. Antes de iniciar la ejecución del emulador App Inventor nos mostrará la siguiente ventana
indicándonos que el proceso de carga puede durar de 2 a 3 minutos:
Figura 25: Emulador.
Una vez que el emulador está listo obtenemos una ventana simulando un teléfono. Lo que sigue es
conectar nuestra aplicación con el emulador. Para ello seleccionamos el botón Connect to Device:
emulator -5554.
Figura 26: Conectar al emulador.
En el lado derecho nos aparecerá un indicador en amarillo. Una vez que este en color verde tenemos
nuestra aplicación en el emulador y podemos interactuar con ella.

12. Figura 27: La aplicación DobleNumero.
Si obtienes una ventana similar a la mostrada anteriormente: ¡Felicidades!, acabas de crear tu primera
aplicación en App Inventor.

13. Superficie de un triángulo.
Construya un programa tal, que dadas la base y la altura de un triángulo, calcule e imprima su
superficie.