Francisco García Muñoz 1

Hola Gatito para App Inventor 2

En este capítulo conocerás los elementos clave de App Inventor; la ventana de

diseño y la ventana de edición de bloques, y verás los pasos básicos
necesarios para conseguir crear tu primera app.

En nuestra primera app aparecerá la imagen de un gatito en pantalla que

maullará cuando la toques y vibrará cuando agites tu dispositivo.

Aprenderemos
• Crearemos app’s seleccionando componentes desde la ventana de
diseño y luego los programaremos para que hagan aquello que
queramos en la ventana de edición de bloques.
• Veremos que algunos componentes son visibles en la pantalla de la app
pero otros, en cambio, no lo son.
• Añadiremos contenido multimedia a la app (la imagen del gatito y un
sonido).
• Probaremos la app a la vez que la construimos (live testing). Esto te
permitirá ver cómo funciona la app en tu dispositivo a medida que vamos
trabajando en ella.
• Para terminar, empaquetaremos la app y la instalaremos en nuestro
dispositivo.

Materiales
Una selección de imágenes y sonidos están disponibles en App Inventor Media
Library.
Francisco García Muñoz 2

Entorno de trabajo de App Inventor 2.

Para empezar a programar con App Inventor, abre un navegador y conéctate a

http://ai2.appinventor.mit.edu, introduce los datos de acceso a tu cuenta de
usuario de Gmail si el navegador te los pregunta y pulsa el botón Continue.

El entorno de trabajo está formado por tres partes:

• La ventana de diseño. La usaremos para insertar componentes en la

app y definir sus propiedades.
• La ventana de edición de bloques. Nos permitirá especificar qué
queremos que hagan los componentes de nuestra app y cuándo.
• Un dispositivo Android o un emulador Android, gracias al cuál podremos
probar nuestra app a medida que la vamos creando.
Francisco García Muñoz 3

La primera vez que te conectes a http://ai2.appinventor.mit.edu verás tu Página

de Proyectos, es decir, una relación de las apps que has creado con App
Inventor.
Obviamente, la primera vez estará vacía.

Para empezar a crear tu primera app, haz clic en Project y después en New
Project. Ahora, introduce el nombre de tu proyecto, por ejemplo: HolaGatito, y
pulsa Ok.

¡Atención! El nombre de los proyectos no puede contener espacios en blanco.

Si quieres, en su lugar utiliza el símbolo de guión.

La primera ventana que se abrirá es la ventana de diseño. El editor de bloques

está disponible si haces clic sobre el botón Blocks que aparece en la esquina
superior derecha de la ventana.

App Inventor es una herramienta de could computing (o computación en la

nube), es decir, tu app se almacenará en el servidor de App Inventor y
cualquier modificación o ampliación sobre ella tendrás que realizarla a través
de la página http://ai2.appinventor.mit.edu. Además, necesitarás una conexión
a Internet cada vez que quieras ponerte a trabajar en tu app.
Francisco García Muñoz 4

Diseño de Componentes

Empezaremos a trabajar en la ventana de diseño. Podemos usar los

componentes predefinidos para incluirlos en nuestra app y dotarla de
contenido. Algunos componentes son muy sencillos, como el componente
Label, que muestra un texto en pantalla. Otros son mucho más complicados,
como el componente Canvas que puede contener imágenes y animaciones.

Nada más empezar con un proyecto nuevo, la ventana de diseño será como la
siguiente:

Ventana de diseño

En la ventana se distinguen las siguientes partes:

En la parte central encontramos un espacio llamado Viewer (visor). Este es el

lugar donde insertaremos los componentes que necesitamos para nuestra app,
y muestra una primera vista de cómo quedará la app al final en un dispositivo,
pero esta vista no es más que una aproximación. Para ver realmente como
quedará la app tendrás que utilizar tu dispositivo o bien un emulador tal y como
describimos en el tema anterior: Requisitos Previos.
Francisco García Muñoz 5

En el lado izquierdo de la ventana está la Palette (paleta), que es una lista de

