Tutori al App

Inventor
Nivel: Intermedio

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

Índice
Introducción ....................................................................................................................... 3
¿Qué voy a aprender? ................................................................................................... 4
Diseño de componentes .................................................................................................... 4
Paso 1: .............................................................................................................................. 4
Maquetado o Mockup ..................................................................................................... 5
Tener en cuenta que: ..................................................................................................... 6
Paso 2: .............................................................................................................................. 6
Añadir el componente Sonido ........................................................................................ 6
Editor de bloques .............................................................................................................. 7
Paso 3: .............................................................................................................................. 7
Conectar los sonidos a los botones ................................................................................ 7
Paso 4: .............................................................................................................................. 8
Procedimiento ................................................................................................................ 8
Paso 5: .............................................................................................................................. 8
Inicializar los sonidos ..................................................................................................... 8
Programa completo ......................................................................................................... 10
Compartí tu aplicación ..................................................................................................... 11
Inspirarse en otros proyectos .......................................................................................... 12
Proyecto para implementar en el aula: ......................................................................... 12
Xilófono casero con botellas y agua ............................................................................. 12
Instrucciones ............................................................................................................. 13
¡Muy importante! Este instrumento debe ser realizado con un adulto al lado en todo
momento. ........................................................................................................................ 13
Posibilidad de Adaptación en el aula: .............................................................................. 13

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

 MIT APP INVENTOR
XILOFÓN DE COLORES

Introducción
El xilófono es un instrumento musical de percusión. Cada lámina se afina según un tono
específico (nota musical) de la escala cromática. El xilofón es un maravilloso instrumento
musical. Cuenta con una historia muy rica que data del siglo IX y ha sido desarrollado
independientemente tanto en África como en Asia. Ha tenido una participación
importante casi en todos lados, desde la música tribal africana hasta las clases de
música en una escuela primaria de América, donde es utilizado para enseñar los
principios musicales básicos a niños

Mediante esta aplicación podremos tocar nuestras canciones preferidas. Nos va a

permitir reproducir 8 notas musicales diferentes pulsando botones coloreados en la
pantalla de tu dispositivo móvil.

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

¿Qué voy a aprender?

 Construir aplicaciones en App Inventor seleccionando componentes y

diciéndoles que hacer y cuando hacerlo.
 Usar el Diseñador de Componentes para seleccionar componentes. Algunos
componentes son visibles en la pantalla del dispositivo mientras que otros no lo
son.
 Agregar archivos multimedia a las aplicaciones, subiéndoles a App Inventor 2
desde tu computadora.
 A usar el Editor de Bloques para ensamblar bloques de código que definen el
comportamiento de los componentes, y que por lo tanto en conjunto definen el
comportamiento de la aplicación.
 Probar las aplicaciones directamente en los dispositivos, lo que te ayudará a ver
cómo las aplicaciones se comportan, paso a paso, a medida que las construyes.
 Aprender a pasar el argumento.
 Empaquetar las aplicaciones que construyes para instalarlas en un dispositivo.

Diseño de componentes
Paso 1:
Lo primero que debemos hacer, como en la Aplicación anterior, es dirigirnos a la pestaña
Proyectos, y crear uno nuevo desde esta ventana:

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

Maquetado o Mockup
Es un modelo a escala o tamaño real de un diseño o un
dispositivo, utilizado para la demostración, evaluación del
diseño, promoción, y para otros fines. Un mockup es
un prototipo si proporciona al menos una parte de la
funcionalidad de un sistema y permite pruebas del diseño

Sea que uses plantillas o no al iniciar tus diseños, siempre es

buena idea iniciar en papel, armar tu boceto o
maquetado, es uno de los primeros medios con que
aprendimos a comunicarnos y la naturalidad de su uso hace
que te enfoques solo en lo que quieres hacer.
Ahí puedes dibujar en la pantalla la distribución de los botones, la disposición vertical u
horizontal que elijas y las funcionalidades que esperas que tenga tu aplicación, a
continuación, un ejemplo de 3 pantallas:

Una plantilla ideal para hacer el bosquejo de las distintas pantallas. Tener preparado un
boceto de tu idea de app ayudará a facilitarte la tarea tanto como diseñador y como
desarrollador.

