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

Más contenido relacionado

La actualidad más candente (17)

Similar a Tutorial mit app inventor 2 (20)

Último (20)

Tutorial mit app inventor 2