1

Ruta Innovacin Nivel Avanzado

MIT APP INVENTOR 2

CREAR APLICACIONES PARA ANDROID
Escribir en Google MIT app Inventor, hacer clic en la pgina enmarcada: (Se recomienda
trabajar con el navegador Google Chrome o Mozilla Firefox)

DESCARGAR EL EMULADOR DE MIT APP INVENTOR

Este emulador nos permitir probar las aplicaciones elaboradas en MIT App Inventor, ya que
funciona de manera similar a un smartphone con Android.

En la pgina principal de MIT App Inventor, ubicar el cursor sobre el men Resources
(Recursos) y dar clic sobre Get Started (comenzar):

Prof. Edwar Paiva Machar Tutor Online

Ruta Innovacin Nivel Avanzado

En la ventana que se muestra, dar clic en Setup Instructions (instrucciones de instalacin):

Desplazarse hasta la mitad de pgina que se muestra. Tenemos 3 opciones para trabajar y
probar nuestras aplicaciones, en este caso trabajaremos con la segunda opcin.
Dar clic en Instructions (instrucciones):

Prof. Edwar Paiva Machar Tutor Online

Ruta Innovacin Nivel Avanzado

En la pgina que se muestra, dar clic en Instructions for Windows (instrucciones para
Windows):

Finalmente clicar sobre Download installer (Descargar el instalador):

Saldr la el cuadro de dilogo Guardar como, determinar donde se guardar el instalador y

luego clicar en el botn Guardar.

Prof. Edwar Paiva Machar Tutor Online

Ruta Innovacin Nivel Avanzado

INSTALAR EL EMULADOR DE MIT APP INVENTOR

Ubicar el instalador de MIT App Inventor que ha descargado. Hacer doble clic en dicho
instalador:

Se muestra la ventana de instalacin, hacer clic en el botn Next:

Prof. Edwar Paiva Machar Tutor Online

Ruta Innovacin Nivel Avanzado

A continuacin aceptamos el acuerdo de licencia haciendo clic en el botn I Agree:

En la siguiente ventana, dejamos por defecto el destino de instalacin, hacer clic en el botn
Next:

Prof. Edwar Paiva Machar Tutor Online

Ruta Innovacin Nivel Avanzado

Finalmente hacer clic en el botn Install:

Inicia el proceso de instalacin:

Prof. Edwar Paiva Machar Tutor Online

Ruta Innovacin Nivel Avanzado

Listo, ya est instalado el emulador de MIT App Inventor. Hacer clic en el botn Finish.

Prof. Edwar Paiva Machar Tutor Online

Ruta Innovacin Nivel Avanzado

En la pgina de MIT App Inventor, hacer clic en el botn Create:

Se abrir una nueva pgina donde se pide acceder a una cuenta de Google (Gmail):

En la siguiente ventana, hacer clic en el botn Permitir:

Prof. Edwar Paiva Machar Tutor Online

Ruta Innovacin Nivel Avanzado

Ahora nos pide responder a una encuesta, hacen clic en Take Survey Later (tomar la encuesta
ms tarde) o en su defecto Never Take Survey (nunca tomar encuesta):

Luego se muestra un mensaje de bienvenida, dar clic en el botn Continue:

Prof. Edwar Paiva Machar Tutor Online

10

Ruta Innovacin Nivel Avanzado

Luego se mostrar otro mensaje de bienvenida, simplemente hacer clic en cualquier rea de la
ventana para que desaparezca el cuadro de bienvenida.

Prof. Edwar Paiva Machar Tutor Online

11

Ruta Innovacin Nivel Avanzado

Ahora s podemos empezar a crear nuestra aplicacin. Pero antes de ello, observa que la
pgina est en idioma ingls, cambiamos a espaol dando clic en

Vuelve a mostrase el mensaje para contestar una encuesta, damos clic en Abrirlo ms tarde o
en No rellenar el formulario.
Tambin vuelve aparecer el mensaje de Bienvenida, dar clic en Continuar.

CREANDO APLICACIN: ANIMALSOUND