Acá podés encontrar un video que hace referencia a una herramienta llamada Prott que te puede
ayudar a prototipar tus Apps https://vimeo.com/140384043

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

Tener en cuenta que:

 Al realizar un mockup es muy importante que expliquemos las acciones que

vamos a realizar en cada una de las partes del diseño. Por ejemplo, indicar
con qué zonas vamos a poder interaccionar: debemos indicar qué abre un botón
ya sea un video, la funcionalidad de GPS en la app o simplemente una imagen.
También indicaremos si se hace tap, slide o swipe en determinadas pantallas.

 Al empezar a definir el proyecto de desarrollo de aplicaciones, es recomendable

empezar por determinar el menú de la app. Y a continuación centrarte en la
arquitectura de la información para organizar todo el contenido que quieres incluir,
cuál irá en el menú y cuál no.

 Es clave definir desde muy al principio del esta fase de prototipado cuáles son los
servicios que se van a necesitar en la app.

 Trabajar la usabilidad al inicio de cada proyecto también es uno de los puntos a

tener muy en cuenta.

 Definir qué colores vamos a utilizar desde un principio facilitará la tarea de

hacer un mockup en condiciones. O al menos una gama de colores para tu diseño
de apps.

Paso 2:
Vamos a crear los distintos botones para las diferentes notas de distintos colores como
un xilofón convencional, de modo tal que nos quede como la imagen a continuación.

Añadir el componente Sonido

Crear un componente Sonido (renómbralo a Nota) y cambiemos su propiedad
IntervaloMinimo a 0 milisegundos, así no tendremos que esperar entre un sonido y

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

otro. Cuando arrastremos el componente hacia el visor, observamos cómo aparece en la
parte inferior, al tratarse de un componente no visible.

Después tenemos que cargar los archivos de sonido para poder reproducir las notas1.
Debemos guardar en la computadora una copia local de todos los archivos wav (1.wav,
2.wav, etc.). Después, en el Diseñador, en el área de Medios (bajo el área de
componentes) haz clic en Subir archivo... y buscamos en la computadora el fichero
1.wav, recién descargado. Después hacemos lo mismo para el 2.wav, el 3.wav y así
sucesivamente.

Editor de bloques
Paso 3:
Conectar los sonidos a los botones
El comportamiento que tenemos que programar implica que se reproduzca un fichero de
audio cada vez que pulsemos un botón. Si pulsamos BotonDO debe sonar 1.wav, si
pulsamos BotonRE sonará 2.wav y así sucesivamente para las demás notas musicales.
Vamos a utilizar el Editor de bloques como se explica a continuación:

1. En la categoría Screen1 del menú de bloques pulsamos BotonDO y

arrastramos al editor un bloque cuando BotonDO.Clic.
2. Pulsamos Nota y arrastramos un bloque poner Nota.Origen como
dentro del bloque anterior.
3. Escribimos texto sobre el área en blanco para que aparezca un
bloque de texto. Cambiamos el valor de este bloque a 1.wav y lo
encajamos en el bloque poner Nota.Origen como.
4. Añadimos un bloque llamar Nota.Reproducir debajo de los anteriores.

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

Hacer lo mismo para el BotonRE, pero cambiando el texto del bloque Texto por 2.wav.
Debemos haber conseguido algo similar a lo que se muestra en la figura .Podríamos
repetir el mismo proceso para el resto de los botones, pero resultaría algo muy repetitivo,
¿verdad? Bien, un comportamiento que se repite en múltiples ocasiones es señal de
que se debe utilizar un procedimiento.

Un procedimiento sería equivalente a crear un bloque a partir de otros ya existentes,

con la idea de no tener que repetir una y otra vez las mismas operaciones.

En su lugar se sustituyen todas estas operaciones por la llamada al nuevo bloque

creado. En ocasiones, además de llamar al bloque, es necesario pasar alguna
información extra, y que se conoce con el nombre de “Argumento”.

Paso 4:
Procedimiento
Vamos a crear entonces un procedimiento que reproduzca una nota, para lo que
deberá recibir un número como argumento de entrada. Dentro del procedimiento
incluiremos las operaciones de seleccionar el fichero fuente de sonido (obtenido a partir
del argumento de entrada), y la reproducción del sonido propiamente dicha:

Paso 5:
Inicializar los sonidos

Si has tratado de ejecutar tu Aplicación, puede que te haya costado oír los sonidos porque hayan
tardado mucho en cargar, o que te haya aparecido algún mensaje de error. Esto se debe a
que Android necesita cargar los sonidos en memoria en tiempo de ejecución y eso tarda un
tiempo. Esto se produce la primera vez que se le asigna un Origen concreto a la Nota, cosa
que no sucede hasta que se pulsa cada botón.

Una forma sencilla de resolverlo es utilizar el bloque de inicialización de la pantalla,

que el primero en ser ejecutado al iniciarse la aplicación. Podemos incluir en este
bloque una primera asignación para todos los posibles orígenes, tal y como se muestra
en la figura a continuación. Probemos para hacerlo y veremos como ahora funciona
mejor. El resto del teclado ya que tenemos 2 notas funcionando, debería ser sencillo

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

completar el teclado con las otras 6 notas que faltan. Creémosla como se vio
anteriormente dándole los siguientes valores a las propiedades Texto y ColorDeFondo
de cada botón de la siguiente lista:

BotonMI: Rosa

BotonFA: Naranja

BotonSOL: Amarillo

BotonLA: Verde

BotonSI: Turquesa

BotonDO: Azul

Quizá también nos convenga cambiar la propiedad ColorDeTexto del ButtonDO8 a

Blanco para que se vea mejor.
Comprobemos que también le hemos cambiado el nombre a la App (propiedad Title de
Screen1) y ahora se llama “Xilófono”.
Ahora en el editor de notas debemos completar los bloques Clic de cada botón con
llamadas a reproducirNota. No nos olvidemos de inicializar todos los ficheros de audio.

La figura muestra la situación actual con el procedimiento ReproducirUnaNota

minimizado. Con esto hemos completado el tutorial para la creación de tu propio xilófono
para dispositivos móviles. Ahora sólo nos queda compartir una canción con quien
deseemos.

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

Si empiezas a quedarte sin espacio en el Editor de bloques, puedes minimizar cada bloque
haciendo clic con el botón derecho del ratón sobre él, y seleccionando la opción pulsando en el
cuadro que aparece en la parte superior izquierda

Programa completo

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

Compartí tu aplicación
Una vez que terminemos guardamos el proyecto y lo descargamos en nuestro celular de
la siguiente manera:

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

Entonces me genera un código QR para que yo lo pueda leer desde la aplicación
previamente instalada en mi celular “MIT AI2 Companion” y así probar la aplicación que
diseñamos.

Inspirarse en otros proyectos

Existen muchos proyectos en Internet para inspirarse y experimentar. Sugerimos

recorrer los siguientes sitios con sus estudiantes para inspirarse y generar nuevos
proyectos:

Proyecto para implementar en el aula:

Xilófono casero con botellas y agua

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

¿Qué se necesita?

 Botellas de vidrio
 1 palito de metal o madera

Instrucciones

¡Muy importante! Este instrumento debe ser realizado con un adulto al lado en todo
momento.

 Hay que juntar alrededor de 8 botellas de vidrio grueso para que no se rompan al
tocarlas.
 Colocad las botellas una al lado de la otra formando una línea e ir llenándolas con
agua, cada vez un poco menos. Es decir, que la primera esté llena, la segunda un
poco menos, la tercera un poco menos que la segunda y así sucesivamente hasta
llegar a la última que quedará casi vacía.
 Para lograr música con estas botellas hay que golpearlas suavemente y de cada
una obtendremos un sonido diferente.
 A cada botella se le puede agregar un poco de colorante o témpera, para que
cada una tenga un color diferente y quede genial.

Posibilidad de Adaptación en el aula:

En caso de que lo quieras implementar en el aula con tus alumnos, a
continuación, te dejamos una rúbrica de evaluación:

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

 REQUERIMIENTOS PUNTOS
Maquetado de la aplicación 25
Cargar archivo multimedia (.wav) 25
Utilización de procedimientos 25
Pasar argumentos 25
TOTAL

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]