los componentes que podemos usar. La Palette está dividida en secciones; en
este momento, sólo estarán visibles los componentes de la categoría User
Interface, pero puedes ver los demás haciendo clic en el nombre de cada una
de las categorías.
A la derecha de Viewer está Components (componentes), donde se muestra la
lista de componentes que estamos usando en nuestra app. Inicialmente, el
único componente disponible es: Screen1 que simboliza la pantalla del
dispositivo Android.

Debajo de la lista de componentes tenemos un espacio más llamado Media

que mostrará los archivos de imagen y sonido que vamos a utilizar en nuestra
app y que previamente tendremos que haber subido al servidor de App Inventor
con Upload new.

A la derecha del todo se encuentra la sección de Properties (propiedades), que

muestra las propiedades de los componentes. Así, después de seleccionar un
componente en la sección Components podremos ver y modificar sus
propiedades en el panel de Properties. Ahora mismo, podrás ver las
propiedades del único componente de nuestra app, el componente Screen1.
Algunas de sus propiedades son el color de fondo (backgroundcolor), la imagen
de fondo (backgroundimage) y el título de la pantalla (title).

Para nuestra primera app, necesitaremos dos componentes: el componente

Label permitirá mostrar un texto en pantalla (“Acaricia al gatito”) y un
componente Button con una imagen de un gatito en él. También necesitaremos
un componente Sound, que a diferencia de los anteriores no será visible en la
pantalla pero que nos permitirá reproducir el maullido del gatito cuando
pulsemos el botón. Por último, incluiremos también un componente
Accelerometer para detectar cuándo el usuario agita el dispositivo.
Vamos a verlo paso a paso.
Francisco García Muñoz 6

Crear una etiqueta

El primer componente que vamos añadir es una Label (etiqueta) para mostrar
un texto.

1. En la paleta, haz clic en la categoría User Interface (interfaz de usuario)

para ver los componentes disponibles. Haz clic en Label (etiqueta) y arrástralo
hasta el área de vista. Allí veras un rectángulo con el texto: “Text for label1”.
2. En la ventana de propiedades, busca una propiedad llamada Text y
cambia el texto que aparece allí por “Acaricia al gatito” y pulsa intro. Verás
como el texto se modifica también en la sección de vista.
3. Cambia el color de fondo de la etiqueta haciendo clic en el cuadro
BackgroundColor que actualmente será None. Selecciona el color blue.
Cambia también el color del texto de la etiqueta usando la propiedad
TextColor; por ejemplo usa el color Yellow. Para terminar, cambia el tamaño de
la fuente a 20 puntos desde la propiedad FontSize.

Añadir un botón

El siguiente paso es añadir un botón (Button) a nuestra app y haremos que

este componente muestre la imagen del gatito.

Para empezar, selecciona el componente Button desde la paleta y arrástralo

hasta la vista, colocándolo justo debajo de la etiqueta anterior. Verás que
aparece un botón con un aspecto clásico.
Francisco García Muñoz 7

Ahora que tenemos el botón haremos que aparezca en él la imagen del gatito:

1. Primero, debes descargar y guardar en tu ordenador la imagen que

vamos a usar. Dicha imagen está disponible en la sección de Recursos de este
tema. Si quieres, aprovecha ahora y descarga también el sonido que
reproduciremos cuando alguien toque al gatito.
2. Asegúrate que tienes seleccionado el botón en la lista de componentes;
así, en la ventana de propiedades podrás ver las que son sus propiedades.
3. En la ventana de propiedades, haz clic en Image (que actualmente tiene
el valor None) y pulsa el botón Upload file (cargar fichero). Selecciona la
imagen del gatito que has descargado previamente a tu ordenador y haz clic
en OK.
4. Después de cargar la imagen, gato.png aparecerá en la lista como una
opción para la imagen del botón. Selecciónala y pulsa OK. La imagen del gatito
se mostrará inmediatamente en pantalla. Observa que la imagen también
estará disponible en la sección Media.
5. Como comprobarás, sobre la imagen del gatito todavía aparece el texto
que habíamos introducido antes. Busca la propiedad Text del botón y borra el
texto que hay allí.

Añadir el maullido del gato

Cuando el usuario toque el botón, queremos que el se escuche el maullido del

gatito. Para ello, necesitamos el sonido (disponible en la sección de Descargas
del tema) y un componente que se encargue de su reproducción.

1. Si todavía no lo has hecho, descarga el sonido del gatito y después

