Tutorial mit app inventor 2

1

Ruta Innovación Nivel Avanzado

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):

Prof. Edwar Paiva Macharé – Tutor Online

2

Ruta Innovación Nivel Avanzado

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):

Prof. Edwar Paiva Macharé – Tutor Online

3

Ruta Innovación Nivel Avanzado

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.

Prof. Edwar Paiva Macharé – Tutor Online

4

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

Prof. Edwar Paiva Macharé – Tutor Online

5

Ruta Innovación Nivel Avanzado

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:

Prof. Edwar Paiva Macharé – Tutor Online

6

Ruta Innovación Nivel Avanzado

Finalmente hacer clic en el botón Install:

Inicia el proceso de instalación:

Prof. Edwar Paiva Macharé – Tutor Online

7

Ruta Innovación Nivel Avanzado

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

Prof. Edwar Paiva Macharé – Tutor Online

8

Ruta Innovación Nivel Avanzado

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:

Prof. Edwar Paiva Macharé – Tutor Online

9

Ruta Innovación Nivel Avanzado

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:

Prof. Edwar Paiva Macharé – Tutor Online

10

Ruta Innovación 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 Innovación Nivel Avanzado 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.

Prof. Edwar Paiva Macharé – Tutor Online

12

Ruta Innovación Nivel Avanzado 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: Prof. Edwar Paiva Macharé – Tutor Online

13

Ruta Innovación Nivel Avanzado

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.

Prof. Edwar Paiva Macharé – Tutor Online

14

Ruta Innovación Nivel Avanzado

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:

Prof. Edwar Paiva Macharé – Tutor Online

15

Ruta Innovación Nivel Avanzado

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.

Prof. Edwar Paiva Macharé – Tutor Online

16

Ruta Innovación Nivel Avanzado 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:

Prof. Edwar Paiva Macharé – Tutor Online

17

Ruta Innovación 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 Innovación 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 Innovación Nivel Avanzado

Seleccionar el audio del caballo y clicar en Abrir:

Finalmente clicar en Aceptar:

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

Prof. Edwar Paiva Macharé – Tutor Online

20

Ruta Innovación 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 demás animales, quedando de la siguiente manera:

Prof. Edwar Paiva Macharé – Tutor Online

21

Ruta Innovación Nivel Avanzado 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

Prof. Edwar Paiva Macharé – Tutor Online

22

Ruta Innovación Nivel Avanzado

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:

Prof. Edwar Paiva Macharé – Tutor Online

23

Ruta Innovación 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 Innovación 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 Innovación 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 Innovación Nivel Avanzado

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:

Prof. Edwar Paiva Macharé – Tutor Online

27

Ruta Innovación Nivel Avanzado

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.

Prof. Edwar Paiva Macharé – Tutor Online

28

Ruta Innovación Nivel Avanzado

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!

Prof. Edwar Paiva Macharé – Tutor Online