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


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 (instruccione ( instrucciones): s):


3


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

Finalmente clicar sobre Download installer (Descargar (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 aceptamos el acuerdo acuerdo de licencia licencia haciendo haciendo clic en el botón 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 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, encuesta, hacen clic en Take Survey Later (tomar (tomar la encuesta más tarde) o en su defecto Never Take Survey (nunca tomar t omar 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

Ruta Innovación Nivel Avanzado Ahora sí podemos empezar empezar a crear nuestra aplicación. 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), AnimalSound), luego clic en el botón

Aceptar .


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.



aplicación. 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


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 muestra escribimos escribimos el nuevo nombre: 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 propiedades para este componente: 3 columnas y 3 registros (insertaremos 9 imágenes de animales):

A continuación 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 cuadro de diálogo que se muestra escribimos escribimos el nuevo 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

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 :


17


Luego clic en Aceptar:

Luego en Propiedades  Texto, borrar el texto y presionar 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

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:


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


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 insertado este primer bloque: bloque:

Luego clicar en sonCaballo y luego en el bloque que se indica en la imagen: Prof. Edwar Paiva Macharé – Tutor Online

24


Queda de la siguiente manera:

Ahora colocamos colocamos el bloque de 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 (por defecto se crea un acceso directo en el escritorio) y le damos doble clic:

Se ejecuta la siguiente ventana:

Ahora regresamos regresamos a la ventana de de MIT App Inventor 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

Recommend Documents