súbelo a tu app usando el botón Upload file disponible en la sección Media.
2. En la ventana de diseño (Designer) haz clic en la categoría Media de la
paleta (Palette). Haz clic y arrastra el componente Sound hasta tu app.
Independiente de donde sueltes el clic, el componente de sonido se situará en
la parte inferior de la sección vista; en un apartado llamado Non-visible
componentes (componentes no visibles).
3. Haz clic sobre Sound1 en la sección de componentes no visibles para
poder visualizar sus propiedades. Usa la propiedad Source (origen) para
seleccionar el archivo .mp3 que has subido en el paso 1.

Pruebas en vivo

Gracias a la prueba en vivo puedes comprobar cómo funciona tu app en tu

dispositivo Android mientras trabajas en ella. En el tema 0 ya repasamos todos
los elementos de configuración necesarios para poder usar este tipo de
prueba.
Francisco García Muñoz 8

Si tienes tu dispositivo Android conectado y configurado y se encuentra en la

misma Wi-Fi que el ordenador, en la ventana de App Inventor, selecciona
Connect y después haz clic sobre AI Companion.

En tu dispositivo, lanza la aplicación MIT AI2 Companion y selecciona Scan

QR Code. Después, escanea el código QR que aparece en la pantalla de tu
ordenador.

Si todo funciona como es debido, podrás ver la app en tu dispositivo y, a

medida que hagas cambios en la app los verás también en el dispositivo.

Si puedes ver la app en tu dispositivo, toca la imagen del gatito.

Evidentemente, todavía no se reproducirá el sonido; aún nos queda un poquito
de trabajo… Debemos indicar a la app cuándo debe reproducir el sonido del
maullido pero eso tendremos que hacerlo desde la ventana de edición de
bloques (Blocks).
Francisco García Muñoz 9

Añadir comportamientos a los componentes

Ha llegado el momento de conocer el lenguaje de programación que incluye

App Inventor; lo usaremos para decirle a nuestra app cuándo debe reproducir
el sonido del gatito.
Para empezar, haz clic en el botón Blocks para cambiar a la ventana de
edición de bloques.

En el panel izquierdo podrás ver una lista de los bloques disponibles en el

lenguaje de programación de App Inventor, aparecen todos bajo la categoría
Built-in. Justo debajo, verás tambiénScreen1 y dentro de ella, la lista de los
componentes que previamente habíamos incluido en nuestra app desde la
vista de diseño.

Por hacer una analogía, podemos decir que si los componentes son los
ingredientes de una receta de cocina entonces los bloques son las
instrucciones de la receta que nos permitirá cocinarlos.

También puedes comprobar que si haces clic en uno de los componentes (en
la imagen anterior se ha hecho sobre Button1) entonces se verá la lista de
eventos, métodos y propiedades asociados a dicho componente.

Para programar qué queremos que suceda cuando se toca el botón, haz clic
sobre Button1 y después selecciona el evento when Button1.Click y arrástralo
al espacio en blanco. Todos los componentes que incluyen la palabra when
(cuando) se llaman programadores de eventos, es decir, especifican cómo se
comportará el componente en cuestión cuando sucede algo (en nuestro caso:
cuando se haga clic sobre el botón).
Francisco García Muñoz 10

Haz clic en Sound1 en el panel izquierdo para seleccionar el componente de

sonido. Después, selecciona el bloque Sound1.Play y arrástralo hasta la
ventana de bloques, justo dentro del bloque when Buttton1.Click. Ahora podrás
comprobar que el nuevo bloque ha encajado dentro del primero tal y como se
muestra en la imagen siguiente. Recuerda también que, previamente ya
habíamos asignado el sonido del maullido a este componente.

Ahora cuando toquemos el botón se escuchara el sonido del gatito

Prueba tu app

Comprueba que todo esté funcionando como es debido. Es importante probar

tu aplicación cada vez que añades algo nuevo. Toca la imagen del gatito en tu
dispositivo (o haz clic si estás usando el emulador). Deberás escuchar el
maullido.

Añadir un ronroneo

