Tutorial mit app inventor 2

Ruta Innovación Nivel Avanzado

Prof. Edwar Paiva Macharé – Tutor Online

1

MIT APP INVENTOR 2

CREAR APLICACIONES PARA ANDROID

Escribir en Google MIT app Inventor, hacer clic en la página 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 página principal de MIT App Inventor, ubicar el cursor sobre el menú Resources

(Recursos) y dar clic sobre Get Started (comenzar):



2

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

Desplazarse hasta la mitad de página que se muestra. Tenemos 3 opciones para trabajar y

probar nuestras aplicaciones, en este caso trabajaremos con la segunda opción.

Dar clic en Instructions (instrucciones):



3

En la página 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 diálogo Guardar como, determinar donde se guardará el instalador y

luego clicar en el botón Guardar.



4

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 instalación, hacer clic en el botón Next:



5

A continuación aceptamos el acuerdo de licencia haciendo clic en el botón I Agree:

En la siguiente ventana, dejamos por defecto el destino de instalación, hacer clic en el botón

Next:



6

Finalmente hacer clic en el botón Install:

Inicia el proceso de instalación:



7

Listo, ya está instalado el emulador de MIT App Inventor. Hacer clic en el botón Finish.



8

En la página de MIT App Inventor, hacer clic en el botón Create:

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

En la siguiente ventana, hacer clic en el botón Permitir:



9

Ahora nos pide responder a una encuesta, hacen clic en Take Survey Later (tomar la encuesta

más tarde) o en su defecto Never Take Survey (nunca tomar encuesta):

Luego se muestra un mensaje de bienvenida, dar clic en el botón Continue:



10

Luego se mostrará otro mensaje de bienvenida, simplemente hacer clic en cualquier área de la

ventana para que desaparezca el cuadro de bienvenida.



11

Ahora sí podemos empezar a crear nuestra aplicación. Pero antes de ello, observa que la

página está en idioma inglés, cambiamos a español dando clic en

Vuelve a mostrase el mensaje para contestar una encuesta, damos clic en Abrirlo más tarde o

en No rellenar el formulario.

También vuelve aparecer el mensaje de Bienvenida, dar clic en Continuar.

CREANDO APLICACIÓN: ANIMALSOUND

Vamos a crear una sencilla app, que consiste en pulsar sobre la imagen de un determinado

animal y automáticamente escucharemos el sonido de este animal.

Para este ejemplo utilizaremos 9 imágenes con sus respectivos sonidos de los siguientes

animales: caballo, cerdo, gallo, gato, león, oveja, pato, perro y vaca.

Se recomienda que las imágenes tengan un ancho de 85 píxeles. Pueden disminuir el tamaño

de una imagen utilizando Paint.

¡Empezamos!, dar clic en Comenzar un proyecto nuevo…

A continuación ingresar el nombre del

proyecto (en mi caso lo denominé:

AnimalSound), luego clic en el botón

Aceptar.



12

Se abrirá la ventana de Diseñador de MIT App Inventor; aquí iniciamos la elaboración de

nuestra app.

Esta ventana contiene 5 partes:

Paleta: contiene todos los componentes que podemos insertar en nuestra aplicación.

Visor: simula la apariencia visual que tendrá la aplicación en el dispositivo móvil.

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

aparecerán todos los detalles que se puedan cambiar de ese componente.

Medios: aquí podremos subir las fotos, audios, etc. que utilizaremos en la aplicación.

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

manera:

Definimos las propiedades para este componente, según la imagen:



13

Es conveniente renombrar cada componente de tal manera que podamos reconocer cuál es su

función dentro de la aplicación.

En este caso renombramos el componente Etiqueta1 de la siguiente manera:

Clic en el botón Cambiar nombre.

En el cuadro de diálogo 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 botón OK.



14

Ahora clicar en Disposición e insertamos el componente Disposición Tabular (hacer clic y

arrastrar hasta el visor). Luego definimos las propiedades para este componente: 3 columnas y

3 registros (insertaremos 9 imágenes de animales):

A continuación clicar en Interfaz de usuario, insertamos 9 botones dentro del componente

disposición tabular1, quedando de la siguiente manera:



15

Renombramos los botones, por ejemplo para el Botón1 realizamos lo siguiente:

Clic en el Botón1.

Clic en Cambiar nombre.

En el cuadro de diálogo que se muestra escribimos el nuevo nombre: btnCaballo (se

recomienda utilizar al inicio btn para saber que este componente es un botón).

Finalmente clic en el botón Aceptar.



16

Realizamos el mismo proceso para los demás botones; tendremos

en cuenta los siguientes nombres:

- Botón2: btnCerdo

- Botón3: btnGallo

- Botón4: btnGato

- Botón5: btnLeon (sin tilde)

- Botón6: btnOveja

- Botón7: btnPato

- Botón8: btnPerro

- Botón9: btnVaca

Ahora vamos a insertar la imagen respectiva en el botón btnCaballo, para ello damos clic en

este botón. En Propiedades, ubicamos Imagen y clicar en Ninguno, luego en Subir archivo,

en el cuadro de diálogo que se muestra dar clic en Seleccionar archivo:

Elegir la imagen respectiva y clicar en Abrir:



17

Luego clic en Aceptar:

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



18

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:



19

Seleccionar el audio del caballo y clicar en Abrir:

Finalmente clicar en Aceptar:

Seguir el mismo proceso para subir los demás audios.



20

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 demás animales, quedando de la siguiente

manera:



21

Para no tener inconvenientes al programar nuestra aplicación, se recomienda también 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



22

PROGRAMANDO LA APLICACIÓN

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 botón Caballo de ejecutará lo que esté

dentro de este bloque, que debe ser el sonido del caballo:



23

Ahora ya está insertado este primer bloque:

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



24

Queda de la siguiente manera:

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

btnCaballo, quedando así:



25

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

siguiente manera:



26

EJECUTANDO LA APLICACIÓN

Para probar el funcionamiento de la aplicación debemos ejecutar aiStarter

(programa auxiliar que permite que el navegador se comunique con el emulador,

aiStarter se instaló al instalar el paquete de instalación 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:



27

Iniciará la conexión del emulador:

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

de la aplicación, dar clic en cada imagen y debe escucharse el sonido del animal,

respectivamente.



28

Si hubiere algún error, regresar a Bloques y realizar las correcciones correspondientes.

NOTA: Esta aplicación es bastante básica y se hizo para principiantes que desean sumergirse

en este fascinante mundo de la creación de apps. Espero sea de su entendimiento y agrado,

hay muchísimo más que explorar y aprender, así que ¡adelante!.

¡Muchas gracias!

Tutorial mit app inventor 2

Education

Transcript of Tutorial mit app inventor 2