Vamos a crear una sencilla app, que consiste en pulsar sobre la imagen de un determinado
animal y automticamente escucharemos el sonido de este animal.
Para este ejemplo utilizaremos 9 imgenes con sus respectivos sonidos de los siguientes
animales: caballo, cerdo, gallo, gato, len, oveja, pato, perro y vaca.
Se recomienda que las imgenes tengan un ancho de 85 pxeles. Pueden disminuir el tamao
de una imagen utilizando Paint.
Empezamos!, dar clic en Comenzar un proyecto nuevo

A continuacin ingresar el nombre del

proyecto

(en

mi

caso

lo

denomin:

AnimalSound), luego clic en el botn

Aceptar.

Prof. Edwar Paiva Machar Tutor Online

12

Ruta Innovacin Nivel Avanzado

Se abrir la ventana de Diseador de MIT App Inventor; aqu iniciamos la elaboracin de
nuestra app.
Esta ventana contiene 5 partes:
Paleta: contiene todos los componentes que podemos insertar en nuestra aplicacin.
Visor: simula la apariencia visual que tendr la aplicacin en el dispositivo mvil.
Componentes: muestra la lista de los componentes que se han colocado en el
proyecto.
Propiedades: cada vez que en el visor se seleccione un componente, en propiedades
aparecern todos los detalles que se puedan cambiar de ese componente.
Medios: aqu podremos subir las fotos, audios, etc. que utilizaremos en la aplicacin.

Hacer clic en el componente Etiqueta y lo arrastramos hasta el visor, quedando de la siguiente

manera:

Definimos las propiedades para este componente, segn la imagen:

Prof. Edwar Paiva Machar Tutor Online

13

Ruta Innovacin Nivel Avanzado

Es conveniente renombrar cada componente de tal manera que podamos reconocer cul es su
funcin dentro de la aplicacin.
En este caso renombramos el componente Etiqueta1 de la siguiente manera:
Clic en el botn Cambiar nombre.
En el cuadro de dilogo que se muestra escribimos el nuevo nombre: etiqTitulo (se
recomienda utilizar al inicio las siglas o primeras letras del componente, en este caso
utilizo etiq para saber que este componente es una etiqueta).
Finalmente clic en el botn OK.

Prof. Edwar Paiva Machar Tutor Online

14

Ruta Innovacin Nivel Avanzado

Ahora clicar en Disposicin e insertamos el componente Disposicin Tabular (hacer clic y

arrastrar hasta el visor). Luego definimos las propiedades para este componente: 3 columnas y
3 registros (insertaremos 9 imgenes de animales):

A continuacin clicar en Interfaz de usuario, insertamos 9 botones dentro del componente

disposicin tabular1, quedando de la siguiente manera:

Prof. Edwar Paiva Machar Tutor Online

15

Ruta Innovacin Nivel Avanzado

Renombramos los botones, por ejemplo para el Botn1 realizamos lo siguiente:

Clic en el Botn1.
Clic en Cambiar nombre.
En el cuadro de dilogo que se muestra escribimos el nuevo nombre: btnCaballo (se
recomienda utilizar al inicio btn para saber que este componente es un botn).
Finalmente clic en el botn Aceptar.

Prof. Edwar Paiva Machar Tutor Online

16

Ruta Innovacin Nivel Avanzado

Realizamos el mismo proceso para los dems botones; tendremos
en cuenta los siguientes nombres:
-

Botn2: btnCerdo

Botn3: btnGallo

Botn4: btnGato

Botn5: btnLeon (sin tilde)

Botn6: btnOveja

Botn7: btnPato

Botn8: btnPerro

Botn9: btnVaca

Ahora vamos a insertar la imagen respectiva en el botn btnCaballo, para ello damos clic en
este botn. En Propiedades, ubicamos Imagen y clicar en Ninguno, luego en Subir archivo,
en el cuadro de dilogo que se muestra dar clic en Seleccionar archivo:

Elegir la imagen respectiva y clicar en Abrir:

Prof. Edwar Paiva Machar Tutor Online

17

Ruta Innovacin Nivel Avanzado

Luego clic en Aceptar:

Luego en Propiedades Texto, borrar el texto y presionar la tecla Enter:

Prof. Edwar Paiva Machar Tutor Online

18

Ruta Innovacin Nivel Avanzado

Realizar el mismo proceso para todos los botones, quedando as:

Ahora vamos a subir los audios de los animales, para ello nos ubicamos en Medios, clic en
Subir archivo Seleccionar archivo:

Prof. Edwar Paiva Machar Tutor Online

19

Ruta Innovacin Nivel Avanzado

Seleccionar el audio del caballo y clicar en Abrir:

Finalmente clicar en Aceptar:

Seguir el mismo proceso para subir los dems audios.

Prof. Edwar Paiva Machar Tutor Online

20

Ruta Innovacin Nivel Avanzado

Ahora insertaremos el audio de acuerdo a la imagen del animal; en este caso insertamos el
audio del caballo:
Clic en Medios, luego clicar y arrastrar el componente Sonido hacia la imagen del caballo, en
Propiedades Origen ubicamos el audio caballo.mp3 y finalmente clicar en Aceptar:

Seguir este proceso para insertar el audio de los dems animales, quedando de la siguiente
manera:

Prof. Edwar Paiva Machar Tutor Online

21

Ruta Innovacin Nivel Avanzado

Para no tener inconvenientes al programar nuestra aplicacin, se recomienda tambin cambiar
el nombre de los sonidos (sigue el mismo proceso como se hizo para cambiar el nombre de los
botones):
-

Sonido1: sonCaballo

Sonido2: sonCerdo

Sonido3: sonGallo

Sonido4: sonGato

Sonido5: sonLeon

Sonido6: sonOveja

Sonido7: sonPato

Sonido8: sonPerro

Sonido9: sonVaca

Prof. Edwar Paiva Machar Tutor Online

22

Ruta Innovacin Nivel Avanzado

PROGRAMANDO LA APLICACIN
Clicar en Bloques (se encuentra en la parte superior derecha de la ventana)

Se muestra la siguiente ventana que contiene 2 partes:

-

Bloques, de acuerdo a cada componente insertado en la app.

Visor, donde colocaremos los bloques para programar nuestra app y darle
funcionamiento.

Ahora clicar en btnCaballo, se muestra una lista de bloques y clicar en el bloque que se indica
en la imagen, el cual indica que al hacer clic en el botn Caballo de ejecutar lo que est
dentro de este bloque, que debe ser el sonido del caballo:

Prof. Edwar Paiva Machar Tutor Online

23

Ruta Innovacin Nivel Avanzado

Ahora ya est insertado este primer bloque:

Luego clicar en sonCaballo y luego en el bloque que se indica en la imagen:

Prof. Edwar Paiva Machar Tutor Online

24

Ruta Innovacin Nivel Avanzado

Queda de la siguiente manera:

Ahora colocamos el bloque de sonCaballo (bloque morado) en el interior del bloque de

btnCaballo, quedando as:

Prof. Edwar Paiva Machar Tutor Online

25

Ruta Innovacin Nivel Avanzado

Realizamos el mismo proceso para todos los botones y sonidos, debiendo quedar de la
siguiente manera:

Prof. Edwar Paiva Machar Tutor Online

26

Ruta Innovacin Nivel Avanzado

EJECUTANDO LA APLICACIN
Para probar el funcionamiento de la aplicacin debemos ejecutar aiStarter
(programa auxiliar que permite que el navegador se comunique con el emulador,
aiStarter se instal al instalar el paquete de instalacin de App Inventor).
Ubicar aiStarter (por defecto se crea un acceso directo en el escritorio) y le
damos doble clic:

Se ejecuta la siguiente ventana:

Ahora regresamos a la ventana de MIT App Inventor y damos clic en Conectar Emulador,
tal como se muestra en la imagen:

Prof. Edwar Paiva Machar Tutor Online

27

Ruta Innovacin Nivel Avanzado

Iniciar la conexin del emulador:

Finalmente se muestra el emulador (similar a un celular). Para probar el buen funcionamiento

de la aplicacin, dar clic en cada imagen y debe escucharse el sonido del animal,
respectivamente.

Prof. Edwar Paiva Machar Tutor Online

28

Ruta Innovacin Nivel Avanzado

Si hubiere algn error, regresar a Bloques y realizar las correcciones correspondientes.

NOTA: Esta aplicacin es bastante bsica y se hizo para principiantes que desean sumergirse
en este fascinante mundo de la creacin de apps. Espero sea de su entendimiento y agrado,
hay muchsimo ms que explorar y aprender, as que adelante!.

Muchas gracias!

Prof. Edwar Paiva Machar Tutor Online