Vamos a hacer que el gatito maúlle y también que ronronee cuando tocamos el
botón. Simularemos en ronroneo haciendo vibrar el dispositivo. Aunque
parezca muy difícil de hacer en realidad es muy sencillo; el componente Sound
incluye la posibilidad de hacer vibrar el dispositivo. De hecho, en la vista de
diseño no tendremos que hacer nada, tan sólo tendremos que añadir un
Francisco García Muñoz 11

bloque más en la vista de bloques:

1. Desde la ventana de bloques, haz clic en el componente Sound1.

2. Selecciona el bloque call Sound1.Vibrate y arrástralo hasta situarlo justo
debajo del bloque call Sound1.Play. El bloque se colocará en su sitio tal y
como se aprecia en la imagen siguiente:

Reproducir el sonido y vibrar simultáneamente

3. Comprueba que el bloque Vibrate incluye la opción milisegundos. Se trata

de un parámetro que necesariamente tendremos que especificar, y que en este
caso, se refiere a la cantidad de tiempo que queremos que vibre el dispositivo
(tiempo especificado en milésimas de segundo). Si, por ejemplo, queremos
que el dispositivo vibre durante medio segundo, tendremos que asignarle un
valor de 500.
4. Ahora haz clic en Math y verás que el primer elemento de la lista es un
bloque con un cero. Haz clic en dicho bloque y arrástralo hasta hacerlo encajar
con la ranura de los milisegundos del bloque anterior.
Por último, haz clic sobre el cero y escribe 500 para conseguir nuestro objetivo.
Francisco García Muñoz 12

Asignar un valor numérico(cero por defecto)

Cambiar el valor a 500

Encajar el valor 500 en la ranura

Prueba tu app
¡Pruébalo! Toca la imagen del gatito en tu dispositivo y comprueba que además
del sonido también se produce la vibración.

Agitar el dispositivo

Vamos a añadir un último elemento para que al agitar nuestro dispositivo

también se reproduzca el sonido del gatito. Para conseguirlo necesitaremos un
componente más llamado AccelerometerSensor o acelerómetro.

1. Vuelve a la vista de diseño. Despliega la categoría de sensores de la

paleta y haz clic sobre el componente AccelerometerSensor. Arrástralo hasta
cualquier lugar de la Screen1 y no te preocupes si no aparece allí. Fíjate que
se habrá situado en la parte inferior de la ventana, en el espacio disponible
para los componentes no visibles.
2. Tendremos que distinguir una nueva situación; que se agite el
dispositivo y por tanto, necesitaremos un nuevo controlador de eventos. Así
pues, cambia a la ventana de edición de bloques. Haz clic sobre el
componente Accelerometersensor1 situado en el panel izquierdo.
3. Ahora, selecciona el evento AccelerometerSensor1.Shaking y arrástralo
a la ventana de trabajo.
Francisco García Muñoz 13

4. Por último, tal y como ya hicimos para reproducir el sonido

anteriormente, vuelve a hacer lo mismo para que el sonido se reproduzca
dentro de este nuevo bloque. Observa la imagen siguiente:

Los bloques de nuestra app

Descarga la app a tu dispositivo

La prueba en vivo te permite comprobar fácilmente la app mientras trabajas en

ella. El único problema es que una vez terminado el trabajo, cuando
desconectes tu dispositivo, la app dejará de funcionar.

Para conseguir la app de forma definitiva en el dispositivo necesitaremos

instalarla. Lo primero que debemos hacer es asignar una imagen para el icono
que representará nuestra app en el dispositivo. Desde la vista de diseño,
selecciona el componente Screen1 y asígnale una imagen a la propiedad Icon.
Si quieres, puedes utilizar la misma imagen del gatito o subir otra cualquiera.

Ahora, asegúrate que tu dispositivo puede ejecutar app’s que no provengan de

la tienda oficial de Google, la Play Store. Para la mayoría de dispositivos
tendrás que ir a Ajustes / Aplicaciones y marcar la casilla Permitir app’s de
fuentes desconocidas.

De nuevo en la ventana de diseño de App Inventor, haz clic en Build y

selecciona App (provide QR code for .apk). Al cabo de unos segundos,
aparecerá el código QR; escanéalo con una app adecuada. Tu dispositivo te
pedirá que introduzcas tu contraseña de tu cuenta de Google. Después de
introducirla, comenzará la descarga de tu app y lo podrás comprobar en el área
de notificaciones de tu dispositivo. Cuando la descarga finalice, ya puedes
proceder a su instalación.

