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