Al terminar la instalación, echa un vistazo a las app’s disponibles en tu

dispositivo y verás que tu app HolaGatito ya está disponible. Puedes tocar
sobre su icono para comenzar su ejecución tal y como harías con cualquier
otra app.
Francisco García Muñoz 14

Es importante comprender que esto significa que tu app ha sido empaquetada,

descargada e instalada en tu dispositivo. Es decir, que si realizas cambios en
ella desde App Inventor tendrás que repetir el proceso completo de descarga e
instalación para poder apreciar los cambios en la app de tu dispositivo.

Compartir la app

Una vez que has creado una app, la puedes compartir de varias formas. Para
compartir el paquete ejecutable (el archivo .apk), primero haz clic en Build y
selecciona la opción Application (save to my computer). Así podrás crear un
archivo con extensión .apk en tu ordenador. Puedes compartir tu app enviando
por correo electrónico el archivo anterior a tus familiares, amigos o alumnos.
También puedes compartir la app si subes el archivo .apk a internet, por
ejemplo a tu carpeta de DropBox o Google Drive y después crear un enlace a
dicho archivo que puedes compartir con otras personas. Pero recuerda que
para que otras personas puedan instalar tu app en sus dispositivos deben
tener activada en su dispositivo Android la opción que permite instalar app’s de
fuentes desconocidas, es decir, app’s que no provienen de la tienda oficial de
Google (Play Store).

También puedes, si lo deseas, compartir el código fuente (los bloques) de tu

app con otras personas. Para hacerlo, haz clic en My Projects, selecciona la
app que quieres compartir (en este caso HolaGatito) y después haz clic en
Project / Export Selected Project. Este proceso creará un fichero en tu
ordenador con la extensión .aia. Puedes enviar por email dicho archivo a otras
personas que también quieran aprender a usar app’s con App Inventor. Los
destinatarios podrán hacer clic en Project / Import Project desde su cuenta de
App Inventor para ver tu aplicación, editarla, ampliarla, etc.

Ampliaciones

Después de construir tu primera app, hay algunas cosas que puedes mejorar
por ti mismo, por ejemplo:

Si agitas el dispositivo, el sonido del gatito suena un poco extraño… como si

tuviera eco. Esto es debido a que el acelerómetro está ejecutando el evento
shaking varias veces por segundo y, por tanto, el sonido del gatito empieza su
reproducción varias veces en un solo segundo provocando que los distintos
sonidos se solapen. Si vas a la ventana de diseño, seleccionas el componente
de sonido y compruebas sus propiedades verás una llamada Minimuminterval,
que determina el tiempo que se debe esperar el componente sound como
mínimo antes de volver a reproducir el sonido. Si usas un valor mayor al actual
e igual o superior a la duración del maullido entonces conseguirás solucionar el
problema. Pruébalo tu mismo.
Francisco García Muñoz 15

Resumen

Algunos de los puntos más importantes que hemos tratado en este tema son:

• Podemos construir app’s seleccionando componentes en la vista diseño y

diciéndoles qué deben hacer y cuándo desde la ventana de edición de
bloques.
• Hay algunos componentes que son visibles pero otros no so son. Los
visibles aparecen en la pantalla de la app y los invisibles en un espacio
designado para ello en App Inventor.
• Para definir el comportamiento de los distintos componentes de nuestra
app usamos bloques predefinidos en el editor de bloques. Por ejemplo,
Sound1.Play reproduce el sonido correspondiente al componente Sound1.
• Algunos componente necesitan información adicional para funcionar. Por
ejemplo Vibrate necesita que le indiquemos cuántos milisegundos queremos
que vibre.
• Los números también se representan como bloques.
• App Inventor tiene algunos componentes que son sensores. El
AccelerometerSensor puede detectar cuando movemos o agitamos el
dispositivo.

Después de terminar una app, podemos empaquetarla para instalarla en

nuestro dispositivo y también para distribuirla a otras personas.
Francisco García Muñoz 16

Licencia

Hola Gatito de App Inventor 2, por Francisco García Muñoz basado en: